Remove remote-ui references from Admin surface

Add version string into registration call

Author: vividviolet

.changeset/pretty-terms-switch.md

@@ -0,0 +1,6 @@
+---
+'@shopify/ui-extensions-react': minor
+'@shopify/ui-extensions': minor
+---
+
+Support remote-dom for Admin surface

package.json

@@ -47,6 +47,7 @@
     "@shopify/loom-plugin-eslint": "^2.0.0",
     "@shopify/loom-plugin-prettier": "^2.0.0",
     "@shopify/typescript-configs": "^5.1.0",
+    "@rollup/plugin-replace": "^6.0.1",
     "eslint": "^8.28.0",
     "nodemon": "^2.0.4",
     "prettier": "^2.8.0",

packages/ui-extensions-react/package.json

@@ -63,18 +63,23 @@
   "dependencies": {
     "@remote-ui/async-subscription": "^2.1.12",
     "@remote-ui/react": "^5.0.2",
-    "@types/react": ">=18.2.67"
+    "@types/react": ">=18.2.67",
+    "@types/react-dom": ">=18.2.67"
   },
   "peerDependencies": {
     "@shopify/ui-extensions": "0.0.0-unstable",
-    "react": ">=18.0.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "peerDependenciesMeta": {
     "@shopify/ui-extensions": {
       "optional": false
     },
     "react": {
       "optional": false
+    },
+    "react-dom": {
+      "optional": false
     }
   },
   "devDependencies": {

packages/ui-extensions-react/src/surfaces/admin/components/AdminAction/AdminAction.ts

@@ -1,13 +1,5 @@
-import {AdminAction as BaseAdminAction} from '@shopify/ui-extensions/admin';
-import {
-  createRemoteReactComponent,
-  ReactPropsFromRemoteComponentType,
-} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const AdminAction = createRemoteReactComponent(BaseAdminAction, {
-  fragmentProps: ['primaryAction', 'secondaryAction'],
-});
+export type {AdminActionProps} from '@shopify/ui-extensions/admin';
 
-export type AdminActionProps = ReactPropsFromRemoteComponentType<
-  typeof BaseAdminAction
->;
+export const AdminAction = createRemoteComponent('ui-admin-action');

packages/ui-extensions-react/src/surfaces/admin/components/AdminBlock/AdminBlock.ts

@@ -1,11 +1,5 @@
-import {AdminBlock as BaseAdminBlock} from '@shopify/ui-extensions/admin';
-import {
-  createRemoteReactComponent,
-  ReactPropsFromRemoteComponentType,
-} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const AdminBlock = createRemoteReactComponent(BaseAdminBlock);
+export type {AdminBlockProps} from '@shopify/ui-extensions/admin';
 
-export type AdminBlockProps = ReactPropsFromRemoteComponentType<
-  typeof BaseAdminBlock
->;
+export const AdminBlock = createRemoteComponent('ui-admin-block');

packages/ui-extensions-react/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts

@@ -1,12 +1,5 @@
-import {AdminPrintAction as BaseAdminPrintAction} from '@shopify/ui-extensions/admin';
-import {
-  createRemoteReactComponent,
-  ReactPropsFromRemoteComponentType,
-} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const AdminPrintAction =
-  createRemoteReactComponent(BaseAdminPrintAction);
+export type {AdminPrintActionProps} from '@shopify/ui-extensions/admin';
 
-export type AdminPrintActionProps = ReactPropsFromRemoteComponentType<
-  typeof BaseAdminPrintAction
->;
+export const AdminPrintAction = createRemoteComponent('ui-admin-print-action');

packages/ui-extensions-react/src/surfaces/admin/components/Badge/Badge.ts

@@ -1,6 +1,5 @@
-import {Badge as BaseBadge} from '@shopify/ui-extensions/admin';
-import type {BadgeProps} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const Badge = createRemoteReactComponent<'Badge', BadgeProps>(BaseBadge);
 export type {BadgeProps} from '@shopify/ui-extensions/admin';
+
+export const Badge = createRemoteComponent('ui-badge');

packages/ui-extensions-react/src/surfaces/admin/components/Banner/Banner.ts

@@ -1,11 +1,5 @@
-import {Banner as BaseBanner} from '@shopify/ui-extensions/admin';
-import {
-  createRemoteReactComponent,
-  ReactPropsFromRemoteComponentType,
-} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const Banner = createRemoteReactComponent(BaseBanner, {
-  fragmentProps: ['primaryAction', 'secondaryAction'],
-});
+export type {BannerProps} from '@shopify/ui-extensions/admin';
 
-export type BannerProps = ReactPropsFromRemoteComponentType<typeof BaseBanner>;
+export const Banner = createRemoteComponent('ui-banner');

packages/ui-extensions-react/src/surfaces/admin/components/BlockStack/BlockStack.ts

@@ -1,9 +1,5 @@
-import {BlockStack as BaseBlockStack} from '@shopify/ui-extensions/admin';
-import type {BlockStackProps} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const BlockStack = createRemoteReactComponent<
-  'BlockStack',
-  BlockStackProps
->(BaseBlockStack);
 export type {BlockStackProps} from '@shopify/ui-extensions/admin';
+
+export const BlockStack = createRemoteComponent('ui-block-stack');

packages/ui-extensions-react/src/surfaces/admin/components/Box/Box.ts

@@ -1,6 +1,5 @@
-import {Box as BaseBox} from '@shopify/ui-extensions/admin';
-import type {BoxProps} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const Box = createRemoteReactComponent<'Box', BoxProps>(BaseBox);
 export type {BoxProps} from '@shopify/ui-extensions/admin';
+
+export const Box = createRemoteComponent('ui-box');