@servicetitan/startup 36.3.1 → 37.0.0

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

@@ -0,0 +1,62 @@
+import type { ViteBuildContext } from '../../types';
+import { istanbulPlugin } from '../istanbul-plugin';
+import { importEsm } from '../utils';
+
+jest.mock('../utils/import-esm');
+
+describe(istanbulPlugin.name, () => {
+    const mockIstanbul = jest.fn(() => ({ name: 'vite-plugin-istanbul' }));
+    let context: ViteBuildContext;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        jest.mocked(importEsm).mockResolvedValue({ default: mockIstanbul });
+        context = { options: {} } as ViteBuildContext;
+    });
+
+    const subject = () => istanbulPlugin(context);
+
+    test('returns undefined', () => {
+        expect(subject()).toBeUndefined();
+    });
+
+    describe('when code coverage is enabled', () => {
+        beforeEach(() => {
+            context.options.codeCoverage = true;
+        });
+
+        test('loads vite-plugin-istanbul', async () => {
+            await subject();
+
+            expect(importEsm).toHaveBeenCalledWith('vite-plugin-istanbul');
+        });
+
+        test('returns the istanbul plugin', async () => {
+            expect(await subject()).toEqual({ name: 'vite-plugin-istanbul' });
+        });
+
+        test('instruments production builds', async () => {
+            await subject();
+
+            expect(mockIstanbul).toHaveBeenCalledWith(
+                expect.objectContaining({ forceBuildInstrument: true })
+            );
+        });
+
+        test('instruments without requiring an env flag', async () => {
+            await subject();
+
+            expect(mockIstanbul).toHaveBeenCalledWith(
+                expect.objectContaining({ requireEnv: false })
+            );
+        });
+
+        test('excludes node_modules and yalc', async () => {
+            await subject();
+
+            expect(mockIstanbul).toHaveBeenCalledWith(
+                expect.objectContaining({ exclude: ['**/node_modules/**', '**/.yalc/**'] })
+            );
+        });
+    });
+});

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

