Update ui_extension to support Unified config

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

@@ -6,6 +6,7 @@ import {describe, expect, test, vi} from 'vitest'
 import {err, ok} from '@shopify/cli-kit/node/result'
 import {inTemporaryDirectory, mkdir, touchFile} from '@shopify/cli-kit/node/fs'
 import {joinPath} from '@shopify/cli-kit/node/path'
+import {zod} from '@shopify/cli-kit/node/schema'
 
 describe('ui_extension', async () => {
   interface GetUIExtensionProps {
@@ -65,6 +66,70 @@ describe('ui_extension', async () => {
       })
     })
 
+    test('targeting object is transformed into extension_points. metafields are inherited', async () => {
+      const allSpecs = await loadFSExtensionsSpecifications()
+      const specification = allSpecs.find((spec) => spec.identifier === 'ui_extension')!
+      const configuration = {
+        targeting: [
+          {
+            target: 'EXTENSION::POINT::A',
+            module: './src/ExtensionPointA.js',
+          },
+        ],
+        api_version: '2023-01' as const,
+        name: 'UI Extension',
+        type: 'ui_extension',
+        metafields: [{namespace: 'test', key: 'test'}],
+        capabilities: {
+          block_progress: false,
+          network_access: false,
+          api_access: false,
+        },
+        settings: {},
+      }
+
+      // When
+      const got = specification.schema.parse(configuration)
+
+      // Then
+      expect(got.extension_points).toStrictEqual([
+        {
+          target: 'EXTENSION::POINT::A',
+          module: './src/ExtensionPointA.js',
+          metafields: [{namespace: 'test', key: 'test'}],
+        },
+      ])
+    })
+
+    test('returns error if there is no targeting or extension_points', async () => {
+      // Given
+      const allSpecs = await loadFSExtensionsSpecifications()
+      const specification = allSpecs.find((spec) => spec.identifier === 'ui_extension')!
+      const configuration = {
+        api_version: '2023-01' as const,
+        name: 'UI Extension',
+        type: 'ui_extension',
+        metafields: [{namespace: 'test', key: 'test'}],
+        capabilities: {
+          block_progress: false,
+          network_access: false,
+          api_access: false,
+        },
+        settings: {},
+      }
+
+      // When/Then
+      expect(() => specification.schema.parse(configuration)).toThrowError(
+        new zod.ZodError([
+          {
+            code: zod.ZodIssueCode.custom,
+            message: 'No extension targets defined, add a `targeting` field to your configuration',
+            path: [],
+          },
+        ]),
+      )
+    })
+
     test('returns err(message) when extensionPoints[n].module does not map to a file', async () => {
       await inTemporaryDirectory(async (tmpDir) => {
         // Given

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

@@ -3,22 +3,34 @@ import {NewExtensionPointSchemaType, NewExtensionPointsSchema, BaseSchema} from
 import {loadLocalesConfig} from '../../../utilities/extensions/locales-configuration.js'
 import {configurationFileNames} from '../../../constants.js'
 import {getExtensionPointTargetSurface} from '../../../services/dev/extension/utilities.js'
-import {zod} from '@shopify/cli-kit/node/schema'
 import {err, ok, Result} from '@shopify/cli-kit/node/result'
 import {fileExists} from '@shopify/cli-kit/node/fs'
 import {joinPath} from '@shopify/cli-kit/node/path'
 import {outputContent, outputToken} from '@shopify/cli-kit/node/output'
 
 const dependency = '@shopify/checkout-ui-extensions'
 
+const validatePoints = (config: {extension_points?: unknown[]; targeting?: unknown[]}) => {
+  return config.extension_points !== undefined || config.targeting !== undefined
+}
+
+const missingExtensionPointsMessage = 'No extension targets defined, add a `targeting` field to your configuration'
+
 const UIExtensionSchema = BaseSchema.extend({
-  settings: zod
-    .object({
-      fields: zod.any().optional(),
-    })
-    .optional(),
-  extension_points: NewExtensionPointsSchema,
+  extension_points: NewExtensionPointsSchema.optional(),
+  targeting: NewExtensionPointsSchema.optional(),
 })
+  .refine((config) => validatePoints(config), missingExtensionPointsMessage)
+  .transform((config) => {
+    const extensionPoints = (config.targeting ?? config.extension_points ?? []).map((targeting) => {
+      return {
+        target: targeting.target,
+        module: targeting.module,
+        metafields: targeting.metafields ?? config.metafields ?? [],
+      }
+    })
+    return {...config, extension_points: extensionPoints}
+  })
 
 const spec = createExtensionSpecification({
   identifier: 'ui_extension',
@@ -81,6 +93,10 @@ async function validateUIExtensionPointConfig(
   const uniqueTargets: string[] = []
   const duplicateTargets: string[] = []
 
+  if (!extensionPoints || extensionPoints.length === 0) {
+    return err(missingExtensionPointsMessage)
+  }
+
   for await (const {module, target} of extensionPoints) {
     const fullPath = joinPath(directory, module)
     const exists = await fileExists(fullPath)

packages/app/templates/ui-extensions/projects/ui_extension/shopify.ui.extension.toml.liquid

@@ -1,17 +1,20 @@
 name = "{{ name }}"
-type = "ui_extension"
 api_version = "2022-10"
 
 [capabilities]
 api_access = true
 network_access = true
 block_progress = true
 
-[[extension_points]]
-target = "Checkout::Dynamic::Render"
+[[extensions]]
+type = "ui_extension"
+handle = "{{ handle }}"
+
+[[extensions.targeting]]
 module = "./src/CheckoutDynamicRender.{{ srcFileExtension }}"
+target = "Checkout::Dynamic::Render"
 
-# [[extension_points.metafields]]
+# [[extensions.metafields]]
 # namespace = "my-namespace"
 # key = "my-key"