Add new copy_files build mode and apply it to flow

Author: isaacroldan

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

@@ -20,7 +20,7 @@ import {
   buildUIExtension,
   bundleFunctionExtension,
 } from '../../services/build/extension.js'
-import {bundleThemeExtension} from '../../services/extensions/bundle.js'
+import {bundleThemeExtension, copyFilesForExtension} from '../../services/extensions/bundle.js'
 import {Identifiers} from '../app/identifiers.js'
 import {DeveloperPlatformClient} from '../../utilities/developer-platform-client.js'
 import {AppConfigurationWithoutPath} from '../app/app.js'
@@ -355,6 +355,13 @@ export class ExtensionInstance<TConfiguration extends BaseConfigType = BaseConfi
         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
     }

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

@@ -46,9 +46,9 @@ export interface Asset {
   content: string
 }
 
-interface BuildConfig {
-  mode: 'ui' | 'theme' | 'flow' | 'function' | 'tax_calculation' | 'none'
-}
+type BuildConfig =
+  | {mode: 'ui' | 'theme' | 'flow' | '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/services/extensions/bundle.test.ts

@@ -1,4 +1,4 @@
-import {bundleExtension, bundleThemeExtension} from './bundle.js'
+import {bundleExtension, bundleThemeExtension, copyFilesForExtension} from './bundle.js'
 import {testApp, testUIExtension} from '../../models/app/app.test-data.js'
 import {loadLocalExtensionsSpecifications} from '../../models/extensions/load-specifications.js'
 import {ExtensionInstance} from '../../models/extensions/extension-instance.js'
@@ -277,3 +277,118 @@ describe('bundleExtension()', () => {
     })
   })
 })
