@servicetitan/startup 36.0.0 → 36.1.1-beta.1

package/src/vite/config/__tests__/load-config-file.test.ts

@@ -0,0 +1,191 @@
+import fs from 'fs';
+import os from 'os';
+import path from 'path';
+import { rolldown } from 'rolldown'; // eslint-disable-line import/no-extraneous-dependencies
+import type { BuildContext } from '../../../core/types';
+import { loadConfigFile } from '../load-config-file';
+
+jest.mock('rolldown', () => ({ rolldown: jest.fn() }));
+
+describe('[startup] loadConfigFile', () => {
+    const emptyModule = 'module.exports = {};';
+    const config = { foo: 'bar' };
+
+    let root: string;
+    let context: BuildContext;
+
+    beforeAll(() => (root = fs.mkdtempSync(path.join(os.tmpdir(), 'startup-test-'))));
+    afterAll(() => fs.rmSync(root, { recursive: true, force: true }));
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        context = { build: { isProduction: true } } as BuildContext;
+    });
+
+    function setup({
+        configFiles,
+        generatedOutput = emptyModule,
+    }: {
+        configFiles: string[];
+        generatedOutput?: string;
+    }) {
+        for (const entry of fs.readdirSync(root)) {
+            fs.rmSync(path.join(root, entry), { recursive: true, force: true });
+        }
+        for (const file of configFiles) {
+            fs.writeFileSync(path.join(root, file), '');
+        }
+        jest.mocked(rolldown).mockResolvedValue({
+            generate: jest.fn().mockResolvedValue({ output: [{ code: generatedOutput }] }),
+        } as any);
+    }
+
+    function cjsExport(value: Record<string, any>) {
+        return `module.exports = ${JSON.stringify(value)};`;
+    }
+
+    const subject = () => loadConfigFile(root, context);
+
+    function itReturnsEmptyObject() {
+        test('returns empty object', async () => {
+            expect(await subject()).toEqual({});
+        });
+    }
+
+    itReturnsEmptyObject();
+
+    test('does not call rolldown', async () => {
+        await subject();
+
+        expect(rolldown).not.toHaveBeenCalled();
+    });
+
+    describe('with a prod config file', () => {
+        const prodConfigTs = 'vite.prod.config.ts';
+        const prodConfigJs = 'vite.prod.config.js';
+
+        beforeEach(() => {
+            setup({ configFiles: [prodConfigTs], generatedOutput: cjsExport(config) });
+        });
+
+        test('returns the config', async () => {
+            expect(await subject()).toEqual(config);
+        });
+
+        test('passes the config path to rolldown', async () => {
+            await subject();
+
+            expect(rolldown).toHaveBeenCalledWith(
+                expect.objectContaining({ input: path.join(root, prodConfigTs) })
+            );
+        });
+
+        test('generates CJS output', async () => {
+            await subject();
+
+            const { generate } = (await jest.mocked(rolldown).mock.results[0].value) as any;
+            expect(generate).toHaveBeenCalledWith({ format: 'cjs' });
+        });
+
+        test('externalizes bare imports and keeps relative/absolute paths', async () => {
+            await subject();
+
+            const { external } = jest.mocked(rolldown).mock.calls[0][0] as any;
+            expect(external('lodash')).toBe(true);
+            expect(external('@servicetitan/startup')).toBe(true);
+            expect(external('./shared-config')).toBe(false);
+            expect(external('/Users/dev/project/shared-config.ts')).toBe(false);
+        });
+
+        function itCleansTempFile() {
+            test('cleans up temp file', async () => {
+                await subject().catch(() => {});
+
+                const tmpDir = path.join(root, 'node_modules', '.startup');
+                const files = fs.existsSync(tmpDir) ? fs.readdirSync(tmpDir) : [];
+                expect(files).toHaveLength(0);
+            });
+        }
+
+        itCleansTempFile();
+
+        describe('when import throws', () => {
+            beforeEach(() => {
+                setup({
+                    configFiles: [prodConfigTs],
+                    generatedOutput: 'throw new Error("bad config");',
+                });
+            });
+
+            itCleansTempFile();
+        });
+
+        describe('when config exports a function', () => {
+            beforeEach(() => {
+                setup({
+                    configFiles: [prodConfigTs],
+                    generatedOutput:
+                        'module.exports = (ctx) => ({ config: { minify: ctx.build.isProduction } });',
+                });
+            });
+
+            test('returns the result of calling the function', async () => {
+                expect(await subject()).toEqual({ config: { minify: true } });
+            });
+        });
+
+        describe('when config exports null', () => {
+            beforeEach(() => {
+                setup({ configFiles: [prodConfigTs], generatedOutput: 'module.exports = null;' });
+            });
+
+            itReturnsEmptyObject();
+        });
+
+        describe('when .js also exists', () => {
+            beforeEach(() => {
+                setup({ configFiles: [prodConfigTs, prodConfigJs] });
+            });
+
+            test('prefers .ts over .js', async () => {
+                await subject();
+
+                expect(rolldown).toHaveBeenCalledWith(
+                    expect.objectContaining({ input: path.join(root, prodConfigTs) })
+                );
+            });
+        });
+
+        describe('when only .js exists', () => {
+            beforeEach(() => {
+                setup({ configFiles: [prodConfigJs] });
+            });
+
+            test('loads .js config', async () => {
+                await subject();
+
+                expect(rolldown).toHaveBeenCalledWith(
+                    expect.objectContaining({ input: path.join(root, prodConfigJs) })
+                );
+            });
+        });
+    });
+
+    describe('with a dev config file', () => {
+        const devConfigTs = 'vite.dev.config.ts';
+
+        beforeEach(() => {
+            setup({ configFiles: [devConfigTs], generatedOutput: cjsExport(config) });
+        });
+
+        itReturnsEmptyObject();
+
+        describe('with dev context', () => {
+            beforeEach(() => (context.build.isProduction = false));
+
+            test('returns the config', async () => {
+                expect(await subject()).toEqual(config);
+            });
+        });
+    });
+});

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

