@servicetitan/startup 36.4.0 → 37.0.0

package/src/vite/plugins/clean-plugin.ts

@@ -0,0 +1,46 @@
+import fs from 'fs';
+import path from 'path';
+import type { Plugin } from 'vite';
+import { BuildContext, getBundleType } from '../../core';
+
+/*
+ * Removes stale artifacts from the output directory. MFE builds use Vite's `emptyOutDir`.
+ * Host builds can't, since their outDir holds the shared dependencies subdir, so
+ * `buildStart` empties it while keeping shared dependencies.
+ */
+export function cleanPlugin(context: BuildContext): Plugin {
+    const { isWebComponent } = context.package;
+    let outDir = '';
+
+    return {
+        name: 'clean',
+        apply: 'build',
+        config: () => ({ build: { emptyOutDir: isWebComponent } }),
+        configResolved(config) {
+            outDir = config.build.outDir;
+        },
+        buildStart() {
+            if (isWebComponent || !fs.existsSync(outDir)) {
+                return;
+            }
+            const keep = getKeepDir(context);
+            for (const entry of fs.readdirSync(outDir)) {
+                if (entry === keep) {
+                    continue;
+                }
+                fs.rmSync(path.join(outDir, entry), { recursive: true, force: true });
+            }
+        },
+    };
+}
+
+/* The shared deps subdirectory to preserve, or undefined to clean everything. */
+function getKeepDir(context: BuildContext): string | undefined {
+    if (context.build.emitExposedDependencies) {
+        return undefined;
+    }
+    return getBundleType({
+        ...context,
+        build: { ...context.build, emitExposedDependencies: true },
+    });
+}

package/src/vite/plugins/design-system-guard-plugin.ts

@@ -0,0 +1,34 @@
+import path from 'path';
+import type { Plugin } from 'vite';
+import { BuildContext } from '../../core';
+
+const DESIGN_SYSTEM = '@servicetitan/design-system';
+const DESIGN_SYSTEM_CSS = /[\\/]design-system\.css$/;
+
+/*
+ * Errors when a host's own code imports design-system.css while it exposes the design
+ * system as a shared dependency. The CSS already ships in the shared bundle, so a direct
+ * import would load the design system twice. Mirrors the webpack guard in css-rules.ts.
+ */
+export function designSystemGuardPlugin(context: BuildContext): Plugin {
+    const { isExposeSharedDependencies, sharedDependencies } = context.package;
+    const { emitExposedDependencies } = context.build;
+
+    const designSystemInSharedBundle =
+        isExposeSharedDependencies &&
+        !!sharedDependencies[DESIGN_SYSTEM] &&
+        !emitExposedDependencies;
+
+    return {
+        name: 'design-system-guard',
+        enforce: 'pre',
+        resolveId(source, importer) {
+            if (designSystemInSharedBundle && importer && DESIGN_SYSTEM_CSS.test(source)) {
+                const filename = path.parse(importer).name;
+                this.error(
+                    `do not import design-system.css in "${filename}"; it is automatically included as a shared dependency`
+                );
+            }
+        },
+    };
+}

package/src/vite/plugins/ignore-modules-plugin.ts

@@ -1,8 +1,24 @@
 import type { Plugin } from 'vite';
 import { BuildContext, checkResource } from '../../core';
 
-export const VIRTUAL_PREFIX = '\0IGNORE';
+export const THROW_PREFIX = '\0IGNORE_THROW:';
+export const EMPTY_PREFIX = '\0IGNORE_EMPTY:';
 
