@servicetitan/startup 34.2.0 → 34.3.0-beta.0

package/src/vite/__tests__/merge-config.test.ts

@@ -0,0 +1,173 @@
+jest.mock('vite', () => ({
+    mergeConfig: (a: any, b: any) => {
+        const result = { ...a };
+        for (const key of Object.keys(b)) {
+            if (Array.isArray(a[key]) && Array.isArray(b[key])) {
+                result[key] = [...a[key], ...b[key]];
+            } else if (
+                typeof a[key] === 'object' &&
+                a[key] !== null &&
+                typeof b[key] === 'object' &&
+                b[key] !== null &&
+                !Array.isArray(a[key])
+            ) {
+                result[key] = { ...a[key], ...b[key] };
+            } else {
+                result[key] = b[key];
+            }
+        }
+        return result;
+    },
+}));
+
+const mockHtmlPlugin = jest.fn(() => ({ name: 'html-template' }));
+const mockSvgrPlugin = jest.fn(() => ({ name: 'svgr' }));
+const mockExternalsPlugin = jest.fn(() => []);
+const mockVirtualModulesPlugin = jest.fn(() => []);
+const mockCssInjectorPlugin = jest.fn(() => []);
+const mockStyleUrlsPlugin = jest.fn(() => []);
+const mockMetadataPlugin = jest.fn(() => ({ name: 'metadata' }));
+const mockDevServerRoutingPlugin = jest.fn(() => ({ name: 'dev-server-routing' }));
+const mockIgnoreModulesPlugin = jest.fn(() => ({ name: 'ignore-modules' }));
+
+jest.mock('../plugins', () => ({
+    htmlPlugin: mockHtmlPlugin,
+    svgrPlugin: mockSvgrPlugin,
+    externalsPlugin: mockExternalsPlugin,
+    virtualModulesPlugin: mockVirtualModulesPlugin,
+    cssInjectorPlugin: mockCssInjectorPlugin,
+    styleUrlsPlugin: mockStyleUrlsPlugin,
+    metadataPlugin: mockMetadataPlugin,
+    devServerRoutingPlugin: mockDevServerRoutingPlugin,
+    ignoreModulesPlugin: mockIgnoreModulesPlugin,
+}));
+
+import type { BuildContext } from '../../core/types';
+import { mergeViteConfigs } from '../merge-config';
+
+const stubContext = {} as BuildContext;
+
+describe('mergeViteConfigs', () => {
+    const baseConfig = {
+        server: { port: 8080 },
+        build: { sourcemap: true, minify: true },
+        css: { modules: { localsConvention: 'camelCaseOnly' as const } },
+    };
+
+    beforeEach(() => jest.clearAllMocks());
+
+    test('returns base config when no overrides', () => {
+        const result = mergeViteConfigs(baseConfig, {}, {}, stubContext);
+        expect(result.server?.port).toBe(8080);
+        expect(result.build?.sourcemap).toBe(true);
+    });
+
+    test('package.json config overrides base', () => {
+        const result = mergeViteConfigs(
+            baseConfig,
+            { config: { server: { port: 9000 } } },
+            {},
+            stubContext
+        );
+        expect(result.server?.port).toBe(9000);
+    });
+
+    test('config file overrides package.json', () => {
+        const result = mergeViteConfigs(
+            baseConfig,
+            { config: { server: { port: 9000 } } },
+            { config: { server: { port: 3000 } } },
+            stubContext
+        );
+        expect(result.server?.port).toBe(3000);
+    });
+
+    test('deep merges nested objects', () => {
+        const result = mergeViteConfigs(
+            baseConfig,
+            { config: { build: { sourcemap: false } } },
+            {},
+            stubContext
+        );
+        expect(result.build?.sourcemap).toBe(false);
+        expect(result.build?.minify).toBe(true);
+    });
+
+    test('concatenates user plugins with built-in plugins', () => {
+        const userPlugin = { name: 'user-plugin' };
+        const result = mergeViteConfigs(
+            baseConfig,
+            {},
+            { config: { plugins: [userPlugin as any] } },
+            stubContext
+        );
+        expect(result.plugins).toContain(userPlugin);
+    });
+
+    test('filters plugins by omitDefault', () => {
+        const result = mergeViteConfigs(
+            baseConfig,
+            { omitDefault: ['plugins.svgr'] },
+            {},
+            stubContext
+        );
+        const pluginNames = (result.plugins as any[])?.map((p: any) => p.name) ?? [];
+        expect(pluginNames).not.toContain('svgr');
+    });
+
+    test('omits base config keys', () => {
+        const result = mergeViteConfigs(
+            baseConfig,
+            { omitDefault: ['css.modules'] },
+            {},
+            stubContext
+        );
+        expect(result.css?.modules).toBeUndefined();
+    });
+
+    test('applies minify.js shortcut', () => {
+        const result = mergeViteConfigs(baseConfig, { minify: { js: false } }, {}, stubContext);
+        expect(result.build?.minify).toBe(false);
+    });
+
+    test('applies minify.css shortcut', () => {
+        const result = mergeViteConfigs(baseConfig, { minify: { css: false } }, {}, stubContext);
+        expect(result.build?.cssMinify).toBe(false);
+    });
+
+    test('passes merged pluginOverrides to plugin factories', () => {
+        mergeViteConfigs(
+            baseConfig,
+            { pluginOverrides: { htmlTemplate: { title: 'From PkgJson' } } },
+            { pluginOverrides: { htmlTemplate: { title: 'From File', favicon: './icon.ico' } } },
+            stubContext
+        );
+        expect(mockHtmlPlugin).toHaveBeenCalledWith(
+            stubContext,
+            expect.objectContaining({ title: 'From File', favicon: './icon.ico' })
+        );
+    });
+
+    test('unions omitDefault from both sources', () => {
+        const result = mergeViteConfigs(
+            baseConfig,
+            { omitDefault: ['plugins.svgr'] },
+            { omitDefault: ['plugins.htmlTemplate'] },
+            stubContext
+        );
+        const pluginNames = (result.plugins as any[])?.map((p: any) => p.name) ?? [];
+        expect(pluginNames).not.toContain('svgr');
+        expect(pluginNames).not.toContain('html-template');
+    });
+
+    test('merges minify from both sources', () => {
+        const result = mergeViteConfigs(
+            baseConfig,
+            { minify: { js: false } },
+            { minify: { css: false } },
+            stubContext
+        );
+        expect(result.build?.minify).toBe(false);
+        expect(result.build?.cssMinify).toBe(false);
+    });
+});

