@shopify/ui-extensions 1.0.2 → 2.0.0-alpha.0

package/src/surfaces/checkout/extension-points.ts

@@ -0,0 +1,21 @@
+import type {RenderExtension} from '../../extension';
+
+import type {AnyComponent} from './shared';
+import type {StandardApi, CartLineDetailsRenderAfterApi} from './api';
+
+export interface ExtensionPoints {
+  'Checkout::Dynamic::Render': RenderExtension<
+    StandardApi<'Checkout::Dynamic::Render'>,
+    AnyComponent
+  >;
+  'Checkout::CartLineDetails::RenderAfter': RenderExtension<
+    CartLineDetailsRenderAfterApi,
+    AnyComponent
+  >;
+}
+
+export type ExtensionPoint = keyof ExtensionPoints;
+
+export type ExtensionForExtensionPoint<
+  T extends ExtensionPoint
+> = ExtensionPoints[T];

package/src/surfaces/checkout/extension.ts

@@ -0,0 +1,7 @@
+import {createExtensionRegistrationFunction} from '../../utilities/registration';
+
+import type {ExtensionPoints} from './extension-points';
+
+export * from '../../extension';
+
+export const extension = createExtensionRegistrationFunction<ExtensionPoints>();

package/src/surfaces/checkout/index.ts

@@ -0,0 +1,5 @@
+export * from './api';
+export * from './components';
+export * from './extension-points';
+export * from './extension';
+export * from './shared';

package/src/surfaces/checkout/shared.ts

@@ -0,0 +1,14 @@
+import type {RemoteComponentType} from '@remote-ui/core';
+
+type ComponentTypes = typeof import('./components');
+
+export type Components = {
+  [K in keyof ComponentTypes]: ComponentTypes[K] extends RemoteComponentType<
+    any,
+    any
+  >
+    ? ComponentTypes[K]
+    : never;
+};
+
+export type AnyComponent = Components[keyof Components];

package/src/utilities/registration.ts

@@ -0,0 +1,60 @@
+import {createRemoteRoot} from '@remote-ui/core';
+import type {
+  RenderExtension,
+  RenderExtensionWithRemoteRoot,
+} from '../extension';
+
+export interface ExtensionRegistrationFunction<ExtensionPoints> {
+  <Point extends keyof ExtensionPoints>(
+    _extensionPoint: Point,
+    extensionWithRemoteRoot: ExtensionPoints[Point] extends RenderExtension<
+      infer Api,
+      infer AllowedComponents
+    >
+      ? RenderExtensionWithRemoteRoot<Api, AllowedComponents>
+      : ExtensionPoints[Point],
+  ): ExtensionPoints[Point];
+}
+
+/**
+ * This function takes an extension function that is expecting a `RemoteRoot` as its
+ * first argument, and returns a new function that accepts a `RemoteChannel` instead.
+ * This is a convenience that allows the raw UI extension API to only expose the simpler
+ * `RemoteChannel` type, while allowing the extension to use the more powerful `RemoteRoot`,
+ * provided by a version of `@remote-ui/core` that the extension controls.
+ */
+export function createExtensionRegistrationFunction<
+  ExtensionPoints
+>(): ExtensionRegistrationFunction<ExtensionPoints> {
+  const extensionWrapper: ExtensionRegistrationFunction<ExtensionPoints> = (
+    _extensionPoint,
+    extensionWithRemoteRoot,
+  ) => {
+    async function extension(...args: any[]) {
+      // This handles extensions that do not take a `RemoteChannel` as their first argument.
+      // This is true for ”non-rendering” extension points, like `Checkout::PostPurchase::ShouldRender`.
+      if (
+        args.length === 1 ||
+        typeof args[0] !== 'object' ||
+        args[0] == null ||
+        !('channel' in args[0])
+      ) {
+        const result = await (extensionWithRemoteRoot as any)(...args);
+        return result;
+      }
+
+      const [{channel, components}, ...rest] = args;
+
+      const root = createRemoteRoot(channel, {components, strict: true});
+
+      const result = await (extensionWithRemoteRoot as any)(root, ...rest);
+      await root.mount();
+
+      return result;
+    }
+
+    return extension as any;
+  };
+
+  return extensionWrapper;
+}

