@servicetitan/web-components 36.3.1 → 37.0.0

package/src/anvil1-providers.tsx

@@ -0,0 +1,28 @@
+import * as Anvil1 from '@servicetitan/design-system';
+import { FC, PropsWithChildren, useCallback } from 'react';
+
+export const Anvil1Providers: FC<{ root: ShadowRoot; portal: ShadowRoot } & PropsWithChildren> = ({
+    root,
+    portal,
+    children,
+}) => {
+    const getTablePopupProps = useCallback(
+        (props: object) => ({
+            ...props,
+            appendTo: root as unknown as HTMLElement,
+        }),
+        [root]
+    );
+
+    if (Anvil1.DefaultPortalContext === undefined || Anvil1.TablePopupPropsContext === undefined) {
+        return children;
+    }
+
+    return (
+        <Anvil1.DefaultPortalContext.Provider value={portal as unknown as HTMLElement}>
+            <Anvil1.TablePopupPropsContext.Provider value={getTablePopupProps}>
+                {children}
+            </Anvil1.TablePopupPropsContext.Provider>
+        </Anvil1.DefaultPortalContext.Provider>
+    );
+};

package/src/anvil2-providers.tsx

@@ -0,0 +1,13 @@
+import * as Anvil2 from '@servicetitan/anvil2';
+import { FC, PropsWithChildren } from 'react';
+
+export const Anvil2Providers: FC<{ portalAnvilContainer: HTMLDivElement } & PropsWithChildren> = ({
+    portalAnvilContainer,
+    children,
+}) => {
+    if (Anvil2.PortalProvider === undefined) {
+        return children;
+    }
+
+    return <Anvil2.PortalProvider root={portalAnvilContainer}>{children}</Anvil2.PortalProvider>;
+};

package/src/css-injector/__tests__/mfe-style-registry.test.ts

