@servicetitan/web-components 36.1.0 → 36.1.1-beta.1

package/dist/with-css-injector.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/with-css-injector.tsx"],"sourcesContent":["import { ComponentType, useEffect } from 'react';\nimport { useMFEMetadataContext } from './contexts/mfe-metadata-context';\nimport { WEB_COMPONENT_NAME } from './globals';\n\nexport function withCssInjector<P extends object>(Component: ComponentType<P>): ComponentType<P> {\n    return function CssInjectorWrapper(props: P) {\n        const { shadowRoot, portalShadowRoot } = useMFEMetadataContext();\n\n        useEffect(() => {\n            window.__mfeStyles__ ??= {};\n            const mfeStyles = window.__mfeStyles__;\n            mfeStyles[WEB_COMPONENT_NAME] ??= Object.assign(new EventTarget(), {\n                sheets: new Map<string, CSSStyleSheet>(),\n            });\n            const emitter = mfeStyles[WEB_COMPONENT_NAME];\n            /*\n             * In self-hosted standalone dev mode (set by index.html), also adopt sheets\n             * into document so host-only CSS vars and fonts propagate to the page.\n             */\n            const roots = [\n                shadowRoot,\n                portalShadowRoot,\n                ...(window.__mfeSelfHosted__ ? [document] : []),\n            ];\n            function adoptSheet(sheet: CSSStyleSheet) {\n                for (const root of roots) {\n                    root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];\n                }\n            }\n\n            for (const sheet of emitter.sheets.values()) {\n                adoptSheet(sheet);\n            }\n\n            const handleNewSheet = ({ detail: sheetId }: CustomEvent<string>) => {\n                adoptSheet(emitter.sheets.get(sheetId)!);\n            };\n\n            emitter.addEventListener('new-sheet', handleNewSheet);\n            return () => emitter.removeEventListener('new-sheet', handleNewSheet);\n        }, [shadowRoot, portalShadowRoot]);\n\n        return <Component {...props} />;\n    };\n}\n"],"names":["useEffect","useMFEMetadataContext","WEB_COMPONENT_NAME","withCssInjector","Component","CssInjectorWrapper","props","shadowRoot","portalShadowRoot","window","mfeStyles","__mfeStyles__","Object","assign","EventTarget","sheets","Map","emitter","roots","__mfeSelfHosted__","document","adoptSheet","sheet","root","adoptedStyleSheets","values","handleNewSheet","detail","sheetId","get","addEventListener","removeEventListener"],"mappings":";AAAA,SAAwBA,SAAS,QAAQ,QAAQ;AACjD,SAASC,qBAAqB,QAAQ,kCAAkC;AACxE,SAASC,kBAAkB,QAAQ,YAAY;AAE/C,OAAO,SAASC,gBAAkCC,SAA2B;IACzE,OAAO,SAASC,mBAAmBC,KAAQ;QACvC,MAAM,EAAEC,UAAU,EAAEC,gBAAgB,EAAE,GAAGP;QAEzCD,UAAU;gBACNS,SAAAA,gBAEAC,YAAUR,qBAAVQ;aAFAD,iBAAAA,CAAAA,UAAAA,QAAOE,aAAa,cAApBF,4BAAAA,iBAAAA,QAAOE,aAAa,GAAK,CAAC;YAC1B,MAAMD,YAAYD,OAAOE,aAAa;aACtCD,IAAAA,CAAAA,aAAAA,UAAS,CAACR,sBAAAA,mBAAmB,cAA7BQ,eAAAA,IAAAA,UAAS,CAACR,oBAAmB,GAAKU,OAAOC,MAAM,CAAC,IAAIC,eAAe;gBAC/DC,QAAQ,IAAIC;YAChB;YACA,MAAMC,UAAUP,SAAS,CAACR,mBAAmB;YAC7C;;;aAGC,GACD,MAAMgB,QAAQ;gBACVX;gBACAC;mBACIC,OAAOU,iBAAiB,GAAG;oBAACC;iBAAS,GAAG,EAAE;aACjD;YACD,SAASC,WAAWC,KAAoB;gBACpC,KAAK,MAAMC,QAAQL,MAAO;oBACtBK,KAAKC,kBAAkB,GAAG;2BAAID,KAAKC,kBAAkB;wBAAEF;qBAAM;gBACjE;YACJ;YAEA,KAAK,MAAMA,SAASL,QAAQF,MAAM,CAACU,MAAM,GAAI;gBACzCJ,WAAWC;YACf;YAEA,MAAMI,iBAAiB,CAAC,EAAEC,QAAQC,OAAO,EAAuB;gBAC5DP,WAAWJ,QAAQF,MAAM,CAACc,GAAG,CAACD;YAClC;YAEAX,QAAQa,gBAAgB,CAAC,aAAaJ;YACtC,OAAO,IAAMT,QAAQc,mBAAmB,CAAC,aAAaL;QAC1D,GAAG;YAACnB;YAAYC;SAAiB;QAEjC,qBAAO,KAACJ;YAAW,GAAGE,KAAK;;IAC/B;AACJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/web-components",
-    "version": "36.1.0",
+    "version": "36.1.1-beta.1",
     "description": "Framework to build, register, and load Microfrontends into host applications",
     "homepage": "https://docs.st.dev/docs/frontend/uikit/web-components",
     "repository": {
@@ -10,14 +10,24 @@
     },
     "main": "./dist/index.js",
     "typings": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "default": "./dist/index.js"
