@shopify/ui-extensions 2025.1.3 → 2025.5.0-20250205161034

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/ui-extensions",
-  "version": "2025.1.3",
+  "version": "2025.5.0-20250205161034",
   "scripts": {
     "docs:admin": "bash ./docs/surfaces/admin/build-docs.sh",
     "gen-docs:admin": "bash ./docs/surfaces/admin/create-doc-files.sh \"admin\"",
@@ -16,15 +16,6 @@
     "*": {
       "admin": [
         "./build/ts/surfaces/admin.d.ts"
-      ],
-      "checkout": [
-        "./build/ts/surfaces/checkout.d.ts"
-      ],
-      "customer-account": [
-        "./build/ts/surfaces/customer-account.d.ts"
-      ],
-      "point-of-sale": [
-        "./build/ts/surfaces/point-of-sale.d.ts"
       ]
     }
   },
@@ -40,32 +31,10 @@
       "esnext": "./build/esnext/surfaces/admin.esnext",
       "import": "./build/esm/surfaces/admin.mjs",
       "require": "./build/cjs/surfaces/admin.js"
-    },
-    "./checkout": {
-      "types": "./build/ts/surfaces/checkout.d.ts",
-      "esnext": "./build/esnext/surfaces/checkout.esnext",
-      "import": "./build/esm/surfaces/checkout.mjs",
-      "require": "./build/cjs/surfaces/checkout.js"
-    },
-    "./customer-account": {
-      "types": "./build/ts/surfaces/customer-account.d.ts",
-      "esnext": "./build/esnext/surfaces/customer-account.esnext",
-      "import": "./build/esm/surfaces/customer-account.mjs",
-      "require": "./build/cjs/surfaces/customer-account.js"
-    },
-    "./point-of-sale": {
-      "types": "./build/ts/surfaces/point-of-sale.d.ts",
-      "esnext": "./build/esnext/surfaces/point-of-sale.esnext",
-      "import": "./build/esm/surfaces/point-of-sale.mjs",
-      "require": "./build/cjs/surfaces/point-of-sale.js"
     }
   },
   "license": "MIT",
   "sideEffects": false,
