support bundle folder in the bundle ui step config

Author: alfonso-noriega

packages/app/src/cli/models/extensions/specifications/ui_extension.ts

@@ -84,12 +84,17 @@ const uiExtensionSpec = createExtensionSpecification({
   dependency,
   schema: UIExtensionSchema,
   buildConfig: {mode: 'ui'},
-  getOutputRelativePath: (extension: ExtensionInstance<UIExtensionConfigType>) => `dist/${extension.handle}.js`,
+  getOutputRelativePath: (extension: ExtensionInstance<UIExtensionConfigType>) => `${extension.handle}.js`,
   clientSteps: [
     {
       lifecycle: 'deploy',
       steps: [
-        {id: 'bundle-ui', name: 'Bundle UI Extension', type: 'bundle_ui', config: {generatesAssetsManifest: true}},
+        {
+          id: 'bundle-ui',
+          name: 'Bundle UI Extension',
+          type: 'bundle_ui',
+          config: {generatesAssetsManifest: true, bundleFolder: 'dist/'},
+        },
         {
           id: 'include-ui-extension-assets',
           name: 'Include UI Extension Assets',

packages/app/src/cli/services/build/client-steps.ts

@@ -26,6 +26,7 @@ export interface BundleUIStep extends BaseStep {
   readonly type: 'bundle_ui'
   readonly config?: {
     readonly generatesAssetsManifest?: boolean
+    readonly bundleFolder?: string
   }
 }
 

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

@@ -67,8 +67,10 @@ export async function buildUIExtension(extension: ExtensionInstance, options: Ex
     env.APP_URL = options.appURL
   }
 
+  const buildDirectory = options.buildDirectory ?? ''
+
   // Always build into the extension's local directory (e.g. ext/dist/handle.js)
-  const localOutputPath = joinPath(extension.directory, extension.outputRelativePath)
+  const localOutputPath = joinPath(extension.directory, buildDirectory, extension.outputRelativePath)
 
   const {main, assets} = extension.getBundleExtensionStdinContent()
 

packages/app/src/cli/services/build/steps/bundle-ui-step.ts

@@ -2,7 +2,7 @@ import {createOrUpdateManifestFile} from './include-assets/generate-manifest.js'
 import {buildUIExtension} from '../extension.js'
 import {BuildManifest} from '../../../models/extensions/specifications/ui_extension.js'
 import {copyFile} from '@shopify/cli-kit/node/fs'
-import {dirname} from '@shopify/cli-kit/node/path'
+import {dirname, joinPath} from '@shopify/cli-kit/node/path'
 import type {BundleUIStep, BuildContext} from '../client-steps.js'
 
 interface ExtensionPointWithBuildManifest {
@@ -20,9 +20,13 @@ interface ExtensionPointWithBuildManifest {
  */
 export async function executeBundleUIStep(step: BundleUIStep, context: BuildContext): Promise<void> {
   const config = context.extension.configuration
+  context.options.buildDirectory = step.config?.bundleFolder ?? undefined
   const localOutputPath = await buildUIExtension(context.extension, context.options)
+  const bundleOutputDir = step.config?.bundleFolder
+    ? joinPath(dirname(context.extension.outputPath), step.config.bundleFolder)
+    : dirname(context.extension.outputPath)
   // Copy the locally built files into the bundle
-  await copyFile(dirname(localOutputPath), dirname(context.extension.outputPath))
+  await copyFile(dirname(localOutputPath), bundleOutputDir)
 
   if (!step.config?.generatesAssetsManifest) return
 
@@ -32,7 +36,7 @@ export async function executeBundleUIStep(step: BundleUIStep, context: BuildCont
     (ep): ep is ExtensionPointWithBuildManifest => typeof ep === 'object' && ep.build_manifest,
   )
 
-  const entries = extractBuiltAssetEntries(pointsWithManifest)
+  const entries = extractBuiltAssetEntries(pointsWithManifest, step.config?.bundleFolder)
   if (Object.keys(entries).length > 0) {
     await createOrUpdateManifestFile(context, entries)
   }
@@ -42,15 +46,18 @@ export async function executeBundleUIStep(step: BundleUIStep, context: BuildCont
  * Extracts built asset filepaths from `build_manifest` on each extension point,
  * grouped by target. Returns a map of target → `{assetName: filepath}`.
  */
-function extractBuiltAssetEntries(extensionPoints: {target: string; build_manifest: BuildManifest}[]): {
+function extractBuiltAssetEntries(
+  extensionPoints: {target: string; build_manifest: BuildManifest}[],
+  bundleFolder?: string,
+): {
   [target: string]: {[assetName: string]: string}
 } {
   const entries: {[target: string]: {[assetName: string]: string}} = {}
   for (const {target, build_manifest: buildManifest} of extensionPoints) {
     if (!buildManifest?.assets) continue
     const assets: {[name: string]: string} = {}
     for (const [name, asset] of Object.entries(buildManifest.assets)) {
-      if (asset?.filepath) assets[name] = asset.filepath
+      if (asset?.filepath) assets[name] = bundleFolder ? joinPath(bundleFolder, asset.filepath) : asset.filepath
     }
     if (Object.keys(assets).length > 0) entries[target] = assets
   }