+/**
+ * Handles optional peer dependencies that are not installed.
+ *
+ * @see {@link file://./../../webpack/configs/plugins/ignore-plugin/ignore-plugin.ts} for the webpack counterpart.
+ *
+ * 'throw' mode: substitutes a virtual module whose body throws "Cannot find module" on
+ *   evaluation. Mirrors webpack's `webpackMissingModule()` semantics. Top-level static
+ *   imports of the resource crash module evaluation, and `try { await import(...) } catch {}`
+ *   (or `try { require(...) } catch {}` in CJS code Rolldown bundles) work as expected.
+ *   This is the default for matched optional peers.
+ *
+ * 'empty' mode: substitutes a virtual module 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.
+ */
 export function ignoreModulesPlugin(context: BuildContext): Plugin {
     const checker = checkResource(context);
 
@@ -10,16 +26,26 @@ export function ignoreModulesPlugin(context: BuildContext): Plugin {
         name: 'ignore-modules',
         enforce: 'pre',
         resolveId(source, importer) {
-            if (importer && checker({ resource: source, importer })) {
-                return `${VIRTUAL_PREFIX}${source}`;
+            if (!importer) {
+                return;
+            }
+            const mode = checker({ resource: source, importer });
+            if (mode === 'throw') {
+                return `${THROW_PREFIX}${source}`;
+            }
+            if (mode === 'empty') {
+                return `${EMPTY_PREFIX}${source}`;
             }
         },
         load(id) {
-            if (id.startsWith(VIRTUAL_PREFIX)) {
-                const source = id.slice(VIRTUAL_PREFIX.length);
+            if (id.startsWith(THROW_PREFIX)) {
+                const source = id.slice(THROW_PREFIX.length);
                 const message = JSON.stringify(`Cannot find module '${source}'`);
                 return `throw Object.assign(new Error(${message}), { code: 'MODULE_NOT_FOUND' });`;
             }
+            if (id.startsWith(EMPTY_PREFIX)) {
+                return 'export {};';
+            }
         },
     };
 }

package/src/vite/plugins/index.ts

@@ -1,9 +1,16 @@
+export * from './bundle-stat-plugin';
+export * from './chain-source-maps-plugin';
+export * from './clean-plugin';
 export * from './css-injector-plugin';
+export * from './design-system-guard-plugin';
 export * from './dev-server-routing-plugin';
 export * from './externals-plugin';
 export * from './html-plugin';
 export * from './ignore-modules-plugin';
+export * from './istanbul-plugin';
+export * from './magic-comments-plugin';
 export * from './metadata-plugin';
+export * from './moment-locales-plugin';
 export * from './style-urls-plugin';
 export * from './svgr-plugin';
 export * from './virtual-modules-plugin';

package/src/vite/plugins/istanbul-plugin.ts

@@ -0,0 +1,19 @@
+import type { Plugin } from 'vite';
+import { ViteBuildContext } from '../types';
+import { importEsm } from './utils';
+
+export function istanbulPlugin(context: ViteBuildContext): Promise<Plugin> | undefined {
+    if (!context.options.codeCoverage) {
+        return;
+    }
+
+    // vite-plugin-istanbul is ESM-only; load it natively so SWC doesn't rewrite to require.
+    return importEsm<typeof import('vite-plugin-istanbul')>('vite-plugin-istanbul').then(
+        ({ default: istanbul }) =>
+            istanbul({
+                exclude: ['**/node_modules/**', '**/.yalc/**'],
+                requireEnv: false,
+                forceBuildInstrument: true,
+            })
+    );
+}

package/src/vite/plugins/magic-comments-plugin/__tests__/magic-comments-plugin.test.ts

@@ -0,0 +1,105 @@
+import type { ViteBuildContext } from '../../../types';
+import { magicCommentsPlugin } from '../magic-comments-plugin';
+
+describe(`[startup] ${magicCommentsPlugin.name}`, () => {
+    const importPath = './feature';
+    const resolve = jest.fn();
+    const warn = jest.fn();
+    let context: ViteBuildContext;
+    let code: string;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        resolve.mockImplementation(path => ({ id: path }));
+        context = { build: { isProduction: true } } as ViteBuildContext;
+        code = `import('${importPath}');`;
+    });
+
+    const subject = async () => {
+        const plugin = magicCommentsPlugin(context)!;
+        const { chunkFileNames } = (plugin.config as Function)().build.rolldownOptions.output;
+        // Returns chunk name the plugin produces for module imported by `code`
+        await (plugin.transform as { handler: Function }).handler.call({ resolve, warn }, code, '');
+        return chunkFileNames({ facadeModuleId: importPath });
+    };
+
+    function itReturnsDefaultChunkName() {
+        test('returns the default chunk name', async () => {
+            expect(await subject()).toBe('assets/[name]-[hash].js');
+        });
+    }
+
+    itReturnsDefaultChunkName();
+
+    describe('when code contains webpackChunkName comment', () => {
+        const webpackChunkName = 'dashboard';
+
+        beforeEach(
+            () =>
+                (code = code.replace(
+                    'import(',
+                    `import(/* webpackChunkName: '${webpackChunkName}' */`
+                ))
+        );
+
+        test('renames the chunk', async () => {
+            expect(await subject()).toBe(`assets/${webpackChunkName}-[hash].js`);
+        });
+
+        describe('when the import cannot be resolved', () => {
+            beforeEach(() => resolve.mockReturnValue(null));
+
+            itReturnsDefaultChunkName();
+        });
+    });
+
+    describe('when a chunk name is reused for different modules', () => {
+        beforeEach(() => {
+            code = [
+                "import(/* webpackChunkName: 'shared' */ './a')",
+                "import(/* webpackChunkName: 'shared' */ './b')",
+            ].join(';');
+        });
+
+        test('warns that the modules will not be merged', async () => {
+            await subject();
+
+            expect(warn).toHaveBeenCalledWith(expect.stringMatching(/used by multiple modules/));
+        });
+    });
+
+    describe('when the same module is imported twice with one name', () => {
+        beforeEach(() => {
+            code = [
+                `import(/* webpackChunkName: 'dashboard' */ './a')`,
+                `import(/* webpackChunkName: 'dashboard' */ './a')`,
+            ].join(';');
+        });
+
+        test('does not warn', async () => {
+            await subject();
+
+            expect(warn).not.toHaveBeenCalled();
+        });
+    });
+
+    describe('transform filter', () => {
+        const subject = () =>
+            (magicCommentsPlugin(context) as { transform: { filter: unknown } }).transform.filter;
+
+        test('excludes node_modules and requires the magic comment', () => {
+            expect(subject()).toEqual({
+                id: { exclude: /node_modules/ },
+                code: 'webpackChunkName',
+            });
+        });
+    });
+
+    describe('when not a production build', () => {
+        beforeEach(() => (context.build.isProduction = false));
+
+        test('is undefined', () => {
+            expect(magicCommentsPlugin(context)).toBeUndefined();
+        });
+    });
+});

