wip

Shopify · Oct 8, 2024 · 92dee49 · 92dee49
1 parent 318b8ed
commit 92dee49
Show file tree

Hide file tree

Showing 13 changed files with 117 additions and 57 deletions.
diff --git a/packages/ui-extensions-react/package.json b/packages/ui-extensions-react/package.json
@@ -63,6 +63,8 @@
   "dependencies": {
     "@remote-ui/async-subscription": "^2.1.12",
     "@remote-ui/react": "^5.0.2",
+    "@remote-dom/react": "^1.0.1",
+    "react-dom": "^18.3.1",
     "@types/react": ">=18.2.67"
   },
   "peerDependencies": {
@@ -81,6 +83,7 @@
     "@faker-js/faker": "^8.4.1",
     "@quilted/react-testing": "^0.5.31",
     "@shopify/ui-extensions": "0.0.0-unstable",
+    "@types/react-dom": "^18.3.0",
     "react": "^18.0.0",
     "react-reconciler": "0.29.0",
     "react-test-renderer": "^18.2.0"

diff --git a/packages/ui-extensions-react/src/surfaces/checkout/components/Button/Button.ts b/packages/ui-extensions-react/src/surfaces/checkout/components/Button/Button.ts
@@ -1,9 +1,8 @@
 import {Button as BaseButton} from '@shopify/ui-extensions/checkout';
-import {createRemoteReactComponent} from '@remote-ui/react';
 import type {ReactPropsFromRemoteComponentType} from '@remote-ui/react';
+import {createRemoteComponent} from '@remote-dom/react';
 
+// @ts-ignore
 export type ButtonProps = ReactPropsFromRemoteComponentType<typeof BaseButton>;
 
-export const Button = createRemoteReactComponent(BaseButton, {
-  fragmentProps: ['overlay'],
-});
+export const Button = createRemoteComponent('ui-button', BaseButton);
diff --git a/packages/ui-extensions-react/src/surfaces/checkout/components/Link/Link.ts b/packages/ui-extensions-react/src/surfaces/checkout/components/Link/Link.ts
@@ -1,9 +1,7 @@
 import {Link as BaseLink} from '@shopify/ui-extensions/checkout';
-import {createRemoteReactComponent} from '@remote-ui/react';
 import type {ReactPropsFromRemoteComponentType} from '@remote-ui/react';
+import {createRemoteComponent} from '@remote-dom/react';
 
 export type LinkProps = ReactPropsFromRemoteComponentType<typeof BaseLink>;
 
-export const Link = createRemoteReactComponent(BaseLink, {
-  fragmentProps: ['overlay'],
-});
+export const Link = createRemoteComponent('ui-link', BaseLink);
diff --git a/packages/ui-extensions-react/src/surfaces/checkout/components/View/View.ts b/packages/ui-extensions-react/src/surfaces/checkout/components/View/View.ts
@@ -1,7 +1,8 @@
 import {View as BaseView} from '@shopify/ui-extensions/checkout';
-import {createRemoteReactComponent} from '@remote-ui/react';
+//@ts-ignore
+import {createRemoteComponent} from '@remote-dom/react';
 import type {ReactPropsFromRemoteComponentType} from '@remote-ui/react';
 
 export type ViewProps = ReactPropsFromRemoteComponentType<typeof BaseView>;
 
-export const View = createRemoteReactComponent(BaseView);
+export const View = createRemoteComponent('ui-view', BaseView);
diff --git a/packages/ui-extensions-react/src/surfaces/customer-account/components/index.ts b/packages/ui-extensions-react/src/surfaces/customer-account/components/index.ts
@@ -9,3 +9,5 @@ export * from './PolicyModal';
 export * from './ResourceItem';
 export * from './ImageGroup';
 export * from './shared-checkout-components';
+
+export default {};
diff --git a/...i-extensions-react/src/surfaces/customer-account/components/shared-checkout-components.ts b/...i-extensions-react/src/surfaces/customer-account/components/shared-checkout-components.ts
@@ -116,7 +116,6 @@ export {
   Tooltip,
   type TooltipProps,
   View,
-  type ViewProps,
   ToggleButton,
   type ToggleButtonProps,
   ToggleButtonGroup,

diff --git a/packages/ui-extensions-react/src/surfaces/customer-account/render.tsx b/packages/ui-extensions-react/src/surfaces/customer-account/render.tsx
@@ -1,6 +1,6 @@
+import '@remote-dom/react/polyfill';
 import type {ReactElement, PropsWithChildren} from 'react';
 import {Component} from 'react';
-import {render as remoteRender} from '@remote-ui/react';
 import {extension} from '@shopify/ui-extensions/customer-account';
 import type {
   ExtensionTargets,
@@ -10,6 +10,8 @@ import type {
 
 import {ExtensionApiContext} from './context';
 
+import {createRoot} from 'react-dom/client';
+
 /**
  * Registers your React-based UI Extension to run for the selected extension target.
  * Additionally, this function will automatically provide the extension API as React
@@ -26,6 +28,7 @@ import {ExtensionApiContext} from './context';
  * which allows you to perform initial asynchronous work like fetching data from your
  * own backend.
  */
+
 export function reactExtension<Target extends RenderExtensionTarget>(
   target: Target,
   render: (
@@ -41,24 +44,12 @@ export function reactExtension<Target extends RenderExtensionTarget>(
     async (root, api) => {
       const element = await render(api as ApiForRenderExtension<Target>);
 
-      await new Promise<void>((resolve, reject) => {
-        try {
-          remoteRender(
-            <ExtensionApiContext.Provider value={api}>
-              <ErrorBoundary>{element}</ErrorBoundary>
-            </ExtensionApiContext.Provider>,
-            root,
-            () => {
-              resolve();
-            },
-          );
-        } catch (error) {
-          // Workaround for https://github.com/Shopify/ui-extensions/issues/325
-          // eslint-disable-next-line no-console
-          console.error(error);
-          reject(error);
-        }
-      });
+      createRoot(root).render(
+        <ExtensionApiContext.Provider value={api}>
+          <ErrorBoundary>{element}</ErrorBoundary>
+        </ExtensionApiContext.Provider>,
+      );
+      return;
     },
   ) as any;
 }
@@ -85,6 +76,7 @@ export function render<Target extends RenderExtensionTarget>(
   target: Target,
   render: (api: ApiForRenderExtension<Target>) => ReactElement<any>,
 ): ExtensionTargets[Target] {
+  //@ts-ignore
   return reactExtension(target, render);
 }
 

diff --git a/packages/ui-extensions/package.json b/packages/ui-extensions/package.json
@@ -64,7 +64,8 @@
   "sideEffects": false,
   "dependencies": {
     "@remote-ui/async-subscription": "^2.1.12",
-    "@remote-ui/core": "^2.2.4"
+    "@remote-ui/core": "^2.2.4",
+    "@remote-dom/core": "^1.2.1"
   },
   "devDependencies": {
     "@shopify/generate-docs": "0.16.4",

diff --git a/packages/ui-extensions/src/surfaces/checkout/components/Button/Button.ts b/packages/ui-extensions/src/surfaces/checkout/components/Button/Button.ts
@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@remote-ui/core';
+import {createRemoteElement} from '@remote-dom/core/elements';
 
 import type {
   Appearance,
@@ -85,7 +85,9 @@ export interface ButtonProps
   onPress?(): void;
 }
 
-/**
- * Buttons are used for actions, such as “Add”, “Continue”, “Pay now”, or “Save”.
- */
-export const Button = createRemoteComponent<'Button', ButtonProps>('Button');
+export const Button = createRemoteElement<{}>({
+  properties: {to: String, onPress: {event: true}},
+});
+
+// @ts-ignore
+customElements.define('ui-button', Button);
diff --git a/packages/ui-extensions/src/surfaces/checkout/components/Link/Link.ts b/packages/ui-extensions/src/surfaces/checkout/components/Link/Link.ts
@@ -1,10 +1,9 @@
-import {createRemoteComponent} from '@remote-ui/core';
-
 import type {
   Appearance,
   OverlayActivatorProps,
   DisclosureActivatorProps,
 } from '../shared';
+import {createRemoteElement} from '@remote-dom/core/elements';
 
 export interface LinkProps
   extends OverlayActivatorProps,
@@ -48,7 +47,9 @@ export interface LinkProps
   onPress?(): void;
 }
 
-/**
- * Link makes text interactive so customers can perform an action, such as navigating to another location.
- */
-export const Link = createRemoteComponent<'Link', LinkProps>('Link');
+export const Link = createRemoteElement<{}>({
+  properties: {to: String},
+});
+
+// @ts-ignore
+customElements.define('ui-link', Link);
diff --git a/packages/ui-extensions/src/surfaces/checkout/components/View/View.ts b/packages/ui-extensions/src/surfaces/checkout/components/View/View.ts
@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@remote-ui/core';
+import {createRemoteElement} from '@remote-dom/core/elements';
 
 import type {MaybeResponsiveConditionalStyle} from '../../style/types';
 import type {
@@ -234,4 +234,9 @@ export interface ViewProps
  * “natural” size, so this component can be useful in layout components (like `Grid`,
  * `BlockStack`, `InlineStack`) that would otherwise stretch their children to fit.
  */
-export const View = createRemoteComponent<'View', ViewProps>('View');
+export const View = createRemoteElement<{}>({
+  properties: {padding: String, border: String},
+});
+
+// @ts-ignore
+customElements.define('ui-view', View);
diff --git a/packages/ui-extensions/src/utilities/registration.ts b/packages/ui-extensions/src/utilities/registration.ts
@@ -1,11 +1,24 @@
-import {createRemoteRoot} from '@remote-ui/core';
+import '@remote-dom/core/polyfill';
 
 import type {
   RenderExtensionConnection,
   RenderExtension,
   RenderExtensionWithRemoteRoot,
 } from '../extension';
 
+import {
+  RemoteFragmentElement,
+  // @ts-ignore
+  RemoteMutationObserver,
+  RemoteRootElement,
+} from '@remote-dom/core/elements';
+
+console.log('### RemoteRootElement', RemoteRootElement);
+// @ts-ignore
+customElements.define('remote-root', RemoteRootElement);
+// @ts-ignore
+customElements.define('remote-fragment', RemoteFragmentElement);
+
 export interface ExtensionRegistrationFunction<ExtensionTargets> {
   <Target extends keyof ExtensionTargets>(
     target: Target,
@@ -46,35 +59,37 @@ export function createExtensionRegistrationFunction<
         return (implementation as any)(...args);
       }
 
-      const [{channel, components}, api] = args as [
-        RenderExtensionConnection,
-        any,
-      ];
+      const [{channel}, api] = args as [RenderExtensionConnection, any];
+
+      // @ts-ignore
+      const root = document.createElement('remote-root');
+      root.connect(channel);
 
-      const root = createRemoteRoot(channel, {
-        components,
-        strict: true,
-      });
+      // try {
+      //   const observer = new RemoteMutationObserver(channel);
+      //   observer.observe(root);
+      // } catch {
+      // }
 
       let renderResult = (implementation as any)(root, api);
 
+      console.log('### renderResult test', renderResult);
+
       if (
         typeof renderResult === 'object' &&
         renderResult != null &&
         'then' in renderResult
       ) {
         renderResult = await renderResult;
+        console.log('### renderResult promise', renderResult);
       }
 
-      root.mount();
-
       return renderResult;
     }
 
     (globalThis as any).shopify?.extend(target, extension);
 
     return extension as any;
   };
-
   return extensionWrapper;
 }
diff --git a/yarn.lock b/yarn.lock
@@ -1775,6 +1775,28 @@
   dependencies:
     jest-matcher-utils "^27.0.0"
 
+"@remote-dom/core@^1.0.0", "@remote-dom/core@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@remote-dom/core/-/core-1.2.1.tgz#e72fa623844acdf40dbded501f775fd56784e81e"
+  integrity sha512-y0g5f6x+Gnge8G34yByGoQ85LlHWcbNLjAk4iold+HJ/HioY2aeRGjQWb44wNVqwm+rUt8CYk+SwGHY3dZZO1Q==
+  dependencies:
+    "@remote-dom/polyfill" "^1.0.3"
+    htm "^3.1.1"
+
+"@remote-dom/polyfill@^1.0.3":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@remote-dom/polyfill/-/polyfill-1.0.6.tgz#8b047fc2163e6046b751647c858c3f9208f81f13"
+  integrity sha512-dnIY+EHdcxrpFLOsiDZB2ZrDQCLLm0DU3s2zCo0s/WiPynvjTAi7eExN02ohNlkcPC2pTjFJsN9YiOmzPp+MaA==
+
+"@remote-dom/react@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@remote-dom/react/-/react-1.0.1.tgz#075394b02523491be35d664175acb516c2587598"
+  integrity sha512-EY4sFoIo2/j+7Wj6D0LM3s7IDCUZf1R+dPHpQiK7DlPiiYCvzsnENKFUa11IfEg337haKkzYg4Zd8BsLeSttGg==
+  dependencies:
+    "@remote-dom/core" "^1.0.0"
+    "@types/react" "^18.0.0"
+    htm "^3.1.1"
+
 "@remote-ui/async-subscription@^2.1.12", "@remote-ui/async-subscription@^2.1.15":
   version "2.1.15"
   resolved "https://registry.npmjs.org/@remote-ui/async-subscription/-/async-subscription-2.1.15.tgz"
@@ -2170,14 +2192,21 @@
   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz"
   integrity sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==
 
+"@types/react-dom@^18.3.0":
+  version "18.3.0"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.0.tgz#0cbc818755d87066ab6ca74fbedb2547d74a82b0"
+  integrity sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-reconciler@>=0.26.0 <0.30.0":
   version "0.28.8"
   resolved "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.8.tgz"
   integrity sha512-SN9c4kxXZonFhbX4hJrZy37yw9e7EIxcpHCxQv5JUS18wDE5ovkQKlqQEkufdJCCMfuI9BnjUJvhYeJ9x5Ra7g==
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@>=17.0.0 <19.0.0", "@types/react@>=18.2.67", "@types/react@^18.0.21":
+"@types/react@*", "@types/react@>=17.0.0 <19.0.0", "@types/react@>=18.2.67", "@types/react@^18.0.0", "@types/react@^18.0.21":
   version "18.3.3"
   resolved "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz"
   integrity sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==
@@ -4216,6 +4245,11 @@ hosted-git-info@^2.1.4:
   resolved "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz"
   integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
 
+htm@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/htm/-/htm-3.1.1.tgz#49266582be0dc66ed2235d5ea892307cc0c24b78"
+  integrity sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ==
+
 html-encoding-sniffer@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz"
@@ -5984,6 +6018,14 @@ quick-lru@^4.0.1:
   resolved "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz"
   integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
 
+react-dom@^18.3.1:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
+  integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
+  dependencies:
+    loose-envify "^1.1.0"
+    scheduler "^0.23.2"
+
 "react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^17.0.1:
   version "17.0.2"
   resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"