Use types from ui-extensions

Author: JoviDeCroock

packages/app/src/cli/models/extensions/specifications/type-generation.test.ts

@@ -55,17 +55,8 @@ interface CreateApplicationEmailIntentRequest {
   value?: CreateApplicationEmailIntentValue;
 }
 
-interface ShopifyGeneratedIntentResponse<Data = unknown> {
-  ok(data?: Data): Promise<void>;
-}
-
-interface ShopifyGeneratedIntentsApi<Request = unknown, ResponseData = unknown> {
-  request: Request;
-  response?: ShopifyGeneratedIntentResponse<ResponseData>;
-}
-
 type ShopifyGeneratedIntentVariants =
-  | ShopifyGeneratedIntentsApi<CreateApplicationEmailIntentRequest, CreateApplicationEmailIntentOutput>
+  | import('@shopify/ui-extensions/admin').ShopifyGeneratedIntentVariant<CreateApplicationEmailIntentRequest, CreateApplicationEmailIntentOutput>
 `)
   })
 
@@ -111,9 +102,9 @@ type ShopifyGeneratedIntentVariants =
     expect(result).toContain('type CreateApplicationEmailIntentOutput = unknown')
     expect(result).toContain('interface EditShopifyProductIntentRequest')
     expect(result).toContain('type EditShopifyProductIntentValue = string')
-    expect(result).toContain('response?: ShopifyGeneratedIntentResponse<ResponseData>;')
+    expect(result).not.toContain('ShopifyGeneratedIntentsApi')
     expect(result).toContain(
-      'ShopifyGeneratedIntentsApi<EditShopifyProductIntentRequest, EditShopifyProductIntentOutput>',
+      "import('@shopify/ui-extensions/admin').ShopifyGeneratedIntentVariant<EditShopifyProductIntentRequest, EditShopifyProductIntentOutput>",
     )
   })
 

packages/app/src/cli/models/extensions/specifications/type-generation.ts

@@ -8,6 +8,7 @@ import {zod} from '@shopify/cli-kit/node/schema'
 import {createRequire} from 'module'
 
 const require = createRequire(import.meta.url)
+const generatedTypesHelperImportPath = '@shopify/ui-extensions/admin'
 
 export function parseApiVersion(apiVersion: string): {year: number; month: number} | null {
   const [year, month] = apiVersion.split('-')
@@ -197,99 +198,17 @@ function buildShopifyType(targets: string[], {includesTools, includesIntents}: S
     return baseShopifyType
   }
 
-  const wrappers = [
-    ...(includesIntents ? ['WithGeneratedIntents'] : []),
-    ...(includesTools ? ['WithGeneratedTools'] : []),
-  ]
-
-  return wrappers.reduce((shopifyType, wrapper) => `${wrapper}<${shopifyType}>`, baseShopifyType)
-}
-
-function buildShopifyUtilityTypes({includesTools, includesIntents}: ShopifyTypeOptions): string {
-  const utilityTypes: string[] = []
-
-  if (includesTools) {
-    utilityTypes.push(`interface GeneratedToolsConstraint<Tools> {
-  tools?: Tools;
-}
-
-interface GeneratedToolsOverride<Tools> {
-  tools: Omit<NonNullable<Tools>, 'register'> & ShopifyTools;
-}
-
-interface GeneratedToolsFallback {
-  tools: ShopifyTools;
-}
-
-type WithGeneratedTools<T> = T extends GeneratedToolsConstraint<infer Tools>
-  ? Omit<T, 'tools'> & GeneratedToolsOverride<Tools>
-  : T & GeneratedToolsFallback;`)
-  }
+  let shopifyType = baseShopifyType
 
   if (includesIntents) {
-    utilityTypes.push(`interface GeneratedIntentResponseConstraint<Response> {
-  response?: Response;
-}
-
-interface GeneratedIntentResponseOverride<BaseResponse, GeneratedResponse> {
-  response?: Omit<NonNullable<BaseResponse>, 'ok'> & NonNullable<GeneratedResponse>;
-}
-
-interface GeneratedIntentResponseFallback<GeneratedResponse> {
-  response?: NonNullable<GeneratedResponse>;
-}
-
-interface GeneratedIntentRequestConstraint<Request> {
-  request: Request;
-}
-
-type ReplaceSubscribableValue<Base, Value> = Base extends {value: unknown; subscribe: (callback: (value: infer _) => void) => () => void}
-  ? Omit<Base, 'value' | 'subscribe'> & {
-      readonly value: Value;
-      subscribe: (callback: (value: Value) => void) => () => void;
-    }
-  : {
-      readonly value: Value;
-      subscribe: (callback: (value: Value) => void) => () => void;
-    };
-
-interface GeneratedIntentsConstraint<Intents> {
-  intents?: Intents;
-}
-
-interface GeneratedIntentsOverride<Intents> {
-  intents: Omit<NonNullable<Intents>, 'request' | 'response'> &
-    MergeGeneratedIntentResponse<NonNullable<Intents>>;
-}
-
-interface GeneratedIntentsFallback {
-  intents: ShopifyGeneratedIntentVariants;
-}
+    shopifyType = `import('${generatedTypesHelperImportPath}').WithGeneratedIntents<${shopifyType}, ShopifyGeneratedIntentVariants>`
+  }
 
