Merge pull request #749 from Shopify/extensions-refactor-conform-old-…

…interfaces

Extensions refactor: Make new instances conform to old interfaces

packages/app/src/cli/commands/app/generate/extension.ts

@@ -127,7 +127,7 @@ export default class AppScaffoldExtension extends Command {
     }
     const isShopify = await environment.local.isShopify()
     const supportedExtensions = isShopify ? extensions.types : extensions.publicTypes
-    if (!(supportedExtensions as string[]).includes(type)) {
+    if (!supportedExtensions.includes(type)) {
       throw new error.Abort(
         `The following extension types are supported: ${mapExtensionTypesToExternalExtensionTypes(
           supportedExtensions,
@@ -146,9 +146,7 @@ export default class AppScaffoldExtension extends Command {
     if (type && this.limitedExtensionsAlreadyScaffolded(app).includes(type)) {
       throw new error.Abort(
         'Invalid extension type',
-        `You can only scaffold one extension of type ${mapExtensionTypeToExternalExtensionType(
-          type as ExtensionTypes,
-        )} per app`,
+        `You can only scaffold one extension of type ${mapExtensionTypeToExternalExtensionType(type)} per app`,
       )
     }
   }

packages/app/src/cli/constants.ts

@@ -87,7 +87,7 @@ export const activeUIExtensions = {
   types: [...publicUIExtensions.types, 'pos_ui_extension', 'customer_accounts_ui_extension'].filter,
 }
 
-export type UIExtensionTypes = typeof uiExtensions.types[number]
+export type UIExtensionTypes = typeof uiExtensions.types[number] | string
 
 export const uiExtensionTemplates = [
   {name: 'TypeScript', value: 'typescript'},
@@ -104,21 +104,21 @@ export const themeExtensions = {
   types: ['theme'],
 } as const
 
-export type ThemeExtensionTypes = typeof themeExtensions.types[number]
+export type ThemeExtensionTypes = typeof themeExtensions.types[number] | string
 
 export function isThemeExtensionType(extensionType: string) {
   return (themeExtensions.types as ReadonlyArray<string>).includes(extensionType)
 }
 
-export type FunctionExtensionTypes = typeof functionExtensions.types[number]
+export type FunctionExtensionTypes = typeof functionExtensions.types[number] | string
 
-export const extensions = {
+export const extensions: {types: string[]; publicTypes: string[]} = {
   types: [...themeExtensions.types, ...uiExtensions.types, ...functionExtensions.types],
   publicTypes: [...themeExtensions.types, ...publicUIExtensions.types, ...publicFunctionExtensions.types],
 }
 
-export type ExtensionTypes = typeof extensions.types[number]
-type PublicExtensionTypes = typeof extensions.publicTypes[number]
+export type ExtensionTypes = typeof extensions.types[number] | string
+type PublicExtensionTypes = typeof extensions.publicTypes[number] | string
 type GatedExtensionTypes = Exclude<ExtensionTypes, PublicExtensionTypes>
 
 export function extensionTypeCategory(extensionType: ExtensionTypes): 'theme' | 'function' | 'ui' {
@@ -132,7 +132,7 @@ export function extensionTypeCategory(extensionType: ExtensionTypes): 'theme' |
 }
 
 export function extensionTypeIsGated(extensionType: ExtensionTypes): extensionType is GatedExtensionTypes {
-  return !extensions.publicTypes.includes(extensionType as PublicExtensionTypes)
+  return !extensions.publicTypes.includes(extensionType)
 }
 
 /**
@@ -161,13 +161,13 @@ export const uiExternalExtensionTypes = {
   types: ['web_pixel', 'post_purchase_ui', 'checkout_ui', 'pos_ui', 'subscription_ui', 'customer_accounts_ui'],
 } as const
 
-export type UIExternalExtensionTypes = typeof uiExternalExtensionTypes.types[number]
+export type UIExternalExtensionTypes = typeof uiExternalExtensionTypes.types[number] | string
 
 export const themeExternalExtensionTypes = {
   types: ['theme_app_extension'],
 } as const
 
-export type ThemeExternalExtensionTypes = typeof themeExternalExtensionTypes.types[number]
+export type ThemeExternalExtensionTypes = typeof themeExternalExtensionTypes.types[number] | string
 
 export const functionExternalExtensionTypes = {
   types: [
@@ -180,7 +180,7 @@ export const functionExternalExtensionTypes = {
   ],
 } as const
 
-export type FunctionExternalExtensionTypes = typeof functionExternalExtensionTypes.types[number]
+export type FunctionExternalExtensionTypes = typeof functionExternalExtensionTypes.types[number] | string
 
 export const externalExtensionTypes = {
   types: [
@@ -190,7 +190,7 @@ export const externalExtensionTypes = {
   ],
 } as const
 
-export type ExternalExtensionTypes = typeof externalExtensionTypes.types[number]
+export type ExternalExtensionTypes = typeof externalExtensionTypes.types[number] | string
 
 // The order of the groups in extensionTypesGroups will be the same displayed in the select prompt
 export const extensionTypesGroups: {name: string; extensions: ExtensionTypes[]}[] = [
@@ -237,7 +237,7 @@ export const externalExtensionTypeNames = {
   ],
 } as const
 
-export type ExternalExtensionTypeNames = typeof externalExtensionTypeNames.types[number]
+export type ExternalExtensionTypeNames = typeof externalExtensionTypeNames.types[number] | string
 export interface ExtensionOutputConfig {
   humanKey: ExternalExtensionTypeNames
   helpURL?: string
@@ -278,6 +278,8 @@ export function getExtensionOutputConfig(extensionType: ExtensionTypes): Extensi
       return buildExtensionOutputConfig('Delivery option presenter')
     case 'delivery_customization':
       return buildExtensionOutputConfig('Delivery customization')
+    default:
+      return buildExtensionOutputConfig('Other')
   }
 }
 
@@ -303,12 +305,7 @@ export const extensionGraphqlId = (type: ExtensionTypes) => {
       return 'WEB_PIXEL_EXTENSION'
     case 'customer_accounts_ui_extension':
       return 'CUSTOMER_ACCOUNTS_UI_EXTENSION'
-    case 'product_discounts':
-    case 'order_discounts':
-    case 'shipping_discounts':
-    case 'payment_customization':
-    case 'delivery_customization':
-    case 'shipping_rate_presenter':
+    default:
       // As we add new extensions, this bug will force us to add a new case here.
       return type.toUpperCase()
   }

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

@@ -1,10 +1,6 @@
-import {
-  functionExtensions,
-  themeExtensions,
-  uiExtensions,
-  ExtensionTypes,
-  uiExternalExtensionTypes,
-} from '../../constants.js'
+import {uiExtensions, ExtensionTypes, uiExternalExtensionTypes} from '../../constants.js'
+import {BaseConfigContents} from '../extensions/extensions.js'
+import {FunctionConfigType, MetadataType} from '../extensions/functions.js'
 import {schema} from '@shopify/cli-kit'
 
 export interface Extension {
@@ -18,7 +14,7 @@ export interface Extension {
 
 export const UIExtensionConfigurationSchema = schema.define.object({
   name: schema.define.string(),
-  type: schema.define.enum(uiExtensions.types),
+  type: schema.define.string(),
   metafields: schema.define
     .array(
       schema.define.object({
@@ -54,7 +50,7 @@ export const UIExtensionConfigurationSupportedSchema = UIExtensionConfigurationS
 
 export const FunctionExtensionConfigurationSchema = schema.define.object({
   name: schema.define.string(),
-  type: schema.define.enum(functionExtensions.types),
+  type: schema.define.string(),
   description: schema.define.string().default(''),
   build: schema.define.object({
     command: schema.define.string(),
@@ -76,7 +72,7 @@ export const FunctionExtensionConfigurationSchema = schema.define.object({
 
 export const ThemeExtensionConfigurationSchema = schema.define.object({
   name: schema.define.string(),
-  type: schema.define.enum(themeExtensions.types),
+  type: schema.define.string(),
 })
 
 export const FunctionExtensionMetadataSchema = schema.define.object({
@@ -88,18 +84,21 @@ export const FunctionExtensionMetadataSchema = schema.define.object({
   ),
 })
 
-export type FunctionExtension = Extension & {
-  configuration: FunctionExtensionConfiguration
-  metadata: FunctionExtensionMetadata
+export type FunctionExtension<
+  TConfiguration extends FunctionConfigType = FunctionConfigType,
+  TMetadata extends MetadataType = MetadataType,
+> = Extension & {
+  configuration: TConfiguration
+  metadata: TMetadata
   buildWasmPath: () => string
   inputQueryPath: () => string
 }
 
-export type ThemeExtension = Extension & {
+export type ThemeExtension<TConfiguration extends BaseConfigContents = BaseConfigContents> = Extension & {
   configuration: ThemeExtensionConfiguration
 }
 
-export type UIExtension = Extension & {
+export type UIExtension<TConfiguration extends BaseConfigContents = BaseConfigContents> = Extension & {
   configuration: UIExtensionConfiguration
   entrySourceFilePath: string
   outputBundlePath: string

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

@@ -7,11 +7,13 @@ const dependency = {name: '@shopify/checkout-ui-extensions-react', version: '^0.
 
 const CheckoutSchema = BaseExtensionSchema.extend({
   extensionPoints: schema.define.array(schema.define.string()).optional(),
-  settings: schema.define.string(),
+  settings: schema.define.string().optional(),
 })
 
 const spec = createExtensionSpec({
   identifier: 'checkout_ui_extension',
+  externalIdentifier: 'checkout_ui',
+  surface: 'checkout',
   dependency,
   partnersWebId: 'checkout_ui_extension',
   schema: CheckoutSchema,

packages/app/src/cli/models/extensions/extension-specifications/customer_accounts_ui_extension.ts

@@ -6,13 +6,14 @@ import {schema, output} from '@shopify/cli-kit'
 const dependency = {name: '@shopify/customer-account-ui-extensions-react', version: '^0.0.20'}
 
 const CustomerAccountsSchema = BaseExtensionSchema.extend({
-  extensionPoints: schema.define.array(schema.define.string()),
-  categories: schema.define.array(schema.define.string()),
+  categories: schema.define.array(schema.define.string()).optional(),
   localization: schema.define.any().optional(),
 })
 
 const spec = createExtensionSpec({
   identifier: 'customer_accounts_ui_extension',
+  externalIdentifier: 'customer_accounts_ui',
+  surface: 'customer_accounts',
   dependency,
   partnersWebId: 'customer_accounts_ui_extension',
   schema: CustomerAccountsSchema,

packages/app/src/cli/models/extensions/extension-specifications/pos_ui_extension.ts

@@ -7,6 +7,8 @@ const dependency = {name: '@shopify/retail-ui-extensions-react', version: '^0.19
 
 const spec = createExtensionSpec({
   identifier: 'pos_ui_extension',
+  externalIdentifier: 'pos_ui',
+  surface: 'pos',
   dependency,
   partnersWebId: 'pos_ui_extension',
   schema: BaseExtensionSchema,
@@ -15,7 +17,7 @@ const spec = createExtensionSpec({
     if (result === 'not_found') throw new error.Bug(`Dependency ${dependency.name} not found`)
     return {renderer_version: result?.version}
   },
-  previewMessage: () => '',
+  previewMessage: () => undefined,
 })
 
 export default spec

packages/app/src/cli/models/extensions/extension-specifications/post_purchase_extension.ts

@@ -1,19 +1,20 @@
 import {createExtensionSpec} from '../extensions.js'
 import {BaseExtensionSchema} from '../schemas.js'
 import {output} from '@shopify/cli-kit'
-import {TokenizedString} from '@shopify/cli-kit/src/output.js'
 
 const dependency = {name: '@shopify/post-purchase-ui-extensions-react', version: '^0.13.2'}
 
 const spec = createExtensionSpec({
   identifier: 'checkout_post_purchase',
+  externalIdentifier: 'post_purchase_ui',
+  surface: 'post_purchase',
   dependency,
   partnersWebId: 'post_purchase',
   schema: BaseExtensionSchema,
   deployConfig: async (config, _) => {
     return {metafields: config.metafields}
   },
-  previewMessage: (host, uuid, _): TokenizedString => {
+  previewMessage: (host, uuid, _): output.TokenizedString => {
     const publicURL = `${host}/extensions/${uuid}`
     const devDocsLink = output.token.link(
       'dev docs',

packages/app/src/cli/models/extensions/extension-specifications/product_subscription.ts

@@ -6,8 +6,11 @@ import {error} from '@shopify/cli-kit'
 const dependency = {name: '@shopify/admin-ui-extensions-react', version: '^1.0.1'}
 
 const spec = createExtensionSpec({
-  identifier: 'subscription_management',
+  identifier: 'product_subscription',
+  externalIdentifier: 'subscription_ui',
+  surface: 'admin',
   dependency,
+  graphQLType: 'subscription_management',
   partnersWebId: 'product_subscription',
   schema: BaseExtensionSchema,
   deployConfig: async (_, directory) => {

packages/app/src/cli/models/extensions/extension-specifications/theme_app_extension.ts

@@ -2,7 +2,10 @@ import {createExtensionSpec} from '../extensions.js'
 import {BaseExtensionSchema} from '../schemas.js'
 
 const spec = createExtensionSpec({
-  identifier: 'theme_app_extension',
+  identifier: 'theme',
+  externalIdentifier: 'theme_app_extension',
+  surface: 'unknown',
+  graphQLType: 'theme_app_extension',
   partnersWebId: 'theme_app_extension',
   schema: BaseExtensionSchema,
 })

packages/app/src/cli/models/extensions/extension-specifications/web_pixel_extension.ts

@@ -13,6 +13,8 @@ const WebPixelSchema = BaseExtensionSchema.extend({
 
 const spec = createExtensionSpec({
   identifier: 'web_pixel_extension',
+  externalIdentifier: 'web_pixel',
+  surface: 'unknown',
   dependency,
   partnersWebId: 'web_pixel',
   schema: WebPixelSchema,
@@ -22,7 +24,7 @@ const spec = createExtensionSpec({
       runtime_configuration_definition: config.settings,
     }
   },
-  previewMessage: () => '',
+  previewMessage: () => undefined,
 })
 
 export default spec