Make types a little more explicit

Previously the options passed to generateFrontendURL were an object with a bunch of optional properties.  But if noTunnelUseLocalhost is true then port is mandatory and it's alwasy passed.  By switching options to a union typescriot understands this and we no longer need to have get an available TCP port for localhost... it would alwasy be passed

Author: byrichardpowell

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

@@ -1,5 +1,6 @@
 import {
   ApplicationURLs,
+  FrontendURLOptions,
   generateApplicationURLs,
   generateFrontendURL,
   getURLs,
@@ -48,7 +49,7 @@ import {OutputProcess, formatPackageManagerCommand, outputDebug} from '@shopify/
 import {hashString} from '@shopify/cli-kit/node/crypto'
 import {AbortError} from '@shopify/cli-kit/node/error'
 
-interface NoTunnel {
+export interface NoTunnel {
   mode: 'use-localhost'
   port: number
   provideCertificate: (appDirectory: string) => Promise<{keyContent: string; certContent: string; certPath: string}>
@@ -321,15 +322,22 @@ async function setupNetworkingOptions(
 
   await validateCustomPorts(webs, graphiqlPort)
 
+  const frontendUrlOptions: FrontendURLOptions =
+    tunnelOptions.mode === 'use-localhost'
+      ? {
+          noTunnelUseLocalhost: true,
+          port: tunnelOptions.port,
+        }
+      : {
+          noTunnelUseLocalhost: false,
+          tunnelUrl: tunnelOptions.mode === 'custom' ? tunnelOptions.url : undefined,
+          tunnelClient,
+        }
+
   // generateFrontendURL still uses the old naming of frontendUrl and frontendPort,
   // we can rename them to proxyUrl and proxyPort when we delete dev.ts
   const [{frontendUrl, frontendPort: proxyPort, usingLocalhost}, backendPort, currentUrls] = await Promise.all([
-    generateFrontendURL({
-      noTunnelUseLocalhost: tunnelOptions.mode === 'use-localhost',
-      tunnelUrl: tunnelOptions.mode === 'custom' ? tunnelOptions.url : undefined,
-      tunnelClient,
-      port: tunnelOptions.mode === 'use-localhost' ? tunnelOptions.port : undefined,
-    }),
+    generateFrontendURL(frontendUrlOptions),
     getBackendPort() ?? backendConfig?.configuration.port ?? getAvailableTCPPort(),
     getURLs(remoteAppConfig),
   ])

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

@@ -450,13 +450,13 @@ describe('generateFrontendURL', () => {
 
   test('returns localhost if noTunnelUseLocalhost is true', async () => {
     // Given
-    const options = {...defaultOptions, noTunnelUseLocalhost: true}
+    const options: FrontendURLOptions = {noTunnelUseLocalhost: true, port: 1234}
 
     // When
     const got = await generateFrontendURL(options)
 
     // Then
-    expect(got).toEqual({frontendUrl: 'https://localhost', frontendPort: 3042, usingLocalhost: true})
+    expect(got).toEqual({frontendUrl: 'https://localhost', frontendPort: 1234, usingLocalhost: true})
     expect(renderSelectPrompt).not.toBeCalled()
   })
 

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

@@ -7,7 +7,7 @@ import {DeveloperPlatformClient} from '../../utilities/developer-platform-client
 import {patchAppConfigurationFile} from '../app/patch-app-configuration-file.js'
 import {AbortError, BugError} from '@shopify/cli-kit/node/error'
 import {Config} from '@oclif/core'
-import {checkPortAvailability, getAvailableTCPPort} from '@shopify/cli-kit/node/tcp'
+import {checkPortAvailability} from '@shopify/cli-kit/node/tcp'
 import {isValidURL} from '@shopify/cli-kit/common/url'
 import {appHost, appPort, fetchSpinPort, isSpin, spinFqdn, spinVariables} from '@shopify/cli-kit/node/context/spin'
 import {codespaceURL, codespacePortForwardingDomain, gitpodURL} from '@shopify/cli-kit/node/context/local'
@@ -28,11 +28,19 @@ export interface ApplicationURLs {
   appProxy?: AppProxy
 }
 
-export interface FrontendURLOptions {
-  noTunnelUseLocalhost: boolean
+export type FrontendURLOptions = UseLocalhostFrontendUrlOptions | UseTunnelFrontendUrlOptions
+
+interface UseLocalhostFrontendUrlOptions {
+  noTunnelUseLocalhost: true
+  port: number
+  tunnelUrl?: undefined
+  tunnelClient?: undefined
+}
+
+interface UseTunnelFrontendUrlOptions {
+  noTunnelUseLocalhost: false
   tunnelUrl?: string
   tunnelClient: TunnelClient | undefined
-  port?: number
 }
 
 interface FrontendURLResult {
@@ -43,7 +51,7 @@ interface FrontendURLResult {
 
 /**
  * The tunnel creation logic depends on 7 variables:
- * - If a Codespaces environment is deteced, then the URL is built using the codespaces hostname. No need for tunnel
+ * - If a Codespaces environment is detected, then the URL is built using the codespaces hostname. No need for tunnel
  * - If a Gitpod environment is detected, then the URL is built using the gitpod hostname. No need for tunnel
  * - If a Spin environment is detected, then the URL is built using the cli + fqdn hostname as configured in nginx.
  *   No need for tunnel. In case problems with that configuration, the flags Tunnel or Custom Tunnel url could be used
@@ -100,12 +108,11 @@ export async function generateFrontendURL(options: FrontendURLOptions): Promise<
   }
 
   if (options.noTunnelUseLocalhost) {
-    frontendPort = options.port ?? (await getAvailableTCPPort())
+    frontendPort = options.port
     frontendUrl = 'https://localhost'
   } else if (options.tunnelClient) {
-    const url = await pollTunnelURL(options.tunnelClient)
     frontendPort = options.tunnelClient.port
-    frontendUrl = url
+    frontendUrl = await pollTunnelURL(options.tunnelClient)
   }
 
   return {frontendUrl, frontendPort, usingLocalhost}