-type MergeGeneratedIntentResponse<Intents> =
-  ShopifyGeneratedIntentVariants extends infer Generated
-    ? Generated extends GeneratedIntentRequestConstraint<infer GeneratedRequest>
-      ? Omit<Generated, 'request' | 'response'> & {
-          request: Intents extends GeneratedIntentRequestConstraint<infer BaseRequest>
-            ? ReplaceSubscribableValue<BaseRequest, GeneratedRequest | null>
-            : {
-                readonly value: GeneratedRequest | null;
-                subscribe: (callback: (value: GeneratedRequest | null) => void) => () => void;
-              };
-        } & (Generated extends GeneratedIntentResponseConstraint<infer GeneratedResponse>
-          ? Intents extends GeneratedIntentResponseConstraint<infer BaseResponse>
-            ? GeneratedIntentResponseOverride<BaseResponse, GeneratedResponse>
-            : GeneratedIntentResponseFallback<GeneratedResponse>
-          : unknown)
-      : Generated
-    : never;`)
-
-    utilityTypes.push(`type WithGeneratedIntents<T> = T extends GeneratedIntentsConstraint<infer Intents>
-  ? Omit<T, 'intents'> & GeneratedIntentsOverride<Intents>
-  : T & GeneratedIntentsFallback;`)
+  if (includesTools) {
+    shopifyType = `import('${generatedTypesHelperImportPath}').WithGeneratedTools<${shopifyType}, ShopifyTools>`
   }
 
-  return utilityTypes.join('\n\n')
+  return shopifyType
 }
 
 export function createTypeDefinition({
@@ -301,6 +220,9 @@ export function createTypeDefinition({
   intentsTypeDefinition,
 }: CreateTypeDefinitionOptions): string | null {
   try {
+    const includesTools = Boolean(toolsTypeDefinition)
+    const includesIntents = Boolean(intentsTypeDefinition)
+
     // Validate that all targets can be resolved
     for (const target of targets) {
       try {
@@ -315,21 +237,27 @@ export function createTypeDefinition({
       }
     }
 
-    const relativePath = relativizePath(fullPath, dirname(typeFilePath))
-    const includesTools = Boolean(toolsTypeDefinition)
-    const includesIntents = Boolean(intentsTypeDefinition)
+    if (includesTools || includesIntents) {
+      try {
+        require.resolve(generatedTypesHelperImportPath, {paths: [fullPath, typeFilePath]})
+      } catch (_) {
+        const {year, month} = parseApiVersion(apiVersion) ?? {year: 2025, month: 10}
+        throw new AbortError(
+          `Type reference for ${generatedTypesHelperImportPath} could not be found. You might be using the wrong @shopify/ui-extensions version.`,
+          `Fix the error by ensuring you have the correct version of @shopify/ui-extensions, for example ~${year}.${month}.0, in your dependencies.`,
+        )
+      }
+    }
 
+    const relativePath = relativizePath(fullPath, dirname(typeFilePath))
     const shopifyType = buildShopifyType(targets, {includesTools, includesIntents})
     if (!shopifyType) return null
 
-    const shopifyUtilityTypes = buildShopifyUtilityTypes({includesTools, includesIntents})
-
     const lines = [
       '//@ts-ignore',
       `declare module './${relativePath}' {`,
       ...(toolsTypeDefinition ? [toolsTypeDefinition] : []),
       ...(intentsTypeDefinition ? [intentsTypeDefinition] : []),
-      ...(shopifyUtilityTypes ? [shopifyUtilityTypes] : []),
       `  const shopify: ${shopifyType};`,
       '  const globalThis: { shopify: typeof shopify };',
       '}',
@@ -453,20 +381,15 @@ export async function createIntentsTypeDefinition(intents: IntentTypeDefinition[
 
   const generatedIntents = types
     .map(({requestTypeName, outputTypeName}) => {
-      return `  | ShopifyGeneratedIntentsApi<${requestTypeName}, ${outputTypeName}>`
+      return `  | import('${generatedTypesHelperImportPath}').ShopifyGeneratedIntentVariant<${requestTypeName}, ${outputTypeName}>`
     })
     .join('\n')
 
   return `${types
     .map(
       ({inputType, valueType, outputType, requestType}) => `${inputType}\n${valueType}\n${outputType}\n${requestType}`,
     )
-    .join('\n\n')}\n\ninterface ShopifyGeneratedIntentResponse<Data = unknown> {
-  ok(data?: Data): Promise<void>;
-}\n\ninterface ShopifyGeneratedIntentsApi<Request = unknown, ResponseData = unknown> {
-  request: Request;
-  response?: ShopifyGeneratedIntentResponse<ResponseData>;
-}\n\ntype ShopifyGeneratedIntentVariants =\n${generatedIntents}\n`
+    .join('\n\n')}\n\ntype ShopifyGeneratedIntentVariants =\n${generatedIntents}\n`
 }
 
 /**
@@ -514,7 +437,7 @@ export async function createToolsTypeDefinition(tools: ToolDefinition[]): Promis
         .split('\n')
         .map((line) => `   * ${line}`)
         .join('\n')
-      return `  /**\n${formattedDescription}\n   */\n  register(name: '${name}', handler: (input: ${inputTypeName}) => ${outputTypeName} | Promise<${outputTypeName}>);`
+      return `  /**\n${formattedDescription}\n   */\n  register(name: '${name}', handler: (input: ${inputTypeName}) => ${outputTypeName} | Promise<${outputTypeName}>): () => void;`
     })
     .join('\n')
 

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

@@ -1195,6 +1195,10 @@ Please check the configuration in ${uiExtension.configurationPath}`),
     const nodeModulesPath = joinPath(tmpDir, 'node_modules', '@shopify', 'ui-extensions')
     await mkdir(nodeModulesPath)
 
