@servicetitan/web-components 23.0.0 → 23.2.0

package/src/render.ts

@@ -0,0 +1,62 @@
+/* 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 (e) {
+    // ignore
+}
+
+interface RenderOptions {
+    legacyRoot?: boolean;
+}
+
+interface RenderResult {
+    rerender(element: ReactElement): void;
+    unmount(): void;
+}
+
+export function render(
+    element: ReactElement,
+    container: Element | DocumentFragment,
+    options?: RenderOptions
+): RenderResult {
+    if (typeof createRoot !== 'function' || options?.legacyRoot) {
+        return renderLegacyRoot(element, container);
+    }
+
+    const root = createRoot(container);
+    root.render(element);
+
+    return {
+        rerender(element: ReactElement) {
+            root.render(element);
+        },
+        unmount() {
+            root.unmount();
+        },
+    };
+}
+
+function renderLegacyRoot(
+    element: ReactElement,
+    container: Element | DocumentFragment
+): RenderResult {
+    ReactDOM.render(element, container);
+
+    return {
+        rerender(element: ReactElement) {
+            ReactDOM.render(element, container);
+        },
+        unmount() {
+            ReactDOM.unmountComponentAtNode(container);
+        },
+    };
+}

package/src/{__tests__ → utils/__tests__}/get-mfe-supports-rerendering.test.ts

@@ -1,5 +1,5 @@
 import { getMFESupportsRerendering } from '../get-mfe-supports-rerendering';
-import { Metadata } from '../loader';
+import { Metadata } from '../get-bundle-info';
 
 describe(`[web-components] ${getMFESupportsRerendering.name}`, () => {
     let metadata: Required<Pick<Metadata, 'bundledWith' | 'dependencies'>>;

package/src/utils/__tests__/get-version-mismatches.test.ts

@@ -0,0 +1,76 @@
+import { ExposedDependencies } from '../../common';
+import { getVersionMismatches } from '../get-version-mismatches';
+
+describe(`[web-components] ${getVersionMismatches.name}`, () => {
+    let sharedDependencies: Record<string, string> = {};
+    let dependencies: Record<string, string> = {};
+    let exposedDependencies: ExposedDependencies = {};
+
+    beforeEach(() => {
+        sharedDependencies = {
+            '@servicetitan/design-system': 'SharedDependencies.ServiceTitan.DesignSystem',
+        };
+
+        dependencies = {
+            '@servicetitan/design-system': '~11.8.0',
+        };
+
+        exposedDependencies = {
+            '@servicetitan/design-system': {
+                version: '~11.8.0',
+                variable: 'SharedDependencies.ServiceTitan.DesignSystem',
+            },
+        };
+    });
+
+    test('returns no mismatches', () => {
+        expect(getVersionMismatches(exposedDependencies, dependencies, sharedDependencies)).toEqual(
+            {}
+        );
+    });
+
+    describe('when there is a versions mismatch', () => {
+        beforeEach(() => (dependencies['@servicetitan/design-system'] = '~12.0.0'));
+
+        test('returns one mismatch', () => {
+            expect(
+                getVersionMismatches(exposedDependencies, dependencies, sharedDependencies)
+            ).toEqual({
+                '@servicetitan/design-system': {
+                    host: '~11.8.0',
+                    package: '~12.0.0',
+                },
+            });
+        });
+    });
+
+    describe('when a dependency is missing from exposed dependencies', () => {
+        beforeEach(() => delete exposedDependencies['@servicetitan/design-system']);
+
+        test('returns an object citing the dependency is missing from the host', () => {
+            expect(
+                getVersionMismatches(exposedDependencies, dependencies, sharedDependencies)
+            ).toEqual({
+                '@servicetitan/design-system': {
+                    host: 'missing',
+                    package: '~11.8.0',
+                },
+            });
+        });
+    });
+
+    describe('when a variable does not match', () => {
+        beforeEach(() => (exposedDependencies['@servicetitan/design-system'].variable = 'foo'));
+
+        test('returns an object citing the variable is wrong', () => {
+            expect(
+                getVersionMismatches(exposedDependencies, dependencies, sharedDependencies)
+            ).toEqual({
+                '@servicetitan/design-system': {
+                    host: 'wrong global variable',
+                    package: '~11.8.0',
+                },
+            });
+        });
+    });
+});

package/src/utils/__tests__/is-versioned-url.test.ts

@@ -0,0 +1,18 @@
+import { isVersionedUrl } from '../is-versioned-url';
+
+describe(`${isVersionedUrl.name}`, () => {
+    const results: [string, boolean][] = [
+        ['localhost:9090', false],
+        ['localhost:9090@1.1.1', false],
+        ['localhost:9090@dev', false],
+        ['//unpkg.servicetitan.com/@servicetitan/test', false],
+        ['//unpkg.servicetitan.com/@servicetitan/test@dev', false],
+        ['//unpkg.servicetitan.com/@servicetitan/test@0.0.0', true],
+        ['//unpkg.servicetitan.com/@servicetitan/test@0.0.0-hash', true],
+        ['//unpkg.servicetitan.com/@servicetitan/test@^16', false],
+    ];
+
+    test.each(results)(`providing %s returns %s`, (url, result) => {
+        expect(isVersionedUrl(url)).toEqual(result);
+    });
+});

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

@@ -0,0 +1,121 @@
+import semver from 'semver';
+import get from 'lodash.get';
+
+import { ExposedDependencies, getJson, GetJsonError } from '../common';
+import { EntryPoints, getEntrypoints } from './get-entry-points';
+import { getMFESupportsRerendering } from './get-mfe-supports-rerendering';
+import { getVersionMismatches } from './get-version-mismatches';
+import { isVersionedUrl } from './is-versioned-url';
+
+export interface Metadata {
+    name: string;
+    bundledWith?: Record<string, string | undefined>;
+    sharedDependencies: Record<string, string>;
+    dependencies?: Record<string, string>;
+    entrypoints?: Record<string, { css: string[]; js: string[] }>;
+}
+
+export type BundleInfo = Awaited<ReturnType<typeof getBundleInfo>>;
+
+export async function getBundleInfo(
+    mainPackageUrl: string,
+    fallbackPackageUrl: string | undefined,
+    exposedDependencies: ExposedDependencies = {},
+    signal?: AbortSignal,
+    retries?: number,
+    onRequestError?: (error: GetJsonError) => void
+) {
+    const { data: metadata, url: packageUrl } = await getMetadata({
+        fallbackPackageUrl,
+        mainPackageUrl,
+        onRequestError,
+        retries,
+        signal,
+    });
+
+    const { bundledWith, name, sharedDependencies } = metadata;
+    const exactPackageUrl = packageUrl.replace('/dist/metadata.json', '');
+    const cache = getCacheSetting(exactPackageUrl);
+
+    let dependencies: NonNullable<Metadata['dependencies']>;
+    if (metadata.dependencies) {
+        dependencies = metadata.dependencies;
+    } else {
+        const { data: packageJson } = await getJson(`${exactPackageUrl}/package.json`, {
+            cache,
+            retries,
+            signal,
+        });
+
+        dependencies = packageJson.dependencies;
+    }
+
+    const mismatch = getVersionMismatches(exposedDependencies, dependencies, sharedDependencies);
+    const hasMismatch = !!Object.keys(mismatch).length;
+    const startupVersion = bundledWith?.['@servicetitan/startup'];
+    const supportLightBundles = startupVersion && semver.gte(startupVersion, '17.0.0');
+    const embed = !hasMismatch && supportLightBundles;
+    const bundleType = embed ? 'light' : 'full';
+    const withBaseUrl = (path: string) => `${exactPackageUrl}/dist/bundle/${bundleType}/${path}`;
+
+    let entrypoints: EntryPoints;
+    if (metadata.entrypoints?.[bundleType]) {
+        entrypoints = metadata.entrypoints[bundleType];
+    } else {
+        entrypoints = await getEntrypoints(withBaseUrl('entrypoints.json'), cache);
+    }
+
+    const disposer = () => {
+        if (embed) {
+            const path = Object.values<string>(sharedDependencies).shift();
+            if (path) {
+                get(window, path).getStorage().clear(name);
+            }
+        }
+    };
+
+    const urls = Object.entries(entrypoints).reduce(
+        (result, [key, value]) => ({ ...result, [key]: value.map(withBaseUrl) }),
+        {} as EntryPoints
+    );
+
+    return {
+        disposer,
+        mfeSupportsRerendering: getMFESupportsRerendering(bundledWith, dependencies),
+        mismatch: hasMismatch ? mismatch : undefined,
+        urls,
+        WebComponent: name,
+    };
+}
+
+async function getMetadata(props: {
+    fallbackPackageUrl?: string;
+    mainPackageUrl: string;
+    onRequestError?: (error: GetJsonError) => void;
+    signal?: AbortSignal;
+    retries?: number;
+}) {
+    const { fallbackPackageUrl, mainPackageUrl, onRequestError, retries, signal } = props;
+
+    return getJson<Metadata>(`${mainPackageUrl}/dist/metadata.json`, {
+        cache: getCacheSetting(mainPackageUrl),
+        retries: fallbackPackageUrl ? 0 : retries,
+        onRequestError,
+        signal,
+    }).catch(e => {
+        if (!fallbackPackageUrl) {
+            throw e;
+        }
+
+        return getJson(`${fallbackPackageUrl}/dist/metadata.json`, {
+            retries,
+            onRequestError,
+            cache: getCacheSetting(fallbackPackageUrl),
+            signal,
+        });
+    });
+}
+
+function getCacheSetting(url: string) {
+    return isVersionedUrl(url) ? undefined : 'no-store';
+}

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

@@ -0,0 +1,23 @@
+import { getJson } from '../common';
+
+export interface EntryPoints {
+    css: string[];
+    js: string[];
+}
+
+export async function getEntrypoints(
+    url: string,
+    cache: 'no-store' | undefined,
+    signal?: AbortSignal
+): Promise<EntryPoints> {
+    try {
+        return (
+            await getJson(url, {
+                cache,
+                signal,
+            })
+        ).data;
+    } catch {
+        return { css: ['index.css'], js: ['index.js'] };
+    }
+}

package/src/{get-mfe-supports-rerendering.ts → utils/get-mfe-supports-rerendering.ts}

@@ -1,5 +1,5 @@
 import semver from 'semver';
-import { Metadata } from './loader';
+import { Metadata } from './get-bundle-info';
 
 /*
  * Check if the MFE supports re-rendering itself when data changes

package/src/{utils.ts → utils/get-version-mismatches.ts}

@@ -1,5 +1,4 @@
-import semver from 'semver';
-import { ExposedDependencies, isCompatible } from './common';
+import { ExposedDependencies, isCompatible } from '../common';
 
 export const getVersionMismatches = (
     exposedDependencies: ExposedDependencies,
@@ -31,13 +30,3 @@ export const getVersionMismatches = (
 
     return mismatch;
 };
-
-export const isVersionedUrl = (url: string): boolean => {
-    if (!url.includes('unpkg.')) {
-        return false;
-    }
-
-    const parts = url.split('@');
-
-    return !!semver.clean(parts[parts.length - 1]);
-};

package/src/utils/index.ts

@@ -0,0 +1,8 @@
+export * from './get-bundle-info';
+export * from './get-entry-points';
+export * from './get-mfe-supports-rerendering';
+export * from './get-version-mismatches';
+export * from './is-versioned-url';
+export * from './load-scripts';
+export * from './validate-bundle-info';
+export * from './web-component';

package/src/utils/is-versioned-url.ts

@@ -0,0 +1,11 @@
+import semver from 'semver';
+
+export const isVersionedUrl = (url: string): boolean => {
+    if (!url.includes('unpkg.')) {
+        return false;
+    }
+
+    const parts = url.split('@');
+
+    return !!semver.clean(parts[parts.length - 1]);
+};

package/src/utils/load-scripts.ts

@@ -0,0 +1,38 @@
+import { BundleInfo } from './get-bundle-info';
+
+export function loadScripts({ urls, WebComponent }: BundleInfo) {
+    return Promise.all(
+        urls.js.map(url => {
+            const script = Array.from(document.scripts).find(({ src }) => src === url);
+            if (!script) {
+                return new Promise<void>(resolve => {
+                    const script = document.createElement('script');
+
+                    script.crossOrigin = 'anonymous';
+                    script.onload = () => {
+                        script.dataset.webComponent = WebComponent;
+                        script.onload = null;
+                        resolve();
+                    };
+                    script.async = true;
+                    script.src = url;
+
+                    document.body.append(script);
+                });
+            }
+
+            if (!script.dataset.webComponent) {
+                return new Promise<void>(resolve => {
+                    const originalOnload = script.onload;
+                    script.onload = (...args) => {
+                        originalOnload?.call(script, ...args);
+                        script.onload = null;
+                        resolve();
+                    };
+                });
+            }
+
+            return Promise.resolve();
+        })
+    );
+}

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

@@ -0,0 +1,15 @@
+import { Log } from '@servicetitan/log-service';
+import { BundleInfo } from './get-bundle-info';
+
+export function validateBundleInfo(
+    { mismatch }: BundleInfo,
+    { logService, packageName }: { logService?: Log; packageName: string }
+) {
+    if (mismatch) {
+        logService?.warning({
+            category: 'MicroFrontends.DependenciesMismatch',
+            message: 'Some of the package dependencies have incompatible versions.',
+            data: { package: packageName, dependencies: JSON.stringify(mismatch) },
+        });
+    }
+}

package/src/utils/web-component.tsx

@@ -0,0 +1,96 @@
+import { Fragment, useMemo, useState } from 'react';
+import { Log } from '@servicetitan/log-service';
+import { useOptionalDependencies } from '@servicetitan/react-ioc';
+
+import { ExposedDependencies, IWebComponent } from '../common';
+import { MFEContextData } from '../contexts/mfe-data-context';
+import { EventBus } from '../event-bus';
+import { BundleInfo } from './get-bundle-info';
+import { HistoryManager } from '../history-manager';
+import { LoaderDataProps } from '../loader';
+
+interface WebComponentProps {
+    basename?: string;
+    bundleInfo: BundleInfo;
+    eventBus: EventBus;
+    exposedDependencies?: ExposedDependencies;
+    logService?: Log;
+    LoadingFallback: () => JSX.Element;
+}
+
+export function webComponent(props: WebComponentProps) {
+    const { basename, bundleInfo, eventBus, exposedDependencies, logService, LoadingFallback } =
+        props;
+    const { WebComponent, disposer, mfeSupportsRerendering } = bundleInfo;
+
+    return (props: LoaderDataProps) => {
+        const [isLoading, setIsLoading] = useState(true);
+        const [historyManager] = useOptionalDependencies(HistoryManager);
+
+        const handleRef = (webComponent: IWebComponent | null) => {
+            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 (
+            <Fragment>
+                {isLoading && <LoadingFallback />}
+                <WebComponent
+                    key={key}
+                    ref={handleRef}
+                    class={props.className}
+                    {...(styleUrls && { 'style-urls': styleUrls })}
+                    /*
+                     * Continue to spread data as separate data attributes for backwards compatibility,
+                     * in case the Host has updated web-components, but the MFE has not
+                     */
+                    {...dataAttrs}
+                    // Stringify data object so that it can be passed as a data-attribute
+                    data-mfe-data={stringifiedData}
+                />
+            </Fragment>
+        );
+    };
+}
+
+/*
+ * Convert camelCase data props to kebab-case data attributes, prepended with data-
+ * Ex: fooBar -> data-foo-bar
+ */
+function composeDataAttributes(data: MFEContextData<{}> | undefined = {}) {
+    return Object.fromEntries(
+        Object.entries(data).map(([key, value]) => [
+            'data-' + key.replace(/[A-Z]/g, letter => '-' + letter.toLowerCase()),
+            value,
+        ])
+    );
+}
+
+function getStyleUrls({ urls }: Pick<BundleInfo, 'urls'>) {
+    if (urls.css.length) {
+        return encodeURIComponent(JSON.stringify(urls.css));
+    }
+}

