@servicetitan/startup 34.3.0-beta.2 → 35.0.0

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

@@ -1,173 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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: './',
-        css: {
-            modules: {
-                localsConvention: 'camelCaseOnly',
-                generateScopedName: isProduction ? '[local]__[hash:base64:5]' : '[local]',
-            },
-            preprocessorOptions: {
-                less: { math: 'always' },
-            },
-        },
-        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

@@ -1,320 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,29 +0,0 @@
-<!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>