@shopify/ui-extensions - npm Package Compare versions

Comparing version 0.0.0-unstable-20230118192216 to 0.0.0-unstable-20230125164429

build/cjs/utilities/registration.js

@@ -5,2 +5,4 @@ 'use strict';
 
+var core = require('@remote-ui/core');
+
 /**
@@ -16,4 +18,21 @@ * This function takes an extension function that is expecting a `RemoteRoot` as its
     var _shopify;
-    (_shopify = globalThis.shopify) === null || _shopify === void 0 ? void 0 : _shopify.extend(target, implementation);
-    return implementation;
+    function extension(...args) {
+      // Rendering extensions have two arguments. Non-rendering extensions don’t have
+      // a `RemoteChannel` that needs to be normalized, so we can just pass the arguments
+      // through.
+      if (args.length === 1) {
+        return implementation(...args);
+      }
+      const [{
+        channel,
+        components
+      }, api] = args;
+      const root = core.createRemoteRoot(channel, {
+        components,
+        strict: true
+      });
+      return implementation(root, api);
+    }
+    (_shopify = globalThis.shopify) === null || _shopify === void 0 ? void 0 : _shopify.extend(target, extension);
+    return extension;
   };
@@ -20,0 +39,0 @@ return extensionWrapper;

build/ts/extension.d.ts

@@ -1,8 +0,15 @@
-import type { RemoteRoot, RemoteComponentType } from '@remote-ui/core';
+import type { RemoteRoot, RemoteChannel, RemoteComponentType } from '@remote-ui/core';
 export interface Extension<Api, Result> {
     (api: Api): Result;
 }
+export interface RenderExtensionConnection<AllowedComponents extends RemoteComponentType<string, any, any> = RemoteComponentType<any, any, any>> {
+    readonly channel: RemoteChannel;
+    readonly components: AllowedComponents;
+}
 export interface RenderExtension<Api, AllowedComponents extends RemoteComponentType<string, any, any> = RemoteComponentType<any, any, any>> {
+    (connection: RenderExtensionConnection<AllowedComponents>, api: Api): void | Promise<void>;
+}
+export interface RenderExtensionWithRemoteRoot<Api, AllowedComponents extends RemoteComponentType<string, any, any> = RemoteComponentType<any, any, any>> {
     (root: RemoteRoot<AllowedComponents, AllowedComponents>, api: Api): void | Promise<void>;
 }
 //# sourceMappingURL=extension.d.ts.map

build/ts/surfaces/checkout/extension.d.ts

 import type { ExtensionPoints } from './extension-points';
 export * from '../../extension';
-export declare const extension: import("../../utilities/registration").ExtensionRegistrationFunction<ExtensionPoints>;
-export declare const extend: import("../../utilities/registration").ExtensionRegistrationFunction<ExtensionPoints>;
+export declare const extension: import("../../utilities/registration").ExtensionRegistrationFunctionWithRoot<ExtensionPoints>;
+export declare const extend: import("../../utilities/registration").ExtensionRegistrationFunctionWithRoot<ExtensionPoints>;
 //# sourceMappingURL=extension.d.ts.map

build/ts/utilities/registration.d.ts

@@ -0,4 +1,8 @@
+import type { RenderExtension, RenderExtensionWithRemoteRoot } from '../extension';
 export interface ExtensionRegistrationFunction<ExtensionPoints> {
     <Target extends keyof ExtensionPoints>(target: Target, implementation: ExtensionPoints[Target]): ExtensionPoints[Target];
 }
+export interface ExtensionRegistrationFunctionWithRoot<ExtensionPoints> {
+    <Target extends keyof ExtensionPoints>(target: Target, implementation: ExtensionPoints[Target] extends RenderExtension<infer Api, infer Components> ? RenderExtensionWithRemoteRoot<Api, Components> : ExtensionPoints[Target]): ExtensionPoints[Target];
+}
 /**
@@ -11,3 +15,3 @@ * This function takes an extension function that is expecting a `RemoteRoot` as its
  */
