@servicetitan/web-components 23.1.0 → 23.2.0

package/dist/__mocks__/index.d.ts

@@ -0,0 +1,3 @@
+export * from './register-component';
+export * from './test-component';
+//# sourceMappingURL=index.d.ts.map

package/dist/__mocks__/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/__mocks__/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC"}

package/dist/__mocks__/index.js

@@ -0,0 +1,3 @@
+export * from './register-component';
+export * from './test-component';
+//# sourceMappingURL=index.js.map

package/dist/__mocks__/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/__mocks__/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC"}

package/dist/__mocks__/register-component.d.ts

@@ -0,0 +1,4 @@
+import { FunctionComponent } from 'react';
+import { RegisterOptions } from '../register';
+export declare function registerComponent(TestComponent: FunctionComponent, componentName: string | undefined, options?: RegisterOptions): void;
+//# sourceMappingURL=register-component.d.ts.map

package/dist/__mocks__/register-component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"register-component.d.ts","sourceRoot":"","sources":["../../src/__mocks__/register-component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE9C,wBAAgB,iBAAiB,CAC7B,aAAa,EAAE,iBAAiB,EAChC,aAAa,EAAE,MAAM,GAAG,SAAS,EACjC,OAAO,CAAC,EAAE,eAAe,QAa5B"}

package/dist/__mocks__/register-component.js

@@ -0,0 +1,14 @@
+export function registerComponent(TestComponent, componentName, options) {
+    /*
+     * This register can only happen once, unfortunately. So the TestComponent needs to
+     * work for all tests. If ran more than once, window.customElements.define will throw
+     * the error: "NotSupportedError: This name has already been registered in the registry."
+     *
+     * Also note that there is not way to "unregister" a web component, so an afterAll
+     * cannot be used.
+     */
+    global.WEB_COMPONENT_NAME = componentName;
+    const { register } = require('../register');
+    register(TestComponent, true, options);
+}
+//# sourceMappingURL=register-component.js.map

package/dist/__mocks__/register-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"register-component.js","sourceRoot":"","sources":["../../src/__mocks__/register-component.tsx"],"names":[],"mappings":"AAGA,MAAM,UAAU,iBAAiB,CAC7B,aAAgC,EAChC,aAAiC,EACjC,OAAyB;IAEzB;;;;;;;OAOG;IACF,MAAc,CAAC,kBAAkB,GAAG,aAAa,CAAC;IACnD,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;IAC5C,QAAQ,CAAC,aAAa,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC;AAC3C,CAAC"}

package/dist/__mocks__/test-component.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+export declare const MockComponent: FC<Record<string, any>>;
+//# sourceMappingURL=test-component.d.ts.map

package/dist/__mocks__/test-component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-component.d.ts","sourceRoot":"","sources":["../../src/__mocks__/test-component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAc,MAAM,OAAO,CAAC;AAIvC,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAmBjD,CAAC"}

package/dist/__mocks__/test-component.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { TablePopupPropsContext } from '@servicetitan/design-system';
+import { useMFEDataContext, useMFEMetadataContext } from '../contexts';
+export const MockComponent = props => {
+    const data = useMFEDataContext();
+    const metadata = useMFEMetadataContext();
+    const popupProps = useContext(TablePopupPropsContext);
+    return (_jsxs("div", { children: [Object.entries(props).map(([name, value]) => (_jsx("span", { children: `Prop: ${name}, Value: ${stringifyValue(value)}` }, name))), Object.entries(data).map(([name, value]) => (_jsx("span", { children: `Data: ${name}, Value: ${stringifyValue(value)}` }, name))), Object.entries(metadata).map(([name, value]) => (_jsx("span", { children: `Metadata: ${name}, Value: ${stringifyValue(value)}` }, name))), _jsxs("span", { children: ["TablePopupPropsContext appendTo: ", String(popupProps({}).appendTo)] })] }));
+};
+function stringifyValue(value) {
+    return JSON.stringify(value, (_key, value) => value instanceof ShadowRoot ? 'ShadowRoot' : value);
+}
+//# sourceMappingURL=test-component.js.map

