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

package/dist/utils/load-scripts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"load-scripts.d.ts","sourceRoot":"","sources":["../../src/utils/load-scripts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,UAAU,mBAmC7D"}
+{"version":3,"file":"load-scripts.d.ts","sourceRoot":"","sources":["../../src/utils/load-scripts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,EAAE,UAAU,mBAwCrE"}

package/dist/utils/load-scripts.js

@@ -1,16 +1,20 @@
-export function loadScripts({ urls, WebComponent }) {
+export function loadScripts({ urls, WebComponent, module }) {
     return Promise.all(urls.js.map((url)=>{
         const script = Array.from(document.scripts).find(({ src })=>src === url);
         if (!script) {
             return new Promise((resolve)=>{
                 const script = document.createElement('script');
+                if (module) {
+                    script.type = 'module';
+                } else {
+                    script.async = true;
+                }
                 script.crossOrigin = 'anonymous';
                 script.onload = ()=>{
                     script.dataset.webComponent = WebComponent;
                     script.onload = null;
                     resolve();
                 };
-                script.async = true;
                 script.src = url;
                 document.body.append(script);
             });

package/dist/utils/load-scripts.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/load-scripts.ts"],"sourcesContent":["import { BundleInfo } from './get-bundle-info';\n\nexport function loadScripts({ urls, WebComponent }: BundleInfo) {\n    return Promise.all(\n        urls.js.map(url => {\n            const script = Array.from(document.scripts).find(({ src }) => src === url);\n            if (!script) {\n                return new Promise<void>(resolve => {\n                    const script = document.createElement('script');\n\n                    script.crossOrigin = 'anonymous';\n                    script.onload = () => {\n                        script.dataset.webComponent = WebComponent;\n                        script.onload = null;\n                        resolve();\n                    };\n                    script.async = true;\n                    script.src = url;\n\n                    document.body.append(script);\n                });\n            }\n\n            if (!script.dataset.webComponent) {\n                return new Promise<void>(resolve => {\n                    const originalOnload = script.onload;\n                    script.onload = (...args) => {\n                        originalOnload?.call(script, ...args);\n                        script.onload = null;\n                        resolve();\n                    };\n                });\n            }\n\n            return Promise.resolve();\n        })\n    );\n}\n"],"names":["loadScripts","urls","WebComponent","Promise","all","js","map","url","script","Array","from","document","scripts","find","src","resolve","createElement","crossOrigin","onload","dataset","webComponent","async","body","append","originalOnload","args","call"],"mappings":"AAEA,OAAO,SAASA,YAAY,EAAEC,IAAI,EAAEC,YAAY,EAAc;IAC1D,OAAOC,QAAQC,GAAG,CACdH,KAAKI,EAAE,CAACC,GAAG,CAACC,CAAAA;QACR,MAAMC,SAASC,MAAMC,IAAI,CAACC,SAASC,OAAO,EAAEC,IAAI,CAAC,CAAC,EAAEC,GAAG,EAAE,GAAKA,QAAQP;QACtE,IAAI,CAACC,QAAQ;YACT,OAAO,IAAIL,QAAcY,CAAAA;gBACrB,MAAMP,SAASG,SAASK,aAAa,CAAC;gBAEtCR,OAAOS,WAAW,GAAG;gBACrBT,OAAOU,MAAM,GAAG;oBACZV,OAAOW,OAAO,CAACC,YAAY,GAAGlB;oBAC9BM,OAAOU,MAAM,GAAG;oBAChBH;gBACJ;gBACAP,OAAOa,KAAK,GAAG;gBACfb,OAAOM,GAAG,GAAGP;gBAEbI,SAASW,IAAI,CAACC,MAAM,CAACf;YACzB;QACJ;QAEA,IAAI,CAACA,OAAOW,OAAO,CAACC,YAAY,EAAE;YAC9B,OAAO,IAAIjB,QAAcY,CAAAA;gBACrB,MAAMS,iBAAiBhB,OAAOU,MAAM;gBACpCV,OAAOU,MAAM,GAAG,CAAC,GAAGO;oBAChBD,2BAAAA,qCAAAA,eAAgBE,IAAI,CAAClB,WAAWiB;oBAChCjB,OAAOU,MAAM,GAAG;oBAChBH;gBACJ;YACJ;QACJ;QAEA,OAAOZ,QAAQY,OAAO;IAC1B;AAER"}
+{"version":3,"sources":["../../src/utils/load-scripts.ts"],"sourcesContent":["import { BundleInfo } from './get-bundle-info';\n\nexport function loadScripts({ urls, WebComponent, module }: BundleInfo) {\n    return Promise.all(\n        urls.js.map(url => {\n            const script = Array.from(document.scripts).find(({ src }) => src === url);\n            if (!script) {\n                return new Promise<void>(resolve => {\n                    const script = document.createElement('script');\n\n                    if (module) {\n                        script.type = 'module';\n                    } else {\n                        script.async = true;\n                    }\n\n                    script.crossOrigin = 'anonymous';\n                    script.onload = () => {\n                        script.dataset.webComponent = WebComponent;\n                        script.onload = null;\n                        resolve();\n                    };\n                    script.src = url;\n\n                    document.body.append(script);\n                });\n            }\n\n            if (!script.dataset.webComponent) {\n                return new Promise<void>(resolve => {\n                    const originalOnload = script.onload;\n                    script.onload = (...args) => {\n                        originalOnload?.call(script, ...args);\n                        script.onload = null;\n                        resolve();\n                    };\n                });\n            }\n\n            return Promise.resolve();\n        })\n    );\n}\n"],"names":["loadScripts","urls","WebComponent","module","Promise","all","js","map","url","script","Array","from","document","scripts","find","src","resolve","createElement","type","async","crossOrigin","onload","dataset","webComponent","body","append","originalOnload","args","call"],"mappings":"AAEA,OAAO,SAASA,YAAY,EAAEC,IAAI,EAAEC,YAAY,EAAEC,MAAM,EAAc;IAClE,OAAOC,QAAQC,GAAG,CACdJ,KAAKK,EAAE,CAACC,GAAG,CAACC,CAAAA;QACR,MAAMC,SAASC,MAAMC,IAAI,CAACC,SAASC,OAAO,EAAEC,IAAI,CAAC,CAAC,EAAEC,GAAG,EAAE,GAAKA,QAAQP;QACtE,IAAI,CAACC,QAAQ;YACT,OAAO,IAAIL,QAAcY,CAAAA;gBACrB,MAAMP,SAASG,SAASK,aAAa,CAAC;gBAEtC,IAAId,QAAQ;oBACRM,OAAOS,IAAI,GAAG;gBAClB,OAAO;oBACHT,OAAOU,KAAK,GAAG;gBACnB;gBAEAV,OAAOW,WAAW,GAAG;gBACrBX,OAAOY,MAAM,GAAG;oBACZZ,OAAOa,OAAO,CAACC,YAAY,GAAGrB;oBAC9BO,OAAOY,MAAM,GAAG;oBAChBL;gBACJ;gBACAP,OAAOM,GAAG,GAAGP;gBAEbI,SAASY,IAAI,CAACC,MAAM,CAAChB;YACzB;QACJ;QAEA,IAAI,CAACA,OAAOa,OAAO,CAACC,YAAY,EAAE;YAC9B,OAAO,IAAInB,QAAcY,CAAAA;gBACrB,MAAMU,iBAAiBjB,OAAOY,MAAM;gBACpCZ,OAAOY,MAAM,GAAG,CAAC,GAAGM;oBAChBD,2BAAAA,qCAAAA,eAAgBE,IAAI,CAACnB,WAAWkB;oBAChClB,OAAOY,MAAM,GAAG;oBAChBL;gBACJ;YACJ;QACJ;QAEA,OAAOZ,QAAQY,OAAO;IAC1B;AAER"}

package/dist/with-css-injector.d.ts

@@ -0,0 +1,3 @@
+import { ComponentType } from 'react';
+export declare function withCssInjector<P extends object>(Component: ComponentType<P>): ComponentType<P>;
+//# sourceMappingURL=with-css-injector.d.ts.map

package/dist/with-css-injector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-css-injector.d.ts","sourceRoot":"","sources":["../src/with-css-injector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAa,MAAM,OAAO,CAAC;AAIjD,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,EAAE,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CAwC/F"}

package/dist/with-css-injector.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { useMFEMetadataContext } from './contexts/mfe-metadata-context';
+import { WEB_COMPONENT_NAME } from './globals';
+export function withCssInjector(Component) {
+    return function CssInjectorWrapper(props) {
+        const { shadowRoot, portalShadowRoot } = useMFEMetadataContext();
+        useEffect(()=>{
+            var _window, ___mfeStyles__, _mfeStyles, _WEB_COMPONENT_NAME, _;
+            (___mfeStyles__ = (_window = window).__mfeStyles__) !== null && ___mfeStyles__ !== void 0 ? ___mfeStyles__ : _window.__mfeStyles__ = {};
+            const mfeStyles = window.__mfeStyles__;
+            (_ = (_mfeStyles = mfeStyles)[_WEB_COMPONENT_NAME = WEB_COMPONENT_NAME]) !== null && _ !== void 0 ? _ : _mfeStyles[_WEB_COMPONENT_NAME] = Object.assign(new EventTarget(), {
+                sheets: new Map()
+            });
+            const emitter = mfeStyles[WEB_COMPONENT_NAME];
+            /*
+             * In self-hosted standalone dev mode (set by index.html), also adopt sheets
+             * into document so host-only CSS vars and fonts propagate to the page.
+             */ const roots = [
+                shadowRoot,
+                portalShadowRoot,
+                ...window.__mfeSelfHosted__ ? [
+                    document
+                ] : []
+            ];
+            function adoptSheet(sheet) {
+                for (const root of roots){
+                    root.adoptedStyleSheets = [
+                        ...root.adoptedStyleSheets,
+                        sheet
+                    ];
+                }
+            }
+            for (const sheet of emitter.sheets.values()){
+                adoptSheet(sheet);
+            }
+            const handleNewSheet = ({ detail: sheetId })=>{
+                adoptSheet(emitter.sheets.get(sheetId));
+            };
+            emitter.addEventListener('new-sheet', handleNewSheet);
+            return ()=>emitter.removeEventListener('new-sheet', handleNewSheet);
+        }, [
+            shadowRoot,
+            portalShadowRoot
+        ]);
+        return /*#__PURE__*/ _jsx(Component, {
+            ...props
+        });
+    };
+}
+
+//# sourceMappingURL=with-css-injector.js.map

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.0.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,24 +10,34 @@
     },
     "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.0.0",
-        "@servicetitan/startup-utils": "36.0.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"
     },
     "devDependencies": {
-        "@servicetitan/anvil2": "^2.7.0",
+        "@servicetitan/anvil2": "^2.8.0",
         "@servicetitan/design-system": "~14.5.3",
-        "@servicetitan/launchdarkly-service": "36.0.0",
-        "@servicetitan/log-service": "36.0.0",
-        "@servicetitan/react-ioc": "36.0.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.0.0",
-        "@servicetitan/log-service": "36.0.0",
-        "@servicetitan/react-ioc": "36.0.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": "73584720991027dd55eaeb24fb8e09bad656dbad"
+    }
 }

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__/loader.test.tsx

@@ -403,6 +403,18 @@ describe('[web-components] Loader', () => {
             () => `${baseUrl}/dist/bundle/light/${metadata.entrypoints!.light.css[0]}`
         );
 
+        describe('when entrypoint has module: true', () => {
+            beforeEach(() => {
+                metadata.entrypoints!.light.module = true;
+            });
+
+            test('creates script with type="module"', async () => {
+                await scriptLoadedSetup();
+
+                expect(document.querySelector('script')).toHaveAttribute('type', 'module');
+            });
+        });
+
         describe('when the startup version is < 17.0.0', () => {
             beforeEach(() => {
                 setStartupVersion('16.0.0');

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<