diff --git a/code/addons/docs/src/DocsRenderer.tsx b/code/addons/docs/src/DocsRenderer.tsx index 797f967282e1..0124bf4dabe6 100644 --- a/code/addons/docs/src/DocsRenderer.tsx +++ b/code/addons/docs/src/DocsRenderer.tsx @@ -1,6 +1,6 @@ import type { PropsWithChildren } from 'react'; import React, { Component } from 'react'; -import ReactDomShim from '@storybook/react-dom-shim'; +import { renderElement, unmountElement } from '@storybook/react-dom-shim'; import type { Renderer, Parameters, @@ -62,7 +62,7 @@ export class DocsRenderer { import('@mdx-js/react') .then(({ MDXProvider }) => // We use a `key={}` here to reset the `hasError` state each time we render ErrorBoundary - ReactDomShim.renderElement( + renderElement( @@ -76,7 +76,7 @@ export class DocsRenderer { }; this.unmount = (element: HTMLElement) => { - ReactDomShim.unmountElement(element); + unmountElement(element); }; } } diff --git a/code/lib/react-dom-shim/src/react-16.tsx b/code/lib/react-dom-shim/src/react-16.tsx index d040ca63a2f7..8c7b2c8f5a67 100644 --- a/code/lib/react-dom-shim/src/react-16.tsx +++ b/code/lib/react-dom-shim/src/react-16.tsx @@ -2,14 +2,12 @@ import type { ReactElement } from 'react'; import * as ReactDOM from 'react-dom'; -const renderElement = async (node: ReactElement, el: Element) => { +export const renderElement = async (node: ReactElement, el: Element) => { return new Promise((resolve) => { ReactDOM.render(node, el, () => resolve(null)); }); }; -const unmountElement = (el: Element) => { +export const unmountElement = (el: Element) => { ReactDOM.unmountComponentAtNode(el); }; - -export default { renderElement, unmountElement }; diff --git a/code/lib/react-dom-shim/src/react-18.tsx b/code/lib/react-dom-shim/src/react-18.tsx index 022e8f1dc0e2..254fdfbdab7e 100644 --- a/code/lib/react-dom-shim/src/react-18.tsx +++ b/code/lib/react-dom-shim/src/react-18.tsx @@ -21,7 +21,7 @@ const WithCallback: FC<{ callback: () => void; children: ReactElement }> = ({ return children; }; -const renderElement = async (node: ReactElement, el: Element, rootOptions?: RootOptions) => { +export const renderElement = async (node: ReactElement, el: Element, rootOptions?: RootOptions) => { // Create Root Element conditionally for new React 18 Root Api const root = await getReactRoot(el, rootOptions); @@ -30,7 +30,7 @@ const renderElement = async (node: ReactElement, el: Element, rootOptions?: Root }); }; -const unmountElement = (el: Element, shouldUseNewRootApi?: boolean) => { +export const unmountElement = (el: Element, shouldUseNewRootApi?: boolean) => { const root = nodes.get(el); if (root) { @@ -49,5 +49,3 @@ const getReactRoot = async (el: Element, rootOptions?: RootOptions): Promise, canvasElement: ReactRenderer['canvasElement'] ) { - const { renderElement, unmountElement } = (await import('@storybook/react-dom-shim')).default; + const { renderElement, unmountElement } = await import('@storybook/react-dom-shim'); const Story = unboundStoryFn as FC>; const content = (