@servicetitan/web-components 24.1.3 → 24.2.0

package/dist/delayed.d.ts

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from 'react';
+export type DelayedProps = PropsWithChildren<{
+    delayMs?: number;
+}>;
+export declare const Delayed: FC<DelayedProps>;
+//# sourceMappingURL=delayed.d.ts.map

package/dist/delayed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"delayed.d.ts","sourceRoot":"","sources":["../src/delayed.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,iBAAiB,EAAuB,MAAM,OAAO,CAAC;AAEnE,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAWpC,CAAC"}

package/dist/delayed.js

@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react';
+export const Delayed = ({ delayMs = 200, children }) => {
+    const [timedOut, setTimedOut] = useState(delayMs <= 0);
+    useEffect(() => {
+        if (delayMs > 0) {
+            const timer = setTimeout(() => setTimedOut(true), delayMs);
+            return () => clearTimeout(timer);
+        }
+    }, [delayMs]);
+    return timedOut ? children : null;
+};
+//# sourceMappingURL=delayed.js.map

package/dist/delayed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"delayed.js","sourceRoot":"","sources":["../src/delayed.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAMnE,MAAM,CAAC,MAAM,OAAO,GAAqB,CAAC,EAAE,OAAO,GAAG,GAAG,EAAE,QAAQ,EAAgB,EAAE,EAAE;IACnF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;IAEvD,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,OAAO,GAAG,CAAC,EAAE,CAAC;YACd,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC;YAC3D,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACrC,CAAC;IACL,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;AACtC,CAAC,CAAC"}

package/dist/loader.d.ts