package/build/esm/types/shared/index.mjs

@@ -1 +0,0 @@
-export * from './Spacing';

package/build/esnext/types/shared/index.esnext

@@ -1 +0,0 @@
-export * from './Spacing';

package/build/ts/types/Banner.d.ts

@@ -1,10 +0,0 @@
-export declare type Status = 'critical' | 'info' | 'success' | 'warning';
-export interface BaseBannerProps {
-    /** Callback fired when banner is dismissed. */
-    onDismiss?: () => void;
-    /** Visual treatment of the banner based on message purpose. */
-    status?: Status;
-    /** Title of the banner. */
-    title?: string;
-}
-//# sourceMappingURL=Banner.d.ts.map

package/build/ts/types/Banner.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/types/Banner.ts"],"names":[],"mappings":"AAAA,oBAAY,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;AAEjE,MAAM,WAAW,eAAe;IAC9B,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/build/ts/types/BlockStack.d.ts

@@ -1,14 +0,0 @@
-import type { Spacing } from './shared';
-export interface BaseBlockStackProps {
-    /**
-     * Specifies the inline alignment. This affects the horizontal flow of elements.
-     * @defaultValue `leading`
-     */
-    inlineAlignment?: 'leading' | 'center' | 'trailing';
-    /**
-     * Adjusts spacing between children.
-     * @defaultValue 'base'
-     **/
-    spacing?: Spacing;
-}
-//# sourceMappingURL=BlockStack.d.ts.map

package/build/ts/types/BlockStack.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BlockStack.d.ts","sourceRoot":"","sources":["../../../src/types/BlockStack.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,UAAU,CAAC;AAEtC,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;IACpD;;;QAGI;IACJ,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/build/ts/types/Button.d.ts

@@ -1,46 +0,0 @@
-export interface BaseButtonProps {
-    /**
-     * The type of button that will be rendered.
-     *
-     * `primary`: button used for main actions or green-path. Ex: Continue to next step, Discount field
-     * `secondary`: button used for secondary actions not blocking user progress. Ex: Download Shop app
-     * `plain`: Renders a button that visually looks like a Link
-     *  @default 'secondary'
-     */
-    kind?: 'primary' | 'secondary' | 'plain';
-    /**
-     *  Specifies the color of the Button. The button will keep the style of the chosen `kind`,
-     *  but replace its color according to the appearance.
-     *
-     * `monochrome`: button will inherit the color of its parent
-     * `critical`: button will take inherit the color of the Critical color group (in Checkout)
-     *  		 and map to 'destructive' (in Admin/Polaris). Typically used for destructive actions.
-     *
-     */
-    appearance?: 'critical';
-    /** Changes the size of the button
-     * @default 'base'
-     */
-    size?: 'base' | 'large';
-    /**
-     * Whether the button should fill all available inline space.
-     * */
-    inlineSize?: 'fill';
-    /**
-     * Replaces content with a loading indicator
-     */
-    loading?: boolean;
-    /**
-     * A label that will be announced to buyers using assistive technologies
-     */
-    accessibilityLabel?: string;
-    /**
-     * Disables the button, disallowing any interaction
-     */
-    disabled?: boolean;
-    /**
-     * Callback when pressed
-     */
-    onPress?(): void;
-}
-//# sourceMappingURL=Button.d.ts.map

package/build/ts/types/Button.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/types/Button.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;IACzC;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB;;SAEK;IACL,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,IAAI,IAAI,CAAC;CAClB"}

package/build/ts/types/Heading.d.ts

