@servicetitan/startup 36.3.1 → 37.0.0

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

@@ -0,0 +1,461 @@
+import path from 'path';
+import { bundleConstants, generateExposedDependenciesMetadata } from '../../../../core';
+import {
+    sharedDependenciesPlugin,
+    type SharedDependenciesPluginOptions,
+} from '../shared-dependencies-plugin';
+
+jest.mock('../../../../core', () => ({
+    ...jest.requireActual('../../../../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,
+                    imports: [],
+                    dynamicImports: [],
+                },
+                ...Object.fromEntries(
+                    Object.keys(mockDependencies).map(dependency => [
+                        entryFileName(dependency),
+                        {
+                            type: 'chunk',
+                            isEntry: true,
+                            code: `${dependency} code`,
+                            imports: [],
+                            dynamicImports: [],
+                        },
+                    ])
+                ),
+                '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: '',
+                    imports: [],
+                    dynamicImports: [],
+                };
+            });
+
+            test('removes CSS entry chunks from bundle', () => {
+                subject();
+
+                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', () => {
+        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/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';