@servicetitan/web-components 23.0.0 → 23.2.0

package/dist/utils/web-component.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useMemo, useState } from 'react';
+import { useOptionalDependencies } from '@servicetitan/react-ioc';
+import { HistoryManager } from '../history-manager';
+export function webComponent(props) {
+    const { basename, bundleInfo, eventBus, exposedDependencies, logService, LoadingFallback } = props;
+    const { WebComponent, disposer, mfeSupportsRerendering } = bundleInfo;
+    return (props) => {
+        const [isLoading, setIsLoading] = useState(true);
+        const [historyManager] = useOptionalDependencies(HistoryManager);
+        const handleRef = (webComponent) => {
+            webComponent === null || webComponent === void 0 ? void 0 : webComponent.provide({
+                logService,
+                historyManager,
+                exposedDependencies,
+                eventBus,
+                basename,
+                onReady: () => {
+                    setIsLoading(false);
+                },
+                onDispose: () => {
+                    disposer();
+                },
+            });
+        };
+        const stringifiedData = useMemo(() => JSON.stringify(props.data), [props.data]);
+        /*
+         * Set key for rendering the web component so that if the data from the Host change,
+         * and the MFE's version of startup doesn't support watching for data changes, then
+         * the web component will be re-mounted whenever the data changes.
+         * This is only used as a fallback when the MFE's version is older.
+         */
+        const key = mfeSupportsRerendering ? undefined : stringifiedData;
+        const dataAttrs = useMemo(() => composeDataAttributes(props.data), [props.data]);
+        const styleUrls = getStyleUrls(bundleInfo);
+        return (_jsxs(Fragment, { children: [isLoading && _jsx(LoadingFallback, {}), _jsx(WebComponent, Object.assign({ ref: handleRef, class: props.className }, (styleUrls && { 'style-urls': styleUrls }), dataAttrs, { "data-mfe-data": stringifiedData }), key)] }));
+    };
+}
+/*
+ * Convert camelCase data props to kebab-case data attributes, prepended with data-
+ * Ex: fooBar -> data-foo-bar
+ */
+function composeDataAttributes(data = {}) {
+    return Object.fromEntries(Object.entries(data).map(([key, value]) => [
+        'data-' + key.replace(/[A-Z]/g, letter => '-' + letter.toLowerCase()),
+        value,
+    ]));
+}
+function getStyleUrls({ urls }) {
+    if (urls.css.length) {
+        return encodeURIComponent(JSON.stringify(urls.css));
+    }
+}
+//# sourceMappingURL=web-component.js.map