@@ -0,0 +1,163 @@
+import { MfeStyleRegistry } from '../mfe-style-registry';
+
+beforeAll(() => {
+    if (!CSSStyleSheet.prototype.replaceSync) {
+        CSSStyleSheet.prototype.replaceSync = jest.fn();
+    }
+});
+
+describe('[web-components] MfeStyleRegistry', () => {
+    const createRoot = () => {
+        const root = document.createElement('div').attachShadow({ mode: 'open' });
+        root.adoptedStyleSheets = [];
+        return root;
+    };
+
+    beforeEach(() => {
+        delete globalThis.__mfeStyles__;
+    });
+
+    describe(MfeStyleRegistry.for.name, () => {
+        test('initializes globalThis.__mfeStyles__', () => {
+            MfeStyleRegistry.for('test-mfe');
+
+            expect(globalThis.__mfeStyles__).toBeDefined();
+        });
+
+        test('returns the same registry for the same component', () => {
+            const a = MfeStyleRegistry.for('test-mfe');
+            const b = MfeStyleRegistry.for('test-mfe');
+
+            expect(a).toBe(b);
+        });
+
+        test('returns different registries for different components', () => {
+            const a = MfeStyleRegistry.for('mfe-a');
+            const b = MfeStyleRegistry.for('mfe-b');
+
+            expect(a).not.toBe(b);
+        });
+    });
+
+    describe('injectSheet', () => {
+        const defaultCss = '.foo { color: red; }';
+        const defaultSheetId = 'sheet-1';
+
+        let registry: MfeStyleRegistry;
+
+        beforeEach(() => {
+            registry = MfeStyleRegistry.for('test-mfe');
+        });
+
+        const subject = (sheetId = defaultSheetId, css = defaultCss) =>
+            registry.injectSheet(sheetId, css);
+
+        test('creates a new CSSStyleSheet and stores it', () => {
+            subject();
+
+            const sheet = registry.sheets.get('sheet-1');
+            expect(sheet).toBeInstanceOf(CSSStyleSheet);
+            expect(sheet!.replaceSync).toHaveBeenCalledWith(defaultCss);
+        });
+
+        test('adopts new sheets into observed roots', () => {
+            const root = createRoot();
+            registry.observeRoot(root);
+
+            subject();
+
+            expect(root.adoptedStyleSheets).toContain(registry.sheets.get('sheet-1'));
+        });
+
+        describe('when sheet with the same ID already exists', () => {
+            beforeEach(() => {
+                subject();
+            });
+
+            test('updates existing sheet in place via replaceSync', () => {
+                const sheet = registry.sheets.get(defaultSheetId)!;
+
+                const newCSS = '.foo { color: blue; }';
+                subject(defaultSheetId, newCSS);
+
+                expect(registry.sheets.get(defaultSheetId)).toBe(sheet);
+                expect(sheet.replaceSync).toHaveBeenLastCalledWith(newCSS);
+            });
+        });
+    });
+
+    describe('observeRoot', () => {
+        let registry: MfeStyleRegistry;
+
+        beforeEach(() => {
+            registry = MfeStyleRegistry.for('test-mfe');
+        });
+
+        test('adds root to the roots set', () => {
+            const root = createRoot();
+
+            registry.observeRoot(root);
+
+            expect(registry.roots.has(root)).toBe(true);
+        });
+
+        describe('when root is already observed', () => {
+            let root: ShadowRoot;
+
+            beforeEach(() => {
+                registry.injectSheet('a', '.a {}');
+                root = createRoot();
+                registry.observeRoot(root);
+            });
+
+            test('does not duplicate sheets', () => {
+                registry.observeRoot(root);
+
+                expect(root.adoptedStyleSheets).toHaveLength(1);
+            });
+        });
+
+        test('adopts all existing sheets into the root', () => {
+            registry.injectSheet('a', '.a {}');
+            registry.injectSheet('b', '.b {}');
+            const root = createRoot();
+
+            registry.observeRoot(root);
+
+            expect(root.adoptedStyleSheets).toEqual([...registry.sheets.values()]);
+        });
+    });
+
+    describe('unobserveRoot', () => {
+        let registry: MfeStyleRegistry;
+        let root: ShadowRoot;
+
+        beforeEach(() => {
+            registry = MfeStyleRegistry.for('test-mfe');
+            root = createRoot();
+            const defaultSheetId = 'sheet-1';
+            registry.injectSheet(defaultSheetId, '.foo {}');
+            registry.observeRoot(root);
+        });
+
+        test('removes root from the roots set', () => {
+            registry.unobserveRoot(root);
+
+            expect(registry.roots.has(root)).toBe(false);
+        });
+
+        test('removes adopted sheets from the root', () => {
+            registry.unobserveRoot(root);
+
+            expect(root.adoptedStyleSheets).toHaveLength(0);
+        });
+
+        test('stops receiving newly adopted sheets', () => {
+            registry.unobserveRoot(root);
+
+            registry.injectSheet('sheet-2', '.bar {}');
+
+            expect(root.adoptedStyleSheets).toHaveLength(0);
+        });
+    });
+});

package/src/css-injector/__tests__/with-css-injector.test.tsx