+        },
+        "./register-headless": {
+            "types": "./dist/register-headless.d.ts",
+            "default": "./dist/register-headless.js"
+        }
+    },
     "sideEffects": false,
     "files": [
         "dist",
         "src"
     ],
     "dependencies": {
-        "@servicetitan/error-boundary": "36.1.0",
-        "@servicetitan/startup-utils": "36.1.0",
+        "@servicetitan/error-boundary": "36.1.1-beta.1",
+        "@servicetitan/startup-utils": "36.1.1-beta.1",
         "lodash.get": "~4.4.2",
         "mitt": "~3.0.1",
         "semver": "~7.7.4"
@@ -25,9 +35,9 @@
     "devDependencies": {
         "@servicetitan/anvil2": "^2.8.0",
         "@servicetitan/design-system": "~14.5.3",
-        "@servicetitan/launchdarkly-service": "36.1.0",
-        "@servicetitan/log-service": "36.1.0",
-        "@servicetitan/react-ioc": "36.1.0",
+        "@servicetitan/launchdarkly-service": "36.1.1-beta.1",
+        "@servicetitan/log-service": "36.1.1-beta.1",
+        "@servicetitan/react-ioc": "36.1.1-beta.1",
         "@testing-library/dom": "^10.4.1",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.2",
@@ -45,9 +55,9 @@
     "peerDependencies": {
         "@servicetitan/anvil2": ">=1.5.0",
         "@servicetitan/design-system": ">=14.5.3",
-        "@servicetitan/launchdarkly-service": "36.1.0",
-        "@servicetitan/log-service": "36.1.0",
-        "@servicetitan/react-ioc": "36.1.0",
+        "@servicetitan/launchdarkly-service": "36.1.1-beta.1",
+        "@servicetitan/log-service": "36.1.1-beta.1",
+        "@servicetitan/react-ioc": "36.1.1-beta.1",
         "history": "~4.10.1",
         "react": ">=17.0.2",
         "react-dom": ">=17.0.2"
@@ -68,6 +78,5 @@
     },
     "cli": {
         "webpack": false
-    },
-    "gitHead": "b7b5cade33151c4d183faf498ddc1321694b7b2b"
+    }
 }

package/src/__mocks__/register-anvil2-harness.tsx