-  "dependencies": {
-    "@remote-ui/async-subscription": "^2.1.12",
-    "@remote-ui/core": "^2.2.4"
-  },
   "devDependencies": {
     "@shopify/generate-docs": "0.16.4",
     "typescript": "^4.9.0"
@@ -78,7 +47,6 @@
     "build",
     "src",
     "index.*",
-    "checkout.*",
     "README.md"
   ],
   "eslintConfig": {

package/src/extension.ts

@@ -1,46 +1,63 @@
-import type {
-  RemoteRoot,
-  RemoteChannel,
-  RemoteComponentType,
-} from '@remote-ui/core';
-
-export interface RenderExtensionConnection<
-  AllowedComponents extends RemoteComponentType<
-    string,
-    any,
-    any
-  > = RemoteComponentType<any, any, any>,
-> {
-  readonly channel: RemoteChannel;
-  readonly components: AllowedComponents;
+export interface RenderExtension<Api> {
+  (root: HTMLElement, api: Api):
+    | (void | (() => void))
+    | Promise<void | (() => void)>;
 }
 
-export interface RenderExtension<
-  Api,
-  AllowedComponents extends RemoteComponentType<
-    string,
-    any,
-    any
-  > = RemoteComponentType<any, any, any>,
-> {
-  (
-    connection: RenderExtensionConnection<AllowedComponents>,
-    api: Api,
-  ): void | Promise<void>;
+export interface ExtensionRegistrationFunction<ExtensionTargets> {
+  <Target extends keyof ExtensionTargets>(
+    target: Target,
+    implementation: ExtensionTargets[Target],
+  ): ExtensionTargets[Target];
 }
 
-export interface RenderExtensionWithRemoteRoot<
-  Api,
-  AllowedComponents extends RemoteComponentType<
-    string,
-    any,
-    any
-  > = RemoteComponentType<any, any, any>,
-> {
-  (root: RemoteRoot<AllowedComponents, AllowedComponents>, api: Api):
-    | void
-    | Promise<void>
-    | Promise<() => void>;
+export interface ExtensionRegistrationFunctionWithRoot<ExtensionTargets> {
+  <Target extends keyof ExtensionTargets>(
+    target: Target,
+    implementation: ExtensionTargets[Target],
+  ): ExtensionTargets[Target];
+}
+
+/**
+ * This function returns a type-safe registration function for rendering and non-rendering extensions.
+ */
+export function createExtensionRegistrationFunction<
+  ExtensionTargets,
+>(): ExtensionRegistrationFunctionWithRoot<ExtensionTargets> {
+  const extensionWrapper: ExtensionRegistrationFunctionWithRoot<
+    ExtensionTargets
+  > = (target, implementation) => {
+    async function extension(...args: any[]) {
+      if (args.length === 1) {
+        return (implementation as any)(...args);
+      }
+
+      const [root, api] = args as [HTMLElement, any];
+
+      // Rendering extensions have two arguments and return a clean up function.
+      let renderResult = (implementation as any)(root, api);
+
+      if (
+        typeof renderResult === 'object' &&
+        renderResult != null &&
+        'then' in renderResult
+      ) {
+        renderResult = await renderResult;
+      }
+      // Return a noop if no clean up function was returned
+      return typeof renderResult === 'function' ? renderResult : () => {};
+    }
+
+    (globalThis as any).shopify?.extend(
+      target,
+      extension,
+      '@ui_extension_version:__UI_EXTENSION_VERSION__@',
+    );
+
+    return extension as any;
+  };
+
+  return extensionWrapper;
 }
 
 export interface RunnableExtension<Api, Output> {

package/src/shared.ts

@@ -1,17 +1,3 @@
-import type {RemoteComponentType} from '@remote-ui/core';
-
-export type ComponentsBuilder<ComponentTypes> = {
-  [K in keyof ComponentTypes]: ComponentTypes[K] extends RemoteComponentType<
-    any,
-    any
-  >
-    ? ComponentTypes[K]
-    : never;
-};
-
-export type AnyComponentBuilder<ComponentTypes> =
-  ComponentsBuilder<ComponentTypes>[keyof ComponentsBuilder<ComponentTypes>];
-
 /**
  * Union of supported API versions
  */
@@ -23,7 +9,6 @@ export type ApiVersion =
   | '2024-04'
   | '2024-07'
   | '2024-10'
-  | '2025-01'
   | 'unstable';
 
 /**
@@ -39,7 +24,7 @@ export type ApiVersion =
  *
  * * [`collect_buyer_consent.customer_privacy`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#collect-buyer-consent): the extension can register buyer consent decisions that will be honored on Shopify-managed services.
  *
- * * [`iframe.sources`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#iframe): the extension can embed an external URL in an iframe.
+ * * `iframe.sources`: the extension can embed an external URL in an iframe.
  */
 
 export type Capability =
@@ -859,49 +844,6 @@ export type CountryCode =
   | 'ZW'
   | 'ZZ';
 
-// For instructions on how to update this list see: https://github.com/Shopify/checkout-web/pull/39534
-/**
- * A union of keys for the localized fields that are required by certain countries.
- */
-export type LocalizedFieldKey =
-  | 'SHIPPING_CREDENTIAL_BR'
-  | 'SHIPPING_CREDENTIAL_CL'
-  | 'SHIPPING_CREDENTIAL_CN'
-  | 'SHIPPING_CREDENTIAL_CO'
-  | 'SHIPPING_CREDENTIAL_CR'
-  | 'SHIPPING_CREDENTIAL_EC'
-  | 'SHIPPING_CREDENTIAL_ES'
-  | 'SHIPPING_CREDENTIAL_GT'
-  | 'SHIPPING_CREDENTIAL_ID'
-  | 'SHIPPING_CREDENTIAL_KR'
-  | 'SHIPPING_CREDENTIAL_MY'
-  | 'SHIPPING_CREDENTIAL_MX'
-  | 'SHIPPING_CREDENTIAL_PE'
-  | 'SHIPPING_CREDENTIAL_PT'
-  | 'SHIPPING_CREDENTIAL_PY'
-  | 'SHIPPING_CREDENTIAL_TR'
-  | 'SHIPPING_CREDENTIAL_TW'
-  | 'SHIPPING_CREDENTIAL_TYPE_CO'
-  | 'TAX_CREDENTIAL_BR'
-  | 'TAX_CREDENTIAL_CL'
-  | 'TAX_CREDENTIAL_CO'
-  | 'TAX_CREDENTIAL_CR'
-  | 'TAX_CREDENTIAL_EC'
-  | 'TAX_CREDENTIAL_ES'
-  | 'TAX_CREDENTIAL_GT'
-  | 'TAX_CREDENTIAL_ID'
-  | 'TAX_CREDENTIAL_IT'
-  | 'TAX_CREDENTIAL_MX'
-  | 'TAX_CREDENTIAL_MY'
-  | 'TAX_CREDENTIAL_PE'
-  | 'TAX_CREDENTIAL_PT'
-  | 'TAX_CREDENTIAL_PY'
-  | 'TAX_CREDENTIAL_TR'
-  | 'TAX_CREDENTIAL_TYPE_CO'
-  | 'TAX_CREDENTIAL_TYPE_MX'
-  | 'TAX_CREDENTIAL_USE_MX'
-  | 'TAX_EMAIL_IT';
-
 /**
  * Union of supported storefront API versions
  */
@@ -916,7 +858,6 @@ export type StorefrontApiVersion =
   | '2024-04'
   | '2024-07'
   | '2024-10'
-  | '2025-01'
   | 'unstable';
 
 /**

package/src/surfaces/admin/api/action/action.doc.ts

@@ -14,7 +14,6 @@ const data: ReferenceEntityTemplateSchema = {
     },
   ],
   category: 'API',
-  subCategory: 'Target APIs',
   related: [],
 };
 

package/src/surfaces/admin/api/action/action.ts

@@ -1,8 +1,6 @@
 import type {StandardApi} from '../standard/standard';
 import type {ExtensionTarget as AnyExtensionTarget} from '../../extension-targets';
 import type {Data} from '../shared';
-import type {ResourcePickerApi} from '../resource-picker/resource-picker';
-import type {PickerApi} from '../picker/picker';
 
 export interface ActionExtensionApi<ExtensionTarget extends AnyExtensionTarget>
   extends StandardApi<ExtensionTarget> {
@@ -15,14 +13,4 @@ export interface ActionExtensionApi<ExtensionTarget extends AnyExtensionTarget>
    * Information about the currently viewed or selected items.
    */
   data: Data;
-
-  /**
-   * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow.
-   */
-  resourcePicker: ResourcePickerApi;
-
-  /**
-   * Renders a custom [Picker](picker) dialog allowing users to select values from a list.
-   */
-  picker: PickerApi;
 }

package/src/surfaces/admin/api/block/block.doc.ts

@@ -14,7 +14,6 @@ const data: ReferenceEntityTemplateSchema = {
     },
   ],
   category: 'API',
-  subCategory: 'Target APIs',
   related: [],
 };
 

package/src/surfaces/admin/api/block/block.ts

@@ -2,7 +2,6 @@ import type {StandardApi} from '../standard/standard';
 import type {ExtensionTarget as AnyExtensionTarget} from '../../extension-targets';
 import type {Data} from '../shared';
 import type {ResourcePickerApi} from '../resource-picker/resource-picker';
-import type {PickerApi} from '../picker/picker';
 
 export interface Navigation {
   /**
@@ -27,12 +26,7 @@ export interface BlockExtensionApi<ExtensionTarget extends AnyExtensionTarget>
   navigation: Navigation;
 
   /**
-   * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow.
+   * Renders the [Resource Picker](/docs/api/app-bridge-library/apis/resource-picker), allowing users to select a resource for the extension to use as part of its flow.
    */
   resourcePicker: ResourcePickerApi;
-
-  /**
-   * Renders a custom [Picker](picker) dialog allowing users to select values from a list.
-   */
-  picker: PickerApi;
 }

package/src/surfaces/admin/api/checkout-rules/launch-options.ts

@@ -6,6 +6,7 @@ interface Metafield {
   value: string;
   type: string;
 }
+
 interface Validation {
   /**
    * the validation's gid when active in a shop

package/src/surfaces/admin/api/checkout-rules/metafields.ts

@@ -1,4 +1,49 @@
-import {SupportedDefinitionType} from '../shared';
+const supportedDefinitionTypes = [
+  'boolean',
+  'collection_reference',
+  'color',
+  'date',
+  'date_time',
+  'dimension',
+  'file_reference',
+  'json',
+  'metaobject_reference',
+  'mixed_reference',
+  'money',
+  'multi_line_text_field',
+  'number_decimal',
+  'number_integer',
+  'page_reference',
+  'product_reference',
+  'rating',
+  'rich_text_field',
+  'single_line_text_field',
+  'product_taxonomy_value_reference',
+  'url',
+  'variant_reference',
+  'volume',
+  'weight',
+  'list.collection_reference',
+  'list.color',
+  'list.date',
+  'list.date_time',
+  'list.dimension',
+  'list.file_reference',
+  'list.metaobject_reference',
+  'list.mixed_reference',
+  'list.number_decimal',
+  'list.number_integer',
+  'list.page_reference',
+  'list.product_reference',
+  'list.rating',
+  'list.single_line_text_field',
+  'list.url',
+  'list.variant_reference',
+  'list.volume',
+  'list.weight',
+] as const;
+
+export type SupportedDefinitionType = (typeof supportedDefinitionTypes)[number];
 
 interface MetafieldUpdateChange {
   type: 'updateMetafield';

package/src/surfaces/admin/api/checkout-rules/validation-settings.doc.ts

@@ -19,7 +19,6 @@ const data: ReferenceEntityTemplateSchema = {
     },
   ],
   category: 'API',
-  subCategory: 'Target APIs',
   related: [],
 };
 

package/src/surfaces/admin/api/customer-segment-template/customer-segment-template.doc.ts

@@ -14,7 +14,6 @@ const data: ReferenceEntityTemplateSchema = {
     },
   ],
   category: 'API',
-  subCategory: 'Target APIs',
   related: [],
 };
 

package/src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts

@@ -2,11 +2,16 @@ import type {StandardApi} from '../standard/standard';
 import type {I18n} from '../../../../api';
 import type {ExtensionTarget as AnyExtensionTarget} from '../../extension-targets';
 
+/* List of enabled query language features during a progressive rollout */
+type CustomerSegmentationFeature =
+  /* Enables templates using filters only available when B2B is enabled. For example: companies IS NOT NULL */
+  'b2bEnabled';
+
 export interface CustomerSegmentTemplateApi<
   ExtensionTarget extends AnyExtensionTarget,
 > extends StandardApi<ExtensionTarget> {
   /* Utilities for translating content according to the current `localization` of the admin. */
   i18n: I18n;
   /** @private */
-  __enabledFeatures: string[];
+  __enabledFeatures: CustomerSegmentationFeature[];
 }

package/src/surfaces/admin/api/print-action/print-action.doc.ts

@@ -14,7 +14,6 @@ const data: ReferenceEntityTemplateSchema = {
     },
   ],
   category: 'API',
-  subCategory: 'Target APIs',
   related: [],
 };
 

package/src/surfaces/admin/api/print-action/print-action.ts

@@ -1,8 +1,6 @@
 import type {StandardApi} from '../standard/standard';
 import type {ExtensionTarget as AnyExtensionTarget} from '../../extension-targets';
 import type {Data} from '../shared';
-import type {ResourcePickerApi} from '../resource-picker/resource-picker';
-import type {PickerApi} from '../picker/picker';
 
 export interface PrintActionExtensionApi<
   ExtensionTarget extends AnyExtensionTarget,
@@ -11,14 +9,4 @@ export interface PrintActionExtensionApi<
    * Information about the currently viewed or selected items.
    */
   data: Data;
-
-  /**
-   * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow.
-   */
-  resourcePicker: ResourcePickerApi;
-
-  /**
-   * Renders a custom [Picker](picker) dialog allowing users to select values from a list.
-   */
-  picker: PickerApi;
 }