@@ -0,0 +1,128 @@
+import { render } from '@testing-library/react';
+import { FC } from 'react';
+import { useMFEMetadataContext } from '../../contexts/mfe-metadata-context';
+import { MfeStyleRegistry } from '../mfe-style-registry';
+import { withCssInjector } from '../with-css-injector';
+
+jest.mock('../../contexts/mfe-metadata-context');
+jest.mock('../../globals', () => ({
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    WEB_COMPONENT_NAME: 'test-mfe',
+}));
+jest.mock('../mfe-style-registry');
+
+describe(`[web-components] ${withCssInjector.name}`, () => {
+    const innerTestId = 'inner';
+    const innerLabel = 'foo';
+    const InnerComponent: FC<{ label: string }> = ({ label }) => (
+        <div data-testid={innerTestId}>{label}</div>
+    );
+    const WrappedComponent = withCssInjector(InnerComponent);
+
+    let registry: jest.Mocked<MfeStyleRegistry>;
+    let shadowRoot: ShadowRoot;
+    let portalShadowRoot: ShadowRoot;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        delete globalThis.__mfeSelfHosted__;
+        registry = {
+            observeRoot: jest.fn(),
+            unobserveRoot: jest.fn(),
+        } as unknown as jest.Mocked<MfeStyleRegistry>;
+        jest.mocked(MfeStyleRegistry.for).mockReturnValue(registry);
+        shadowRoot = document.createElement('div').attachShadow({ mode: 'open' });
+        portalShadowRoot = document.createElement('span').attachShadow({ mode: 'open' });
+        jest.mocked(useMFEMetadataContext).mockImplementation(() => ({
+            shadowRoot,
+            portalShadowRoot,
+        }));
+    });
+
+    const subject = () => render(<WrappedComponent label={innerLabel} />);
+
+    test('renders the wrapped component with its props', () => {
+        const { getByTestId } = subject();
+
+        expect(getByTestId(innerTestId).textContent).toBe(innerLabel);
+    });
+
+    test('retrieves the registry for the component', () => {
+        subject();
+
+        expect(MfeStyleRegistry.for).toHaveBeenCalledWith('test-mfe');
+    });
+
+    test('observes shadow root', () => {
+        subject();
+
+        expect(registry.observeRoot).toHaveBeenCalledWith(shadowRoot);
+    });
+
+    test('observes portal shadow root', () => {
+        subject();
+
+        expect(registry.observeRoot).toHaveBeenCalledWith(portalShadowRoot);
+    });
+
+    describe('when self-hosted', () => {
+        beforeEach(() => {
+            globalThis.__mfeSelfHosted__ = true;
+        });
+
+        test('observes document', () => {
+            subject();
+
+            expect(registry.observeRoot).toHaveBeenCalledWith(document);
+        });
+
+        test('unobserves document on unmount', () => {
+            const { unmount } = subject();
+
+            unmount();
+
+            expect(registry.unobserveRoot).toHaveBeenCalledWith(document);
+        });
+    });
+
+    describe('when unmounted', () => {
+        test('unobserves shadow root', () => {
+            const { unmount } = subject();
+
+            unmount();
+
+            expect(registry.unobserveRoot).toHaveBeenCalledWith(shadowRoot);
+        });
+
+        test('unobserves portal shadow root', () => {
+            const { unmount } = subject();
+
+            unmount();
+
+            expect(registry.unobserveRoot).toHaveBeenCalledWith(portalShadowRoot);
+        });
+    });
+
+    describe('in production', () => {
+        const originalEnv = process.env.NODE_ENV;
+
+        beforeEach(() => {
+            process.env.NODE_ENV = 'production';
+        });
+
+        afterEach(() => {
+            process.env.NODE_ENV = originalEnv;
+        });
+
+        test('returns Component directly', () => {
+            expect.assertions(1);
+
+            jest.isolateModules(() => {
+                const { withCssInjector: freshWithCssInjector } = require('../with-css-injector');
+                const Dummy: FC = () => <div />;
+
+                expect(freshWithCssInjector(Dummy)).toBe(Dummy);
+            });
+        });
+    });
+});

package/src/css-injector/index.ts

@@ -0,0 +1,2 @@
+export { MfeStyleRegistry } from './mfe-style-registry';
+export { withCssInjector } from './with-css-injector';

package/src/css-injector/mfe-style-registry.ts

@@ -0,0 +1,48 @@
+declare global {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    var __mfeStyles__: Record<string, MfeStyleRegistry> | undefined;
+}
+
+type StyleRoot = ShadowRoot | Document;
+
+export class MfeStyleRegistry {
+    readonly sheets = new Map<string, CSSStyleSheet>();
+    readonly roots = new Set<StyleRoot>();
+
+    // Per-component state stored on globalThis.__mfeStyles__ so it survives Vite HMR module reloads.
+    static for(componentName: string): MfeStyleRegistry {
+        globalThis.__mfeStyles__ ??= {};
+        globalThis.__mfeStyles__[componentName] ??= new MfeStyleRegistry();
+        return globalThis.__mfeStyles__[componentName];
+    }
+
+    injectSheet(sheetId: string, css: string) {
+        let sheet = this.sheets.get(sheetId);
+        if (sheet) {
+            sheet.replaceSync(css);
+        } else {
+            sheet = new CSSStyleSheet();
+            sheet.replaceSync(css);
+            this.sheets.set(sheetId, sheet);
+            for (const root of this.roots) {
+                root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+            }
+        }
+    }
+
+    observeRoot(root: StyleRoot) {
+        if (this.roots.has(root)) {
+            return;
+        }
+        this.roots.add(root);
+        root.adoptedStyleSheets ??= [];
+        root.adoptedStyleSheets = [...root.adoptedStyleSheets, ...this.sheets.values()];
+    }
+
+    unobserveRoot(root: StyleRoot) {
+        this.roots.delete(root);
+        const sheets = new Set(this.sheets.values());
+        root.adoptedStyleSheets ??= [];
+        root.adoptedStyleSheets = root.adoptedStyleSheets.filter(s => !sheets.has(s));
+    }
+}

