Make build config a series of build steps

isaacroldan · isaacroldan · commit 0e3af76804f5 · 2025-08-22T16:29:16.000+02:00
diff --git a/packages/app/src/cli/models/extensions/extension-instance.ts b/packages/app/src/cli/models/extensions/extension-instance.ts
@@ -15,6 +15,7 @@ import {WebhookSubscriptionSpecIdentifier} from './specifications/app_config_web
 import {
   ExtensionBuildOptions,
   buildFunctionExtension,
+  buildTaxCalculationExtension,
   buildThemeExtension,
   buildUIExtension,
   bundleFunctionExtension,
@@ -29,7 +30,7 @@ import {constantize, slugify} from '@shopify/cli-kit/common/string'
 import {hashString, nonRandomUUID} from '@shopify/cli-kit/node/crypto'
 import {partnersFqdn} from '@shopify/cli-kit/node/context/fqdn'
 import {joinPath, basename} from '@shopify/cli-kit/node/path'
-import {fileExists, touchFile, moveFile, writeFile, glob, copyFile} from '@shopify/cli-kit/node/fs'
+import {fileExists, moveFile, glob, copyFile} from '@shopify/cli-kit/node/fs'
 import {getPathValue} from '@shopify/cli-kit/common/object'
 import {outputDebug} from '@shopify/cli-kit/node/output'
 
@@ -339,28 +340,21 @@ export class ExtensionInstance<TConfiguration extends BaseConfigType = BaseConfi
   }
 
   async build(options: ExtensionBuildOptions): Promise<void> {
-    const mode = this.specification.buildConfig.mode
-
-    switch (mode) {
-      case 'theme':
-        return buildThemeExtension(this, options)
-      case 'function':
-        return buildFunctionExtension(this, options)
-      case 'ui':
-        return buildUIExtension(this, options)
-      case 'tax_calculation':
-        await touchFile(this.outputPath)
-        await writeFile(this.outputPath, '(()=>{})();')
-        break
-      case 'copy_files':
-        return copyFilesForExtension(
-          this,
-          options,
-          this.specification.buildConfig.filePatterns,
-          this.specification.buildConfig.ignoredFilePatterns,
-        )
-      case 'none':
-        break
+    const steps = this.specification.buildSteps
+
+    for (const step of steps) {
+      switch (step.mode) {
+        case 'theme':
+          return buildThemeExtension(this, options)
+        case 'function':
+          return buildFunctionExtension(this, options)
+        case 'ui':
+          return buildUIExtension(this, options)
+        case 'tax_calculation':
+          return buildTaxCalculationExtension(this)
+        case 'copy_files':
+          return copyFilesForExtension(this, options, step.filePatterns, step.ignoredFilePatterns)
+      }
     }
   }
 
@@ -381,16 +375,16 @@ export class ExtensionInstance<TConfiguration extends BaseConfigType = BaseConfi
 
     this.outputPath = this.getOutputPathForDirectory(bundleDirectory, extensionUuid)
 
-    const buildMode = this.specification.buildConfig.mode
+    const hasBuildSteps = this.specification.buildSteps.length > 0
 
     if (this.isThemeExtension) {
       await bundleThemeExtension(this, options)
-    } else if (buildMode !== 'none') {
+    } else if (hasBuildSteps) {
       outputDebug(`Will copy pre-built file from ${defaultOutputPath} to ${this.outputPath}`)
       if (await fileExists(defaultOutputPath)) {
         await copyFile(defaultOutputPath, this.outputPath)
 
-        if (buildMode === 'function') {
+        if (this.isFunctionExtension) {
           await bundleFunctionExtension(this.outputPath, this.outputPath)
         }
       }
diff --git a/packages/app/src/cli/models/extensions/specification.ts b/packages/app/src/cli/models/extensions/specification.ts
@@ -47,7 +47,7 @@ export interface Asset {
 }
 
 type BuildConfig =
-  | {mode: 'ui' | 'theme' | 'function' | 'tax_calculation' | 'none'}
+  | {mode: 'ui' | 'theme' | 'function' | 'tax_calculation'}
   | {mode: 'copy_files'; filePatterns: string[]; ignoredFilePatterns?: string[]}
 /**
  * Extension specification with all the needed properties and methods to load an extension.
@@ -62,7 +62,7 @@ export interface ExtensionSpecification<TConfiguration extends BaseConfigType =
   surface: string
   registrationLimit: number
   experience: ExtensionExperience
-  buildConfig: BuildConfig
+  buildSteps: BuildConfig[]
   dependency?: string
   graphQLType?: string
   getBundleExtensionStdinContent?: (config: TConfiguration) => {main: string; assets?: Asset[]}
@@ -190,7 +190,7 @@ export function createExtensionSpecification<TConfiguration extends BaseConfigTy
     experience: spec.experience ?? 'extension',
     uidStrategy: spec.uidStrategy ?? (spec.experience === 'configuration' ? 'single' : 'uuid'),
     getDevSessionUpdateMessages: spec.getDevSessionUpdateMessages,
-    buildConfig: spec.buildConfig ?? {mode: 'none'},
+    buildSteps: spec.buildSteps ?? [],
   }
   const merged = {...defaults, ...spec}
 
diff --git a/packages/app/src/cli/models/extensions/specifications/checkout_post_purchase.ts b/packages/app/src/cli/models/extensions/specifications/checkout_post_purchase.ts
@@ -14,7 +14,7 @@ const checkoutPostPurchaseSpec = createExtensionSpecification({
   partnersWebIdentifier: 'post_purchase',
   schema: CheckoutPostPurchaseSchema,
   appModuleFeatures: (_) => ['ui_preview', 'cart_url', 'esbuild', 'single_js_entry_path'],
-  buildConfig: {mode: 'ui'},
+  buildSteps: [{mode: 'ui'}],
   deployConfig: async (config, _) => {
     return {metafields: config.metafields ?? []}
   },
diff --git a/packages/app/src/cli/models/extensions/specifications/checkout_ui_extension.ts b/packages/app/src/cli/models/extensions/specifications/checkout_ui_extension.ts
@@ -21,7 +21,7 @@ const checkoutSpec = createExtensionSpecification({
   dependency,
   schema: CheckoutSchema,
   appModuleFeatures: (_) => ['ui_preview', 'cart_url', 'esbuild', 'single_js_entry_path', 'generates_source_maps'],
-  buildConfig: {mode: 'ui'},
+  buildSteps: [{mode: 'ui'}],
   deployConfig: async (config, directory) => {
     return {
       extension_points: config.extension_points,
diff --git a/packages/app/src/cli/models/extensions/specifications/flow_template.ts b/packages/app/src/cli/models/extensions/specifications/flow_template.ts
@@ -49,7 +49,7 @@ const flowTemplateSpec = createExtensionSpecification({
   identifier: 'flow_template',
   schema: FlowTemplateExtensionSchema,
   appModuleFeatures: (_) => ['ui_preview'],
-  buildConfig: {mode: 'copy_files', filePatterns: ['*.flow', '*.json', '*.toml']},
+  buildSteps: [{mode: 'copy_files', filePatterns: ['*.flow', '*.json', '*.toml']}],
   deployConfig: async (config, extensionPath) => {
     return {
       template_handle: config.handle,
diff --git a/packages/app/src/cli/models/extensions/specifications/function.ts b/packages/app/src/cli/models/extensions/specifications/function.ts
@@ -81,7 +81,7 @@ const functionSpec = createExtensionSpecification({
   ],
   schema: FunctionExtensionSchema,
   appModuleFeatures: (_) => ['function'],
-  buildConfig: {mode: 'function'},
+  buildSteps: [{mode: 'function'}],
   deployConfig: async (config, directory, apiKey) => {
     let inputQuery: string | undefined
     const moduleId = randomUUID()
diff --git a/packages/app/src/cli/models/extensions/specifications/pos_ui_extension.ts b/packages/app/src/cli/models/extensions/specifications/pos_ui_extension.ts
@@ -11,7 +11,7 @@ const posUISpec = createExtensionSpecification({
   dependency,
   schema: BaseSchema.extend({name: zod.string()}),
   appModuleFeatures: (_) => ['ui_preview', 'esbuild', 'single_js_entry_path'],
-  buildConfig: {mode: 'ui'},
+  buildSteps: [{mode: 'ui'}],
   deployConfig: async (config, directory) => {
     const result = await getDependencyVersion(dependency, directory)
     if (result === 'not_found') throw new BugError(`Dependency ${dependency} not found`)
diff --git a/packages/app/src/cli/models/extensions/specifications/product_subscription.ts b/packages/app/src/cli/models/extensions/specifications/product_subscription.ts
@@ -12,7 +12,7 @@ const productSubscriptionSpec = createExtensionSpecification({
   graphQLType: 'subscription_management',
   schema: BaseSchema,
   appModuleFeatures: (_) => ['ui_preview', 'esbuild', 'single_js_entry_path'],
-  buildConfig: {mode: 'ui'},
+  buildSteps: [{mode: 'ui'}],
   deployConfig: async (_, directory) => {
     const result = await getDependencyVersion(dependency, directory)
     if (result === 'not_found') throw new BugError(`Dependency ${dependency} not found`)
diff --git a/packages/app/src/cli/models/extensions/specifications/tax_calculation.ts b/packages/app/src/cli/models/extensions/specifications/tax_calculation.ts
@@ -23,7 +23,7 @@ const spec = createExtensionSpecification({
   identifier: 'tax_calculation',
   schema: TaxCalculationsSchema,
   appModuleFeatures: (_) => [],
-  buildConfig: {mode: 'tax_calculation'},
+  buildSteps: [{mode: 'tax_calculation'}],
   deployConfig: async (config, _) => {
     return {
       production_api_base_url: config.production_api_base_url,
diff --git a/packages/app/src/cli/models/extensions/specifications/theme.ts b/packages/app/src/cli/models/extensions/specifications/theme.ts
@@ -12,7 +12,7 @@ const themeSpec = createExtensionSpecification({
   schema: BaseSchema,
   partnersWebIdentifier: 'theme_app_extension',
   graphQLType: 'theme_app_extension',
-  buildConfig: {mode: 'theme'},
+  buildSteps: [{mode: 'theme'}],
   appModuleFeatures: (_) => {
     return ['theme']
   },
diff --git a/packages/app/src/cli/models/extensions/specifications/ui_extension.ts b/packages/app/src/cli/models/extensions/specifications/ui_extension.ts
@@ -83,7 +83,7 @@ const uiExtensionSpec = createExtensionSpecification({
   identifier: 'ui_extension',
   dependency,
   schema: UIExtensionSchema,
-  buildConfig: {mode: 'ui'},
+  buildSteps: [{mode: 'ui'}],
   appModuleFeatures: (config) => {
     const basic: ExtensionFeature[] = ['ui_preview', 'esbuild', 'generates_source_maps']
     const needsCart =
diff --git a/packages/app/src/cli/models/extensions/specifications/web_pixel_extension.ts b/packages/app/src/cli/models/extensions/specifications/web_pixel_extension.ts
@@ -31,7 +31,7 @@ const webPixelSpec = createExtensionSpecification({
   partnersWebIdentifier: 'web_pixel',
   schema: WebPixelSchema,
   appModuleFeatures: (_) => ['esbuild', 'single_js_entry_path'],
-  buildConfig: {mode: 'ui'},
+  buildSteps: [{mode: 'ui'}],
   deployConfig: async (config, _) => {
     return {
       runtime_context: config.runtime_context,
diff --git a/packages/app/src/cli/services/build/extension.ts b/packages/app/src/cli/services/build/extension.ts
@@ -193,6 +193,11 @@ export async function buildFunctionExtension(
   }
 }
 
+export async function buildTaxCalculationExtension(extension: ExtensionInstance): Promise<void> {
+  await touchFile(extension.outputPath)
+  await writeFile(extension.outputPath, '(()=>{})();')
+}
+
 export async function bundleFunctionExtension(wasmPath: string, bundlePath: string) {
   outputDebug(`Converting WASM from ${wasmPath} to base64 in ${bundlePath}`)
   const base64Contents = await readFile(wasmPath, {encoding: 'base64'})
diff --git a/packages/app/src/cli/services/deploy.ts b/packages/app/src/cli/services/deploy.ts
@@ -201,7 +201,7 @@ export async function deploy(options: DeployOptions) {
   let uploadExtensionsBundleResult!: UploadExtensionsBundleOutput
 
   try {
-    const bundle = app.allExtensions.some((ext) => ext.specification.buildConfig.mode !== 'none')
+    const bundle = app.allExtensions.some((ext) => ext.specification.buildSteps.length > 0)
     let bundlePath: string | undefined
 
     if (bundle) {
