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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/web-components",
-    "version": "36.1.1-beta.1",
+    "version": "36.2.0",
     "description": "Framework to build, register, and load Microfrontends into host applications",
     "homepage": "https://docs.st.dev/docs/frontend/uikit/web-components",
     "repository": {
@@ -10,34 +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.1-beta.1",
-        "@servicetitan/startup-utils": "36.1.1-beta.1",
+        "@servicetitan/error-boundary": "36.2.0",
+        "@servicetitan/startup-utils": "36.2.0",
         "lodash.get": "~4.4.2",
         "mitt": "~3.0.1",
         "semver": "~7.7.4"
     },
     "devDependencies": {
-        "@servicetitan/anvil2": "^2.8.0",
+        "@servicetitan/anvil2": "^3.0.4",
         "@servicetitan/design-system": "~14.5.3",
-        "@servicetitan/launchdarkly-service": "36.1.1-beta.1",
-        "@servicetitan/log-service": "36.1.1-beta.1",
-        "@servicetitan/react-ioc": "36.1.1-beta.1",
+        "@servicetitan/launchdarkly-service": "36.2.0",
+        "@servicetitan/log-service": "36.2.0",
+        "@servicetitan/react-ioc": "36.2.0",
         "@testing-library/dom": "^10.4.1",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.2",
@@ -55,9 +45,9 @@
     "peerDependencies": {
         "@servicetitan/anvil2": ">=1.5.0",
         "@servicetitan/design-system": ">=14.5.3",
-        "@servicetitan/launchdarkly-service": "36.1.1-beta.1",
-        "@servicetitan/log-service": "36.1.1-beta.1",
-        "@servicetitan/react-ioc": "36.1.1-beta.1",
+        "@servicetitan/launchdarkly-service": "36.2.0",
+        "@servicetitan/log-service": "36.2.0",
+        "@servicetitan/react-ioc": "36.2.0",
         "history": "~4.10.1",
         "react": ">=17.0.2",
         "react-dom": ">=17.0.2"
@@ -78,5 +68,6 @@
     },
     "cli": {
         "webpack": false
-    }
+    },
+    "gitHead": "87254b2caf60b20eb46c33b40ffb4dd05ad3e0f7"
 }

package/src/__mocks__/test-component.tsx

@@ -1,20 +1,13 @@
 import { TablePopupPropsContext } from '@servicetitan/design-system';
