Merge branch 'main' into rename-doc-scripts

Author: gonzaloriestra

.github/workflows/docs.yml .github/workflows/pages.yml.github/workflows/docs.yml renamed to .github/workflows/pages.yml

@@ -3,6 +3,10 @@ name: Build and Deploy GitHub Pages Site
 on:
   push:
     branches: ["main"]
+    paths:
+      - packages/cli-kit/package.json
+      - "docs/**"
+
   workflow_dispatch:
 
 # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages

dev.yml

@@ -58,3 +58,9 @@ commands:
   spin:
     desc: 'Run commands in spin context'
     run: bin/spin
+
+check:
+  build: pnpm build
+  type-check: pnpm nx affected --target=type-check
+  lint: pnpm nx affected --target=lint
+  unit-tests: pnpm nx affected --target=test --exclude=features

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

@@ -1,4 +1,9 @@
-import {setupDevSessionProcess, pushUpdatesForDevSession, resetDevSessionStatus} from './dev-session.js'
+import {
+  setupDevSessionProcess,
+  pushUpdatesForDevSession,
+  resetDevSessionStatus,
+  devSessionStatus,
+} from './dev-session.js'
 import {DeveloperPlatformClient} from '../../../utilities/developer-platform-client.js'
 import {AppLinkedInterface} from '../../../models/app/app.js'
 import {AppEventWatcher} from '../app-events/app-event-watcher.js'
@@ -7,6 +12,7 @@ import {
   testAppAccessConfigExtension,
   testAppLinked,
   testDeveloperPlatformClient,
+  testFlowActionExtension,
   testUIExtension,
   testWebhookExtensions,
 } from '../../../models/app/app.test-data.js'
@@ -35,6 +41,8 @@ describe('setupDevSessionProcess', () => {
       organizationId: 'org123',
       appId: 'app123',
       appWatcher: {} as AppEventWatcher,
+      appPreviewURL: 'https://test.preview.url',
+      appLocalProxyURL: 'https://test.local.url',
     }
 
     // When
@@ -54,6 +62,8 @@ describe('setupDevSessionProcess', () => {
         organizationId: options.organizationId,
         appId: options.appId,
         appWatcher: options.appWatcher,
+        appPreviewURL: options.appPreviewURL,
+        appLocalProxyURL: options.appLocalProxyURL,
       },
     })
   })
@@ -84,6 +94,8 @@ describe('pushUpdatesForDevSession', () => {
       storeFqdn: 'test.myshopify.com',
       appId: 'app123',
       organizationId: 'org123',
+      appPreviewURL: 'https://test.preview.url',
+      appLocalProxyURL: 'https://test.local.url',
     }
   })
 
@@ -205,4 +217,60 @@ describe('pushUpdatesForDevSession', () => {
     expect(developerPlatformClient.refreshToken).toHaveBeenCalledOnce()
     expect(developerPlatformClient.devSessionUpdate).toHaveBeenCalledTimes(2)
   })
+
+  test('updates preview URL when extension is previewable', async () => {
+    // Given
+    const extension = await testUIExtension({type: 'ui_extension'})
+    const newApp = testAppLinked({allExtensions: [extension]})
+
+    // When
+    await pushUpdatesForDevSession({stderr, stdout, abortSignal: abortController.signal}, options)
+    await appWatcher.start({stdout, stderr, signal: abortController.signal})
+    await flushPromises()
+    appWatcher.emit('all', {app: newApp, extensionEvents: [{type: 'updated', extension}]})
+    await flushPromises()
+
+    // Then
+    expect(devSessionStatus().devSessionPreviewURL).toBe(options.appLocalProxyURL)
+  })
+
+  test('updates preview URL to appPreviewURL when no previewable extensions', async () => {
+    // Given
+    const extension = await testFlowActionExtension()
+    const newApp = testAppLinked({allExtensions: [extension]})
+
+    // When
+    await pushUpdatesForDevSession({stderr, stdout, abortSignal: abortController.signal}, options)
+    await appWatcher.start({stdout, stderr, signal: abortController.signal})
+    await flushPromises()
+    appWatcher.emit('all', {app: newApp, extensionEvents: [{type: 'updated', extension}]})
+    await flushPromises()
+
+    // Then
+    expect(devSessionStatus().devSessionPreviewURL).toBe(options.appPreviewURL)
+  })
+
+  test('resets dev session status when calling resetDevSessionStatus', async () => {
+    // Given
+    const extension = await testUIExtension({type: 'ui_extension'})
+    const newApp = testAppLinked({allExtensions: [extension]})
+
+    // When
+    await pushUpdatesForDevSession({stderr, stdout, abortSignal: abortController.signal}, options)
+    await appWatcher.start({stdout, stderr, signal: abortController.signal})
+    await flushPromises()
+    appWatcher.emit('all', {app: newApp, extensionEvents: [{type: 'updated', extension}]})
+    await flushPromises()
+
+    // Then
+    expect(devSessionStatus().isDevSessionReady).toBe(true)
+    expect(devSessionStatus().devSessionPreviewURL).toBeDefined()
+
+    // When
+    resetDevSessionStatus()
+
+    // Then
+    expect(devSessionStatus().isDevSessionReady).toBe(false)
+    expect(devSessionStatus().devSessionPreviewURL).toBeUndefined()
+  })
 })

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