@@ -0,0 +1,84 @@
+import type { VitePackageJsonOverride } from '../../../utils/get-configuration';
+import type { ViteConfigFileOverride } from '../define-config';
+
+jest.mock('vite', () => ({
+    mergeConfig: (a: Record<string, any>, b: Record<string, any>) => ({ ...a, ...b }),
+}));
+
+import { mergeViteConfigs } from '../merge-vite-configs';
+
+describe(mergeViteConfigs.name, () => {
+    const baseConfig = {
+        root: '/app',
+        build: { outDir: 'dist' },
+    };
+
+    let packageJsonConfig: VitePackageJsonOverride;
+    let fileConfig: ViteConfigFileOverride;
+
+    beforeEach(() => {
+        packageJsonConfig = {};
+        fileConfig = {};
+    });
+
+    const subject = () => mergeViteConfigs(baseConfig, packageJsonConfig, fileConfig);
+
+    test('returns base config', () => {
+        expect(subject()).toEqual(baseConfig);
+    });
+
+    describe('when package.json has config', () => {
+        beforeEach(() => {
+            packageJsonConfig = { config: { server: { port: 3000 } } };
+        });
+
+        test('merges into base', () => {
+            expect(subject()).toEqual({
+                ...baseConfig,
+                server: { port: 3000 },
+            });
+        });
+    });
+
+    describe('when config file has config', () => {
+        beforeEach(() => {
+            fileConfig = { config: { server: { port: 4000 } } };
+        });
+
+        test('merges into base', () => {
+            expect(subject()).toEqual({
+                ...baseConfig,
+                server: { port: 4000 },
+            });
+        });
+    });
+
+    describe('when both package.json and config file have config', () => {
+        beforeEach(() => {
+            packageJsonConfig = { config: { server: { port: 3000 } } };
+            fileConfig = { config: { server: { port: 4000 } } };
+        });
+
+        test('file config takes precedence', () => {
+            expect(subject()).toEqual({
+                ...baseConfig,
+                server: { port: 4000 },
+            });
+        });
+    });
+
+    describe('when configs have non-overlapping keys', () => {
+        beforeEach(() => {
+            packageJsonConfig = { config: { resolve: { alias: { '@': '/src' } } } };
+            fileConfig = { config: { server: { port: 4000 } } };
+        });
+
+        test('merges all three together', () => {
+            expect(subject()).toEqual({
+                ...baseConfig,
+                resolve: { alias: { '@': '/src' } },
+                server: { port: 4000 },
+            });
+        });
+    });
+});

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

