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

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

@@ -1,152 +0,0 @@
-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/with-css-injector.tsx

@@ -1,45 +0,0 @@
-import { ComponentType, useEffect } from 'react';
-import { useMFEMetadataContext } from './contexts/mfe-metadata-context';
-import { WEB_COMPONENT_NAME } from './globals';
-
-export function withCssInjector<P extends object>(Component: ComponentType<P>): ComponentType<P> {
-    return function CssInjectorWrapper(props: P) {
-        const { shadowRoot, portalShadowRoot } = useMFEMetadataContext();
-
-        useEffect(() => {
-            window.__mfeStyles__ ??= {};
-            const mfeStyles = window.__mfeStyles__;
-            mfeStyles[WEB_COMPONENT_NAME] ??= Object.assign(new EventTarget(), {
-                sheets: new Map<string, CSSStyleSheet>(),
-            });
-            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: CSSStyleSheet) {
-                for (const root of roots) {
-                    root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
-                }
-            }
-
-            for (const sheet of emitter.sheets.values()) {
-                adoptSheet(sheet);
-            }
-
-            const handleNewSheet = ({ detail: sheetId }: CustomEvent<string>) => {
-                adoptSheet(emitter.sheets.get(sheetId)!);
-            };
-
-            emitter.addEventListener('new-sheet', handleNewSheet);
-            return () => emitter.removeEventListener('new-sheet', handleNewSheet);
-        }, [shadowRoot, portalShadowRoot]);
-
-        return <Component {...props} />;
-    };
-}