Expose tools and instructions in the Dev Server payload

Author: vividviolet

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

@@ -48,6 +48,12 @@ export interface Asset {
   content: string
 }
 
+export interface BuildAsset {
+  filepath: string
+  module: string
+  static?: boolean
+}
+
 type BuildConfig =
   | {mode: 'ui' | 'theme' | 'function' | 'tax_calculation' | 'none'}
   | {mode: 'copy_files'; filePatterns: string[]; ignoredFilePatterns?: string[]}

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

@@ -6,7 +6,7 @@ import {
   createToolsTypeDefinition,
   ToolsFileSchema,
 } from './type-generation.js'
-import {Asset, AssetIdentifier, ExtensionFeature, createExtensionSpecification} from '../specification.js'
+import {Asset, AssetIdentifier, BuildAsset, ExtensionFeature, createExtensionSpecification} from '../specification.js'
 import {NewExtensionPointSchemaType, NewExtensionPointsSchema, BaseSchema, MetafieldSchema} from '../schemas.js'
 import {loadLocalesConfig} from '../../../utilities/extensions/locales-configuration.js'
 import {getExtensionPointTargetSurface} from '../../../services/dev/extension/utilities.js'
@@ -27,16 +27,10 @@ const validatePoints = (config: {extension_points?: unknown[]; targeting?: unkno
 export interface BuildManifest {
   assets: {
     // Main asset is always required
-    [AssetIdentifier.Main]: {
-      filepath: string
-      module?: string
-    }
-  } & {
-    [key in AssetIdentifier]?: {
-      filepath: string
-      module?: string
-      static?: boolean
-    }
+    [AssetIdentifier.Main]: BuildAsset
+    [AssetIdentifier.ShouldRender]?: BuildAsset
+    [AssetIdentifier.Tools]?: BuildAsset
+    [AssetIdentifier.Instructions]?: BuildAsset
   }
 }
 
@@ -147,27 +141,10 @@ const uiExtensionSpec = createExtensionSpecification({
 
     const assets: {[key: string]: Asset} = {}
     extensionPoints.forEach((extensionPoint) => {
-      // Start of Selection
-      Object.entries(extensionPoint.build_manifest.assets).forEach(([identifier, asset]) => {
-        if (identifier === AssetIdentifier.Main) {
-          return
-        }
-
-        // Skip static assets - they are copied after esbuild completes in rebuildContext
-        if (asset.static && asset.module) {
-          return
-        }
-
-        assets[identifier] = {
-          identifier: identifier as AssetIdentifier,
-          outputFileName: asset.filepath,
-          content: shouldIncludeShopifyExtend
-            ? `import shouldRender from '${asset.module}';shopify.extend('${getShouldRenderTarget(
-                extensionPoint.target,
-              )}', (...args) => shouldRender(...args));`
-            : `import '${asset.module}'`,
-        }
-      })
+      const shouldRenderAsset = buildShouldRenderAsset(extensionPoint, shouldIncludeShopifyExtend)
+      if (shouldRenderAsset) {
+        assets[AssetIdentifier.ShouldRender] = shouldRenderAsset
+      }
     })
 
     const assetsArray = Object.values(assets)
@@ -458,4 +435,23 @@ export function getShouldRenderTarget(target: string) {
   return target.replace(/\.render$/, '.should-render')
 }
 
+function buildShouldRenderAsset(
+  extensionPoint: NewExtensionPointSchemaType & {build_manifest: BuildManifest},
+  shouldIncludeShopifyExtend: boolean,
+) {
+  const shouldRenderAsset = extensionPoint.build_manifest.assets[AssetIdentifier.ShouldRender]
+  if (!shouldRenderAsset) {
+    return
+  }
+  return {
+    identifier: AssetIdentifier.ShouldRender,
+    outputFileName: shouldRenderAsset.filepath,
+    content: shouldIncludeShopifyExtend
+      ? `import shouldRender from '${shouldRenderAsset.module}';shopify.extend('${getShouldRenderTarget(
+          extensionPoint.target,
+        )}', (...args) => shouldRender(...args));`
+      : `import '${shouldRenderAsset.module}'`,
+  }
+}
+
 export default uiExtensionSpec