@@ -0,0 +1,127 @@
+import type { InlineConfig, Plugin } from 'vite';
+import {
+    bundleConstants,
+    defineExposedDependencies,
+    defineExposedInstanceDependencies,
+    defineWebComponentName,
+    getBundleType,
+    getOutputPath,
+} from '../../core';
+import { omit } from '../../utils';
+import {
+    cssInjectorPlugin,
+    devServerRoutingPlugin,
+    externalsPlugin,
+    htmlPlugin,
+    ignoreModulesPlugin,
+    metadataPlugin,
+    styleUrlsPlugin,
+    svgrPlugin,
+    virtualModulesPlugin,
+} from '../plugins';
+import { ViteBuildContext } from '../types';
+
+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;
+}
+
+function createPlugins(context: ViteBuildContext) {
+    const entries: [string, Plugin[] | Plugin | undefined][] = [
+        ['html', htmlPlugin(context)],
+        ['svgr', svgrPlugin(context)],
+        ['externals', externalsPlugin(context)],
+        ['virtualModules', virtualModulesPlugin(context)],
+        ['cssInjector', cssInjectorPlugin(context)],
+        ['styleUrls', styleUrlsPlugin(context)],
+        ['metadata', metadataPlugin(context)],
+        ['devServerRouting', devServerRoutingPlugin(context)],
+        ['ignoreModules', ignoreModulesPlugin(context)],
+    ];
+
+    return entries
+        .filter(
+            ([name, plugin]) =>
+                plugin && !context.bundlerConfig.omitDefault?.includes(`plugins.${name}`)
+        )
+        .flatMap(([, plugin]) => plugin);
+}
+
+export function createBaseConfig(context: ViteBuildContext): InlineConfig {
+    const { isProduction } = context.build;
+    const { isWebComponent } = context.package;
+
+    let config: InlineConfig = {
+        cacheDir: `node_modules/.vite/${getBundleType(context) ?? 'host'}`,
+        server: {
+            port: context.bundlerConfig.port ?? (isWebComponent ? 8888 : 8080),
+            warmup: {
+                // Pre-warms compiled files to avoid multiple page reloads at dev session start
+                clientFiles: [`${context.package.destination}/**/*.js`],
+            },
+        },
+        mode: isProduction ? bundleConstants.mode.production : bundleConstants.mode.development,
+        configFile: false,
+        oxc: { legalComments: 'none' },
+        base: './',
+        css: {
+            modules: {
+                localsConvention: bundleConstants.postcss.localsConvention,
+                generateScopedName: isProduction
+                    ? bundleConstants.postcss.classnameTemplate.production
+                    : bundleConstants.postcss.classnameTemplate.development,
+            },
+            preprocessorOptions: {
+                less: { math: bundleConstants.less.math },
+            },
+        },
+        build: {
+            /*
+             * MFEs render inside shadow DOM — lazy CSS chunks would inject into document.head,
+             * leaking styles into the host. Bundling all CSS into one file avoids this.
+             */
+            cssCodeSplit: !isWebComponent,
+            /*
+             * MFE bundle dirs (full/light/headless) are safe to clean — no shared deps inside.
+             * Host outDir (dist/bundle/) contains shared/, so cleaning would delete shared deps.
+             */
+            emptyOutDir: isWebComponent,
+            outDir: getOutputPath(context),
+            sourcemap: true,
+        },
+        define: importMetaRemap(
+            defineExposedDependencies(context),
+            defineExposedInstanceDependencies(context),
+            defineWebComponentName(context)
+        ),
+        optimizeDeps: {
+            include: ['@servicetitan/startup-utils'],
+        },
+        plugins: createPlugins(context),
+    };
+
+    const omitKeys = context.bundlerConfig.omitDefault?.filter(k => !k.startsWith('plugins.'));
+    if (omitKeys?.length) {
+        config = omit({ ...config }, omitKeys);
+    }
+
+    if (context.bundlerConfig.minify.js !== undefined) {
+        config.build = { ...config.build, minify: !!context.bundlerConfig.minify.js };
+    }
+    if (context.bundlerConfig.minify.css !== undefined) {
+        config.build = { ...config.build, cssMinify: !!context.bundlerConfig.minify.css };
+    }
+
+    return config;
+}

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

