fix(theme): restore theme dev analytics by resolving backgroundJobPromise on exit

Author: EvilGenius13

packages/theme/src/cli/services/dev.test.ts

@@ -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'})
@@ -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'})
@@ -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'})
@@ -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'})
@@ -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'})
@@ -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'})
@@ -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'})
@@ -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'})

packages/theme/src/cli/services/dev.ts

@@ -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'
 
@@ -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([
@@ -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) {
@@ -180,6 +200,7 @@ export function createKeypressHandler(
       case 'g':
         debouncedOpenURL(urls.giftCard, 'gift card preview')
         break
+      case undefined:
       default:
         break
     }

packages/theme/src/cli/utilities/theme-environment/theme-environment.ts

@@ -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)
@@ -33,6 +37,7 @@ export function setupDevServer(theme: Theme, ctx: DevServerContext) {
     dispatchEvent: server.dispatch,
     renderDevSetupProgress: envSetup.renderProgress,
     backgroundJobPromise,
+    resolveBackgroundJob,
   }
 }