@servicetitan/startup 36.3.1 → 37.0.0

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

@@ -0,0 +1,65 @@
+import fs from 'fs';
+import path from 'path';
+import type { Plugin } from 'vite';
+import { BuildContext, generateMetadata } from '../../core';
+import { getCssFileNames } from './utils';
+
+export function metadataPlugin(context: BuildContext): Plugin | undefined {
+    if (!context.package.isWebComponent) {
+        return;
+    }
+
+    let outDir = '';
+
+    return {
+        name: 'metadata',
+        configResolved(config) {
+            outDir = config.build.outDir;
+        },
+        configureServer(server) {
+            server.httpServer?.once('listening', () => {
+                const address = server.httpServer?.address();
+                if (!address || typeof address === 'string') {
+                    return;
+                }
+
+                const entrypoints = {
+                    module: true,
+                    port: address.port,
+                    css: [],
+                    js: ['@vite/client', '@id/__x00__VIRTUAL./index'],
+                };
+
+                const entrypointsPath = path.join(outDir, 'entrypoints.json');
+                fs.mkdirSync(path.dirname(entrypointsPath), { recursive: true });
+                fs.writeFileSync(entrypointsPath, JSON.stringify(entrypoints, null, 2));
+
+                generateMetadata(context);
+            });
+        },
+        writeBundle(options, bundle) {
+            if (!options.dir) {
+                throw new Error(
+                    'web-component build requires output.dir — output.file is not supported'
+                );
+            }
+
+            const js: string[] = [];
+
+            for (const chunk of Object.values(bundle)) {
+                if (chunk.type === 'chunk' && chunk.isEntry) {
+                    js.push(chunk.fileName);
+                }
+            }
+
+            const css = getCssFileNames(bundle);
+
+            fs.writeFileSync(
+                path.join(options.dir, 'entrypoints.json'),
+                JSON.stringify({ module: true, css, js }, null, 2)
+            );
+
+            generateMetadata(context);
+        },
+    };
+}

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