+    const generatedTypesHelperPath = joinPath(nodeModulesPath, 'admin')
+    await mkdir(generatedTypesHelperPath)
+    await writeFile(joinPath(generatedTypesHelperPath, 'index.js'), '// Mock generated types helper exports')
+
     const targetPath = joinPath(nodeModulesPath, target)
     await mkdir(targetPath)
     await writeFile(joinPath(targetPath, 'index.js'), '// Mock UI extension target')
@@ -2063,8 +2067,8 @@ Please check the configuration in ${uiExtension.configurationPath}`),
         expect(typeDefinition).toContain('interface SearchProductsInput')
         expect(typeDefinition).toContain('interface SearchProductsOutput')
         expect(typeDefinition).toContain("name: 'search_products'")
-        expect(typeDefinition).toContain('interface GeneratedToolsConstraint<Tools>')
-        expect(typeDefinition).toContain("tools: Omit<NonNullable<Tools>, 'register'> & ShopifyTools")
+        expect(typeDefinition).toContain("import('@shopify/ui-extensions/admin').WithGeneratedTools<")
+        expect(typeDefinition).not.toContain('interface GeneratedToolsConstraint<Tools>')
       })
     })
 
@@ -2284,7 +2288,7 @@ Please check the configuration in ${uiExtension.configurationPath}`),
         // Entry point should have ShopifyTools
         const entryPointType = types.find((t) => t.includes('./src/index.jsx'))
         expect(entryPointType).toContain('ShopifyTools')