package/src/css-injector/with-css-injector.tsx

@@ -0,0 +1,40 @@
+import { ComponentType, useLayoutEffect } from 'react';
+import { useMFEMetadataContext } from '../contexts/mfe-metadata-context';
+import { WEB_COMPONENT_NAME } from '../globals';
+import { MfeStyleRegistry } from './mfe-style-registry';
+
+declare global {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    var __mfeSelfHosted__: boolean | undefined;
+}
+
+/*
+ * HOC wrapping the MFE's root component in register(). Adopts sheets from the registry into
+ * the MFE's shadow roots. Only active in development; eliminated by Vite in production builds.
+ */
+export function withCssInjector<P extends object>(Component: ComponentType<P>): ComponentType<P> {
+    if (process.env.NODE_ENV === 'production') {
+        return Component;
+    }
+
+    return function CssInjectorWrapper(props: P) {
+        const { shadowRoot, portalShadowRoot } = useMFEMetadataContext();
+
+        useLayoutEffect(() => {
+            const registry = MfeStyleRegistry.for(WEB_COMPONENT_NAME);
+            const roots = [
+                shadowRoot,
+                portalShadowRoot,
+                ...(globalThis.__mfeSelfHosted__ ? [document] : []),
+            ];
+
+            roots.forEach(root => registry.observeRoot(root));
+
+            return () => {
+                roots.forEach(root => registry.unobserveRoot(root));
+            };
+        }, [shadowRoot, portalShadowRoot]);
+
+        return <Component {...props} />;
+    };
+}

package/src/get-style-urls.ts

@@ -0,0 +1,23 @@
+export function getStyleUrls(light: boolean, sharedDependenciesNames: string[], el: HTMLElement) {
+    function getCssUrl(dependencyName: string, cssFileRegEx: RegExp) {
+        if (light && sharedDependenciesNames.includes(dependencyName)) {
+            return Array.from(document.getElementsByTagName('link')).find(
+                ({ href }) => href && cssFileRegEx.test(href)
+            )?.href;
+        }
+    }
+
+    const designSystemUrl = getCssUrl(
+        '@servicetitan/design-system',
+        /design-system(\..+)?\.bundle\.css/
+    );
+    const anvil2CssUrl = getCssUrl('@servicetitan/anvil2', /anvil2(\..+)?\.bundle\.css/);
+
+    return [
+        ...(designSystemUrl ? [designSystemUrl] : []),
+        ...(anvil2CssUrl ? [anvil2CssUrl] : []),
+        ...(el.hasAttribute('style-urls')
+            ? JSON.parse(decodeURIComponent(el.getAttribute('style-urls')!))
+            : []),
+    ];
+}

package/src/globals.ts

@@ -1,4 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
+// eslint-disable-next-line spaced-comment
+/// <reference types="vite/client" /> — provides types for import.meta.env
 import { ExposedDependencies } from '@servicetitan/startup-utils';
 import { ExposedInstanceDependencies } from './common';
 
@@ -8,6 +10,13 @@ declare global {
     export const WEB_COMPONENT_NAME: string | undefined;
 }
 