package/dist/get-mfe-supports-rerendering.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"get-mfe-supports-rerendering.d.ts","sourceRoot":"","sources":["../src/get-mfe-supports-rerendering.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAYpC,wBAAgB,yBAAyB,CACrC,WAAW,EAAE,QAAQ,CAAC,aAAa,CAAC,EACpC,YAAY,EAAE,QAAQ,CAAC,cAAc,CAAC,WAOzC"}

package/dist/get-mfe-supports-rerendering.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"get-mfe-supports-rerendering.js","sourceRoot":"","sources":["../src/get-mfe-supports-rerendering.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,QAAQ,CAAC;AAG5B;;;;;;;;;GASG;AACH,MAAM,UAAU,yBAAyB,CACrC,WAAoC,EACpC,YAAsC;;IAEtC,OAAO,CAAC,CAAC,CACL,MAAA,MAAA,kBAAkB,CAAC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAG,8BAA8B,CAAC,CAAC,mCACjE,kBAAkB,CAAC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,8BAA8B,CAAC,CAAC,mCAClE,kBAAkB,CAAC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAG,uBAAuB,CAAC,CAAC,CAC7D,CAAC;AACN,CAAC;AAED,SAAS,kBAAkB,CAAC,OAAgB;IACxC,MAAM,UAAU,GAAG,OAAO,IAAI,MAAM,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IACzD,IAAI,UAAU,EAAE;QACZ,OAAO,MAAM,CAAC,GAAG,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;KAC5C;AACL,CAAC"}