-        expect(entryPointType).toContain('tools: ShopifyTools')
+        expect(entryPointType).toContain("import('@shopify/ui-extensions/admin').WithGeneratedTools<")
 
         // Imported file should NOT have ShopifyTools
         const helperType = types.find((t) => t.includes('./src/utils/helper.js'))
@@ -2342,14 +2346,13 @@ Please check the configuration in ${uiExtension.configurationPath}`),
         expect(typeDefinition).toContain('interface CreateApplicationEmailIntentRequest')
         expect(typeDefinition).toContain(`action: 'create';`)
         expect(typeDefinition).toContain(`type: 'application/email';`)
-        expect(typeDefinition).toContain('interface ShopifyGeneratedIntentResponse<Data = unknown>')
-        expect(typeDefinition).toContain('interface ShopifyGeneratedIntentsApi<')
-        expect(typeDefinition).toContain('Request = unknown,')
-        expect(typeDefinition).toContain('ResponseData = unknown,')
-        expect(typeDefinition).toContain('type ShopifyGeneratedIntentVariants = ShopifyGeneratedIntentsApi<')
-        expect(typeDefinition).toContain('CreateApplicationEmailIntentRequest,')
+        expect(typeDefinition).not.toContain('interface ShopifyGeneratedIntentResponse<Data = unknown>')
+        expect(typeDefinition).not.toContain('interface ShopifyGeneratedIntentsApi<')
+        expect(typeDefinition).toContain('type ShopifyGeneratedIntentVariants =')
+        expect(typeDefinition).toContain("import('@shopify/ui-extensions/admin').ShopifyGeneratedIntentVariant<")
+        expect(typeDefinition).toContain('CreateApplicationEmailIntentRequest')
         expect(typeDefinition).toContain('CreateApplicationEmailIntentOutput')
-        expect(typeDefinition).toContain('WithGeneratedIntents<')
+        expect(typeDefinition).toContain("import('@shopify/ui-extensions/admin').WithGeneratedIntents<")
       })
     })
 
@@ -2400,11 +2403,12 @@ Please check the configuration in ${uiExtension.configurationPath}`),
         expect(types).toHaveLength(2)
 
         const entryPointType = types.find((t) => t.includes('./src/index.jsx'))
-        expect(entryPointType).toContain('ShopifyGeneratedIntentsApi')
+        expect(entryPointType).toContain('ShopifyGeneratedIntentVariants')
         expect(entryPointType).toContain('CreateApplicationEmailIntentRequest')
+        expect(entryPointType).toContain("import('@shopify/ui-extensions/admin').WithGeneratedIntents<")
 
         const helperType = types.find((t) => t.includes('./src/utils/helper.js'))
-        expect(helperType).not.toContain('ShopifyGeneratedIntentsApi')
+        expect(helperType).not.toContain('ShopifyGeneratedIntentVariants')
         expect(helperType).not.toContain('CreateApplicationEmailIntentRequest')
       })
     })