@@ -0,0 +1,163 @@
+import { fs, vol } from 'memfs';
+import type { OutputBundle } from 'rolldown';
+import { type BuildContext, generateMetadata } from '../../../core';
+import { metadataPlugin } from '../metadata-plugin';
+
+jest.mock('fs', () => fs);
+jest.mock('../../../core', () => ({
+    generateMetadata: jest.fn(),
+}));
+
+describe(metadataPlugin.name, () => {
+    let context: BuildContext;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        vol.fromJSON({});
+        context = {
+            package: { isWebComponent: true },
+        } as BuildContext;
+    });
+
+    afterEach(() => vol.reset());
+
+    const subject = () => metadataPlugin(context);
+
+    describe('when package is not a web component', () => {
+        beforeEach(() => (context.package.isWebComponent = false));
+
+        test('returns undefined', () => {
+            expect(subject()).toBeUndefined();
+        });
+    });
+
+    test('returns plugin with correct name', () => {
+        expect(subject()!.name).toBe('metadata');
+    });
+
+    const defaultAddress = { port: 3000 };
+
+    const setupServer = ({
+        outDir,
+        address = () => defaultAddress,
+    }: {
+        outDir: string;
+        address?: () => unknown;
+    }) => {
+        const plugin = subject()!;
+        (plugin.configResolved as Function).call(plugin, {
+            build: { outDir },
+        });
+
+        let listener!: Function;
+        const server: any = {
+            httpServer: {
+                once: (_event: string, cb: Function) => (listener = cb),
+                address,
+            },
+        };
+        (plugin.configureServer as Function).call(plugin, server);
+        listener();
+    };
+
+    describe('configResolved', () => {
+        const outDir = '/custom-output';
+
+        beforeEach(() => setupServer({ outDir }));
+
+        test('captures outDir for use by configureServer', () => {
+            expect(fs.existsSync(`${outDir}/entrypoints.json`)).toBe(true);
+        });
+    });
+
+    describe('configureServer', () => {
+        const outDir = '/output';
+
+        test('writes entrypoints.json', () => {
+            setupServer({ outDir });
+
+            const written = JSON.parse(
+                fs.readFileSync(`${outDir}/entrypoints.json`, 'utf8') as string
+            );
+            expect(written).toEqual({
+                module: true,
+                port: defaultAddress.port,
+                css: [],
+                js: ['@vite/client', '@id/__x00__VIRTUAL./index'],
+            });
+        });
+
+        test('calls generateMetadata', () => {
+            setupServer({ outDir });
+
+            expect(generateMetadata).toHaveBeenCalledWith(context);
+        });
+
+        describe('when address is a string', () => {
+            beforeEach(() => setupServer({ outDir, address: () => 'pipe-path' }));
+
+            test('does not write entrypoints', () => {
+                expect(fs.existsSync(`${outDir}/entrypoints.json`)).toBe(false);
+            });
+
+            test('does not generate metadata', () => {
+                expect(generateMetadata).not.toHaveBeenCalled();
+            });
+        });
+    });
+
+    describe('writeBundle', () => {
+        const bundle = {
+            'main.js': { type: 'chunk', isEntry: true, fileName: 'assets/main.js' },
+            'vendor.js': { type: 'chunk', isEntry: false, fileName: 'assets/vendor.js' },
+            'style.css': { type: 'asset', fileName: 'assets/style.css' },
+        } as unknown as OutputBundle;
+
+        let options: { dir?: string };
+
+        beforeEach(() => {
+            options = { dir: '/build' };
+            fs.mkdirSync(options.dir!, { recursive: true });
+        });
+
+        const subject = () => {
+            const plugin = metadataPlugin(context)!;
+            return (plugin.writeBundle as Function).call(plugin, options, bundle);
+        };
+
+        test('writes entrypoints.json with entry JS and CSS files', () => {
+            subject();
+
+            const entries = Object.values(bundle);
+            const expectedJs = entries
+                .filter(e => e.type === 'chunk' && e.isEntry)
+                .map(e => e.fileName);
+            const expectedCss = entries
+                .filter(e => e.type === 'asset' && e.fileName.endsWith('.css'))
+                .map(e => e.fileName);
+
+            const written = JSON.parse(
+                fs.readFileSync(`${options.dir}/entrypoints.json`, 'utf8') as string
+            );
+            expect(written).toEqual({
+                module: true,
+                css: expectedCss,
+                js: expectedJs,
+            });
+        });
+
+        test('calls generateMetadata', () => {
+            subject();
+
+            expect(generateMetadata).toHaveBeenCalledWith(context);
+        });
+
+        describe('when options.dir is not set', () => {
+            beforeEach(() => (options.dir = undefined));
+
+            test('throws error', () => {
+                expect(() => subject()).toThrow('web-component build requires output.dir');
+            });
+        });
+    });
+});

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

