Update tests and follow DevProcess patterns in theme-app-extension-next

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

@@ -6,6 +6,7 @@ import {PreviewableExtensionProcess, launchPreviewableExtensionProcess} from './
 import {launchGraphiQLServer} from './graphiql.js'
 import {pushUpdatesForDraftableExtensions} from './draftable-extension.js'
 import {pushUpdatesForDevSession} from './dev-session.js'
+import {runThemeAppExtensionsServer} from './theme-app-extension-next.js'
 import {
  testAppAccessConfigExtension,
  testAppConfigExtensions,
@@ -25,13 +26,15 @@ import {describe, test, expect, beforeEach, vi} from 'vitest'
 import {ensureAuthenticatedAdmin, ensureAuthenticatedStorefront} from '@shopify/cli-kit/node/session'
 import {Config} from '@oclif/core'
 import {getEnvironmentVariables} from '@shopify/cli-kit/node/environment'
-import {initializeDevelopmentExtensionServer} from '@shopify/theme'
+import {isStorefrontPasswordProtected} from '@shopify/theme'
+import {fetchTheme} from '@shopify/cli-kit/node/themes/api'
 
 vi.mock('../../context/identifiers.js')
 vi.mock('@shopify/cli-kit/node/session.js')
 vi.mock('../fetch.js')
 vi.mock('@shopify/cli-kit/node/environment')
-
+vi.mock('@shopify/theme')
+vi.mock('@shopify/cli-kit/node/themes/api')
 beforeEach(() => {
  // mocked for draft extensions
  vi.mocked(ensureDeploymentIdsPresence).mockResolvedValue({
@@ -48,6 +51,14 @@ beforeEach(() => {
  })
  vi.mocked(ensureAuthenticatedStorefront).mockResolvedValue('storefront-token')
  vi.mocked(getEnvironmentVariables).mockReturnValue({})
+ vi.mocked(isStorefrontPasswordProtected).mockResolvedValue(false)
+ vi.mocked(fetchTheme).mockResolvedValue({
+ id: 1,
+ name: 'Theme',
+ createdAtRuntime: false,
+ role: 'theme',
+ processing: false,
+ })
 })
 
 describe('setup-dev-processes', () => {
@@ -197,18 +208,21 @@ describe('setup-dev-processes', () => {
  expect(res.processes[4]).toMatchObject({
  type: 'theme-app-extensions',
  prefix: 'theme-extensions',
- function: initializeDevelopmentExtensionServer,
+ function: runThemeAppExtensionsServer,
  options: {
+ theme: {
+ id: 1,
+ name: 'Theme',
+ createdAtRuntime: false,
+ role: 'theme',
+ processing: false,
+ },
  adminSession: {
  storeFqdn: 'store.myshopify.io',
  token: 'admin-token',
  },
- themeExtensionServerArgs:
- './my-extension --api-key api-key --extension-id extension-id --extension-title theme-extension-name --extension-type THEME_APP_EXTENSION --theme 1'.split(
- ' ',
- ),
- storefrontToken: 'storefront-token',
- developerPlatformClient,
+ themeExtensionDirectory: './my-extension',
+ themeExtensionPort: 9293,
  },
  })
  expect(res.processes[5]).toMatchObject({

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

@@ -140,7 +140,6 @@ export async function setupDevProcesses({
  remoteApp,
  localApp,
  storeFqdn,
- developerPlatformClient,
  theme: commandOptions.theme,
  themeExtensionPort: commandOptions.themeExtensionPort,
  }),

packages/app/src/cli/services/dev/processes/theme-app-extension-next.test.ts

@@ -1,5 +1,4 @@
 import {setupPreviewThemeAppExtensionsProcess, findOrCreateHostTheme} from './theme-app-extension-next.js'
-import {DeveloperPlatformClient} from '../../../utilities/developer-platform-client.js'
 import {HostThemeManager} from '../../../utilities/extensions/theme/host-theme-manager.js'
 import {testApp, testOrganizationApp, testThemeExtensions} from '../../../models/app/app.test-data.js'
 import {AdminSession, ensureAuthenticatedAdmin} from '@shopify/cli-kit/node/session'
@@ -22,7 +21,6 @@ vi.mock('@shopify/cli-kit/node/ui', async (realImport) => {
 
 describe('setupPreviewThemeAppExtensionsProcess', () => {
  const mockAdminSession = {storeFqdn: 'test.myshopify.com'} as any as AdminSession
- const mockDeveloperPlatformClient = {} as DeveloperPlatformClient
 
  beforeEach(() => {
  vi.mocked(ensureAuthenticatedAdmin).mockResolvedValue(mockAdminSession)
@@ -33,14 +31,12 @@ describe('setupPreviewThemeAppExtensionsProcess', () => {
  const localApp = testApp()
  const remoteApp = testOrganizationApp()
  const storeFqdn = 'test.myshopify.com'
- const developerPlatformClient = mockDeveloperPlatformClient
 
  // When
  const result = await setupPreviewThemeAppExtensionsProcess({
  localApp,
  remoteApp,
  storeFqdn,
- developerPlatformClient,
  })
 
  // Then
@@ -54,7 +50,6 @@ describe('setupPreviewThemeAppExtensionsProcess', () => {
 
  const storeFqdn = 'test.myshopify.com'
  const theme = '123'
- const developerPlatformClient = mockDeveloperPlatformClient
  const remoteApp = testOrganizationApp()
  const localApp = testApp({allExtensions: [await testThemeExtensions()]})
 
@@ -64,12 +59,10 @@ describe('setupPreviewThemeAppExtensionsProcess', () => {
  remoteApp,
  storeFqdn,
  theme,
- developerPlatformClient,
  })
 
  // Then
  expect(result).toBeDefined()
- expect(result?.options.developerPlatformClient).toBe(developerPlatformClient)
  expect(renderInfo).toBeCalledWith({
  headline: 'The theme app extension development server is ready.',
  nextSteps: [

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

@@ -1,5 +1,4 @@
-import {BaseProcess} from './types.js'
-import {DeveloperPlatformClient} from '../../../utilities/developer-platform-client.js'
+import {BaseProcess, DevProcessFunction} from './types.js'
 import {HostThemeManager} from '../../../utilities/extensions/theme/host-theme-manager.js'
 import {AppInterface} from '../../../models/app/app.js'
 import {OrganizationApp} from '../../../models/organization.js'
@@ -13,7 +12,11 @@ import {initializeDevelopmentExtensionServer, ensureValidPassword, isStorefrontP
 import {partnersFqdn} from '@shopify/cli-kit/node/context/fqdn'
 
 interface ThemeAppExtensionServerOptions {
- developerPlatformClient: DeveloperPlatformClient
+ theme: Theme
+ adminSession: AdminSession
+ storefrontPassword?: string
+ themeExtensionDirectory: string
+ themeExtensionPort: number
 }
 
 interface HostThemeSetupOptions {
@@ -22,7 +25,6 @@ interface HostThemeSetupOptions {
  storeFqdn: string
  theme?: string
  themeExtensionPort?: number
- developerPlatformClient: DeveloperPlatformClient
 }
 
 export interface PreviewThemeAppExtensionsProcess extends BaseProcess<ThemeAppExtensionServerOptions> {
@@ -33,6 +35,7 @@ export async function setupPreviewThemeAppExtensionsProcess(
  options: HostThemeSetupOptions,
 ): Promise<PreviewThemeAppExtensionsProcess | undefined> {
  const {remoteApp, localApp} = options
+
  const allExtensions = localApp.allExtensions
  const themeExtensions = allExtensions.filter((ext) => ext.isThemeExtension)
  if (themeExtensions.length === 0) {
@@ -91,22 +94,31 @@ export async function setupPreviewThemeAppExtensionsProcess(
  return {
  type: 'theme-app-extensions',
  prefix: 'theme-extensions',
- function: async () => {
- const server = await initializeDevelopmentExtensionServer(theme, {
- adminSession,
- storefrontPassword,
- themeExtensionDirectory,
- themeExtensionPort,
- })
-
- await server.start()
- },
+ function: runThemeAppExtensionsServer,
  options: {
- developerPlatformClient: options.developerPlatformClient,
+ theme,
+ adminSession,
+ storefrontPassword,
+ themeExtensionDirectory,
+ themeExtensionPort,
  },
  }
 }
 
+export const runThemeAppExtensionsServer: DevProcessFunction<ThemeAppExtensionServerOptions> = async (
+ _,
+ {theme, adminSession, storefrontPassword, themeExtensionDirectory, themeExtensionPort},
+) => {
+ const server = await initializeDevelopmentExtensionServer(theme, {
+ adminSession,
+ storefrontPassword,
+ themeExtensionDirectory,
+ themeExtensionPort,
+ })
+
+ await server.start()
+}
+
 export async function findOrCreateHostTheme(adminSession: AdminSession, theme?: string): Promise<Theme> {
  let hostTheme: Theme | undefined
  if (theme) {