@servicetitan/web-components 31.0.0 → 31.2.0

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

@@ -2,28 +2,23 @@ import semver from 'semver';
 import get from 'lodash.get';
 
 import { ExposedDependencies, ExposedInstanceDependencies, getJson, GetJsonError } from '../common';
+import { getCachedMetadata } from './get-cached-metadata';
+import { getCacheSetting } from './get-cache-setting';
 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';
 import { getMFEHasCompatibleLaunchDarklyVersion } from './get-mfe-has-compatible-launchdarkly-version';
+import { getMFESupportsRerendering } from './get-mfe-supports-rerendering';
 import { getMFEHasUniqueChunkNamespace } from './get-mfe-has-unique-chunk-namespace';
-
-export interface Metadata {
-    name: string;
-    version?: string;
-    bundledWith?: Record<string, string | undefined>;
-    sharedDependencies: Record<string, string>;
-    dependencies?: Record<string, string>;
-    entrypoints?: Record<string, { css: string[]; js: string[] }>;
-}
+import { getVersionMismatches } from './get-version-mismatches';
+import type { Metadata } from '../types';
 
 export type BundleInfo = Awaited<ReturnType<typeof getBundleInfo>>;
 
 interface GetBundleInfoProps {
+    cache: boolean | number;
     exposedDependencies?: ExposedDependencies;
     exposedInstanceDependencies?: ExposedInstanceDependencies;
     fallbackPackageUrl?: string;
+    isHeadless?: boolean;
     mainPackageUrl: string;
     onRequestError?: (error: GetJsonError) => void;
     retries?: number;
@@ -31,15 +26,18 @@ interface GetBundleInfoProps {
 }
 
 export async function getBundleInfo({
+    cache,
     mainPackageUrl,
     fallbackPackageUrl,
     exposedDependencies = {},
     exposedInstanceDependencies = {},
+    isHeadless,
     signal,
     retries,
     onRequestError,
 }: GetBundleInfoProps) {
-    const { data: metadata, url: packageUrl } = await getMetadata({
+    const { data: metadata, url: packageUrl } = await getCachedMetadata({
+        cache,
         fallbackPackageUrl,
         mainPackageUrl,
         onRequestError,
@@ -49,14 +47,14 @@ export async function getBundleInfo({
 
     const { bundledWith, name, sharedDependencies } = metadata;
     const exactPackageUrl = packageUrl.replace('/dist/metadata.json', '');
-    const cache = getCacheSetting(exactPackageUrl);
+    const requestCache = getCacheSetting(exactPackageUrl);
 
     let dependencies: NonNullable<Metadata['dependencies']>;
     if (metadata.dependencies) {
         dependencies = metadata.dependencies;
     } else {
         const { data: packageJson } = await getJson(`${exactPackageUrl}/package.json`, {
-            cache,
+            cache: requestCache,
             retries,
             signal,
         });
@@ -64,23 +62,31 @@ export async function getBundleInfo({
         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 mismatch: ReturnType<typeof getVersionMismatches>;
+    let resolvedBundleType: 'headless' | 'light' | 'full';
+
+    if (isHeadless) {
+        resolvedBundleType = 'headless';
+    } else {
+        mismatch = getVersionMismatches(exposedDependencies, dependencies, sharedDependencies);
+        const startupVersion = bundledWith?.['@servicetitan/startup'];
+        const supportLightBundles = !!startupVersion && semver.gte(startupVersion, '17.0.0');
+        const embed = !mismatch && supportLightBundles;
+        resolvedBundleType = embed ? 'light' : 'full';
+    }
+
+    const withBaseUrl = (path: string) =>
+        `${exactPackageUrl}/dist/bundle/${resolvedBundleType}/${path}`;
 
     let entrypoints: EntryPoints;
-    if (metadata.entrypoints?.[bundleType]) {
-        entrypoints = metadata.entrypoints[bundleType];
+    if (metadata.entrypoints?.[resolvedBundleType]) {
+        entrypoints = metadata.entrypoints[resolvedBundleType];
     } else {
-        entrypoints = await getEntrypoints(withBaseUrl('entrypoints.json'), cache);
+        entrypoints = await getEntrypoints(withBaseUrl('entrypoints.json'), requestCache);
     }
 
     const disposer = () => {
-        if (embed) {
+        if (resolvedBundleType === 'light') {
             const path = Object.values<string>(sharedDependencies).shift();
             if (path) {
                 get(window, path).getStorage().clear(name);
@@ -93,6 +99,8 @@ export async function getBundleInfo({
         {} as EntryPoints
     );
 
+    const elementName = resolvedBundleType === 'headless' ? `headless-${name}` : name;
+
     return {
         bundledWith,
         disposer,
@@ -102,41 +110,10 @@ export async function getBundleInfo({
             bundledWith,
             exposedInstanceDependencies
         ),
-        mismatch: hasMismatch ? mismatch : undefined,
+        mismatch,
+        resolvedBundleType,
         urls,
-        WebComponent: name,
+        WebComponent: elementName,
         version: metadata.version,
     };
 }
-
-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<Metadata>(`${fallbackPackageUrl}/dist/metadata.json`, {
-            retries,
-            onRequestError,
-            cache: getCacheSetting(fallbackPackageUrl),
-            signal,
-        });
-    });
-}
-
-function getCacheSetting(url: string) {
-    return isVersionedUrl(url) ? undefined : 'no-store';
-}

package/src/utils/get-cache-setting.ts

@@ -0,0 +1,5 @@
+import { isVersionedUrl } from './is-versioned-url';
+
+export function getCacheSetting(url: string) {
+    return isVersionedUrl(url) ? undefined : 'no-store';
+}

package/src/utils/get-cached-metadata.ts

@@ -0,0 +1,72 @@
+import { getJson, GetJsonError } from '../common';
+import type { Metadata } from '../types';
+import { getCacheSetting } from './get-cache-setting';
+import { getMFEHasUniqueChunkNamespace } from './get-mfe-has-unique-chunk-namespace';
+import { TtlCache } from './ttl-cache';
+
+const MINUTE = 1000 * 60;
+
+const metadataResponseCache = new TtlCache<Awaited<ReturnType<typeof getMetadata>>>({
+    ttlMs: 15 * MINUTE,
+});
+
+interface GetMetadataProps {
+    fallbackPackageUrl?: string;
+    mainPackageUrl: string;
+    onRequestError?: (error: GetJsonError) => void;
+    signal?: AbortSignal;
+    retries?: number;
+}
+
+async function getMetadata(props: GetMetadataProps) {
+    const { fallbackPackageUrl, mainPackageUrl, onRequestError, retries, signal } = props;
+
+    try {
+        return await getJson<Metadata>(`${mainPackageUrl}/dist/metadata.json`, {
+            cache: getCacheSetting(mainPackageUrl),
+            retries: fallbackPackageUrl ? 0 : retries,
+            onRequestError,
+            signal,
+        });
+    } catch (e) {
+        if (!fallbackPackageUrl) {
+            throw e;
+        }
+
+        return getJson<Metadata>(`${fallbackPackageUrl}/dist/metadata.json`, {
+            retries,
+            onRequestError,
+            cache: getCacheSetting(fallbackPackageUrl),
+            signal,
+        });
+    }
+}
+
+export async function getCachedMetadata(props: GetMetadataProps & { cache: boolean | number }) {
+    let cache = props.cache;
+    const cacheKey = props.mainPackageUrl;
+
+    let metadataResponse = cache ? metadataResponseCache.get(cacheKey) : undefined;
+
+    if (!metadataResponse) {
+        metadataResponse = await getMetadata(props);
+
+        const mfeHasUniqueChunkNamespace = getMFEHasUniqueChunkNamespace(
+            metadataResponse.data.bundledWith
+        );
+
+        if (cache === true && !mfeHasUniqueChunkNamespace) {
+            cache = -1;
+        }
+
+        if (cache) {
+            metadataResponseCache.set(
+                cacheKey,
+                metadataResponse,
+                typeof cache === 'number' ? cache : undefined
+            );
+        }
+    }
+
+    return metadataResponse;
+}

package/src/utils/get-mfe-has-compatible-launchdarkly-version.ts

@@ -1,5 +1,5 @@
 import { ExposedInstanceDependencies } from '../common';
-import { Metadata } from './get-bundle-info';
+import type { Metadata } from '../types';
 
 /**
  * @param bundledWith THe MFE's metadata.bundledWith.

package/src/utils/get-mfe-has-unique-chunk-namespace.ts

@@ -1,5 +1,5 @@
 import semver from 'semver';
-import { Metadata } from './get-bundle-info';
+import type { Metadata } from '../types';
 
 // Check if the MFE loads it's chunks into a unique global chunk namespace
 export function getMFEHasUniqueChunkNamespace(bundledWith: Metadata['bundledWith']) {

package/src/utils/get-mfe-supports-rerendering.ts

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

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

@@ -32,5 +32,5 @@ export const getVersionMismatches = (
         }
     }
 
-    return mismatch;
+    return Object.keys(mismatch).length ? mismatch : undefined;
 };

package/src/utils/web-component.tsx

@@ -23,7 +23,8 @@ interface WebComponentProps {
 
 export function webComponent(props: WebComponentProps) {
     const { basename, bundleInfo, eventBus, exposedDependencies, ldService, logService } = props;
-    const { WebComponent, disposer, mfeSupportsRerendering, version } = bundleInfo;
+    const { WebComponent, resolvedBundleType, disposer, mfeSupportsRerendering, version } =
+        bundleInfo;
     const elementName = getElementName(bundleInfo);
 
     const exposedInstanceDependencies = ensureLDVersion(
@@ -31,7 +32,7 @@ export function webComponent(props: WebComponentProps) {
         bundleInfo.bundledWith?.['launchdarkly-js-client-sdk']
     );
 
-    return ({ LoadingFallback, ...props }: LoaderDataProps) => {
+    return ({ LoadingFallback, ...innerProps }: LoaderDataProps) => {
         const [isLoading, setIsLoading] = useState(true);
         const [historyManager] = useOptionalDependencies(HistoryManager);
 
@@ -54,7 +55,7 @@ export function webComponent(props: WebComponentProps) {
         };
 
         // Stringify data object so that it can be passed as a data-attribute
-        const stringifiedData = useMemo(() => JSON.stringify(props.data), [props.data]);
+        const stringifiedData = useMemo(() => JSON.stringify(innerProps.data), [innerProps.data]);
 
         /*
          * Set key for rendering the web component so that if the data from the Host change,
@@ -63,7 +64,7 @@ export function webComponent(props: WebComponentProps) {
          * 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 dataAttrs = useMemo(() => composeDataAttributes(innerProps.data), [innerProps.data]);
         const styleUrls = getStyleUrls(bundleInfo);
 
         return (
@@ -71,9 +72,8 @@ export function webComponent(props: WebComponentProps) {
                 {isLoading && <LoadingFallback />}
                 <WebComponent
                     key={key}
-                    // @ts-expect-error because property ref does not exist on IntrinsicAttributes
                     ref={handleRef}
-                    class={props.className}
+                    class={innerProps.className}
                     {...(styleUrls && { 'style-urls': styleUrls })}
                     /*
                      * Continue to spread data as separate data attributes for backwards compatibility,
@@ -83,6 +83,8 @@ export function webComponent(props: WebComponentProps) {
                     data-mfe-data={stringifiedData}
                     data-mfe-name={elementName}
                     {...(version && { 'data-mfe-version': version })}
+                    // @ts-expect-error style exists on HTMLElement
+                    style={resolvedBundleType === 'headless' ? { display: 'none' } : undefined}
                 />
             </Fragment>
         );

package/dist/__mocks__/expect-styles-in-dom.d.ts

@@ -1,3 +0,0 @@
-import '@testing-library/jest-dom';
-export declare function expectStylesInDom(styleUrls: string | string[], shadowRootFn: () => ShadowRoot): void;
-//# sourceMappingURL=expect-styles-in-dom.d.ts.map

package/dist/__mocks__/expect-styles-in-dom.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"expect-styles-in-dom.d.ts","sourceRoot":"","sources":["../../src/__mocks__/expect-styles-in-dom.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AAEnC,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,YAAY,EAAE,MAAM,UAAU,QAQ7F"}

package/dist/__mocks__/index.d.ts

@@ -1,4 +0,0 @@
-export * from './expect-styles-in-dom';
-export * from './register-component';
-export * from './test-component';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/__mocks__/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC"}

package/dist/__mocks__/register-component.d.ts

@@ -1,4 +0,0 @@
-import { FunctionComponent } from 'react';
-import { RegisterOptions } from '../register';
-export declare function registerComponent(TestComponent: FunctionComponent, componentName: string | undefined, options?: RegisterOptions): void;
-//# sourceMappingURL=register-component.d.ts.map

package/dist/__mocks__/register-component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"register-component.d.ts","sourceRoot":"","sources":["../../src/__mocks__/register-component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE9C,wBAAgB,iBAAiB,CAC7B,aAAa,EAAE,iBAAiB,EAChC,aAAa,EAAE,MAAM,GAAG,SAAS,EACjC,OAAO,CAAC,EAAE,eAAe,QAa5B"}

package/dist/__mocks__/test-component.d.ts

@@ -1,3 +0,0 @@
-import { FC } from 'react';
-export declare const MockComponent: FC<Record<string, any>>;
-//# sourceMappingURL=test-component.d.ts.map

package/dist/__mocks__/test-component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"test-component.d.ts","sourceRoot":"","sources":["../../src/__mocks__/test-component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAc,MAAM,OAAO,CAAC;AAMvC,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAqBjD,CAAC"}