@@ -11,9 +11,11 @@ export interface LoaderProps<T> {
     data?: MFEContextData<T>;
     basename?: string;
     loadingFallback?: FallbackNode;
+    loadingFallbackDelayed?: boolean;
     errorFallback?: FallbackNode;
     className?: string;
     retries?: number;
+    cache?: boolean | number;
     onRequestError?(error: GetJsonError): boolean;
 }
 export type LoaderDataProps = Pick<LoaderProps<{}>, 'data' | 'className'> & {

package/dist/loader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loader.d.ts","sourceRoot":"","sources":["../src/loader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,SAAS,EAOZ,MAAM,OAAO,CAAC;AAKf,OAAO,EAGH,YAAY,EAEf,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAgC,MAAM,aAAa,CAAC;AAIrE,MAAM,MAAM,SAAS,GAAG,QAAQ,CAAC;AAEjC,MAAM,MAAM,YAAY,GAAG,WAAW,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC;AAEzD,MAAM,WAAW,WAAW,CAAC,CAAC;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uHAAuH;IACvH,IAAI,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,YAAY,CAAC;IAC/B,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,CAAC,KAAK,EAAE,YAAY,GAAG,OAAO,CAAC;CACjD;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC,GAAG;IACxE,eAAe,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;CACtC,CAAC;AAEF,eAAO,MAAM,MAAM,sGAyDjB,CAAC"}
+{"version":3,"file":"loader.d.ts","sourceRoot":"","sources":["../src/loader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,SAAS,EAOZ,MAAM,OAAO,CAAC;AAKf,OAAO,EAGH,YAAY,EAEf,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,OAAO,EAAE,QAAQ,EAAgC,MAAM,aAAa,CAAC;AAWrE,MAAM,MAAM,SAAS,GAAG,QAAQ,CAAC;AAEjC,MAAM,MAAM,YAAY,GAAG,WAAW,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC;AAEzD,MAAM,WAAW,WAAW,CAAC,CAAC;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uHAAuH;IACvH,IAAI,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,YAAY,CAAC;IAC/B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,cAAc,CAAC,CAAC,KAAK,EAAE,YAAY,GAAG,OAAO,CAAC;CACjD;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC,GAAG;IACxE,eAAe,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;CACtC,CAAC;AAEF,eAAO,MAAM,MAAM,sGA4DjB,CAAC"}

package/dist/loader.js

@@ -13,19 +13,22 @@ import { ErrorBoundary } from '@servicetitan/error-boundary';
 import { Log } from '@servicetitan/log-service';
 import { useOptionalDependencies } from '@servicetitan/react-ioc';
 import { EXPOSED_DEPENDENCIES_TOKEN, useCancelation, } from './common';
+import { Delayed } from './delayed';
 import { EVENT_BUS_TOKEN, useEventBus } from './event-bus';
 import { EXPOSED_DEPENDENCIES } from './globals';
-import { getBundleInfo, validateBundleInfo, loadScripts, webComponent } from './utils';
+import { TtlCache, getBundleInfo, validateBundleInfo, loadScripts, webComponent, } from './utils';
 export const Loader = forwardRef((props, ref) => {
     var _a;
-    const { basename, fallbackSrc, onRequestError, retries, src } = props;
+    const { cache = true, basename, fallbackSrc, onRequestError, retries, src } = props;
+    const { loadingFallback, loadingFallbackDelayed = true } = props;
     const bus = useEventBus();
     const [logService, exposedDependencies = EXPOSED_DEPENDENCIES, eventBus = bus] = useOptionalDependencies(Log, EXPOSED_DEPENDENCIES_TOKEN, EVENT_BUS_TOKEN);
     const cancelation = useCancelation();
-    const LoadingFallback = useMemo(() => getFallback(props.loadingFallback, 'Loading...'), [props.loadingFallback]);
+    const LoadingFallback = useMemo(() => getFallback(loadingFallback, 'Loading...', { delayed: loadingFallbackDelayed }), [loadingFallback, loadingFallbackDelayed]);
     const ErrorFallback = useMemo(() => getFallback(props.errorFallback, 'Something went wrong'), [props.errorFallback]);
     const Loader = useMemo(() => lazyLoader({
         basename,
+        cache,
         cancelation,
         exposedDependencies,
         eventBus,
@@ -36,6 +39,7 @@ export const Loader = forwardRef((props, ref) => {
         src,
     }), [
         basename,
+        cache,
         cancelation,
         exposedDependencies,
         eventBus,
@@ -61,22 +65,27 @@ function lazyLoader(props) {
     };
 }
 function lazyWebComponent(props) {
-    const { basename, cancelation, exposedDependencies, eventBus, fallbackSrc, logService, onRequestError, retries, src, } = props;
+    const { basename, cache, cancelation, exposedDependencies, eventBus, fallbackSrc, logService, onRequestError, retries, src, } = props;
     return lazy(() => __awaiter(this, void 0, void 0, function* () {
-        let bundleInfo;
-        try {
-            bundleInfo = yield getBundleInfo(src, fallbackSrc, exposedDependencies, cancelation.signal, retries, onRequestError);
-        }
-        catch (e) {
-            if (cancelation.signal.aborted) {
-                return {
-                    default: () => null,
-                };
+        let bundleInfo = cache ? bundleCache.get(src) : undefined;
+        if (!bundleInfo) {
+            try {
+                bundleInfo = yield getBundleInfo(src, fallbackSrc, exposedDependencies, cancelation.signal, retries, onRequestError);
+            }
+            catch (e) {
+                if (cancelation.signal.aborted) {
+                    return {
+                        default: () => null,
+                    };
+                }
+                throw e;
+            }
+            if (cache) {
+                bundleCache.set(src, bundleInfo, typeof cache === 'number' ? cache : undefined);
             }
-            throw e;
+            validateBundleInfo(bundleInfo, { exposedDependencies, logService, packageName: src });
+            yield loadScripts(bundleInfo);
         }
-        validateBundleInfo(bundleInfo, { logService, packageName: src });
-        yield loadScripts(bundleInfo);
         return {
             default: webComponent({
                 basename,
@@ -88,7 +97,10 @@ function lazyWebComponent(props) {
         };
     }));
 }
-function getFallback(node, message) {
-    return () => (node !== undefined ? node : _jsx("h2", { children: message }));
+function getFallback(node, message, { delayed = false } = {}) {
+    const fallbackNode = node !== undefined ? node : _jsx("h2", { children: message });
+    return delayed ? () => _jsx(Delayed, { children: fallbackNode }) : () => fallbackNode;
 }
+const MINUTE = 1000 * 60;
+const bundleCache = new TtlCache({ ttlMs: 15 * MINUTE });
 //# sourceMappingURL=loader.js.map

package/dist/loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"loader.js","sourceRoot":"","sources":["../src/loader.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"loader.js","sourceRoot":"","sources":["../src/loader.tsx"],"names":[],"mappings":"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"}

package/dist/utils/index.d.ts

@@ -4,6 +4,7 @@ export * from './get-mfe-supports-rerendering';
 export * from './get-version-mismatches';
 export * from './is-versioned-url';
 export * from './load-scripts';
+export * from './ttl-cache';
 export * from './validate-bundle-info';
 export * from './web-component';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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"}
+{"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,aAAa,CAAC;AAC5B,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC"}

package/dist/utils/index.js

@@ -4,6 +4,7 @@ export * from './get-mfe-supports-rerendering';
 export * from './get-version-mismatches';
 export * from './is-versioned-url';
 export * from './load-scripts';
+export * from './ttl-cache';
 export * from './validate-bundle-info';
 export * from './web-component';
 //# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -1 +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"}
+{"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,aAAa,CAAC;AAC5B,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC"}

package/dist/utils/ttl-cache.d.ts

@@ -0,0 +1,17 @@
+export interface TtlCacheOptions {
+    ttlMs?: number;
+}
+export declare class TtlCache<T = any> {
+    private data;
+    private timers;
+    private ttl;
+    constructor({ ttlMs }?: TtlCacheOptions);
+    set(key: string, value: T, ttl?: number): void;
+    get(key: string): T | undefined;
+    has(key: string): boolean;
+    delete(key: string): void;
+    clear(): void;
+    private cancelTimeout;
+    private setTimeout;
+}
+//# sourceMappingURL=ttl-cache.d.ts.map

package/dist/utils/ttl-cache.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ttl-cache.d.ts","sourceRoot":"","sources":["../../src/utils/ttl-cache.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,eAAe;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,qBAAa,QAAQ,CAAC,CAAC,GAAG,GAAG;IACzB,OAAO,CAAC,IAAI,CAAiB;IAC7B,OAAO,CAAC,MAAM,CAA6C;IAC3D,OAAO,CAAC,GAAG,CAAS;gBAER,EAAE,KAAmB,EAAE,GAAE,eAAoB;IAUzD,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,MAAM;IAKvC,GAAG,CAAC,GAAG,EAAE,MAAM;IAIf,GAAG,CAAC,GAAG,EAAE,MAAM;IAIf,MAAM,CAAC,GAAG,EAAE,MAAM;IAKlB,KAAK;IAML,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,UAAU;CASrB"}

package/dist/utils/ttl-cache.js

@@ -0,0 +1,65 @@
+const MINUTE = 1000 * 60;
+const DEFAULT_TTL = 5 * MINUTE;
+export class TtlCache {
+    constructor({ ttlMs = DEFAULT_TTL } = {}) {
+        Object.defineProperty(this, "data", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "timers", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "ttl", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        if (ttlMs < 0) {
+            throw new Error('default TTL must be zero or greater');
+        }
+        this.data = new Map();
+        this.timers = new Map();
+        this.ttl = ttlMs;
+    }
+    set(key, value, ttl) {
+        this.setTimeout(key, ttl !== null && ttl !== void 0 ? ttl : this.ttl);
+        this.data.set(key, value);
+    }
+    get(key) {
+        return this.data.get(key);
+    }
+    has(key) {
+        return this.data.has(key);
+    }
+    delete(key) {
+        this.cancelTimeout(key);
+        this.data.delete(key);
+    }
+    clear() {
+        this.data.clear();
+        this.timers.forEach(value => clearTimeout(value));
+        this.timers.clear();
+    }
+    cancelTimeout(key) {
+        const id = this.timers.get(key);
+        if (id) {
+            clearTimeout(id);
+            this.timers.delete(key);
+        }
+    }
+    setTimeout(key, ttl) {
+        this.cancelTimeout(key);
+        if (ttl < 0) {
+            return;
+        }
+        const id = setTimeout(() => this.delete(key), ttl);
+        this.timers.set(key, id);
+    }
+}
+//# sourceMappingURL=ttl-cache.js.map

package/dist/utils/ttl-cache.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ttl-cache.js","sourceRoot":"","sources":["../../src/utils/ttl-cache.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,GAAG,IAAI,GAAG,EAAE,CAAC;AACzB,MAAM,WAAW,GAAG,CAAC,GAAG,MAAM,CAAC;AAM/B,MAAM,OAAO,QAAQ;IAKjB,YAAY,EAAE,KAAK,GAAG,WAAW,KAAsB,EAAE;QAJjD;;;;;WAAqB;QACrB;;;;;WAAmD;QACnD;;;;;WAAY;QAGhB,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;YACZ,MAAM,IAAI,KAAK,CAAC,qCAAqC,CAAC,CAAC;QAC3D,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG,EAAE,CAAC;QACtB,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,EAAE,CAAC;QACxB,IAAI,CAAC,GAAG,GAAG,KAAK,CAAC;IACrB,CAAC;IAED,GAAG,CAAC,GAAW,EAAE,KAAQ,EAAE,GAAY;QACnC,IAAI,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,aAAH,GAAG,cAAH,GAAG,GAAI,IAAI,CAAC,GAAG,CAAC,CAAC;QACtC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IAC9B,CAAC;IAED,GAAG,CAAC,GAAW;QACX,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC9B,CAAC;IAED,GAAG,CAAC,GAAW;QACX,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC9B,CAAC;IAED,MAAM,CAAC,GAAW;QACd,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACxB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IAC1B,CAAC;IAED,KAAK;QACD,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;QAClB,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;QAClD,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;IACxB,CAAC;IAEO,aAAa,CAAC,GAAW;QAC7B,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAChC,IAAI,EAAE,EAAE,CAAC;YACL,YAAY,CAAC,EAAE,CAAC,CAAC;YACjB,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QAC5B,CAAC;IACL,CAAC;IAEO,UAAU,CAAC,GAAW,EAAE,GAAW;QACvC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACxB,IAAI,GAAG,GAAG,CAAC,EAAE,CAAC;YACV,OAAO;QACX,CAAC;QAED,MAAM,EAAE,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;QACnD,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;IAC7B,CAAC;CACJ"}

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

@@ -1,6 +1,8 @@
 import { Log } from '@servicetitan/log-service';
+import { ExposedDependencies } from '../common';
 import { BundleInfo } from './get-bundle-info';
-export declare function validateBundleInfo({ mismatch }: BundleInfo, { logService, packageName }: {
+export declare function validateBundleInfo({ mismatch }: BundleInfo, { exposedDependencies, logService, packageName, }: {
+    exposedDependencies?: ExposedDependencies;
     logService?: Log;
     packageName: string;
 }): void;

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

@@ -1 +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"}
+{"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,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,wBAAgB,kBAAkB,CAC9B,EAAE,QAAQ,EAAE,EAAE,UAAU,EACxB,EACI,mBAAwB,EACxB,UAAU,EACV,WAAW,GACd,EAAE;IAAE,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAAC,UAAU,CAAC,EAAE,GAAG,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,QAqB1F"}

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

@@ -1,9 +1,20 @@
-export function validateBundleInfo({ mismatch }, { logService, packageName }) {
-    if (mismatch) {
-        logService === null || logService === void 0 ? void 0 : logService.warning({
+export function validateBundleInfo({ mismatch }, { exposedDependencies = {}, logService, packageName, }) {
+    if (!mismatch || !logService) {
+        return;
+    }
+    const data = { package: packageName, dependencies: JSON.stringify(mismatch) };
+    if (Object.keys(exposedDependencies).length === 0) {
+        logService.warning({
+            category: 'MicroFrontends.NoExposedDependencies',
+            message: 'Cannot use light bundle because the host is not exposing dependencies or the list of shared dependencies is empty.',
+            data,
+        });
+    }
+    else {
+        logService.warning({
             category: 'MicroFrontends.DependenciesMismatch',
             message: 'Some of the package dependencies have incompatible versions.',
-            data: { package: packageName, dependencies: JSON.stringify(mismatch) },
+            data,
         });
     }
 }

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

@@ -1 +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,CAAC;QACX,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;IACP,CAAC;AACL,CAAC"}
+{"version":3,"file":"validate-bundle-info.js","sourceRoot":"","sources":["../../src/utils/validate-bundle-info.ts"],"names":[],"mappings":"AAIA,MAAM,UAAU,kBAAkB,CAC9B,EAAE,QAAQ,EAAc,EACxB,EACI,mBAAmB,GAAG,EAAE,EACxB,UAAU,EACV,WAAW,GACwE;IAEvF,IAAI,CAAC,QAAQ,IAAI,CAAC,UAAU,EAAE,CAAC;QAC3B,OAAO;IACX,CAAC;IAED,MAAM,IAAI,GAAG,EAAE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,EAAE,CAAC;IAC9E,IAAI,MAAM,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAChD,UAAU,CAAC,OAAO,CAAC;YACf,QAAQ,EAAE,sCAAsC;YAChD,OAAO,EACH,oHAAoH;YACxH,IAAI;SACP,CAAC,CAAC;IACP,CAAC;SAAM,CAAC;QACJ,UAAU,CAAC,OAAO,CAAC;YACf,QAAQ,EAAE,qCAAqC;YAC/C,OAAO,EAAE,8DAA8D;YACvE,IAAI;SACP,CAAC,CAAC;IACP,CAAC;AACL,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/web-components",
-    "version": "24.1.3",
+    "version": "24.2.0",
     "description": "",
     "repository": {
         "type": "git",
@@ -15,16 +15,16 @@
         "src"
     ],
     "dependencies": {
-        "@servicetitan/error-boundary": "24.1.3",
+        "@servicetitan/error-boundary": "24.2.0",
         "lodash.get": "~4.4.2",
         "mitt": "~3.0.1",
         "semver": "~7.6.2"
     },
     "devDependencies": {
         "@servicetitan/design-system": "~14.0.0",
-        "@servicetitan/log-service": "24.1.3",
-        "@servicetitan/react-ioc": "24.1.3",
-        "@testing-library/dom": "^10.2.0",
+        "@servicetitan/log-service": "24.2.0",
+        "@servicetitan/react-ioc": "24.2.0",
+        "@testing-library/dom": "^10.3.1",
         "@testing-library/jest-dom": "^6.4.5",
         "@testing-library/react": "^16.0.0",
         "@types/history": "~4.7.10",
@@ -39,8 +39,8 @@
     },
     "peerDependencies": {
         "@servicetitan/design-system": ">=12.6.2",
-        "@servicetitan/log-service": "24.1.3",
-        "@servicetitan/react-ioc": "24.1.3",
+        "@servicetitan/log-service": "24.2.0",
+        "@servicetitan/react-ioc": "24.2.0",
         "history": "~4.10.1",
         "react": ">=17.0.2",
         "react-dom": ">=17.0.2"
@@ -51,5 +51,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "8b7d1f1e3141d9691fd2bb93ca759dcc319a924c"
+    "gitHead": "13848340f521a17e1e251fde0d031022910ca7ab"
 }

package/src/__tests__/delayed.test.tsx

@@ -0,0 +1,50 @@
+import '@testing-library/jest-dom';
+import { act, render, screen } from '@testing-library/react';
+
+import { Delayed, DelayedProps } from '../delayed';
+
+describe(`${Delayed.name}`, () => {
+    const content = 'foo';
+    let props: DelayedProps;
+
+    beforeEach(() => {
+        jest.useFakeTimers();
+        props = {};
+    });
+
+    const subject = () => render(<Delayed {...props}>{content}</Delayed>);
+
+    test('renders content after 200ms delay', () => {
+        subject();
+
+        act(() => jest.advanceTimersByTime(199));
+        expect(screen.queryByText(content)).not.toBeInTheDocument();
+
+        act(() => jest.advanceTimersByTime(1));
+        expect(screen.getByText(content)).toBeInTheDocument();
+    });
+
+    describe('with zero delay', () => {
+        beforeEach(() => (props.delayMs = 0));
+
+        test('renders content immediately', () => {
+            subject();
+
+            expect(screen.getByText(content)).toBeInTheDocument();
+        });
+    });
+
+    describe('with custom delay', () => {
+        beforeEach(() => (props.delayMs = 1000));
+
+        test('renders content after specified delay', () => {
+            subject();
+
+            act(() => jest.advanceTimersByTime(props.delayMs! - 1));
+            expect(screen.queryByText(content)).not.toBeInTheDocument();
+
+            act(() => jest.advanceTimersByTime(1));
+            expect(screen.queryByText(content)).toBeInTheDocument();
+        });
+    });
+});

package/src/__tests__/loader.test.tsx

@@ -44,11 +44,7 @@ describe('[web-components] Loader', () => {
     let metadata: Metadata;
 
     function setStartupVersion(version: string | undefined) {
-        if (!version) {
-            metadata.bundledWith = undefined;
-        } else {
-            metadata.bundledWith = { '@servicetitan/startup': version };
-        }
+        metadata.bundledWith = version ? { '@servicetitan/startup': version } : undefined;
     }
 
     beforeAll(() => {
@@ -104,7 +100,7 @@ describe('[web-components] Loader', () => {
             },
         };
         setStartupVersion('22.14.0');
-        props = { src: baseUrl };
+        props = { src: baseUrl, cache: false };
         onloadRef = null;
         singletons = [];
         initializeGetJsonMockFns();
@@ -128,9 +124,10 @@ describe('[web-components] Loader', () => {
         return render(<Root />);
     }
 
-    test('renders default loading fallback', () => {
+    test('renders default loading fallback', async () => {
         subject();
-        expect(screen.getByText(/loading/i)).toBeInTheDocument();
+
+        await waitFor(() => expect(screen.getByText(/loading/i)).toBeInTheDocument());
     });
 
     describe('with ref parameter', () => {
@@ -162,37 +159,38 @@ describe('[web-components] Loader', () => {
             props.loadingFallback = <div>foo</div>;
         });
 
-        test('renders provided loading fallback', () => {
+        test('renders provided loading fallback', async () => {
             subject();
-            expect(screen.getByText('foo')).toBeInTheDocument();
+
+            await waitFor(() => expect(screen.getByText('foo')).toBeInTheDocument());
         });
 
         test('preserves component state when loading fallback is updated', () => {
             const renderResult = subject();
             expect(common.getJson).toHaveBeenCalledTimes(1);
+
             props.loadingFallback = <div>foo</div>;
             renderResult.rerender(<Root />);
+
             expect(common.getJson).toHaveBeenCalledTimes(1);
         });
     });
 
     describe('when the loadingFallback throws an error', () => {
         beforeEach(() => {
-            // suppress console.error that appears in the test output
-            jest.spyOn(console, 'error').mockImplementation(jest.fn);
+            jest.spyOn(console, 'error').mockImplementation(jest.fn); // suppress console output
             const ThrowError: FC = () => {
                 throw new Error('woops');
             };
-            props.loadingFallback = (
-                <div>
-                    <ThrowError />
-                </div>
-            );
+            props.loadingFallback = <ThrowError />;
         });
 
-        test('renders default error fallback', () => {
+        test('renders default error fallback', async () => {
             subject();
-            expect(screen.getByText(/something went wrong/i)).toBeInTheDocument();
+
+            await waitFor(() =>
+                expect(screen.getByText(/something went wrong/i)).toBeInTheDocument()
+            );
         });
 
         describe('when an errorFallback is provided', () => {
@@ -200,13 +198,24 @@ describe('[web-components] Loader', () => {
                 props.errorFallback = <div>bar</div>;
             });
 
-            test('renders provided error fallback', () => {
+            test('renders provided error fallback', async () => {
                 subject();
-                expect(screen.getByText('bar')).toBeInTheDocument();
+
+                await waitFor(() => expect(screen.getByText('bar')).toBeInTheDocument());
             });
         });
     });
 
+    describe('when loadingFallback is not delayed', () => {
+        beforeEach(() => (props.loadingFallbackDelayed = false));
+
+        test('renders loading fallback immediately', () => {
+            subject();
+
+            expect(screen.getByText(/loading/i)).toBeInTheDocument();
+        });
+    });
+
     describe('when a script tag (with a webComponent data attr) for this bundle is in the DOM before Loader is rendered', () => {
         beforeEach(() => {
             const script = document.createElement('script');
@@ -637,6 +646,10 @@ describe('[web-components] Loader', () => {
 
                 beforeEach(() => {
                     jest.mocked(getVersionMismatches).mockReturnValue(mismatchedDeps);
+                    singletons?.push({
+                        provide: EXPOSED_DEPENDENCIES_TOKEN,
+                        useValue: { foo: 'bar' },
+                    });
                 });
 
                 itAddsJsEntrypointToWebComponent(
@@ -656,7 +669,7 @@ describe('[web-components] Loader', () => {
                         singletons?.push({ provide: Log, useValue: logService });
                     });
 
-                    test('logs a warning', async () => {
+                    test('logs "mismatch" warning', async () => {
                         await webComponentReadySetup();
 
                         expect(logService.warning).toHaveBeenCalledWith(
@@ -669,6 +682,24 @@ describe('[web-components] Loader', () => {
                             })
                         );
                     });
+
+                    describe('when host exposes no dependencies', () => {
+                        beforeEach(() => {
+                            singletons = singletons?.filter(
+                                ({ provide }: any) => provide !== EXPOSED_DEPENDENCIES_TOKEN
+                            );
+                        });
+
+                        test('logs "no dependencies" warning', async () => {
+                            await webComponentReadySetup();
+
+                            expect(logService.warning).toHaveBeenCalledWith(
+                                expect.objectContaining({
+                                    category: 'MicroFrontends.NoExposedDependencies',
+                                })
+                            );
+                        });
+                    });
                 });
             });
         });
@@ -678,4 +709,80 @@ describe('[web-components] Loader', () => {
             expect(onloadRef).toBeNull();
         });
     });
+
+    describe('when cache is enabled', () => {
+        beforeAll(() => {
+            jest.useFakeTimers();
+            jest.spyOn(console, 'error').mockImplementation(jest.fn); // suppress "suspended resource finished loading inside a test" error
+        });
+
+        beforeEach(() => delete props.cache);
+
+        function preloadComponent({ id, cache }: { id?: string; cache?: boolean | number } = {}) {
+            if (id) {
+                props.src = `http://localhost/${id}`;
+                initializeGetJsonMockFns(props.src);
+            }
+            if (cache !== undefined) {
+                props.cache = cache;
+            }
+            subject();
+            jest.mocked(common.getJson).mockClear();
+        }
+
+        function itReloadsMetadataAfter(delay: number, description: string) {
+            test(`reloads metadata after ${description}`, () => {
+                act(() => jest.advanceTimersByTime(delay - 1));
+                subject();
+                expect(common.getJson).toHaveBeenCalledTimes(0);
+
+                act(() => jest.advanceTimersByTime(1));
+                subject();
+                expect(common.getJson).toHaveBeenCalledTimes(1);
+            });
+        }
+
+        describe('when component was previously loaded', () => {
+            beforeEach(() => preloadComponent());
+
+            test('uses cached metadata', () => {
+                subject();
+
+                expect(common.getJson).toHaveBeenCalledTimes(0);
+            });
+
+            itReloadsMetadataAfter(1000 * 60 * 15, 'fifteen minutes');
+        });
+
+        describe('when component has custom ttl', () => {
+            const customTtl = 1000 * 60; // one minute
+
+            beforeEach(() => preloadComponent({ id: 'mfe2', cache: customTtl }));
+
+            itReloadsMetadataAfter(customTtl, 'custom ttl');
+        });
+
+        describe('when component has indefinite ttl', () => {
+            beforeEach(() => preloadComponent({ id: 'mfe3', cache: -1 }));
+
+            test('never reloads metadata', () => {
+                jest.runOnlyPendingTimers();
+                subject();
+
+                expect(common.getJson).toHaveBeenCalledTimes(0);
+            });
+        });
+
+        describe('when component has zero ttl', () => {
+            beforeEach(() => preloadComponent({ id: 'mfe4', cache: 0 }));
+
+            test('always reloads metadata', () => {
+                subject();
+                expect(common.getJson).toHaveBeenCalledTimes(1);
+
+                subject();
+                expect(common.getJson).toHaveBeenCalledTimes(2);
+            });
+        });
+    });
 });

package/src/delayed.tsx

@@ -0,0 +1,18 @@
+import { FC, PropsWithChildren, useEffect, useState } from 'react';
+
+export type DelayedProps = PropsWithChildren<{
+    delayMs?: number;
+}>;
+
+export const Delayed: FC<DelayedProps> = ({ delayMs = 200, children }: DelayedProps) => {
+    const [timedOut, setTimedOut] = useState(delayMs <= 0);
+
+    useEffect(() => {
+        if (delayMs > 0) {
+            const timer = setTimeout(() => setTimedOut(true), delayMs);
+            return () => clearTimeout(timer);
+        }
+    }, [delayMs]);
+
+    return timedOut ? children : null;
+};

package/src/loader.tsx

@@ -19,9 +19,17 @@ import {
     useCancelation,
 } from './common';
 import { MFEContextData } from './contexts/mfe-data-context';
+import { Delayed } from './delayed';
 import { EventBus, EVENT_BUS_TOKEN, useEventBus } from './event-bus';
 import { EXPOSED_DEPENDENCIES } from './globals';
-import { BundleInfo, getBundleInfo, validateBundleInfo, loadScripts, webComponent } from './utils';
+import {
+    BundleInfo,
+    TtlCache,
+    getBundleInfo,
+    validateBundleInfo,
+    loadScripts,
+    webComponent,
+} from './utils';
 
 export type LoaderRef = EventBus;
 
@@ -34,9 +42,11 @@ export interface LoaderProps<T> {
     data?: MFEContextData<T>;
     basename?: string;
     loadingFallback?: FallbackNode;
+    loadingFallbackDelayed?: boolean;
     errorFallback?: FallbackNode;
     className?: string;
     retries?: number;
+    cache?: boolean | number;
     onRequestError?(error: GetJsonError): boolean;
 }
 
@@ -45,7 +55,8 @@ export type LoaderDataProps = Pick<LoaderProps<{}>, 'data' | 'className'> & {
 };
 
 export const Loader = forwardRef<LoaderRef, LoaderProps<{}>>((props, ref) => {
-    const { basename, fallbackSrc, onRequestError, retries, src } = props;
+    const { cache = true, basename, fallbackSrc, onRequestError, retries, src } = props;
+    const { loadingFallback, loadingFallbackDelayed = true } = props;
 
     const bus = useEventBus();
     const [logService, exposedDependencies = EXPOSED_DEPENDENCIES, eventBus = bus] =
@@ -53,8 +64,8 @@ export const Loader = forwardRef<LoaderRef, LoaderProps<{}>>((props, ref) => {
     const cancelation = useCancelation();
 
     const LoadingFallback = useMemo(
-        () => getFallback(props.loadingFallback, 'Loading...'),
-        [props.loadingFallback]
+        () => getFallback(loadingFallback, 'Loading...', { delayed: loadingFallbackDelayed }),
+        [loadingFallback, loadingFallbackDelayed]
     );
 
     const ErrorFallback = useMemo(
@@ -66,6 +77,7 @@ export const Loader = forwardRef<LoaderRef, LoaderProps<{}>>((props, ref) => {
         () =>
             lazyLoader({
                 basename,
+                cache,
                 cancelation,
                 exposedDependencies,
                 eventBus,
@@ -77,6 +89,7 @@ export const Loader = forwardRef<LoaderRef, LoaderProps<{}>>((props, ref) => {
             }),
         [
             basename,
+            cache,
             cancelation,
             exposedDependencies,
             eventBus,
@@ -135,6 +148,7 @@ function lazyLoader(props: LazyLoaderProps) {
 function lazyWebComponent(props: LazyLoaderProps) {
     const {
         basename,
+        cache,
         cancelation,
         exposedDependencies,
         eventBus,
@@ -146,29 +160,35 @@ function lazyWebComponent(props: LazyLoaderProps) {
     } = props;
 
     return lazy<(props: LoaderDataProps) => JSX.Element | null>(async () => {
-        let bundleInfo: BundleInfo;
-        try {
-            bundleInfo = await getBundleInfo(
-                src,
-                fallbackSrc,
-                exposedDependencies,
-                cancelation.signal,
-                retries,
-                onRequestError
-            );
-        } catch (e) {
-            if (cancelation.signal.aborted) {
-                return {
-                    default: () => null,
-                };
+        let bundleInfo: BundleInfo | undefined = cache ? bundleCache.get(src) : undefined;
+        if (!bundleInfo) {
+            try {
+                bundleInfo = await getBundleInfo(
+                    src,
+                    fallbackSrc,
+                    exposedDependencies,
+                    cancelation.signal,
+                    retries,
+                    onRequestError
+                );
+            } catch (e) {
+                if (cancelation.signal.aborted) {
+                    return {
+                        default: () => null,
+                    };
+                }
+
+                throw e;
             }
 
-            throw e;
-        }
+            if (cache) {
+                bundleCache.set(src, bundleInfo, typeof cache === 'number' ? cache : undefined);
+            }
 
-        validateBundleInfo(bundleInfo, { logService, packageName: src });
+            validateBundleInfo(bundleInfo, { exposedDependencies, logService, packageName: src });
 
-        await loadScripts(bundleInfo);
+            await loadScripts(bundleInfo);
+        }
 
         return {
             default: webComponent({
@@ -182,6 +202,14 @@ function lazyWebComponent(props: LazyLoaderProps) {
     });
 }
 
-function getFallback(node: FallbackNode | undefined, message: string) {
-    return () => (node !== undefined ? (node as ReactElement) : <h2>{message}</h2>);
+function getFallback(
+    node: FallbackNode | undefined,
+    message: string,
+    { delayed = false }: { delayed?: boolean } = {}
+) {
+    const fallbackNode = node !== undefined ? (node as ReactElement) : <h2>{message}</h2>;
+    return delayed ? () => <Delayed>{fallbackNode}</Delayed> : () => fallbackNode;
 }
+
+const MINUTE = 1000 * 60;
+const bundleCache = new TtlCache<BundleInfo>({ ttlMs: 15 * MINUTE });

package/src/utils/__tests__/ttl-cache.test.ts

@@ -0,0 +1,98 @@
+import { TtlCache } from '../ttl-cache';
+
+describe(`${TtlCache.name}`, () => {
+    const key = 'foo';
+    const value = 'bar';
+
+    let cache: TtlCache<string>;
+
+    beforeEach(() => {
+        jest.useFakeTimers();
+        cache = new TtlCache();
+    });
+
+    test('cache rejects invalid default ttl', () => {
+        expect(() => new TtlCache({ ttlMs: -1 })).toThrow();
+    });
+
+    describe('when cache omits key', () => {
+        test('has returns false', () => {
+            expect(cache.has(key)).toBe(false);
+        });
+
+        test('get returns undefined', () => {
+            expect(cache.get(key)).toBeUndefined();
+        });
+    });
+
+    describe('when cache contains key', () => {
+        const elements = {
+            [key]: value,
+            [`other-${key}`]: `other-${value}`,
+        };
+
+        beforeEach(() => {
+            Object.entries(elements).map(([key, value]) => cache.set(key, value));
+        });
+
+        test('has returns true', () => {
+            expect(cache.has(key)).toBe(true);
+        });
+
+        test('get returns value', () => {
+            expect(cache.get(key)).toBe(value);
+        });
+
+        test('set replaces value', () => {
+            const newValue = `new-${value}`;
+
+            cache.set(key, newValue);
+
+            expect(cache.get(key)).toBe(newValue);
+        });
+
+        test('delete removes key', () => {
+            cache.delete(key);
+
+            expect(cache.has(key)).toBe(false);
+        });
+
+        test('clear removes all keys', () => {
+            cache.clear();
+
+            Object.keys(elements).forEach(key => expect(cache.has(key)).toBe(false));
+        });
+
+        test('removes keys after five minutes', () => {
+            jest.advanceTimersByTime(1000 * 60 * 5 - 1);
+            Object.keys(elements).forEach(key => expect(cache.has(key)).toBe(true));
+
+            jest.advanceTimersByTime(1);
+            Object.keys(elements).forEach(key => expect(cache.has(key)).toBe(false));
+        });
+
+        describe('when key has custom ttl', () => {
+            const ttl = 1000 * 60 * 10;
+
+            beforeEach(() => cache.set(key, value, ttl));
+
+            test('removes key after custom ttl', () => {
+                jest.advanceTimersByTime(ttl - 1);
+                expect(cache.has(key)).toBe(true);
+
+                jest.advanceTimersByTime(1);
+                expect(cache.has(key)).toBe(false);
+            });
+        });
+
+        describe('when key has negative ttl', () => {
+            beforeEach(() => cache.set(key, value, -1));
+
+            test('never removes key', () => {
+                jest.runOnlyPendingTimers();
+
+                expect(cache.has(key)).toBe(true);
+            });
+        });
+    });
+});

package/src/utils/index.ts

@@ -4,5 +4,6 @@ export * from './get-mfe-supports-rerendering';
 export * from './get-version-mismatches';
 export * from './is-versioned-url';
 export * from './load-scripts';
+export * from './ttl-cache';
 export * from './validate-bundle-info';
 export * from './web-component';

package/src/utils/ttl-cache.ts

@@ -0,0 +1,64 @@
+const MINUTE = 1000 * 60;
+const DEFAULT_TTL = 5 * MINUTE;
+
+export interface TtlCacheOptions {
+    ttlMs?: number;
+}
+
+export class TtlCache<T = any> {
+    private data: Map<string, T>;
+    private timers: Map<string, ReturnType<typeof setTimeout>>;
+    private ttl: number;
+
+    constructor({ ttlMs = DEFAULT_TTL }: TtlCacheOptions = {}) {
+        if (ttlMs < 0) {
+            throw new Error('default TTL must be zero or greater');
+        }
+
+        this.data = new Map();
+        this.timers = new Map();
+        this.ttl = ttlMs;
+    }
+
+    set(key: string, value: T, ttl?: number) {
+        this.setTimeout(key, ttl ?? this.ttl);
+        this.data.set(key, value);
+    }
+
+    get(key: string) {
+        return this.data.get(key);
+    }
+
+    has(key: string) {
+        return this.data.has(key);
+    }
+
+    delete(key: string) {
+        this.cancelTimeout(key);
+        this.data.delete(key);
+    }
+
+    clear() {
+        this.data.clear();
+        this.timers.forEach(value => clearTimeout(value));
+        this.timers.clear();
+    }
+
+    private cancelTimeout(key: string) {
+        const id = this.timers.get(key);
+        if (id) {
+            clearTimeout(id);
+            this.timers.delete(key);
+        }
+    }
+
+    private setTimeout(key: string, ttl: number) {
+        this.cancelTimeout(key);
+        if (ttl < 0) {
+            return;
+        }
+
+        const id = setTimeout(() => this.delete(key), ttl);
+        this.timers.set(key, id);
+    }
+}

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

@@ -1,15 +1,32 @@
 import { Log } from '@servicetitan/log-service';
+import { ExposedDependencies } from '../common';
 import { BundleInfo } from './get-bundle-info';
 
 export function validateBundleInfo(
     { mismatch }: BundleInfo,
-    { logService, packageName }: { logService?: Log; packageName: string }
+    {
+        exposedDependencies = {},
+        logService,
+        packageName,
+    }: { exposedDependencies?: ExposedDependencies; logService?: Log; packageName: string }
 ) {
-    if (mismatch) {
-        logService?.warning({
+    if (!mismatch || !logService) {
+        return;
+    }
+
+    const data = { package: packageName, dependencies: JSON.stringify(mismatch) };
+    if (Object.keys(exposedDependencies).length === 0) {
+        logService.warning({
+            category: 'MicroFrontends.NoExposedDependencies',
+            message:
+                'Cannot use light bundle because the host is not exposing dependencies or the list of shared dependencies is empty.',
+            data,
+        });
+    } else {
+        logService.warning({
             category: 'MicroFrontends.DependenciesMismatch',
             message: 'Some of the package dependencies have incompatible versions.',
-            data: { package: packageName, dependencies: JSON.stringify(mismatch) },
+            data,
         });
     }
 }