@@ -0,0 +1,45 @@
+import { VitePackageJsonOverride } from '../../utils';
+import { ViteBuildContext } from '../types';
+import { BuildContext, ViteConfigFileOverride } from './define-config';
+
+function createBundlerConfig(
+    packageJsonConfig: VitePackageJsonOverride,
+    fileConfig: ViteConfigFileOverride
+): ViteBuildContext['bundlerConfig'] {
+    const {
+        port: pkgPort,
+        omitDefault: pkgOmit = [],
+        pluginOverrides: pkgPluginOverrides = {},
+        minify: pkgMinify = {},
+    } = packageJsonConfig;
+    const {
+        port: filePort,
+        omitDefault: fileOmit = [],
+        pluginOverrides: filePluginOverrides = {},
+        minify: fileMinify = {},
+    } = fileConfig;
+
+    return {
+        port: filePort ?? pkgPort,
+        omitDefault: [...pkgOmit, ...fileOmit],
+        pluginOverrides: {
+            html: {
+                ...pkgPluginOverrides.html,
+                ...filePluginOverrides.html,
+            },
+            svgr: { ...pkgPluginOverrides.svgr, ...filePluginOverrides.svgr },
+        },
+        minify: { ...pkgMinify, ...fileMinify },
+    };
+}
+
+export function createViteBuildContext(
+    context: BuildContext,
+    pkgJsonConfig: VitePackageJsonOverride,
+    fileConfig: ViteConfigFileOverride
+): ViteBuildContext {
+    return {
+        ...context,
+        bundlerConfig: createBundlerConfig(pkgJsonConfig, fileConfig),
+    };
+}

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

@@ -0,0 +1,33 @@
+import { BuildContextOptions, createBuildContext, stringifyConfig } from '../../core';
+import { getViteConfiguration, log } from '../../utils';
+import { createBaseConfig } from './base-config';
+import { createViteBuildContext } from './create-vite-build-context';
+import { loadConfigFile } from './load-config-file';
+import { mergeViteConfigs } from './merge-vite-configs';
+
+export async function createViteConfig(options: BuildContextOptions) {
+    const context = createBuildContext(options);
+    const packageJsonConfig = getViteConfiguration();
+    const fileConfig = await loadConfigFile('./', context);
+    const viteContext = createViteBuildContext(context, packageJsonConfig, fileConfig);
+    const baseConfig = createBaseConfig(viteContext);
+    const finalConfig = mergeViteConfigs(baseConfig, packageJsonConfig, fileConfig);
+
+    /*
+     * 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 };
+    } else if (!context.build.emitExposedDependencies) {
+        finalConfig.server = {
+            ...finalConfig.server,
+            port: Number(process.env.PORT) || finalConfig.server?.port,
+        };
+    }
+
+    /* istanbul ignore next: debug only */
+    log.debug('create-vite-config', () => stringifyConfig(finalConfig));
+
+    return finalConfig;
+}

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

@@ -0,0 +1,18 @@
+import type { UserConfig } from 'vite';
+import type { BuildContext } from '../../core/types';
+import type { ViteBundlerConfig } from '../../utils/get-configuration';
+
+export type { BuildContext };
+export interface ViteConfigFileOverride extends ViteBundlerConfig {
+    config?: UserConfig;
+}
+
+/**
+ * Identity function that provides type checking and autocomplete for Vite
+ * config files (vite.dev.config.ts / vite.prod.config.ts). No-op at runtime.
+ */
+export function defineConfig<
+    T extends ViteConfigFileOverride | ((context: BuildContext) => ViteConfigFileOverride),
+>(config: T): T {
+    return config;
+}

package/src/vite/config/index.ts

@@ -0,0 +1,5 @@
+export * from './base-config';
+export * from './create-vite-config';
+export * from './define-config';
+export * from './load-config-file';
+export * from './merge-vite-configs';

package/src/vite/config/load-config-file.ts

@@ -0,0 +1,52 @@
+import crypto from 'crypto';
+import fs from 'fs';
+import path from 'path';
+import { rolldown } from 'rolldown'; // eslint-disable-line import/no-extraneous-dependencies
+import type { BuildContext } from '../../core/types';
+import type { ViteConfigFileOverride } from './define-config';
+
+export async function loadConfigFile(
+    root: string,
+    context: BuildContext
+): Promise<ViteConfigFileOverride> {
+    const baseName = context.build.isProduction ? 'vite.prod.config' : 'vite.dev.config';
+    const configPath = ['.ts', '.js']
+        .map(ext => path.join(root, baseName + ext))
+        .find(path => fs.existsSync(path));
+
+    if (!configPath) {
+        return {};
+    }
+
+    /*
+     * Write to node_modules/.startup/ so Node can resolve package imports
+     * relative to the project's node_modules. The leading dot follows the
+     * convention for tool-managed directories (like .cache, .vite) — npm
+     * ignores dotfiles inside node_modules. The directory persists after the
+     * temp file is cleaned up, avoiding re-creation on subsequent runs.
+     */
+    const tmpDir = path.resolve(root, 'node_modules', '.startup');
+    fs.mkdirSync(tmpDir, { recursive: true });
+    const tmpFile = path.join(tmpDir, `vite-config-${crypto.randomUUID()}.cjs`);
+
+    const bundle = await rolldown({
+        input: configPath,
+        /*
+         * Externalize bare imports (node_modules) — only bundle relative files
+         * like ./vite.shared.ts. Rolldown calls external() twice per import: once
+         * with the original specifier (./foo) and once with the resolved absolute
+         * path (/Users/.../foo.ts or C:\...\foo.ts). Both must return false to
+         * keep the import internal.
+         */
+        external: id => !id.startsWith('.') && !path.isAbsolute(id),
+    });
+    const code = (await bundle.generate({ format: 'cjs' })).output[0].code;
+
+    try {
+        fs.writeFileSync(tmpFile, code);
+        const exported = (await import(tmpFile)).default;
+        return typeof exported === 'function' ? exported(context) : (exported ?? {});
+    } finally {
+        fs.unlinkSync(tmpFile);
+    }
+}