@@ -28,6 +28,8 @@ interface DevSessionOptions {
   organizationId: string
   appId: string
   appWatcher: AppEventWatcher
+  appPreviewURL: string
+  appLocalProxyURL: string
 }
 
 interface DevSessionProcessOptions extends DevSessionOptions {
@@ -65,15 +67,18 @@ let bundleControllers: AbortController[] = []
 // Current status of the dev session
 // Since the watcher can emit events before the dev session is ready, we need to keep track of the status
 let isDevSessionReady = false
+let devSessionPreviewURL: string | undefined
 
 export function devSessionStatus() {
   return {
     isDevSessionReady,
+    devSessionPreviewURL,
   }
 }
 
 export function resetDevSessionStatus() {
   isDevSessionReady = false
+  devSessionPreviewURL = undefined
 }
 
 export async function setupDevSessionProcess({
@@ -116,6 +121,8 @@ export const pushUpdatesForDevSession: DevProcessFunction<DevSessionOptions> = a
       const anyError = event.extensionEvents.some((eve) => eve.buildResult?.status === 'error')
       if (anyError) return
 
+      await updatePreviewURL(processOptions, event)
+
       // Cancel any ongoing bundle and upload process
       bundleControllers.forEach((controller) => controller.abort())
       // Remove aborted controllers from array:
@@ -363,3 +370,8 @@ async function printLogMessage(message: string, stdout: Writable, prefix?: strin
     stdout.write(message)
   })
 }
+
+async function updatePreviewURL(options: DevSessionProcessOptions, event: AppEvent) {
+  const hasPreview = event.app.allExtensions.filter((ext) => ext.isPreviewable).length > 0
+  devSessionPreviewURL = hasPreview ? options.appLocalProxyURL : options.appPreviewURL
+}

packages/app/src/cli/services/dev/processes/previewable-extension.ts

@@ -81,9 +81,6 @@ export async function setupPreviewableExtensionsProcess({
   checkoutCartUrl?: string
 }): Promise<PreviewableExtensionProcess | undefined> {
   const previewableExtensions = allExtensions.filter((ext) => ext.isPreviewable)
-  if (previewableExtensions.length === 0) {
-    return
-  }
 
   const cartUrl = await buildCartURLIfNeeded(previewableExtensions, storeFqdn, checkoutCartUrl)
 

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

@@ -337,7 +337,7 @@ describe('setup-dev-processes', () => {
       graphiqlKey: 'somekey',
     })
 
-    expect(res.processes[2]).toMatchObject({
+    expect(res.processes[3]).toMatchObject({
       type: 'dev-session',
       prefix: 'dev-session',
       function: pushUpdatesForDevSession,

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

@@ -90,6 +90,11 @@ export async function setupDevProcesses({
   const reloadedApp = await reloadApp(localApp)
   const appWatcher = new AppEventWatcher(reloadedApp, network.proxyUrl)
 
+  // Decide on the appropriate preview URL for a session with these processes
+  const anyPreviewableExtensions = reloadedApp.allExtensions.some((ext) => ext.isPreviewable)
+  const devConsoleURL = `${network.proxyUrl}/extensions/dev-console`
+  const previewUrl = anyPreviewableExtensions ? devConsoleURL : appPreviewUrl
+
   const processes = [
     ...(await setupWebProcesses({
       webs: reloadedApp.webs,
@@ -136,6 +141,8 @@ export async function setupDevProcesses({
           organizationId: remoteApp.organizationId,
           storeFqdn,
           appWatcher,
+          appPreviewURL: appPreviewUrl,
+          appLocalProxyURL: devConsoleURL,
         })
       : await setupDraftableExtensionsProcess({
           localApp: reloadedApp,
@@ -180,10 +187,6 @@ export async function setupDevProcesses({
   // Add http server proxy & configure ports, for processes that need it
   const processesWithProxy = await setPortsAndAddProxyProcess(processes, network.proxyPort)
 
-  // Decide on the appropriate preview URL for a session with these processes
-  const anyPreviewableExtensions = processesWithProxy.filter((process) => process.type === 'previewable-extension')
-  const previewUrl = anyPreviewableExtensions.length > 0 ? `${network.proxyUrl}/extensions/dev-console` : appPreviewUrl
-
   return {
     processes: processesWithProxy,
     previewUrl,

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

@@ -43,7 +43,7 @@ const developerPreview = {
 
 describe('Dev', () => {
   beforeEach(() => {
-    vi.mocked(devSessionStatus).mockReturnValue({isDevSessionReady: true})
+    vi.mocked(devSessionStatus).mockReturnValue({isDevSessionReady: true, devSessionPreviewURL: undefined})
   })
 
   test('renders a stream of concurrent outputs from sub-processes, shortcuts and a preview url', async () => {
@@ -977,7 +977,7 @@ describe('Dev', () => {
 
   test('updates UI when devSessionEnabled changes from false to true', async () => {
     // Given
-    vi.mocked(devSessionStatus).mockReturnValue({isDevSessionReady: false})
+    vi.mocked(devSessionStatus).mockReturnValue({isDevSessionReady: false, devSessionPreviewURL: undefined})
 
     const renderInstance = render(
       <Dev
@@ -1012,7 +1012,7 @@ describe('Dev', () => {
     `)
 
     // When dev session becomes ready
-    vi.mocked(devSessionStatus).mockReturnValue({isDevSessionReady: true})
+    vi.mocked(devSessionStatus).mockReturnValue({isDevSessionReady: true, devSessionPreviewURL: 'https://shopify.com'})
 
     // Wait for the polling interval to update the UI
     await waitForContent(renderInstance, 'preview in your browser')
@@ -1034,6 +1034,90 @@ describe('Dev', () => {
     // unmount so that polling is cleared after every test
     renderInstance.unmount()
   })
+
+  test('updates preview URL when devSessionStatus provides a new URL', async () => {
+    // Given
+    const initialPreviewUrl = 'https://shopify.com'
+    const newPreviewUrl = 'https://my-new-preview-url.shopify.com'
+    vi.mocked(devSessionStatus).mockReturnValue({isDevSessionReady: true, devSessionPreviewURL: undefined})
+
+    const renderInstance = render(
+      <Dev
+        processes={[]}
+        abortController={new AbortController()}
+        previewUrl={initialPreviewUrl}
+        graphiqlUrl="https://graphiql.shopify.com"
+        graphiqlPort={1234}
+        app={{
+          ...testApp,
+          developerPlatformClient: {
+            ...testDeveloperPlatformClient(),
+            supportsDevSessions: true,
+          },
+        }}
+        developerPreview={developerPreview}
+        shopFqdn="mystore.shopify.io"
+      />,
+    )
+
+    // Initial state should show the default preview URL
+    expect(unstyled(renderInstance.lastFrame()!)).toContain(`Preview URL: ${initialPreviewUrl}`)
+
+    // When dev session provides a new preview URL
+    vi.mocked(devSessionStatus).mockReturnValue({isDevSessionReady: true, devSessionPreviewURL: newPreviewUrl})
+
+    // Wait for the polling interval to update the UI
+    await waitForContent(renderInstance, newPreviewUrl)
+
+    // Then - status message should show the new preview URL
+    expect(unstyled(renderInstance.lastFrame()!)).toContain(`Preview URL: ${newPreviewUrl}`)
+
+    // unmount so that polling is cleared after every test
+    renderInstance.unmount()
+  })
+
+  test('opens the updated preview URL when p is pressed after URL changes', async () => {
+    // Given
+    const initialPreviewUrl = 'https://shopify.com'
+    const newPreviewUrl = 'https://my-new-preview-url.shopify.com'
+    vi.mocked(devSessionStatus).mockReturnValue({isDevSessionReady: true, devSessionPreviewURL: undefined})
+
+    const renderInstance = render(
+      <Dev
+        processes={[]}
+        abortController={new AbortController()}
+        previewUrl={initialPreviewUrl}
+        graphiqlUrl="https://graphiql.shopify.com"
+        graphiqlPort={1234}
+        app={{
+          ...testApp,
+          developerPlatformClient: {
+            ...testDeveloperPlatformClient(),
+            supportsDevSessions: true,
+          },
+        }}
+        developerPreview={developerPreview}
+        shopFqdn="mystore.shopify.io"
+      />,
+    )
+
+    // Initial state should show the default preview URL
+    expect(unstyled(renderInstance.lastFrame()!)).toContain(`Preview URL: ${initialPreviewUrl}`)
+
+    // When dev session provides a new preview URL
+    vi.mocked(devSessionStatus).mockReturnValue({isDevSessionReady: true, devSessionPreviewURL: newPreviewUrl})
+
+    // Wait for the polling interval to update the UI
+    await waitForContent(renderInstance, newPreviewUrl)
+
+    await waitForInputsToBeReady()
+    await sendInputAndWait(renderInstance, 100, 'p')
+
+    // Then
+    expect(vi.mocked(openURL)).toHaveBeenNthCalledWith(1, newPreviewUrl)
+
+    renderInstance.unmount()
+  })
 })
 
 describe('calculatePrefixColumnSize', () => {