@@ -0,0 +1,49 @@
+import { render } from '@testing-library/react';
+import { MockComponent, registerComponent } from './index';
+
+/* Wrapper components injected by each optional library. */
+export const optionalLibraryWrappers: Record<string, string[]> = {
+    '@servicetitan/anvil2': ['PortalProvider'],
+    '@servicetitan/design-system': [
+        'DefaultPortalContext.Provider',
+        'TablePopupPropsContext.Provider',
+    ],
+};
+
+export interface RegisterHarness {
+    Page: {
+        readonly componentShadowRoot: ShadowRoot;
+        readonly portalShadowRoot: ShadowRoot;
+    };
+    subject: () => ReturnType<typeof render>;
+}
+
+export function createRegisterHarness(
+    componentName: string,
+    options?: Parameters<typeof registerComponent>[2]
+): RegisterHarness {
+    const Page = {
+        get componentShadowRoot() {
+            return document.querySelector(componentName)!.shadowRoot!;
+        },
+        get portalShadowRoot() {
+            return document.querySelector('body')!.lastElementChild!.shadowRoot!;
+        },
+    };
+
+    beforeAll(() => {
+        registerComponent(MockComponent, componentName, {
+            sharedDependenciesNames: ['@servicetitan/anvil2'],
+            ...options,
+        });
+    });
+
+    const subject = () => {
+        jest.spyOn(console, 'error').mockImplementation(jest.fn()); // suppress "ReactDOM.render deprecated" error
+        const Component: any = componentName;
+        const handleRef = (wc: any) => wc?.provide({ foo: 'bar' }); // triggers rendering
+        return render(<Component ref={handleRef} />);
+    };
+
+    return { Page, subject };
+}

package/src/__mocks__/test-component.tsx

@@ -1,13 +1,20 @@
 import { TablePopupPropsContext } from '@servicetitan/design-system';
-import { FC, useContext } from 'react';
+import { createContext, FC, useContext } from 'react';
 import { useMFEDataContext, useMFEMetadataContext } from '../contexts';
 
 jest.mock('@progress/kendo-licensing', () => ({ validatePackage: jest.fn() }));
 