+/*
+ * Safely access a value that may not exist. Returns undefined instead of
+ * throwing a ReferenceError. Used below to try global constants first
+ * (set by webpack DefinePlugin), then fall back to import.meta.env
+ * (set by Vite's define config). One of these will always be defined
+ * depending on which bundler built the code.
+ */
 function get<T>(fetch: () => T) {
     try {
         return fetch();
@@ -16,17 +25,28 @@ function get<T>(fetch: () => T) {
     }
 }
 
-const _EXPOSED_DEPENDENCIES = get(() => {
-    return EXPOSED_DEPENDENCIES;
-});
+const _EXPOSED_DEPENDENCIES =
+    get(() => {
+        return EXPOSED_DEPENDENCIES;
+    }) ??
+    get(() => {
+        return import.meta.env.EXPOSED_DEPENDENCIES;
+    });
 
-const _WEB_COMPONENT_NAME = get(() => {
-    return WEB_COMPONENT_NAME;
-});
-
-const _EXPOSED_INSTANCE_DEPENDENCIES = get(() => {
-    return EXPOSED_INSTANCE_DEPENDENCIES;
-});
+const _WEB_COMPONENT_NAME =
+    get(() => {
+        return WEB_COMPONENT_NAME;
+    }) ??
+    get(() => {
+        return import.meta.env.WEB_COMPONENT_NAME;
+    });
+const _EXPOSED_INSTANCE_DEPENDENCIES =
+    get(() => {
+        return EXPOSED_INSTANCE_DEPENDENCIES;
+    }) ??
+    get(() => {
+        return import.meta.env.EXPOSED_INSTANCE_DEPENDENCIES;
+    });
 
 export {
     _EXPOSED_DEPENDENCIES as EXPOSED_DEPENDENCIES,

package/src/index.ts

@@ -1,5 +1,6 @@
 export * from './common';
 export * from './contexts';
+export * from './css-injector';
 export * from './event-bus';
 export * from './get-value-for-environment';
 export * from './headless-loader';

package/src/register-headless.ts

@@ -2,6 +2,7 @@ import type { LDService } from '@servicetitan/launchdarkly-service';
 import type { Log } from '@servicetitan/log-service';
 import type { Entries, IWebComponent } from './common';
 import type { EventBus } from './event-bus';
+import { WEB_COMPONENT_NAME } from './globals';
 import { Serializable } from './types';
 
 type HeadlessCallbackArgs<TMfeData, TEventBus extends EventBus = EventBus> = Pick<

package/src/register.tsx

@@ -3,6 +3,8 @@ import { Log } from '@servicetitan/log-service';
 import { Provider } from '@servicetitan/react-ioc';
 import { ExposedDependencies } from '@servicetitan/startup-utils';
 import { ComponentType, FC, ReactElement, useEffect } from 'react';
+import { Anvil1Providers } from './anvil1-providers';
+import { Anvil2Providers } from './anvil2-providers';
 import {
     BASENAME_TOKEN,
     Entries,
@@ -15,7 +17,9 @@ import {
 } from './common';
 import { MFEDataContext } from './contexts/mfe-data-context';
 import { MFEMetadataContext } from './contexts/mfe-metadata-context';
+import { withCssInjector } from './css-injector';
 import { EVENT_BUS_TOKEN, EventBus } from './event-bus';
+import { getStyleUrls } from './get-style-urls';
 import { WEB_COMPONENT_NAME } from './globals';
 import { HistoryManager } from './history-manager';
 import { render } from './render';
@@ -41,6 +45,8 @@ export interface RegisterOptions {
 }
 
 export function register(Component: ComponentType, light: boolean, options?: RegisterOptions) {
+    const WrappedComponent = withCssInjector(Component);
+
     class WebComponent extends HTMLElement implements IWebComponent {
         private root?: ShadowRoot;
         private portal?: ShadowRoot;
@@ -165,47 +171,14 @@ export function register(Component: ComponentType, light: boolean, options?: Reg
             return elements;
         };
 
-        private withAnvil1Providers(children: ReactElement): ReactElement {
-            try {
-                /**
-                 * Note, the webpack.IgnorePlugin must be configured to ignore this dependency.
-                 * @see {@link file://./../../startup/src/webpack/configs/plugins/ignore-plugin/ignore-plugin.ts}
-                 */
-                const { DefaultPortalContext, TablePopupPropsContext } =
-                    require('@servicetitan/design-system') as typeof import('@servicetitan/design-system');
-                return (
-                    <DefaultPortalContext.Provider value={this.portal as unknown as HTMLElement}>
-                        <TablePopupPropsContext.Provider
-                            value={props => ({
-                                ...props,
-                                appendTo: this.root as unknown as HTMLElement,
-                            })}
-                        >
-                            {children}
-                        </TablePopupPropsContext.Provider>
-                    </DefaultPortalContext.Provider>
-                );
-            } catch {
-                return children;
-            }
-        }
-
-        private withAnvil2Providers(children: ReactElement): ReactElement {
-            try {
-                /**
-                 * Note, the webpack.IgnorePlugin must be configured to ignore this dependency.
-                 * @see {@link file://./../../startup/src/webpack/configs/plugins/ignore-plugin/ignore-plugin.ts}
-                 */
-                const { PortalProvider } =
-                    require('@servicetitan/anvil2') as typeof import('@servicetitan/anvil2');
-                return <PortalProvider root={this.portalAnvilContainer}>{children}</PortalProvider>;
-            } catch {
-                return children;
-            }
-        }
-
-        private withProviders(children: ReactElement): ReactElement {
-            return this.withAnvil2Providers(this.withAnvil1Providers(children));
+        private withProviders(children: ReactElement) {
+            return (
+                <Anvil2Providers portalAnvilContainer={this.portalAnvilContainer!}>
+                    <Anvil1Providers root={this.root!} portal={this.portal!}>
+                        {children}
+                    </Anvil1Providers>
+                </Anvil2Providers>
+            );
         }
 
         private render = () => {
@@ -264,7 +237,7 @@ export function register(Component: ComponentType, light: boolean, options?: Reg
                         >
                             <MFEDataContext.Provider value={{ ...mfeData }}>
                                 <MFEMetadataContext.Provider value={metadata}>
-                                    {this.withProviders(<Component {...mfeData} />)}
+                                    {this.withProviders(<WrappedComponent {...mfeData} />)}
                                     {this.onReady && <RenderCallback callback={this.onReady} />}
                                 </MFEMetadataContext.Provider>
                             </MFEDataContext.Provider>
@@ -284,30 +257,6 @@ export function register(Component: ComponentType, light: boolean, options?: Reg
     window.customElements.define(WEB_COMPONENT_NAME, WebComponent);
 }
 
-function getStyleUrls(light: boolean, sharedDependenciesNames: string[], el: HTMLElement) {
-    function getCssUrl(dependencyName: string, cssFileRegEx: RegExp) {
-        if (light && sharedDependenciesNames.includes(dependencyName)) {
-            return Array.from(document.getElementsByTagName('link')).find(
-                ({ href }) => href && cssFileRegEx.test(href)
-            )?.href;
-        }
-    }
-
-    const designSystemUrl = getCssUrl(
-        '@servicetitan/design-system',
-        /design-system(\..+)?\.bundle\.css/
-    );
-    const anvil2CssUrl = getCssUrl('@servicetitan/anvil2', /anvil2(\..+)?\.bundle\.css/);
-
-    return [
-        ...(designSystemUrl ? [designSystemUrl] : []),
-        ...(anvil2CssUrl ? [anvil2CssUrl] : []),
-        ...(el.hasAttribute('style-urls')
-            ? JSON.parse(decodeURIComponent(el.getAttribute('style-urls')!))
-            : []),
-    ];
-}
-
 function RenderCallback({ callback }: { callback: () => void }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     useEffect(() => callback(), []);

package/src/render.ts

@@ -1,18 +1,7 @@
 /* eslint-disable react/no-deprecated */
 import { ReactElement } from 'react';
 import ReactDOM from 'react-dom';
-import type ReactDOMClient from 'react-dom/client';
-
-let createRoot: typeof ReactDOMClient.createRoot;
-try {
-    /**
-     * Note, the webpack.IgnorePlugin must be configured to ignore this dependency.
-     * @see {@link file://./../../startup/src/webpack/configs/plugins/ignore-plugin/ignore-plugin.ts}
-     */
-    createRoot = require('react-dom/client').createRoot;
-} catch {
-    // ignore
-}
+import * as ReactDOMClient from 'react-dom/client';
 
 interface RenderOptions {
     legacyRoot?: boolean;
@@ -28,11 +17,11 @@ export function render(
     container: Element | DocumentFragment,
     options?: RenderOptions
 ): RenderResult {
-    if (typeof createRoot !== 'function' || options?.legacyRoot) {
+    if (typeof ReactDOMClient.createRoot !== 'function' || options?.legacyRoot) {
         return renderLegacyRoot(element, container);
     }
 
-    const root = createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.render(element);
 
     return {