package/src/vite/base-config.ts

@@ -0,0 +1,70 @@
+import type { InlineConfig } from 'vite';
+import {
+    BuildContext,
+    defineExposedDependencies,
+    defineExposedInstanceDependencies,
+    defineWebComponentName,
+    getBundleType,
+    getOutputPath,
+} from '../core';
+
+function importMetaRemap(
+    ...definitions: (Record<string, string> | undefined)[]
+): Record<string, string> {
+    const result: Record<string, string> = {};
+
+    definitions
+        .filter(definition => definition !== undefined)
+        .forEach(definition =>
+            Object.keys(definition).forEach(item => {
+                result[`import.meta.env.${item}`] = definition[item];
+            })
+        );
+
+    return result;
+}
+
+export function createBaseConfig(context: BuildContext): InlineConfig {
+    const { isProduction } = context.build;
+    const { isWebComponent } = context.package;
+
+    return {
+        cacheDir: `node_modules/.vite/${getBundleType(context) ?? 'host'}`,
+        server: {
+            // TODO: need default port for MFE?
+            port: isWebComponent ? 8888 : 8080,
+            warmup: {
+                /*
+                 * TODO: dist duplication/use destination
+                 * Pre-warms compiled files to avoid multiple page reloads at dev session start
+                 */
+                clientFiles: ['dist/**/*.js'],
+            },
+        },
+        mode: isProduction ? 'production' : 'development',
+        configFile: false,
+        oxc: { legalComments: 'none' },
+        base: './',
+        build: {
+            outDir: getOutputPath(context),
+            // Preserves shared deps in dist/bundle/shared/ when host rebuilds into dist/bundle/
+            emptyOutDir: false,
+            sourcemap: true,
+            commonjsOptions: {
+                include: [
+                    // TODO: move to config override
+                    /startup-utils/,
+                    /\/node_modules\//,
+                ],
+            },
+        },
+        define: importMetaRemap(
+            defineExposedDependencies(context),
+            defineExposedInstanceDependencies(context),
+            defineWebComponentName(context)
+        ),
+        optimizeDeps: {
+            include: ['@servicetitan/startup-utils'],
+        },
+    };
+}

