@servicetitan/web-components 29.0.0 → 30.1.0

package/src/contexts/tests/mfe-metadata-context.test.tsx

@@ -9,7 +9,7 @@ describe(`[web-components] ${useMFEMetadataContext.name}`, () => {
         const shadowRoot = document.createElement('div').attachShadow({ mode: 'open' });
         const portalShadowRoot = document.createElement('span').attachShadow({ mode: 'open' });
         const metadata = { shadowRoot, portalShadowRoot };
-        const Wrapper: FC<PropsWithChildren<{}>> = ({ children }) => {
+        const Wrapper: FC<PropsWithChildren> = ({ children }) => {
             return (
                 <MFEMetadataContext.Provider value={metadata}>
                     {children}
@@ -23,7 +23,7 @@ describe(`[web-components] ${useMFEMetadataContext.name}`, () => {
     });
 
     describe('when the MFEMetadataContext is not provided by a parent', () => {
-        const Wrapper: FC<PropsWithChildren<{}>> = ({ children }) => {
+        const Wrapper: FC<PropsWithChildren> = ({ children }) => {
             return <div>{children}</div>;
         };
 

package/src/event-bus.ts

@@ -1,32 +1,79 @@
+import { symbolToken, SymbolToken } from '@servicetitan/react-ioc';
 import mitt from 'mitt';
 
-import { symbolToken, SymbolToken } from '@servicetitan/react-ioc';
-import { useRef } from 'react';
-import { JSON } from './types';
+import { JSON, JSONPrimitive, Serializable } from './types';
+
+export const EVENT_BUS_TOKEN = symbolToken<EventBus>('EVENT_BUS_TOKEN');
+
+export function typedEventBusToken<EventTypes extends Serializable<EventTypes>>() {
+    return symbolToken<EventBus<EventTypes>>('EVENT_BUS_TOKEN');
+}
+
+export type EventHandler<EventTypes, Event> = (
+    data: Event extends SymbolToken<infer DataType>
+        ? Serializable<DataType>
+        : Event extends keyof EventTypes
+          ? EventTypes[Event]
+          : never
+) => void;
 
-export type EventHandler<T = unknown> = (data: T) => void;
 type JobPayload = JSON | void;
 
-export type JobEventHandler<Result extends JobPayload = void> = (defer: {
-    resolve(result: Result): void;
+export type JobEventHandler<Event> = (defer: {
+    /**
+     * Successfully complete a job.
+     * @param result The value to return from the successfully completed job.
+     */
+    resolve(
+        ...result: Event extends SymbolToken<infer ResultType>
+            ? undefined extends ResultType
+                ? [Serializable<ResultType>?]
+                : [Serializable<ResultType>]
+            : [JobPayload]
+    ): void;
+    /**
+     * Fail a job.
+     * @param reason The error to return from the failed job.
+     */
     reject(reason?: string | Error): void;
 }) => void;
-export type EventType = string | number | symbol;
-export type SymbolTokenEventType<T, U extends EventType = EventType> =
-    U extends SymbolToken<any> ? SymbolToken<T> : U;
 
-export const EVENT_BUS_TOKEN = symbolToken<EventBus>('EVENT_BUS_TOKEN');
-export class EventBus {
+export class EventBus<EventTypes extends Serializable<EventTypes> = never> {
     job = {
-        on: <Result extends JobPayload = void>(type: string, handler: JobEventHandler<Result>) => {
-            this.emitter.on(type, handler);
+        /**
+         * Register a job event handler. Jobs event handlers return a result or an error.
+         * @param event The job event to handle.
+         * @param handler The handler to call when the event occurs. This handler is passed a `resolve` callback to return a successful result, and a `reject` callback to return an error.
+         */
+        on: <Event extends SymbolToken<any> | keyof EventTypes>(
+            event: Event,
+            handler: JobEventHandler<Event>
+        ) => {
+            this.emitter.on(event, handler);
         },
-        off: <Result extends JobPayload = void>(type: string, handler: JobEventHandler<Result>) => {
-            this.emitter.off(type, handler);
+
+        /**
+         * Deregister a job event handler.
+         * @param event The previously registered event.
+         * @param handler The previously registered handler.
+         */
+        off: <Event extends SymbolToken<any> | keyof EventTypes>(
+            event: Event,
+            handler: JobEventHandler<Event>
+        ) => {
+            this.emitter.off(event, handler);
         },
-        emit: <Result extends JobPayload = void>(type: string) => {
-            return new Promise<Result>((resolve, reject) => {
-                this.emitter.emit(type, {
+
+        /**
+         * Send a job event.
+         * @param event The event to send.
+         * @returns a Promise that resolves or rejects depending on whether the job completes successfully.
+         */
+        emit: <Event extends SymbolToken<any> | keyof EventTypes>(event: Event) => {
+            return new Promise<
+                Event extends SymbolToken<infer ResultType> ? Serializable<ResultType> : JobPayload
+            >((resolve, reject) => {
+                this.emitter.emit(event, {
                     resolve,
                     reject: (reason?: string | Error) => {
                         if (typeof reason === 'string' || reason instanceof Error) {
@@ -42,25 +89,51 @@ export class EventBus {
 
     private emitter = mitt<any>();
 
-    on = <T, U extends EventType = EventType>(
-        type: SymbolTokenEventType<T, U>,
-        handler: EventHandler<T>
+    /**
+     * Register an event handler.
+     * @param event The event to handle.
+     * @param handler The handler to call when the event occurs.
+     */
+    on = <Event extends SymbolToken<any> | keyof EventTypes>(
+        event: Event,
+        handler: EventHandler<EventTypes, Event>
     ) => {
-        this.emitter.on(type, handler);
+        this.emitter.on(event, handler);
     };
 
-    off = <T, U extends EventType = EventType>(
-        type: SymbolTokenEventType<T, U>,
-        handler: EventHandler<T>
+    /**
+     * Deregister an event handler.
+     * @param event The previously registered event.
+     * @param handler The previously registered handler.
+     */
+    off = <Event extends SymbolToken<any> | keyof EventTypes>(
+        event: Event,
+        handler: EventHandler<EventTypes, Event>
     ) => {
-        this.emitter.off(type, handler);
+        this.emitter.off(event, handler);
     };
 
-    emit = <T, U extends EventType = EventType>(type: SymbolTokenEventType<T, U>, data?: T) => {
-        this.emitter.emit(type, data);
+    /**
+     * Send an event.
+     * @param event The event to send.
+     * @param data The data to pass to the event's handler.
+     */
+    emit = <Event extends SymbolToken<any> | keyof EventTypes>(
+        event: Event,
+        ...data: Event extends SymbolToken<infer DataType>
+            ? undefined extends DataType
+                ? [Serializable<DataType>?]
+                : [Serializable<DataType>]
+            : [EventTypes] extends [never]
+              ? [(JSON | JSONPrimitive)?]
+              : Event extends keyof EventTypes
+                ? undefined extends EventTypes[Event]
+                    ? [EventTypes[Event]?]
+                    : [EventTypes[Event]] extends [never]
+                      ? []
+                      : [EventTypes[Event]]
+                : never
+    ) => {
+        this.emitter.emit(event, data[0]);
     };
 }
-
-export function useEventBus() {
-    return useRef(new EventBus()).current;
-}

package/src/get-value-for-environment.ts

@@ -1,4 +1,8 @@
-export type Environment = 'dev' | 'go' | 'next' | 'qa' | 'stage' | 'test';
+// See https://github.com/microsoft/TypeScript/issues/29729 for why LiteralUnion
+// eslint-disable-next-line @typescript-eslint/naming-convention
+type LiteralUnion<T extends U, U = string> = T | (U & { _?: never });
+
+export type Environment = LiteralUnion<'dev' | 'go' | 'next' | 'qa' | 'stage' | 'test'>;
 export type EnvironmentValues = Partial<Record<Environment, string>>;
 
 export function getValueForEnvironment(
@@ -25,7 +29,10 @@ function detectEnvironment(
     }
 
     for (const key of keys) {
-        if (hostname.indexOf(`${key}.servicetitan.com`) >= 0) {
+        if (
+            hostname.indexOf(`${key}.servicetitan.com`) >= 0 ||
+            (key.endsWith('.st.dev') && hostname.indexOf(key) >= 0)
+        ) {
             return key;
         }
     }

package/src/loader.tsx

@@ -7,6 +7,7 @@ import {
     useEffect,
     useImperativeHandle,
     useMemo,
+    useRef,
 } from 'react';
 import { ErrorBoundary } from '@servicetitan/error-boundary';
 import { type LDService } from '@servicetitan/launchdarkly-service';
@@ -23,7 +24,7 @@ import {
 } from './common';
 import { MFEContextData } from './contexts/mfe-data-context';
 import { Delayed } from './delayed';
-import { EventBus, EVENT_BUS_TOKEN, useEventBus } from './event-bus';
+import { EventBus, EVENT_BUS_TOKEN } from './event-bus';
 import { EXPOSED_DEPENDENCIES, EXPOSED_INSTANCE_DEPENDENCIES } from './globals';
 import {
     BundleInfo,
@@ -260,5 +261,9 @@ function ensureLDService(
     return exposedInstanceDependencies;
 }
 
+function useEventBus() {
+    return useRef(new EventBus()).current;
+}
+
 const MINUTE = 1000 * 60;
 const bundleCache = new TtlCache<BundleInfo>({ ttlMs: 15 * MINUTE });

package/src/render.ts

@@ -10,7 +10,7 @@ try {
      * @see {@link file://./../../startup/src/webpack/configs/plugins/ignore-plugin/ignore-plugin.ts}
      */
     createRoot = require('react-dom/client').createRoot;
-} catch (e) {
+} catch {
     // ignore
 }
 

package/src/types.ts

@@ -2,3 +2,13 @@ export type JSONPrimitive = string | number | boolean | null | undefined;
 
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 export type JSON = { [key: string]: JSONPrimitive | JSON[] | JSON };
+
+export type Serializable<T> = {
+    [P in keyof T]: T[P] extends JSONPrimitive
+        ? T[P]
+        : T[P] extends (infer U)[]
+          ? Serializable<U>[]
+          : T[P] extends JSON | undefined
+            ? Serializable<T[P]>
+            : never;
+};

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

@@ -4,7 +4,7 @@ import { SymbolToken } from '@servicetitan/react-ioc';
 let token: SymbolToken<LDService>;
 try {
     token = require('@servicetitan/launchdarkly-service').LD_SERVICE_TOKEN;
-} catch (e) {
+} catch {
     // ignore
 }