diff --git a/.changeset/afraid-ladybugs-begin.md b/.changeset/afraid-ladybugs-begin.md new file mode 100644 index 0000000000..8be1013aee --- /dev/null +++ b/.changeset/afraid-ladybugs-begin.md @@ -0,0 +1,5 @@ +--- +'@shopify/ui-extensions-react': minor +--- + +Adds support for async render functions for Admin extensions diff --git a/packages/ui-extensions-react/src/surfaces/admin/render.tsx b/packages/ui-extensions-react/src/surfaces/admin/render.tsx index 92294ab2bb..6984900d3b 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/render.tsx +++ b/packages/ui-extensions-react/src/surfaces/admin/render.tsx @@ -25,18 +25,22 @@ import {ExtensionApiContext} from './context'; */ export function reactExtension( target: ExtensionTarget, - render: (api: ApiForRenderExtension) => ReactElement, + render: ( + api: ApiForRenderExtension, + ) => Promise> | ReactElement, ): ExtensionTargets[ExtensionTarget] { // TypeScript can’t infer the type of the callback because it’s a big union // type. To get around it, we’ll just fake like we are rendering the // Playground extension, since all render extensions have the same general // shape (`RenderExtension`). - return extension<'Playground'>(target as any, (root, api) => { - return new Promise((resolve, reject) => { + return extension<'Playground'>(target as any, async (root, api) => { + const element = await render(api as ApiForRenderExtension); + + await new Promise((resolve, reject) => { try { remoteRender( - {render(api as ApiForRenderExtension)} + {element} , root, () => {