+const FallbackContext = createContext(undefined);
+
 export const MockComponent: FC<Record<string, any>> = props => {
     const data = useMFEDataContext();
     const metadata = useMFEMetadataContext();
-    const popupProps = useContext(TablePopupPropsContext);
+    /*
+     * TablePopupPropsContext is undefined when a test mocks
+     * @servicetitan/design-system as an empty object. Fall back to
+     * a no-op context so the component renders without it.
+     */
+    const popupProps = useContext(TablePopupPropsContext ?? FallbackContext);
     const appendTo = popupProps?.({}).appendTo;
 
     return (

package/src/__tests__/register-anvil2-optional.test.tsx

@@ -0,0 +1,32 @@
+/*
+ * Split from register-anvil2.test.tsx because register.tsx changed from
+ * dynamic require() to static `import * as` for Vite/ESM compatibility.
+ * The previous approach used jest.resetModules() mid-file to re-mock
+ * modules between tests, but static imports are resolved once at module
+ * load time and aren't affected by resetModules. Separate files give
+ * each test suite its own jest.mock declarations.
+ */
+import '@testing-library/jest-dom';
+import { within } from '@testing-library/react';
+import {
+    createRegisterHarness,
+    optionalLibraryWrappers,
+} from '../__mocks__/register-anvil2-harness';
+
+jest.mock('@servicetitan/anvil2', () => ({}));
+jest.mock('@servicetitan/design-system', () => ({}));
+
+describe('[web-components] register', () => {
+    const { Page, subject } = createRegisterHarness('mock-no-optional-deps');
+
+    for (const [library, wrappers] of Object.entries(optionalLibraryWrappers)) {
+        describe(`when ${library} is not present`, () => {
+            test.each(wrappers)('does not wrap component within %s', name => {
+                subject();
+
+                const element = within(Page.componentShadowRoot as any).queryByText(`<${name}>`);
+                expect(element).not.toBeInTheDocument();
+            });
+        });
+    }
+});

package/src/__tests__/register-anvil2.test.tsx

@@ -1,7 +1,11 @@
 import '@testing-library/jest-dom';
-import { render, within } from '@testing-library/react';
+import { within } from '@testing-library/react';
 import { Fragment } from 'react';
-import { expectStylesInDom, MockComponent, registerComponent } from '../__mocks__';
+import { expectStylesInDom } from '../__mocks__';
+import {
+    createRegisterHarness,
+    optionalLibraryWrappers,
+} from '../__mocks__/register-anvil2-harness';
 
 function mockComponent(name: string) {
     return {
@@ -37,30 +41,7 @@ jest.mock('@servicetitan/design-system', () => ({
 }));
 
 describe('[web-components] register', () => {
-    const componentName = 'mock-anvil2-app';
-
-    class Page {
-        static get componentShadowRoot() {
-            return document.querySelector(componentName)!.shadowRoot!;
-        }
-
-        static get portalShadowRoot() {
-            return document.querySelector('body')!.lastElementChild!.shadowRoot!;
-        }
-    }
-
-    beforeAll(() => {
-        registerComponent(MockComponent, componentName, {
-            sharedDependenciesNames: ['@servicetitan/anvil2'],
-        });
-    });
-
-    const subject = () => {
-        jest.spyOn(console, 'error').mockImplementation(jest.fn()); // suppress "ReactDOM.render deprecated" error
-        const Component: any = componentName;
-        const handleRef = (webComponent: any) => webComponent?.provide({ foo: 'bar' }); // triggers rendering
-        return render(<Component ref={handleRef} />);
-    };
+    const { Page, subject } = createRegisterHarness('mock-anvil2-app');
 
     describe('when Anvil2 bundle is present in the DOM', () => {
         let cssLink: HTMLLinkElement;
@@ -90,44 +71,10 @@ describe('[web-components] register', () => {
         });
     });
 
-    function itWrapsComponentWithin(name: string, expected: boolean = true) {
-        test(`${expected ? 'wraps' : 'does not wrap'} component within ${name}`, () => {
-            subject();
-
-            const element = within(Page.componentShadowRoot as any).queryByText(`<${name}>`);
-            if (expected) {
-                expect(element).toBeInTheDocument();
-            } else {
-                expect(element).not.toBeInTheDocument();
-            }
-        });
-    }
-
-    ['PortalProvider', 'DefaultPortalContext.Provider', 'TablePopupPropsContext.Provider'].forEach(
-        name => itWrapsComponentWithin(name)
-    );
-
-    describe('when @servicetitan/anvil2 is not present', () => {
-        beforeAll(() => {
-            jest.resetModules();
-            jest.mock('@servicetitan/anvil2', () => {
-                throw new Error('Cannot find module');
-            });
-        });
-
-        itWrapsComponentWithin('PortalProvider', false);
-    });
-
-    describe('when @servicetitan/design-system is not present', () => {
-        beforeAll(() => {
-            jest.resetModules();
-            jest.mock('@servicetitan/design-system', () => {
-                throw new Error('Cannot find module');
-            });
-        });
+    test.each(Object.values(optionalLibraryWrappers).flat())('wraps component within %s', name => {
+        subject();
 
-        ['DefaultPortalContext.Provider', 'TablePopupPropsContext.Provider'].forEach(name =>
-            itWrapsComponentWithin(name, false)
-        );
+        const element = within(Page.componentShadowRoot as any).queryByText(`<${name}>`);
+        expect(element).toBeInTheDocument();
     });
 });

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

@@ -0,0 +1,152 @@
+import { act, render } from '@testing-library/react';
+import { FC } from 'react';
+import { useMFEMetadataContext } from '../contexts/mfe-metadata-context';
+import { WEB_COMPONENT_NAME } from '../globals';
+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',
+}));
+
+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);
+
+    const componentName = WEB_COMPONENT_NAME as string;
+
+    let shadowRoot: ShadowRoot;
+    let portalShadowRoot: ShadowRoot;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        delete window.__mfeStyles__;
+        delete window.__mfeSelfHosted__;
+        shadowRoot = document.createElement('div').attachShadow({ mode: 'open' });
+        portalShadowRoot = document.createElement('span').attachShadow({ mode: 'open' });
+        document.adoptedStyleSheets = [];
+        shadowRoot.adoptedStyleSheets = [];
+        portalShadowRoot.adoptedStyleSheets = [];
+        jest.mocked(useMFEMetadataContext).mockImplementation(() => ({
+            shadowRoot,
+            portalShadowRoot,
+        }));
+    });
+
+    const subject = () => render(<WrappedComponent label={innerLabel} />);
+
+    const getEmitter = () => window.__mfeStyles__?.[componentName];
+
+    test('renders the wrapped component with its props', () => {
+        const { getByTestId } = subject();
+
+        expect(getByTestId(innerTestId).textContent).toBe(innerLabel);
+    });
+
+    test('initializes the styles registry on window', () => {
+        subject();
+
+        expect(window.__mfeStyles__).toBeDefined();
+    });
+
+    test('registers an emitter for the component', () => {
+        subject();
+
+        expect(getEmitter()?.sheets).toBeInstanceOf(Map);
+    });
+
+    describe('with a preexisting sheet in the emitter', () => {
+        const sheetId = 'sheet-1';
+        let sheet: CSSStyleSheet;
+
+        beforeEach(() => {
+            sheet = new CSSStyleSheet();
+            const emitter = Object.assign(new EventTarget(), {
+                sheets: new Map([[sheetId, sheet]]),
+            });
+            window.__mfeStyles__ = { [componentName]: emitter };
+        });
+
+        test('adopts the sheet into the shadow root', () => {
+            subject();
+
+            expect(shadowRoot.adoptedStyleSheets).toContain(sheet);
+        });
+
+        test('adopts the sheet into the portal shadow root', () => {
+            subject();
+
+            expect(portalShadowRoot!.adoptedStyleSheets).toContain(sheet);
+        });
+
+        test('reuses the existing emitter', () => {
+            const existingEmitter = getEmitter();
+
+            subject();
+
+            expect(getEmitter()).toBe(existingEmitter);
+        });
+
+        describe('when self-hosted in standalone development', () => {
+            beforeEach(() => {
+                window.__mfeSelfHosted__ = true;
+            });
+
+            test('adopts the sheet into document', () => {
+                subject();
+
+                expect(document.adoptedStyleSheets).toContain(sheet);
+            });
+        });
+    });
+
+    describe('when already mounted', () => {
+        let unmount: ReturnType<typeof subject>['unmount'];
+        let emitter: NonNullable<ReturnType<typeof getEmitter>>;
+
+        beforeEach(() => {
+            unmount = subject().unmount;
+            emitter = getEmitter()!;
+        });
+
+        function emit(sheet: CSSStyleSheet) {
+            const id = Math.floor(Math.random() * 1e6).toString(36);
+
+            emitter.sheets.set(id, sheet);
+            act(() => {
+                emitter.dispatchEvent(new CustomEvent<string>('new-sheet', { detail: id }));
+            });
+        }
+
+        describe('when a new-sheet event is dispatched', () => {
+            const sheet = new CSSStyleSheet();
+
+            beforeEach(() => emit(sheet));
+
+            test('adopts the newly added sheet into the shadow root', () => {
+                expect(shadowRoot.adoptedStyleSheets).toContain(sheet);
+            });
+
+            test('adopts the newly added sheet into the portal shadow root', () => {
+                expect(portalShadowRoot!.adoptedStyleSheets).toContain(sheet);
+            });
+        });
+
+        describe('when unmounted', () => {
+            beforeEach(() => unmount());
+
+            test('stops adopting newly added sheets', () => {
+                const sheet = new CSSStyleSheet();
+
+                emit(sheet);
+
+                expect(shadowRoot.adoptedStyleSheets).not.toContain(sheet);
+            });
+        });
+    });
+});

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

