Merge branch 'main' into upgrade-graphql

Author: gonzaloriestra

package.json

@@ -39,7 +39,7 @@
   },
   "devDependencies": {
     "@bugsnag/source-maps": "^2.3.1",
-    "@changesets/cli": "2.26.2",
+    "@changesets/cli": "2.27.12",
     "@graphql-codegen/cli": "5.0.4",
     "@graphql-codegen/near-operation-file-preset": "3.0.0",
     "@nx/eslint-plugin": "19.8.14",
@@ -103,7 +103,8 @@
     "supports-hyperlinks": "3.1.0",
     "@graphql-tools/utils": "10.7.2",
     "@shopify/cli-hydrogen>@shopify/cli-kit": "link:./packages/cli-kit",
-    "@shopify/cli-hydrogen>@shopify/plugin-cloudflare": "link:./packages/plugin-cloudflare"
+    "@shopify/cli-hydrogen>@shopify/plugin-cloudflare": "link:./packages/plugin-cloudflare",
+    "nanoid": "3.3.8"
   },
   "knip": {
     "$schema": "https://unpkg.com/knip@5/schema.json",

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

@@ -25,6 +25,7 @@ import {getCachedAppInfo, setCachedAppInfo} from './local-storage.js'
 import {canEnablePreviewMode} from './extensions/common.js'
 import {fetchAppRemoteConfiguration} from './app/select-app.js'
 import {patchAppConfigurationFile} from './app/patch-app-configuration-file.js'
+import {DevSessionStatusManager} from './dev/processes/dev-session-status-manager.js'
 import {DeveloperPlatformClient} from '../utilities/developer-platform-client.js'
 import {Web, isCurrentAppSchema, getAppScopesArray, AppLinkedInterface} from '../models/app/app.js'
 import {Organization, OrganizationApp, OrganizationStore} from '../models/organization.js'
@@ -71,9 +72,9 @@ export interface DevOptions {
 export async function dev(commandOptions: DevOptions) {
   const config = await prepareForDev(commandOptions)
   await actionsBeforeSettingUpDevProcesses(config)
-  const {processes, graphiqlUrl, previewUrl} = await setupDevProcesses(config)
+  const {processes, graphiqlUrl, previewUrl, devSessionStatusManager} = await setupDevProcesses(config)
   await actionsBeforeLaunchingDevProcesses(config)
-  await launchDevProcesses({processes, previewUrl, graphiqlUrl, config})
+  await launchDevProcesses({processes, previewUrl, graphiqlUrl, config, devSessionStatusManager})
 }
 
 async function prepareForDev(commandOptions: DevOptions): Promise<DevConfig> {
@@ -117,10 +118,10 @@ async function prepareForDev(commandOptions: DevOptions): Promise<DevConfig> {
     await installAppDependencies(app)
   }
 
-  const graphiqlPort = commandOptions.graphiqlPort || (await getAvailableTCPPort(ports.graphiql))
+  const graphiqlPort = commandOptions.graphiqlPort ?? (await getAvailableTCPPort(ports.graphiql))
   const {graphiqlKey} = commandOptions
 
-  if (graphiqlPort !== (commandOptions.graphiqlPort || ports.graphiql)) {
+  if (graphiqlPort !== (commandOptions.graphiqlPort ?? ports.graphiql)) {
     renderWarning({
       headline: [
         'A random port will be used for GraphiQL because',
@@ -224,7 +225,7 @@ export async function warnIfScopesDifferBeforeDev({
           scopesMessage(getAppScopesArray(localApp.configuration)),
           '\n',
           'Scopes in Partner Dashboard:',
-          scopesMessage(remoteAccess?.scopes?.split(',') || []),
+          scopesMessage(remoteAccess?.scopes?.split(',') ?? []),
         ],
         nextSteps,
       })
@@ -301,7 +302,7 @@ async function setupNetworkingOptions(
       ...frontEndOptions,
       tunnelClient,
     }),
-    getBackendPort() || backendConfig?.configuration.port || getAvailableTCPPort(),
+    getBackendPort() ?? backendConfig?.configuration.port ?? getAvailableTCPPort(),
     getURLs(remoteAppConfig),
   ])
   const proxyUrl = usingLocalhost ? `${frontendUrl}:${proxyPort}` : frontendUrl
@@ -330,11 +331,13 @@ async function launchDevProcesses({
   previewUrl,
   graphiqlUrl,
   config,
+  devSessionStatusManager,
 }: {
   processes: DevProcesses
   previewUrl: string
   graphiqlUrl: string | undefined
   config: DevConfig
+  devSessionStatusManager: DevSessionStatusManager
 }) {
   const abortController = new AbortController()
   const processesForTaskRunner: OutputProcess[] = processes.map((process) => {
@@ -375,6 +378,7 @@ async function launchDevProcesses({
     abortController,
     developerPreview: developerPreviewController(apiKey, developerPlatformClient),
     shopFqdn: config.storeFqdn,
+    devSessionStatusManager,
   })
 }
 

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

@@ -1,7 +1,9 @@
-import {devSessionStatusManager, DevSessionStatus} from './dev-session-status-manager.js'
+import {DevSessionStatus, DevSessionStatusManager} from './dev-session-status-manager.js'
 import {describe, test, expect, beforeEach, vi} from 'vitest'
 
 describe('DevSessionStatusManager', () => {
+  const devSessionStatusManager = new DevSessionStatusManager()
+
   beforeEach(() => {
     devSessionStatusManager.removeAllListeners()
     devSessionStatusManager.reset()

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

@@ -4,12 +4,19 @@ import {EventEmitter} from 'events'
 export interface DevSessionStatus {
   isReady: boolean
   previewURL?: string
+  graphiqlURL?: string
 }
 
-class DevSessionStatusManager extends EventEmitter {
+export class DevSessionStatusManager extends EventEmitter {
   private currentStatus: DevSessionStatus = {
     isReady: false,
     previewURL: undefined,
+    graphiqlURL: undefined,
+  }
+
+  constructor(defaultStatus?: DevSessionStatus) {
+    super()
+    if (defaultStatus) this.currentStatus = defaultStatus
   }
 
   updateStatus(status: Partial<DevSessionStatus>) {
@@ -29,8 +36,7 @@ class DevSessionStatusManager extends EventEmitter {
     this.currentStatus = {
       isReady: false,
       previewURL: undefined,
+      graphiqlURL: undefined,
     }
   }
 }
-
-export const devSessionStatusManager = new DevSessionStatusManager()

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

@@ -1,5 +1,5 @@
 import {setupDevSessionProcess, pushUpdatesForDevSession} from './dev-session.js'
-import {devSessionStatusManager} from './dev-session-status-manager.js'
+import {DevSessionStatusManager} from './dev-session-status-manager.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'
@@ -39,6 +39,7 @@ describe('setupDevSessionProcess', () => {
       appWatcher: {} as AppEventWatcher,
       appPreviewURL: 'https://test.preview.url',
       appLocalProxyURL: 'https://test.local.url',
+      devSessionStatusManager: new DevSessionStatusManager(),
     }
 
     // When
@@ -60,6 +61,7 @@ describe('setupDevSessionProcess', () => {
         appWatcher: options.appWatcher,
         appPreviewURL: options.appPreviewURL,
         appLocalProxyURL: options.appLocalProxyURL,
+        devSessionStatusManager: options.devSessionStatusManager,
       },
     })
   })
@@ -73,6 +75,7 @@ describe('pushUpdatesForDevSession', () => {
   let appWatcher: AppEventWatcher
   let app: AppLinkedInterface
   let abortController: AbortController
+  let devSessionStatusManager: DevSessionStatusManager
 
   beforeEach(() => {
     vi.mocked(formData).mockReturnValue({append: vi.fn(), getHeaders: vi.fn()} as any)
@@ -83,7 +86,7 @@ describe('pushUpdatesForDevSession', () => {
     app = testAppLinked()
     appWatcher = new AppEventWatcher(app)
     abortController = new AbortController()
-    devSessionStatusManager.reset()
+    devSessionStatusManager = new DevSessionStatusManager()
     options = {
       developerPlatformClient,
       appWatcher,
@@ -92,6 +95,7 @@ describe('pushUpdatesForDevSession', () => {
       organizationId: 'org123',
       appPreviewURL: 'https://test.preview.url',
       appLocalProxyURL: 'https://test.local.url',
+      devSessionStatusManager,
     }
   })
 

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

@@ -1,5 +1,5 @@
 import {BaseProcess, DevProcessFunction} from './types.js'
-import {devSessionStatusManager} from './dev-session-status-manager.js'
+import {DevSessionStatusManager} from './dev-session-status-manager.js'
 import {DeveloperPlatformClient} from '../../../utilities/developer-platform-client.js'
 import {AppLinkedInterface} from '../../../models/app/app.js'
 import {getExtensionUploadURL} from '../../deploy/upload.js'
@@ -31,6 +31,7 @@ interface DevSessionOptions {
   appWatcher: AppEventWatcher
   appPreviewURL: string
   appLocalProxyURL: string
+  devSessionStatusManager: DevSessionStatusManager
 }
 
 interface DevSessionProcessOptions extends DevSessionOptions {
@@ -88,7 +89,7 @@ export const pushUpdatesForDevSession: DevProcessFunction<DevSessionOptions> = a
   {stderr, stdout, abortSignal: signal},
   options,
 ) => {
-  const {appWatcher} = options
+  const {appWatcher, devSessionStatusManager} = options
 
   const processOptions = {...options, stderr, stdout, signal, bundlePath: appWatcher.buildOutputPath}
 
@@ -164,7 +165,7 @@ async function handleDevSessionResult(
     await printSuccess(`✅ Updated`, processOptions.stdout)
     await printActionRequiredMessages(processOptions, event)
   } else if (result.status === 'created') {
-    devSessionStatusManager.updateStatus({isReady: true})
+    processOptions.devSessionStatusManager.updateStatus({isReady: true})
     await printSuccess(`✅ Ready, watching for changes in your app `, processOptions.stdout)
   } else if (result.status === 'aborted') {
     outputDebug('❌ Session update aborted (new change detected or error in Session Update)', processOptions.stdout)
@@ -174,7 +175,7 @@ async function handleDevSessionResult(
 
   // 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 (!devSessionStatusManager.status.isReady && !isUnitTest()) {
+  if (!processOptions.devSessionStatusManager.status.isReady && !isUnitTest()) {
     throw new AbortError('Failed to start dev session.')
   }
 }
@@ -253,7 +254,7 @@ async function bundleExtensionsAndUpload(options: DevSessionProcessOptions): Pro
   // Create or update the dev session
   if (currentBundleController.signal.aborted) return {status: 'aborted'}
   try {
-    if (devSessionStatusManager.status.isReady) {
+    if (options.devSessionStatusManager.status.isReady) {
       const result = await devSessionUpdateWithRetry(payload, options.developerPlatformClient)
       const errors = result.devSessionUpdate?.userErrors ?? []
       if (errors.length) return {status: 'remote-error', error: errors}
@@ -363,5 +364,5 @@ async function printLogMessage(message: string, stdout: Writable, prefix?: strin
 async function updatePreviewURL(options: DevSessionProcessOptions, event: AppEvent) {
   const hasPreview = event.app.allExtensions.filter((ext) => ext.isPreviewable).length > 0
   const newPreviewURL = hasPreview ? options.appLocalProxyURL : options.appPreviewURL
-  devSessionStatusManager.updateStatus({previewURL: newPreviewURL})
+  options.devSessionStatusManager.updateStatus({previewURL: newPreviewURL})
 }

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

@@ -8,6 +8,7 @@ import {WebProcess, setupWebProcesses} from './web.js'
 import {DevSessionProcess, setupDevSessionProcess} from './dev-session.js'
 import {AppLogsSubscribeProcess, setupAppLogsPollingProcess} from './app-logs-polling.js'
 import {AppWatcherProcess, setupAppWatcherProcess} from './app-watcher-process.js'
+import {DevSessionStatusManager} from './dev-session-status-manager.js'
 import {environmentVariableNames} from '../../../constants.js'
 import {AppLinkedInterface, getAppScopes, WebType} from '../../../models/app/app.js'
 
@@ -78,6 +79,7 @@ export async function setupDevProcesses({
   processes: DevProcesses
   previewUrl: string
   graphiqlUrl: string | undefined
+  devSessionStatusManager: DevSessionStatusManager
 }> {
   const apiKey = remoteApp.apiKey
   const apiSecret = remoteApp.apiSecretKeys[0]?.secret ?? ''
@@ -93,7 +95,13 @@ export async function setupDevProcesses({
   // 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 previewURL = anyPreviewableExtensions ? devConsoleURL : appPreviewUrl
+
+  const graphiqlURL = shouldRenderGraphiQL
+    ? `http://localhost:${graphiqlPort}/graphiql${graphiqlKey ? `?key=${graphiqlKey}` : ''}`
+    : undefined
+
+  const devSessionStatusManager = new DevSessionStatusManager({isReady: false, previewURL, graphiqlURL})
 
   const processes = [
     ...(await setupWebProcesses({
@@ -143,6 +151,7 @@ export async function setupDevProcesses({
           appWatcher,
           appPreviewURL: appPreviewUrl,
           appLocalProxyURL: devConsoleURL,
+          devSessionStatusManager,
         })
       : await setupDraftableExtensionsProcess({
           localApp: reloadedApp,
@@ -189,10 +198,9 @@ export async function setupDevProcesses({
 
   return {
     processes: processesWithProxy,
-    previewUrl,
-    graphiqlUrl: shouldRenderGraphiQL
-      ? `http://localhost:${graphiqlPort}/graphiql${graphiqlKey ? `?key=${graphiqlKey}` : ''}`
-      : undefined,
+    previewUrl: previewURL,
+    graphiqlUrl: graphiqlURL,
+    devSessionStatusManager,
   }
 }