package/dist/utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAgB,MAAM,UAAU,CAAC;AAE7D,eAAO,MAAM,oBAAoB,wBACR,mBAAmB,gBAC1B,OAAO,MAAM,EAAE,MAAM,CAAC,sBAChB,OAAO,MAAM,EAAE,MAAM,CAAC;UAYT,MAAM;aAAW,MAAM;EAc3D,CAAC;AAEF,eAAO,MAAM,cAAc,QAAS,MAAM,KAAG,OAQ5C,CAAC"}

package/dist/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAuB,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7D,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAChC,mBAAwC,EACxC,YAAoC,EACpC,kBAA0C,EAC5C,EAAE;IACA,MAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC,MAAM,CACvD,CAAC,MAAM,EAAE,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC,EAAE,EAAE;QAC/C,MAAM,cAAc,GAAG,YAAY,CAAC,UAAU,CAAC,CAAC;QAEhD,IAAI,cAAc,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,cAAc,CAAC,EAAE;YAC9D,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC;SACvE;QAED,OAAO,MAAM,CAAC;IAClB,CAAC,EACD,EAAuD,CAC1D,CAAC;IAEF,KAAK,MAAM,CAAC,UAAU,EAAE,QAAQ,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,kBAAkB,CAAC,EAAE;QACrE,MAAM,cAAc,GAAG,YAAY,CAAC,UAAU,CAAC,CAAC;QAEhD,IAAI,CAAC,mBAAmB,CAAC,UAAU,CAAC,EAAE;YAClC,QAAQ,CAAC,UAAU,CAAC,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC;SACvE;aAAM,IAAI,mBAAmB,CAAC,UAAU,CAAC,CAAC,QAAQ,KAAK,QAAQ,EAAE;YAC9D,QAAQ,CAAC,UAAU,CAAC,GAAG,EAAE,IAAI,EAAE,uBAAuB,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC;SACrF;KACJ;IAED,OAAO,QAAQ,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,GAAW,EAAW,EAAE;IACnD,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;QACzB,OAAO,KAAK,CAAC;KAChB;IAED,MAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAE7B,OAAO,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;AACnD,CAAC,CAAC"}