@@ -10,3 +10,4 @@ export * from './register-headless';
 export * from './use-prefetch';
 
 export type { JSON, JSONPrimitive, Serializable } from './types';
+export { withCssInjector } from './with-css-injector';

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

@@ -1,8 +1,10 @@
+import * as Anvil2 from '@servicetitan/anvil2';
+import * as Anvil1 from '@servicetitan/design-system';
 import { type LDService } from '@servicetitan/launchdarkly-service';
 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 { ComponentType, FC, PropsWithChildren, ReactElement, useCallback, useEffect } from 'react';
 import {
     BASENAME_TOKEN,
     Entries,
@@ -40,6 +42,43 @@ export interface RegisterOptions {
     sharedDependenciesNames?: string[];
 }
 
+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>
+    );
+};
+
+const Anvil2Providers: FC<{ portalAnvilContainer: HTMLDivElement } & PropsWithChildren> = ({
+    portalAnvilContainer,
+    children,
+}) => {
+    if (Anvil2.PortalProvider === undefined) {
+        return children;
+    }
+
+    return <Anvil2.PortalProvider root={portalAnvilContainer}>{children}</Anvil2.PortalProvider>;
+};
+
 export function register(Component: ComponentType, light: boolean, options?: RegisterOptions) {
     class WebComponent extends HTMLElement implements IWebComponent {
         private root?: ShadowRoot;
@@ -165,47 +204,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 = () => {

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 {