Generate local sourcemap files for UI extensions

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

@@ -18,7 +18,7 @@
 import {DeveloperPlatformClient} from '../../utilities/developer-platform-client.js'
 import {joinPath} from '@shopify/cli-kit/node/path'
 import {describe, expect, test} from 'vitest'
-import {inTemporaryDirectory, readFile} from '@shopify/cli-kit/node/fs'
+import {inTemporaryDirectory, readFile, mkdir, writeFile, fileExists, tempDirectory} from '@shopify/cli-kit/node/fs'
 import {slugify} from '@shopify/cli-kit/common/string'
 import {hashString} from '@shopify/cli-kit/node/crypto'
 import {Writable} from 'stream'
@@ -114,6 +114,28 @@
  })
 })
 
+describe('keepBuiltSourcemapsLocally', async () => {
+ test('moves the appropriate source map files to the expected directory', async () => {
+ await inTemporaryDirectory(async (bundleDirectory: string) => {
+ const outputPath = tempDirectory()
+ const extensionInstance = await testUIExtension({handle: 'scriptToMove', directory: outputPath})
+ const someDirPath = joinPath(bundleDirectory, 'some_dir')
+ const otherDirPath = joinPath(bundleDirectory, 'other_dir')
+ await mkdir(someDirPath).then(() => writeFile(joinPath(someDirPath, 'scriptToMove.js'), 'abc'))
+ await mkdir(someDirPath).then(() => writeFile(joinPath(someDirPath, 'scriptToMove.js.map'), 'abc map'))
+ await mkdir(otherDirPath).then(() => writeFile(joinPath(otherDirPath, 'scriptToIgnore.js'), 'abc'))
+ await mkdir(otherDirPath).then(() => writeFile(joinPath(otherDirPath, 'scriptToIgnore.js.map'), 'abc map'))
+
+ await extensionInstance.keepBuiltSourcemapsLocally(bundleDirectory)
+
+ expect(fileExists(joinPath(outputPath, 'scriptToMove.js'))).toBe(false)
+ expect(fileExists(joinPath(outputPath, 'scriptToMove.js.map'))).toBe(true)
+ expect(fileExists(joinPath(outputPath, 'scriptToIgnore.js'))).toBe(false)
+ expect(fileExists(joinPath(outputPath, 'scriptToIgnore.js.map'))).toBe(false)
+ })
+ })
+})
+
 describe('build', async () => {
  test('creates a valid JS file for tax calculation extensions', async () => {
  await inTemporaryDirectory(async (tmpDir) => {
@@ -337,7 +359,7 @@
  // Given
  const extensionInstance = await testUIExtension()
 
  const result = extensionInstance.configuration.handle ?? slugify(extensionInstance.configuration.name ?? '')
  // Then
  expect(extensionInstance.handle).toBe(result)
  })
@@ -360,7 +382,7 @@
  // When
  const subscription = extensionInstance.configuration as unknown as SingleWebhookSubscriptionType
  let result = ''
  if (subscription) {
  result = hashString(subscription.topic + subscription.uri + subscription.filter).substring(
  0,
  MAX_EXTENSION_HANDLE_LENGTH,

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

@@ -27,8 +27,8 @@
 import {constantize, slugify} from '@shopify/cli-kit/common/string'
 import {hashString, randomUUID} from '@shopify/cli-kit/node/crypto'
 import {partnersFqdn} from '@shopify/cli-kit/node/context/fqdn'
-import {joinPath} from '@shopify/cli-kit/node/path'
-import {fileExists, touchFile, writeFile} from '@shopify/cli-kit/node/fs'
+import {joinPath, basename} from '@shopify/cli-kit/node/path'
+import {fileExists, touchFile, moveFile, writeFile, glob} from '@shopify/cli-kit/node/fs'
 import {getPathValue} from '@shopify/cli-kit/common/object'
 import {useThemebundling} from '@shopify/cli-kit/node/context/local'
 
@@ -112,6 +112,10 @@
  return this.features.includes('esbuild')
  }
 
+ get isSourceMapGeneratingExtension() {
+ return this.features.includes('generates_source_maps')
+ }
+
  get isAppConfigExtension() {
  return ['single', 'dynamic'].includes(this.specification.uidStrategy)
  }
@@ -219,6 +223,23 @@
  return this.specification.buildValidation(this)
  }
 
+ async keepBuiltSourcemapsLocally(bundleDirectory: string): Promise<void> {
+ if (!this.isSourceMapGeneratingExtension) return Promise.resolve()
+
+ const pathsToMove = await glob(`**/${this.handle}*.map`, {
+ cwd: bundleDirectory,
+ absolute: true,
+ followSymbolicLinks: false,
+ })
+
+ await Promise.all(
+ pathsToMove.map(async (filePath) => {
+ const outputPath = joinPath(this.directory, 'dist', basename(filePath))
+ await moveFile(filePath, outputPath, {overwrite: true})
+ }),
+ )
+ }
+
  async publishURL(options: {orgId: string; appId: string; extensionId?: string}) {
  const fqdn = await partnersFqdn()
  const parnersPath = this.specification.partnersWebIdentifier
@@ -230,7 +251,7 @@
  if (this.specification.getBundleExtensionStdinContent) {
  return this.specification.getBundleExtensionStdinContent(this.configuration)
  }
  const relativeImportPath = this.entrySourceFilePath?.replace(this.directory, '')
  return `import '.${relativeImportPath}';`
  }
 
@@ -239,7 +260,7 @@
  }
 
  hasExtensionPointTarget(target: string): boolean {
  return this.specification.hasExtensionPointTarget?.(this.configuration, target) || false
  }
 
  // Functions specific properties
@@ -257,7 +278,7 @@
  return null
  }
 
  const watchPaths: string[] = configuredPaths ?? []
  if (this.isJavaScript && configuredPaths.length === 0) {
  watchPaths.push(joinPath('src', '**', '*.{js,ts}'))
  }
@@ -291,7 +312,7 @@
  }
 
  get isJavaScript() {
  return Boolean(this.entrySourceFilePath?.endsWith('.js') || this.entrySourceFilePath?.endsWith('.ts'))
  }
 
  async build(options: ExtensionBuildOptions): Promise<void> {
@@ -328,7 +349,7 @@
  }
 
  get singleTarget() {
  const targets = (getPathValue(this.configuration, 'targeting') as {target: string}[]) ?? []
  if (targets.length !== 1) return undefined
  return targets[0]?.target
  }
@@ -372,7 +393,7 @@
  case 'single':
  return slugify(this.specification.identifier)
  case 'uuid':
  return this.configuration.handle ?? slugify(this.configuration.name ?? '')
  case 'dynamic':
  // Hardcoded temporal solution for webhooks
  const subscription = this.configuration as unknown as SingleWebhookSubscriptionType

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

@@ -19,6 +19,7 @@ export type ExtensionFeature =
  | 'cart_url'
  | 'esbuild'
  | 'single_js_entry_path'
+ | 'generates_source_maps'
 
 export interface TransformationConfig {
  [key: string]: string

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

@@ -18,7 +18,14 @@ const checkoutSpec = createExtensionSpecification({
  identifier: 'checkout_ui_extension',
  dependency,
  schema: CheckoutSchema,
- appModuleFeatures: (_) => ['ui_preview', 'bundling', 'cart_url', 'esbuild', 'single_js_entry_path'],
+ appModuleFeatures: (_) => [
+ 'ui_preview',
+ 'bundling',
+ 'cart_url',
+ 'esbuild',
+ 'single_js_entry_path',
+ 'generates_source_maps',
+ ],
  deployConfig: async (config, directory) => {
  return {
  extension_points: config.extension_points,

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

@@ -28,7 +28,7 @@
  return {
  target: targeting.target,
  module: targeting.module,
  metafields: targeting.metafields ?? config.metafields ?? [],
  default_placement_reference: targeting.default_placement,
  capabilities: targeting.capabilities,
  }
@@ -41,9 +41,9 @@
  dependency,
  schema: UIExtensionSchema,
  appModuleFeatures: (config) => {
- const basic: ExtensionFeature[] = ['ui_preview', 'bundling', 'esbuild']
+ const basic: ExtensionFeature[] = ['ui_preview', 'bundling', 'esbuild', 'generates_source_maps']
  const needsCart =
  config?.extension_points?.find((extensionPoint) => {
  return getExtensionPointTargetSurface(extensionPoint.target) === 'checkout'
  }) !== undefined
  return needsCart ? [...basic, 'cart_url'] : basic
@@ -83,7 +83,7 @@
  const uniqueTargets: string[] = []
  const duplicateTargets: string[] = []
 
  if (!extensionPoints || extensionPoints.length === 0) {
  return err(missingExtensionPointsMessage)
  }
 
@@ -100,11 +100,11 @@
  )
  }
 
  if (!uniqueTargets.includes(target)) {
  uniqueTargets.push(target)
  } else {
  duplicateTargets.push(target)
  }
  }
 
  if (duplicateTargets.length) {

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

@@ -104,6 +104,7 @@ export async function buildUIExtension(extension: ExtensionInstance, options: Ex
  env,
  stderr: options.stderr,
  stdout: options.stdout,
+ sourceMaps: extension.isSourceMapGeneratingExtension,
  })
  } catch (extensionBundlingError) {
  // this fails if the app's own source code is broken; wrap such that this isn't flagged as a CLI bug

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

@@ -48,6 +48,12 @@ export async function bundleAndBuildExtensions(options: BundleOptions, systemEnv
  showTimestamps: false,
  })
 
+ await Promise.all(
+ options.app.allExtensions.map(async (extension) => {
+ await extension.keepBuiltSourcemapsLocally(bundleDirectory)
+ }),
+ )
+
  if (options.bundlePath) {
  await zip({
  inputDirectory: bundleDirectory,