package/src/vite/build-shared-deps.ts

@@ -0,0 +1,320 @@
+import crypto from 'crypto';
+import fs from 'fs';
+import path from 'path';
+import { build, Plugin } from 'vite';
+import { createBuildContext, CreateBuildContextInput, getOutputPath } from '../core';
+import { createViteConfig } from './create-vite-config';
+
+function getShortName(dep: string) {
+    return dep.split('/').pop()!;
+}
+
+function contentHash(content: string) {
+    return crypto.createHash('md5').update(content).digest('hex').slice(0, 20);
+}
+
+function bundleName(name: string, ext: string, content?: string) {
+    return content ? `${name}.${contentHash(content)}.bundle${ext}` : `${name}.bundle${ext}`;
+}
+
+interface SharedDepsPluginOptions {
+    dependencies: Record<string, string>;
+    css?: Record<string, string[]>;
+    metadataDir?: string;
+}
+
+const CSS_VIRTUAL_PREFIX = '\0shared-deps-css:';
+
+function sharedDepsPlugin({ dependencies, css, metadataDir }: SharedDepsPluginOptions): Plugin {
+    const depNames = Object.keys(dependencies);
+    const depSet = new Set(depNames);
+    const cssEntries = css ?? {};
+    const depShortNames = new Set(depNames.map(getShortName));
+    const cssInputNames = new Map<string, string>();
+    for (const name of Object.keys(cssEntries)) {
+        cssInputNames.set(depShortNames.has(name) ? `${name}-css` : name, name);
+    }
+    let isProduction = false;
+
+    return {
+        name: 'shared-deps',
+        enforce: 'pre',
+
+        config(_, env) {
+            isProduction = env.mode === 'production';
+
+            const input: Record<string, string> = {};
+            for (const dep of depNames) {
+                input[getShortName(dep)] = dep;
+            }
+            for (const [inputName, originalName] of cssInputNames) {
+                input[inputName] = CSS_VIRTUAL_PREFIX + originalName;
+            }
+
+            return {
+                // Relative base so CSS font URLs resolve from the CSS file's directory, not site root
+                base: './',
+                // Must match host build mode — mismatch causes react-dom/client usingClientEntryPoint errors
+                define: {
+                    'process.env.NODE_ENV': JSON.stringify(env.mode),
+                },
+                build: {
+                    commonjsOptions: {
+                        include: [/\/node_modules\//],
+                        transformMixedEsModules: true,
+                    },
+                    rollupOptions: {
+                        // Vite defaults to false which strips all CJS exports from entry chunks
+                        preserveEntrySignatures: 'exports-only',
+                        input,
+                        output: {
+                            /*
+                             * CJS format + named exports: the factory system wraps each entry's
+                             * code in function(module, exports, require) { ... }
+                             */
+                            format: 'cjs',
+                            exports: 'named',
+                            entryFileNames: '[name].cjs.js',
+                            chunkFileNames: '_[name]-[hash].js',
+                            assetFileNames: assetInfo => {
+                                const ext = assetInfo.names?.[0]?.split('.').pop() ?? '';
+                                if (ext === 'css') {
+                                    return isProduction
+                                        ? '[name].[hash].bundle[extname]'
+                                        : '[name].bundle[extname]';
+                                }
+                                return isProduction ? '[name].[hash][extname]' : '[name][extname]';
+                            },
+                        },
+                        // Disabled: we don't know which exports MFEs will use at runtime
+                        treeshake: false,
+                    },
+                },
+            };
+        },
+
+        resolveId(source: string, importer: string | undefined) {
+            if (source.startsWith(CSS_VIRTUAL_PREFIX)) {
+                return source;
+            }
+            if (!importer) {
+                return;
+            }
+            if (depSet.has(source)) {
+                return { id: source, external: true };
+            }
+            if (!source.startsWith('.') && !source.startsWith('/')) {
+                try {
+                    return require.resolve(source);
+                } catch {
+                    return undefined;
+                }
+            }
+        },
+
+        load(id: string) {
+            if (!id.startsWith(CSS_VIRTUAL_PREFIX)) {
+                return;
+            }
+            const name = id.slice(CSS_VIRTUAL_PREFIX.length);
+            const imports = cssEntries[name];
+            if (!imports) {
+                return;
+            }
+            return imports.map(p => `import '${p}';`).join('\n');
+        },
+
+        generateBundle(_options, bundle) {
+            const factories: string[] = [];
+            const exposes: string[] = [];
+
+            for (const [fileName, chunk] of Object.entries(bundle)) {
+                if (chunk.type !== 'chunk') {
+                    continue;
+                }
+                if (!chunk.isEntry) {
+                    factories.push(
+                        `'./${fileName}': function(module, exports, require) {\n${chunk.code}\n}`
+                    );
+                    delete bundle[fileName];
+                }
+            }
+
+            for (const [dep, variable] of Object.entries(dependencies)) {
+                const entryFileName = `${getShortName(dep)}.cjs.js`;
+                const chunk = bundle[entryFileName];
+                if (chunk?.type !== 'chunk') {
+                    continue;
+                }
+                factories.push(`'${dep}': function(module, exports, require) {\n${chunk.code}\n}`);
+                exposes.push(`expose('${variable}', '${dep}');`);
+                delete bundle[entryFileName];
+            }
+
+            /*
+             * Rename CSS assets from collision-avoidance names back to original names
+             * (e.g. design-system-css → design-system). Rolldown's bundle proxy doesn't
+             * support delete or assignment, so we track renamed prefixes and filter them
+             * out when building the entrypoints list.
+             */
+            const renamedPrefixes: string[] = [];
+            for (const [inputName, originalName] of cssInputNames) {
+                delete bundle[`${inputName}.cjs.js`];
+                if (inputName !== originalName) {
+                    renamedPrefixes.push(inputName);
+                    for (const [fileName, asset] of Object.entries(bundle)) {
+                        if (asset.type === 'asset' && fileName.startsWith(inputName)) {
+                            this.emitFile({
+                                type: 'asset',
+                                fileName: fileName.replace(inputName, originalName),
+                                source: asset.source,
+                            });
+                        }
+                    }
+                }
+            }
+
+            const code = assembleIIFE(factories, exposes);
+            const sharedFileName = bundleName('shared', '.js', isProduction ? code : undefined);
+
+            this.emitFile({
+                type: 'asset',
+                fileName: sharedFileName,
+                source: code,
+            });
+
+            const cssFiles = Object.keys(bundle)
+                .filter(f => f.endsWith('.bundle.css'))
+                .filter(f => !renamedPrefixes.some(p => f.startsWith(p)))
+                .concat(
+                    renamedPrefixes.flatMap(p =>
+                        Object.keys(bundle)
+                            .filter(f => f.startsWith(p) && f.endsWith('.bundle.css'))
+                            .map(f => f.replace(p, cssInputNames.get(p)!))
+                    )
+                );
+            const entrypoints = { css: cssFiles, js: [sharedFileName] };
+            this.emitFile({
+                type: 'asset',
+                fileName: 'entrypoints.json',
+                source: JSON.stringify(entrypoints, null, 2),
+            });
+        },
+
+        writeBundle(options) {
+            if (!metadataDir) {
+                return;
+            }
+            const outDir = options.dir ?? '';
+            const metadata = {
+                entryPointsPath: path.resolve(outDir, 'entrypoints.json'),
+            };
+            if (!fs.existsSync(metadataDir)) {
+                fs.mkdirSync(metadataDir, { recursive: true });
+            }
+            fs.writeFileSync(
+                path.join(metadataDir, 'exposed-dependencies-metadata.json'),
+                JSON.stringify(metadata, null, 2)
+            );
+        },
+    };
+}
+
+function assembleIIFE(factories: string[], exposes: string[]): string {
+    return `(function() {
+var STORAGE_KEY = Symbol.for('SERVICETITAN_EXPOSE_LOADER_STORAGE');
+var g = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof self !== 'undefined' ? self : {};
+if (g[STORAGE_KEY] === undefined) {
+    g[STORAGE_KEY] = Object.assign(Object.create(null), {
+        clear: function(scope) { delete this[scope]; }
+    });
+}
+var storage = g[STORAGE_KEY];
+
+var modules = {
+${factories.join(',\n')}
+};
+
+function createScopedRequire(scope) {
+    var 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);
+        var module = cache[id] = { id: id, loaded: false, exports: {} };
+        modules[id](module, module.exports, require);
+        module.loaded = true;
+        var 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: function(id) { return id; } });
+    return require;
+}
+
+function expose(path, moduleId) {
+    var parts = path.split('.');
+    var obj = g;
+    for (var 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: function() { return storage; } }),
+        {
+            get: function(target, scope, receiver) {
+                if (scope === 'getStorage') return Reflect.get(target, scope, receiver);
+                return createScopedRequire(scope)(moduleId);
+            }
+        }
+    );
+}
+
+${exposes.join('\n')}
+})();
+`;
+}
+
+export async function buildSharedDeps(input: CreateBuildContextInput) {
+    // Get merged config to read custom outDir (parity with webpack)
+    const config = await createViteConfig(input);
+    const customOutDir = config.build?.outDir;
+
+    const context = createBuildContext({
+        ...input,
+        bundlerConfig: customOutDir
+            ? { emitExposedDependencies: { output: { path: customOutDir } } }
+            : undefined,
+    });
+
+    const { destination, sharedDependencies } = context.package;
+    const outputDir = getOutputPath(context);
+    const mode = context.build.isProduction ? 'production' : 'development';
+
+    const css: Record<string, string[]> = {};
+    if (sharedDependencies['@servicetitan/design-system']) {
+        css['design-system'] = [
+            '@servicetitan/tokens/core/tokens.css',
+            '@servicetitan/anvil-fonts/dist/css/anvil-fonts.css',
+            '@servicetitan/design-system/dist/system.min.css',
+        ];
+    }
+
+    await build({
+        configFile: false,
+        logLevel: 'warn',
+        oxc: { legalComments: 'none' },
+        mode,
+        plugins: [
+            sharedDepsPlugin({
+                dependencies: sharedDependencies,
+                css,
+                metadataDir: destination,
+            }),
+        ],
+        build: {
+            outDir: outputDir,
+        },
+    });
+}

package/src/vite/create-vite-config.ts

@@ -0,0 +1,50 @@
+import { createBuildContext, CreateBuildContextInput, stringifyConfig } from '../core';
+import { getViteConfiguration, log } from '../utils';
+import { createBaseConfig } from './base-config';
+import { loadConfigFile } from './load-config-file';
+import { mergeViteConfigs } from './merge-config';
+
+export async function createViteConfig(input: CreateBuildContextInput) {
+    const context = createBuildContext(input);
+    const { isProduction } = context.build;
+
+    /*
+     * TODO: distinguish between apps in debugging (NOT SUPPORTED)
+     * TODO: look into request logging similar to webpack
+     * TODO: make it the Task
+     * TODO: consolidate shared configuration (add plugins depending on context)
+     * TODO: dist folder cleaning? MFE cleaning
+     * TODO: check full bundle bundles (number and names compared to wp)
+     * TODO: standalone MFE host needs to have anvil stylesheet? (only in dev?)
+     * TODO: vite's index.html in dist/src??
+     * TODO: urls to page resources are inconsistent. some are dist/bundle some are direct
+     * TODO: full bundle injected css uses absolute URL and doesn't seem cached?
+     * TODO: test ts config override
+     * TODO: rename bundle-package to bundle-webpack?
+     * REVIEWS: plugins especially style injection, loading config file, base config, shared deps, context files, weird config shortcuts like isCustomStyleRules, bundlerConfig in context
+     * TESTS: fix existing and add new, bff and token server
+     */
+
+    const pkgJsonConfig = getViteConfiguration();
+    const configFileExport = await loadConfigFile('./', isProduction);
+    const fileConfig =
+        typeof configFileExport === 'function'
+            ? configFileExport(context)
+            : (configFileExport ?? {});
+
+    const baseConfig = createBaseConfig(context);
+    const finalConfig = mergeViteConfigs(baseConfig, pkgJsonConfig, fileConfig, context);
+
+    /*
+     * Background dev servers (light/headless) must use a random port to avoid
+     * conflicting with the full bundle's user-configured port.
+     */
+    if (context.build.light || context.build.headless) {
+        finalConfig.server = { ...finalConfig.server, port: 0 };
+    }
+
+    /* istanbul ignore next: debug only */
+    log.debug('create-vite-config', () => stringifyConfig(finalConfig));
+
+    return finalConfig;
+}

package/src/vite/define-config.ts

@@ -0,0 +1,20 @@
+import type { UserConfig } from 'vite';
+import type { BuildContext } from '../core/types';
+import type { MinifyOptions, PluginOverrides } from '../utils/get-configuration';
+
+export interface ViteConfigOverride {
+    omitDefault?: string[];
+    minify?: MinifyOptions;
+    pluginOverrides?: PluginOverrides;
+    config?: UserConfig;
+}
+
+export function defineConfig(config: ViteConfigOverride): ViteConfigOverride;
+export function defineConfig(
+    fn: (context: BuildContext) => ViteConfigOverride
+): (context: BuildContext) => ViteConfigOverride;
+export function defineConfig(
+    configOrFn: ViteConfigOverride | ((context: BuildContext) => ViteConfigOverride)
+) {
+    return configOrFn;
+}

package/src/vite/index.html

@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title><%= it.title %></title>
+        <link rel="icon" href="<%= it.favicon ?? 'favicon.ico' %>" />
+        <% it.css.forEach(function(item) { %>
+        <link href="./<%= item %>" rel="stylesheet" />
+        <% }); %> <% it.js.forEach(function(item) { %>
+        <script src="./<%= item %>"></script>
+        <% }); %>
+        <script type="text/javascript">
+            /* Simulate host initialization */
+            window.onload = () =>
+                document.querySelector('<%= it.name %>')?.provide({ onReady() {} });
+        </script>
+    </head>
+    <body>
+        <script type="module">
+            <% if (it.isWebComponent) { %>
+            import './index';
+            <% } else { %>
+            import './dist/index';
+            <% } %>
+        </script>
+        <% if (it.isWebComponent) { %><<%~ it.name %> style-urls="<%=
+        encodeURIComponent(JSON.stringify([])) %>" /><% } %>
+    </body>
+</html>