Remove remote-ui references from Admin surface

Add version string into registration call

.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');

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

@@ -1,8 +1,5 @@
-import {Button as BaseButton} from '@shopify/ui-extensions/admin';
-import type {ButtonProps} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const Button = createRemoteReactComponent<'Button', ButtonProps>(
-  BaseButton,
-);
 export type {ButtonProps} from '@shopify/ui-extensions/admin';
+
+export const Button = createRemoteComponent('ui-button');

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

@@ -1,8 +1,5 @@
-import {Checkbox as BaseCheckbox} from '@shopify/ui-extensions/admin';
-import type {CheckboxProps} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const Checkbox = createRemoteReactComponent<'Checkbox', CheckboxProps>(
-  BaseCheckbox,
-);
 export type {CheckboxProps} from '@shopify/ui-extensions/admin';
+
+export const Checkbox = createRemoteComponent('ui-checkbox');

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

@@ -1,9 +1,5 @@
-import {ChoiceList as BaseChoiceList} from '@shopify/ui-extensions/admin';
-import type {ChoiceListProps} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const ChoiceList = createRemoteReactComponent<
-  'ChoiceList',
-  ChoiceListProps
->(BaseChoiceList);
 export type {ChoiceListProps} from '@shopify/ui-extensions/admin';
+
+export const ChoiceList = createRemoteComponent('ui-choice-list');

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

@@ -1,9 +1,5 @@
-import {ColorPicker as BaseColorPicker} from '@shopify/ui-extensions/admin';
-import type {ColorPickerProps} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const ColorPicker = createRemoteReactComponent<
-  'ColorPicker',
-  ColorPickerProps
->(BaseColorPicker);
 export type {ColorPickerProps} from '@shopify/ui-extensions/admin';
+
+export const ColorPicker = createRemoteComponent('ui-color-picker');

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

@@ -1,7 +1,7 @@
-import {CustomerSegmentTemplate as BaseCustomerSegmentTemplate} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const CustomerSegmentTemplate = createRemoteReactComponent(
-  BaseCustomerSegmentTemplate,
-);
 export type {CustomerSegmentTemplateProps} from '@shopify/ui-extensions/admin';
+
+export const CustomerSegmentTemplate = createRemoteComponent(
+  'ui-customer-segment-template',
+);

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

@@ -1,5 +1,5 @@
-import {DateField as BaseDateField} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const DateField = createRemoteReactComponent(BaseDateField);
 export type {DateFieldProps} from '@shopify/ui-extensions/admin';
+
+export const DateField = createRemoteComponent('ui-date-field');

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

@@ -1,5 +1,5 @@
-import {DatePicker as BaseDatePicker} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const DatePicker = createRemoteReactComponent(BaseDatePicker);
 export type {DatePickerProps} from '@shopify/ui-extensions/admin';
+
+export const DatePicker = createRemoteComponent('ui-date-picker');

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

@@ -1,5 +1,5 @@
-import {Divider as BaseDivider} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const Divider = createRemoteReactComponent(BaseDivider);
 export type {DividerProps} from '@shopify/ui-extensions/admin';
+
+export const Divider = createRemoteComponent('ui-divider');

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

@@ -1,5 +1,5 @@
-import {EmailField as BaseEmailField} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const EmailField = createRemoteReactComponent(BaseEmailField);
 export type {EmailFieldProps} from '@shopify/ui-extensions/admin';
+
+export const EmailField = createRemoteComponent('ui-email-field');

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

@@ -1,5 +1,5 @@
-import {Form as BaseForm} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const Form = createRemoteReactComponent(BaseForm);
 export type {FormProps} from '@shopify/ui-extensions/admin';
+
+export const Form = createRemoteComponent('ui-form');

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

@@ -1,9 +1,8 @@
-import {FunctionSettings as BaseFunctionSettings} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const FunctionSettings =
-  createRemoteReactComponent(BaseFunctionSettings);
 export type {
   FunctionSettingsProps,
   FunctionSettingsError,
 } from '@shopify/ui-extensions/admin';
