Skip to content

Commit 16c4403

Browse files
committed
Remove remote-ui references from Admin surface
Add version string into registration call
1 parent fd4dd2b commit 16c4403

File tree

90 files changed

+364
-604
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

90 files changed

+364
-604
lines changed

Diff for: .changeset/pretty-terms-switch.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@shopify/ui-extensions-react': minor
3+
'@shopify/ui-extensions': minor
4+
---
5+
6+
Support remote-dom for Admin surface

Diff for: package.json

+1
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
"@shopify/loom-plugin-eslint": "^2.0.0",
4848
"@shopify/loom-plugin-prettier": "^2.0.0",
4949
"@shopify/typescript-configs": "^5.1.0",
50+
"@rollup/plugin-replace": "^6.0.1",
5051
"eslint": "^8.28.0",
5152
"nodemon": "^2.0.4",
5253
"prettier": "^2.8.0",

Diff for: packages/ui-extensions-react/package.json

+7-2
Original file line numberDiff line numberDiff line change
@@ -63,18 +63,23 @@
6363
"dependencies": {
6464
"@remote-ui/async-subscription": "^2.1.12",
6565
"@remote-ui/react": "^5.0.2",
66-
"@types/react": ">=18.2.67"
66+
"@types/react": ">=18.2.67",
67+
"@types/react-dom": ">=18.2.67"
6768
},
6869
"peerDependencies": {
6970
"@shopify/ui-extensions": "0.0.0-unstable",
70-
"react": ">=18.0.0"
71+
"react": ">=18.0.0",
72+
"react-dom": ">=18.0.0"
7173
},
7274
"peerDependenciesMeta": {
7375
"@shopify/ui-extensions": {
7476
"optional": false
7577
},
7678
"react": {
7779
"optional": false
80+
},
81+
"react-dom": {
82+
"optional": false
7883
}
7984
},
8085
"devDependencies": {
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,5 @@
1-
import {AdminAction as BaseAdminAction} from '@shopify/ui-extensions/admin';
2-
import {
3-
createRemoteReactComponent,
4-
ReactPropsFromRemoteComponentType,
5-
} from '@remote-ui/react';
1+
import {createRemoteComponent} from '../util';
62

7-
export const AdminAction = createRemoteReactComponent(BaseAdminAction, {
8-
fragmentProps: ['primaryAction', 'secondaryAction'],
9-
});
3+
export type {AdminActionProps} from '@shopify/ui-extensions/admin';
104

11-
export type AdminActionProps = ReactPropsFromRemoteComponentType<
12-
typeof BaseAdminAction
13-
>;
5+
export const AdminAction = createRemoteComponent('ui-admin-action');
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
1-
import {AdminBlock as BaseAdminBlock} from '@shopify/ui-extensions/admin';
2-
import {
3-
createRemoteReactComponent,
4-
ReactPropsFromRemoteComponentType,
5-
} from '@remote-ui/react';
1+
import {createRemoteComponent} from '../util';
62

7-
export const AdminBlock = createRemoteReactComponent(BaseAdminBlock);
3+
export type {AdminBlockProps} from '@shopify/ui-extensions/admin';
84

9-
export type AdminBlockProps = ReactPropsFromRemoteComponentType<
10-
typeof BaseAdminBlock
11-
>;
5+
export const AdminBlock = createRemoteComponent('ui-admin-block');
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,5 @@
1-
import {AdminPrintAction as BaseAdminPrintAction} from '@shopify/ui-extensions/admin';
2-
import {
3-
createRemoteReactComponent,
4-
ReactPropsFromRemoteComponentType,
5-
} from '@remote-ui/react';
1+
import {createRemoteComponent} from '../util';
62

7-
export const AdminPrintAction =
8-
createRemoteReactComponent(BaseAdminPrintAction);
3+
export type {AdminPrintActionProps} from '@shopify/ui-extensions/admin';
94

10-
export type AdminPrintActionProps = ReactPropsFromRemoteComponentType<
11-
typeof BaseAdminPrintAction
12-
>;
5+
export const AdminPrintAction = createRemoteComponent('ui-admin-print-action');
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import {Badge as BaseBadge} from '@shopify/ui-extensions/admin';
2-
import type {BadgeProps} from '@shopify/ui-extensions/admin';
3-
import {createRemoteReactComponent} from '@remote-ui/react';
1+
import {createRemoteComponent} from '../util';
42

5-
export const Badge = createRemoteReactComponent<'Badge', BadgeProps>(BaseBadge);
63
export type {BadgeProps} from '@shopify/ui-extensions/admin';
4+
5+
export const Badge = createRemoteComponent('ui-badge');
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
1-
import {Banner as BaseBanner} from '@shopify/ui-extensions/admin';
2-
import {
3-
createRemoteReactComponent,
4-
ReactPropsFromRemoteComponentType,
5-
} from '@remote-ui/react';
1+
import {createRemoteComponent} from '../util';
62

7-
export const Banner = createRemoteReactComponent(BaseBanner, {
8-
fragmentProps: ['primaryAction', 'secondaryAction'],
9-
});
3+
export type {BannerProps} from '@shopify/ui-extensions/admin';
104

11-
export type BannerProps = ReactPropsFromRemoteComponentType<typeof BaseBanner>;
5+
export const Banner = createRemoteComponent('ui-banner');
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
1-
import {BlockStack as BaseBlockStack} from '@shopify/ui-extensions/admin';
2-
import type {BlockStackProps} from '@shopify/ui-extensions/admin';
3-
import {createRemoteReactComponent} from '@remote-ui/react';
1+
import {createRemoteComponent} from '../util';
42

5-
export const BlockStack = createRemoteReactComponent<
6-
'BlockStack',
7-
BlockStackProps
8-
>(BaseBlockStack);
93
export type {BlockStackProps} from '@shopify/ui-extensions/admin';
4+
5+
export const BlockStack = createRemoteComponent('ui-block-stack');
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import {Box as BaseBox} from '@shopify/ui-extensions/admin';
2-
import type {BoxProps} from '@shopify/ui-extensions/admin';
3-
import {createRemoteReactComponent} from '@remote-ui/react';
1+
import {createRemoteComponent} from '../util';
42

5-
export const Box = createRemoteReactComponent<'Box', BoxProps>(BaseBox);
63
export type {BoxProps} from '@shopify/ui-extensions/admin';
4+
5+
export const Box = createRemoteComponent('ui-box');
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
1-
import {Button as BaseButton} from '@shopify/ui-extensions/admin';
2-
import type {ButtonProps} from '@shopify/ui-extensions/admin';
3-
import {createRemoteReactComponent} from '@remote-ui/react';
1+
import {createRemoteComponent} from '../util';
42

5-
export const Button = createRemoteReactComponent<'Button', ButtonProps>(
6-
BaseButton,
7-
);
83
export type {ButtonProps} from '@shopify/ui-extensions/admin';
4+
5+
export const Button = createRemoteComponent('ui-button');
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
1-
import {Checkbox as BaseCheckbox} from '@shopify/ui-extensions/admin';
2-
import type {CheckboxProps} from '@shopify/ui-extensions/admin';
3-
import {createRemoteReactComponent} from '@remote-ui/react';
1+
import {createRemoteComponent} from '../util';
42

5-
export const Checkbox = createRemoteReactComponent<'Checkbox', CheckboxProps>(
6-
BaseCheckbox,
7-
);
83
export type {CheckboxProps} from '@shopify/ui-extensions/admin';
4+
5+
export const Checkbox = createRemoteComponent('ui-checkbox');
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
1-
import {ChoiceList as BaseChoiceList} from '@shopify/ui-extensions/admin';
2-
import type {ChoiceListProps} from '@shopify/ui-extensions/admin';
3-
import {createRemoteReactComponent} from '@remote-ui/react';
1+
import {createRemoteComponent} from '../util';
42

5-
export const ChoiceList = createRemoteReactComponent<
6-
'ChoiceList',
7-
ChoiceListProps
8-
>(BaseChoiceList);
93
export type {ChoiceListProps} from '@shopify/ui-extensions/admin';
4+
5+
export const ChoiceList = createRemoteComponent('ui-choice-list');
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
1-
import {ColorPicker as BaseColorPicker} from '@shopify/ui-extensions/admin';
2-
import type {ColorPickerProps} from '@shopify/ui-extensions/admin';
3-
import {createRemoteReactComponent} from '@remote-ui/react';
1+
import {createRemoteComponent} from '../util';
42

5-
export const ColorPicker = createRemoteReactComponent<
6-
'ColorPicker',
7-
ColorPickerProps
8-
>(BaseColorPicker);
93
export type {ColorPickerProps} from '@shopify/ui-extensions/admin';
4+
5+
export const ColorPicker = createRemoteComponent('ui-color-picker');
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import {CustomerSegmentTemplate as BaseCustomerSegmentTemplate} from '@shopify/ui-extensions/admin';
2-
import {createRemoteReactComponent} from '@remote-ui/react';
1+
import {createRemoteComponent} from '../util';
32

4-
export const CustomerSegmentTemplate = createRemoteReactComponent(
5-
BaseCustomerSegmentTemplate,
6-
);
73
export type {CustomerSegmentTemplateProps} from '@shopify/ui-extensions/admin';
4+
5+
export const CustomerSegmentTemplate = createRemoteComponent(
6+
'ui-customer-segment-template',
7+
);
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import {DateField as BaseDateField} from '@shopify/ui-extensions/admin';
2-
import {createRemoteReactComponent} from '@remote-ui/react';
1+
import {createRemoteComponent} from '../util';
32

4-
export const DateField = createRemoteReactComponent(BaseDateField);
53
export type {DateFieldProps} from '@shopify/ui-extensions/admin';
4+
5+
export const DateField = createRemoteComponent('ui-date-field');
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import {DatePicker as BaseDatePicker} from '@shopify/ui-extensions/admin';
2-
import {createRemoteReactComponent} from '@remote-ui/react';
1+
import {createRemoteComponent} from '../util';
32

4-
export const DatePicker = createRemoteReactComponent(BaseDatePicker);
53
export type {DatePickerProps} from '@shopify/ui-extensions/admin';
4+
5+
export const DatePicker = createRemoteComponent('ui-date-picker');
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import {Divider as BaseDivider} from '@shopify/ui-extensions/admin';
2-
import {createRemoteReactComponent} from '@remote-ui/react';
1+
import {createRemoteComponent} from '../util';
32

4-
export const Divider = createRemoteReactComponent(BaseDivider);
53
export type {DividerProps} from '@shopify/ui-extensions/admin';
4+
5+
export const Divider = createRemoteComponent('ui-divider');
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import {EmailField as BaseEmailField} from '@shopify/ui-extensions/admin';
2-
import {createRemoteReactComponent} from '@remote-ui/react';
1+
import {createRemoteComponent} from '../util';
32

4-
export const EmailField = createRemoteReactComponent(BaseEmailField);
53
export type {EmailFieldProps} from '@shopify/ui-extensions/admin';
4+
5+
export const EmailField = createRemoteComponent('ui-email-field');
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import {Form as BaseForm} from '@shopify/ui-extensions/admin';
2-
import {createRemoteReactComponent} from '@remote-ui/react';
1+
import {createRemoteComponent} from '../util';
32

4-
export const Form = createRemoteReactComponent(BaseForm);
53
export type {FormProps} from '@shopify/ui-extensions/admin';
4+
5+
export const Form = createRemoteComponent('ui-form');
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import {FunctionSettings as BaseFunctionSettings} from '@shopify/ui-extensions/admin';
2-
import {createRemoteReactComponent} from '@remote-ui/react';
1+
import {createRemoteComponent} from '../util';
32

4-
export const FunctionSettings =
5-
createRemoteReactComponent(BaseFunctionSettings);
63
export type {
74
FunctionSettingsProps,
85
FunctionSettingsError,
96
} from '@shopify/ui-extensions/admin';
7+
8+
export const FunctionSettings = createRemoteComponent('ui-functipo');
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import {Heading as BaseHeading} from '@shopify/ui-extensions/admin';
2-
import {createRemoteReactComponent} from '@remote-ui/react';
1+
import {createRemoteComponent} from '../util';
32

4-
export const Heading = createRemoteReactComponent(BaseHeading);
53
export type {HeadingProps} from '@shopify/ui-extensions/admin';
4+
5+
export const Heading = createRemoteComponent('ui-heading');
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import {HeadingGroup as BaseHeadingGroup} from '@shopify/ui-extensions/admin';
2-
import {createRemoteReactComponent} from '@remote-ui/react';
1+
import {createRemoteComponent} from '../util';
32

4-
export const HeadingGroup = createRemoteReactComponent(BaseHeadingGroup);
53
export type {HeadingGroupProps} from '@shopify/ui-extensions/admin';
4+
5+
export const HeadingGroup = createRemoteComponent('ui-heading-group');
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import {Icon as BaseIcon} from '@shopify/ui-extensions/admin';
2-
import {createRemoteReactComponent} from '@remote-ui/react';
1+
import {createRemoteComponent} from '../util';
32

4-
export const Icon = createRemoteReactComponent(BaseIcon);
53
export type {IconProps} from '@shopify/ui-extensions/admin';
4+
5+
export const Icon = createRemoteComponent('ui-icon');
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import {Image as BaseImage} from '@shopify/ui-extensions/admin';
2-
import type {ImageProps} from '@shopify/ui-extensions/admin';
3-
import {createRemoteReactComponent} from '@remote-ui/react';
1+
import {createRemoteComponent} from '../util';
42

5-
export const Image = createRemoteReactComponent<'Image', ImageProps>(BaseImage);
63
export type {ImageProps} from '@shopify/ui-extensions/admin';
4+
5+
export const Image = createRemoteComponent('ui-image');
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
1-
import {InlineStack as BaseInlineStack} from '@shopify/ui-extensions/admin';
2-
import type {InlineStackProps} from '@shopify/ui-extensions/admin';
3-
import {createRemoteReactComponent} from '@remote-ui/react';
1+
import {createRemoteComponent} from '../util';
42

5-
export const InlineStack = createRemoteReactComponent<
6-
'InlineStack',
7-
InlineStackProps
8-
>(BaseInlineStack);
93
export type {InlineStackProps} from '@shopify/ui-extensions/admin';
4+
5+
export const InlineStack = createRemoteComponent('ui-inline-stack');
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import {InternalCustomerSegmentTemplate as BaseInternalCustomerSegmentTemplate} from '@shopify/ui-extensions/admin';
2-
import {createRemoteReactComponent} from '@remote-ui/react';
1+
import {createRemoteComponent} from '../util';
32

4-
export const InternalCustomerSegmentTemplate = createRemoteReactComponent(
5-
BaseInternalCustomerSegmentTemplate,
6-
);
73
export type {InternalCustomerSegmentTemplateProps} from '@shopify/ui-extensions/admin';
4+
5+
export const InternalCustomerSegmentTemplate = createRemoteComponent(
6+
'ui-internal-customer-segment-template',
7+
);
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import {InternalLocationList as BaseInternalLocationList} from '@shopify/ui-extensions/admin';
2-
import {createRemoteReactComponent} from '@remote-ui/react';
1+
import {createRemoteComponent} from '../util';
32

4-
export const InternalLocationList = createRemoteReactComponent(
5-
BaseInternalLocationList,
6-
);
73
export type {InternalLocationListProps} from '@shopify/ui-extensions/admin';
4+
5+
export const InternalLocationList = createRemoteComponent(
6+
'ui-internal-location-list',
7+
);
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import {Link as BaseLink} from '@shopify/ui-extensions/admin';
2-
import {createRemoteReactComponent} from '@remote-ui/react';
1+
import {createRemoteComponent} from '../util';
32

4-
export const Link = createRemoteReactComponent(BaseLink);
53
export type {LinkProps} from '@shopify/ui-extensions/admin';
4+
5+
export const Link = createRemoteComponent('ui-link');
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import {MoneyField as BaseMoneyField} from '@shopify/ui-extensions/admin';
2-
import {createRemoteReactComponent} from '@remote-ui/react';
1+
import {createRemoteComponent} from '../util';
32

4-
export const MoneyField = createRemoteReactComponent(BaseMoneyField);
53
export type {MoneyFieldProps} from '@shopify/ui-extensions/admin';
4+
5+
export const MoneyField = createRemoteComponent('ui-money-field');
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import {NumberField as BaseNumberField} from '@shopify/ui-extensions/admin';
2-
import {createRemoteReactComponent} from '@remote-ui/react';
1+
import {createRemoteComponent} from '../util';
32

4-
export const NumberField = createRemoteReactComponent(BaseNumberField);
53
export type {NumberFieldProps} from '@shopify/ui-extensions/admin';
4+
5+
export const NumberField = createRemoteComponent('ui-number-field');
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import {Paragraph as BaseParagraph} from '@shopify/ui-extensions/admin';
2-
import {createRemoteReactComponent} from '@remote-ui/react';
1+
import {createRemoteComponent} from '../util';
32

4-
export const Paragraph = createRemoteReactComponent(BaseParagraph);
53
export type {ParagraphProps} from '@shopify/ui-extensions/admin';
4+
5+
export const Paragraph = createRemoteComponent('ui-paragraph');
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import {PasswordField as BasePasswordField} from '@shopify/ui-extensions/admin';
2-
import {createRemoteReactComponent} from '@remote-ui/react';
1+
import {createRemoteComponent} from '../util';
32

4-
export const PasswordField = createRemoteReactComponent(BasePasswordField);
53
export type {PasswordFieldProps} from '@shopify/ui-extensions/admin';
4+
5+
export const PasswordField = createRemoteComponent('ui-password-field');
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
1-
import {Pressable as BasePressable} from '@shopify/ui-extensions/admin';
2-
import type {PressableProps} from '@shopify/ui-extensions/admin';
3-
import {createRemoteReactComponent} from '@remote-ui/react';
1+
import {createRemoteComponent} from '../util';
42

5-
export const Pressable = createRemoteReactComponent<
6-
'Pressable',
7-
PressableProps
8-
>(BasePressable);
93
export type {PressableProps} from '@shopify/ui-extensions/admin';
4+
5+
export const Pressable = createRemoteComponent('ui-pressable');

0 commit comments

Comments
 (0)