package/dist/__mocks__/test-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-component.js","sourceRoot":"","sources":["../../src/__mocks__/test-component.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AAEvE,MAAM,CAAC,MAAM,aAAa,GAA4B,KAAK,CAAC,EAAE;IAC1D,MAAM,IAAI,GAAG,iBAAiB,EAAE,CAAC;IACjC,MAAM,QAAQ,GAAG,qBAAqB,EAAE,CAAC;IACzC,MAAM,UAAU,GAAG,UAAU,CAAC,sBAAsB,CAAC,CAAC;IAEtD,OAAO,CACH,0BACK,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAC1C,yBAAkB,SAAS,IAAI,YAAY,cAAc,CAAC,KAAK,CAAC,EAAE,IAAvD,IAAI,CAA2D,CAC7E,CAAC,EACD,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CACzC,yBAAkB,SAAS,IAAI,YAAY,cAAc,CAAC,KAAK,CAAC,EAAE,IAAvD,IAAI,CAA2D,CAC7E,CAAC,EACD,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAC7C,yBAAkB,aAAa,IAAI,YAAY,cAAc,CAAC,KAAK,CAAC,EAAE,IAA3D,IAAI,CAA+D,CACjF,CAAC,EACF,gEAAwC,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,IAAQ,IAC7E,CACT,CAAC;AACN,CAAC,CAAC;AAEF,SAAS,cAAc,CAAC,KAAU;IAC9B,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CACzC,KAAK,YAAY,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CACrD,CAAC;AACN,CAAC"}

package/dist/register.d.ts

@@ -1,3 +1,6 @@
 import { ComponentType } from 'react';
-export declare function register(Component: ComponentType, light: boolean): void;
+export interface RegisterOptions {
+    legacyRoot?: boolean;
+}
+export declare function register(Component: ComponentType, light: boolean, options?: RegisterOptions): void;
 //# sourceMappingURL=register.d.ts.map

