@servicetitan/web-components 28.1.0 → 28.2.0

package/src/loader.tsx

@@ -9,23 +9,27 @@ import {
     useMemo,
 } from 'react';
 import { ErrorBoundary } from '@servicetitan/error-boundary';
+import { type LDService } from '@servicetitan/launchdarkly-service';
 import { Log } from '@servicetitan/log-service';
 import { useOptionalDependencies } from '@servicetitan/react-ioc';
 
 import {
     EXPOSED_DEPENDENCIES_TOKEN,
+    EXPOSED_INSTANCE_DEPENDENCIES_TOKEN,
     ExposedDependencies,
+    ExposedInstanceDependencies,
     GetJsonError,
     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 { EXPOSED_DEPENDENCIES, EXPOSED_INSTANCE_DEPENDENCIES } from './globals';
 import {
     BundleInfo,
     TtlCache,
     getBundleInfo,
+    getLDServiceToken,
     validateBundleInfo,
     loadScripts,
     webComponent,
@@ -59,8 +63,18 @@ export const Loader = forwardRef<LoaderRef, LoaderProps<{}>>((props, ref) => {
     const { loadingFallback, loadingFallbackDelayed = true } = props;
 
     const bus = useEventBus();
-    const [logService, exposedDependencies = EXPOSED_DEPENDENCIES, eventBus = bus] =
-        useOptionalDependencies(Log, EXPOSED_DEPENDENCIES_TOKEN, EVENT_BUS_TOKEN);
+    const [
+        logService,
+        exposedDependencies = EXPOSED_DEPENDENCIES,
+        exposedInstanceDependencies = EXPOSED_INSTANCE_DEPENDENCIES,
+        eventBus = bus,
+    ] = useOptionalDependencies(
+        Log,
+        EXPOSED_DEPENDENCIES_TOKEN,
+        EXPOSED_INSTANCE_DEPENDENCIES_TOKEN,
+        EVENT_BUS_TOKEN
+    );
+    const [ldService] = useOptionalDependencies(getLDServiceToken() ?? Symbol());
     const cancelation = useCancelation();
 
     const LoadingFallback = useMemo(() => {
@@ -73,6 +87,8 @@ export const Loader = forwardRef<LoaderRef, LoaderProps<{}>>((props, ref) => {
         return getFallback(props.errorFallback, message);
     }, [props.errorFallback, src]);
 
+    ensureLDService(exposedInstanceDependencies, ldService);
+
     const Loader = useMemo(
         () =>
             lazyLoader({
@@ -80,6 +96,7 @@ export const Loader = forwardRef<LoaderRef, LoaderProps<{}>>((props, ref) => {
                 cache,
                 cancelation,
                 exposedDependencies,
+                exposedInstanceDependencies,
                 eventBus,
                 fallbackSrc,
                 logService,
@@ -92,6 +109,7 @@ export const Loader = forwardRef<LoaderRef, LoaderProps<{}>>((props, ref) => {
             cache,
             cancelation,
             exposedDependencies,
+            exposedInstanceDependencies,
             eventBus,
             logService,
             onRequestError,
@@ -119,6 +137,7 @@ export const Loader = forwardRef<LoaderRef, LoaderProps<{}>>((props, ref) => {
 type LazyLoaderProps = LoaderProps<any> & {
     cancelation: AbortController;
     exposedDependencies?: ExposedDependencies;
+    exposedInstanceDependencies?: ExposedInstanceDependencies;
     eventBus: EventBus;
     logService?: Log;
 };
@@ -150,6 +169,7 @@ function lazyWebComponent(props: LazyLoaderProps) {
         basename,
         cancelation,
         exposedDependencies,
+        exposedInstanceDependencies,
         eventBus,
         fallbackSrc,
         logService,
@@ -160,18 +180,19 @@ function lazyWebComponent(props: LazyLoaderProps) {
 
     let { cache } = props;
 
-    return lazy<(props: LoaderDataProps) => JSX.Element | null>(async () => {
+    return lazy<(_: LoaderDataProps) => JSX.Element | null>(async () => {
         let bundleInfo: BundleInfo | undefined = cache ? bundleCache.get(src) : undefined;
         if (!bundleInfo) {
             try {
-                bundleInfo = await getBundleInfo(
-                    src,
-                    fallbackSrc,
+                bundleInfo = await getBundleInfo({
+                    mainPackageUrl: src,
+                    fallbackPackageUrl: fallbackSrc,
                     exposedDependencies,
-                    cancelation.signal,
+                    exposedInstanceDependencies,
+                    signal: cancelation.signal,
                     retries,
-                    onRequestError
-                );
+                    onRequestError,
+                });
             } catch (e) {
                 if (cancelation.signal.aborted) {
                     return {
@@ -190,17 +211,28 @@ function lazyWebComponent(props: LazyLoaderProps) {
                 bundleCache.set(src, bundleInfo, typeof cache === 'number' ? cache : undefined);
             }
 
-            validateBundleInfo(bundleInfo, { exposedDependencies, logService, packageName: src });
+            validateBundleInfo(bundleInfo, {
+                exposedDependencies,
+                exposedInstanceDependencies,
+                logService,
+                packageUrl: src,
+            });
         }
 
         await loadScripts(bundleInfo);
 
+        const ldService = bundleInfo.mfeHasCompatibleLaunchDarklyVersion
+            ? exposedInstanceDependencies?.launchDarkly?.ldService
+            : undefined;
+
         return {
             default: webComponent({
                 basename,
                 bundleInfo,
                 eventBus,
                 exposedDependencies,
+                exposedInstanceDependencies,
+                ldService,
                 logService,
             }),
         };
@@ -220,5 +252,18 @@ function isLocalHost(source: string) {
     return ['localhost', '127.0.0.1'].some(host => source.indexOf(host) >= 0);
 }
 
+function ensureLDService(
+    exposedInstanceDependencies?: ExposedInstanceDependencies,
+    ldService?: LDService
+) {
+    if (
+        exposedInstanceDependencies?.launchDarkly?.version &&
+        !exposedInstanceDependencies.launchDarkly.ldService &&
+        ldService
+    ) {
+        exposedInstanceDependencies.launchDarkly.ldService = ldService;
+    }
+}
+
 const MINUTE = 1000 * 60;
 const bundleCache = new TtlCache<BundleInfo>({ ttlMs: 15 * MINUTE });

package/src/register.tsx

@@ -1,15 +1,18 @@
 import { FC, ComponentType, ReactElement, useEffect } from 'react';
+import { type LDService } from '@servicetitan/launchdarkly-service';
 import { Log } from '@servicetitan/log-service';
 import { Provider } from '@servicetitan/react-ioc';
 
 import {
-    ExposedDependencies,
-    EXPOSED_DEPENDENCIES_TOKEN,
-    Entries,
-    IWebComponent,
     BASENAME_TOKEN,
+    EXPOSED_DEPENDENCIES_TOKEN,
+    EXPOSED_INSTANCE_DEPENDENCIES_TOKEN,
     IS_WEB_COMPONENT_TOKEN,
     RENDER_ROOT_TOKEN,
+    Entries,
+    ExposedDependencies,
+    ExposedInstanceDependencies,
+    IWebComponent,
 } from './common';
 import { MFEDataContext } from './contexts/mfe-data-context';
 import { MFEMetadataContext } from './contexts/mfe-metadata-context';
@@ -17,7 +20,7 @@ import { EventBus, EVENT_BUS_TOKEN } from './event-bus';
 import { WEB_COMPONENT_NAME } from './globals';
 import { HistoryManager } from './history-manager';
 import { render } from './render';
-import { getElementName } from './utils';
+import { getElementName, getLDServiceToken } from './utils';
 
 function createLink(url: string, onLoad: () => void) {
     const element = document.createElement('link');
@@ -50,9 +53,11 @@ export function register(Component: ComponentType, light: boolean, options?: Reg
             elements: HTMLElement[];
         } = { total: 0, loaded: 0, elements: [] };
 
+        private ldService?: LDService;
         private logService?: Log;
         private historyManager?: HistoryManager;
         private exposedDependencies?: ExposedDependencies;
+        private exposedInstanceDependencies?: ExposedInstanceDependencies;
         private eventBus?: EventBus;
         private basename?: string;
         private onReady?: () => void;
@@ -246,9 +251,17 @@ export function register(Component: ComponentType, light: boolean, options?: Reg
                                     provide: EXPOSED_DEPENDENCIES_TOKEN,
                                     useValue: this.exposedDependencies,
                                 },
-                                { provide: EVENT_BUS_TOKEN, useValue: this.eventBus },
+                                {
+                                    provide: EXPOSED_INSTANCE_DEPENDENCIES_TOKEN,
+                                    useValue: this.exposedInstanceDependencies,
+                                },
                                 { provide: BASENAME_TOKEN, useValue: this.basename },
-                            ].filter(({ useValue }) => useValue !== undefined)}
+                                { provide: EVENT_BUS_TOKEN, useValue: this.eventBus },
+                                { provide: getLDServiceToken(), useValue: this.ldService },
+                            ].filter(
+                                ({ provide, useValue }) =>
+                                    useValue !== undefined && provide !== undefined
+                            )}
                         >
                             <MFEDataContext.Provider value={{ ...mfeData }}>
                                 <MFEMetadataContext.Provider value={metadata}>

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

@@ -0,0 +1,54 @@
+import { ExposedInstanceDependencies } from '../../common';
+import { Metadata } from '../get-bundle-info';
+import { getMFEHasCompatibleLaunchDarklyVersion } from '../get-mfe-has-compatible-launchdarkly-version';
+
+describe(`[web-components] ${getMFEHasCompatibleLaunchDarklyVersion.name}`, () => {
+    const version = '1.0.0';
+    let metadata: Pick<Metadata, 'bundledWith'>;
+    let exposedInstanceDependencies: ExposedInstanceDependencies;
+
+    beforeEach(() => {
+        metadata = {
+            bundledWith: { 'launchdarkly-js-client-sdk': version },
+        };
+    });
+
+    function itReturns(value: boolean | undefined) {
+        test(`return ${value}`, () => {
+            expect(subject()).toBe(value);
+        });
+    }
+
+    const subject = () =>
+        getMFEHasCompatibleLaunchDarklyVersion(metadata.bundledWith, exposedInstanceDependencies);
+
+    describe('when host and MFE use same LaunchDarkly version', () => {
+        beforeEach(() => (exposedInstanceDependencies = { launchDarkly: { version } }));
+
+        itReturns(true);
+    });
+
+    describe('when host uses different LaunchDarkly version', () => {
+        beforeEach(() => (exposedInstanceDependencies = { launchDarkly: { version: '1.0.1' } }));
+
+        itReturns(false);
+    });
+
+    describe('when host does not use LaunchDarkly', () => {
+        beforeEach(() => (exposedInstanceDependencies = {}));
+
+        itReturns(undefined);
+    });
+
+    describe('when MFE does not use LaunchDarkly', () => {
+        beforeEach(() => (metadata.bundledWith = {}));
+
+        itReturns(undefined);
+    });
+
+    describe('when metadata omits "bundledWith"', () => {
+        beforeEach(() => delete metadata.bundledWith);
+
+        itReturns(undefined);
+    });
+});

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

@@ -1,11 +1,12 @@
 import semver from 'semver';
 import get from 'lodash.get';
 
-import { ExposedDependencies, getJson, GetJsonError } from '../common';
+import { ExposedDependencies, ExposedInstanceDependencies, 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';
+import { getMFEHasCompatibleLaunchDarklyVersion } from './get-mfe-has-compatible-launchdarkly-version';
 import { getMFEHasUniqueChunkNamespace } from './get-mfe-has-unique-chunk-namespace';
 
 export interface Metadata {
@@ -18,14 +19,25 @@ export interface Metadata {
 
 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
-) {
+interface GetBundleInfoProps {
+    exposedDependencies?: ExposedDependencies;
+    exposedInstanceDependencies?: ExposedInstanceDependencies;
+    fallbackPackageUrl?: string;
+    mainPackageUrl: string;
+    onRequestError?: (error: GetJsonError) => void;
+    retries?: number;
+    signal?: AbortSignal;
+}
+
+export async function getBundleInfo({
+    mainPackageUrl,
+    fallbackPackageUrl,
+    exposedDependencies = {},
+    exposedInstanceDependencies = {},
+    signal,
+    retries,
+    onRequestError,
+}: GetBundleInfoProps) {
     const { data: metadata, url: packageUrl } = await getMetadata({
         fallbackPackageUrl,
         mainPackageUrl,
@@ -84,6 +96,10 @@ export async function getBundleInfo(
         disposer,
         mfeSupportsRerendering: getMFESupportsRerendering(bundledWith, dependencies),
         mfeHasUniqueChunkNamespace: getMFEHasUniqueChunkNamespace(bundledWith),
+        mfeHasCompatibleLaunchDarklyVersion: getMFEHasCompatibleLaunchDarklyVersion(
+            bundledWith,
+            exposedInstanceDependencies
+        ),
         mismatch: hasMismatch ? mismatch : undefined,
         urls,
         WebComponent: name,

package/src/utils/get-ld-service-token.ts

@@ -0,0 +1,13 @@
+import { type LDService } from '@servicetitan/launchdarkly-service';
+import { SymbolToken } from '@servicetitan/react-ioc';
+
+let token: SymbolToken<LDService>;
+try {
+    token = require('@servicetitan/launchdarkly-service').LD_SERVICE_TOKEN;
+} catch (e) {
+    // ignore
+}
+
+export function getLDServiceToken() {
+    return token;
+}

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

@@ -0,0 +1,20 @@
+import { ExposedInstanceDependencies } from '../common';
+import { Metadata } from './get-bundle-info';
+
+/**
+ * @param bundledWith THe MFE's metadata.bundledWith.
+ * @param exposedInstanceDependencies The hosts's EXPOSED_INSTANCE_DEPENDENCIES, if any.
+ * @returns Returns true when host and MFE use compatible version of LaunchDarkly
+ * and returns false when host and MGE use incompatible version.
+ * Returns undefined when either the host or MFE doesn't expose LaunchDarkly.
+ */
+export function getMFEHasCompatibleLaunchDarklyVersion(
+    bundledWith: Metadata['bundledWith'],
+    exposedInstanceDependencies: ExposedInstanceDependencies
+) {
+    const mfeVersion = bundledWith?.['launchdarkly-js-client-sdk'];
+    const hostVersion = exposedInstanceDependencies.launchDarkly?.version;
+    if (hostVersion && mfeVersion) {
+        return hostVersion === mfeVersion;
+    }
+}

package/src/utils/index.ts

@@ -1,6 +1,7 @@
 export * from './get-bundle-info';
 export * from './get-element-name';
 export * from './get-entry-points';
+export * from './get-ld-service-token';
 export * from './get-mfe-supports-rerendering';
 export * from './get-version-mismatches';
 export * from './is-versioned-url';

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

@@ -1,31 +1,52 @@
 import { Log } from '@servicetitan/log-service';
-import { ExposedDependencies } from '../common';
+import { ExposedDependencies, ExposedInstanceDependencies } from '../common';
 import { BundleInfo } from './get-bundle-info';
 
+interface Context {
+    exposedDependencies?: ExposedDependencies;
+    exposedInstanceDependencies?: ExposedInstanceDependencies;
+    logService?: Log;
+    packageUrl: string;
+}
 export function validateBundleInfo(
-    { mismatch }: BundleInfo,
-    {
-        exposedDependencies = {},
-        logService,
-        packageName,
-    }: { exposedDependencies?: ExposedDependencies; logService?: Log; packageName: string }
+    { mismatch, mfeHasCompatibleLaunchDarklyVersion }: BundleInfo,
+    { exposedDependencies = {}, exposedInstanceDependencies, logService, packageUrl }: Context
 ) {
-    if (!mismatch || !logService) {
+    if (!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 {
+    if (mismatch) {
+        const data = { package: packageUrl, 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,
+            });
+        }
+    }
+
+    /**
+     * Note, only checking false here because the value is undefined when the host
+     * or the MFE isn't using LaunchDarkly at all.
+     */
+
+    if (mfeHasCompatibleLaunchDarklyVersion === false) {
+        const data = {
+            package: packageUrl,
+            hostVersion: exposedInstanceDependencies?.launchDarkly?.version ?? '',
+        };
         logService.warning({
-            category: 'MicroFrontends.DependenciesMismatch',
-            message: 'Some of the package dependencies have incompatible versions.',
+            category: 'MicroFrontends.LaunchDarklyMismatch',
+            message: 'LaunchDarkly versions are incompatible',
             data,
         });
     }

package/src/utils/web-component.tsx

@@ -1,8 +1,9 @@
 import { Fragment, useMemo, useState } from 'react';
 import { Log } from '@servicetitan/log-service';
+import { type LDService } from '@servicetitan/launchdarkly-service';
 import { useOptionalDependencies } from '@servicetitan/react-ioc';
 
-import { ExposedDependencies, IWebComponent } from '../common';
+import { ExposedDependencies, ExposedInstanceDependencies, IWebComponent } from '../common';
 import { MFEContextData } from '../contexts/mfe-data-context';
 import { EventBus } from '../event-bus';
 import { BundleInfo } from './get-bundle-info';
@@ -15,11 +16,21 @@ interface WebComponentProps {
     bundleInfo: BundleInfo;
     eventBus: EventBus;
     exposedDependencies?: ExposedDependencies;
+    exposedInstanceDependencies?: ExposedInstanceDependencies;
+    ldService?: LDService;
     logService?: Log;
 }
 
 export function webComponent(props: WebComponentProps) {
-    const { basename, bundleInfo, eventBus, exposedDependencies, logService } = props;
+    const {
+        basename,
+        bundleInfo,
+        eventBus,
+        exposedDependencies,
+        exposedInstanceDependencies,
+        ldService,
+        logService,
+    } = props;
     const { WebComponent, disposer, mfeSupportsRerendering } = bundleInfo;
     const elementName = getElementName(bundleInfo);
 
@@ -29,9 +40,11 @@ export function webComponent(props: WebComponentProps) {
 
         const handleRef = (webComponent: IWebComponent | null) => {
             webComponent?.provide({
+                ldService,
                 logService,
                 historyManager,
                 exposedDependencies,
+                exposedInstanceDependencies,
                 eventBus,
                 basename,
                 onReady: () => {