Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/fix-theme-dev-analytics.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@shopify/theme': patch
---

Fix analytics not being sent when exiting `theme dev` via Ctrl+C. The process now waits for the post-run analytics hook to complete before terminating.
29 changes: 21 additions & 8 deletions packages/theme/src/cli/services/dev.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ describe('createKeypressHandler', () => {

test('opens localhost when "t" is pressed', () => {
// Given
const handler = createKeypressHandler(urls, ctx)
const handler = createKeypressHandler(urls, ctx, vi.fn())

// When
handler('t', {name: 't'})
Expand All @@ -135,7 +135,7 @@ describe('createKeypressHandler', () => {

test('opens theme preview when "p" is pressed', () => {
// Given
const handler = createKeypressHandler(urls, ctx)
const handler = createKeypressHandler(urls, ctx, vi.fn())

// When
handler('p', {name: 'p'})
Expand All @@ -146,7 +146,7 @@ describe('createKeypressHandler', () => {

test('opens theme editor when "e" is pressed', () => {
// Given
const handler = createKeypressHandler(urls, ctx)
const handler = createKeypressHandler(urls, ctx, vi.fn())

// When
handler('e', {name: 'e'})
Expand All @@ -157,7 +157,7 @@ describe('createKeypressHandler', () => {

test('opens gift card preview when "g" is pressed', () => {
// Given
const handler = createKeypressHandler(urls, ctx)
const handler = createKeypressHandler(urls, ctx, vi.fn())

// When
handler('g', {name: 'g'})
Expand All @@ -169,7 +169,7 @@ describe('createKeypressHandler', () => {
test('appends preview path to theme editor URL when lastRequestedPath is not "/"', () => {
// Given
const ctxWithPath = {lastRequestedPath: '/products/test-product'}
const handler = createKeypressHandler(urls, ctxWithPath)
const handler = createKeypressHandler(urls, ctxWithPath, vi.fn())

// When
handler('e', {name: 'e'})
Expand All @@ -182,7 +182,7 @@ describe('createKeypressHandler', () => {

test('debounces rapid keypresses - only opens URL once during debounce window', () => {
// Given
const handler = createKeypressHandler(urls, ctx)
const handler = createKeypressHandler(urls, ctx, vi.fn())

// When
handler('t', {name: 't'})
Expand All @@ -197,7 +197,7 @@ describe('createKeypressHandler', () => {

test('allows keypresses after debounce period expires', () => {
// Given
const handler = createKeypressHandler(urls, ctx)
const handler = createKeypressHandler(urls, ctx, vi.fn())

// When
handler('t', {name: 't'})
Expand All @@ -220,7 +220,7 @@ describe('createKeypressHandler', () => {

test('debounces different keys during the same debounce window', () => {
// Given
const handler = createKeypressHandler(urls, ctx)
const handler = createKeypressHandler(urls, ctx, vi.fn())

// When
handler('t', {name: 't'})
Expand All @@ -232,4 +232,17 @@ describe('createKeypressHandler', () => {
expect(openURL).toHaveBeenCalledTimes(1)
expect(openURL).toHaveBeenCalledWith(urls.local)
})

test('calls onClose when Ctrl+C is pressed', () => {
// Given
const onClose = vi.fn()
const handler = createKeypressHandler(urls, ctx, onClose)

// When
handler('', {ctrl: true, name: 'c'})

// Then
expect(onClose).toHaveBeenCalledOnce()
expect(openURL).not.toHaveBeenCalled()
})
})
27 changes: 24 additions & 3 deletions packages/theme/src/cli/services/dev.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {Theme} from '@shopify/cli-kit/node/themes/types'
import {checkPortAvailability, getAvailableTCPPort} from '@shopify/cli-kit/node/tcp'
import {AbortError} from '@shopify/cli-kit/node/error'
import {openURL} from '@shopify/cli-kit/node/system'
import {postRunHookHasCompleted} from '@shopify/cli-kit/node/hooks/postrun'
import {debounce} from '@shopify/cli-kit/common/function'
import chalk from '@shopify/cli-kit/node/colors'

Expand Down Expand Up @@ -128,11 +129,14 @@ export async function dev(options: DevOptions) {
},
}

const {serverStart, renderDevSetupProgress, backgroundJobPromise} = setupDevServer(options.theme, ctx)
const {serverStart, renderDevSetupProgress, backgroundJobPromise, resolveBackgroundJob} = setupDevServer(
options.theme,
ctx,
)

readline.emitKeypressEvents(process.stdin)

const keypressHandler = createKeypressHandler(urls, ctx)
const keypressHandler = createKeypressHandler(urls, ctx, resolveBackgroundJob)
process.stdin.on('keypress', keypressHandler)

await Promise.all([
Expand All @@ -149,17 +153,33 @@ export async function dev(options: DevOptions) {
}
}),
])

// Wait for the post-run hook (analytics) to complete, with a 5s timeout
let totalTime = 0
await new Promise<void>((resolve) => {
const interval = setInterval(() => {
if (postRunHookHasCompleted() || totalTime > 5000) {
clearInterval(interval)
resolve()
}
totalTime += 100
}, 100)
})

process.exit(0)
}

export function createKeypressHandler(
urls: {local: string; giftCard: string; themeEditor: string; preview: string},
ctx: {lastRequestedPath: string},
onClose: () => void,
) {
const debouncedOpenURL = debounce(openURLSafely, 100, {leading: true, trailing: false})

return (_str: string, key: {ctrl?: boolean; name?: string}) => {
if (key.ctrl && key.name === 'c') {
process.exit()
onClose()
return
}

switch (key.name) {
Expand All @@ -180,6 +200,7 @@ export function createKeypressHandler(
case 'g':
debouncedOpenURL(urls.giftCard, 'gift card preview')
break
case undefined:
default:
break
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,11 @@ import type {Checksum, Theme} from '@shopify/cli-kit/node/themes/types'
import type {DevServerContext} from './types.js'

export function setupDevServer(theme: Theme, ctx: DevServerContext) {
const {promise: backgroundJobPromise, reject: rejectBackgroundJob} = promiseWithResolvers<never>()
const {
promise: backgroundJobPromise,
resolve: resolveBackgroundJob,
reject: rejectBackgroundJob,
} = promiseWithResolvers<void>()

const watcherPromise = setupInMemoryTemplateWatcher(theme, ctx)
const envSetup = ensureThemeEnvironmentSetup(theme, ctx, rejectBackgroundJob)
Expand All @@ -33,6 +37,7 @@ export function setupDevServer(theme: Theme, ctx: DevServerContext) {
dispatchEvent: server.dispatch,
renderDevSetupProgress: envSetup.renderProgress,
backgroundJobPromise,
resolveBackgroundJob,
}
}

Expand Down
Loading