@@ -0,0 +1,104 @@
+import { BuildContext } from '../../../core';
+import { VIRTUAL_MOMENT, momentLocalesPlugin } from '../moment-locales-plugin';
+
+const LOCALES_TO_KEEP = ['en-au', 'en-ca', 'en-gb'];
+const context = {} as BuildContext;
+
+describe(momentLocalesPlugin.name, () => {
+    const subject = () => momentLocalesPlugin(context);
+
+    test('creates plugin with correct name', () => {
+        expect(subject().name).toBe('moment-locales');
+    });
+
+    test('enforces pre order so it runs before built-in resolvers', () => {
+        expect(subject().enforce).toBe('pre');
+    });
+
+    describe('resolveId', () => {
+        const importer = 'importer.ts';
+        let source: string;
+        let resolve: jest.Mock;
+
+        beforeEach(() => {
+            source = 'react';
+            resolve = jest.fn(() => `resolved: ${source}`);
+        });
+
+        const subject = () => {
+            const plugin = momentLocalesPlugin(context);
+            return (plugin.resolveId as Function).call({ resolve }, source, importer, {});
+        };
+
+        const itReturnsUndefined = () => {
+            test('returns undefined', () => {
+                expect(subject()).toBeUndefined();
+            });
+        };
+
+        itReturnsUndefined();
+
+        describe('when source is "moment"', () => {
+            beforeEach(() => (source = 'moment'));
+
+            test('returns the virtual module', () => {
+                expect(subject()).toBe(VIRTUAL_MOMENT);
+            });
+        });
+
+        describe('when source is a UMD moment path', () => {
+            beforeEach(() => (source = 'moment/locale/fr'));
+
+            test('resolves the ESM moment path', async () => {
+                await subject();
+
+                expect(resolve).toHaveBeenCalledWith(
+                    source.replace('/locale/', '/dist/locale/'),
+                    importer,
+                    {}
+                );
+            });
+
+            test('returns the resolved ESM moment path', async () => {
+                expect(await subject()).toEqual(resolve(source));
+            });
+        });
+
+        describe('when source is already an ESM moment path', () => {
+            beforeEach(() => (source = 'moment/dist/locale/fr'));
+
+            itReturnsUndefined();
+        });
+    });
+
+    describe('load', () => {
+        let id: string;
+
+        beforeEach(() => (id = 'react'));
+
+        const subject = () => {
+            const plugin = momentLocalesPlugin(context);
+            return (plugin.load as Function).call(plugin, id) as string | undefined;
+        };
+
+        test('returns undefined', () => {
+            expect(subject()).toBeUndefined();
+        });
+
+        describe('when id is the virtual module', () => {
+            beforeEach(() => (id = VIRTUAL_MOMENT));
+
+            test.each(LOCALES_TO_KEEP)('imports the ESM %s locale', locale => {
+                expect(subject()).toContain(`import 'moment/dist/locale/${locale}';`);
+            });
+
+            test('imports moment from the ESM build', () => {
+                expect(subject()).toContain("import moment from 'moment/dist/moment.js';");
+            });
+
+            test('re-exports moment as the default', () => {
+                expect(subject()).toContain('export default moment;');
+            });
+        });
+    });
+});

package/src/vite/plugins/__tests__/style-urls-plugin.test.ts

@@ -0,0 +1,77 @@
+import type { BuildContext } from '../../../core';
+import { styleUrlsPlugin } from '../style-urls-plugin';
+
+describe(styleUrlsPlugin.name, () => {
+    const name = 'test-mfe';
+    let context: BuildContext;
+
+    beforeEach(() => {
+        context = {
+            build: { name, isProduction: true },
+            package: { isWebComponent: true },
+        } as BuildContext;
+    });
+
+    const subject = () => styleUrlsPlugin(context);
+
+    const itReturnsUndefined = () => {
+        test('returns undefined', () => {
+            expect(subject()).toBeUndefined();
+        });
+    };
+
+    test('returns plugin with correct name', () => {
+        expect(subject()!.name).toBe('style-urls');
+    });
+
+    describe('when package is not a web component', () => {
+        beforeEach(() => (context.package.isWebComponent = false));
+
+        itReturnsUndefined();
+    });
+
+    describe('when build is not production', () => {
+        beforeEach(() => (context.build.isProduction = false));
+
+        itReturnsUndefined();
+    });
+
+    describe('transformIndexHtml', () => {
+        const styleUrlsHtml = (urls: string[]) =>
+            `<${name} style-urls="${encodeURIComponent(JSON.stringify(urls))}" />`;
+
+        let bundle: Record<string, { type: string; fileName: string }>;
+
+        beforeEach(() => {
+            bundle = {};
+        });
+
+        const subject = () => {
+            const plugin = styleUrlsPlugin(context)!;
+            const transform = (plugin.transformIndexHtml as any).handler;
+            return transform(`<${name} />`, { bundle });
+        };
+
+        test('adds empty style-urls when no CSS assets', () => {
+            expect(subject()).toBe(styleUrlsHtml([]));
+        });
+
+        describe('when bundle has CSS and non-CSS assets', () => {
+            beforeEach(() => {
+                bundle = {
+                    'style.css': { type: 'asset', fileName: 'assets/style-abc123.css' },
+                    'main.js': { type: 'chunk', fileName: 'assets/main-def456.js' },
+                    'other.css': { type: 'asset', fileName: 'assets/other-789.css' },
+                };
+            });
+
+            test('adds style-urls with CSS file names', () => {
+                const cssFileNames = Object.values(bundle)
+                    .filter(b => b.type === 'asset' && b.fileName.endsWith('.css'))
+                    .map(b => b.fileName);
+
+                expect(subject()).toBe(styleUrlsHtml(cssFileNames));
+            });
+        });
+    });
+});