package/dist/utils/web-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"web-component.js","sourceRoot":"","sources":["../../src/utils/web-component.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAMlE,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAYpD,MAAM,UAAU,YAAY,CAAC,KAAwB;IACjD,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,mBAAmB,EAAE,UAAU,EAAE,eAAe,EAAE,GACtF,KAAK,CAAC;IACV,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,sBAAsB,EAAE,GAAG,UAAU,CAAC;IAEtE,OAAO,CAAC,KAAsB,EAAE,EAAE;QAC9B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;QACjD,MAAM,CAAC,cAAc,CAAC,GAAG,uBAAuB,CAAC,cAAc,CAAC,CAAC;QAEjE,MAAM,SAAS,GAAG,CAAC,YAAkC,EAAE,EAAE;YACrD,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,CAAC;gBAClB,UAAU;gBACV,cAAc;gBACd,mBAAmB;gBACnB,QAAQ;gBACR,QAAQ;gBACR,OAAO,EAAE,GAAG,EAAE;oBACV,YAAY,CAAC,KAAK,CAAC,CAAC;gBACxB,CAAC;gBACD,SAAS,EAAE,GAAG,EAAE;oBACZ,QAAQ,EAAE,CAAC;gBACf,CAAC;aACJ,CAAC,CAAC;QACP,CAAC,CAAC;QAEF,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;QAEhF;;;;;WAKG;QACH,MAAM,GAAG,GAAG,sBAAsB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC;QACjE,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;QACjF,MAAM,SAAS,GAAG,YAAY,CAAC,UAAU,CAAC,CAAC;QAE3C,OAAO,CACH,MAAC,QAAQ,eACJ,SAAS,IAAI,KAAC,eAAe,KAAG,EACjC,KAAC,YAAY,kBAET,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,KAAK,CAAC,SAAS,IAClB,CAAC,SAAS,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,EAK1C,SAAS,qBAEE,eAAe,KAVzB,GAAG,CAWV,IACK,CACd,CAAC;IACN,CAAC,CAAC;AACN,CAAC;AAED;;;GAGG;AACH,SAAS,qBAAqB,CAAC,OAAuC,EAAE;IACpE,OAAO,MAAM,CAAC,WAAW,CACrB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC;QACvC,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,MAAM,CAAC,EAAE,CAAC,GAAG,GAAG,MAAM,CAAC,WAAW,EAAE,CAAC;QACrE,KAAK;KACR,CAAC,CACL,CAAC;AACN,CAAC;AAED,SAAS,YAAY,CAAC,EAAE,IAAI,EAA4B;IACpD,IAAI,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE;QACjB,OAAO,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;KACvD;AACL,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/web-components",
-    "version": "23.0.0",
+    "version": "23.2.0",
     "description": "",
     "repository": {
         "type": "git",
@@ -15,36 +15,35 @@
         "src"
     ],
     "dependencies": {
-        "@servicetitan/error-boundary": "23.0.0",
+        "@servicetitan/error-boundary": "23.2.0",
         "lodash.get": "~4.4.2",
         "mitt": "~3.0.1",
         "semver": "~7.5.4"
     },
     "devDependencies": {
-        "@servicetitan/design-system": "~12.6.2",
-        "@servicetitan/log-service": "23.0.0",
-        "@servicetitan/react-ioc": "23.0.0",
-        "@testing-library/dom": "^8.20.1",
+        "@servicetitan/design-system": "~14.0.0",
+        "@servicetitan/log-service": "23.2.0",
+        "@servicetitan/react-ioc": "23.2.0",
+        "@testing-library/dom": "^9.0.0",
         "@testing-library/jest-dom": "^6.4.2",
-        "@testing-library/react": "^12.1.5",
-        "@testing-library/react-hooks": "^8.0.1",
+        "@testing-library/react": "^14.2.1",
         "@types/history": "~4.7.10",
         "@types/lodash.get": "~4.4.6",
-        "@types/react": "~17.0.38",
-        "@types/react-dom": "~17.0.11",
+        "@types/react": "~18.2.55",
+        "@types/react-dom": "~18.2.19",
         "@types/semver": "~7.5.0",
         "history": "~4.10.1",
-        "react": "~17.0.2",
-        "react-dom": "~17.0.2",
+        "react": "~18.2.0",
+        "react-dom": "~18.2.0",
         "shadow-dom-testing-library": "^1.11.0"
     },
     "peerDependencies": {
-        "@servicetitan/design-system": "~12.6.2",
-        "@servicetitan/log-service": "23.0.0",
-        "@servicetitan/react-ioc": "23.0.0",
+        "@servicetitan/design-system": ">=12.6.2",
+        "@servicetitan/log-service": "23.2.0",
+        "@servicetitan/react-ioc": "23.2.0",
         "history": "~4.10.1",
-        "react": "~17.0.2",
-        "react-dom": "~17.0.2"
+        "react": ">=17.0.2",
+        "react-dom": ">=17.0.2"
     },
     "publishConfig": {
         "access": "public"
@@ -52,5 +51,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "45876ed36415ad78d3ec4ef3783d6df1430504d3"
+    "gitHead": "4b72bab5ab6cb52a688d9329c7fbaa702ae6780c"
 }

package/src/__mocks__/index.ts

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

package/src/__mocks__/register-component.tsx

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

package/src/__mocks__/test-component.tsx

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

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

@@ -1,5 +1,5 @@
 import * as mitt from 'mitt';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { useEventBus, EventBus } from '../event-bus';
 
 jest.mock('mitt', () => jest.fn());
@@ -138,9 +138,10 @@ describe(`[web-components] ${useEventBus.name}`, () => {
     test('when the component using useEventBus is re-rendered, useEventBus provides the same event bus instance', () => {
         const { result, rerender } = subject();
 
+        const firstInstance = result.current;
         rerender();
 
-        const [firstInstance, secondInstance] = result.all;
+        const secondInstance = result.current;
         expect(firstInstance).toBe(secondInstance);
     });
 });

package/src/__tests__/loader.test.tsx

@@ -1,14 +1,20 @@
-import { Metadata, Loader, LoaderProps } from '../loader';
-import { act, render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { Entries, EXPOSED_DEPENDENCIES_TOKEN } from '../common';
-import * as common from '../common';
-import * as utils from '../utils';
-import { FC } from 'react';
-import { Provider, ProviderProps } from '@servicetitan/react-ioc';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import { Log } from '@servicetitan/log-service';
-import { HistoryManager } from '../history-manager';
+import { Provider, ProviderProps } from '@servicetitan/react-ioc';
+import { FC } from 'react';
+
+import * as common from '../common';
+import { Entries, EXPOSED_DEPENDENCIES_TOKEN } from '../common';
 import { EVENT_BUS_TOKEN } from '../event-bus';
+import { HistoryManager } from '../history-manager';
+import { Loader, LoaderProps } from '../loader';
+import { Metadata } from '../utils/get-bundle-info';
+import { getVersionMismatches } from '../utils/get-version-mismatches';
+
+jest.mock('../utils/get-version-mismatches', () => ({
+    getVersionMismatches: jest.fn(),
+}));
 
 describe('[web-components] Loader', () => {
     const baseUrl = 'http://localhost/mfe';
@@ -108,7 +114,7 @@ describe('[web-components] Loader', () => {
             }
             return getJsonMockFns[url]();
         });
-        jest.spyOn(utils, 'getVersionMismatches').mockReturnValue({});
+        jest.mocked(getVersionMismatches).mockReturnValue({});
     });
 
     function subject() {
@@ -249,7 +255,7 @@ describe('[web-components] Loader', () => {
 
             test('dependencies are pulled from package.json', async () => {
                 await scriptLoadedSetup();
-                expect(utils.getVersionMismatches).toHaveBeenCalledWith(
+                expect(getVersionMismatches).toHaveBeenCalledWith(
                     expect.anything(),
                     dependencies,
                     expect.anything()
@@ -586,7 +592,7 @@ describe('[web-components] Loader', () => {
                 };
 
                 beforeEach(() => {
-                    jest.spyOn(utils, 'getVersionMismatches').mockReturnValue(mismatchedDeps);
+                    jest.mocked(getVersionMismatches).mockReturnValue(mismatchedDeps);
                 });
 
                 itAddsJsEntrypointToWebComponent(

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

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

package/src/__tests__/register.test.tsx

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

package/src/contexts/tests/mfe-data-context.test.tsx

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { renderHook } from '@testing-library/react-hooks';
+import { FC, PropsWithChildren } from 'react';
+import { renderHook } from '@testing-library/react';
 import { MFEDataContext, useMFEDataContext } from '../mfe-data-context';
 
 describe(`[web-components] ${useMFEDataContext.name}`, () => {
@@ -7,7 +7,7 @@ describe(`[web-components] ${useMFEDataContext.name}`, () => {
 
     describe('when the MFEDataContext is provided by a parent', () => {
         const data = { foo: 'bar' };
-        const Wrapper: FC = ({ children }) => {
+        const Wrapper: FC<PropsWithChildren<{}>> = ({ children }) => {
             return <MFEDataContext.Provider value={data}>{children}</MFEDataContext.Provider>;
         };
 
@@ -17,7 +17,7 @@ describe(`[web-components] ${useMFEDataContext.name}`, () => {
     });
 
     describe('when the MFEDataContext is not provided by a parent', () => {
-        const Wrapper: FC = ({ children }) => {
+        const Wrapper: FC<PropsWithChildren<{}>> = ({ children }) => {
             return <div>{children}</div>;
         };
 

package/src/contexts/tests/mfe-metadata-context.test.tsx

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { renderHook } from '@testing-library/react-hooks';
+import { FC, PropsWithChildren } from 'react';
+import { renderHook } from '@testing-library/react';
 import { MFEMetadataContext, useMFEMetadataContext } from '../mfe-metadata-context';
 
 describe(`[web-components] ${useMFEMetadataContext.name}`, () => {
@@ -9,7 +9,7 @@ describe(`[web-components] ${useMFEMetadataContext.name}`, () => {
         const shadowRoot = document.createElement('div').attachShadow({ mode: 'open' });
         const portalShadowRoot = document.createElement('span').attachShadow({ mode: 'open' });
         const metadata = { shadowRoot, portalShadowRoot };
-        const Wrapper: FC = ({ children }) => {
+        const Wrapper: FC<PropsWithChildren<{}>> = ({ children }) => {
             return (
                 <MFEMetadataContext.Provider value={metadata}>
                     {children}
@@ -23,7 +23,7 @@ describe(`[web-components] ${useMFEMetadataContext.name}`, () => {
     });
 
     describe('when the MFEMetadataContext is not provided by a parent', () => {
-        const Wrapper: FC = ({ children }) => {
+        const Wrapper: FC<PropsWithChildren<{}>> = ({ children }) => {
             return <div>{children}</div>;
         };