Merge pull request #6772 from Shopify/01-16-expose_tools_and_instructions_in_the_dev_server_payload

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.test.ts

@@ -207,6 +207,7 @@ describe('ui_extension', async () => {
         {
           target: 'EXTENSION::POINT::A',
           tools: undefined,
+          instructions: undefined,
           module: './src/ExtensionPointA.js',
           metafields: [{namespace: 'test', key: 'test'}],
           default_placement_reference: undefined,
@@ -273,6 +274,7 @@ describe('ui_extension', async () => {
         {
           target: 'EXTENSION::POINT::A',
           tools: undefined,
+          instructions: undefined,
           module: './src/ExtensionPointA.js',
           metafields: [],
           default_placement_reference: 'PLACEMENT_REFERENCE1',
@@ -335,6 +337,7 @@ describe('ui_extension', async () => {
         {
           target: 'EXTENSION::POINT::A',
           tools: undefined,
+          instructions: undefined,
           module: './src/ExtensionPointA.js',
           metafields: [],
           urls: {},
@@ -397,6 +400,7 @@ describe('ui_extension', async () => {
         {
           target: 'EXTENSION::POINT::A',
           tools: undefined,
+          instructions: undefined,
           module: './src/ExtensionPointA.js',
           metafields: [],
           default_placement_reference: undefined,
@@ -462,6 +466,7 @@ describe('ui_extension', async () => {
         {
           target: 'EXTENSION::POINT::A',
           tools: undefined,
+          instructions: undefined,
           module: './src/ExtensionPointA.js',
           metafields: [],
           default_placement_reference: undefined,
@@ -529,6 +534,7 @@ describe('ui_extension', async () => {
         {
           target: 'EXTENSION::POINT::A',
           tools: undefined,
+          instructions: undefined,
           module: './src/ExtensionPointA.js',
           metafields: [],
           default_placement_reference: undefined,
@@ -596,6 +602,7 @@ describe('ui_extension', async () => {
           target: 'EXTENSION::POINT::A',
           module: './src/ExtensionPointA.js',
           tools: './tools.json',
+          instructions: undefined,
           metafields: [],
           default_placement_reference: undefined,
           capabilities: undefined,
@@ -663,6 +670,7 @@ describe('ui_extension', async () => {
           target: 'EXTENSION::POINT::A',
           module: './src/ExtensionPointA.js',
           tools: undefined,
+          instructions: './instructions.md',
           metafields: [],
           default_placement_reference: undefined,
           capabilities: undefined,
@@ -890,6 +898,7 @@ Please check the configuration in ${joinPath(tmpDir, 'shopify.extension.toml')}`
           target: 'EXTENSION::POINT::A',
           module: './src/ExtensionPointA.js',
           tools: './tools.json',
+          instructions: './instructions.md',
           metafields: [],
           default_placement_reference: undefined,
           capabilities: undefined,

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
   }
 }
 
@@ -88,7 +82,6 @@ export const UIExtensionSchema = BaseSchema.extend({
       }
 
       return {
-        tools: targeting.tools,
         target: targeting.target,
         module: targeting.module,
         metafields: targeting.metafields ?? config.metafields ?? [],
@@ -97,6 +90,8 @@ export const UIExtensionSchema = BaseSchema.extend({
         capabilities: targeting.capabilities,
         preloads: targeting.preloads ?? {},
         build_manifest: buildManifest,
+        tools: targeting.tools,
+        instructions: targeting.instructions,
       }
     })
     return {...config, extension_points: extensionPoints}
@@ -148,27 +143,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)
@@ -181,8 +159,8 @@ const uiExtensionSpec = createExtensionSpecification({
     if (!isRemoteDomExtension(config)) return
 
     await Promise.all(
-      config.extension_points.map((extensionPoint) => {
-        if (!('build_manifest' in extensionPoint)) return Promise.resolve()
+      config.extension_points.flatMap((extensionPoint) => {
+        if (!('build_manifest' in extensionPoint)) return []
 
         return Object.entries(extensionPoint.build_manifest.assets).map(([_, asset]) => {
           if (asset.static && asset.module) {
@@ -459,4 +437,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