package/src/surfaces/admin/api/shared.ts

@@ -4,47 +4,3 @@ export interface Data {
    */
   selected: {id: string}[];
 }
-
-export type SupportedDefinitionType =
-  | 'boolean'
-  | 'collection_reference'
-  | 'color'
-  | 'date'
-  | 'date_time'
-  | 'dimension'
-  | 'file_reference'
-  | 'json'
-  | 'metaobject_reference'
-  | 'mixed_reference'
-  | 'money'
-  | 'multi_line_text_field'
-  | 'number_decimal'
-  | 'number_integer'
-  | 'page_reference'
-  | 'product_reference'
-  | 'rating'
-  | 'rich_text_field'
-  | 'single_line_text_field'
-  | 'product_taxonomy_value_reference'
-  | 'url'
-  | 'variant_reference'
-  | 'volume'
-  | 'weight'
-  | 'list.collection_reference'
-  | 'list.color'
-  | 'list.date'
-  | 'list.date_time'
-  | 'list.dimension'
-  | 'list.file_reference'
-  | 'list.metaobject_reference'
-  | 'list.mixed_reference'
-  | 'list.number_decimal'
-  | 'list.number_integer'
-  | 'list.page_reference'
-  | 'list.product_reference'
-  | 'list.rating'
-  | 'list.single_line_text_field'
-  | 'list.url'
-  | 'list.variant_reference'
-  | 'list.volume'
-  | 'list.weight';

