@servicetitan/web-components 23.0.0 → 23.1.0

package/dist/utils/get-entry-points.js

@@ -0,0 +1,24 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { getJson } from '../common';
+export function getEntrypoints(url, cache, signal) {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            return (yield getJson(url, {
+                cache,
+                signal,
+            })).data;
+        }
+        catch (_a) {
+            return { css: ['index.css'], js: ['index.js'] };
+        }
+    });
+}
+//# sourceMappingURL=get-entry-points.js.map

package/dist/utils/get-entry-points.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-entry-points.js","sourceRoot":"","sources":["../../src/utils/get-entry-points.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAOpC,MAAM,UAAgB,cAAc,CAChC,GAAW,EACX,KAA6B,EAC7B,MAAoB;;QAEpB,IAAI;YACA,OAAO,CACH,MAAM,OAAO,CAAC,GAAG,EAAE;gBACf,KAAK;gBACL,MAAM;aACT,CAAC,CACL,CAAC,IAAI,CAAC;SACV;QAAC,WAAM;YACJ,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,EAAE,EAAE,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC;SACnD;IACL,CAAC;CAAA"}

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

@@ -1,3 +1,3 @@
-import { Metadata } from './loader';
+import { Metadata } from './get-bundle-info';
 export declare function getMFESupportsRerendering(bundledWith: Metadata['bundledWith'], dependencies: Metadata['dependencies']): boolean;
 //# sourceMappingURL=get-mfe-supports-rerendering.d.ts.map

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"get-mfe-supports-rerendering.js","sourceRoot":"","sources":["../../src/utils/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 → utils/get-version-mismatches.d.ts}

@@ -1,7 +1,6 @@
-import { ExposedDependencies } from './common';
+import { ExposedDependencies } from '../common';
 export declare const getVersionMismatches: (exposedDependencies: ExposedDependencies, dependencies: Record<string, string>, sharedDependencies: Record<string, string>) => Record<string, {
     host: string;
     package: string;
 }>;
-export declare const isVersionedUrl: (url: string) => boolean;
-//# sourceMappingURL=utils.d.ts.map
+//# sourceMappingURL=get-version-mismatches.d.ts.map

package/dist/utils/get-version-mismatches.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-version-mismatches.d.ts","sourceRoot":"","sources":["../../src/utils/get-version-mismatches.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAgB,MAAM,WAAW,CAAC;AAE9D,eAAO,MAAM,oBAAoB,wBACR,mBAAmB,gBAC1B,OAAO,MAAM,EAAE,MAAM,CAAC,sBAChB,OAAO,MAAM,EAAE,MAAM,CAAC;UAYT,MAAM;aAAW,MAAM;EAc3D,CAAC"}

package/dist/{utils.js → utils/get-version-mismatches.js}

@@ -1,5 +1,4 @@
-import semver from 'semver';
-import { isCompatible } from './common';
+import { isCompatible } from '../common';
 export const getVersionMismatches = (exposedDependencies, dependencies, sharedDependencies) => {
     const mismatch = Object.entries(exposedDependencies).reduce((result, [dependency, { version: hostVersion }]) => {
         const packageVersion = dependencies[dependency];
@@ -19,11 +18,4 @@ export const getVersionMismatches = (exposedDependencies, dependencies, sharedDe
     }
     return mismatch;
 };
-export const isVersionedUrl = (url) => {
-    if (!url.includes('unpkg.')) {
-        return false;
-    }
-    const parts = url.split('@');
-    return !!semver.clean(parts[parts.length - 1]);
-};
-//# sourceMappingURL=utils.js.map
+//# sourceMappingURL=get-version-mismatches.js.map

package/dist/utils/get-version-mismatches.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-version-mismatches.js","sourceRoot":"","sources":["../../src/utils/get-version-mismatches.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,YAAY,EAAE,MAAM,WAAW,CAAC;AAE9D,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"}

package/dist/utils/index.d.ts

@@ -0,0 +1,9 @@
+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';
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC"}

package/dist/utils/index.js

@@ -0,0 +1,9 @@
+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';
+//# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC"}

package/dist/utils/is-versioned-url.d.ts

@@ -0,0 +1,2 @@
+export declare const isVersionedUrl: (url: string) => boolean;
+//# sourceMappingURL=is-versioned-url.d.ts.map

package/dist/utils/is-versioned-url.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-versioned-url.d.ts","sourceRoot":"","sources":["../../src/utils/is-versioned-url.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,QAAS,MAAM,KAAG,OAQ5C,CAAC"}

package/dist/utils/is-versioned-url.js

@@ -0,0 +1,9 @@
+import semver from 'semver';
+export const isVersionedUrl = (url) => {
+    if (!url.includes('unpkg.')) {
+        return false;
+    }
+    const parts = url.split('@');
+    return !!semver.clean(parts[parts.length - 1]);
+};
+//# sourceMappingURL=is-versioned-url.js.map

package/dist/utils/is-versioned-url.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-versioned-url.js","sourceRoot":"","sources":["../../src/utils/is-versioned-url.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,QAAQ,CAAC;AAE5B,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/dist/utils/load-scripts.d.ts

@@ -0,0 +1,3 @@
+import { BundleInfo } from './get-bundle-info';
+export declare function loadScripts({ urls, WebComponent }: BundleInfo): Promise<void[]>;
+//# sourceMappingURL=load-scripts.d.ts.map

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

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

package/dist/utils/load-scripts.js

@@ -0,0 +1,31 @@
+export function loadScripts({ urls, WebComponent }) {
+    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');
+                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(resolve => {
+                const originalOnload = script.onload;
+                script.onload = (...args) => {
+                    originalOnload === null || originalOnload === void 0 ? void 0 : originalOnload.call(script, ...args);
+                    script.onload = null;
+                    resolve();
+                };
+            });
+        }
+        return Promise.resolve();
+    }));
+}
+//# sourceMappingURL=load-scripts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"load-scripts.js","sourceRoot":"","sources":["../../src/utils/load-scripts.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,WAAW,CAAC,EAAE,IAAI,EAAE,YAAY,EAAc;IAC1D,OAAO,OAAO,CAAC,GAAG,CACd,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;QACd,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC;QAC3E,IAAI,CAAC,MAAM,EAAE;YACT,OAAO,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;gBAC/B,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;gBAEhD,MAAM,CAAC,WAAW,GAAG,WAAW,CAAC;gBACjC,MAAM,CAAC,MAAM,GAAG,GAAG,EAAE;oBACjB,MAAM,CAAC,OAAO,CAAC,YAAY,GAAG,YAAY,CAAC;oBAC3C,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC;oBACrB,OAAO,EAAE,CAAC;gBACd,CAAC,CAAC;gBACF,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC;gBACpB,MAAM,CAAC,GAAG,GAAG,GAAG,CAAC;gBAEjB,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;YACjC,CAAC,CAAC,CAAC;SACN;QAED,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,EAAE;YAC9B,OAAO,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;gBAC/B,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC;gBACrC,MAAM,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,EAAE,EAAE;oBACxB,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;oBACtC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC;oBACrB,OAAO,EAAE,CAAC;gBACd,CAAC,CAAC;YACN,CAAC,CAAC,CAAC;SACN;QAED,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;IAC7B,CAAC,CAAC,CACL,CAAC;AACN,CAAC"}