-import { createContext, FC, useContext } from 'react';
+import { 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();
-    /*
-     * 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 popupProps = useContext(TablePopupPropsContext);
     const appendTo = popupProps?.({}).appendTo;
 
     return (

package/src/__tests__/event-bus-types.test.ts

@@ -27,7 +27,8 @@ describe(`[web-components] ${EventBus.name}`, () => {
         describe('EventBus<T>', () => {
             test('rejects invalid data type', () => {
                 // @ts-expect-error Types of property 'foo' are incompatible.
-                eventBus = EventBus<{ foo: () => void }>;
+                const eventBus = EventBus<{ foo: () => void }>;
+                expect(eventBus).toBeDefined();
             });
         });
 

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

@@ -1,11 +1,7 @@
 import '@testing-library/jest-dom';
-import { within } from '@testing-library/react';
+import { render, within } from '@testing-library/react';
 import { Fragment } from 'react';
-import { expectStylesInDom } from '../__mocks__';
-import {
-    createRegisterHarness,
-    optionalLibraryWrappers,
-} from '../__mocks__/register-anvil2-harness';
+import { expectStylesInDom, MockComponent, registerComponent } from '../__mocks__';
 
 function mockComponent(name: string) {
     return {
@@ -41,7 +37,30 @@ jest.mock('@servicetitan/design-system', () => ({
 }));
 
 describe('[web-components] register', () => {
-    const { Page, subject } = createRegisterHarness('mock-anvil2-app');
+    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} />);
+    };
 
     describe('when Anvil2 bundle is present in the DOM', () => {
         let cssLink: HTMLLinkElement;
@@ -71,10 +90,44 @@ describe('[web-components] register', () => {
         });
     });
 
-    test.each(Object.values(optionalLibraryWrappers).flat())('wraps component within %s', name => {
-        subject();
+    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');
+            });
+        });
 
-        const element = within(Page.componentShadowRoot as any).queryByText(`<${name}>`);
-        expect(element).toBeInTheDocument();
+        ['DefaultPortalContext.Provider', 'TablePopupPropsContext.Provider'].forEach(name =>
+            itWrapsComponentWithin(name, false)
+        );
     });
 });

package/src/globals.ts

@@ -1,6 +1,4 @@
 /* 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';
 
@@ -10,13 +8,6 @@ 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();
@@ -25,28 +16,17 @@ function get<T>(fetch: () => T) {
     }
 }
 
-const _EXPOSED_DEPENDENCIES =
-    get(() => {
-        return EXPOSED_DEPENDENCIES;
-    }) ??
-    get(() => {
-        return import.meta.env.EXPOSED_DEPENDENCIES;
-    });
+const _EXPOSED_DEPENDENCIES = get(() => {
+    return EXPOSED_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;
-    });
+const _WEB_COMPONENT_NAME = get(() => {
+    return WEB_COMPONENT_NAME;
+});
+
+const _EXPOSED_INSTANCE_DEPENDENCIES = get(() => {
+    return EXPOSED_INSTANCE_DEPENDENCIES;
+});
 
 export {
     _EXPOSED_DEPENDENCIES as EXPOSED_DEPENDENCIES,

package/src/index.ts

@@ -10,4 +10,3 @@ 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,7 +2,6 @@ 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,10 +1,8 @@
-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, PropsWithChildren, ReactElement, useCallback, useEffect } from 'react';
+import { ComponentType, FC, ReactElement, useEffect } from 'react';
 import {
     BASENAME_TOKEN,
     Entries,
@@ -42,43 +40,6 @@ 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;
@@ -204,14 +165,47 @@ export function register(Component: ComponentType, light: boolean, options?: Reg
             return elements;
         };
 
-        private withProviders(children: ReactElement) {
-            return (
-                <Anvil2Providers portalAnvilContainer={this.portalAnvilContainer!}>
-                    <Anvil1Providers root={this.root!} portal={this.portal!}>
-                        {children}
-                    </Anvil1Providers>
-                </Anvil2Providers>
-            );
+        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 render = () => {

package/src/render.ts

@@ -1,7 +1,18 @@
 /* eslint-disable react/no-deprecated */
 import { ReactElement } from 'react';
 import ReactDOM from 'react-dom';
-import * as ReactDOMClient from 'react-dom/client';
+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
+}
 
 interface RenderOptions {
     legacyRoot?: boolean;
@@ -17,11 +28,11 @@ export function render(
     container: Element | DocumentFragment,
     options?: RenderOptions
 ): RenderResult {
-    if (typeof ReactDOMClient.createRoot !== 'function' || options?.legacyRoot) {
+    if (typeof createRoot !== 'function' || options?.legacyRoot) {
         return renderLegacyRoot(element, container);
     }
 
-    const root = ReactDOMClient.createRoot(container);
+    const root = createRoot(container);
     root.render(element);
 
     return {

package/src/utils/get-bundle-info.ts

@@ -78,13 +78,14 @@ export async function getBundleInfo({
         resolvedBundleType = embed ? 'light' : 'full';
     }
 
-    const bundleBaseUrl = `${exactPackageUrl}/dist/bundle/${resolvedBundleType}`;
+    const withBaseUrl = (path: string) =>
+        `${exactPackageUrl}/dist/bundle/${resolvedBundleType}/${path}`;
 
     let entrypoints: EntryPoints;
     if (metadata.entrypoints?.[resolvedBundleType]) {
         entrypoints = metadata.entrypoints[resolvedBundleType];
     } else {
-        entrypoints = await getEntrypoints(`${bundleBaseUrl}/entrypoints.json`, requestCache);
+        entrypoints = await getEntrypoints(withBaseUrl('entrypoints.json'), requestCache);
     }
 
     const disposer = () => {
@@ -96,16 +97,9 @@ export async function getBundleInfo({
         }
     };
 
-    let baseUrl = bundleBaseUrl;
-    if (entrypoints.port) {
-        const url = new URL(baseUrl);
-        url.port = String(entrypoints.port);
-        baseUrl = url.toString();
-    }
-
     const urls: EntryPoints = {
-        css: entrypoints.css.map(path => `${baseUrl}/${path}`),
-        js: entrypoints.js.map(path => `${baseUrl}/${path}`),
+        css: entrypoints.css.map(withBaseUrl),
+        js: entrypoints.js.map(withBaseUrl),
     };
 
     const elementName = resolvedBundleType === 'headless' ? `headless-${name}` : name;

package/src/utils/get-entry-points.ts

@@ -4,7 +4,6 @@ export interface EntryPoints {
     css: string[];
     js: string[];
     module?: true;
-    port?: number;
 }
 
 export async function getEntrypoints(

package/src/utils/get-ld-service-token.ts

@@ -1,5 +1,13 @@
-import * as LDService from '@servicetitan/launchdarkly-service';
+import { type LDService } from '@servicetitan/launchdarkly-service';
+import { SymbolToken } from '@servicetitan/react-ioc';
+
+let token: SymbolToken<LDService>;
+try {
+    token = require('@servicetitan/launchdarkly-service').LD_SERVICE_TOKEN;
+} catch {
+    // ignore
+}
 
 export function getLDServiceToken() {
-    return LDService.LD_SERVICE_TOKEN;
+    return token;
 }

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

@@ -1,3 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,52 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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/src/__mocks__/register-anvil2-harness.tsx

@@ -1,49 +0,0 @@
-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/__tests__/register-anvil2-optional.test.tsx

@@ -1,32 +0,0 @@
-/*
- * 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();
-            });
-        });
-    }
-});