package/src/surfaces/admin/api/should-render/should-render.doc.ts

@@ -13,7 +13,6 @@ const data: ReferenceEntityTemplateSchema = {
     },
   ],
   category: 'API',
-  subCategory: 'Target APIs',
   related: [],
 };
 

package/src/surfaces/admin/api/should-render/should-render.ts

@@ -2,6 +2,10 @@ import type {StandardApi} from '../standard/standard';
 import type {ExtensionTarget as AnyExtensionTarget} from '../../extension-targets';
 import type {Data} from '../shared';
 
+export interface ShouldRenderOutput {
+  display: boolean;
+}
+
 export interface ShouldRenderApi<ExtensionTarget extends AnyExtensionTarget>
   extends StandardApi<ExtensionTarget> {
   /**

package/src/surfaces/admin/api/standard/standard.doc.ts

@@ -13,7 +13,7 @@ const data: ReferenceEntityTemplateSchema = {
     },
   ],
   category: 'API',
-  subCategory: 'Target APIs',
+  // subCategory: 'Standard API',
   related: [],
 };
 

package/src/surfaces/admin/api.ts

@@ -9,4 +9,3 @@ export type {ProductDetailsConfigurationApi} from './api/product-configuration/p
 export type {ProductVariantDetailsConfigurationApi} from './api/product-configuration/product-variant-details-configuration';
 export type {OrderRoutingRuleApi} from './api/order-routing-rule/order-routing-rule';
 export type {ValidationSettingsApi} from './api/checkout-rules/validation-settings';
-export type {DiscountFunctionSettingsApi} from './api/discount-function-settings/discount-function-settings';

package/src/surfaces/admin/components/AdminAction/AdminAction.doc.ts

@@ -22,16 +22,16 @@ const data: ReferenceEntityTemplateSchema = {
     codeblock: {
       title: 'Set the primary and secondary action of the Action modal.',
       tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/AdminAction/examples/basic-adminaction.example.tsx',
-          language: 'tsx',
-        },
         {
           title: 'JS',
           code: './examples/basic-adminaction.example.ts',
           language: 'js',
         },
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/AdminAction/examples/basic-adminaction.example.tsx',
+          language: 'tsx',
+        },
       ],
     },
   },

package/src/surfaces/admin/components/AdminAction/examples/basic-adminaction.example.ts

@@ -1,22 +1,21 @@
-import {extension, AdminAction, Button} from '@shopify/ui-extensions/admin';
+import {extension} from '@shopify/ui-extensions/admin';
 
 export default extension('Playground', (root) => {
-  const primaryAction = root.createFragment();
-  const secondaryAction = root.createFragment();
+  const adminAction = document.createElement('shopify-admin-action');
+  adminAction.title = 'My App Action';
+  adminAction.textContent = 'Modal content';
+  root.appendChild(adminAction);
 
-  primaryAction.appendChild(
-    root.createComponent(Button, {onPress: () => {}}, 'Action')
-  );
-  secondaryAction.appendChild(
-    root.createComponent(Button, {onPress: () => {}}, 'Secondary')
-  );
+  const primaryAction = document.createElement('shopify-button');
 
-  const adminAction = root.createComponent(AdminAction, {
-    title: 'My App Action',
-    primaryAction,
-    secondaryAction,
-  }, 'Modal content');
+  primaryAction.slot = 'primaryAction';
+  primaryAction.onpress = () => console.log('pressed primary action');
+  primaryAction.textContent = 'Primary';
+  adminAction.appendChild(primaryAction);
 
-  root.appendChild(adminAction);
-  root.mount();
+  const secondaryAction = document.createElement('shopify-button');
+  secondaryAction.slot = 'secondaryAction';
+  secondaryAction.onpress = () => console.log('pressed secondary action');
+  secondaryAction.textContent = 'Secondary';
+  adminAction.appendChild(secondaryAction);
 });

package/src/surfaces/admin/components/AdminBlock/AdminBlock.doc.ts

@@ -22,16 +22,16 @@ const data: ReferenceEntityTemplateSchema = {
     codeblock: {
       title: 'Simple AdminBlock implementation',
       tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/AdminBlock/examples/basic-adminblock.example.tsx',
-          language: 'tsx',
-        },
         {
           title: 'JS',
           code: './examples/basic-adminblock.example.ts',
           language: 'js',
         },
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/AdminBlock/examples/basic-adminblock.example.tsx',
+          language: 'tsx',
+        },
       ],
     },
   },

package/src/surfaces/admin/components/AdminBlock/examples/basic-adminblock.example.ts

@@ -1,10 +1,8 @@
-import {extension, AdminBlock, Button} from '@shopify/ui-extensions/admin';
+import {extension} from '@shopify/ui-extensions/admin';
 
 export default extension('Playground', (root) => {
-  const adminBlock = root.createComponent(AdminBlock, {
-    title: 'My App Block',
-  }, '5 items active');
-
+  const adminBlock = document.createElement('shopify-admin-block');
+  adminBlock.title = 'My App Block';
+  adminBlock.textContent = '5 items active';
   root.appendChild(adminBlock);
-  root.mount();
 });

package/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.doc.ts

@@ -22,16 +22,16 @@ const data: ReferenceEntityTemplateSchema = {
     codeblock: {
       title: 'Set the source URL of the print action extension.',
       tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/AdminPrintAction/examples/basic-adminprintaction.example.tsx',
-          language: 'tsx',
-        },
         {
           title: 'JS',
           code: './examples/basic-adminprintaction.example.ts',
           language: 'js',
         },
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/AdminPrintAction/examples/basic-adminprintaction.example.tsx',
+          language: 'tsx',
+        },
       ],
     },
   },