@@ -1,14 +0,0 @@
-export declare type Level = 1 | 2 | 3;
-export interface BaseHeadingProps {
-    /**
-     * Unique identifier. Typically used to make the heading a target
-     * that another component can refer to in order to provide an alternative
-     * accessibility label.
-     */
-    id?: string;
-    /**
-     * The visual level of the heading.
-     */
-    level?: Level;
-}
-//# sourceMappingURL=Heading.d.ts.map

package/build/ts/types/Heading.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../src/types/Heading.ts"],"names":[],"mappings":"AAAA,oBAAY,KAAK,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAE9B,MAAM,WAAW,gBAAgB;IAC/B;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;CACf"}

package/build/ts/types/InlineStack.d.ts

@@ -1,19 +0,0 @@
-import type { Spacing } from './shared';
-export interface BaseInlineStackProps {
-    /**
-     * Specifies the block alignment. This affects the vertical flow of elements.
-     * @defaultValue `leading`
-     */
-    blockAlignment?: 'leading' | 'center' | 'trailing' | 'baseline';
-    /**
-     * Specifies the inline alignment. This affects the horizontal flow of elements.
-     * @defaultValue `leading`
-     */
-    inlineAlignment?: 'leading' | 'center' | 'trailing';
-    /**
-     * Adjust spacing between children.
-     * @defaultValue 'base'
-     **/
-    spacing?: Spacing;
-}
-//# sourceMappingURL=InlineStack.d.ts.map

package/build/ts/types/InlineStack.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"InlineStack.d.ts","sourceRoot":"","sources":["../../../src/types/InlineStack.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,UAAU,CAAC;AAEtC,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAC;IAChE;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;IACpD;;;QAGI;IACJ,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/build/ts/types/index.d.ts

@@ -1,6 +0,0 @@
-export type { BaseBannerProps } from './Banner';
-export type { BaseBlockStackProps } from './BlockStack';
-export type { BaseButtonProps } from './Button';
-export type { BaseHeadingProps } from './Heading';
-export type { BaseInlineStackProps } from './InlineStack';
-//# sourceMappingURL=index.d.ts.map

package/build/ts/types/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAC,eAAe,EAAC,MAAM,UAAU,CAAC;AAC9C,YAAY,EAAC,mBAAmB,EAAC,MAAM,cAAc,CAAC;AACtD,YAAY,EAAC,eAAe,EAAC,MAAM,UAAU,CAAC;AAC9C,YAAY,EAAC,gBAAgB,EAAC,MAAM,WAAW,CAAC;AAChD,YAAY,EAAC,oBAAoB,EAAC,MAAM,eAAe,CAAC"}

package/build/ts/types/shared/Spacing.d.ts

@@ -1,2 +0,0 @@
-export declare type Spacing = 'none' | 'extraTight' | 'tight' | 'base' | 'loose' | 'extraLoose';
-//# sourceMappingURL=Spacing.d.ts.map

package/build/ts/types/shared/Spacing.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Spacing.d.ts","sourceRoot":"","sources":["../../../../src/types/shared/Spacing.ts"],"names":[],"mappings":"AAAA,oBAAY,OAAO,GACf,MAAM,GACN,YAAY,GACZ,OAAO,GACP,MAAM,GACN,OAAO,GACP,YAAY,CAAC"}

package/build/ts/types/shared/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Spacing';
-//# sourceMappingURL=index.d.ts.map

package/build/ts/types/shared/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/types/shared/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}

package/src/types/Banner.ts

@@ -1,12 +0,0 @@
-export type Status = 'critical' | 'info' | 'success' | 'warning';
-
-export interface BaseBannerProps {
-  /** Callback fired when banner is dismissed. */
-  onDismiss?: () => void;
-
-  /** Visual treatment of the banner based on message purpose. */
-  status?: Status;
-
-  /** Title of the banner. */
-  title?: string;
-}