package/src/vite/config/merge-vite-configs.ts

@@ -0,0 +1,15 @@
+import type { InlineConfig } from 'vite';
+import { mergeConfig } from 'vite';
+import type { VitePackageJsonOverride } from '../../utils/get-configuration';
+import type { ViteConfigFileOverride } from './define-config';
+
+export function mergeViteConfigs(
+    baseConfig: InlineConfig,
+    packageJsonConfig: VitePackageJsonOverride,
+    fileConfig: ViteConfigFileOverride
+): InlineConfig {
+    return mergeConfig(
+        mergeConfig(baseConfig, packageJsonConfig.config ?? {}),
+        fileConfig.config ?? {}
+    );
+}

package/src/vite/index.html

@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title><%= it.title %></title>
+        <% if (it.favicon) { %>
+        <link rel="icon" href="<%= it.favicon %>" />
+        <% } %>
+        <% it.css.forEach(function(item) { %>
+        <link href="./<%= item %>" rel="stylesheet" />
+        <% }); %> <% it.js.forEach(function(item) { %>
+        <script src="./<%= item %>"></script>
+        <% }); %>
+        <script type="text/javascript">
+            <% if (it.isWebComponent) { %>
+                <% if (!it.isProduction) { %>
+                window.__mfeSelfHosted__ = true;
+                <% } %>
+            /* 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>

package/src/vite/index.ts

@@ -0,0 +1 @@
+export * from './config/define-config';

package/src/vite/plugins/__tests__/css-injector-plugin.test.ts

@@ -0,0 +1,61 @@
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
+import type { BuildContext } from '../../../core';
+import { cssInjectorPlugin } from '../css-injector-plugin';
+
+jest.mock('vite-plugin-css-injected-by-js', () => jest.fn(() => [{ name: 'css-injected-by-js' }]));
+
+describe(cssInjectorPlugin.name, () => {
+    let context: BuildContext;
+
+    beforeEach(() => {
+        context = {
+            build: { name: 'my-component', isProduction: false },
+            package: { isWebComponent: true },
+        } as BuildContext;
+    });
+
+    const subject = () => cssInjectorPlugin(context);
+
+    test('returns plugins from css-injected-by-js', () => {
+        expect(subject()).toEqual([{ name: 'css-injected-by-js' }]);
+    });
+
+    test('passes component name as styleId', () => {
+        subject();
+
+        expect(cssInjectedByJsPlugin).toHaveBeenCalledWith(
+            expect.objectContaining({ styleId: context.build.name })
+        );
+    });
+
+    test('enables dev mode', () => {
+        subject();
+
+        expect(cssInjectedByJsPlugin).toHaveBeenCalledWith(
+            expect.objectContaining({ dev: { enableDev: true } })
+        );
+    });
+
+    test('passes injectCodeFunction', () => {
+        subject();
+
+        const call = jest.mocked(cssInjectedByJsPlugin).mock.calls[0][0]!;
+        expect(call.injectCodeFunction).toBeInstanceOf(Function);
+    });
+
+    describe('when package is not a web component', () => {
+        beforeEach(() => (context.package.isWebComponent = false));
+
+        test('returns empty array', () => {
+            expect(subject()).toEqual([]);
+        });
+    });
+
+    describe('when build is production', () => {
+        beforeEach(() => (context.build.isProduction = true));
+
+        test('returns empty array', () => {
+            expect(subject()).toEqual([]);
+        });
+    });
+});