-export declare function createExtensionRegistrationFunction<ExtensionPoints>(): ExtensionRegistrationFunction<ExtensionPoints>;
+export declare function createExtensionRegistrationFunction<ExtensionPoints>(): ExtensionRegistrationFunctionWithRoot<ExtensionPoints>;
 //# sourceMappingURL=registration.d.ts.map

package.json

 {
   "name": "@shopify/ui-extensions",
-  "version": "0.0.0-unstable-20230118192216",
+  "version": "0.0.0-unstable-20230125164429",
   "main": "index.js",
@@ -5,0 +5,0 @@ "module": "index.mjs",

src/extension.ts

@@ -1,2 +0,6 @@
-import type {RemoteRoot, RemoteComponentType} from '@remote-ui/core';
+import type {
+  RemoteRoot,
+  RemoteChannel,
+  RemoteComponentType,
+} from '@remote-ui/core';
 
@@ -7,2 +11,13 @@ export interface Extension<Api, Result> {
 
+export interface RenderExtensionConnection<
+  AllowedComponents extends RemoteComponentType<
+    string,
+    any,
+    any
+  > = RemoteComponentType<any, any, any>,
+> {
+  readonly channel: RemoteChannel;
+  readonly components: AllowedComponents;
+}
+
 export interface RenderExtension<
@@ -17,2 +32,16 @@ Api,
   (
+    connection: RenderExtensionConnection<AllowedComponents>,
+    api: Api,
+  ): void | Promise<void>;
+}
+
+export interface RenderExtensionWithRemoteRoot<
+  Api,
+  AllowedComponents extends RemoteComponentType<
+    string,
+    any,
+    any
+  > = RemoteComponentType<any, any, any>,
+> {
+  (
     root: RemoteRoot<AllowedComponents, AllowedComponents>,
@@ -19,0 +48,0 @@ api: Api,

src/utilities/registration.ts

@@ -0,1 +1,8 @@
+import {createRemoteRoot} from '@remote-ui/core';
+import type {
+  RenderExtensionConnection,
+  RenderExtension,
+  RenderExtensionWithRemoteRoot,
+} from '../extension';
+
 export interface ExtensionRegistrationFunction<ExtensionPoints> {
@@ -8,2 +15,14 @@ <Target extends keyof ExtensionPoints>(
 
+export interface ExtensionRegistrationFunctionWithRoot<ExtensionPoints> {
+  <Target extends keyof ExtensionPoints>(
+    target: Target,
+    implementation: ExtensionPoints[Target] extends RenderExtension<
+      infer Api,
+      infer Components
+    >
+      ? RenderExtensionWithRemoteRoot<Api, Components>
+      : ExtensionPoints[Target],
+  ): ExtensionPoints[Target];
+}
+
 /**
@@ -18,9 +37,30 @@ * This function takes an extension function that is expecting a `RemoteRoot` as its
   ExtensionPoints,
->(): ExtensionRegistrationFunction<ExtensionPoints> {
-  const extensionWrapper: ExtensionRegistrationFunction<ExtensionPoints> = (
-    target,
-    implementation,
-  ) => {
-    (globalThis as any).shopify?.extend(target, implementation);
-    return implementation;
+>(): ExtensionRegistrationFunctionWithRoot<ExtensionPoints> {
+  const extensionWrapper: ExtensionRegistrationFunctionWithRoot<
+    ExtensionPoints
+  > = (target, implementation) => {
+    function extension(...args: any[]) {
+      // Rendering extensions have two arguments. Non-rendering extensions don’t have
+      // a `RemoteChannel` that needs to be normalized, so we can just pass the arguments
+      // through.
+      if (args.length === 1) {
+        return (implementation as any)(...args);
+      }
+
+      const [{channel, components}, api] = args as [
+        RenderExtensionConnection,
+        any,
+      ];
+
+      const root = createRemoteRoot(channel, {
+        components,
+        strict: true,
+      });
+
+      return (implementation as any)(root, api);
+    }
+
+    (globalThis as any).shopify?.extend(target, extension);
+
+    return extension as any;
   };
@@ -27,0 +67,0 @@

No alert changes

Improved metrics

Total package byte prevSize

1016368

increased by0.51%

Lines of code

11110

increased by0.97%

No dependency changes