package/dist/register.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"register.d.ts","sourceRoot":"","sources":["../src/register.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,aAAa,EAAE,MAAM,OAAO,CAAC;AAqC1C,wBAAgB,QAAQ,CAAC,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,OAAO,QAoMhE"}
+{"version":3,"file":"register.d.ts","sourceRoot":"","sources":["../src/register.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,aAAa,EAAa,MAAM,OAAO,CAAC;AAmCrD,MAAM,WAAW,eAAe;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,QAAQ,CAAC,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,eAAe,QAsM3F"}

package/dist/register.js

@@ -1,15 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// eslint-disable-next-line react/no-deprecated
-import { render, unmountComponentAtNode } from 'react-dom';
-import { Log } from '@servicetitan/log-service';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
 import { DefaultPortalContext, TablePopupPropsContext } from '@servicetitan/design-system';
+import { Log } from '@servicetitan/log-service';
 import { Provider } from '@servicetitan/react-ioc';
 import { EXPOSED_DEPENDENCIES_TOKEN, BASENAME_TOKEN, IS_WEB_COMPONENT_TOKEN, RENDER_ROOT_TOKEN, } from './common';
-import { EVENT_BUS_TOKEN } from './event-bus';
-import { HistoryManager } from './history-manager';
-import { WEB_COMPONENT_NAME } from './globals';
 import { MFEDataContext } from './contexts/mfe-data-context';
 import { MFEMetadataContext } from './contexts/mfe-metadata-context';
+import { EVENT_BUS_TOKEN } from './event-bus';
+import { WEB_COMPONENT_NAME } from './globals';
+import { HistoryManager } from './history-manager';
+import { render } from './render';
 function createLink(url, onLoad) {
     const element = document.createElement('link');
     element.href = url;
@@ -20,7 +20,7 @@ function createLink(url, onLoad) {
     return element;
 }
 const Placeholder = () => _jsx("div", { style: { display: 'none' } });
-export function register(Component, light) {
+export function register(Component, light, options) {
     class WebComponent extends HTMLElement {
         constructor() {
             super(...arguments);
@@ -84,6 +84,12 @@ export function register(Component, light) {
                 writable: true,
                 value: void 0
             });
+            Object.defineProperty(this, "view", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
             Object.defineProperty(this, "provide", {
                 enumerable: true,
                 configurable: true,
@@ -129,6 +135,7 @@ export function register(Component, light) {
                 configurable: true,
                 writable: true,
                 value: () => {
+                    var _a;
                     /*
                      * Check for this.root first, otherwise we get error when
                      * attributeChangedCallback happens on load
@@ -149,7 +156,7 @@ export function register(Component, light) {
                             shadowRoot: this.root,
                             portalShadowRoot: this.portal,
                         };
-                        render(_jsx(Provider, Object.assign({ singletons: [
+                        (_a = this.view) === null || _a === void 0 ? void 0 : _a.rerender(_jsx(Provider, Object.assign({ singletons: [
                                 { provide: IS_WEB_COMPONENT_TOKEN, useValue: true },
                                 { provide: RENDER_ROOT_TOKEN, useValue: this.root },
                             ] }, { children: _jsx(DefaultPortalContext.Provider, Object.assign({ value: this.portal }, { children: _jsx(TablePopupPropsContext.Provider, Object.assign({ value: props => (Object.assign(Object.assign({}, props), { appendTo: this.root })) }, { children: _jsx(Provider, Object.assign({ singletons: [
@@ -161,7 +168,7 @@ export function register(Component, light) {
                                             },
                                             { provide: EVENT_BUS_TOKEN, useValue: this.eventBus },
                                             { provide: BASENAME_TOKEN, useValue: this.basename },
-                                        ].filter(({ useValue }) => useValue !== undefined) }, { children: _jsx(MFEDataContext.Provider, Object.assign({ value: Object.assign({}, mfeData) }, { children: _jsx(MFEMetadataContext.Provider, Object.assign({ value: metadata }, { children: _jsx(Component, Object.assign({}, mfeData)) })) })) })) })) })) })), this.root, this.onReady);
+                                        ].filter(({ useValue }) => useValue !== undefined) }, { children: _jsx(MFEDataContext.Provider, Object.assign({ value: Object.assign({}, mfeData) }, { children: _jsxs(MFEMetadataContext.Provider, Object.assign({ value: metadata }, { children: [_jsx(Component, Object.assign({}, mfeData)), this.onReady && (_jsx(RenderCallback, { callback: this.onReady }))] })) })) })) })) })) })));
                     }
                 }
             });
@@ -200,23 +207,23 @@ export function register(Component, light) {
             this.portal = document.body
                 .appendChild(document.createElement('div'))
                 .attachShadow({ mode: 'open' });
-            render(_jsx(Placeholder, {}), this.root);
+            this.view = render(_jsx(Placeholder, {}), this.root, options);
             this.styles.elements.push(...this.attachStyles(this.root, styleUrls));
             this.styles.elements.push(...this.attachStyles(this.portal, styleUrls));
         }
         disconnectedCallback() {
-            var _a, _b;
+            var _a, _b, _c;
             if (!this.root || ((_a = this.root) === null || _a === void 0 ? void 0 : _a.isConnected)) {
                 return;
             }
             for (const element of this.styles.elements) {
                 element.remove();
             }
-            unmountComponentAtNode(this.root);
+            (_b = this.view) === null || _b === void 0 ? void 0 : _b.unmount();
             document.body.removeChild(this.portal.host);
             this.root = undefined;
             this.portal = undefined;
-            (_b = this.onDispose) === null || _b === void 0 ? void 0 : _b.call(this);
+            (_c = this.onDispose) === null || _c === void 0 ? void 0 : _c.call(this);
         }
         // Observe changes to the data-mfe-data attribute so that we can re-render when it changes
         static get observedAttributes() {
@@ -233,4 +240,9 @@ export function register(Component, light) {
     }
     window.customElements.define(WEB_COMPONENT_NAME, WebComponent);
 }
+function RenderCallback({ callback }) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => callback(), []);
+    return null;
+}
 //# sourceMappingURL=register.js.map

package/dist/register.js.map

@@ -1 +1 @@
-{"version":3,"file":"register.js","sourceRoot":"","sources":["../src/register.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"register.js","sourceRoot":"","sources":["../src/register.tsx"],"names":[],"mappings":"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"}

package/dist/render.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+interface RenderOptions {
+    legacyRoot?: boolean;
+}
+interface RenderResult {
+    rerender(element: ReactElement): void;
+    unmount(): void;
+}
+export declare function render(element: ReactElement, container: Element | DocumentFragment, options?: RenderOptions): RenderResult;
+export {};
+//# sourceMappingURL=render.d.ts.map

package/dist/render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../src/render.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAerC,UAAU,aAAa;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,UAAU,YAAY;IAClB,QAAQ,CAAC,OAAO,EAAE,YAAY,GAAG,IAAI,CAAC;IACtC,OAAO,IAAI,IAAI,CAAC;CACnB;AAED,wBAAgB,MAAM,CAClB,OAAO,EAAE,YAAY,EACrB,SAAS,EAAE,OAAO,GAAG,gBAAgB,EACrC,OAAO,CAAC,EAAE,aAAa,GACxB,YAAY,CAgBd"}

package/dist/render.js

@@ -0,0 +1,39 @@
+import ReactDOM from 'react-dom';
+let 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 (e) {
+    // ignore
+}
+export function render(element, container, options) {
+    if (typeof createRoot !== 'function' || (options === null || options === void 0 ? void 0 : options.legacyRoot)) {
+        return renderLegacyRoot(element, container);
+    }
+    const root = createRoot(container);
+    root.render(element);
+    return {
+        rerender(element) {
+            root.render(element);
+        },
+        unmount() {
+            root.unmount();
+        },
+    };
+}
+function renderLegacyRoot(element, container) {
+    ReactDOM.render(element, container);
+    return {
+        rerender(element) {
+            ReactDOM.render(element, container);
+        },
+        unmount() {
+            ReactDOM.unmountComponentAtNode(container);
+        },
+    };
+}
+//# sourceMappingURL=render.js.map

package/dist/render.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.js","sourceRoot":"","sources":["../src/render.ts"],"names":[],"mappings":"AAEA,OAAO,QAAQ,MAAM,WAAW,CAAC;AAGjC,IAAI,UAA4C,CAAC;AACjD,IAAI;IACA;;;OAGG;IACH,UAAU,GAAG,OAAO,CAAC,kBAAkB,CAAC,CAAC,UAAU,CAAC;CACvD;AAAC,OAAO,CAAC,EAAE;IACR,SAAS;CACZ;AAWD,MAAM,UAAU,MAAM,CAClB,OAAqB,EACrB,SAAqC,EACrC,OAAuB;IAEvB,IAAI,OAAO,UAAU,KAAK,UAAU,KAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,CAAA,EAAE;QACzD,OAAO,gBAAgB,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;KAC/C;IAED,MAAM,IAAI,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC;IACnC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAErB,OAAO;QACH,QAAQ,CAAC,OAAqB;YAC1B,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QACzB,CAAC;QACD,OAAO;YACH,IAAI,CAAC,OAAO,EAAE,CAAC;QACnB,CAAC;KACJ,CAAC;AACN,CAAC;AAED,SAAS,gBAAgB,CACrB,OAAqB,EACrB,SAAqC;IAErC,QAAQ,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IAEpC,OAAO;QACH,QAAQ,CAAC,OAAqB;YAC1B,QAAQ,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;QACxC,CAAC;QACD,OAAO;YACH,QAAQ,CAAC,sBAAsB,CAAC,SAAS,CAAC,CAAC;QAC/C,CAAC;KACJ,CAAC;AACN,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/web-components",
-    "version": "23.1.0",
+    "version": "23.2.0",
     "description": "",
     "repository": {
         "type": "git",
@@ -15,16 +15,16 @@
         "src"
     ],
     "dependencies": {
-        "@servicetitan/error-boundary": "23.1.0",
+        "@servicetitan/error-boundary": "23.2.0",
         "lodash.get": "~4.4.2",
         "mitt": "~3.0.1",
         "semver": "~7.5.4"
     },
     "devDependencies": {
         "@servicetitan/design-system": "~14.0.0",
-        "@servicetitan/log-service": "23.1.0",
-        "@servicetitan/react-ioc": "23.1.0",
-        "@testing-library/dom": "^8.20.1",
+        "@servicetitan/log-service": "23.2.0",
+        "@servicetitan/react-ioc": "23.2.0",
+        "@testing-library/dom": "^9.0.0",
         "@testing-library/jest-dom": "^6.4.2",
         "@testing-library/react": "^14.2.1",
         "@types/history": "~4.7.10",
@@ -39,8 +39,8 @@
     },
     "peerDependencies": {
         "@servicetitan/design-system": ">=12.6.2",
-        "@servicetitan/log-service": "23.1.0",
-        "@servicetitan/react-ioc": "23.1.0",
+        "@servicetitan/log-service": "23.2.0",
+        "@servicetitan/react-ioc": "23.2.0",
         "history": "~4.10.1",
         "react": ">=17.0.2",
         "react-dom": ">=17.0.2"
@@ -51,5 +51,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "7267270e54cdb3a2926f61feb4939d057e82adb3"
+    "gitHead": "4b72bab5ab6cb52a688d9329c7fbaa702ae6780c"
 }

package/src/__mocks__/index.ts

@@ -0,0 +1,2 @@
+export * from './register-component';
+export * from './test-component';

package/src/__mocks__/register-component.tsx

@@ -0,0 +1,20 @@
+import { FunctionComponent } from 'react';
+import { RegisterOptions } from '../register';
+
+export function registerComponent(
+    TestComponent: FunctionComponent,
+    componentName: string | undefined,
+    options?: RegisterOptions
+) {
+    /*
+     * This register can only happen once, unfortunately. So the TestComponent needs to
+     * work for all tests. If ran more than once, window.customElements.define will throw
+     * the error: "NotSupportedError: This name has already been registered in the registry."
+     *
+     * Also note that there is not way to "unregister" a web component, so an afterAll
+     * cannot be used.
+     */
+    (global as any).WEB_COMPONENT_NAME = componentName;
+    const { register } = require('../register');
+    register(TestComponent, true, options);
+}

package/src/__mocks__/test-component.tsx

@@ -0,0 +1,30 @@
+import { FC, useContext } from 'react';
+import { TablePopupPropsContext } from '@servicetitan/design-system';
+import { useMFEDataContext, useMFEMetadataContext } from '../contexts';
+
+export const MockComponent: FC<Record<string, any>> = props => {
+    const data = useMFEDataContext();
+    const metadata = useMFEMetadataContext();
+    const popupProps = useContext(TablePopupPropsContext);
+
+    return (
+        <div>
+            {Object.entries(props).map(([name, value]) => (
+                <span key={name}>{`Prop: ${name}, Value: ${stringifyValue(value)}`}</span>
+            ))}
+            {Object.entries(data).map(([name, value]) => (
+                <span key={name}>{`Data: ${name}, Value: ${stringifyValue(value)}`}</span>
+            ))}
+            {Object.entries(metadata).map(([name, value]) => (
+                <span key={name}>{`Metadata: ${name}, Value: ${stringifyValue(value)}`}</span>
+            ))}
+            <span>TablePopupPropsContext appendTo: {String(popupProps({}).appendTo)}</span>
+        </div>
+    );
+};
+
+function stringifyValue(value: any) {
+    return JSON.stringify(value, (_key, value) =>
+        value instanceof ShadowRoot ? 'ShadowRoot' : value
+    );
+}

package/src/__tests__/register-legacy-root.test.tsx

@@ -0,0 +1,36 @@
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore because Jest mistakenly complains that "'shadow-dom-testing-library' cannot be imported using this construct".
+import { screen } from 'shadow-dom-testing-library';
+
+import { MockComponent, registerComponent } from '../__mocks__';
+
+describe('[web-components] register', () => {
+    const componentName = 'mock-legacy-root-app';
+
+    beforeAll(() => {
+        registerComponent(MockComponent, componentName, { legacyRoot: true });
+    });
+
+    const subject = () => {
+        const Component: any = componentName;
+        return render(<Component />);
+    };
+
+    describe('when the web component data attribute is changed', () => {
+        const setup = () => {
+            subject();
+
+            const webComponent = document.getElementsByTagName(componentName);
+            webComponent[0]?.setAttribute('data-mfe-data', JSON.stringify({ string: 'baz' }));
+        };
+
+        test('useMFEDataContext provides updated data', () => {
+            setup();
+
+            expect(screen.getByShadowText(`Prop: string, Value: "baz"`)).toBeInTheDocument();
+            expect(screen.getByShadowText(`Data: string, Value: "baz"`)).toBeInTheDocument();
+        });
+    });
+});

package/src/__tests__/register.test.tsx

@@ -1,16 +1,13 @@
-import { FC, useContext } from 'react';
-import { TablePopupPropsContext } from '@servicetitan/design-system';
-import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { act, render } from '@testing-library/react';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore because Jest mistakenly complains that "'shadow-dom-testing-library' cannot be imported using this construct".
 import { screen } from 'shadow-dom-testing-library';
-import '@testing-library/jest-dom';
 
 import { IWebComponent } from '../common';
-import { useMFEDataContext, useMFEMetadataContext } from '../contexts';
+import { MockComponent, registerComponent } from '../__mocks__';
 
 describe('[web-components] register', () => {
-    let onloadRefs: Function[];
     const componentName = 'mock-app';
     const handleRef = (webComponent: IWebComponent | null) => {
         webComponent?.provide({
@@ -18,31 +15,7 @@ describe('[web-components] register', () => {
             onDispose: jest.fn(),
         });
     };
-    function stringifyValue(value: any) {
-        return JSON.stringify(value, (_key, value) =>
-            value instanceof ShadowRoot ? 'ShadowRoot' : value
-        );
-    }
-    const TestComponent: FC<Record<string, any>> = props => {
-        const data = useMFEDataContext();
-        const metadata = useMFEMetadataContext();
-        const popupProps = useContext(TablePopupPropsContext);
-
-        return (
-            <div>
-                {Object.entries(props).map(([name, value]) => (
-                    <span key={name}>{`Prop: ${name}, Value: ${stringifyValue(value)}`}</span>
-                ))}
-                {Object.entries(data).map(([name, value]) => (
-                    <span key={name}>{`Data: ${name}, Value: ${stringifyValue(value)}`}</span>
-                ))}
-                {Object.entries(metadata).map(([name, value]) => (
-                    <span key={name}>{`Metadata: ${name}, Value: ${stringifyValue(value)}`}</span>
-                ))}
-                <span>TablePopupPropsContext appendTo: {String(popupProps({}).appendTo)}</span>
-            </div>
-        );
-    };
+    let onloadRefs: Function[];
 
     class Page {
         static get componentShadowRoot() {
@@ -55,18 +28,7 @@ describe('[web-components] register', () => {
     }
 
     beforeAll(() => {
-        /*
-         * This register can only happen once, unfortunately. So the TestComponent needs to
-         * work for all tests. If ran more than once, window.customElements.define will throw
-         * the error: "NotSupportedError: This name has already been registered in the registry."
-         *
-         * Also note that there is not way to "unregister" a web component, so an afterAll
-         * cannot be used.
-         */
-        (global as any).WEB_COMPONENT_NAME = componentName;
-        const { register } = require('../register');
-        register(TestComponent, true);
-
+        registerComponent(MockComponent, componentName);
         /*
          * mock <link>'s onload so that we can call it directly from the test,
          * because it won't call itself in the test environment
@@ -91,9 +53,11 @@ describe('[web-components] register', () => {
         const Component: any = componentName;
         const renderResult = render(<Component ref={handleRef} {...data} {...dataAttrs} />);
 
-        for (const onload of onloadRefs) {
-            onload();
-        }
+        act(() => {
+            for (const onload of onloadRefs) {
+                onload();
+            }
+        });
 
         return renderResult;
     };
@@ -200,49 +164,20 @@ describe('[web-components] register', () => {
                 ).toBeInTheDocument()
             );
         });
-
-        describe('when the web component data attr is changed', () => {
-            const setup = () => {
-                subject(props);
-
-                const webComponent = document.getElementsByTagName(componentName);
-                webComponent[0]?.setAttribute(
-                    'data-mfe-data',
-                    JSON.stringify({ ...props, string: 'baz' })
-                );
-            };
-
-            test('useMFEDataContext provides updated data', () => {
-                setup();
-
-                expect(screen.getByShadowText(`Prop: string, Value: "baz"`)).toBeInTheDocument();
-                expect(screen.getByShadowText(`Data: string, Value: "baz"`)).toBeInTheDocument();
-            });
-        });
     });
 
-    describe('when WEB_COMPONENT_NAME is not set', () => {
-        let register: typeof import('../register').register;
-
-        beforeEach(() => {
-            jest.isolateModules(() => {
-                (global as any).WEB_COMPONENT_NAME = undefined;
-                register = require('../register').register;
-            });
-            jest.spyOn(console, 'error').mockImplementation(jest.fn());
-        });
-
-        test('logs an error', () => {
-            register(TestComponent, true);
-            // eslint-disable-next-line no-console
-            expect(console.error).toHaveBeenCalledWith('"WEB_COMPONENT_NAME" is not defined!');
+    test('logs an error when WEB_COMPONENT_NAME is not set', () => {
+        const consoleSpy = jest.spyOn(console, 'error').mockImplementation(jest.fn());
+        jest.isolateModules(() => {
+            registerComponent(MockComponent, undefined);
         });
+        expect(consoleSpy).toHaveBeenCalledWith('"WEB_COMPONENT_NAME" is not defined!');
     });
 
     test('configures the shadow root in PopupPropsContext', () => {
         subject();
         expect(screen.getByShadowText(/TablePopupPropsContext appendTo:/)).toHaveTextContent(
-            /[object ShadowRoot]/
+            /\[object ShadowRoot\]/
         );
     });
 });

package/src/register.tsx

@@ -1,9 +1,6 @@
-import { FC, ComponentType } from 'react';
-// eslint-disable-next-line react/no-deprecated
-import { render, unmountComponentAtNode } from 'react-dom';
-
-import { Log } from '@servicetitan/log-service';
+import { FC, ComponentType, useEffect } from 'react';
 import { DefaultPortalContext, TablePopupPropsContext } from '@servicetitan/design-system';
+import { Log } from '@servicetitan/log-service';
 import { Provider } from '@servicetitan/react-ioc';
 
 import {
@@ -15,11 +12,12 @@ import {
     IS_WEB_COMPONENT_TOKEN,
     RENDER_ROOT_TOKEN,
 } from './common';
-import { EventBus, EVENT_BUS_TOKEN } from './event-bus';
-import { HistoryManager } from './history-manager';
-import { WEB_COMPONENT_NAME } from './globals';
 import { MFEDataContext } from './contexts/mfe-data-context';
 import { MFEMetadataContext } from './contexts/mfe-metadata-context';
+import { EventBus, EVENT_BUS_TOKEN } from './event-bus';
+import { WEB_COMPONENT_NAME } from './globals';
+import { HistoryManager } from './history-manager';
+import { render } from './render';
 
 function createLink(url: string, onLoad: () => void) {
     const element = document.createElement('link');
@@ -35,7 +33,11 @@ function createLink(url: string, onLoad: () => void) {
 
 const Placeholder: FC = () => <div style={{ display: 'none' }} />;
 
-export function register(Component: ComponentType, light: boolean) {
+export interface RegisterOptions {
+    legacyRoot?: boolean;
+}
+
+export function register(Component: ComponentType, light: boolean, options?: RegisterOptions) {
     class WebComponent extends HTMLElement implements IWebComponent {
         private root?: ShadowRoot;
         private portal?: ShadowRoot;
@@ -53,6 +55,7 @@ export function register(Component: ComponentType, light: boolean) {
         private basename?: string;
         private onReady?: () => void;
         private onDispose?: () => void;
+        private view?: ReturnType<typeof render>;
 
         connectedCallback() {
             /*
@@ -93,7 +96,7 @@ export function register(Component: ComponentType, light: boolean) {
                 .appendChild(document.createElement('div'))
                 .attachShadow({ mode: 'open' });
 
-            render(<Placeholder />, this.root);
+            this.view = render(<Placeholder />, this.root, options);
 
             this.styles.elements.push(...this.attachStyles(this.root, styleUrls));
             this.styles.elements.push(...this.attachStyles(this.portal, styleUrls));
@@ -107,7 +110,7 @@ export function register(Component: ComponentType, light: boolean) {
                 element.remove();
             }
 
-            unmountComponentAtNode(this.root);
+            this.view?.unmount();
             document.body.removeChild(this.portal!.host);
             this.root = undefined;
             this.portal = undefined;
@@ -180,7 +183,7 @@ export function register(Component: ComponentType, light: boolean) {
                     portalShadowRoot: this.portal!,
                 };
 
-                render(
+                this.view?.rerender(
                     <Provider
                         singletons={[
                             { provide: IS_WEB_COMPONENT_TOKEN, useValue: true },
@@ -211,14 +214,15 @@ export function register(Component: ComponentType, light: boolean) {
                                     <MFEDataContext.Provider value={{ ...mfeData }}>
                                         <MFEMetadataContext.Provider value={metadata}>
                                             <Component {...mfeData} />
+                                            {this.onReady && (
+                                                <RenderCallback callback={this.onReady} />
+                                            )}
                                         </MFEMetadataContext.Provider>
                                     </MFEDataContext.Provider>
                                 </Provider>
                             </TablePopupPropsContext.Provider>
                         </DefaultPortalContext.Provider>
-                    </Provider>,
-                    this.root!,
-                    this.onReady
+                    </Provider>
                 );
             }
         };
@@ -232,3 +236,9 @@ export function register(Component: ComponentType, light: boolean) {
 
     window.customElements.define(WEB_COMPONENT_NAME, WebComponent);
 }
+
+function RenderCallback({ callback }: { callback: () => void }) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => callback(), []);
+    return null;
+}

package/src/render.ts

@@ -0,0 +1,62 @@
+/* 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 (e) {
+    // ignore
+}
+
+interface RenderOptions {
+    legacyRoot?: boolean;
+}
+
+interface RenderResult {
+    rerender(element: ReactElement): void;
+    unmount(): void;
+}
+
+export function render(
+    element: ReactElement,
+    container: Element | DocumentFragment,
+    options?: RenderOptions
+): RenderResult {
+    if (typeof createRoot !== 'function' || options?.legacyRoot) {
+        return renderLegacyRoot(element, container);
+    }
+
+    const root = createRoot(container);
+    root.render(element);
+
+    return {
+        rerender(element: ReactElement) {
+            root.render(element);
+        },
+        unmount() {
+            root.unmount();
+        },
+    };
+}
+
+function renderLegacyRoot(
+    element: ReactElement,
+    container: Element | DocumentFragment
+): RenderResult {
+    ReactDOM.render(element, container);
+
+    return {
+        rerender(element: ReactElement) {
+            ReactDOM.render(element, container);
+        },
+        unmount() {
+            ReactDOM.unmountComponentAtNode(container);
+        },
+    };
+}