package/dist/utils/validate-bundle-info.d.ts

@@ -0,0 +1,7 @@
+import { Log } from '@servicetitan/log-service';
+import { BundleInfo } from './get-bundle-info';
+export declare function validateBundleInfo({ mismatch }: BundleInfo, { logService, packageName }: {
+    logService?: Log;
+    packageName: string;
+}): void;
+//# sourceMappingURL=validate-bundle-info.d.ts.map

package/dist/utils/validate-bundle-info.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validate-bundle-info.d.ts","sourceRoot":"","sources":["../../src/utils/validate-bundle-info.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,2BAA2B,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,wBAAgB,kBAAkB,CAC9B,EAAE,QAAQ,EAAE,EAAE,UAAU,EACxB,EAAE,UAAU,EAAE,WAAW,EAAE,EAAE;IAAE,UAAU,CAAC,EAAE,GAAG,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,QASzE"}

package/dist/utils/validate-bundle-info.js

@@ -0,0 +1,10 @@
+export function validateBundleInfo({ mismatch }, { logService, packageName }) {
+    if (mismatch) {
+        logService === null || logService === void 0 ? void 0 : logService.warning({
+            category: 'MicroFrontends.DependenciesMismatch',
+            message: 'Some of the package dependencies have incompatible versions.',
+            data: { package: packageName, dependencies: JSON.stringify(mismatch) },
+        });
+    }
+}
+//# sourceMappingURL=validate-bundle-info.js.map

package/dist/utils/validate-bundle-info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validate-bundle-info.js","sourceRoot":"","sources":["../../src/utils/validate-bundle-info.ts"],"names":[],"mappings":"AAGA,MAAM,UAAU,kBAAkB,CAC9B,EAAE,QAAQ,EAAc,EACxB,EAAE,UAAU,EAAE,WAAW,EAA6C;IAEtE,IAAI,QAAQ,EAAE;QACV,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,OAAO,CAAC;YAChB,QAAQ,EAAE,qCAAqC;YAC/C,OAAO,EAAE,8DAA8D;YACvE,IAAI,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,EAAE;SACzE,CAAC,CAAC;KACN;AACL,CAAC"}

package/dist/utils/web-component.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { Log } from '@servicetitan/log-service';
+import { ExposedDependencies } from '../common';
+import { EventBus } from '../event-bus';
+import { BundleInfo } from './get-bundle-info';
+import { LoaderDataProps } from '../loader';
+interface WebComponentProps {
+    basename?: string;
+    bundleInfo: BundleInfo;
+    eventBus: EventBus;
+    exposedDependencies?: ExposedDependencies;
+    logService?: Log;
+    LoadingFallback: () => JSX.Element;
+}
+export declare function webComponent(props: WebComponentProps): (props: LoaderDataProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=web-component.d.ts.map

package/dist/utils/web-component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"web-component.d.ts","sourceRoot":"","sources":["../../src/utils/web-component.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,2BAA2B,CAAC;AAGhD,OAAO,EAAE,mBAAmB,EAAiB,MAAM,WAAW,CAAC;AAE/D,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAE5C,UAAU,iBAAiB;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,QAAQ,CAAC;IACnB,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,eAAe,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;CACtC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,WAKlC,eAAe,6CAmDjC"}

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.1.0",
     "description": "",
     "repository": {
         "type": "git",
@@ -15,36 +15,35 @@
         "src"
     ],
     "dependencies": {
-        "@servicetitan/error-boundary": "23.0.0",
+        "@servicetitan/error-boundary": "23.1.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",
+        "@servicetitan/design-system": "~14.0.0",
+        "@servicetitan/log-service": "23.1.0",
+        "@servicetitan/react-ioc": "23.1.0",
         "@testing-library/dom": "^8.20.1",
         "@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.1.0",
+        "@servicetitan/react-ioc": "23.1.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": "7267270e54cdb3a2926f61feb4939d057e82adb3"
 }

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/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>;
         };