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

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,9 +96,16 @@ export async function getBundleInfo({
         }
     };
 
+    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(withBaseUrl),
-        js: entrypoints.js.map(withBaseUrl),
+        css: entrypoints.css.map(path => `${baseUrl}/${path}`),
+        js: entrypoints.js.map(path => `${baseUrl}/${path}`),
     };
 
     const elementName = resolvedBundleType === 'headless' ? `headless-${name}` : name;

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

@@ -4,6 +4,7 @@ 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/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} />;
+    };
+}