package/src/types/BlockStack.ts

@@ -1,14 +0,0 @@
-import type {Spacing} from './shared';
-
-export interface BaseBlockStackProps {
-  /**
-   * Specifies the inline alignment. This affects the horizontal flow of elements.
-   * @defaultValue `leading`
-   */
-  inlineAlignment?: 'leading' | 'center' | 'trailing';
-  /**
-   * Adjusts spacing between children.
-   * @defaultValue 'base'
-   **/
-  spacing?: Spacing;
-}

package/src/types/Button.ts

@@ -1,45 +0,0 @@
-export interface BaseButtonProps {
-  /**
-   * The type of button that will be rendered.
-   *
-   * `primary`: button used for main actions or green-path. Ex: Continue to next step, Discount field
-   * `secondary`: button used for secondary actions not blocking user progress. Ex: Download Shop app
-   * `plain`: Renders a button that visually looks like a Link
-   *  @default 'secondary'
-   */
-  kind?: 'primary' | 'secondary' | 'plain';
-  /**
-   *  Specifies the color of the Button. The button will keep the style of the chosen `kind`,
-   *  but replace its color according to the appearance.
-   *
-   * `monochrome`: button will inherit the color of its parent
-   * `critical`: button will take inherit the color of the Critical color group (in Checkout)
-   *  		 and map to 'destructive' (in Admin/Polaris). Typically used for destructive actions.
-   *
-   */
-  appearance?: 'critical';
-  /** Changes the size of the button
-   * @default 'base'
-   */
-  size?: 'base' | 'large';
-  /**
-   * Whether the button should fill all available inline space.
-   * */
-  inlineSize?: 'fill';
-  /**
-   * Replaces content with a loading indicator
-   */
-  loading?: boolean;
-  /**
-   * A label that will be announced to buyers using assistive technologies
-   */
-  accessibilityLabel?: string;
-  /**
-   * Disables the button, disallowing any interaction
-   */
-  disabled?: boolean;
-  /**
-   * Callback when pressed
-   */
-  onPress?(): void;
-}

package/src/types/Heading.ts

@@ -1,14 +0,0 @@
-export type Level = 1 | 2 | 3;
-
-export interface BaseHeadingProps {
-  /**
-   * Unique identifier. Typically used to make the heading a target
-   * that another component can refer to in order to provide an alternative
-   * accessibility label.
-   */
-  id?: string;
-  /**
-   * The visual level of the heading.
-   */
-  level?: Level;
-}

package/src/types/InlineStack.ts

@@ -1,19 +0,0 @@
-import type {Spacing} from './shared';
-
-export interface BaseInlineStackProps {
-  /**
-   * Specifies the block alignment. This affects the vertical flow of elements.
-   * @defaultValue `leading`
-   */
-  blockAlignment?: 'leading' | 'center' | 'trailing' | 'baseline';
-  /**
-   * Specifies the inline alignment. This affects the horizontal flow of elements.
-   * @defaultValue `leading`
-   */
-  inlineAlignment?: 'leading' | 'center' | 'trailing';
-  /**
-   * Adjust spacing between children.
-   * @defaultValue 'base'
-   **/
-  spacing?: Spacing;
-}

package/src/types/index.ts

@@ -1,5 +0,0 @@
-export type {BaseBannerProps} from './Banner';
-export type {BaseBlockStackProps} from './BlockStack';
-export type {BaseButtonProps} from './Button';
-export type {BaseHeadingProps} from './Heading';
-export type {BaseInlineStackProps} from './InlineStack';

package/src/types/shared/Spacing.ts

@@ -1,7 +0,0 @@
-export type Spacing =
-  | 'none'
-  | 'extraTight'
-  | 'tight'
-  | 'base'
-  | 'loose'
-  | 'extraLoose';

package/src/types/shared/index.ts

@@ -1 +0,0 @@
-export * from './Spacing';