package/src/vite/plugins/magic-comments-plugin/__tests__/parse-magic-comments.test.ts

@@ -0,0 +1,40 @@
+import { parseMagicComments } from '../parse-magic-comments';
+
+describe(`[startup] ${parseMagicComments.name}`, () => {
+    const cases = [
+        // single-quoted comment and import path
+        {
+            code: "import(/* webpackChunkName: 'feature' */ './module');",
+            result: [{ chunkName: 'feature', importPath: './module' }],
+        },
+        // double-quoted comment and import path
+        {
+            code: 'import(/* webpackChunkName: "feature" */ "./module");',
+            result: [{ chunkName: 'feature', importPath: './module' }],
+        },
+        // multiple dynamic imports; the unannotated one is dropped
+        {
+            code: [
+                "import(/* webpackChunkName: 'featureA' */ './moduleA')",
+                "import(/* webpackChunkName: 'featureB' */ './moduleB')",
+                "import('./moduleC')",
+            ].join(';'),
+            result: [
+                { chunkName: 'featureA', importPath: './moduleA' },
+                { chunkName: 'featureB', importPath: './moduleB' },
+            ],
+        },
+        // dynamic import without a magic comment
+        { code: "import('./module');", result: [] },
+        // non-string (computed) import path
+        { code: "import(/* webpackChunkName: 'feature' */ modulePath);", result: [] },
+        // static import
+        { code: "import /* webpackChunkName: 'feature' */ './module';", result: [] },
+    ];
+
+    cases.forEach(({ code, result }) => {
+        test(`with ${code} returns ${JSON.stringify(result)}`, async () => {
+            await expect(parseMagicComments(code)).resolves.toEqual(result);
+        });
+    });
+});

