Rename app preview to dev preview everywhere

Author: gonzaloriestra

docs-shopify.dev/commands/app-dev-clean.doc.ts

@@ -3,11 +3,11 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
 
 const data: ReferenceEntityTemplateSchema = {
   name: 'app dev clean',
-  description: `Stop the app preview that was started with \`shopify app dev\`.
+  description: `Stop the dev preview that was started with \`shopify app dev\`.
 
   It restores the app's active version to the selected development store.
   `,
-  overviewPreviewDescription: `Cleans up the app preview from the selected store.`,
+  overviewPreviewDescription: `Cleans up the dev preview from the selected store.`,
   type: 'command',
   isVisualComponent: false,
   defaultExample: {

docs-shopify.dev/generated/generated_docs_data.json

@@ -515,8 +515,8 @@
   },
   {
     "name": "app dev clean",
-    "description": "Stop the app preview that was started with `shopify app dev`.\n\n  It restores the app's active version to the selected development store.\n  ",
-    "overviewPreviewDescription": "Cleans up the app preview from the selected store.",
+    "description": "Stop the dev preview that was started with `shopify app dev`.\n\n  It restores the app's active version to the selected development store.\n  ",
+    "overviewPreviewDescription": "Cleans up the dev preview from the selected store.",
     "type": "command",
     "isVisualComponent": false,
     "defaultExample": {

packages/app/src/cli/commands/app/dev/clean.ts

@@ -8,9 +8,9 @@ import {Flags} from '@oclif/core'
 import {normalizeStoreFqdn} from '@shopify/cli-kit/node/context/fqdn'
 
 export default class DevClean extends AppLinkedCommand {
-  static summary = 'Cleans up the app preview from the selected store.'
+  static summary = 'Cleans up the dev preview from the selected store.'
 
-  static descriptionWithMarkdown = `Stop the app preview that was started with \`shopify app dev\`.
+  static descriptionWithMarkdown = `Stop the dev preview that was started with \`shopify app dev\`.
 
   It restores the app's active version to the selected development store.
   `

packages/app/src/cli/services/dev-clean.test.ts

@@ -18,7 +18,7 @@ const mockOptions = {
 }
 
 describe('devClean', () => {
-  test('successfully stops app preview and renders success message', async () => {
+  test('successfully stops dev preview and renders success message', async () => {
     // Given
     mockOptions.appContextResult.developerPlatformClient = customDevPlatformClient()
 
@@ -27,9 +27,9 @@ describe('devClean', () => {
 
     // Then
     expect(renderSuccess).toHaveBeenCalledWith({
-      headline: 'App preview stopped.',
+      headline: 'Dev preview stopped.',
       body: [
-        `The app preview has been stopped on ${mockStore.shopDomain} and the app's active version has been restored.`,
+        `The dev preview has been stopped on ${mockStore.shopDomain} and the app's active version has been restored.`,
         'You can start it again with',
         {command: 'shopify app dev'},
       ],
@@ -38,19 +38,19 @@ describe('devClean', () => {
 
   test('throws AbortError when devSessionDelete returns user errors', async () => {
     // Given
-    const errorMessage = 'Failed to stop app preview'
+    const errorMessage = 'Failed to stop dev preview'
     mockOptions.appContextResult.developerPlatformClient = customDevPlatformClient(errorMessage)
 
     // When/Then
-    await expect(devClean(mockOptions)).rejects.toThrow(`Failed to stop the app preview: ${errorMessage}`)
+    await expect(devClean(mockOptions)).rejects.toThrow(`Failed to stop the dev preview: ${errorMessage}`)
   })
 
   test('throws AbortError when devSessions are not supported', async () => {
     // Given
     mockOptions.appContextResult.developerPlatformClient = customDevPlatformClient(undefined, false)
 
     // When/Then
-    await expect(devClean(mockOptions)).rejects.toThrow('App preview is not supported for this app.')
+    await expect(devClean(mockOptions)).rejects.toThrow('Dev preview is not supported for this app.')
   })
 })
 

packages/app/src/cli/services/dev-clean.ts

@@ -14,21 +14,21 @@ export async function devClean(options: DevCleanOptions) {
 
   if (!client.supportsDevSessions) {
     throw new AbortError(
-      `App preview is not supported for this app. It's valid only for apps created on the Next-Gen Dev Platform.`,
+      `Dev preview is not supported for this app. It's valid only for apps created on the Next-Gen Dev Platform.`,
     )
   }
 
   const result = await client.devSessionDelete({shopFqdn: options.store.shopDomain, appId: remoteApp.id})
 
   if (result.devSessionDelete?.userErrors.length) {
     const errors = result.devSessionDelete.userErrors.map((error) => error.message).join('\n')
-    throw new AbortError(`Failed to stop the app preview: ${errors}`)
+    throw new AbortError(`Failed to stop the dev preview: ${errors}`)
   }
 
   renderSuccess({
-    headline: 'App preview stopped.',
+    headline: 'Dev preview stopped.',
     body: [
-      `The app preview has been stopped on ${options.store.shopDomain} and the app's active version has been restored.`,
+      `The dev preview has been stopped on ${options.store.shopDomain} and the app's active version has been restored.`,
       'You can start it again with',
       {command: 'shopify app dev'},
     ],

packages/app/src/cli/services/dev/processes/dev-session/dev-session-process.test.ts

@@ -129,7 +129,7 @@ describe('pushUpdatesForDevSession', () => {
     await flushPromises()
 
     // Then
-    expect(stdout.write).toHaveBeenCalledWith(expect.stringContaining('Updated app preview on test.myshopify.com'))
+    expect(stdout.write).toHaveBeenCalledWith(expect.stringContaining('Updated dev preview on test.myshopify.com'))
     expect(spyContext).toHaveBeenCalledWith({outputPrefix: 'test-ui-extension', stripAnsi: false}, expect.anything())
 
     // In theory this shouldn't be necessary, but vitest doesn't restore spies automatically.
@@ -160,7 +160,7 @@ describe('pushUpdatesForDevSession', () => {
 
     // Then
     expect(stdout.write).toHaveBeenCalledWith(
-      expect.stringContaining('Change detected, but app preview is not ready yet.'),
+      expect.stringContaining('Change detected, but dev preview is not ready yet.'),
     )
     expect(developerPlatformClient.devSessionCreate).not.toHaveBeenCalled()
     expect(developerPlatformClient.devSessionUpdate).not.toHaveBeenCalled()
@@ -198,7 +198,7 @@ describe('pushUpdatesForDevSession', () => {
     await flushPromises()
 
     // Then
-    expect(stdout.write).toHaveBeenCalledWith(expect.stringContaining('Updated app preview on test.myshopify.com'))
+    expect(stdout.write).toHaveBeenCalledWith(expect.stringContaining('Updated dev preview on test.myshopify.com'))
     expect(stdout.write).toHaveBeenCalledWith(
       expect.stringContaining('Access scopes auto-granted: read_products, write_products'),
     )
@@ -281,13 +281,13 @@ describe('pushUpdatesForDevSession', () => {
     // When
     await pushUpdatesForDevSession({stderr, stdout, abortSignal: abortController.signal}, options)
 
-    expect(stdout.write).toHaveBeenCalledWith(expect.stringContaining(`Preparing app preview on ${options.storeFqdn}`))
+    expect(stdout.write).toHaveBeenCalledWith(expect.stringContaining(`Preparing dev preview on ${options.storeFqdn}`))
 
     const statusSpy = vi.spyOn(devSessionStatusManager, 'setMessage')
 
     // Then - Initial loading state
     expect(devSessionStatusManager.status.statusMessage).toEqual({
-      message: 'Preparing app preview',
+      message: 'Preparing dev preview',
       type: 'loading',
     })
 
@@ -352,7 +352,7 @@ describe('pushUpdatesForDevSession', () => {
 
     // Then
     expect(devSessionStatusManager.status.statusMessage).toEqual({
-      message: 'Error updating app preview',
+      message: 'Error updating dev preview',
       type: 'error',
     })
   })
@@ -558,7 +558,7 @@ describe('pushUpdatesForDevSession', () => {
     // Verify the update was attempted and failed
     expect(developerPlatformClient.devSessionUpdate).toHaveBeenCalledTimes(1)
     expect(stdout.write).toHaveBeenCalledWith(expect.stringContaining('Simulated failure'))
-    expect(devSessionStatusManager.status.statusMessage?.message).toBe('Error updating app preview')
+    expect(devSessionStatusManager.status.statusMessage?.message).toBe('Error updating dev preview')
 
     // Second event (should include retry of first failed event)
     appWatcher.emit('all', {app, extensionEvents: [{type: 'updated', extension: extension2}]})
@@ -578,7 +578,7 @@ describe('pushUpdatesForDevSession', () => {
     expect(secondCallPayload.manifest.modules.length).toBe(2)
 
     // Verify success status was set
-    expect(stdout.write).toHaveBeenCalledWith(expect.stringContaining('Updated app preview on test.myshopify.com'))
+    expect(stdout.write).toHaveBeenCalledWith(expect.stringContaining('Updated dev preview on test.myshopify.com'))
     expect(devSessionStatusManager.status.statusMessage?.message).toBe('Updated')
   })
 })

packages/app/src/cli/services/dev/processes/dev-session/dev-session-status-manager.test.ts

@@ -120,7 +120,7 @@ describe('DevSessionStatusManager', () => {
       expect(listener).toHaveBeenCalledWith(
         expect.objectContaining({
           statusMessage: {
-            message: 'Preparing app preview',
+            message: 'Preparing dev preview',
             type: 'loading',
           },
         }),

packages/app/src/cli/services/dev/processes/dev-session/dev-session-status-manager.ts

@@ -6,11 +6,11 @@ export type DevSessionStatusMessageType = 'error' | 'success' | 'loading'
 const DevSessionStaticMessages = {
   BUILD_ERROR: {message: 'Build error. Please review your code and try again', type: 'error'},
   READY: {message: 'Ready, watching for changes in your app', type: 'success'},
-  LOADING: {message: 'Preparing app preview', type: 'loading'},
+  LOADING: {message: 'Preparing dev preview', type: 'loading'},
   UPDATED: {message: 'Updated', type: 'success'},
   VALIDATION_ERROR: {message: 'Validation error in your app configuration', type: 'error'},
-  REMOTE_ERROR: {message: 'Error updating app preview', type: 'error'},
-  CHANGE_DETECTED: {message: 'Change detected, updating app preview', type: 'loading'},
+  REMOTE_ERROR: {message: 'Error updating dev preview', type: 'error'},
+  CHANGE_DETECTED: {message: 'Change detected, updating dev preview', type: 'loading'},
 } as const
 
 export interface DevSessionStatus {

packages/app/src/cli/services/dev/processes/dev-session/dev-session.ts

@@ -52,7 +52,7 @@ export class DevSession {
   }
 
   private async start() {
-    await this.logger.info(`Preparing app preview on ${this.options.storeFqdn}`)
+    await this.logger.info(`Preparing dev preview on ${this.options.storeFqdn}`)
     this.statusManager.setMessage('LOADING')
 
     this.appWatcher
@@ -148,7 +148,7 @@ export class DevSession {
     const errors = this.parseBuildErrors(event)
     if (errors.length) {
       await this.logger.logMultipleErrors(errors)
-      throw new AbortError('App preview aborted, build errors detected in extensions')
+      throw new AbortError('Dev preview aborted, build errors detected in extensions')
     }
     const result = await this.bundleExtensionsAndUpload(event)
     await this.handleDevSessionResult(result, event)
@@ -166,7 +166,7 @@ export class DevSession {
    */
   private async validateAppEvent(event: AppEvent): Promise<boolean> {
     if (!this.statusManager.status.isReady) {
-      await this.logger.warning('Change detected, but app preview is not ready yet.')
+      await this.logger.warning('Change detected, but dev preview is not ready yet.')
       return false
     }
 
@@ -209,7 +209,7 @@ export class DevSession {
    */
   private async handleDevSessionResult(result: DevSessionResult, event?: AppEvent) {
     if (result.status === 'updated') {
-      await this.logger.success(`✅ Updated app preview on ${this.options.storeFqdn}`)
+      await this.logger.success(`✅ Updated dev preview on ${this.options.storeFqdn}`)
       await this.logger.logExtensionUpdateMessages(event)
       await this.setUpdatedStatusMessage()
     } else if (result.status === 'created') {
@@ -218,7 +218,7 @@ export class DevSession {
       await this.logger.logExtensionUpdateMessages(event)
       this.statusManager.setMessage('READY')
     } else if (result.status === 'aborted') {
-      await this.logger.debug('❌ App preview update aborted (new change detected or error during update)')
+      await this.logger.debug('❌ Dev preview update aborted (new change detected or error during update)')
     } else if (result.status === 'remote-error' || result.status === 'unknown-error') {
       await this.logger.logUserErrors(result.error, event?.app.allExtensions ?? [])
       if (result.error instanceof Error && result.error.cause === 'validation-error') {
@@ -232,7 +232,7 @@ export class DevSession {
     // If we failed to create a session, exit the process. Don't throw an error in tests as it can't be caught due to the
     // async nature of the process.
     if (!this.statusManager.status.isReady && !isUnitTest()) {
-      throw new AbortError('Failed to start app preview.')
+      throw new AbortError('Failed to start dev preview.')
     }
   }
 

packages/app/src/cli/services/dev/ui/components/DevSessionUI.test.tsx

@@ -198,7 +198,7 @@ describe('DevSessionUI', () => {
     renderInstance.unmount()
   })
 
-  test('shows shutting down message when aborted before app preview is ready', async () => {
+  test('shows shutting down message when aborted before dev preview is ready', async () => {
     // Given
     const abortController = new AbortController()
     devSessionStatusManager.updateStatus({isReady: false})
@@ -222,7 +222,7 @@ describe('DevSessionUI', () => {
     renderInstance.unmount()
   })
 
-  test('shows persistent dev info when aborting and app preview is ready', async () => {
+  test('shows persistent dev info when aborting and dev preview is ready', async () => {
     // Given
     const abortController = new AbortController()
 
@@ -251,7 +251,7 @@ describe('DevSessionUI', () => {
     expect(finalOutput).toContain('A preview of your development changes is still available')
     expect(finalOutput).toContain('mystore.myshopify.com')
     expect(finalOutput).toContain('shopify app dev clean')
-    expect(finalOutput).toContain('Learn more about app previews')
+    expect(finalOutput).toContain('Learn more about dev previews')
 
     // unmount so that polling is cleared after every test
     renderInstance.unmount()
@@ -300,7 +300,7 @@ describe('DevSessionUI', () => {
     expect(output).toContain('A preview of your development changes is still available')
     expect(output).toContain('mystore.myshopify.com')
     expect(output).toContain('shopify app dev clean')
-    expect(output).toContain('Learn more about app previews')
+    expect(output).toContain('Learn more about dev previews')
 
     // Tab interface should be present
     expect(output).toContain('(d) Dev status')
@@ -331,7 +331,7 @@ describe('DevSessionUI', () => {
     expect(finalOutput).toContain('A preview of your development changes is still available')
     expect(finalOutput).toContain('mystore.myshopify.com')
     expect(finalOutput).toContain('shopify app dev clean')
-    expect(finalOutput).toContain('Learn more about app previews')
+    expect(finalOutput).toContain('Learn more about dev previews')
 
     // Error message should be shown
     expect(finalOutput).toContain('something went wrong')