@servicetitan/web-components 23.0.0 → 23.2.0

package/src/loader.tsx

@@ -1,425 +1,180 @@
 import {
-    lazy,
+    ReactElement,
+    ReactNode,
     Suspense,
-    useEffect,
-    useMemo,
-    useState,
     forwardRef,
+    lazy,
+    useEffect,
     useImperativeHandle,
-    ReactElement,
-    ReactNode,
-    Ref,
+    useMemo,
 } from 'react';
-
-import semver from 'semver';
-
-import get from 'lodash.get';
-
 import { ErrorBoundary } from '@servicetitan/error-boundary';
 import { Log } from '@servicetitan/log-service';
 import { useOptionalDependencies } from '@servicetitan/react-ioc';
 
 import {
-    ExposedDependencies,
     EXPOSED_DEPENDENCIES_TOKEN,
-    useCancelation,
-    getJson,
+    ExposedDependencies,
     GetJsonError,
-    IWebComponent,
+    useCancelation,
 } from './common';
+import { MFEContextData } from './contexts/mfe-data-context';
 import { EventBus, EVENT_BUS_TOKEN, useEventBus } from './event-bus';
-import { HistoryManager } from './history-manager';
 import { EXPOSED_DEPENDENCIES } from './globals';
-import { getVersionMismatches, isVersionedUrl } from './utils';
-import { MFEContextData } from './contexts/mfe-data-context';
-import { getMFESupportsRerendering } from './get-mfe-supports-rerendering';
-
-export interface Metadata {
-    name: string;
-    bundledWith?: Record<string, string | undefined>;
-    sharedDependencies: Record<string, string>;
-    dependencies?: Record<string, string>;
-    entrypoints?: Record<string, { css: string[]; js: string[] }>;
-}
-
-interface EntryPoints {
-    css: string[];
-    js: string[];
-}
-
-async function getEntrypoints(
-    url: string,
-    cache: 'no-store' | undefined,
-    signal?: AbortSignal
-): Promise<EntryPoints> {
-    try {
-        return (
-            await getJson(url, {
-                cache,
-                signal,
-            })
-        ).data;
-    } catch {
-        return { css: ['index.css'], js: ['index.js'] };
-    }
-}
-
-async function getBundleInfo(
-    mainPackageUrl: string,
-    fallbackPackageUrl: string | undefined,
-    exposedDependencies: ExposedDependencies = {},
-    signal?: AbortSignal,
-    retries?: number,
-    onRequestError?: (error: GetJsonError) => void
-) {
-    const { data: metadata, url: packageUrl } = await getJson<Metadata>(
-        `${mainPackageUrl}/dist/metadata.json`,
-        {
-            cache: isVersionedUrl(mainPackageUrl) ? undefined : 'no-store',
-            retries: fallbackPackageUrl ? 0 : retries,
-            onRequestError,
-            signal,
-        }
-    ).catch(e => {
-        if (!fallbackPackageUrl) {
-            throw e;
-        }
-
-        return getJson(`${fallbackPackageUrl}/dist/metadata.json`, {
-            retries,
-            onRequestError,
-            cache: isVersionedUrl(fallbackPackageUrl) ? undefined : 'no-store',
-            signal,
-        });
-    });
-
-    const exactPackageUrl = packageUrl.replace('/dist/metadata.json', '');
-    const cache = isVersionedUrl(exactPackageUrl) ? undefined : 'no-store';
-
-    let dependencies: NonNullable<Metadata['dependencies']>;
-
-    if (metadata.dependencies) {
-        dependencies = metadata.dependencies;
-    } else {
-        const { data: packageJson } = await getJson(`${exactPackageUrl}/package.json`, {
-            retries,
-            cache,
-            signal,
-        });
-
-        dependencies = packageJson.dependencies;
-    }
-
-    const mismatch = getVersionMismatches(
-        exposedDependencies,
-        dependencies,
-        metadata.sharedDependencies
-    );
-
-    const hasMismatch = !!Object.keys(mismatch).length;
-    const startupVersion = metadata.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) => {
-        return `${exactPackageUrl}/dist/bundle/${bundleType}/${path}`;
-    };
-
-    let entrypoints: EntryPoints;
-
-    if (metadata.entrypoints?.[bundleType]) {
-        entrypoints = metadata.entrypoints[bundleType];
-    } else {
-        entrypoints = await getEntrypoints(withBaseUrl('entrypoints.json'), cache);
-    }
-
-    return {
-        urls: {
-            css: entrypoints.css.map(withBaseUrl),
-            js: entrypoints.js.map(withBaseUrl),
-        },
-        WebComponent: metadata.name,
-        disposer: () => {
-            if (embed) {
-                const path = Object.values<string>(metadata.sharedDependencies).shift();
-                if (path) {
-                    get(window, path).getStorage().clear(metadata.name);
-                }
-            }
-        },
-        mismatch: hasMismatch ? mismatch : undefined,
-        mfeSupportsRerendering: getMFESupportsRerendering(metadata.bundledWith, dependencies),
-    };
-}
+import { BundleInfo, getBundleInfo, validateBundleInfo, loadScripts, webComponent } from './utils';
 
 export type LoaderRef = EventBus;
 