package/src/vite/plugins/magic-comments-plugin/index.ts

@@ -0,0 +1 @@
+export * from './magic-comments-plugin';

package/src/vite/plugins/magic-comments-plugin/magic-comments-plugin.ts

@@ -0,0 +1,63 @@
+import type { Plugin } from 'vite';
+import { ViteBuildContext } from '../../types';
+import { parseMagicComments } from './parse-magic-comments';
+
+/* Mirrors Vite's default chunk file naming. A magic comment only substitutes the [name] token. */
+const CHUNK_FILE_NAME = 'assets/[name]-[hash].js';
+
+/*
+ * Honors `webpackChunkName` magic comments on dynamic imports. Vite splits dynamic
+ * imports into separate chunks, named after the source file; this renames the chunk
+ * to specified `webpackChunkName`. Warns when a name is reused by different modules.
+ */
+export function magicCommentsPlugin(context: ViteBuildContext): Plugin | undefined {
+    if (!context.build.isProduction) {
+        return;
+    }
+
+    const chunkNames = new Map<string, string>();
+    const moduleByName = new Map<string, string>();
+
+    return {
+        name: 'magic-comments',
+        apply: 'build',
+        enforce: 'pre',
+        config: () => ({
+            build: {
+                rolldownOptions: {
+                    output: {
+                        chunkFileNames: (chunk: { facadeModuleId?: string | null }) => {
+                            const name =
+                                chunk.facadeModuleId && chunkNames.get(chunk.facadeModuleId);
+                            return name ? CHUNK_FILE_NAME.replace('[name]', name) : CHUNK_FILE_NAME;
+                        },
+                    },
+                },
+            },
+        }),
+        transform: {
+            filter: { id: { exclude: /node_modules/ }, code: 'webpackChunkName' },
+            async handler(code, id) {
+                const comments = await parseMagicComments(code);
+                const resolved = await Promise.all(
+                    comments.map(({ importPath }) => this.resolve(importPath, id))
+                );
+                comments.forEach(({ chunkName }, index) => {
+                    const module = resolved[index];
+                    if (!module) {
+                        return;
+                    }
+                    const claimedBy = moduleByName.get(chunkName);
+                    if (claimedBy && claimedBy !== module.id) {
+                        this.warn(
+                            `webpackChunkName "${chunkName}" is used by multiple modules; Vite emits a separate chunk for each rather than merging them.`
+                        );
+                    } else {
+                        moduleByName.set(chunkName, module.id);
+                    }
+                    chunkNames.set(module.id, chunkName);
+                });
+            },
+        },
+    };
+}

package/src/vite/plugins/magic-comments-plugin/parse-magic-comments.ts

@@ -0,0 +1,39 @@
+import { init, parse } from 'es-module-lexer';
+
+export interface MagicComment {
+    chunkName: string;
+    importPath: string;
+}
+
+const CHUNK_NAME_REGEXP = /webpackChunkName:\s*["']([^"']+)["']/;
+
+/*
+ * Extracts the chunk name from `webpackChunkName` magic comments on dynamic imports,
+ * such as `import( <comment> './foo')` with a `webpackChunkName: "x"` comment. Only
+ * target imports with a static string path.
+ */
+export async function parseMagicComments(code: string): Promise<MagicComment[]> {
+    await init;
+    const [imports] = parse(code);
+
+    const result: MagicComment[] = [];
+    for (const imp of imports) {
+        /*
+         * es-module-lexer positions on `import( <comment> './foo')`:
+         *   (d: openParenIndex): the `(`, or -1 when the import is static
+         *   (s: importPathStart): the opening quote of './foo'
+         *   (n: importPath): ./foo, or undefined when not a string literal
+         */
+        const { d: openParenIndex, n: importPath, s: importPathStart } = imp;
+        if (openParenIndex < 0 || importPath === undefined) {
+            continue;
+        }
+        // commentRegion (between the `(` and the path) holds the magic comment
+        const commentRegion = code.slice(openParenIndex + 1, importPathStart);
+        const match = CHUNK_NAME_REGEXP.exec(commentRegion);
+        if (match) {
+            result.push({ chunkName: match[1], importPath });
+        }
+    }
+    return result;
+}