+
+export const FunctionSettings = createRemoteComponent('ui-functipo');

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

@@ -1,5 +1,5 @@
-import {Heading as BaseHeading} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const Heading = createRemoteReactComponent(BaseHeading);
 export type {HeadingProps} from '@shopify/ui-extensions/admin';
+
+export const Heading = createRemoteComponent('ui-heading');

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

@@ -1,5 +1,5 @@
-import {HeadingGroup as BaseHeadingGroup} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const HeadingGroup = createRemoteReactComponent(BaseHeadingGroup);
 export type {HeadingGroupProps} from '@shopify/ui-extensions/admin';
+
+export const HeadingGroup = createRemoteComponent('ui-heading-group');

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

@@ -1,5 +1,5 @@
-import {Icon as BaseIcon} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const Icon = createRemoteReactComponent(BaseIcon);
 export type {IconProps} from '@shopify/ui-extensions/admin';
+
+export const Icon = createRemoteComponent('ui-icon');

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

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

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

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

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

@@ -1,7 +1,7 @@
-import {InternalCustomerSegmentTemplate as BaseInternalCustomerSegmentTemplate} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const InternalCustomerSegmentTemplate = createRemoteReactComponent(
-  BaseInternalCustomerSegmentTemplate,
-);
 export type {InternalCustomerSegmentTemplateProps} from '@shopify/ui-extensions/admin';
+
+export const InternalCustomerSegmentTemplate = createRemoteComponent(
+  'ui-internal-customer-segment-template',
+);

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

@@ -1,7 +1,7 @@
-import {InternalLocationList as BaseInternalLocationList} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const InternalLocationList = createRemoteReactComponent(
-  BaseInternalLocationList,
-);
 export type {InternalLocationListProps} from '@shopify/ui-extensions/admin';
+
+export const InternalLocationList = createRemoteComponent(
+  'ui-internal-location-list',
+);

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

@@ -1,5 +1,5 @@
-import {Link as BaseLink} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const Link = createRemoteReactComponent(BaseLink);
 export type {LinkProps} from '@shopify/ui-extensions/admin';
+
+export const Link = createRemoteComponent('ui-link');

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

@@ -1,5 +1,5 @@
-import {MoneyField as BaseMoneyField} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const MoneyField = createRemoteReactComponent(BaseMoneyField);
 export type {MoneyFieldProps} from '@shopify/ui-extensions/admin';
+
+export const MoneyField = createRemoteComponent('ui-money-field');

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

@@ -1,5 +1,5 @@
-import {NumberField as BaseNumberField} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const NumberField = createRemoteReactComponent(BaseNumberField);
 export type {NumberFieldProps} from '@shopify/ui-extensions/admin';
+
+export const NumberField = createRemoteComponent('ui-number-field');

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

@@ -1,5 +1,5 @@
-import {Paragraph as BaseParagraph} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const Paragraph = createRemoteReactComponent(BaseParagraph);
 export type {ParagraphProps} from '@shopify/ui-extensions/admin';
+
+export const Paragraph = createRemoteComponent('ui-paragraph');

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

@@ -1,5 +1,5 @@
-import {PasswordField as BasePasswordField} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const PasswordField = createRemoteReactComponent(BasePasswordField);
 export type {PasswordFieldProps} from '@shopify/ui-extensions/admin';
+
+export const PasswordField = createRemoteComponent('ui-password-field');

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

@@ -1,9 +1,5 @@
-import {Pressable as BasePressable} from '@shopify/ui-extensions/admin';
-import type {PressableProps} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const Pressable = createRemoteReactComponent<
-  'Pressable',
-  PressableProps
->(BasePressable);
 export type {PressableProps} from '@shopify/ui-extensions/admin';
+
+export const Pressable = createRemoteComponent('ui-pressable');