diff --git a/.changeset/pretty-terms-switch.md b/.changeset/pretty-terms-switch.md new file mode 100644 index 000000000..a79f1505c --- /dev/null +++ b/.changeset/pretty-terms-switch.md @@ -0,0 +1,6 @@ +--- +'@shopify/ui-extensions-react': minor +'@shopify/ui-extensions': minor +--- + +Support remote-dom for Admin surface diff --git a/package.json b/package.json index 89a4d1322..e9b9703f6 100644 --- a/package.json +++ b/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", diff --git a/packages/ui-extensions-react/package.json b/packages/ui-extensions-react/package.json index d7523dc84..331dbce19 100644 --- a/packages/ui-extensions-react/package.json +++ b/packages/ui-extensions-react/package.json @@ -63,11 +63,13 @@ "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": { @@ -75,6 +77,9 @@ }, "react": { "optional": false + }, + "react-dom": { + "optional": false } }, "devDependencies": { diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/AdminAction/AdminAction.ts b/packages/ui-extensions-react/src/surfaces/admin/components/AdminAction/AdminAction.ts index b2c2d76c2..7134a86e0 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/AdminAction/AdminAction.ts +++ b/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'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/AdminBlock/AdminBlock.ts b/packages/ui-extensions-react/src/surfaces/admin/components/AdminBlock/AdminBlock.ts index a77456e09..69e548e09 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/AdminBlock/AdminBlock.ts +++ b/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'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts b/packages/ui-extensions-react/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts index 2a68dad70..cfbd27f3e 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts +++ b/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'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Badge/Badge.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Badge/Badge.ts index 26ac638e5..051fc1ed8 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Badge/Badge.ts +++ b/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'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Banner/Banner.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Banner/Banner.ts index 4ecdc3103..728a34947 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Banner/Banner.ts +++ b/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; +export const Banner = createRemoteComponent('ui-banner'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/BlockStack/BlockStack.ts b/packages/ui-extensions-react/src/surfaces/admin/components/BlockStack/BlockStack.ts index dd606c36c..fb4d04559 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/BlockStack/BlockStack.ts +++ b/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'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Box/Box.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Box/Box.ts index 05a4ca92e..b5a8afb60 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Box/Box.ts +++ b/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'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Button/Button.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Button/Button.ts index 31376f27e..931634df8 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Button/Button.ts +++ b/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'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Checkbox/Checkbox.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Checkbox/Checkbox.ts index 75ddfa2a8..0fc14909a 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Checkbox/Checkbox.ts +++ b/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'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/ChoiceList/ChoiceList.ts b/packages/ui-extensions-react/src/surfaces/admin/components/ChoiceList/ChoiceList.ts index bc750e7cd..4aa60d67b 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/ChoiceList/ChoiceList.ts +++ b/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'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/ColorPicker/ColorPicker.ts b/packages/ui-extensions-react/src/surfaces/admin/components/ColorPicker/ColorPicker.ts index 06217b89b..375de0137 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/ColorPicker/ColorPicker.ts +++ b/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'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.ts b/packages/ui-extensions-react/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.ts index 71ec0058b..8110f6578 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.ts +++ b/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', +); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/DateField/DateField.ts b/packages/ui-extensions-react/src/surfaces/admin/components/DateField/DateField.ts index 9c2cbf313..c56494551 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/DateField/DateField.ts +++ b/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'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/DatePicker.ts b/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/DatePicker.ts index 54923a8ad..21f3cdbfe 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/DatePicker.ts +++ b/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'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Divider/Divider.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Divider/Divider.ts index 0b2a3a535..a26fac0e3 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Divider/Divider.ts +++ b/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'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/EmailField/EmailField.ts b/packages/ui-extensions-react/src/surfaces/admin/components/EmailField/EmailField.ts index fb96dc2f8..6c3b7de33 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/EmailField/EmailField.ts +++ b/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'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Form/Form.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Form/Form.ts index 68e3f4c30..d62ad110e 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Form/Form.ts +++ b/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'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/FunctionSettings/FunctionSettings.ts b/packages/ui-extensions-react/src/surfaces/admin/components/FunctionSettings/FunctionSettings.ts index a656e3fd0..4aadb0e05 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/FunctionSettings/FunctionSettings.ts +++ b/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'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Heading/Heading.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Heading/Heading.ts index 771b352be..b6e6d73b6 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Heading/Heading.ts +++ b/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'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/HeadingGroup/HeadingGroup.ts b/packages/ui-extensions-react/src/surfaces/admin/components/HeadingGroup/HeadingGroup.ts index 32f411f5d..7f6f45c24 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/HeadingGroup/HeadingGroup.ts +++ b/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'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Icon/Icon.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Icon/Icon.ts index 45aaa4715..c50233a7c 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Icon/Icon.ts +++ b/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'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Image/Image.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Image/Image.ts index 4440a48eb..82b47d291 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Image/Image.ts +++ b/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'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/InlineStack/InlineStack.ts b/packages/ui-extensions-react/src/surfaces/admin/components/InlineStack/InlineStack.ts index 7b8eba345..140cc12bf 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/InlineStack/InlineStack.ts +++ b/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'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts b/packages/ui-extensions-react/src/surfaces/admin/components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts index d41489cfb..74b94026c 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts +++ b/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', +); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/InternalLocationList/InternalLocationList.ts b/packages/ui-extensions-react/src/surfaces/admin/components/InternalLocationList/InternalLocationList.ts index 72e392ed1..557356e83 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/InternalLocationList/InternalLocationList.ts +++ b/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', +); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Link/Link.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Link/Link.ts index 7839408e6..bda27989c 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Link/Link.ts +++ b/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'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/MoneyField/MoneyField.ts b/packages/ui-extensions-react/src/surfaces/admin/components/MoneyField/MoneyField.ts index d2f04f946..f176a02a6 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/MoneyField/MoneyField.ts +++ b/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'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/NumberField/NumberField.ts b/packages/ui-extensions-react/src/surfaces/admin/components/NumberField/NumberField.ts index dff37fc7a..3f44e86e6 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/NumberField/NumberField.ts +++ b/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'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/Paragraph.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/Paragraph.ts index 0a3ada05d..d727b8839 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/Paragraph.ts +++ b/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'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/PasswordField/PasswordField.ts b/packages/ui-extensions-react/src/surfaces/admin/components/PasswordField/PasswordField.ts index 42d1785e2..68f167a40 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/PasswordField/PasswordField.ts +++ b/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'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Pressable/Pressable.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Pressable/Pressable.ts index bac20a88a..fcca37def 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Pressable/Pressable.ts +++ b/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'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts b/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts index 655e9ab99..b10c17719 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts +++ b/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts @@ -1,9 +1,5 @@ -import {ProgressIndicator as BaseProgressIndicator} from '@shopify/ui-extensions/admin'; -import type {ProgressIndicatorProps} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; +import {createRemoteComponent} from '../util'; -export const ProgressIndicator = createRemoteReactComponent< - 'ProgressIndicator', - ProgressIndicatorProps ->(BaseProgressIndicator); export type {ProgressIndicatorProps} from '@shopify/ui-extensions/admin'; + +export const ProgressIndicator = createRemoteComponent('ui-progress-indicator'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Section/Section.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Section/Section.ts index d4413c2db..6cc484c55 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Section/Section.ts +++ b/packages/ui-extensions-react/src/surfaces/admin/components/Section/Section.ts @@ -1,5 +1,5 @@ -import {Section as BaseSection} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; +import {createRemoteComponent} from '../util'; -export const Section = createRemoteReactComponent(BaseSection); export type {SectionProps} from '@shopify/ui-extensions/admin'; + +export const Section = createRemoteComponent('ui-section'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Select/Select.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Select/Select.ts index 92bfcc35a..9f0b79f15 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Select/Select.ts +++ b/packages/ui-extensions-react/src/surfaces/admin/components/Select/Select.ts @@ -1,11 +1,11 @@ -import {Select as BaseSelect} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; +import {createRemoteComponent} from '../util'; -export const Select = createRemoteReactComponent(BaseSelect); export type { SelectProps, - OptionProps, - OptionGroupProps, OptionDescription, OptionGroupDescription, + OptionGroupProps, + OptionProps, } from '@shopify/ui-extensions/admin'; + +export const Select = createRemoteComponent('ui-select'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Text/Text.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Text/Text.ts index da9044c13..8f040b4fc 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Text/Text.ts +++ b/packages/ui-extensions-react/src/surfaces/admin/components/Text/Text.ts @@ -1,5 +1,5 @@ -import {Text as BaseText} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; +import {createRemoteComponent} from '../util'; -export const Text = createRemoteReactComponent(BaseText); export type {TextProps} from '@shopify/ui-extensions/admin'; + +export const Text = createRemoteComponent('ui-text'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/TextArea/TextArea.ts b/packages/ui-extensions-react/src/surfaces/admin/components/TextArea/TextArea.ts index e0e88fe37..a9f53e617 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/TextArea/TextArea.ts +++ b/packages/ui-extensions-react/src/surfaces/admin/components/TextArea/TextArea.ts @@ -1,8 +1,5 @@ -import {TextArea as BaseTextArea} from '@shopify/ui-extensions/admin'; -import type {TextAreaProps} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; +import {createRemoteComponent} from '../util'; -export const TextArea = createRemoteReactComponent<'TextArea', TextAreaProps>( - BaseTextArea, -); export type {TextAreaProps} from '@shopify/ui-extensions/admin'; + +export const TextArea = createRemoteComponent('ui-text-area'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/TextField/TextField.ts b/packages/ui-extensions-react/src/surfaces/admin/components/TextField/TextField.ts index 1442cb606..624fb6eed 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/TextField/TextField.ts +++ b/packages/ui-extensions-react/src/surfaces/admin/components/TextField/TextField.ts @@ -1,5 +1,5 @@ -import {TextField as BaseTextField} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; +import {createRemoteComponent} from '../util'; -export const TextField = createRemoteReactComponent(BaseTextField); export type {TextFieldProps} from '@shopify/ui-extensions/admin'; + +export const TextField = createRemoteComponent('ui-text-field'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/URLField/URLField.ts b/packages/ui-extensions-react/src/surfaces/admin/components/URLField/URLField.ts index f6c2d0d07..1811e45fd 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/URLField/URLField.ts +++ b/packages/ui-extensions-react/src/surfaces/admin/components/URLField/URLField.ts @@ -1,5 +1,5 @@ -import {URLField as BaseURLField} from '@shopify/ui-extensions/admin'; -import {createRemoteReactComponent} from '@remote-ui/react'; +import {createRemoteComponent} from '../util'; -export const URLField = createRemoteReactComponent(BaseURLField); export type {URLFieldProps} from '@shopify/ui-extensions/admin'; + +export const URLField = createRemoteComponent('ui-url-field'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/util.ts b/packages/ui-extensions-react/src/surfaces/admin/components/util.ts new file mode 100644 index 000000000..36a0f531e --- /dev/null +++ b/packages/ui-extensions-react/src/surfaces/admin/components/util.ts @@ -0,0 +1,19 @@ +import { + createElement, + useRef, + useLayoutEffect, + useCallback, + forwardRef, +} from 'react'; + +export const createRemoteComponent = (name: string) => + (shopify as any)._createReactRemoteComponent( + { + createElement, + useRef, + useLayoutEffect, + useCallback, + forwardRef, + }, + name, + ); diff --git a/packages/ui-extensions-react/src/surfaces/admin/render.tsx b/packages/ui-extensions-react/src/surfaces/admin/render.tsx index 447f597f5..570e09f02 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/render.tsx +++ b/packages/ui-extensions-react/src/surfaces/admin/render.tsx @@ -8,8 +8,7 @@ import type { } from '@shopify/ui-extensions/admin'; import {ExtensionApiContext} from './context'; -import {remoteRootRender} from '../../utilities/remoteRootRender'; - +import {remoteDomRender} from '../../utilities/remoteDomRender'; /** * Registers your React-based UI Extension to run for the selected extension point. * Additionally, this function will automatically provide the extension API as React @@ -42,7 +41,7 @@ export function reactExtension( const element = await render(api as ApiForRenderExtension); - return remoteRootRender( + return remoteDomRender( {element} , diff --git a/packages/ui-extensions-react/src/utilities/remoteDomRender.ts b/packages/ui-extensions-react/src/utilities/remoteDomRender.ts new file mode 100644 index 000000000..756673ac5 --- /dev/null +++ b/packages/ui-extensions-react/src/utilities/remoteDomRender.ts @@ -0,0 +1,18 @@ +import {ReactNode} from 'react'; +import {createRoot} from 'react-dom/client'; + +export const remoteDomRender = (node: ReactNode, root: HTMLElement) => { + return new Promise<() => void>((resolve, reject) => { + try { + const remoteRoot = createRoot(root); + remoteRoot.render(node); + + resolve(() => remoteRoot.unmount()); + } catch (error) { + // Workaround for https://github.com/Shopify/ui-extensions/issues/325 + // eslint-disable-next-line no-console + console.error(error); + reject(error); + } + }); +}; diff --git a/packages/ui-extensions/loom.config.ts b/packages/ui-extensions/loom.config.ts index e86417c32..49eced95f 100644 --- a/packages/ui-extensions/loom.config.ts +++ b/packages/ui-extensions/loom.config.ts @@ -1,6 +1,14 @@ import {createPackage} from '@shopify/loom'; +import {readFileSync} from 'fs'; +import {resolve} from 'path'; import {defaultProjectPlugin} from '../../config/loom'; +import {rollupPlugins} from '@shopify/loom-plugin-build-library'; +import replace from '@rollup/plugin-replace'; + +const packageJSON = JSON.parse( + readFileSync(resolve(__dirname, './package.json')).toString(), +); export default createPackage((pkg) => { pkg.entry({root: './src/index.ts'}); @@ -11,5 +19,15 @@ export default createPackage((pkg) => { name: 'customer-account', root: './src/surfaces/customer-account.ts', }); - pkg.use(defaultProjectPlugin()); + pkg.use( + defaultProjectPlugin(), + rollupPlugins([ + replace({ + values: { + __UI_EXTENSION_VERSION__: (packageJSON as any).version, + }, + preventAssignment: true, + }), + ]), + ); }); diff --git a/packages/ui-extensions/src/surfaces/admin/api/should-render/should-render.ts b/packages/ui-extensions/src/surfaces/admin/api/should-render/should-render.ts index 32726e7be..6b3f2a8b0 100644 --- a/packages/ui-extensions/src/surfaces/admin/api/should-render/should-render.ts +++ b/packages/ui-extensions/src/surfaces/admin/api/should-render/should-render.ts @@ -2,6 +2,10 @@ import type {StandardApi} from '../standard/standard'; import type {ExtensionTarget as AnyExtensionTarget} from '../../extension-targets'; import type {Data} from '../shared'; +export interface ShouldRenderOutput { + display: boolean; +} + export interface ShouldRenderApi extends StandardApi { /** diff --git a/packages/ui-extensions/src/surfaces/admin/components.ts b/packages/ui-extensions/src/surfaces/admin/components.ts index 2308539de..555a77ce1 100644 --- a/packages/ui-extensions/src/surfaces/admin/components.ts +++ b/packages/ui-extensions/src/surfaces/admin/components.ts @@ -1,75 +1,42 @@ -export {AdminAction} from './components/AdminAction/AdminAction'; export type {AdminActionProps} from './components/AdminAction/AdminAction'; -export {AdminPrintAction} from './components/AdminPrintAction/AdminPrintAction'; export type {AdminPrintActionProps} from './components/AdminPrintAction/AdminPrintAction'; -export {AdminBlock} from './components/AdminBlock/AdminBlock'; export type {AdminBlockProps} from './components/AdminBlock/AdminBlock'; -export {Badge} from './components/Badge/Badge'; export type {BadgeProps} from './components/Badge/Badge'; -export {Banner} from './components/Banner/Banner'; export type {BannerProps} from './components/Banner/Banner'; -export {BlockStack} from './components/BlockStack/BlockStack'; export type {BlockStackProps} from './components/BlockStack/BlockStack'; -export {Box} from './components/Box/Box'; export type {BoxProps} from './components/Box/Box'; -export {Button} from './components/Button/Button'; export type {ButtonProps} from './components/Button/Button'; -export {Checkbox} from './components/Checkbox/Checkbox'; export type {CheckboxProps} from './components/Checkbox/Checkbox'; -export {ChoiceList} from './components/ChoiceList/ChoiceList'; export type {ChoiceListProps} from './components/ChoiceList/ChoiceList'; -export {ColorPicker} from './components/ColorPicker/ColorPicker'; export type {ColorPickerProps} from './components/ColorPicker/ColorPicker'; -export {CustomerSegmentTemplate} from './components/CustomerSegmentTemplate/CustomerSegmentTemplate'; export type {CustomerSegmentTemplateProps} from './components/CustomerSegmentTemplate/CustomerSegmentTemplate'; -export {DateField} from './components/DateField/DateField'; export type {DateFieldProps} from './components/DateField/DateField'; -export {DatePicker} from './components/DatePicker/DatePicker'; export type {DatePickerProps} from './components/DatePicker/DatePicker'; -export {Divider} from './components/Divider/Divider'; export type {DividerProps} from './components/Divider/Divider'; -export {EmailField} from './components/EmailField/EmailField'; export type {EmailFieldProps} from './components/EmailField/EmailField'; -export {Form} from './components/Form/Form'; export type {FormProps} from './components/Form/Form'; -export {FunctionSettings} from './components/FunctionSettings/FunctionSettings'; export type { FunctionSettingsProps, FunctionSettingsError, } from './components/FunctionSettings/FunctionSettings'; -export {Heading} from './components/Heading/Heading'; export type {HeadingProps} from './components/Heading/Heading'; -export {HeadingGroup} from './components/HeadingGroup/HeadingGroup'; export type {HeadingGroupProps} from './components/HeadingGroup/HeadingGroup'; -export {Icon} from './components/Icon/Icon'; export type {IconProps} from './components/Icon/Icon'; -export {InlineStack} from './components/InlineStack/InlineStack'; export type {InlineStackProps} from './components/InlineStack/InlineStack'; -export {InternalCustomerSegmentTemplate} from './components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate'; export type { InternalCustomerSegmentTemplateProps, CustomerSegmentTemplateIcon, CustomerSegmentTemplateCategory, } from './components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate'; -export {Image} from './components/Image/Image'; export type {ImageProps} from './components/Image/Image'; -export {Link} from './components/Link/Link'; export type {LinkProps} from './components/Link/Link'; -export {MoneyField} from './components/MoneyField/MoneyField'; export type {MoneyFieldProps} from './components/MoneyField/MoneyField'; -export {NumberField} from './components/NumberField/NumberField'; export type {NumberFieldProps} from './components/NumberField/NumberField'; -export {Paragraph} from './components/Paragraph/Paragraph'; export type {ParagraphProps} from './components/Paragraph/Paragraph'; -export {PasswordField} from './components/PasswordField/PasswordField'; export type {PasswordFieldProps} from './components/PasswordField/PasswordField'; -export {Pressable} from './components/Pressable/Pressable'; export type {PressableProps} from './components/Pressable/Pressable'; -export {ProgressIndicator} from './components/ProgressIndicator/ProgressIndicator'; export type {ProgressIndicatorProps} from './components/ProgressIndicator/ProgressIndicator'; -export {Section} from './components/Section/Section'; export type {SectionProps} from './components/Section/Section'; -export {Select} from './components/Select/Select'; export type { OptionDescription, OptionGroupDescription, @@ -77,13 +44,8 @@ export type { OptionProps, SelectProps, } from './components/Select/Select'; -export {Text} from './components/Text/Text'; export type {TextProps} from './components/Text/Text'; -export {TextArea} from './components/TextArea/TextArea'; export type {TextAreaProps} from './components/TextArea/TextArea'; -export {TextField} from './components/TextField/TextField'; export type {TextFieldProps} from './components/TextField/TextField'; -export {URLField} from './components/URLField/URLField'; export type {URLFieldProps} from './components/URLField/URLField'; -export {InternalLocationList} from './components/InternalLocationList/InternalLocationList'; export type {InternalLocationListProps} from './components/InternalLocationList/InternalLocationList'; diff --git a/packages/ui-extensions/src/surfaces/admin/components/AdminAction/AdminAction.ts b/packages/ui-extensions/src/surfaces/admin/components/AdminAction/AdminAction.ts index 63503ffa9..15e022a93 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/AdminAction/AdminAction.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/AdminAction/AdminAction.ts @@ -1,4 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; import type {RemoteFragment} from '@remote-ui/core'; export interface AdminActionProps { @@ -22,10 +21,3 @@ export interface AdminActionProps { */ loading?: boolean; } -/** - * AdminAction is a component used by Admin Action extensions to configure a primary and secondary action and title. - */ -export const AdminAction = createRemoteComponent< - 'AdminAction', - AdminActionProps ->('AdminAction'); diff --git a/packages/ui-extensions/src/surfaces/admin/components/AdminBlock/AdminBlock.ts b/packages/ui-extensions/src/surfaces/admin/components/AdminBlock/AdminBlock.ts index 99561be92..549c15bfe 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/AdminBlock/AdminBlock.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/AdminBlock/AdminBlock.ts @@ -1,5 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; - export interface AdminBlockProps { /** * The title to display at the top of the app block. If not provided, the name of the extension will be used. Titles longer than 40 characters will be truncated. @@ -11,7 +9,3 @@ export interface AdminBlockProps { */ collapsedSummary?: string; } - -export const AdminBlock = createRemoteComponent<'AdminBlock', AdminBlockProps>( - 'AdminBlock', -); diff --git a/packages/ui-extensions/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts b/packages/ui-extensions/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts index 012892e6b..1f759cec9 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts @@ -1,5 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; - export interface AdminPrintActionProps { /** * Sets the src URL of the preview and the document to print. @@ -8,11 +6,3 @@ export interface AdminPrintActionProps { */ src?: string; } - -/** - * AdminPrintAction is a component used by Admin Print Action extensions to configure a src document to preview and print. - */ -export const AdminPrintAction = createRemoteComponent< - 'AdminPrintAction', - AdminPrintActionProps ->('AdminPrintAction'); diff --git a/packages/ui-extensions/src/surfaces/admin/components/Badge/Badge.ts b/packages/ui-extensions/src/surfaces/admin/components/Badge/Badge.ts index 079f7f2ef..26a478c85 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Badge/Badge.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Badge/Badge.ts @@ -1,4 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; import type {AccessibilityLabelProps, SizeScale, Tone} from '../shared'; import {IconName} from '../Icon/IconName'; @@ -32,5 +31,3 @@ interface BadgeNoIconProps { } export type BadgeProps = BadgeBaseProps & (BadgeIconProps | BadgeNoIconProps); - -export const Badge = createRemoteComponent<'Badge', BadgeProps>('Badge'); diff --git a/packages/ui-extensions/src/surfaces/admin/components/Banner/Banner.ts b/packages/ui-extensions/src/surfaces/admin/components/Banner/Banner.ts index 8a80cef02..94f6bef55 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Banner/Banner.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Banner/Banner.ts @@ -1,4 +1,4 @@ -import {RemoteFragment, createRemoteComponent} from '@remote-ui/core'; +import {RemoteFragment} from '@remote-ui/core'; import {GlobalProps, Tone} from '../shared'; export interface BannerProps extends GlobalProps { @@ -29,5 +29,3 @@ export interface BannerProps extends GlobalProps { */ secondaryAction?: RemoteFragment; } - -export const Banner = createRemoteComponent<'Banner', BannerProps>('Banner'); diff --git a/packages/ui-extensions/src/surfaces/admin/components/BlockStack/BlockStack.ts b/packages/ui-extensions/src/surfaces/admin/components/BlockStack/BlockStack.ts index 7f2772c60..08fb962c9 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/BlockStack/BlockStack.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/BlockStack/BlockStack.ts @@ -1,5 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; - import { AccessibilityRoleProps, GlobalProps, @@ -34,7 +32,3 @@ export interface BlockStackProps */ blockAlignment?: MainAxisAlignment; } - -export const BlockStack = createRemoteComponent<'BlockStack', BlockStackProps>( - 'BlockStack', -); diff --git a/packages/ui-extensions/src/surfaces/admin/components/Box/Box.ts b/packages/ui-extensions/src/surfaces/admin/components/Box/Box.ts index 007fc8581..b2873a14a 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Box/Box.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Box/Box.ts @@ -1,4 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; import type { AccessibilityRoleProps, PaddingProps, @@ -11,5 +10,3 @@ export interface BoxProps SizingProps, PaddingProps, DisplayProps {} - -export const Box = createRemoteComponent<'Box', BoxProps>('Box'); diff --git a/packages/ui-extensions/src/surfaces/admin/components/Button/Button.ts b/packages/ui-extensions/src/surfaces/admin/components/Button/Button.ts index e9537b20a..5ded050f7 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Button/Button.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Button/Button.ts @@ -1,4 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; import type {AccessibilityRole, AnchorProps} from '../shared'; export type ButtonProps = ButtonBaseProps | ButtonAnchorProps; @@ -115,5 +114,3 @@ interface ButtonAnchorProps extends CommonProps { */ onPress?: AnchorProps['onClick']; } - -export const Button = createRemoteComponent<'Button', ButtonProps>('Button'); diff --git a/packages/ui-extensions/src/surfaces/admin/components/Checkbox/Checkbox.ts b/packages/ui-extensions/src/surfaces/admin/components/Checkbox/Checkbox.ts index a3c825546..673f9a802 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Checkbox/Checkbox.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Checkbox/Checkbox.ts @@ -1,4 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; import {AccessibilityLabelProps} from '../shared'; export interface CheckboxProps extends AccessibilityLabelProps { @@ -52,7 +51,3 @@ export interface CheckboxProps extends AccessibilityLabelProps { */ value?: boolean; } - -export const Checkbox = createRemoteComponent<'Checkbox', CheckboxProps>( - 'Checkbox', -); diff --git a/packages/ui-extensions/src/surfaces/admin/components/ChoiceList/ChoiceList.ts b/packages/ui-extensions/src/surfaces/admin/components/ChoiceList/ChoiceList.ts index ec8fb2c07..ad35c0145 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/ChoiceList/ChoiceList.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/ChoiceList/ChoiceList.ts @@ -1,4 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; import {AccessibilityLabelProps, InputProps} from '../shared'; export interface ChoiceProps @@ -30,7 +29,3 @@ export interface ChoiceListProps */ multiple?: boolean; } - -export const ChoiceList = createRemoteComponent<'ChoiceList', ChoiceListProps>( - 'ChoiceList', -); diff --git a/packages/ui-extensions/src/surfaces/admin/components/ColorPicker/ColorPicker.ts b/packages/ui-extensions/src/surfaces/admin/components/ColorPicker/ColorPicker.ts index affe50ac8..b44222a01 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/ColorPicker/ColorPicker.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/ColorPicker/ColorPicker.ts @@ -1,5 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; - export interface ColorPickerProps { /** ID for the element. */ id?: string; @@ -36,8 +34,3 @@ export interface ColorPickerProps { */ value?: string; } - -export const ColorPicker = createRemoteComponent< - 'ColorPicker', - ColorPickerProps ->('ColorPicker'); diff --git a/packages/ui-extensions/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.ts b/packages/ui-extensions/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.ts index 8259c4b06..b1eafced7 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.ts @@ -1,5 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; - /** * Reserved namespace and key for the customer standard metafield used in the template's query. * More info - https://shopify.dev/docs/apps/custom-data/metafields/definitions/standard @@ -35,11 +33,3 @@ export interface CustomerSegmentTemplateProps { */ createdOn?: string; } - -/** - * Customer segmentation templates are used to give merchants a starting point to create segments. - */ -export const CustomerSegmentTemplate = createRemoteComponent< - 'CustomerSegmentTemplate', - CustomerSegmentTemplateProps ->('CustomerSegmentTemplate'); diff --git a/packages/ui-extensions/src/surfaces/admin/components/DateField/DateField.ts b/packages/ui-extensions/src/surfaces/admin/components/DateField/DateField.ts index 724367980..0a9a6485a 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/DateField/DateField.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/DateField/DateField.ts @@ -1,4 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; import type {DatePickerProps} from '../DatePicker/DatePicker'; import type {TextFieldProps} from '../TextField/TextField'; @@ -20,7 +19,3 @@ export interface DateFieldProps DatePickerProps, 'yearMonth' | 'defaultYearMonth' | 'disabled' | 'onYearMonthChange' > {} - -export const DateField = createRemoteComponent<'DateField', DateFieldProps>( - 'DateField', -); diff --git a/packages/ui-extensions/src/surfaces/admin/components/DatePicker/DatePicker.ts b/packages/ui-extensions/src/surfaces/admin/components/DatePicker/DatePicker.ts index d01060c49..c54d03986 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/DatePicker/DatePicker.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/DatePicker/DatePicker.ts @@ -1,5 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; - export interface DatePickerProps { /** * [Controlled](https://reactjs.org/docs/forms.html#controlled-components) year and month to display. @@ -93,8 +91,3 @@ export interface Range { */ end?: DateString; } - -export const DatePicker = createRemoteComponent< - 'DatePicker', - DatePickerProps ->('DatePicker'); diff --git a/packages/ui-extensions/src/surfaces/admin/components/Divider/Divider.ts b/packages/ui-extensions/src/surfaces/admin/components/Divider/Divider.ts index 586fd4f88..9ac3ea593 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Divider/Divider.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Divider/Divider.ts @@ -1,5 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; - export interface DividerProps { /** * Specify the direction of the divider. @@ -9,7 +7,3 @@ export interface DividerProps { */ direction?: 'inline' | 'block'; } - -export const Divider = createRemoteComponent<'Divider', DividerProps>( - 'Divider', -); diff --git a/packages/ui-extensions/src/surfaces/admin/components/EmailField/EmailField.ts b/packages/ui-extensions/src/surfaces/admin/components/EmailField/EmailField.ts index ebaa5a067..f98253529 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/EmailField/EmailField.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/EmailField/EmailField.ts @@ -1,4 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; import { AutocompleteProps, AnyAutocompleteField, @@ -16,7 +15,3 @@ export type EmailAutocompleteField = Extract< AnyAutocompleteField, 'email' | `${AutocompleteAddressGroup} email` >; - -export const EmailField = createRemoteComponent<'EmailField', EmailFieldProps>( - 'EmailField', -); diff --git a/packages/ui-extensions/src/surfaces/admin/components/Form/Form.ts b/packages/ui-extensions/src/surfaces/admin/components/Form/Form.ts index b5a846bdc..16aa8ad11 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Form/Form.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Form/Form.ts @@ -1,5 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; - export interface FormProps { /** * A unique identifier for the form. @@ -16,5 +14,3 @@ export interface FormProps { */ onReset(): void | Promise; } - -export const Form = createRemoteComponent<'Form', FormProps>('Form'); diff --git a/packages/ui-extensions/src/surfaces/admin/components/FunctionSettings/FunctionSettings.ts b/packages/ui-extensions/src/surfaces/admin/components/FunctionSettings/FunctionSettings.ts index 6c65f5121..729f9e26e 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/FunctionSettings/FunctionSettings.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/FunctionSettings/FunctionSettings.ts @@ -1,5 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; - export interface FunctionSettingsProps { /** * A unique identifier for the form. @@ -45,8 +43,3 @@ export interface FunctionSettingsError { */ message: string; } - -export const FunctionSettings = createRemoteComponent< - 'FunctionSettings', - FunctionSettingsProps ->('FunctionSettings'); diff --git a/packages/ui-extensions/src/surfaces/admin/components/Heading/Heading.ts b/packages/ui-extensions/src/surfaces/admin/components/Heading/Heading.ts index f4d25bd23..ea373ad81 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Heading/Heading.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Heading/Heading.ts @@ -1,5 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; - type Level = 1 | 2 | 3 | 4 | 5 | 6; export interface HeadingProps { @@ -14,7 +12,3 @@ export interface HeadingProps { */ size?: Level; } - -export const Heading = createRemoteComponent<'Heading', HeadingProps>( - 'Heading', -); diff --git a/packages/ui-extensions/src/surfaces/admin/components/HeadingGroup/HeadingGroup.ts b/packages/ui-extensions/src/surfaces/admin/components/HeadingGroup/HeadingGroup.ts index 5e6df3cd9..0560c4173 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/HeadingGroup/HeadingGroup.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/HeadingGroup/HeadingGroup.ts @@ -1,8 +1 @@ -import {createRemoteComponent} from '@remote-ui/core'; - export interface HeadingGroupProps {} - -export const HeadingGroup = createRemoteComponent< - 'HeadingGroup', - HeadingGroupProps ->('HeadingGroup'); diff --git a/packages/ui-extensions/src/surfaces/admin/components/Icon/Icon.ts b/packages/ui-extensions/src/surfaces/admin/components/Icon/Icon.ts index be16b9218..ff5db53b2 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Icon/Icon.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Icon/Icon.ts @@ -1,4 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; import {IconName} from './IconName'; import {AccessibilityLabelProps} from '../shared'; @@ -34,5 +33,3 @@ export interface IconProps extends AccessibilityLabelProps { name: IconName; } export type {IconName}; - -export const Icon = createRemoteComponent<'Icon', IconProps>('Icon'); diff --git a/packages/ui-extensions/src/surfaces/admin/components/Image/Image.ts b/packages/ui-extensions/src/surfaces/admin/components/Image/Image.ts index fb23c40f5..31423f39b 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Image/Image.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Image/Image.ts @@ -1,4 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; import type {AccessibilityRole} from '../shared'; export type ImageProps = (ImageAccessibilityLabelProp | ImageAltProp) & @@ -119,5 +118,3 @@ interface ImageSourceProp { source: string; src?: never; } - -export const Image = createRemoteComponent<'Image', ImageProps>('Image'); diff --git a/packages/ui-extensions/src/surfaces/admin/components/InlineStack/InlineStack.ts b/packages/ui-extensions/src/surfaces/admin/components/InlineStack/InlineStack.ts index d46b9d610..49801cf83 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/InlineStack/InlineStack.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/InlineStack/InlineStack.ts @@ -1,5 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; - import { AccessibilityRoleProps, GlobalProps, @@ -32,8 +30,3 @@ export interface InlineStackProps */ blockAlignment?: CrossAxisAlignment; } - -export const InlineStack = createRemoteComponent< - 'InlineStack', - InlineStackProps ->('InlineStack'); diff --git a/packages/ui-extensions/src/surfaces/admin/components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts b/packages/ui-extensions/src/surfaces/admin/components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts index cf3643d34..66297d13f 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts @@ -1,5 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; - export type CustomerSegmentTemplateIcon = | 'categoriesMajor' | 'firstVisitMajor' @@ -59,11 +57,3 @@ export interface InternalCustomerSegmentTemplateProps { /* The category in which the template will be visible. The template will show in its respective category and aggregate sections. */ category: CustomerSegmentTemplateCategory; } - -/** - * Customer segment templates are used to give merchants a starting point to create segments. - */ -export const InternalCustomerSegmentTemplate = createRemoteComponent< - 'InternalCustomerSegmentTemplate', - InternalCustomerSegmentTemplateProps ->('InternalCustomerSegmentTemplate'); diff --git a/packages/ui-extensions/src/surfaces/admin/components/InternalLocationList/InternalLocationList.ts b/packages/ui-extensions/src/surfaces/admin/components/InternalLocationList/InternalLocationList.ts index 2bfd67d97..e01cf7c44 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/InternalLocationList/InternalLocationList.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/InternalLocationList/InternalLocationList.ts @@ -1,5 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; - export interface Location { /** * A unique identifier for the location. @@ -69,8 +67,3 @@ export interface InternalLocationListProps { */ onCreateGroup: (id: string) => void; } - -export const InternalLocationList = createRemoteComponent< - 'InternalLocationList', - InternalLocationListProps ->('InternalLocationList'); diff --git a/packages/ui-extensions/src/surfaces/admin/components/Link/Link.ts b/packages/ui-extensions/src/surfaces/admin/components/Link/Link.ts index 52aa75188..3a33f8fa0 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Link/Link.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Link/Link.ts @@ -1,4 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; import {AccessibilityLabelProps} from '../shared'; export interface LinkProps extends AccessibilityLabelProps { @@ -59,5 +58,3 @@ export interface LinkProps extends AccessibilityLabelProps { */ target?: '_blank' | '_self'; } - -export const Link = createRemoteComponent<'Link', LinkProps>('Link'); diff --git a/packages/ui-extensions/src/surfaces/admin/components/MoneyField/MoneyField.ts b/packages/ui-extensions/src/surfaces/admin/components/MoneyField/MoneyField.ts index aa9f9a8c3..f208b09c1 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/MoneyField/MoneyField.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/MoneyField/MoneyField.ts @@ -1,4 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; import type { AutocompleteProps, AnyAutocompleteField, @@ -19,10 +18,6 @@ export type MoneyAutocompleteField = Extract< 'transaction-amount' >; -export const MoneyField = createRemoteComponent<'MoneyField', MoneyFieldProps>( - 'MoneyField', -); - /** * Supported monetary currencies from ISO 4217. * diff --git a/packages/ui-extensions/src/surfaces/admin/components/NumberField/NumberField.ts b/packages/ui-extensions/src/surfaces/admin/components/NumberField/NumberField.ts index 0690bc86a..d106a8c97 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/NumberField/NumberField.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/NumberField/NumberField.ts @@ -1,4 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; import { AutocompleteProps, AnyAutocompleteField, @@ -28,8 +27,3 @@ export type NumberAutocompleteField = Extract< | `${AutocompleteFieldCreditCardAlias}-number` | `${AutocompleteFieldCreditCardAlias}-${AutocompleteFieldSecurityCodeAlias}` >; - -export const NumberField = createRemoteComponent< - 'NumberField', - NumberFieldProps ->('NumberField'); diff --git a/packages/ui-extensions/src/surfaces/admin/components/Paragraph/Paragraph.ts b/packages/ui-extensions/src/surfaces/admin/components/Paragraph/Paragraph.ts index 1acc8cdeb..419f14d4a 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Paragraph/Paragraph.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Paragraph/Paragraph.ts @@ -1,10 +1,5 @@ -import {createRemoteComponent} from '@remote-ui/core'; import type {BaseTypographyProps, GlobalProps} from '../shared'; export interface ParagraphProps extends BaseTypographyProps, GlobalProps { children?: any; } - -export const Paragraph = createRemoteComponent<'Paragraph', ParagraphProps>( - 'Paragraph', -); diff --git a/packages/ui-extensions/src/surfaces/admin/components/PasswordField/PasswordField.ts b/packages/ui-extensions/src/surfaces/admin/components/PasswordField/PasswordField.ts index d7aa8d59a..69b774835 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/PasswordField/PasswordField.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/PasswordField/PasswordField.ts @@ -1,4 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; import { AutocompleteProps, AnyAutocompleteField, @@ -15,8 +14,3 @@ export type PasswordAutocompleteField = Extract< AnyAutocompleteField, 'new-password' | 'current-password' >; - -export const PasswordField = createRemoteComponent< - 'PasswordField', - PasswordFieldProps ->('PasswordField'); diff --git a/packages/ui-extensions/src/surfaces/admin/components/Pressable/Pressable.ts b/packages/ui-extensions/src/surfaces/admin/components/Pressable/Pressable.ts index 9d356131d..3e3646763 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Pressable/Pressable.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Pressable/Pressable.ts @@ -1,9 +1,4 @@ -import {createRemoteComponent} from '@remote-ui/core'; import type {LinkProps} from '../Link/Link'; import type {BoxProps} from '../Box/Box'; export interface PressableProps extends BoxProps, LinkProps {} - -export const Pressable = createRemoteComponent<'Pressable', PressableProps>( - 'Pressable', -); diff --git a/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts b/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts index a077bac6b..d4c25706a 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts @@ -1,4 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; import {GlobalProps, SizeScale, AccessibilityLabelProps} from '../shared'; export interface ProgressIndicatorProps @@ -25,8 +24,3 @@ export interface ProgressIndicatorProps */ variant?: 'spinner'; } - -export const ProgressIndicator = createRemoteComponent< - 'ProgressIndicator', - ProgressIndicatorProps ->('ProgressIndicator'); diff --git a/packages/ui-extensions/src/surfaces/admin/components/Section/Section.ts b/packages/ui-extensions/src/surfaces/admin/components/Section/Section.ts index a650a703b..c0151b7a8 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Section/Section.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Section/Section.ts @@ -1,5 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; - export interface SectionProps { /** * A label used to describe the section that will be announced by assistive technologies. @@ -29,7 +27,3 @@ export interface SectionProps { */ padding?: 'base' | 'none'; } - -export const Section = createRemoteComponent<'Section', SectionProps>( - 'Section', -); diff --git a/packages/ui-extensions/src/surfaces/admin/components/Select/Select.ts b/packages/ui-extensions/src/surfaces/admin/components/Select/Select.ts index 0b86aa708..0703a70b9 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Select/Select.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Select/Select.ts @@ -1,5 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; - export interface SelectProps { /** * Whether the select can be changed. @@ -143,5 +141,3 @@ export interface OptionGroupDescription { */ options?: OptionDescription[]; } - -export const Select = createRemoteComponent<'Select', SelectProps>('Select'); diff --git a/packages/ui-extensions/src/surfaces/admin/components/Text/Text.ts b/packages/ui-extensions/src/surfaces/admin/components/Text/Text.ts index 93b0ae9f5..42b19d273 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/Text/Text.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/Text/Text.ts @@ -1,4 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; import type { FontWeight, TextOverflow, @@ -41,5 +40,3 @@ export interface TextProps { */ accessibilityRole?: TextAccessibilityRole; } - -export const Text = createRemoteComponent<'Text', TextProps>('Text'); diff --git a/packages/ui-extensions/src/surfaces/admin/components/TextArea/TextArea.ts b/packages/ui-extensions/src/surfaces/admin/components/TextArea/TextArea.ts index 48fc725e9..f0456fe43 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/TextArea/TextArea.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/TextArea/TextArea.ts @@ -1,5 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; - import { AutocompleteProps, TextAutocompleteField, @@ -18,7 +16,3 @@ export interface TextAreaProps */ rows?: number; } - -export const TextArea = createRemoteComponent<'TextArea', TextAreaProps>( - 'TextArea', -); diff --git a/packages/ui-extensions/src/surfaces/admin/components/TextField/TextField.ts b/packages/ui-extensions/src/surfaces/admin/components/TextField/TextField.ts index 0e3e8610a..802dcfa71 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/TextField/TextField.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/TextField/TextField.ts @@ -1,4 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; import { AutocompleteProps, TextAutocompleteField, @@ -12,7 +11,3 @@ export interface TextFieldProps MinMaxLengthProps, AutocompleteProps, FieldDecorationProps {} - -export const TextField = createRemoteComponent<'TextField', TextFieldProps>( - 'TextField', -); diff --git a/packages/ui-extensions/src/surfaces/admin/components/URLField/URLField.ts b/packages/ui-extensions/src/surfaces/admin/components/URLField/URLField.ts index ba3e06347..8c4939e52 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/URLField/URLField.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/URLField/URLField.ts @@ -1,4 +1,3 @@ -import {createRemoteComponent} from '@remote-ui/core'; import { AnyAutocompleteField, AutocompleteProps, @@ -20,7 +19,3 @@ export type URLAutocompleteField = Extract< | `${AutocompleteFieldInstantMessageAlias}` | `${AutocompleteAddressGroup} ${AutocompleteFieldInstantMessageAlias}` >; - -export const URLField = createRemoteComponent<'URLField', URLFieldProps>( - 'URLField', -); diff --git a/packages/ui-extensions/src/surfaces/admin/extension-targets.ts b/packages/ui-extensions/src/surfaces/admin/extension-targets.ts index 514ebaaea..f0190b4b2 100644 --- a/packages/ui-extensions/src/surfaces/admin/extension-targets.ts +++ b/packages/ui-extensions/src/surfaces/admin/extension-targets.ts @@ -1,6 +1,6 @@ -import type {RenderExtension, RunnableExtension} from '../../extension'; +import type {RenderExtension} from './extension'; +import type {RunnableExtension} from '../../extension'; -import type {Components} from './shared'; import type { StandardApi, CustomerSegmentTemplateApi, @@ -12,64 +12,22 @@ import type { OrderRoutingRuleApi, ValidationSettingsApi, } from './api'; -import {AnyComponentBuilder} from '../../shared'; -import {ShouldRenderApi} from './api/should-render/should-render'; - -interface ShouldRenderOutput { - display: boolean; -} - -type CustomerSegmentTemplateComponent = AnyComponentBuilder< - Pick< - Components, - 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' - > ->; - -type ProductConfigurationComponents = AnyComponentBuilder< - Pick< - Components, - | 'Box' - | 'InlineStack' - | 'BlockStack' - | 'Divider' - | 'HeadingGroup' - | 'Heading' - | 'Text' - | 'Link' - | 'Image' - | 'Icon' - > ->; - -type OrderRoutingComponents = AnyComponentBuilder< - Pick ->; - -/** - * See the [list of available components](/docs/api/admin-extensions/components). - */ -type AllComponents = AnyComponentBuilder< - Omit< - Components, - | 'CustomerSegmentTemplate' - | 'InternalCustomerSegmentTemplate' - | 'InternalLocationList' - > ->; +import { + ShouldRenderApi, + ShouldRenderOutput, +} from './api/should-render/should-render'; export interface ExtensionTargets { /** * @private */ - Playground: RenderExtension, AllComponents>; + Playground: RenderExtension>; /** * Renders a [`CustomerSegmentTemplate`](/docs/api/admin-extensions/components/customersegmenttemplate) in the [customer segment editor](https://help.shopify.com/en/manual/customers/customer-segmentation/customer-segments). */ 'admin.customers.segmentation-templates.render': RenderExtension< - CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.render'>, - CustomerSegmentTemplateComponent + CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.render'> >; // Blocks @@ -79,8 +37,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.product-details.block.render': RenderExtension< - BlockExtensionApi<'admin.product-details.block.render'>, - AllComponents + BlockExtensionApi<'admin.product-details.block.render'> >; /** @@ -89,8 +46,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.order-details.block.render': RenderExtension< - BlockExtensionApi<'admin.order-details.block.render'>, - AllComponents + BlockExtensionApi<'admin.order-details.block.render'> >; /** @@ -99,8 +55,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.discount-details.function-settings.render': RenderExtension< - BlockExtensionApi<'admin.discount-details.function-settings.render'>, - AllComponents + BlockExtensionApi<'admin.discount-details.function-settings.render'> >; /** @@ -109,8 +64,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.customer-details.block.render': RenderExtension< - BlockExtensionApi<'admin.customer-details.block.render'>, - AllComponents + BlockExtensionApi<'admin.customer-details.block.render'> >; /** @@ -119,8 +73,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.collection-details.block.render': RenderExtension< - BlockExtensionApi<'admin.collection-details.block.render'>, - AllComponents + BlockExtensionApi<'admin.collection-details.block.render'> >; /** @@ -129,8 +82,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.draft-order-details.block.render': RenderExtension< - BlockExtensionApi<'admin.draft-order-details.block.render'>, - AllComponents + BlockExtensionApi<'admin.draft-order-details.block.render'> >; /** @@ -139,8 +91,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.abandoned-checkout-details.block.render': RenderExtension< - BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>, - AllComponents + BlockExtensionApi<'admin.abandoned-checkout-details.block.render'> >; /** @@ -149,8 +100,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.catalog-details.block.render': RenderExtension< - BlockExtensionApi<'admin.catalog-details.block.render'>, - AllComponents + BlockExtensionApi<'admin.catalog-details.block.render'> >; /** @@ -159,8 +109,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.company-details.block.render': RenderExtension< - BlockExtensionApi<'admin.company-details.block.render'>, - AllComponents + BlockExtensionApi<'admin.company-details.block.render'> >; /** @@ -169,8 +118,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.company-location-details.block.render': RenderExtension< - BlockExtensionApi<'admin.company-location-details.block.render'>, - AllComponents + BlockExtensionApi<'admin.company-location-details.block.render'> >; /** @@ -179,8 +127,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.gift-card-details.block.render': RenderExtension< - BlockExtensionApi<'admin.gift-card-details.block.render'>, - AllComponents + BlockExtensionApi<'admin.gift-card-details.block.render'> >; /** @@ -189,8 +136,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.product-variant-details.block.render': RenderExtension< - BlockExtensionApi<'admin.product-variant-details.block.render'>, - AllComponents + BlockExtensionApi<'admin.product-variant-details.block.render'> >; /** @@ -199,8 +145,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.product-details.reorder.render': RenderExtension< - BlockExtensionApi<'admin.product-details.reorder.render'>, - AllComponents + BlockExtensionApi<'admin.product-details.reorder.render'> >; // Actions @@ -210,8 +155,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.product-details.action.render': RenderExtension< - ActionExtensionApi<'admin.product-details.action.render'>, - AllComponents + ActionExtensionApi<'admin.product-details.action.render'> >; /** @@ -220,8 +164,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.catalog-details.action.render': RenderExtension< - ActionExtensionApi<'admin.catalog-details.action.render'>, - AllComponents + ActionExtensionApi<'admin.catalog-details.action.render'> >; /** @@ -230,8 +173,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.company-details.action.render': RenderExtension< - ActionExtensionApi<'admin.company-details.action.render'>, - AllComponents + ActionExtensionApi<'admin.company-details.action.render'> >; /** @@ -240,8 +182,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.gift-card-details.action.render': RenderExtension< - ActionExtensionApi<'admin.gift-card-details.action.render'>, - AllComponents + ActionExtensionApi<'admin.gift-card-details.action.render'> >; /** @@ -250,8 +191,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.order-details.action.render': RenderExtension< - ActionExtensionApi<'admin.order-details.action.render'>, - AllComponents + ActionExtensionApi<'admin.order-details.action.render'> >; /** @@ -260,8 +200,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.customer-details.action.render': RenderExtension< - ActionExtensionApi<'admin.customer-details.action.render'>, - AllComponents + ActionExtensionApi<'admin.customer-details.action.render'> >; /** @@ -270,8 +209,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.customer-segment-details.action.render': RenderExtension< - ActionExtensionApi<'admin.customer-segment-details.action.render'>, - AllComponents + ActionExtensionApi<'admin.customer-segment-details.action.render'> >; /** @@ -280,8 +218,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.product-index.action.render': RenderExtension< - ActionExtensionApi<'admin.product-index.action.render'>, - AllComponents + ActionExtensionApi<'admin.product-index.action.render'> >; /** @@ -290,8 +227,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.order-index.action.render': RenderExtension< - ActionExtensionApi<'admin.order-index.action.render'>, - AllComponents + ActionExtensionApi<'admin.order-index.action.render'> >; /** @@ -300,8 +236,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.customer-index.action.render': RenderExtension< - ActionExtensionApi<'admin.customer-index.action.render'>, - AllComponents + ActionExtensionApi<'admin.customer-index.action.render'> >; /** @@ -310,8 +245,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.discount-index.action.render': RenderExtension< - ActionExtensionApi<'admin.discount-index.action.render'>, - AllComponents + ActionExtensionApi<'admin.discount-index.action.render'> >; /** @@ -320,8 +254,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.collection-details.action.render': RenderExtension< - ActionExtensionApi<'admin.collection-details.action.render'>, - AllComponents + ActionExtensionApi<'admin.collection-details.action.render'> >; /** @@ -330,8 +263,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.collection-index.action.render': RenderExtension< - ActionExtensionApi<'admin.collection-index.action.render'>, - AllComponents + ActionExtensionApi<'admin.collection-index.action.render'> >; /** @@ -340,8 +272,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.abandoned-checkout-details.action.render': RenderExtension< - ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>, - AllComponents + ActionExtensionApi<'admin.abandoned-checkout-details.action.render'> >; /** @@ -350,8 +281,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.product-variant-details.action.render': RenderExtension< - ActionExtensionApi<'admin.product-variant-details.action.render'>, - AllComponents + ActionExtensionApi<'admin.product-variant-details.action.render'> >; /** @@ -360,8 +290,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.draft-order-details.action.render': RenderExtension< - ActionExtensionApi<'admin.draft-order-details.action.render'>, - AllComponents + ActionExtensionApi<'admin.draft-order-details.action.render'> >; /** @@ -370,8 +299,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.draft-order-index.action.render': RenderExtension< - ActionExtensionApi<'admin.draft-order-index.action.render'>, - AllComponents + ActionExtensionApi<'admin.draft-order-index.action.render'> >; /** @@ -380,8 +308,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.discount-details.action.render': RenderExtension< - ActionExtensionApi<'admin.discount-details.action.render'>, - AllComponents + ActionExtensionApi<'admin.discount-details.action.render'> >; /** @@ -391,8 +318,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.order-fulfilled-card.action.render': RenderExtension< - ActionExtensionApi<'admin.order-fulfilled-card.action.render'>, - AllComponents + ActionExtensionApi<'admin.order-fulfilled-card.action.render'> >; // Bulk Actions @@ -403,8 +329,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.product-index.selection-action.render': RenderExtension< - ActionExtensionApi<'admin.product-index.selection-action.render'>, - AllComponents + ActionExtensionApi<'admin.product-index.selection-action.render'> >; /** @@ -413,8 +338,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.order-index.selection-action.render': RenderExtension< - ActionExtensionApi<'admin.order-index.selection-action.render'>, - AllComponents + ActionExtensionApi<'admin.order-index.selection-action.render'> >; /** @@ -423,8 +347,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.customer-index.selection-action.render': RenderExtension< - ActionExtensionApi<'admin.customer-index.selection-action.render'>, - AllComponents + ActionExtensionApi<'admin.customer-index.selection-action.render'> >; /** @@ -433,8 +356,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.draft-order-index.selection-action.render': RenderExtension< - ActionExtensionApi<'admin.draft-order-index.selection-action.render'>, - AllComponents + ActionExtensionApi<'admin.draft-order-index.selection-action.render'> >; // Print actions and bulk print actions @@ -445,8 +367,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.order-details.print-action.render': RenderExtension< - PrintActionExtensionApi<'admin.order-details.print-action.render'>, - AllComponents + PrintActionExtensionApi<'admin.order-details.print-action.render'> >; /** @@ -455,8 +376,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.product-details.print-action.render': RenderExtension< - PrintActionExtensionApi<'admin.product-details.print-action.render'>, - AllComponents + PrintActionExtensionApi<'admin.product-details.print-action.render'> >; /** @@ -465,8 +385,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.order-index.selection-print-action.render': RenderExtension< - PrintActionExtensionApi<'admin.order-index.selection-print-action.render'>, - AllComponents + PrintActionExtensionApi<'admin.order-index.selection-print-action.render'> >; /** @@ -475,8 +394,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.product-index.selection-print-action.render': RenderExtension< - PrintActionExtensionApi<'admin.product-index.selection-print-action.render'>, - AllComponents + PrintActionExtensionApi<'admin.product-index.selection-print-action.render'> >; // Other @@ -487,8 +405,7 @@ export interface ExtensionTargets { * See the [tutorial](/docs/apps/selling-strategies/bundles/product-config) for more information */ 'admin.product-details.configuration.render': RenderExtension< - ProductDetailsConfigurationApi<'admin.product-details.configuration.render'>, - ProductConfigurationComponents + ProductDetailsConfigurationApi<'admin.product-details.configuration.render'> >; /** @@ -497,8 +414,7 @@ export interface ExtensionTargets { * See the [tutorial](/docs/apps/selling-strategies/bundles/product-config) for more information */ 'admin.product-variant-details.configuration.render': RenderExtension< - ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'>, - ProductConfigurationComponents + ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'> >; /** @@ -507,12 +423,10 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.settings.internal-order-routing-rule.render': RenderExtension< - OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>, - AllComponents | OrderRoutingComponents + OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'> >; 'admin.settings.order-routing-rule.render': RenderExtension< - OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>, - AllComponents + OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'> >; /** @@ -521,8 +435,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.settings.validation.render': RenderExtension< - ValidationSettingsApi<'admin.settings.validation.render'>, - AllComponents + ValidationSettingsApi<'admin.settings.validation.render'> >; // Admin action shouldRender targets @@ -774,10 +687,7 @@ export type ArgumentsForExtension = * UI. */ export type RenderExtensionTarget = { - [ID in keyof ExtensionTargets]: ExtensionTargets[ID] extends RenderExtension< - any, - any - > + [ID in keyof ExtensionTargets]: ExtensionTargets[ID] extends RenderExtension ? ID : never; }[keyof ExtensionTargets]; @@ -789,16 +699,10 @@ export type RenderExtensions = { [ID in RenderExtensionTarget]: ExtensionTargets[ID]; }; -type ExtractedApiFromRenderExtension = T extends RenderExtension< - infer Api, - any -> +type ExtractedApiFromRenderExtension = T extends RenderExtension ? Api : never; -type ExtractedAllowedComponentsFromRenderExtension = - T extends RenderExtension ? Components : never; - /** * For a given rendering extension target, returns the type of the API that the * extension will receive at runtime. This API type is the second argument to @@ -807,11 +711,3 @@ type ExtractedAllowedComponentsFromRenderExtension = */ export type ApiForRenderExtension = ExtractedApiFromRenderExtension; - -/** - * For a given rendering extension target, returns the UI components that the - * extension target supports. - */ -export type AllowedComponentsForRenderExtension< - ID extends keyof RenderExtensions, -> = ExtractedAllowedComponentsFromRenderExtension; diff --git a/packages/ui-extensions/src/surfaces/admin/extension.ts b/packages/ui-extensions/src/surfaces/admin/extension.ts index f93c50ced..75b5bf996 100644 --- a/packages/ui-extensions/src/surfaces/admin/extension.ts +++ b/packages/ui-extensions/src/surfaces/admin/extension.ts @@ -1,8 +1,11 @@ -import {createExtensionRegistrationFunction} from '../../utilities/registration'; +import {createExtensionRegistrationFunction} from '../../utilities/remoteDomRegistration'; import type {ExtensionTargets} from './extension-targets'; -export * from '../../extension'; +export type { + RenderExtension, + ExtensionRegistrationFunctionWithRoot, +} from '../../utilities/remoteDomRegistration'; export const extension = createExtensionRegistrationFunction(); diff --git a/packages/ui-extensions/src/surfaces/admin/globals.ts b/packages/ui-extensions/src/surfaces/admin/globals.ts index 5efca7c36..2ceb2ed83 100644 --- a/packages/ui-extensions/src/surfaces/admin/globals.ts +++ b/packages/ui-extensions/src/surfaces/admin/globals.ts @@ -2,8 +2,9 @@ import type {ExtensionTargets} from './extension-targets'; export interface ShopifyGlobal { extend( - extension: ExtensionTarget, + target: ExtensionTarget, extend: ExtensionTargets[ExtensionTarget], + version?: string, ): void; } diff --git a/packages/ui-extensions/src/utilities/remoteDomRegistration.ts b/packages/ui-extensions/src/utilities/remoteDomRegistration.ts new file mode 100644 index 000000000..8e8f7edde --- /dev/null +++ b/packages/ui-extensions/src/utilities/remoteDomRegistration.ts @@ -0,0 +1,61 @@ +export interface RenderExtension { + (root: HTMLElement, api: Api): + | (void | (() => void)) + | Promise void)>; +} + +export interface ExtensionRegistrationFunction { + ( + target: Target, + implementation: ExtensionTargets[Target], + ): ExtensionTargets[Target]; +} + +export interface ExtensionRegistrationFunctionWithRoot { + ( + target: Target, + implementation: ExtensionTargets[Target], + ): ExtensionTargets[Target]; +} + +/** + * This function returns a type-safe registration function for rendering and non-rendering extensions. + */ +export function createExtensionRegistrationFunction< + ExtensionTargets, +>(): ExtensionRegistrationFunctionWithRoot { + const extensionWrapper: ExtensionRegistrationFunctionWithRoot< + ExtensionTargets + > = (target, implementation) => { + async function extension(...args: any[]) { + if (args.length === 1) { + return (implementation as any)(...args); + } + + const [root, api] = args as [HTMLElement, any]; + + // Rendering extensions have two arguments and return a clean up function. + let renderResult = (implementation as any)(root, api); + + if ( + typeof renderResult === 'object' && + renderResult != null && + 'then' in renderResult + ) { + renderResult = await renderResult; + } + // Return a noop if no clean up function was returned + return typeof renderResult === 'function' ? renderResult : () => {}; + } + + (globalThis as any).shopify?.extend( + target, + extension, + '@ui_extension_version:__UI_EXTENSION_VERSION__@', + ); + + return extension as any; + }; + + return extensionWrapper; +} diff --git a/yarn.lock b/yarn.lock index f33e6be4a..5ca1799ed 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1710,6 +1710,11 @@ resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz" integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg== +"@jridgewell/sourcemap-codec@^1.5.0": + version "1.5.0" + resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a" + integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ== + "@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25": version "0.3.25" resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz" @@ -1844,6 +1849,14 @@ is-module "^1.0.0" resolve "^1.19.0" +"@rollup/plugin-replace@^6.0.1": + version "6.0.1" + resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-6.0.1.tgz#547e238f7db994ebe63dd5329ec46ffccf696029" + integrity sha512-2sPh9b73dj5IxuMmDAsQWVFT7mR+yoHweBaXG2W/R8vQ+IWZlnaI7BR7J6EguVQUp1hd8Z7XuozpDjEKQAAC2Q== + dependencies: + "@rollup/pluginutils" "^5.0.1" + magic-string "^0.30.3" + "@rollup/pluginutils@^3.1.0": version "3.1.0" resolved "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz" @@ -1853,6 +1866,15 @@ estree-walker "^1.0.1" picomatch "^2.2.2" +"@rollup/pluginutils@^5.0.1": + version "5.1.2" + resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.2.tgz#d3bc9f0fea4fd4086aaac6aa102f3fa587ce8bd9" + integrity sha512-/FIdS3PyZ39bjZlwqFnWqCOVnW7o963LtKMwQOD0NhQqw22gSr2YY1afu3FxRip4ZCZNsD5jq6Aaz6QV3D/Njw== + dependencies: + "@types/estree" "^1.0.0" + estree-walker "^2.0.2" + picomatch "^2.3.1" + "@shopify/babel-preset@^24.1.0", "@shopify/babel-preset@^24.1.4": version "24.1.5" resolved "https://registry.npmjs.org/@shopify/babel-preset/-/babel-preset-24.1.5.tgz" @@ -2081,6 +2103,11 @@ resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz" integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw== +"@types/estree@^1.0.0": + version "1.0.6" + resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50" + integrity sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw== + "@types/fs-extra@^9.0.0": version "9.0.13" resolved "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-9.0.13.tgz" @@ -2170,6 +2197,13 @@ resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz" integrity sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q== +"@types/react-dom@>=18.2.67": + version "18.3.1" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.1.tgz#1e4654c08a9cdcfb6594c780ac59b55aad42fe07" + integrity sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ== + 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" @@ -3762,7 +3796,7 @@ estree-walker@^1.0.1: resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz" integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg== -estree-walker@^2.0.1: +estree-walker@^2.0.1, estree-walker@^2.0.2: version "2.0.2" resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz" integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w== @@ -5368,6 +5402,13 @@ magic-string@^0.25.7: dependencies: sourcemap-codec "^1.4.8" +magic-string@^0.30.3: + version "0.30.12" + resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.12.tgz#9eb11c9d072b9bcb4940a5b2c2e1a217e4ee1a60" + integrity sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw== + dependencies: + "@jridgewell/sourcemap-codec" "^1.5.0" + make-dir@^2.0.0, make-dir@^2.1.0: version "2.1.0" resolved "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz"