@servicetitan/startup 36.3.1 → 36.4.0

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

@@ -0,0 +1,427 @@
+import path from 'path';
+import { bundleConstants, generateExposedDependenciesMetadata } from '../../../core';
+import {
+    sharedDependenciesPlugin,
+    type SharedDependenciesPluginOptions,
+} from '../shared-dependencies-plugin';
+
+jest.mock('../../../core', () => ({
+    bundleConstants: {
+        mode: { production: 'production', development: 'development' },
+    },
+    generateExposedDependenciesMetadata: jest.fn(),
+}));
+
+describe(sharedDependenciesPlugin.name, () => {
+    const CSS_VIRTUAL_PREFIX = '\0SHARED_DEPENDENCY_CSS';
+    const mockDependencies: Record<string, string> = {
+        'react': 'globalReact',
+        '@scope/lib': 'globalScopeLib',
+    };
+
+    let options: SharedDependenciesPluginOptions;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        options = {
+            dependencies: mockDependencies,
+        };
+    });
+
+    const subject = () => sharedDependenciesPlugin(options);
+
+    test('returns plugin with correct name', () => {
+        expect(subject().name).toBe('shared-dependencies');
+    });
+
+    test('enforces pre', () => {
+        expect(subject().enforce).toBe('pre');
+    });
+
+    describe('config', () => {
+        let mode: string;
+
+        beforeEach(() => {
+            mode = bundleConstants.mode.development;
+        });
+
+        const subject = () => {
+            const plugin = sharedDependenciesPlugin(options);
+            return (plugin.config as Function).call(plugin, {}, { mode });
+        };
+
+        test('sets base to relative path', () => {
+            expect(subject().base).toBe('./');
+        });
+
+        test('defines process.env.NODE_ENV from mode', () => {
+            expect(subject().define['process.env.NODE_ENV']).toBe(JSON.stringify(mode));
+        });
+
+        test('creates input entry for each dependency', () => {
+            const { input } = subject().build.rolldownOptions;
+
+            const expected: Record<string, string> = {};
+            for (const dependency of Object.keys(options.dependencies)) {
+                expected[dependency.replace('/', '-')] = dependency;
+            }
+            expect(input).toEqual(expected);
+        });
+
+        test('uses CJS format with named exports', () => {
+            expect(subject().build.rolldownOptions.output).toEqual(
+                expect.objectContaining({ format: 'cjs', exports: 'named' })
+            );
+        });
+
+        test('preserves entry signatures', () => {
+            expect(subject().build.rolldownOptions.preserveEntrySignatures).toBe('exports-only');
+        });
+
+        test('disables treeshake', () => {
+            expect(subject().build.rolldownOptions.treeshake).toBe(false);
+        });
+
+        test('configures entry and chunk file names', () => {
+            expect(subject().build.rolldownOptions.output).toEqual(
+                expect.objectContaining({
+                    entryFileNames: '[name].cjs.js',
+                    chunkFileNames: '_[name]-[hash].js',
+                })
+            );
+        });
+
+        describe('with CSS entries', () => {
+            beforeEach(() => {
+                options.css = { 'design-system': ['tokens.css'] };
+            });
+
+            test('adds CSS virtual inputs', () => {
+                const { input } = subject().build.rolldownOptions;
+
+                for (const name of Object.keys(options.css!)) {
+                    expect(input[name]).toBe(CSS_VIRTUAL_PREFIX + name);
+                }
+            });
+        });
+
+        describe('assetFileNames', () => {
+            let assetNames: string[];
+
+            beforeEach(() => {
+                assetNames = ['font.woff2'];
+            });
+
+            const subject = () => {
+                const plugin = sharedDependenciesPlugin(options);
+                const config = (plugin.config as Function).call(plugin, {}, { mode });
+                return config.build.rolldownOptions.output.assetFileNames({ names: assetNames });
+            };
+
+            test('generates name from asset', () => {
+                expect(subject()).toBe('font[extname]');
+            });
+
+            describe('when asset is CSS', () => {
+                beforeEach(() => (assetNames = ['styles.css']));
+
+                test('adds bundle suffix', () => {
+                    expect(subject()).toBe('styles.bundle[extname]');
+                });
+            });
+
+            describe('when asset has scope prefix', () => {
+                beforeEach(() => (assetNames = ['@scope-lib.css']));
+
+                test('strips scope prefix', () => {
+                    expect(subject()).toBe('lib.bundle[extname]');
+                });
+            });
+
+            describe('when production', () => {
+                beforeEach(() => (mode = bundleConstants.mode.production));
+
+                test('includes hash in filename', () => {
+                    expect(subject()).toBe('font.[hash][extname]');
+                });
+
+                describe('when asset is CSS', () => {
+                    beforeEach(() => (assetNames = ['styles.css']));
+
+                    test('includes hash in filename', () => {
+                        expect(subject()).toBe('styles.[hash].bundle[extname]');
+                    });
+                });
+            });
+        });
+    });
+
+    describe('resolveId', () => {
+        const knownDependency = Object.keys(mockDependencies)[0];
+
+        let source: string;
+        let importer: string | undefined;
+
+        beforeEach(() => {
+            source = knownDependency;
+            importer = '/path/to/file.ts';
+        });
+
+        const subject = () => {
+            const plugin = sharedDependenciesPlugin(options);
+            return (plugin.resolveId as Function).call(plugin, source, importer);
+        };
+
+        const itReturnsUndefined = () => {
+            test('returns undefined', () => {
+                expect(subject()).toBeUndefined();
+            });
+        };
+
+        test('marks dependency as external', () => {
+            expect(subject()).toEqual({ id: source, external: true });
+        });
+
+        describe('when source is CSS virtual module', () => {
+            beforeEach(() => (source = CSS_VIRTUAL_PREFIX + 'design-system'));
+
+            test('returns source', () => {
+                expect(subject()).toBe(source);
+            });
+        });
+
+        describe('when source is an unknown dependency', () => {
+            beforeEach(() => (source = 'unknown'));
+
+            itReturnsUndefined();
+        });
+
+        describe('when importer is not present', () => {
+            beforeEach(() => (importer = undefined));
+
+            itReturnsUndefined();
+        });
+    });
+
+    describe('load', () => {
+        const cssName = 'design-system';
+        const cssImports = ['tokens.css', 'fonts.css'];
+
+        let id: string;
+
+        beforeEach(() => {
+            id = CSS_VIRTUAL_PREFIX + cssName;
+            options.css = { [cssName]: cssImports };
+        });
+
+        const subject = () => {
+            const plugin = sharedDependenciesPlugin(options);
+            return (plugin.load as Function).call(plugin, id);
+        };
+
+        const itReturnsUndefined = () => {
+            test('returns undefined', () => {
+                expect(subject()).toBeUndefined();
+            });
+        };
+
+        test('returns import statements', () => {
+            expect(subject()).toBe(cssImports.map(p => `import '${p}';`).join('\n'));
+        });
+
+        describe('when id is not a CSS virtual module', () => {
+            beforeEach(() => (id = ''));
+
+            itReturnsUndefined();
+        });
+
+        describe('with unknown CSS module', () => {
+            beforeEach(() => (id = CSS_VIRTUAL_PREFIX + 'unknown'));
+
+            itReturnsUndefined();
+        });
+    });
+
+    describe('generateBundle', () => {
+        const sharedChunk = { fileName: '_helper-abc.js', code: 'helper code' };
+
+        let bundle: Record<string, any>;
+        let emitFile: jest.Mock;
+        let mode: string;
+
+        const entryFileName = (dependency: string) => `${dependency.replace('/', '-')}.cjs.js`;
+
+        beforeEach(() => {
+            mode = bundleConstants.mode.development;
+            emitFile = jest.fn();
+            bundle = {
+                [sharedChunk.fileName]: {
+                    type: 'chunk',
+                    isEntry: false,
+                    code: sharedChunk.code,
+                },
+                ...Object.fromEntries(
+                    Object.keys(mockDependencies).map(dependency => [
+                        entryFileName(dependency),
+                        { type: 'chunk', isEntry: true, code: `${dependency} code` },
+                    ])
+                ),
+                'styles.bundle.css': { type: 'asset' },
+            };
+        });
+
+        const subject = () => {
+            const plugin = sharedDependenciesPlugin(options);
+            (plugin.config as Function).call(plugin, {}, { mode });
+            (plugin.generateBundle as Function).call({ emitFile }, {}, bundle);
+        };
+
+        const emittedBundleCode = () => {
+            const call = emitFile.mock.calls.find((c: any) =>
+                c[0].fileName?.endsWith('.bundle.js')
+            );
+            return call[0].source as string;
+        };
+
+        const expectBundleContains = (...fragments: string[]) => {
+            const code = emittedBundleCode();
+            for (const fragment of fragments) {
+                expect(code).toContain(fragment);
+            }
+        };
+
+        test('emits shared bundle as asset', () => {
+            subject();
+
+            expect(emitFile).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    type: 'asset',
+                    fileName: 'shared.bundle.js',
+                })
+            );
+        });
+
+        test('emits entrypoints.json with CSS and JS files', () => {
+            subject();
+
+            expect(emitFile).toHaveBeenCalledWith({
+                type: 'asset',
+                fileName: 'entrypoints.json',
+                source: JSON.stringify(
+                    { css: ['styles.bundle.css'], js: ['shared.bundle.js'] },
+                    null,
+                    2
+                ),
+            });
+        });
+
+        test('includes dependency entry code in emitted bundle', () => {
+            subject();
+
+            expectBundleContains(
+                ...Object.keys(mockDependencies).flatMap(dependency => [
+                    `'${dependency}'`,
+                    `${dependency} code`,
+                ])
+            );
+        });
+
+        test('includes shared chunk code in emitted bundle', () => {
+            subject();
+
+            expectBundleContains(`'./${sharedChunk.fileName}'`, sharedChunk.code);
+        });
+
+        test('generates expose call for each dependency', () => {
+            subject();
+
+            expectBundleContains(
+                ...Object.entries(mockDependencies).map(
+                    ([dependency, variable]) => `expose('${variable}', '${dependency}')`
+                )
+            );
+        });
+
+        test('removes shared chunks from bundle', () => {
+            subject();
+
+            expect(bundle[sharedChunk.fileName]).toBeUndefined();
+        });
+
+        test('removes dependency entry chunks from bundle', () => {
+            subject();
+
+            for (const dependency of Object.keys(mockDependencies)) {
+                expect(bundle[entryFileName(dependency)]).toBeUndefined();
+            }
+        });
+
+        describe('when production', () => {
+            beforeEach(() => (mode = bundleConstants.mode.production));
+
+            test('includes hash in bundle filename', () => {
+                subject();
+
+                expect(emitFile.mock.calls[0][0].fileName).toMatch(
+                    /^shared\.[a-f0-9]+\.bundle\.js$/
+                );
+            });
+        });
+
+        describe('when dependency entry chunk is missing', () => {
+            const missingDependency = Object.keys(mockDependencies)[0];
+
+            beforeEach(() => delete bundle[entryFileName(missingDependency)]);
+
+            test('throws error', () => {
+                expect(() => subject()).toThrow(
+                    new RegExp(`Expected entry chunk for ${missingDependency}`)
+                );
+            });
+        });
+
+        describe('with CSS entries', () => {
+            beforeEach(() => {
+                options.css = { 'design-system': ['tokens.css'] };
+                bundle['design-system.cjs.js'] = { type: 'chunk', isEntry: true, code: '' };
+            });
+
+            test('removes CSS entry chunks from bundle', () => {
+                subject();
+
+                expect(bundle['design-system.cjs.js']).toBeUndefined();
+            });
+        });
+    });
+
+    describe('writeBundle', () => {
+        let outputDir: string;
+
+        beforeEach(() => (outputDir = '/output/dist'));
+
+        const subject = () => {
+            const plugin = sharedDependenciesPlugin(options);
+            return (plugin.writeBundle as Function).call(plugin, { dir: outputDir });
+        };
+
+        test('is undefined', () => {
+            expect(sharedDependenciesPlugin(options).writeBundle).toBeUndefined();
+        });
+
+        describe('when metadataDir is set', () => {
+            beforeEach(() => (options.metadataDir = '/output/metadata'));
+
+            test('calls generateExposedDependenciesMetadata with entrypoints.json resolver', () => {
+                subject();
+
+                expect(generateExposedDependenciesMetadata).toHaveBeenCalledWith(
+                    options.metadataDir,
+                    expect.any(Function)
+                );
+                const pathResolver = jest.mocked(generateExposedDependenciesMetadata).mock
+                    .calls[0][1];
+                expect(pathResolver()).toBe(path.resolve(outputDir, 'entrypoints.json'));
+            });
+        });
+    });
+});

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