package/src/__tests__/utils.test.ts

@@ -1,95 +0,0 @@
-import { ExposedDependencies } from '../common';
-import { getVersionMismatches, isVersionedUrl } from '../utils';
-
-describe('[web-components] utils', () => {
-    describe(`${getVersionMismatches.name}`, () => {
-        let sharedDependencies: Record<string, string> = {};
-        let dependencies: Record<string, string> = {};
-        let exposedDependencies: ExposedDependencies = {};
-
-        beforeEach(() => {
-            sharedDependencies = {
-                '@servicetitan/design-system': 'SharedDependencies.ServiceTitan.DesignSystem',
-            };
-
-            dependencies = {
-                '@servicetitan/design-system': '~11.8.0',
-            };
-
-            exposedDependencies = {
-                '@servicetitan/design-system': {
-                    version: '~11.8.0',
-                    variable: 'SharedDependencies.ServiceTitan.DesignSystem',
-                },
-            };
-        });
-
-        test('returns no mismatches', () => {
-            expect(
-                getVersionMismatches(exposedDependencies, dependencies, sharedDependencies)
-            ).toEqual({});
-        });
-
-        describe('when there is a versions mismatch', () => {
-            beforeEach(() => (dependencies['@servicetitan/design-system'] = '~12.0.0'));
-
-            test('returns one mismatch', () => {
-                expect(
-                    getVersionMismatches(exposedDependencies, dependencies, sharedDependencies)
-                ).toEqual({
-                    '@servicetitan/design-system': {
-                        host: '~11.8.0',
-                        package: '~12.0.0',
-                    },
-                });
-            });
-        });
-
-        describe('when a dependency is missing from exposed dependencies', () => {
-            beforeEach(() => delete exposedDependencies['@servicetitan/design-system']);
-
-            test('returns an object citing the dependency is missing from the host', () => {
-                expect(
-                    getVersionMismatches(exposedDependencies, dependencies, sharedDependencies)
-                ).toEqual({
-                    '@servicetitan/design-system': {
-                        host: 'missing',
-                        package: '~11.8.0',
-                    },
-                });
-            });
-        });
-
-        describe('when a variable does not match', () => {
-            beforeEach(() => (exposedDependencies['@servicetitan/design-system'].variable = 'foo'));
-
-            test('returns an object citing the variable is wrong', () => {
-                expect(
-                    getVersionMismatches(exposedDependencies, dependencies, sharedDependencies)
-                ).toEqual({
-                    '@servicetitan/design-system': {
-                        host: 'wrong global variable',
-                        package: '~11.8.0',
-                    },
-                });
-            });
-        });
-    });
-
-    describe(`${isVersionedUrl.name}`, () => {
-        const results: [string, boolean][] = [
-            ['localhost:9090', false],
-            ['localhost:9090@1.1.1', false],
-            ['localhost:9090@dev', false],
-            ['//unpkg.servicetitan.com/@servicetitan/test', false],
-            ['//unpkg.servicetitan.com/@servicetitan/test@dev', false],
-            ['//unpkg.servicetitan.com/@servicetitan/test@0.0.0', true],
-            ['//unpkg.servicetitan.com/@servicetitan/test@0.0.0-hash', true],
-            ['//unpkg.servicetitan.com/@servicetitan/test@^16', false],
-        ];
-
-        test.each(results)(`providing %s returns %s`, (url, result) => {
-            expect(isVersionedUrl(url)).toEqual(result);
-        });
-    });
-});