package/src/vite/plugins/__tests__/svgr-plugin.test.ts

@@ -0,0 +1,67 @@
+import svgr from 'vite-plugin-svgr';
+import type { ViteBuildContext } from '../../types';
+import { svgrPlugin } from '../svgr-plugin';
+
+jest.mock('vite-plugin-svgr', () => jest.fn(() => ({ name: 'vite-plugin-svgr' })));
+
+describe(svgrPlugin.name, () => {
+    let context: ViteBuildContext;
+
+    beforeEach(() => {
+        context = {
+            bundlerConfig: { pluginOverrides: {} },
+        } as ViteBuildContext;
+    });
+
+    const subject = () => svgrPlugin(context);
+
+    test('calls svgr with default include patterns', () => {
+        subject();
+
+        expect(svgr).toHaveBeenCalledWith({
+            include: ['**/*.svg?component', '**/@servicetitan/anvil2/**/*.svg'],
+        });
+    });
+
+    describe('when include is overridden', () => {
+        const include = ['**/*.svg'];
+
+        beforeEach(() => {
+            context.bundlerConfig.pluginOverrides.svgr = { include };
+        });
+
+        test('passes include to svgr', () => {
+            subject();
+
+            expect(svgr).toHaveBeenCalledWith(expect.objectContaining({ include }));
+        });
+    });
+
+    describe('when exclude is overridden', () => {
+        const exclude = ['**/icons/**'];
+
+        beforeEach(() => {
+            context.bundlerConfig.pluginOverrides.svgr = { exclude };
+        });
+
+        test('passes exclude to svgr', () => {
+            subject();
+
+            expect(svgr).toHaveBeenCalledWith(expect.objectContaining({ exclude }));
+        });
+    });
+
+    describe('when svgrOptions is overridden', () => {
+        const svgrOptions = { icon: true };
+
+        beforeEach(() => {
+            context.bundlerConfig.pluginOverrides.svgr = { svgrOptions };
+        });
+
+        test('passes svgrOptions to svgr', () => {
+            subject();
+
+            expect(svgr).toHaveBeenCalledWith(expect.objectContaining({ svgrOptions }));
+        });
+    });
+});

package/src/vite/plugins/__tests__/virtual-modules-plugin.test.ts

