Send websocketUrl on Dev session create/update

Author: gonzaloriestra

packages/app/src/cli/api/graphql/app-dev/generated/dev-session-create.ts

@@ -7,6 +7,7 @@ import {TypedDocumentNode as DocumentNode} from '@graphql-typed-document-node/co
 export type DevSessionCreateMutationVariables = Types.Exact<{
   appId: Types.Scalars['String']['input']
   assetsUrl: Types.Scalars['String']['input']
+  websocketUrl?: Types.InputMaybe<Types.Scalars['String']['input']>
 }>
 
 export type DevSessionCreateMutation = {
@@ -33,6 +34,11 @@ export const DevSessionCreate = {
           variable: {kind: 'Variable', name: {kind: 'Name', value: 'assetsUrl'}},
           type: {kind: 'NonNullType', type: {kind: 'NamedType', name: {kind: 'Name', value: 'String'}}},
         },
+        {
+          kind: 'VariableDefinition',
+          variable: {kind: 'Variable', name: {kind: 'Name', value: 'websocketUrl'}},
+          type: {kind: 'NamedType', name: {kind: 'Name', value: 'String'}},
+        },
       ],
       selectionSet: {
         kind: 'SelectionSet',
@@ -51,6 +57,11 @@ export const DevSessionCreate = {
                 name: {kind: 'Name', value: 'assetsUrl'},
                 value: {kind: 'Variable', name: {kind: 'Name', value: 'assetsUrl'}},
               },
+              {
+                kind: 'Argument',
+                name: {kind: 'Name', value: 'websocketUrl'},
+                value: {kind: 'Variable', name: {kind: 'Name', value: 'websocketUrl'}},
+              },
             ],
             selectionSet: {
               kind: 'SelectionSet',

packages/app/src/cli/api/graphql/app-dev/queries/dev-session-create.graphql

@@ -1,5 +1,5 @@
-mutation DevSessionCreate($appId: String!, $assetsUrl: String!) {
-  devSessionCreate(appId: $appId, assetsUrl: $assetsUrl) {
+mutation DevSessionCreate($appId: String!, $assetsUrl: String!, $websocketUrl: String) {
+  devSessionCreate(appId: $appId, assetsUrl: $assetsUrl, websocketUrl: $websocketUrl) {
     userErrors {
       message
       on

packages/app/src/cli/api/graphql/business-platform-organizations/generated/types.d.ts

@@ -1,6 +1,4 @@
 /* eslint-disable @typescript-eslint/consistent-type-definitions, @typescript-eslint/naming-convention, @typescript-eslint/no-explicit-any  */
-import {JsonMapType} from '@shopify/cli-kit/node/toml'
-
 export type Maybe<T> = T | null
 export type InputMaybe<T> = Maybe<T>
 export type Exact<T extends {[key: string]: unknown}> = {[K in keyof T]: T[K]}
@@ -42,8 +40,6 @@ export type Scalars = {
   ISO8601Date: {input: any; output: any}
   /** An ISO 8601-encoded datetime */
   ISO8601DateTime: {input: any; output: any}
-  /** Represents untyped JSON */
-  JSON: {input: JsonMapType | string; output: JsonMapType}
   /** The ID for a LegalEntity. */
   LegalEntityID: {input: any; output: any}
   /** The ID for a OrganizationDomain. */

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

@@ -183,7 +183,7 @@ export async function devUIExtensions(options: ExtensionDevOptions): Promise<voi
   })
 }
 
-function getWebSocketUrl(url: ExtensionDevOptions['url']) {
+export function getWebSocketUrl(url: string) {
   const websocketURL = new URL('/extensions', url)
   websocketURL.protocol = 'wss:'
 

packages/app/src/cli/services/dev/extension/server/middlewares.ts

@@ -2,6 +2,7 @@ import {getExtensionPointRedirectUrl, getExtensionUrl, getRedirectUrl, sendError
 import {GetExtensionsMiddlewareOptions} from './models.js'
 import {getUIExtensionPayload} from '../payload.js'
 import {getHTML} from '../templates.js'
+import {getWebSocketUrl} from '../../extension.js'
 import {fileExists, isDirectory, readFile, findPathUp} from '@shopify/cli-kit/node/fs'
 import {IncomingMessage, ServerResponse, sendRedirect, send} from 'h3'
 import {joinPath, extname, moduleDirectory} from '@shopify/cli-kit/node/path'
@@ -199,7 +200,7 @@ export function getExtensionPayloadMiddleware({devOptions, getExtensions}: GetEx
           url: new URL('/extensions', devOptions.url).toString(),
         },
         socket: {
-          url: getWebsocketUrl(devOptions),
+          url: getWebSocketUrl(devOptions.url),
         },
         devConsole: {
           url: new URL('/extensions/dev-console', devOptions.url).toString(),
@@ -245,10 +246,3 @@ export function getExtensionPointMiddleware({devOptions, getExtensions}: GetExte
     await sendRedirect(response.event, url, 307)
   }
 }
-
-function getWebsocketUrl(devOptions: GetExtensionsMiddlewareOptions['devOptions']) {
-  const socket = new URL('/extensions', devOptions.url)
-  socket.protocol = 'wss:'
-
-  return socket.toString()
-}

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

@@ -5,6 +5,7 @@ import {AppEvent, AppEventWatcher, ExtensionEvent} from '../../app-events/app-ev
 import {compressBundle, getUploadURL, uploadToGCS, writeManifestToBundle} from '../../../bundle.js'
 import {DevSessionCreateOptions, DevSessionUpdateOptions} from '../../../../utilities/developer-platform-client.js'
 import {AppManifest} from '../../../../models/app/app.js'
+import {getWebSocketUrl} from '../../extension.js'
 import {endHRTimeInMs, startHRTime} from '@shopify/cli-kit/node/hrtime'
 import {ClientError} from 'graphql-request'
 import {JsonMapType} from '@shopify/cli-kit/node/toml'
@@ -282,6 +283,7 @@ export class DevSession {
         assetsUrl: signedURL,
         manifest,
         inheritedModuleUids,
+        websocketUrl: getWebSocketUrl(this.options.url),
       }
       if (this.statusManager.status.isReady) {
         return this.devSessionUpdateWithRetry(payload)

packages/app/src/cli/utilities/developer-platform-client.ts

@@ -164,6 +164,7 @@ interface DevSessionSharedOptions {
 export interface DevSessionCreateOptions extends DevSessionSharedOptions {
   assetsUrl?: string
   manifest: AppManifest
+  websocketUrl?: string
 }
 
 export interface DevSessionUpdateOptions extends DevSessionSharedOptions {

packages/app/src/cli/utilities/developer-platform-client/app-management-client.ts

@@ -1013,12 +1013,17 @@ export class AppManagementClient implements DeveloperPlatformClient {
     return appDeepLink({id, organizationId})
   }
 
-  async devSessionCreate({appId, assetsUrl, shopFqdn}: DevSessionCreateOptions): Promise<DevSessionCreateMutation> {
+  async devSessionCreate({
+    appId,
+    assetsUrl,
+    shopFqdn,
+    websocketUrl,
+  }: DevSessionCreateOptions): Promise<DevSessionCreateMutation> {
     const appIdNumber = String(numberFromGid(appId))
     return this.appDevRequest({
       query: DevSessionCreate,
       shopFqdn,
-      variables: {appId: appIdNumber, assetsUrl: assetsUrl ?? ''},
+      variables: {appId: appIdNumber, assetsUrl: assetsUrl ?? '', websocketUrl},
       requestOptions: {requestMode: 'slow-request'},
     })
   }