package/src/vite/plugins/metadata-plugin.ts

@@ -2,7 +2,7 @@ import fs from 'fs';
 import path from 'path';
 import type { Plugin } from 'vite';
 import { BuildContext, generateMetadata } from '../../core';
-import { getCssFileNames } from './utils/get-css-file-names';
+import { getCssFileNames } from './utils';
 
 export function metadataPlugin(context: BuildContext): Plugin | undefined {
     if (!context.package.isWebComponent) {

package/src/vite/plugins/moment-locales-plugin.ts

@@ -0,0 +1,41 @@
+import type { Plugin } from 'vite';
+import { BuildContext, MOMENT_LOCALES } from '../../core';
+
+export const VIRTUAL_MOMENT = '\0VIRTUAL_MOMENT';
+
+const UMD_LOCALE = /^moment\/locale\/(.+)$/;
+
+/*
+ * Statically bundle the supported moment locales for parity with webpack's
+ * MomentLocalesPlugin. We need this because moment loads locales via a dynamic
+ * require that, with Rolldown, never loads.
+ *
+ * Resolve everything through moment/dist (the ESM build) else Rolldown creates
+ * a separate UMD instance from what the app uses.
+ */
+export function momentLocalesPlugin(_context: BuildContext): Plugin {
+    return {
+        name: 'moment-locales',
+        enforce: 'pre',
+        resolveId(source, importer, options) {
+            if (source === 'moment') {
+                return VIRTUAL_MOMENT;
+            }
+            // Redirect explicit UMD locale imports to the ESM build so they share that instance.
+            const locale = UMD_LOCALE.exec(source)?.[1];
+            if (locale) {
+                return this.resolve(`moment/dist/locale/${locale}`, importer, options);
+            }
+        },
+        load(id) {
+            if (id === VIRTUAL_MOMENT) {
+                return [
+                    ...MOMENT_LOCALES.map(locale => `import 'moment/dist/locale/${locale}';`),
+                    `import moment from 'moment/dist/moment.js';`,
+                    `export * from 'moment/dist/moment.js';`,
+                    `export default moment;`,
+                ].join('\n');
+            }
+        },
+    };
+}

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

@@ -0,0 +1,29 @@
+import { assembleIife, Expose, ModuleFactory } from '../assemble-iife';
+
+describe(assembleIife.name, () => {
+    let modules: ModuleFactory[];
+    let exposes: Expose[];
+
+    beforeEach(() => {
+        modules = [{ id: 'react', code: 'react code' }];
+        exposes = [{ variable: 'globalReact', dependency: 'react' }];
+    });
+
+    const subject = () => assembleIife(modules, exposes);
+
+    test('keys each module factory by id', () => {
+        expect(subject()).toContain(`'react': function(module, exports, require) {`);
+    });
+
+    test('includes the module code', () => {
+        expect(subject()).toContain('react code');
+    });
+
+    test('emits an expose call for each dependency', () => {
+        expect(subject()).toContain(`expose('globalReact', 'react');`);
+    });
+
+    test('wraps output in the shared storage IIFE', () => {
+        expect(subject()).toContain(`Symbol.for('SERVICETITAN_EXPOSE_LOADER_STORAGE')`);
+    });
+});

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

@@ -0,0 +1,113 @@
+import { assertNoDynamicCss } from '../assert-no-dynamic-css';
+
+describe(assertNoDynamicCss.name, () => {
+    const withCss = (...css: string[]) => ({ viteMetadata: { importedCss: new Set(css) } });
+
+    let bundle: Record<string, any>;
+
+    beforeEach(() => {
+        bundle = {
+            'react.cjs.js': {
+                type: 'chunk',
+                isEntry: true,
+                name: 'react',
+                imports: [],
+                dynamicImports: [],
+            },
+        };
+    });
+
+    const subject = () => assertNoDynamicCss(bundle);
+
+    function itDoesNotThrow() {
+        test('does not throw', () => {
+            expect(() => subject()).not.toThrow();
+        });
+    }
+
+    itDoesNotThrow();
+
+    describe('when all entry chunks include the CSS they reach', () => {
+        beforeEach(() => {
+            bundle = {
+                'react.cjs.js': {
+                    type: 'chunk',
+                    isEntry: true,
+                    name: 'react',
+                    imports: [],
+                    dynamicImports: [],
+                    ...withCss('react.bundle.css'),
+                },
+                'react.bundle.css': { type: 'asset' },
+            };
+        });
+
+        itDoesNotThrow();
+    });
+
+    describe('when an entry chunk reaches excluded CSS', () => {
+        beforeEach(() => {
+            bundle = {
+                'react.cjs.js': {
+                    type: 'chunk',
+                    isEntry: true,
+                    name: 'react',
+                    imports: [],
+                    dynamicImports: ['_lazy.js'],
+                    ...withCss('react.bundle.css'),
+                },
+                'react.bundle.css': { type: 'asset' },
+                '_lazy.js': {
+                    type: 'chunk',
+                    isEntry: false,
+                    imports: [],
+                    dynamicImports: [],
+                    ...withCss('lazy.bundle.css'),
+                },
+                'lazy.bundle.css': { type: 'asset' },
+            };
+        });
+
+        test('throws naming the offending chunk and its excluded CSS', () => {
+            expect(() => subject()).toThrow(
+                'Shared dependency chunk "react" pulls in CSS through a dynamic import ' +
+                    '(lazy.bundle.css). Shared dependencies only include statically imported ' +
+                    'CSS. Dynamically imported CSS will not load on the host.'
+            );
+        });
+    });
+
+    describe('when an entry chunk reaches excluded CSS through nested imports', () => {
+        beforeEach(() => {
+            bundle = {
+                'react.cjs.js': {
+                    type: 'chunk',
+                    isEntry: true,
+                    name: 'react',
+                    imports: ['_inner.js'],
+                    dynamicImports: [],
+                    ...withCss(),
+                },
+                '_inner.js': {
+                    type: 'chunk',
+                    isEntry: false,
+                    imports: [],
+                    dynamicImports: ['_lazy.js'],
+                    ...withCss(),
+                },
+                '_lazy.js': {
+                    type: 'chunk',
+                    isEntry: false,
+                    imports: [],
+                    dynamicImports: [],
+                    ...withCss('lazy.bundle.css'),
+                },
+                'lazy.bundle.css': { type: 'asset' },
+            };
+        });
+
+        test('traces the offending chunk through the import graph', () => {
+            expect(() => subject()).toThrow(/react/);
+        });
+    });
+});

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

@@ -0,0 +1,23 @@
+import { flatten } from '../flatten';
+
+describe(flatten.name, () => {
+    let name: string;
+
+    beforeEach(() => {
+        name = '@scope/lib/foo';
+    });
+
+    const subject = () => flatten(name);
+
+    test('replaces the slash with a dash', () => {
+        expect(subject()).toBe(name.replace(/\//g, '-'));
+    });
+
+    describe('when the name has no slash', () => {
+        beforeEach(() => (name = 'react'));
+
+        test('returns the name unchanged', () => {
+            expect(subject()).toBe(name);
+        });
+    });
+});