@@ -0,0 +1,101 @@
+import path from 'path';
+import { virtualModules } from '../../../core';
+import { virtualModulesPlugin } from '../virtual-modules-plugin';
+
+jest.mock('../../../core', () => ({
+    virtualModules: jest.fn(),
+}));
+
+describe(virtualModulesPlugin.name, () => {
+    const VIRTUAL_PREFIX = '\0VIRTUAL';
+    const indexCode = "import App from './app';\nregister(App, 'my-component');";
+    const designSystemCss = '@import "design-system";';
+
+    let context: any;
+    let modules: { index?: string; designSystem?: string };
+
+    beforeEach(() => {
+        context = {
+            build: { isProduction: true },
+            package: { destination: '/dist', isWebComponent: false },
+        };
+        modules = {};
+        jest.mocked(virtualModules).mockReturnValue(modules);
+    });
+
+    const subject = () => virtualModulesPlugin(context);
+
+    test('returns undefined when no virtual modules exist', () => {
+        expect(subject()).toBeUndefined();
+    });
+
+    describe('when index module exists', () => {
+        beforeEach(() => (modules.index = indexCode));
+
+        test('returns plugin with correct name', () => {
+            expect(subject()!.name).toBe('virtual-modules');
+        });
+
+        describe('resolveId', () => {
+            const subject = () => {
+                const plugin = virtualModulesPlugin(context)!;
+                return (source: string, importer?: string) =>
+                    (plugin.resolveId as Function).call(plugin, source, importer);
+            };
+
+            test('resolves known module to virtual id', () => {
+                expect(subject()('./index')).toBe(`${VIRTUAL_PREFIX}./index`);
+            });
+
+            test('returns undefined for unknown module', () => {
+                expect(subject()('./unknown')).toBeUndefined();
+            });
+
+            test('resolves relative import from virtual module to destination', () => {
+                const result = subject()('./app', `${VIRTUAL_PREFIX}./index`);
+
+                expect(result).toBe(path.resolve('/dist', './app.js'));
+            });
+
+            test('returns undefined for relative import from non-virtual module', () => {
+                expect(subject()('./app', '/src/index.ts')).toBeUndefined();
+            });
+        });
+
+        describe('load', () => {
+            const subject = () => {
+                const plugin = virtualModulesPlugin(context)!;
+                return (id: string) => (plugin.load as Function).call(plugin, id);
+            };
+
+            test('returns module code for virtual id', () => {
+                expect(subject()(`${VIRTUAL_PREFIX}./index`)).toBe(indexCode);
+            });
+
+            test('returns undefined for non-virtual id', () => {
+                expect(subject()('./index')).toBeUndefined();
+            });
+        });
+    });
+
+    describe('when design system module exists', () => {
+        beforeEach(() => (modules.designSystem = designSystemCss));
+
+        test('resolves design-system.css to virtual id', () => {
+            const plugin = subject()!;
+            const result = (plugin.resolveId as Function).call(plugin, './design-system.css');
+
+            expect(result).toBe(`${VIRTUAL_PREFIX}./design-system.css`);
+        });
+
+        test('loads design system code', () => {
+            const plugin = subject()!;
+            const result = (plugin.load as Function).call(
+                plugin,
+                `${VIRTUAL_PREFIX}./design-system.css`
+            );
+
+            expect(result).toBe(designSystemCss);
+        });
+    });
+});

package/src/vite/plugins/bundle-stat-plugin.ts

@@ -0,0 +1,24 @@
+import os from 'os';
+import path from 'path';
+import type { Plugin } from 'vite';
+import { analyzer, unstableRolldownAdapter } from 'vite-bundle-analyzer';
+import { bundleReportFileName, bundleReportTitle } from '../../core';
+import { ViteBuildContext } from '../types';
+
+/*
+ * Writes a static bundle-size treemap to the temp directory when --stat is passed, parity with the webpack build.
+ */
+export function bundleStatPlugin(context: ViteBuildContext): Plugin | undefined {
+    if (!context.options.buildStat) {
+        return;
+    }
+
+    return unstableRolldownAdapter(
+        analyzer({
+            analyzerMode: 'static',
+            fileName: () => path.join(os.tmpdir(), bundleReportFileName(context)),
+            reportTitle: bundleReportTitle(context),
+            openAnalyzer: true,
+        })
+    ) as Plugin;
+}

package/src/vite/plugins/chain-source-maps-plugin.ts

@@ -0,0 +1,26 @@
+import fs from 'fs';
+import path from 'path';
+import type { Plugin } from 'rolldown';
+
+/*
+ * Return each compiled `.js` file's external `.js.map` (emitted by SWC) from the
+ * load hook so Rolldown chains it, making source maps resolve to the original
+ * `.ts` instead of stopping at the compiled `.js`.
+ */
+export function chainSourceMapsPlugin(): Plugin {
+    return {
+        name: 'chain-source-maps',
+        load(id) {
+            const mapPath = `${id}.map`;
+            if (id.endsWith('.js') && fs.existsSync(mapPath)) {
+                const map = JSON.parse(fs.readFileSync(mapPath, 'utf8'));
+                const dir = path.dirname(mapPath);
+                // Absolute paths let Rolldown resolve the sources; source maps require `/` separators.
+                map.sources = map.sources.map((source: string) =>
+                    path.resolve(dir, source).replace(/\\/g, '/')
+                );
+                return { code: fs.readFileSync(id, 'utf8'), map };
+            }
+        },
+    };
+}

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 },
+    });
+}