+
+describe('copyFilesForExtension()', () => {
+  test('copies files matching include patterns to output directory', async () => {
+    await inTemporaryDirectory(async (tmpDir) => {
+      // Given
+      const extensionDir = joinPath(tmpDir, 'extension')
+      const outputDir = joinPath(tmpDir, 'output')
+
+      // Create extension directory structure
+      await mkdir(joinPath(extensionDir, 'src'))
+      await mkdir(joinPath(extensionDir, 'assets'))
+      await mkdir(joinPath(extensionDir, 'assets', 'images'))
+
+      // Create test files
+      touchFileSync(joinPath(extensionDir, 'config.json'))
+      touchFileSync(joinPath(extensionDir, 'src', 'index.js'))
+      touchFileSync(joinPath(extensionDir, 'src', 'styles.css'))
+      touchFileSync(joinPath(extensionDir, 'assets', 'logo.png'))
+      touchFileSync(joinPath(extensionDir, 'assets', 'images', 'banner.jpg'))
+
+      const extension = {
+        directory: extensionDir,
+        outputPath: outputDir,
+        localIdentifier: 'test-extension',
+      } as ExtensionInstance
+
+      const stdout = {write: vi.fn()}
+      const stderr = {write: vi.fn()}
+      const options = {stdout, stderr} as any
+
+      // When - copy all .json and .png files
+      await copyFilesForExtension(extension, options, ['*.json', '*.png'], [])
+
+      // Then
+      const copiedFiles = await glob(joinPath(outputDir, '**/*'))
+      const relativeFiles = copiedFiles.map((file) => file.replace(`${outputDir}/`, ''))
+
+      expect(relativeFiles.sort()).toEqual(['assets/logo.png', 'config.json'])
+      expect(stdout.write).toHaveBeenCalledWith('Copying files for extension test-extension...')
+      expect(stdout.write).toHaveBeenCalledWith('test-extension successfully built')
+    })
+  })
+
+  test('respects ignore patterns when copying files', async () => {
+    await inTemporaryDirectory(async (tmpDir) => {
+      // Given
+      const extensionDir = joinPath(tmpDir, 'extension')
+      const outputDir = joinPath(tmpDir, 'output')
+
+      // Create extension directory structure
+      await mkdir(joinPath(extensionDir, 'dist'))
+      await mkdir(joinPath(extensionDir, 'src'))
+      await mkdir(joinPath(extensionDir, 'test'))
+
+      // Create test files
+      touchFileSync(joinPath(extensionDir, 'README.md'))
+      touchFileSync(joinPath(extensionDir, 'package.json'))
+      touchFileSync(joinPath(extensionDir, 'dist', 'bundle.js'))
+      touchFileSync(joinPath(extensionDir, 'src', 'index.js'))
+      touchFileSync(joinPath(extensionDir, 'test', 'test.js'))
+      touchFileSync(joinPath(extensionDir, 'test', 'README.md'))
+
+      const extension = {
+        directory: extensionDir,
+        outputPath: outputDir,
+        localIdentifier: 'test-extension',
+      } as ExtensionInstance
+
+      const stdout = {write: vi.fn()}
+      const stderr = {write: vi.fn()}
+      const options = {stdout, stderr} as any
+
+      // When - copy all files but ignore test directory and dist files
+      await copyFilesForExtension(extension, options, ['*'], ['test/**', 'dist/**'])
+
+      // Then
+      const copiedFiles = await glob(joinPath(outputDir, '**/*'))
+      const relativeFiles = copiedFiles.map((file) => file.replace(`${outputDir}/`, ''))
+
+      expect(relativeFiles.sort()).toEqual(['README.md', 'package.json', 'src/index.js'])
+      // Verify ignored files were not copied
+      expect(relativeFiles).not.toContain('test/test.js')
+      expect(relativeFiles).not.toContain('test/README.md')
+      expect(relativeFiles).not.toContain('dist/bundle.js')
+    })
+  })
+
+  test('handles empty include patterns gracefully', async () => {
+    await inTemporaryDirectory(async (tmpDir) => {
+      // Given
+      const extensionDir = joinPath(tmpDir, 'extension')
+      const outputDir = joinPath(tmpDir, 'output')
+
+      await mkdir(extensionDir)
+      touchFileSync(joinPath(extensionDir, 'file.txt'))
+
+      const extension = {
+        directory: extensionDir,
+        outputPath: outputDir,
+        localIdentifier: 'test-extension',
+      } as ExtensionInstance
+
+      const stdout = {write: vi.fn()}
+      const stderr = {write: vi.fn()}
+      const options = {stdout, stderr} as any
+
+      // When - no include patterns provided
+      await copyFilesForExtension(extension, options, [], [])
+
+      // Then - no files should be copied
+      const copiedFiles = await glob(joinPath(outputDir, '**/*'))
+      expect(copiedFiles).toEqual([])
+    })
+  })
+})

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

@@ -5,7 +5,7 @@ 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} from '@shopify/cli-kit/node/fs'
+import {copyFile, glob} from '@shopify/cli-kit/node/fs'
 import {joinPath, relativePath} from '@shopify/cli-kit/node/path'
 import {outputDebug} from '@shopify/cli-kit/node/output'
 import {isTruthy} from '@shopify/cli-kit/node/context/utilities'
@@ -80,6 +80,32 @@ 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,
+  includePatterns: string[],
+  ignoredPatterns: string[] = [],
+): Promise<void> {
+  options.stdout.write(`Copying files for extension ${extension.localIdentifier}...`)
+  const include = includePatterns.map((pattern) => joinPath('**', pattern))
+  const ignored = ignoredPatterns.map((pattern) => joinPath('**', pattern))
+  const files = await glob(include, {
+    absolute: true,
+    cwd: extension.directory,
+    ignore: ignored,
+  })
+
   await Promise.all(
     files.map(function (filepath) {
       const relativePathName = relativePath(extension.directory, filepath)
@@ -88,6 +114,7 @@ export async function bundleFlowTemplateExtension(extension: ExtensionInstance):
       return copyFile(filepath, outputFile)
     }),
   )
+  options.stdout.write(`${extension.localIdentifier} successfully built`)
 }
 
 function onResult(result: Awaited<ReturnType<typeof esBuild>> | null, options: BundleOptions) {