experimenting with different CLI messaging for proxy changes

Author: nickwesselman

packages/app/src/cli/models/extensions/extension-instance.ts

@@ -25,6 +25,7 @@ import {Identifiers} from '../app/identifiers.js'
 import {DeveloperPlatformClient} from '../../utilities/developer-platform-client.js'
 import {AppConfigurationWithoutPath} from '../app/app.js'
 import {ApplicationURLs} from '../../services/dev/urls.js'
+import {EventType} from '../../services/dev/app-events/app-event-watcher.js'
 import {ok} from '@shopify/cli-kit/node/result'
 import {constantize, slugify} from '@shopify/cli-kit/common/string'
 import {hashString, nonRandomUUID} from '@shopify/cli-kit/node/crypto'
@@ -449,9 +450,9 @@ export class ExtensionInstance<TConfiguration extends BaseConfigType = BaseConfi
     }
   }
 
-  async getDevSessionUpdateMessage(): Promise<string | undefined> {
+  async getDevSessionUpdateMessage(eventType: EventType): Promise<string[] | undefined> {
     if (!this.specification.getDevSessionUpdateMessage) return undefined
-    return this.specification.getDevSessionUpdateMessage(this.configuration)
+    return this.specification.getDevSessionUpdateMessage(this.configuration, eventType)
   }
 
   /**

packages/app/src/cli/models/extensions/specification.ts

@@ -7,6 +7,7 @@ import {Flag} from '../../utilities/developer-platform-client.js'
 import {AppConfigurationWithoutPath} from '../app/app.js'
 import {loadLocalesConfig} from '../../utilities/extensions/locales-configuration.js'
 import {ApplicationURLs} from '../../services/dev/urls.js'
+import {EventType} from '../../services/dev/app-events/app-event-watcher.js'
 import {Result} from '@shopify/cli-kit/node/result'
 import {capitalize} from '@shopify/cli-kit/common/string'
 import {ParseConfigurationResult, zod} from '@shopify/cli-kit/node/schema'
@@ -74,7 +75,7 @@ export interface ExtensionSpecification<TConfiguration extends BaseConfigType =
   buildValidation?: (extension: ExtensionInstance<TConfiguration>) => Promise<void>
   hasExtensionPointTarget?(config: TConfiguration, target: string): boolean
   appModuleFeatures: (config?: TConfiguration) => ExtensionFeature[]
-  getDevSessionUpdateMessage?: (config: TConfiguration) => Promise<string>
+  getDevSessionUpdateMessage?: (config: TConfiguration, eventType: EventType) => Promise<string[]>
   patchWithAppDevURLs?: (config: TConfiguration, urls: ApplicationURLs) => void
 
   /**
@@ -231,7 +232,7 @@ export function createConfigExtensionSpecification<TConfiguration extends BaseCo
   appModuleFeatures?: (config?: TConfiguration) => ExtensionFeature[]
   transformConfig: TransformationConfig | CustomTransformationConfig
   uidStrategy?: UidStrategy
-  getDevSessionUpdateMessage?: (config: TConfiguration) => Promise<string>
+  getDevSessionUpdateMessage?: (config: TConfiguration, eventType: EventType) => Promise<string[]>
   patchWithAppDevURLs?: (config: TConfiguration, urls: ApplicationURLs) => void
 }): ExtensionSpecification<TConfiguration> {
   const appModuleFeatures = spec.appModuleFeatures ?? (() => [])

packages/app/src/cli/models/extensions/specifications/app_config_app_access.ts

@@ -54,7 +54,7 @@ const appAccessSpec = createConfigExtensionSpecification({
           .join(', ')
       : config.access_scopes?.required_scopes?.join(', ')
 
-    return scopesString ? `Access scopes auto-granted: ${scopesString}` : `App has been installed`
+    return [scopesString ? `Access scopes auto-granted: ${scopesString}` : `App has been installed`]
   },
   patchWithAppDevURLs: (config, urls) => {
     if (urls.redirectUrlWhitelist) {

packages/app/src/cli/models/extensions/specifications/app_config_app_proxy.ts

@@ -1,6 +1,7 @@
 import {validateUrl} from '../../app/validation/common.js'
 import {ExtensionSpecification, TransformationConfig, createConfigExtensionSpecification} from '../specification.js'
 import {BaseSchema} from '../schemas.js'
+import {EventType} from '../../../services/dev/app-events/app-event-watcher.js'
 import {zod} from '@shopify/cli-kit/node/schema'
 
 const AppProxySchema = BaseSchema.extend({
@@ -34,6 +35,16 @@ const appProxySpec: ExtensionSpecification = createConfigExtensionSpecification(
       }
     }
   },
+  getDevSessionUpdateMessage: async (config, eventType) => {
+    if (eventType === EventType.Deleted) {
+      return []
+    }
+    const messages = [`Using app proxy URL: ${config.app_proxy?.url}`]
+    if (eventType === EventType.Updated) {
+      messages.push(`Note: Changes to app proxy prefix and subpath won't affect existing installations.`)
+    }
+    return messages
+  },
 })
 
 export default appProxySpec

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

@@ -3,7 +3,6 @@ import {AppEvent} from '../../app-events/app-event-watcher.js'
 import {ExtensionInstance} from '../../../../models/extensions/extension-instance.js'
 import {outputToken, outputContent, outputDebug} from '@shopify/cli-kit/node/output'
 import {useConcurrentOutputContext} from '@shopify/cli-kit/node/ui/components'
-import {getArrayRejectingUndefined} from '@shopify/cli-kit/common/array'
 import {Writable} from 'stream'
 
 export class DevSessionLogger {
@@ -77,16 +76,19 @@ export class DevSessionLogger {
   async logExtensionUpdateMessages(event?: AppEvent) {
     if (!event) return
     const extensionEvents = event.extensionEvents ?? []
-    const messages = getArrayRejectingUndefined(
-      await Promise.all(
-        extensionEvents.map(async (eve) => {
-          const message = await eve.extension.getDevSessionUpdateMessage()
-          return message ? message : undefined
-        }),
-      ),
+    const messageArrays = await Promise.all(
+      extensionEvents.map(async (eve) => {
+        const messages = await eve.extension.getDevSessionUpdateMessage(eve.type)
+        return messages ?? []
+      }),
     )
+    const messages = messageArrays.flat()
 
-    const logPromises = messages.map((message) => this.log(`└  ${message}`, 'app-preview'))
+    const logPromises = messages.map((message, index) => {
+      const messageContent = outputContent`${outputToken.gray(index === messages.length - 1 ? '└ ' : '│ ')}${message}`
+        .value
+      return this.log(messageContent, 'app-preview')
+    })
     await Promise.all(logPromises)
   }