@servicetitan/startup 36.4.0 → 37.0.1

package/src/vite/plugins/{__tests__ → shared-dependencies-plugin/__tests__}/shared-dependencies-plugin.test.ts

@@ -1,11 +1,12 @@
 import path from 'path';
-import { bundleConstants, generateExposedDependenciesMetadata } from '../../../core';
+import { bundleConstants, generateExposedDependenciesMetadata } from '../../../../core';
 import {
     sharedDependenciesPlugin,
     type SharedDependenciesPluginOptions,
 } from '../shared-dependencies-plugin';
 
-jest.mock('../../../core', () => ({
+jest.mock('../../../../core', () => ({
+    ...jest.requireActual('../../../../core'),
     bundleConstants: {
         mode: { production: 'production', development: 'development' },
     },
@@ -259,11 +260,19 @@ describe(sharedDependenciesPlugin.name, () => {
                     type: 'chunk',
                     isEntry: false,
                     code: sharedChunk.code,
+                    imports: [],
+                    dynamicImports: [],
                 },
                 ...Object.fromEntries(
                     Object.keys(mockDependencies).map(dependency => [
                         entryFileName(dependency),
-                        { type: 'chunk', isEntry: true, code: `${dependency} code` },
+                        {
+                            type: 'chunk',
+                            isEntry: true,
+                            code: `${dependency} code`,
+                            imports: [],
+                            dynamicImports: [],
+                        },
                     ])
                 ),
                 'styles.bundle.css': { type: 'asset' },
@@ -383,7 +392,13 @@ describe(sharedDependenciesPlugin.name, () => {
         describe('with CSS entries', () => {
             beforeEach(() => {
                 options.css = { 'design-system': ['tokens.css'] };
-                bundle['design-system.cjs.js'] = { type: 'chunk', isEntry: true, code: '' };
+                bundle['design-system.cjs.js'] = {
+                    type: 'chunk',
+                    isEntry: true,
+                    code: '',
+                    imports: [],
+                    dynamicImports: [],
+                };
             });
 
             test('removes CSS entry chunks from bundle', () => {
@@ -392,6 +407,25 @@ describe(sharedDependenciesPlugin.name, () => {
                 expect(bundle['design-system.cjs.js']).toBeUndefined();
             });
         });
+
+        describe('when bundle has anvil2 CSS before design-system CSS', () => {
+            beforeEach(() => {
+                bundle['anvil2.bundle.css'] = { type: 'asset' };
+                bundle['design-system.bundle.css'] = { type: 'asset' };
+            });
+
+            test('puts design-system CSS before anvil2 CSS in entrypoints.json', () => {
+                subject();
+
+                const call = emitFile.mock.calls.find(
+                    (c: any) => c[0].fileName === 'entrypoints.json'
+                );
+                const { css } = JSON.parse(call[0].source);
+                expect(css.indexOf('design-system.bundle.css')).toBeLessThan(
+                    css.indexOf('anvil2.bundle.css')
+                );
+            });
+        });
     });
 
     describe('writeBundle', () => {

package/src/vite/plugins/shared-dependencies-plugin/assemble-iife.ts

@@ -0,0 +1,114 @@
+export interface ModuleFactory {
+    /** Module id used as the factory's key and require() argument (e.g. `react`, `./_chunk.js`). */
+    id: string;
+    /** The chunk's generated code, run inside `function(module, exports, require) { ... }`. */
+    code: string;
+}
+
+export interface Expose {
+    /** Global path the dependency is published under (e.g. `SharedDependencies.React`). */
+    variable: string;
+    /** Module id resolved through the scoped require when the global is accessed. */
+    dependency: string;
+}
+
+function indent(spaces: number) {
+    return ' '.repeat(spaces);
+}
+
+/*
+ * Wraps the bundle's module factories and expose calls in the runtime IIFE.
+ * The IIFE installs a per-scope require system on globalThis so each MFE gets
+ * isolated module instances of the shared dependencies.
+ */
+export function assembleIife(modules: ModuleFactory[], exposes: Expose[]): string {
+    const factories = modules.map(
+        ({ id, code }) =>
+            `'${id}': function(module, exports, require) {\n${indent(12)}${code}\n${indent(8)}}`
+    );
+    const exposeCalls = exposes.map(
+        ({ variable, dependency }) => `expose('${variable}', '${dependency}');`
+    );
+
+    return `\
+(function () {
+    const STORAGE_KEY = Symbol.for('SERVICETITAN_EXPOSE_LOADER_STORAGE');
+    const g = globalThis;
+
+    if (g[STORAGE_KEY] === undefined) {
+        g[STORAGE_KEY] = Object.assign(Object.create(null), {
+            clear(scope) {
+                delete this[scope];
+            },
+        });
+    }
+
+    var storage = g[STORAGE_KEY];
+
+    var modules = {
+        ${factories.join(`,\n${indent(8)}`)}
+    };
+
+    function createScopedRequire(scope) {
+        const cache = (storage[scope] = storage[scope] || Object.create(null));
+
+        function require(id) {
+            if (cache[id]) {
+                return cache[id].exports;
+            }
+            if (!modules[id]) {
+                throw new Error('Module not found: ' + id);
+            }
+
+            const module = (cache[id] = { id, loaded: false, exports: {} });
+            modules[id](module, module.exports, require);
+            module.loaded = true;
+
+            const keys = Object.keys(module.exports);
+            if (module.exports.__esModule && keys.length === 1 && keys[0] === 'default') {
+                module.exports = module.exports.default;
+            }
+
+            return module.exports;
+        }
+
+        Object.setPrototypeOf(require, {
+            resolve(id) {
+                return id;
+            },
+        });
+        return require;
+    }
+
+    function expose(path, moduleId) {
+        const parts = path.split('.');
+        let obj = g;
+
+        for (let i = 0; i < parts.length - 1; i++) {
+            if (obj[parts[i]] === undefined) {
+                obj[parts[i]] = Object.create(null);
+            }
+            obj = obj[parts[i]];
+        }
+
+        obj[parts[parts.length - 1]] = new Proxy(
+            Object.assign(Object.create(null), {
+                getStorage() {
+                    return storage;
+                },
+            }),
+            {
+                get(target, scope, receiver) {
+                    if (scope === 'getStorage') {
+                        return Reflect.get(target, scope, receiver);
+                    }
+                    return createScopedRequire(scope)(moduleId);
+                },
+            }
+        );
+    }
+
+    ${exposeCalls.join(`\n${indent(4)}`)}
+})();
+`;
+}

package/src/vite/plugins/shared-dependencies-plugin/assert-no-dynamic-css.ts

@@ -0,0 +1,58 @@
+import type { OutputBundle, OutputChunk } from 'rolldown';
+
+/*
+ * Output bundles only include statically imported CSS. CSS pulled in by a dynamic
+ * import() lands in a separate async chunk that is omitted from entrypoints.json
+ * and silently fails to load. Fail the build when the bundle references CSS that
+ * does not land in entrypoints.json.
+ */
+export function assertNoDynamicCss(bundle: OutputBundle): void {
+    for (const entry of Object.values(bundle)) {
+        if (!(entry.type === 'chunk' && entry.isEntry)) {
+            continue;
+        }
+
+        const includedCss = importedCss(entry);
+        const excludedCss = [...allCss(entry, bundle)].filter(css => !includedCss.has(css));
+
+        if (excludedCss.length > 0) {
+            throw new Error(
+                `Shared dependency chunk "${entry.name}" pulls in CSS through a dynamic import ` +
+                    `(${excludedCss.join(', ')}). Shared dependencies only include statically imported ` +
+                    `CSS. Dynamically imported CSS will not load on the host.`
+            );
+        }
+    }
+}
+
+/*
+ * Return every CSS file imported by the entry and recursively by anything it imports.
+ */
+function allCss(entry: OutputChunk, bundle: OutputBundle): Set<string> {
+    const result = new Set<string>();
+    const visited = new Set<string>();
+    const stack = [entry];
+
+    while (stack.length > 0) {
+        const chunk = stack.pop()!;
+        importedCss(chunk).forEach(file => result.add(file));
+
+        for (const fileName of [...chunk.imports, ...chunk.dynamicImports]) {
+            const imported = bundle[fileName];
+            if (imported?.type === 'chunk' && !visited.has(fileName)) {
+                visited.add(fileName);
+                stack.push(imported);
+            }
+        }
+    }
+
+    return result;
+}
+
+function importedCss(chunk: OutputChunk): ReadonlySet<string> {
+    return (
+        // Vite adds `viteMetadata` to Rolldown chunks; cast because its type augmentation is not in scope here.
+        (chunk as { viteMetadata?: { importedCss?: Set<string> } }).viteMetadata?.importedCss ??
+        new Set<string>()
+    );
+}

package/src/vite/plugins/shared-dependencies-plugin/flatten.ts

@@ -0,0 +1,8 @@
+/*
+ * Replaces `/` with `-` so scoped packages stay flat in Rolldown output.
+ * Without this, `@scope/foo` emits into a subdirectory and its require()
+ * calls use `../` paths that don't match the IIFE's flat module keys.
+ */
+export function flatten(dep: string): string {
+    return dep.replace(/\//g, '-');
+}

package/src/vite/plugins/shared-dependencies-plugin/index.ts

@@ -0,0 +1 @@
+export * from './shared-dependencies-plugin';

package/src/vite/plugins/{shared-dependencies-plugin.ts → shared-dependencies-plugin/shared-dependencies-plugin.ts}

@@ -1,16 +1,10 @@
 import crypto from 'crypto';
 import path from 'path';
 import { Plugin } from 'vite';
-import { bundleConstants, generateExposedDependenciesMetadata } from '../../core';
-
-/*
- * Replaces `/` with `-` so scoped packages stay flat in Rolldown output.
- * Without this, `@scope/foo` emits into a subdirectory and its require()
- * calls use `../` paths that don't match the IIFE's flat module keys.
- */
-function flatName(dep: string) {
-    return dep.replace('/', '-');
-}
+import { bundleConstants, generateExposedDependenciesMetadata, sortSharedCss } from '../../../core';
+import { assembleIife, Expose, ModuleFactory } from './assemble-iife';
+import { assertNoDynamicCss } from './assert-no-dynamic-css';
+import { flatten } from './flatten';
 
 export interface SharedDependenciesPluginOptions {
     dependencies: Record<string, string>;
@@ -18,9 +12,8 @@ export interface SharedDependenciesPluginOptions {
     metadataDir?: string;
 }
 
-function indent(spaces: number) {
-    return ' '.repeat(spaces);
-}
+// Suffix for the CJS entry files emitted by `entryFileNames` below.
+const ENTRY_FILE_SUFFIX = '.cjs.js';
 
 export function sharedDependenciesPlugin({
     dependencies,
@@ -44,7 +37,7 @@ export function sharedDependenciesPlugin({
 
             const input: Record<string, string> = {};
             for (const dependency of dependencyNames) {
-                input[flatName(dependency)] = dependency;
+                input[flatten(dependency)] = dependency;
             }
             for (const name of cssInputNames) {
                 input[name] = CSS_VIRTUAL_PREFIX + name;
@@ -53,7 +46,7 @@ export function sharedDependenciesPlugin({
             return {
                 // Relative base so CSS font URLs resolve from the CSS file's directory, not site root
                 base: './',
-                // Must match host build mode — mismatch causes react-dom/client usingClientEntryPoint errors
+                // Must match host build mode; mismatch causes react-dom/client usingClientEntryPoint errors
                 define: {
                     'process.env.NODE_ENV': JSON.stringify(env.mode),
                 },
@@ -69,12 +62,12 @@ export function sharedDependenciesPlugin({
                              */
                             format: 'cjs',
                             exports: 'named',
-                            entryFileNames: '[name].cjs.js',
+                            entryFileNames: `[name]${ENTRY_FILE_SUFFIX}`,
                             chunkFileNames: '_[name]-[hash].js',
                             assetFileNames: assetInfo => {
                                 const rawName = assetInfo.names?.[0] ?? '';
                                 const ext = rawName.split('.').pop() ?? '';
-                                // Strip scope prefix added by flatName (e.g. @servicetitan-anvil2 → anvil2)
+                                // Strip scope prefix added by flatten (e.g. @servicetitan-anvil2 to anvil2)
                                 const name = rawName
                                     .replace(/^@[^-]+-/, '')
                                     .replace(/\.[^.]+$/, '');
@@ -120,41 +113,39 @@ export function sharedDependenciesPlugin({
         },
 
         generateBundle(_options, bundle) {
-            const factories: string[] = [];
-            const exposes: string[] = [];
+            assertNoDynamicCss(bundle);
+
+            const modules: ModuleFactory[] = [];
+            const exposes: Expose[] = [];
 
             for (const [fileName, chunk] of Object.entries(bundle)) {
                 if (chunk.type !== 'chunk') {
                     continue;
                 }
                 if (!chunk.isEntry) {
-                    factories.push(
-                        `'./${fileName}': function(module, exports, require) {\n${indent(12)}${chunk.code}\n${indent(8)}}`
-                    );
+                    modules.push({ id: `./${fileName}`, code: chunk.code });
                     delete bundle[fileName];
                 }
             }
 
             for (const [dependency, variable] of Object.entries(dependencies)) {
-                const entryFileName = `${flatName(dependency)}.cjs.js`;
+                const entryFileName = `${flatten(dependency)}${ENTRY_FILE_SUFFIX}`;
                 const chunk = bundle[entryFileName];
                 if (chunk?.type !== 'chunk') {
                     throw new Error(
                         `Expected entry chunk for ${dependency}, got type: ${chunk?.type ?? 'undefined'}`
                     );
                 }
-                factories.push(
-                    `'${dependency}': function(module, exports, require) {\n${indent(12)}${chunk.code}\n${indent(8)}}`
-                );
-                exposes.push(`expose('${variable}', '${dependency}');`);
+                modules.push({ id: dependency, code: chunk.code });
+                exposes.push({ variable, dependency });
                 delete bundle[entryFileName];
             }
 
             for (const name of cssInputNames) {
-                delete bundle[`${name}.cjs.js`];
+                delete bundle[`${name}${ENTRY_FILE_SUFFIX}`];
             }
 
-            const code = assembleIIFE(factories, exposes);
+            const code = assembleIife(modules, exposes);
             const hash = crypto.createHash('md5').update(code).digest('hex').slice(0, 20);
             const sharedFileName = isProduction ? `shared.${hash}.bundle.js` : 'shared.bundle.js';
 
@@ -164,7 +155,9 @@ export function sharedDependenciesPlugin({
                 source: code,
             });
 
-            const cssFiles = Object.keys(bundle).filter(f => f.endsWith('.bundle.css'));
+            const cssFiles = sortSharedCss(
+                Object.keys(bundle).filter(f => f.endsWith('.bundle.css'))
+            );
             const entrypoints = { css: cssFiles, js: [sharedFileName] };
             this.emitFile({
                 type: 'asset',
@@ -178,7 +171,7 @@ export function sharedDependenciesPlugin({
                   /*
                    * dir is always set when build.outDir is configured (our case).
                    * Rolldown types it as optional, but falling back to '' would
-                   * silently resolve to cwd — better to crash than write wrong metadata.
+                   * silently resolve to cwd; better to crash than write wrong metadata.
                    */
                   generateExposedDependenciesMetadata(metadataDir, () =>
                       path.resolve(options.dir!, 'entrypoints.json')
@@ -187,87 +180,3 @@ export function sharedDependenciesPlugin({
             : undefined,
     };
 }
-
-function assembleIIFE(factories: string[], exposes: string[]): string {
-    return `\
-(function () {
-    const STORAGE_KEY = Symbol.for('SERVICETITAN_EXPOSE_LOADER_STORAGE');
-    const g = globalThis;
-
-    if (g[STORAGE_KEY] === undefined) {
-        g[STORAGE_KEY] = Object.assign(Object.create(null), {
-            clear(scope) {
-                delete this[scope];
-            },
-        });
-    }
-
-    var storage = g[STORAGE_KEY];
-
-    var modules = {
-        ${factories.join(`,\n${indent(8)}`)}
-    };
-
-    function createScopedRequire(scope) {
-        const cache = (storage[scope] = storage[scope] || Object.create(null));
-
-        function require(id) {
-            if (cache[id]) {
-                return cache[id].exports;
-            }
-            if (!modules[id]) {
-                throw new Error('Module not found: ' + id);
-            }
-
-            const module = (cache[id] = { id, loaded: false, exports: {} });
-            modules[id](module, module.exports, require);
-            module.loaded = true;
-
-            const keys = Object.keys(module.exports);
-            if (module.exports.__esModule && keys.length === 1 && keys[0] === 'default') {
-                module.exports = module.exports.default;
-            }
-
-            return module.exports;
-        }
-
-        Object.setPrototypeOf(require, {
-            resolve(id) {
-                return id;
-            },
-        });
-        return require;
-    }
-
-    function expose(path, moduleId) {
-        const parts = path.split('.');
-        let obj = g;
-
-        for (let i = 0; i < parts.length - 1; i++) {
-            if (obj[parts[i]] === undefined) {
-                obj[parts[i]] = Object.create(null);
-            }
-            obj = obj[parts[i]];
-        }
-
-        obj[parts[parts.length - 1]] = new Proxy(
-            Object.assign(Object.create(null), {
-                getStorage() {
-                    return storage;
-                },
-            }),
-            {
-                get(target, scope, receiver) {
-                    if (scope === 'getStorage') {
-                        return Reflect.get(target, scope, receiver);
-                    }
-                    return createScopedRequire(scope)(moduleId);
-                },
-            }
-        );
-    }
-
-    ${exposes.join(`\n${indent(4)}`)}
-})();
-`;
-}

package/src/vite/plugins/utils/import-esm.ts

@@ -0,0 +1,15 @@
+/*
+ * Load an ES module from CommonJS output. SWC rewrites a plain dynamic
+ * import() to require(), which throws on ESM-only packages (those whose
+ * package exports have no "require" entry, e.g. vite-plugin-istanbul). Hiding
+ * the import() inside a Function keeps it native so it isn't rewritten.
+ */
+// eslint-disable-next-line @typescript-eslint/no-implied-eval
+const nativeImport = new Function('specifier', 'return import(specifier)') as (
+    specifier: string
+) => Promise<unknown>;
+
+/* istanbul ignore next -- native import can't run in jest; verified at runtime */
+export function importEsm<T = unknown>(specifier: string): Promise<T> {
+    return nativeImport(specifier) as Promise<T>;
+}

package/src/vite/plugins/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './get-css-file-names';
+export * from './import-esm';

package/src/vite/rolldown-oxc.d.ts

@@ -0,0 +1,20 @@
+/*
+ * rolldown@1.x ships an incomplete `TransformOptions` for its `rolldown/utils` entry: it
+ * omits the `minify` and `legalComments` oxc transform options, even though the runtime
+ * honors both. Vite surfaces these options through `OxcOptions` (`Omit<TransformOptions, …>`),
+ * so the gap shows up wherever we set `oxc` (e.g. base-config.ts, build-shared-dependencies.ts).
+ *
+ * Until rolldown's published types include them, augment `TransformOptions` to match the
+ * runtime. (`moduleResolution: "node10"` previously hid this by failing to resolve
+ * `rolldown/utils` at all, leaving `OxcOptions` as `any`.)
+ */
+declare module 'rolldown/utils' {
+    import type { MinifyOptions } from 'rolldown/utils';
+
+    interface TransformOptions {
+        minify?: boolean | MinifyOptions;
+        legalComments?: 'none' | 'inline' | 'eof' | 'external' | { linked: string };
+    }
+}
+
+export {};

package/src/webpack/__tests__/bundle-webpack.test.ts

@@ -231,11 +231,10 @@ describe('[startup] Cli Utils', () => {
                             await subject();
 
                             expect(createWebpackConfig).toHaveBeenCalledWith(
-                                expect.anything(),
                                 expect.objectContaining({
-                                    emitExposedDependencies: true,
-                                    outputBasePath: prodOutput.path,
-                                })
+                                    configuration: expect.objectContaining({ output: prodOutput }),
+                                }),
+                                expect.objectContaining({ emitExposedDependencies: true })
                             );
                         });
                     }
@@ -263,11 +262,12 @@ describe('[startup] Cli Utils', () => {
                                 await subject();
 
                                 expect(createWebpackConfig).toHaveBeenCalledWith(
-                                    expect.anything(),
                                     expect.objectContaining({
-                                        emitExposedDependencies: true,
-                                        outputBasePath: devOutput.path,
-                                    })
+                                        configuration: expect.objectContaining({
+                                            output: devOutput,
+                                        }),
+                                    }),
+                                    expect.objectContaining({ emitExposedDependencies: true })
                                 );
                             });
                         });

package/src/webpack/__tests__/create-webpack-config-shared-dependencies.test.ts

@@ -23,7 +23,7 @@ import {
     pick,
 } from '../../utils';
 import { miniCssPluginStyleRules } from '../__mocks__';
-import { createWebpackConfig } from '../index';
+import { createWebpackConfig } from '../create-webpack-config';
 import { getModuleEntryPath } from '../utils';
 
 jest.mock('fs', () => fs);
@@ -336,6 +336,19 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
                     name: 'anvil2',
                     chunks: 'all',
                     enforce: true,
+                    priority: 10,
+                });
+            });
+
+            describe('in production', () => {
+                beforeEach(() => (overrides.configuration!.mode = 'production'));
+
+                test('ranks anvil2 above the servicetitan vendor group', () => {
+                    const { cacheGroups } = subject().optimization!.splitChunks as any;
+
+                    expect(cacheGroups.anvil2.priority).toBeGreaterThan(
+                        cacheGroups.servicetitan.priority ?? 0
+                    );
                 });
             });
 
@@ -350,12 +363,12 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
             });
 
             describe('with custom "output.path"', () => {
-                const outputBasePath = path.resolve(process.cwd(), 'foo');
+                const outputPath = path.resolve(process.cwd(), 'foo');
 
-                beforeEach(() => (options!.outputBasePath = outputBasePath));
+                beforeEach(() => (overrides.configuration!.output = { path: outputPath }));
 
-                test('use custom "output.path"', () => {
-                    expect(subject().output?.path).toBe(path.join(outputBasePath, 'shared'));
+                test('uses custom "output.path"', () => {
+                    expect(subject().output?.path).toBe(path.join(outputPath, 'shared'));
                 });
             });
 
@@ -370,6 +383,42 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
                 );
             });
 
+            test('WebpackAssetsManifest plugin moves design-system CSS before anvil2 CSS', () => {
+                const assets = {
+                    entrypoints: {
+                        'shared': { assets: { css: ['anvil2.bundle.css'] } },
+                        'design-system': { assets: { css: ['design-system.bundle.css'] } },
+                    },
+                };
+
+                subject();
+
+                const transform: any =
+                    jest.mocked(WebpackAssetsManifest).mock.calls[0][0]?.transform;
+                expect(transform(assets)).toEqual(
+                    expect.objectContaining({
+                        css: ['design-system.bundle.css', 'anvil2.bundle.css'],
+                    })
+                );
+            });
+
+            test('WebpackAssetsManifest plugin dedupes a chunk shared by entry points', () => {
+                const assets = {
+                    entrypoints: {
+                        'shared': { assets: { css: ['servicetitan.bundle.css'] } },
+                        'design-system': { assets: { css: ['servicetitan.bundle.css'] } },
+                    },
+                };
+
+                subject();
+
+                const transform: any =
+                    jest.mocked(WebpackAssetsManifest).mock.calls[0][0]?.transform;
+                expect(transform(assets)).toEqual(
+                    expect.objectContaining({ css: ['servicetitan.bundle.css'] })
+                );
+            });
+
             test('generates exposed-dependencies-metadata.json when WebpackAssetsManifest plugin is done', () => {
                 const entryPointsPath = path.join(process.cwd(), destination, 'entrypoints.json');
                 const manifest = { getOutputPath: () => entryPointsPath };