@servicetitan/startup 36.3.1 → 37.0.0

package/src/webpack/configs/plugins/assets-manifest-plugin.ts

@@ -1,21 +1,22 @@
-import fs from 'fs';
-import path from 'path';
 import { WebpackAssetsManifest } from 'webpack-assets-manifest';
-import { readJsonSafe } from '../../../utils';
-import { Context, Overrides } from '../types';
-import { generateMetadata } from '../utils';
-
-interface Metadata {
-    entryPointsPath: string;
-}
+import {
+    BuildContext,
+    generateExposedDependenciesMetadata,
+    generateMetadata,
+    sortSharedCss,
+} from '../../../core';
+import { Overrides } from '../../types';
 
 interface EntryPoints {
     css: string[];
     js: string[];
 }
 
-export function assetsManifestPlugin(context: Context, _: Overrides) {
-    if (!(context.isWebComponent || context.emitExposedDependencies)) {
+export function assetsManifestPlugin(context: BuildContext, _: Overrides) {
+    const { destination, isWebComponent } = context.package;
+    const { emitExposedDependencies } = context.build;
+
+    if (!(isWebComponent || emitExposedDependencies)) {
         return;
     }
 
@@ -26,20 +27,22 @@ export function assetsManifestPlugin(context: Context, _: Overrides) {
             entrypoints: Record<string, { assets: Record<string, string[]> }>;
         }): EntryPoints {
             const getAssetsByType = (type: string) => {
-                return Object.values(assets.entrypoints).flatMap(
+                const assetsForType = Object.values(assets.entrypoints).flatMap(
                     ({ assets }) => assets[type] ?? []
                 );
+                // Dedupe chunks shared by entry points
+                return [...new Set(assetsForType)];
             };
 
             return {
-                css: ensureDesignSystemCssIsFirst(getAssetsByType('css')),
+                css: ensureDesignSystemCssIsFirst(context, getAssetsByType('css')),
                 js: getAssetsByType('js'),
             };
         },
         // eslint-disable-next-line @typescript-eslint/require-await
         done: async (manifest: WebpackAssetsManifest) => {
-            if (context.emitExposedDependencies) {
-                generateExposedDependenciesMetadata(context, manifest);
+            if (emitExposedDependencies) {
+                generateExposedDependenciesMetadata(destination, () => manifest.getOutputPath());
             } else {
                 generateMetadata(context);
             }
@@ -47,32 +50,14 @@ export function assetsManifestPlugin(context: Context, _: Overrides) {
     });
 }
 
-function ensureDesignSystemCssIsFirst(cssAssets: string[]) {
+function ensureDesignSystemCssIsFirst(context: BuildContext, cssAssets: string[]) {
+    if (context.build.emitExposedDependencies) {
+        return sortSharedCss(cssAssets);
+    }
+
+    // Put MFE's 'servicetitan' CSS chunk first to give custom CSS higher precedence
     const offset = cssAssets.findIndex(name => name.startsWith('servicetitan'));
     return offset > 0
         ? [cssAssets[offset], ...cssAssets.filter((_, index) => index !== offset)]
         : cssAssets;
 }
-
-export function getExposedDependenciesEntryPoints(context: Context) {
-    const metadataPath = getExposedDependenciesMetadataPath(context);
-    const metadata = readJsonSafe<Metadata>(metadataPath);
-    if (metadata?.entryPointsPath) {
-        return readJsonSafe<EntryPoints>(metadata.entryPointsPath);
-    }
-}
-
-function generateExposedDependenciesMetadata(context: Context, manifest: WebpackAssetsManifest) {
-    const { destination } = context;
-    if (!fs.existsSync(destination)) {
-        fs.mkdirSync(destination, { recursive: true });
-    }
-
-    const metadataPath = getExposedDependenciesMetadataPath(context);
-    const metadata: Metadata = { entryPointsPath: manifest.getOutputPath() };
-    fs.writeFileSync(metadataPath, JSON.stringify(metadata, null, 2), 'utf-8');
-}
-
-function getExposedDependenciesMetadataPath({ destination }: Context) {
-    return path.join(destination, 'exposed-dependencies-metadata.json');
-}

package/src/webpack/configs/plugins/bundle-analyser-plugin.ts

@@ -1,39 +1,17 @@
 import os from 'os';
 import path from 'path';
-import { Context, Overrides } from '../types';
-import { getBundleType } from '../utils';
+import { BuildContext, bundleReportFileName, bundleReportTitle } from '../../../core';
+import { Overrides } from '../../types';
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
-export function bundleAnalyzerPlugin(context: Context, _: Overrides) {
-    if (!context.buildStat) {
+export function bundleAnalyzerPlugin(context: BuildContext, _: Overrides) {
+    if (!context.options.buildStat) {
         return;
     }
 
     return new BundleAnalyzerPlugin({
         analyzerMode: 'static',
-        reportFilename: path.join(os.tmpdir(), getReportFileName(context)),
-        reportTitle: getReportTitle(context),
+        reportFilename: path.join(os.tmpdir(), `${bundleReportFileName(context)}.html`),
+        reportTitle: bundleReportTitle(context),
     });
 }
-
-function getReportFileName(context: Context) {
-    const type = getBundleType(context);
-    const qualifier = type ? `-${type}` : '';
-    return `${context.packageData.name}${qualifier}-bundle-${Date.now()}.html`;
-}
-
-function getReportTitle(context: Context) {
-    const unscopedName = context.packageData.name.replace(/^@[^/]+\//, '');
-    const type = getBundleType(context);
-    const qualifier = type ? ` (${type})` : '';
-    return `${unscopedName}${qualifier} ${formatDate(new Date())}`;
-}
-
-function formatDate(date: Date) {
-    const yyyy = date.getFullYear();
-    const mm = date.getMonth() + 1;
-    const dd = date.getDate();
-    const HH = date.getHours();
-    const MM = date.getMinutes();
-    return `${yyyy}-${mm}-${dd} ${HH}:${MM}`;
-}

package/src/webpack/configs/plugins/define-exposed-dependencies-plugin.ts

@@ -1,24 +1,13 @@
 import { DefinePlugin } from 'webpack';
-import { Context, Overrides } from '../types';
-import { getExposedDependencies } from '../utils';
+import { BuildContext, defineExposedDependencies } from '../../../core';
+import { Overrides } from '../../types';
 
-export function defineExposedDependenciesPlugin(context: Context, _: Overrides) {
-    const { emitExposedDependencies, isExposeSharedDependencies } = context;
-    if (!isExposeSharedDependencies || emitExposedDependencies) {
+export function defineExposedDependenciesPlugin(context: BuildContext, _: Overrides) {
+    const definition = defineExposedDependencies(context);
+
+    if (!definition) {
         return;
     }
 
-    const { packageData, packageManager, sharedDependencies } = context;
-    const workspacePackage = packageManager.getWorkspacePackage();
-    const exposedDependencies = getExposedDependencies(
-        sharedDependencies,
-        dependency =>
-            packageManager.getResolvedVersion({ workspacePackage, dependency }) ??
-            packageData.dependencies?.[dependency]
-    );
-
-    return new DefinePlugin({
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        EXPOSED_DEPENDENCIES: JSON.stringify(exposedDependencies),
-    });
+    return new DefinePlugin(definition);
 }

package/src/webpack/configs/plugins/define-exposed-instance-dependencies-plugin.ts

@@ -1,19 +1,13 @@
 import { DefinePlugin } from 'webpack';
-import { Context, Overrides } from '../types';
-import { getLaunchDarklySdkVersion } from '../utils/get-launchdarkly-sdk-version';
+import { BuildContext, defineExposedInstanceDependencies } from '../../../core';
+import { Overrides } from '../../types';
 
-export function defineExposedInstanceDependenciesPlugin(context: Context, _: Overrides) {
-    const { emitExposedDependencies, isExposeSharedDependencies } = context;
-    if (!isExposeSharedDependencies || emitExposedDependencies) {
+export function defineExposedInstanceDependenciesPlugin(context: BuildContext, _: Overrides) {
+    const definition = defineExposedInstanceDependencies(context);
+
+    if (!definition) {
         return;
     }
 
-    const instanceDependencies = {
-        launchDarkly: { version: getLaunchDarklySdkVersion(context.packageManager) },
-    };
-
-    return new DefinePlugin({
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        EXPOSED_INSTANCE_DEPENDENCIES: JSON.stringify(instanceDependencies),
-    });
+    return new DefinePlugin(definition);
 }

package/src/webpack/configs/plugins/define-process-env-plugin.ts

@@ -0,0 +1,10 @@
+import { DefinePlugin } from 'webpack';
+import { BuildContext, getProcessEnv } from '../../../core';
+import { Overrides } from '../../types';
+
+export function defineProcessEnvPlugin(context: BuildContext, _: Overrides) {
+    const definitions = getProcessEnv(context);
+    if (definitions) {
+        return new DefinePlugin(definitions);
+    }
+}

package/src/webpack/configs/plugins/define-web-component-name-plugin.ts

@@ -1,14 +1,13 @@
 import { DefinePlugin } from 'webpack';
-import { Context, Overrides } from '../types';
+import { BuildContext, defineWebComponentName } from '../../../core';
+import { Overrides } from '../../types';
 
-export function defineWebComponentNamePlugin(context: Context, _: Overrides) {
-    const { isWebComponent, name } = context;
-    if (!isWebComponent) {
+export function defineWebComponentNamePlugin(context: BuildContext, _: Overrides) {
+    const definition = defineWebComponentName(context);
+
+    if (!definition) {
         return;
     }
 
-    return new DefinePlugin({
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        WEB_COMPONENT_NAME: JSON.stringify(name),
-    });
+    return new DefinePlugin(definition);
 }

package/src/webpack/configs/plugins/filter-warnings-plugin.ts

@@ -1,8 +1,9 @@
 const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
-import { Context, Overrides } from '../types';
+import { BuildContext } from '../../../core';
+import { Overrides } from '../../types';
 
-export function filterWarningsPlugin({ embed }: Context, _: Overrides) {
-    if (embed) {
+export function filterWarningsPlugin(context: BuildContext, _: Overrides) {
+    if (context.build.light) {
         return;
     }
 

package/src/webpack/configs/plugins/html-plugin.ts

@@ -1,15 +1,15 @@
 import deepmerge from 'deepmerge';
 import HtmlWebpackPlugin, { Options as HtmlWebpackPluginOptions } from 'html-webpack-plugin';
+import { BuildContext } from '../../../core';
+import { Overrides } from '../../types';
 import { splitByEntry } from '../../utils';
-import { Context, Overrides } from '../types';
 
-export function htmlPlugin(
-    { embed, emitExposedDependencies, headless, isWebComponent, name }: Context,
-    { plugins }: Overrides
-) {
+export function htmlPlugin(context: BuildContext, { plugins }: Overrides) {
+    const { light, headless, name, emitExposedDependencies } = context.build;
+    const { isWebComponent } = context.package;
     const { HtmlWebpackPlugin: htmlWebpackPluginOptions = {} } = plugins ?? {};
 
-    if (embed || headless || emitExposedDependencies) {
+    if (light || headless || emitExposedDependencies) {
         return;
     }
 

package/src/webpack/configs/plugins/html-tags-plugin.ts

@@ -1,28 +1,21 @@
 import HtmlWebpackTagsPlugin from 'html-webpack-tags-plugin';
-import { Context, Overrides } from '../types';
-import { getBundleType } from '../utils';
-import { getExposedDependenciesEntryPoints } from './assets-manifest-plugin';
+import { BuildContext, getSharedEntryPoints } from '../../../core';
+import { Overrides } from '../../types';
 
-export function htmlTagsPlugin(context: Context, _overrides: Overrides) {
-    const { emitExposedDependencies, isExposeSharedDependencies } = context;
+export function htmlTagsPlugin(context: BuildContext, _overrides: Overrides) {
+    const { isExposeSharedDependencies } = context.package;
+    const { emitExposedDependencies } = context.build;
     if (!isExposeSharedDependencies || emitExposedDependencies) {
         return;
     }
 
-    const sharedEntryPoints = getSharedEntryPoints(context);
-    if (!sharedEntryPoints.length) {
+    const { css, js } = getSharedEntryPoints(context);
+    if (!css.length && !js.length) {
         return;
     }
 
-    return new HtmlWebpackTagsPlugin({ tags: sharedEntryPoints, append: false });
-}
-
-function getSharedEntryPoints(context: Context) {
-    const dirname = getBundleType({ ...context, emitExposedDependencies: true });
-    if (!dirname) {
-        return [];
-    }
+    // crossorigin matches the MFE side's <link> so both share one cache entry for the shared CSS.
+    const tags = [...css.map(path => ({ path, attributes: { crossorigin: 'anonymous' } })), ...js];
 
-    const { css = [], js = [] } = getExposedDependenciesEntryPoints(context) ?? {};
-    return [...css, ...js].map(name => `${dirname}/${name}`);
+    return new HtmlWebpackTagsPlugin({ tags, append: false });
 }

package/src/webpack/configs/plugins/ignore-plugin/__tests__/ignore-plugin.test.ts

@@ -0,0 +1,119 @@
+import type { BuildContext } from '../../../../../core';
+import { checkResource } from '../../../../../core';
+import { ignorePlugin } from '../ignore-plugin';
+
+jest.mock('../../../../../core', () => ({
+    checkResource: jest.fn(),
+}));
+
+describe(ignorePlugin.name, () => {
+    let context: BuildContext;
+    let checker: jest.Mock;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        context = {} as any;
+        checker = jest.fn().mockReturnValue(false);
+        jest.mocked(checkResource).mockReturnValue(checker);
+    });
+
+    const subject = () => ignorePlugin(context, {});
+
+    test('creates checker from build context', () => {
+        subject();
+
+        expect(checkResource).toHaveBeenCalledWith(context);
+    });
+
+    describe('apply', () => {
+        let resolveData: { request: string; context: string };
+        let beforeResolveTap: (resolveData: any) => any;
+
+        beforeEach(() => {
+            resolveData = { request: 'some-module', context: '/app' };
+
+            const plugin = ignorePlugin(context, {});
+            const mockCompiler = {
+                hooks: {
+                    normalModuleFactory: {
+                        tap: (_name: string, callback: Function) => {
+                            callback({
+                                hooks: {
+                                    beforeResolve: {
+                                        tap: (_name: string, cb: Function) => {
+                                            beforeResolveTap = cb as any;
+                                        },
+                                    },
+                                },
+                            });
+                        },
+                    },
+                },
+            };
+            plugin.apply(mockCompiler as any);
+        });
+
+        const subject = () => beforeResolveTap(resolveData);
+
+        test('checks resource against importer', () => {
+            subject();
+
+            expect(checker).toHaveBeenCalledWith({
+                resource: resolveData.request,
+                importer: resolveData.context,
+            });
+        });
+
+        test('does not replace request', () => {
+            const { request } = resolveData;
+
+            subject();
+
+            expect(resolveData.request).toBe(request);
+        });
+
+        test('returns undefined', () => {
+            expect(subject()).toBeUndefined();
+        });
+
+        describe('when resolve data is falsy', () => {
+            beforeEach(() => (resolveData = null as any));
+
+            test('skips resource check', () => {
+                subject();
+
+                expect(checker).not.toHaveBeenCalled();
+            });
+        });
+
+        describe('when checker returns "throw"', () => {
+            beforeEach(() => checker.mockReturnValue('throw'));
+
+            test('returns false to signal ignore', () => {
+                expect(subject()).toBe(false);
+            });
+
+            test('does not replace request', () => {
+                const { request } = resolveData;
+
+                subject();
+
+                expect(resolveData.request).toBe(request);
+            });
+        });
+
+        describe('when checker returns "empty"', () => {
+            beforeEach(() => checker.mockReturnValue('empty'));
+
+            test('replaces request with empty module path', () => {
+                subject();
+
+                expect(resolveData.request).toBe(require.resolve('../empty-module'));
+            });
+
+            test('returns undefined', () => {
+                expect(subject()).toBeUndefined();
+            });
+        });
+    });
+});

package/src/webpack/configs/plugins/ignore-plugin/empty-module.ts

@@ -0,0 +1,7 @@
+/*
+ * Empty module used by IgnoreOptionalDependenciesPlugin in 'empty' mode to substitute missing
+ * optional dependencies. This must be a physical file because webpack's resolveData.request
+ * requires a resolvable path. Matches the vite plugin's substitute shape (no exports), so a
+ * namespace import (`import * as X`) yields an empty namespace under both bundlers.
+ */
+export {};

package/src/webpack/configs/plugins/ignore-plugin/ignore-plugin.ts

@@ -1,13 +1,63 @@
-import { IgnorePlugin } from 'webpack';
-import { Context, Overrides } from '../../types';
-import { checkResource } from './check-resource';
-
-export function ignorePlugin(context: Context, _: Overrides) {
-    /**
-     * Ignore optional peer dependencies
-     * @see {@link: file://./../../../../../../web-components/src/register.tsx}
-     * @see {@link: file://./../../../../../../web-components/src/render.ts}
-     * @see {@link: file://./../../../../../../ko-bridge/src/ko-binding-handlers.tsx}
-     */
-    return new IgnorePlugin({ checkResource: checkResource(context) });
+import { Compiler } from 'webpack';
+import { BuildContext, type CheckerArgs, checkResource, type IgnoreMode } from '../../../../core';
+import { Overrides } from '../../../types';
+
+/**
+ * Handles optional peer dependencies that are not installed.
+ *
+ * @see {@link file://./../../../../vite/plugins/ignore-modules-plugin.ts} for the vite counterpart.
+ *
+ * 'throw' mode: returns false from beforeResolve, mirroring webpack's built-in IgnorePlugin.
+ *   Webpack emits a `webpackMissingModule()` IIFE that throws "Cannot find module" at runtime.
+ *   Top-level static imports of the resource crash module evaluation, and `try { require(...) }
+ *   catch {}` patterns work as expected. This is the default for matched optional peers.
+ *
+ * 'empty' mode: rewrites the request to point at an empty physical module so the import
+ *   resolves successfully with no exports. Required for top-level `import * as X from 'optional'`
+ *   followed by `X.foo === undefined` detection. Opt in via
+ *   `cli.peerDependenciesMeta["pkg"].fallback = "empty"` in the importer's package.json.
+ */
+type Checker = (args: CheckerArgs) => IgnoreMode | false;
+
+class IgnoreOptionalDependenciesPlugin {
+    private readonly checker: Checker;
+    private readonly emptyModulePath: string;
+
+    constructor(checker: Checker) {
+        this.checker = checker;
+        this.emptyModulePath = require.resolve('./empty-module');
+    }
+
+    apply(compiler: Compiler) {
+        compiler.hooks.normalModuleFactory.tap(
+            'IgnoreOptionalDependenciesPlugin',
+            normalModuleFactory => {
+                normalModuleFactory.hooks.beforeResolve.tap(
+                    'IgnoreOptionalDependenciesPlugin',
+                    resolveData => {
+                        if (!resolveData) {
+                            return;
+                        }
+
+                        const mode = this.checker({
+                            resource: resolveData.request,
+                            importer: resolveData.context,
+                        });
+
+                        if (mode === 'throw') {
+                            return false;
+                        }
+
+                        if (mode === 'empty') {
+                            resolveData.request = this.emptyModulePath; // must be a physical file
+                        }
+                    }
+                );
+            }
+        );
+    }
+}
+
+export function ignorePlugin(context: BuildContext, _: Overrides) {
+    return new IgnoreOptionalDependenciesPlugin(checkResource(context));
 }

package/src/webpack/configs/plugins/index.ts

@@ -2,6 +2,7 @@ export * from './assets-manifest-plugin';
 export * from './bundle-analyser-plugin';
 export * from './define-exposed-dependencies-plugin';
 export * from './define-exposed-instance-dependencies-plugin';
+export * from './define-process-env-plugin';
 export * from './define-web-component-name-plugin';
 export * from './filter-warnings-plugin';
 export * from './html-plugin';

package/src/webpack/configs/plugins/mini-css-extract-plugin.ts

@@ -1,11 +1,15 @@
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import { Context, Overrides } from '../types';
+import { Overrides, WebpackBuildContext } from '../../types';
 
-export function miniCssExtractPlugin(context: Context, overrides: Overrides) {
-    const { isCustomStyleRules, isExposeSharedDependencies, isProduction, isWebComponent } =
-        context;
+export function miniCssExtractPlugin(context: WebpackBuildContext, overrides: Overrides) {
+    const { isProduction, emitExposedDependencies } = context.build;
+    const { isExposeSharedDependencies, isWebComponent } = context.package;
+    const { 'custom-style-rules': isCustomStyleRules } = context.bundlerConfig;
 
-    if (!isCustomStyleRules && (isProduction || isWebComponent || isExposeSharedDependencies)) {
+    if (
+        (!isCustomStyleRules || emitExposedDependencies) &&
+        (isProduction || isWebComponent || isExposeSharedDependencies)
+    ) {
         return new MiniCssExtractPlugin({
             filename: isProduction ? '[name].[contenthash].bundle.css' : '[name].bundle.css',
             ...overrides.plugins?.MiniCssExtractPlugin,

package/src/webpack/configs/plugins/moment-locales-plugin.ts

@@ -1,13 +1,14 @@
-import { Context, Overrides } from '../types';
+import { BuildContext, MOMENT_LOCALES } from '../../../core';
+import { Overrides } from '../../types';
 
 const MomentLocalesPlugin: typeof import('moment-locales-webpack-plugin') | undefined =
     isMomentInstalled() ? require('moment-locales-webpack-plugin') : undefined;
 
-export function momentLocalesPlugin(_: Context, _overrides: Overrides) {
+export function momentLocalesPlugin(_: BuildContext, _overrides: Overrides) {
     return (
         MomentLocalesPlugin &&
         new MomentLocalesPlugin({
-            localesToKeep: ['en-au', 'en-ca', 'en-gb'],
+            localesToKeep: MOMENT_LOCALES,
         })
     );
 }

package/src/webpack/configs/plugins/remove-empty-scripts-plugin.ts

@@ -1,8 +1,9 @@
 import RemoveEmptyScriptsPlugin from 'webpack-remove-empty-scripts';
-import { Context, Overrides } from '../types';
+import { BuildContext } from '../../../core';
+import { Overrides } from '../../types';
 
-export function removeEmptyScriptsPlugin(context: Context, _overrides: Overrides) {
-    const { emitExposedDependencies } = context;
+export function removeEmptyScriptsPlugin(context: BuildContext, _overrides: Overrides) {
+    const { emitExposedDependencies } = context.build;
     if (!emitExposedDependencies) {
         return;
     }