@servicetitan/web-components 36.0.0 → 36.1.1-beta.1

package/src/register.tsx

@@ -1,8 +1,10 @@
+import * as Anvil2 from '@servicetitan/anvil2';
+import * as Anvil1 from '@servicetitan/design-system';
 import { type LDService } from '@servicetitan/launchdarkly-service';
 import { Log } from '@servicetitan/log-service';
 import { Provider } from '@servicetitan/react-ioc';
 import { ExposedDependencies } from '@servicetitan/startup-utils';
-import { ComponentType, FC, ReactElement, useEffect } from 'react';
+import { ComponentType, FC, PropsWithChildren, ReactElement, useCallback, useEffect } from 'react';
 import {
     BASENAME_TOKEN,
     Entries,
@@ -40,6 +42,43 @@ export interface RegisterOptions {
     sharedDependenciesNames?: string[];
 }
 
+const Anvil1Providers: FC<{ root: ShadowRoot; portal: ShadowRoot } & PropsWithChildren> = ({
+    root,
+    portal,
+    children,
+}) => {
+    const getTablePopupProps = useCallback(
+        (props: object) => ({
+            ...props,
+            appendTo: root as unknown as HTMLElement,
+        }),
+        [root]
+    );
+
+    if (Anvil1.DefaultPortalContext === undefined || Anvil1.TablePopupPropsContext === undefined) {
+        return children;
+    }
+
+    return (
+        <Anvil1.DefaultPortalContext.Provider value={portal as unknown as HTMLElement}>
+            <Anvil1.TablePopupPropsContext.Provider value={getTablePopupProps}>
+                {children}
+            </Anvil1.TablePopupPropsContext.Provider>
+        </Anvil1.DefaultPortalContext.Provider>
+    );
+};
+
+const Anvil2Providers: FC<{ portalAnvilContainer: HTMLDivElement } & PropsWithChildren> = ({
+    portalAnvilContainer,
+    children,
+}) => {
+    if (Anvil2.PortalProvider === undefined) {
+        return children;
+    }
+
+    return <Anvil2.PortalProvider root={portalAnvilContainer}>{children}</Anvil2.PortalProvider>;
+};
+
 export function register(Component: ComponentType, light: boolean, options?: RegisterOptions) {
     class WebComponent extends HTMLElement implements IWebComponent {
         private root?: ShadowRoot;
@@ -165,47 +204,14 @@ export function register(Component: ComponentType, light: boolean, options?: Reg
             return elements;
         };
 
-        private withAnvil1Providers(children: ReactElement): ReactElement {
-            try {
-                /**
-                 * Note, the webpack.IgnorePlugin must be configured to ignore this dependency.
-                 * @see {@link file://./../../startup/src/webpack/configs/plugins/ignore-plugin/ignore-plugin.ts}
-                 */
-                const { DefaultPortalContext, TablePopupPropsContext } =
-                    require('@servicetitan/design-system') as typeof import('@servicetitan/design-system');
-                return (
-                    <DefaultPortalContext.Provider value={this.portal as unknown as HTMLElement}>
-                        <TablePopupPropsContext.Provider
-                            value={props => ({
-                                ...props,
-                                appendTo: this.root as unknown as HTMLElement,
-                            })}
-                        >
-                            {children}
-                        </TablePopupPropsContext.Provider>
-                    </DefaultPortalContext.Provider>
-                );
-            } catch {
-                return children;
-            }
-        }
-
-        private withAnvil2Providers(children: ReactElement): ReactElement {
-            try {
-                /**
-                 * Note, the webpack.IgnorePlugin must be configured to ignore this dependency.
-                 * @see {@link file://./../../startup/src/webpack/configs/plugins/ignore-plugin/ignore-plugin.ts}
-                 */
-                const { PortalProvider } =
-                    require('@servicetitan/anvil2') as typeof import('@servicetitan/anvil2');
-                return <PortalProvider root={this.portalAnvilContainer}>{children}</PortalProvider>;
-            } catch {
-                return children;
-            }
-        }
-
-        private withProviders(children: ReactElement): ReactElement {
-            return this.withAnvil2Providers(this.withAnvil1Providers(children));
+        private withProviders(children: ReactElement) {
+            return (
+                <Anvil2Providers portalAnvilContainer={this.portalAnvilContainer!}>
+                    <Anvil1Providers root={this.root!} portal={this.portal!}>
+                        {children}
+                    </Anvil1Providers>
+                </Anvil2Providers>
+            );
         }
 
         private render = () => {

package/src/render.ts

@@ -1,18 +1,7 @@
 /* eslint-disable react/no-deprecated */
 import { ReactElement } from 'react';
 import ReactDOM from 'react-dom';
-import type ReactDOMClient from 'react-dom/client';
-
-let createRoot: typeof ReactDOMClient.createRoot;
-try {
-    /**
-     * Note, the webpack.IgnorePlugin must be configured to ignore this dependency.
-     * @see {@link file://./../../startup/src/webpack/configs/plugins/ignore-plugin/ignore-plugin.ts}
-     */
-    createRoot = require('react-dom/client').createRoot;
-} catch {
-    // ignore
-}
+import * as ReactDOMClient from 'react-dom/client';
 
 interface RenderOptions {
     legacyRoot?: boolean;
@@ -28,11 +17,11 @@ export function render(
     container: Element | DocumentFragment,
     options?: RenderOptions
 ): RenderResult {
-    if (typeof createRoot !== 'function' || options?.legacyRoot) {
+    if (typeof ReactDOMClient.createRoot !== 'function' || options?.legacyRoot) {
         return renderLegacyRoot(element, container);
     }
 
-    const root = createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.render(element);
 
     return {

package/src/types.ts

@@ -18,5 +18,5 @@ export interface Metadata {
     bundledWith?: Record<string, string | undefined>;
     sharedDependencies: Record<string, string>;
     dependencies?: Record<string, string>;
-    entrypoints?: Record<string, { css: string[]; js: string[] }>;
+    entrypoints?: Record<string, { css: string[]; js: string[]; module?: true }>;
 }

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

@@ -78,14 +78,13 @@ export async function getBundleInfo({
         resolvedBundleType = embed ? 'light' : 'full';
     }
 
-    const withBaseUrl = (path: string) =>
-        `${exactPackageUrl}/dist/bundle/${resolvedBundleType}/${path}`;
+    const bundleBaseUrl = `${exactPackageUrl}/dist/bundle/${resolvedBundleType}`;
 
     let entrypoints: EntryPoints;
     if (metadata.entrypoints?.[resolvedBundleType]) {
         entrypoints = metadata.entrypoints[resolvedBundleType];
     } else {
-        entrypoints = await getEntrypoints(withBaseUrl('entrypoints.json'), requestCache);
+        entrypoints = await getEntrypoints(`${bundleBaseUrl}/entrypoints.json`, requestCache);
     }
 
     const disposer = () => {
@@ -97,10 +96,17 @@ export async function getBundleInfo({
         }
     };
 
-    const urls = Object.entries(entrypoints).reduce(
-        (result, [key, value]) => ({ ...result, [key]: value.map(withBaseUrl) }),
-        {} as EntryPoints
-    );
+    let baseUrl = bundleBaseUrl;
+    if (entrypoints.port) {
+        const url = new URL(baseUrl);
+        url.port = String(entrypoints.port);
+        baseUrl = url.toString();
+    }
+
+    const urls: EntryPoints = {
+        css: entrypoints.css.map(path => `${baseUrl}/${path}`),
+        js: entrypoints.js.map(path => `${baseUrl}/${path}`),
+    };
 
     const elementName = resolvedBundleType === 'headless' ? `headless-${name}` : name;
 
@@ -119,5 +125,6 @@ export async function getBundleInfo({
         urls,
         WebComponent: elementName,
         version: metadata.version,
+        module: entrypoints.module,
     };
 }

package/src/utils/get-entry-points.ts

@@ -3,6 +3,8 @@ import { getJson } from '../common';
 export interface EntryPoints {
     css: string[];
     js: string[];
+    module?: true;
+    port?: number;
 }
 
 export async function getEntrypoints(

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

@@ -1,13 +1,5 @@
-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 {
-    // ignore
-}
+import * as LDService from '@servicetitan/launchdarkly-service';
 
 export function getLDServiceToken() {
-    return token;
+    return LDService.LD_SERVICE_TOKEN;
 }

package/src/utils/load-scripts.ts

@@ -1,6 +1,6 @@
 import { BundleInfo } from './get-bundle-info';
 
-export function loadScripts({ urls, WebComponent }: BundleInfo) {
+export function loadScripts({ urls, WebComponent, module }: BundleInfo) {
     return Promise.all(
         urls.js.map(url => {
             const script = Array.from(document.scripts).find(({ src }) => src === url);
@@ -8,13 +8,18 @@ export function loadScripts({ urls, WebComponent }: BundleInfo) {
                 return new Promise<void>(resolve => {
                     const script = document.createElement('script');
 
+                    if (module) {
+                        script.type = 'module';
+                    } else {
+                        script.async = true;
+                    }
+
                     script.crossOrigin = 'anonymous';
                     script.onload = () => {
                         script.dataset.webComponent = WebComponent;
                         script.onload = null;
                         resolve();
                     };
-                    script.async = true;
                     script.src = url;
 
                     document.body.append(script);

package/src/with-css-injector.tsx

@@ -0,0 +1,45 @@
+import { ComponentType, useEffect } from 'react';
+import { useMFEMetadataContext } from './contexts/mfe-metadata-context';
+import { WEB_COMPONENT_NAME } from './globals';
+
+export function withCssInjector<P extends object>(Component: ComponentType<P>): ComponentType<P> {
+    return function CssInjectorWrapper(props: P) {
+        const { shadowRoot, portalShadowRoot } = useMFEMetadataContext();
+
+        useEffect(() => {
+            window.__mfeStyles__ ??= {};
+            const mfeStyles = window.__mfeStyles__;
+            mfeStyles[WEB_COMPONENT_NAME] ??= Object.assign(new EventTarget(), {
+                sheets: new Map<string, CSSStyleSheet>(),
+            });
+            const emitter = mfeStyles[WEB_COMPONENT_NAME];
+            /*
+             * In self-hosted standalone dev mode (set by index.html), also adopt sheets
+             * into document so host-only CSS vars and fonts propagate to the page.
+             */
+            const roots = [
+                shadowRoot,
+                portalShadowRoot,
+                ...(window.__mfeSelfHosted__ ? [document] : []),
+            ];
+            function adoptSheet(sheet: CSSStyleSheet) {
+                for (const root of roots) {
+                    root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+                }
+            }
+
+            for (const sheet of emitter.sheets.values()) {
+                adoptSheet(sheet);
+            }
+
+            const handleNewSheet = ({ detail: sheetId }: CustomEvent<string>) => {
+                adoptSheet(emitter.sheets.get(sheetId)!);
+            };
+
+            emitter.addEventListener('new-sheet', handleNewSheet);
+            return () => emitter.removeEventListener('new-sheet', handleNewSheet);
+        }, [shadowRoot, portalShadowRoot]);
+
+        return <Component {...props} />;
+    };
+}