+export type FallbackNode = NonNullable<ReactNode> | null;
+
 export interface LoaderProps<T> {
     src: string;
     fallbackSrc?: string;
     /** Values in the object will be stringified and then parsed before being delivered to the MFE via props or context. */
     data?: MFEContextData<T>;
     basename?: string;
-    loadingFallback?: NonNullable<ReactNode> | null;
-    errorFallback?: NonNullable<ReactNode> | null;
+    loadingFallback?: FallbackNode;
+    errorFallback?: FallbackNode;
     className?: string;
     retries?: number;
     onRequestError?(error: GetJsonError): boolean;
 }
 
-type DataProps = Pick<LoaderProps<{}>, 'data' | 'className'>;
+export type LoaderDataProps = Pick<LoaderProps<{}>, 'data' | 'className'>;
 
-// Type complexity below is required to pass a generic type through forwardRef
-export const Loader: <T>(props: LoaderProps<T> & { ref?: Ref<LoaderRef> }) => ReactElement | null =
-    forwardRef<LoaderRef, LoaderProps<{}>>(
-        (
-            {
-                src,
-                fallbackSrc,
-                data = {},
-                basename,
-                loadingFallback,
-                errorFallback,
-                className,
-                retries,
-                onRequestError,
-            },
-            ref
-        ) => {
-            const [isLoading, setIsLoading] = useState(true);
-
-            const bus = useEventBus();
-            const [
-                logService,
-                historyManager,
-                exposedDependencies = EXPOSED_DEPENDENCIES,
-                eventBus = bus,
-            ] = useOptionalDependencies(
-                Log,
-                HistoryManager,
-                EXPOSED_DEPENDENCIES_TOKEN,
-                EVENT_BUS_TOKEN
-            );
-
-            const Loader = useMemo(() => {
-                const Component = forwardRef<LoaderRef, DataProps>((props: DataProps, ref) => {
-                    const cancelation = useCancelation();
-
-                    useImperativeHandle(ref, () => eventBus, []);
-
-                    useEffect(() => {
-                        setIsLoading(true);
-
-                        return () => {
-                            cancelation.abort();
-                        };
-                    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-                    const Lazy = useMemo(
-                        () =>
-                            lazy<(props: DataProps) => JSX.Element | null>(async () => {
-                                let bundleInfo: Awaited<ReturnType<typeof getBundleInfo>>;
-                                try {
-                                    bundleInfo = await getBundleInfo(
-                                        src,
-                                        fallbackSrc,
-                                        exposedDependencies,
-                                        cancelation.signal,
-                                        retries,
-                                        onRequestError
-                                    );
-                                } catch (e) {
-                                    if (cancelation.signal.aborted) {
-                                        return {
-                                            default: () => null,
-                                        };
-                                    }
-
-                                    throw e;
-                                }
-
-                                const {
-                                    urls,
-                                    WebComponent,
-                                    disposer,
-                                    mismatch,
-                                    mfeSupportsRerendering,
-                                } = bundleInfo;
+export const Loader = forwardRef<LoaderRef, LoaderProps<{}>>((props, ref) => {
+    const { basename, fallbackSrc, onRequestError, retries, src } = props;
 
-                                if (mismatch) {
-                                    logService?.warning({
-                                        category: 'MicroFrontends.DependenciesMismatch',
-                                        message:
-                                            'Some of the package dependencies have incompatible versions.',
-                                        data: {
-                                            package: src,
-                                            dependencies: JSON.stringify(mismatch),
-                                        },
-                                    });
-                                }
+    const bus = useEventBus();
+    const [logService, exposedDependencies = EXPOSED_DEPENDENCIES, eventBus = bus] =
+        useOptionalDependencies(Log, EXPOSED_DEPENDENCIES_TOKEN, EVENT_BUS_TOKEN);
+    const cancelation = useCancelation();
 
-                                await Promise.all(
-                                    urls.js.map(url => {
-                                        const script = Array.from(document.scripts).find(
-                                            ({ src }) => src === url
-                                        );
-                                        if (!script) {
-                                            return new Promise<void>(resolve => {
-                                                const script = document.createElement('script');
+    const LoadingFallback = useMemo(
+        () => getFallback(props.loadingFallback, 'Loading...'),
+        [props.loadingFallback]
+    );
 
-                                                script.crossOrigin = 'anonymous';
-                                                script.onload = () => {
-                                                    script.dataset.webComponent = WebComponent;
-                                                    script.onload = null;
-                                                    resolve();
-                                                };
-                                                script.async = true;
-                                                script.src = url;
+    const ErrorFallback = useMemo(
+        () => getFallback(props.errorFallback, 'Something went wrong'),
+        [props.errorFallback]
+    );
 
-                                                document.body.append(script);
-                                            });
-                                        } else if (!script.dataset.webComponent) {
-                                            return new Promise<void>(resolve => {
-                                                const originalOnload = script.onload;
-                                                script.onload = (...args) => {
-                                                    originalOnload?.call(script, ...args);
-                                                    script.onload = null;
-                                                    resolve();
-                                                };
-                                            });
-                                        }
+    const Loader = useMemo(
+        () =>
+            lazyLoader({
+                basename,
+                cancelation,
+                exposedDependencies,
+                eventBus,
+                fallbackSrc,
+                logService,
+                onRequestError,
+                retries,
+                src,
+                LoadingFallback,
+            }),
+        [
+            basename,
+            cancelation,
+            exposedDependencies,
+            eventBus,
+            logService,
+            onRequestError,
+            fallbackSrc,
+            retries,
+            src,
+            LoadingFallback,
+        ]
+    );
 
-                                        return Promise.resolve();
-                                    })
-                                );
+    return (
+        <ErrorBoundary moduleName={src} fallback={ErrorFallback}>
+            <Suspense fallback={<LoadingFallback />}>
+                <Loader ref={ref} data={props.data ?? {}} className={props.className} />
+            </Suspense>
+        </ErrorBoundary>
+    );
+});
 
-                                const handleRef = (webComponent: IWebComponent | null) => {
-                                    webComponent?.provide({
-                                        logService,
-                                        historyManager,
-                                        exposedDependencies,
-                                        eventBus,
-                                        basename,
-                                        onReady: () => {
-                                            setIsLoading(false);
-                                        },
-                                        onDispose: () => {
-                                            disposer();
-                                        },
-                                    });
-                                };
+type LazyLoaderProps = Omit<LoaderProps<any>, 'loadingFallback'> & {
+    cancelation: AbortController;
+    exposedDependencies?: ExposedDependencies;
+    eventBus: EventBus;
+    logService?: Log;
+    LoadingFallback: () => JSX.Element;
+};
 
-                                return {
-                                    default: function LazyComponent(props: DataProps) {
-                                        const stringifiedData = useMemo(
-                                            () => JSON.stringify(props.data),
-                                            [props.data]
-                                        );
+function lazyLoader(props: LazyLoaderProps) {
+    const { cancelation, eventBus } = props;
 
-                                        /*
-                                         * 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 LazyWebComponent = lazyWebComponent(props);
 
-                                        /*
-                                         * Convert camelCase data props to kebab-case data attributes, prepended with data-
-                                         * Ex: fooBar -> data-foo-bar
-                                         */
-                                        const dataAttrs = useMemo(
-                                            () =>
-                                                Object.fromEntries(
-                                                    Object.entries(props.data ?? {}).map(
-                                                        ([key, value]) => [
-                                                            'data-' +
-                                                                key.replace(
-                                                                    /[A-Z]/g,
-                                                                    letter =>
-                                                                        '-' + letter.toLowerCase()
-                                                                ),
-                                                            value,
-                                                        ]
-                                                    )
-                                                ),
-                                            [props.data]
-                                        );
+    return forwardRef<LoaderRef, LoaderDataProps>((props: LoaderDataProps, ref) => {
+        useImperativeHandle(ref, () => eventBus, []);
 
-                                        return (
-                                            <WebComponent
-                                                key={key}
-                                                ref={handleRef}
-                                                class={props.className}
-                                                {...(urls.css.length
-                                                    ? {
-                                                          'style-urls': encodeURIComponent(
-                                                              JSON.stringify(urls.css)
-                                                          ),
-                                                      }
-                                                    : {})}
-                                                /*
-                                                 * Continue to spread data as separate data attributes for backwards compatibility,
-                                                 * in case the Host has updated web-components, but the MFE has not
-                                                 */
-                                                {...dataAttrs}
-                                                // Stringify data object so that it can be passed as a data-attribute
-                                                data-mfe-data={stringifiedData}
-                                            />
-                                        );
-                                    },
-                                };
-                            }),
-                        [] // eslint-disable-line react-hooks/exhaustive-deps
-                    );
+        useEffect(() => {
+            return () => {
+                cancelation.abort();
+            };
+        }, []);
 
-                    return <Lazy data={props.data} className={props.className} />;
-                });
+        return <LazyWebComponent data={props.data} className={props.className} />;
+    });
+}
 
-                return Component;
-            }, [
+function lazyWebComponent(props: LazyLoaderProps) {
+    const {
+        basename,
+        cancelation,
+        exposedDependencies,
+        eventBus,
+        fallbackSrc,
+        logService,
+        onRequestError,
+        retries,
+        src,
+        LoadingFallback,
+    } = props;
+
+    return lazy<(props: LoaderDataProps) => JSX.Element | null>(async () => {
+        let bundleInfo: BundleInfo;
+        try {
+            bundleInfo = await getBundleInfo(
                 src,
                 fallbackSrc,
                 exposedDependencies,
+                cancelation.signal,
                 retries,
-                onRequestError,
-                logService,
-                historyManager,
-                basename,
-                eventBus,
-            ]);
+                onRequestError
+            );
+        } catch (e) {
+            if (cancelation.signal.aborted) {
+                return {
+                    default: () => null,
+                };
+            }
 
-            const LoadingFallback = useMemo(
-                () => () => {
-                    if (loadingFallback !== undefined) {
-                        return loadingFallback as ReactElement;
-                    }
+            throw e;
+        }
 
-                    return <h2>Loading...</h2>;
-                },
-                [loadingFallback]
-            );
+        validateBundleInfo(bundleInfo, { logService, packageName: src });
 
-            const ErrorFallback = useMemo(
-                () => () => {
-                    if (errorFallback !== undefined) {
-                        return errorFallback as ReactElement;
-                    }
+        await loadScripts(bundleInfo);
 
-                    return <h2>Something went wrong</h2>;
-                },
-                [errorFallback]
-            );
+        return {
+            default: webComponent({
+                basename,
+                bundleInfo,
+                eventBus,
+                exposedDependencies,
+                logService,
+                LoadingFallback,
+            }),
+        };
+    });
+}
 
-            return (
-                <ErrorBoundary moduleName={src} fallback={ErrorFallback}>
-                    {isLoading && <LoadingFallback />}
-                    <Suspense fallback={null}>
-                        <Loader ref={ref} data={data} className={className} />
-                    </Suspense>
-                </ErrorBoundary>
-            );
-        }
-    );
+function getFallback(node: FallbackNode | undefined, message: string): () => JSX.Element {
+    return () => (node !== undefined ? (node as ReactElement) : <h2>{message}</h2>);
+}

package/src/register.tsx

@@ -1,8 +1,6 @@
-import { FC, ComponentType } from 'react';
-import { render, unmountComponentAtNode } from 'react-dom';
-
-import { Log } from '@servicetitan/log-service';
+import { FC, ComponentType, useEffect } from 'react';
 import { DefaultPortalContext, TablePopupPropsContext } from '@servicetitan/design-system';
+import { Log } from '@servicetitan/log-service';
 import { Provider } from '@servicetitan/react-ioc';
 
 import {
@@ -14,11 +12,12 @@ import {
     IS_WEB_COMPONENT_TOKEN,
     RENDER_ROOT_TOKEN,
 } from './common';
-import { EventBus, EVENT_BUS_TOKEN } from './event-bus';
-import { HistoryManager } from './history-manager';
-import { WEB_COMPONENT_NAME } from './globals';
 import { MFEDataContext } from './contexts/mfe-data-context';
 import { MFEMetadataContext } from './contexts/mfe-metadata-context';
+import { EventBus, EVENT_BUS_TOKEN } from './event-bus';
+import { WEB_COMPONENT_NAME } from './globals';
+import { HistoryManager } from './history-manager';
+import { render } from './render';
 
 function createLink(url: string, onLoad: () => void) {
     const element = document.createElement('link');
@@ -34,7 +33,11 @@ function createLink(url: string, onLoad: () => void) {
 
 const Placeholder: FC = () => <div style={{ display: 'none' }} />;
 
-export function register(Component: ComponentType, light: boolean) {
+export interface RegisterOptions {
+    legacyRoot?: boolean;
+}
+
+export function register(Component: ComponentType, light: boolean, options?: RegisterOptions) {
     class WebComponent extends HTMLElement implements IWebComponent {
         private root?: ShadowRoot;
         private portal?: ShadowRoot;
@@ -52,6 +55,7 @@ export function register(Component: ComponentType, light: boolean) {
         private basename?: string;
         private onReady?: () => void;
         private onDispose?: () => void;
+        private view?: ReturnType<typeof render>;
 
         connectedCallback() {
             /*
@@ -92,7 +96,7 @@ export function register(Component: ComponentType, light: boolean) {
                 .appendChild(document.createElement('div'))
                 .attachShadow({ mode: 'open' });
 
-            render(<Placeholder />, this.root);
+            this.view = render(<Placeholder />, this.root, options);
 
             this.styles.elements.push(...this.attachStyles(this.root, styleUrls));
             this.styles.elements.push(...this.attachStyles(this.portal, styleUrls));
@@ -106,7 +110,7 @@ export function register(Component: ComponentType, light: boolean) {
                 element.remove();
             }
 
-            unmountComponentAtNode(this.root);
+            this.view?.unmount();
             document.body.removeChild(this.portal!.host);
             this.root = undefined;
             this.portal = undefined;
@@ -179,7 +183,7 @@ export function register(Component: ComponentType, light: boolean) {
                     portalShadowRoot: this.portal!,
                 };
 
-                render(
+                this.view?.rerender(
                     <Provider
                         singletons={[
                             { provide: IS_WEB_COMPONENT_TOKEN, useValue: true },
@@ -210,14 +214,15 @@ export function register(Component: ComponentType, light: boolean) {
                                     <MFEDataContext.Provider value={{ ...mfeData }}>
                                         <MFEMetadataContext.Provider value={metadata}>
                                             <Component {...mfeData} />
+                                            {this.onReady && (
+                                                <RenderCallback callback={this.onReady} />
+                                            )}
                                         </MFEMetadataContext.Provider>
                                     </MFEDataContext.Provider>
                                 </Provider>
                             </TablePopupPropsContext.Provider>
                         </DefaultPortalContext.Provider>
-                    </Provider>,
-                    this.root!,
-                    this.onReady
+                    </Provider>
                 );
             }
         };
@@ -231,3 +236,9 @@ export function register(Component: ComponentType, light: boolean) {
 
     window.customElements.define(WEB_COMPONENT_NAME, WebComponent);
 }
+
+function RenderCallback({ callback }: { callback: () => void }) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => callback(), []);
+    return null;
+}