Add new copy_files build mode and apply it to flow

Author: isaacroldan

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

@@ -14,7 +14,6 @@ import {WebhooksSpecIdentifier} from './specifications/app_config_webhook.js'
 import {WebhookSubscriptionSpecIdentifier} from './specifications/app_config_webhook_subscription.js'
 import {
   ExtensionBuildOptions,
-  buildFlowTemplateExtension,
   buildFunctionExtension,
   buildThemeExtension,
   buildUIExtension,
@@ -135,7 +134,14 @@ export class ExtensionInstance<TConfiguration extends BaseConfigType = BaseConfi
   }
 
   get outputFileName() {
-    return this.isFunctionExtension ? 'index.wasm' : `${this.handle}.js`
+    const mode = this.specification.buildConfig.mode
+    if (mode === 'copy_files' || mode === 'theme') {
+      return ''
+    } else if (mode === 'function') {
+      return 'index.wasm'
+    } else {
+      return `${this.handle}.js`
+    }
   }
 
   constructor(options: {
@@ -344,13 +350,12 @@ export class ExtensionInstance<TConfiguration extends BaseConfigType = BaseConfi
 
     switch (mode) {
       case 'theme':
-        return buildThemeExtension(this, options)
+        await buildThemeExtension(this, options)
+        return bundleThemeExtension(this, options)
       case 'function':
         return buildFunctionExtension(this, options)
       case 'ui':
         return buildUIExtension(this, options)
-      case 'flow':
-        return buildFlowTemplateExtension(this, options)
       case 'tax_calculation':
         await touchFile(this.outputPath)
         await writeFile(this.outputPath, '(()=>{})();')
@@ -371,9 +376,6 @@ export class ExtensionInstance<TConfiguration extends BaseConfigType = BaseConfi
     this.outputPath = this.getOutputPathForDirectory(bundleDirectory, outputId)
 
     await this.build(options)
-    if (this.isThemeExtension) {
-      await bundleThemeExtension(this, options)
-    }
 
     const bundleInputPath = joinPath(bundleDirectory, this.getOutputFolderId(outputId))
     await this.keepBuiltSourcemapsLocally(bundleInputPath)
@@ -402,7 +404,7 @@ export class ExtensionInstance<TConfiguration extends BaseConfigType = BaseConfi
 
   getOutputPathForDirectory(directory: string, outputId?: string) {
     const id = this.getOutputFolderId(outputId)
-    const outputFile = this.isThemeExtension ? '' : joinPath('dist', this.outputFileName)
+    const outputFile = this.outputFileName === '' ? '' : joinPath('dist', this.outputFileName)
     return joinPath(directory, id, outputFile)
   }
 

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

@@ -47,7 +47,7 @@ export interface Asset {
 }
 
 type BuildConfig =
-  | {mode: 'ui' | 'theme' | 'flow' | 'function' | 'tax_calculation' | 'none'}
+  | {mode: 'ui' | 'theme' | 'function' | 'tax_calculation' | 'none'}
   | {mode: 'copy_files'; filePatterns: string[]; ignoredFilePatterns?: string[]}
 /**
  * Extension specification with all the needed properties and methods to load an extension.

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: 'flow'},
+  buildConfig: {mode: 'copy_files', filePatterns: ['*.flow', '*.json', '*.toml']},
   deployConfig: async (config, extensionPath) => {
     return {
       template_handle: config.handle,

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

@@ -1,6 +1,6 @@
 import {runThemeCheck} from './theme-check.js'
 import {AppInterface} from '../../models/app/app.js'
-import {bundleExtension, bundleFlowTemplateExtension} from '../extensions/bundle.js'
+import {bundleExtension} from '../extensions/bundle.js'
 import {buildJSFunction, runTrampoline, runWasmOpt} from '../function/build.js'
 import {ExtensionInstance} from '../../models/extensions/extension-instance.js'
 import {FunctionConfigType} from '../../models/extensions/specifications/function.js'
@@ -65,19 +65,6 @@ export async function buildThemeExtension(extension: ExtensionInstance, options:
   if (offenses) options.stdout.write(offenses)
 }
 
-/**
- * It builds the flow template extensions.
- * @param options - Build options.
- */
-export async function buildFlowTemplateExtension(
-  extension: ExtensionInstance,
-  options: ExtensionBuildOptions,
-): Promise<void> {
-  options.stdout.write(`Building Flow Template extension ${extension.localIdentifier}...`)
-  await bundleFlowTemplateExtension(extension)
-  options.stdout.write(`${extension.localIdentifier} successfully built`)
-}
-
 /**
  * It builds the UI extensions.
  * @param options - Build options.

packages/app/src/cli/services/extensions/bundle.ts

@@ -2,7 +2,6 @@ import {ExtensionBuildOptions} from '../build/extension.js'
 import {ExtensionInstance} from '../../models/extensions/extension-instance.js'
 import {themeExtensionFiles} from '../../utilities/extensions/theme.js'
 import {EsbuildEnvVarRegex, environmentVariableNames} from '../../constants.js'
-import {flowTemplateExtensionFiles} from '../../utilities/extensions/flow-template.js'
 import {context as esContext, formatMessagesSync} from 'esbuild'
 import {AbortSignal} from '@shopify/cli-kit/node/abort'
 import {copyFile, glob} from '@shopify/cli-kit/node/fs'
@@ -78,18 +77,6 @@ export async function bundleThemeExtension(
   )
 }
 
-export async function bundleFlowTemplateExtension(extension: ExtensionInstance): Promise<void> {
-  const files = await flowTemplateExtensionFiles(extension)
-  await Promise.all(
-    files.map(function (filepath) {
-      const relativePathName = relativePath(extension.directory, filepath)
-      const outputFile = joinPath(extension.outputPath, relativePathName)
-      if (filepath === outputFile) return
-      return copyFile(filepath, outputFile)
-    }),
-  )
-}
-
 export async function copyFilesForExtension(
   extension: ExtensionInstance,
   options: ExtensionBuildOptions,