@servicetitan/startup 36.3.1 → 37.0.0

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

@@ -0,0 +1,145 @@
+import type { InlineConfig, Plugin } from 'vite';
+import {
+    bundleConstants,
+    defineExposedDependencies,
+    defineExposedInstanceDependencies,
+    defineWebComponentName,
+    getBundleType,
+    getCdnPath,
+    getProcessEnv,
+} from '../../core';
+import { omit } from '../../utils';
+import {
+    bundleStatPlugin,
+    chainSourceMapsPlugin,
+    cleanPlugin,
+    cssInjectorPlugin,
+    designSystemGuardPlugin,
+    devServerRoutingPlugin,
+    externalsPlugin,
+    htmlPlugin,
+    ignoreModulesPlugin,
+    istanbulPlugin,
+    magicCommentsPlugin,
+    metadataPlugin,
+    momentLocalesPlugin,
+    styleUrlsPlugin,
+    svgrPlugin,
+    virtualModulesPlugin,
+} from '../plugins';
+import { ViteBuildContext } from '../types';
+import { assetFileNames } from './asset-file-names';
+import { getCodeSplitting } from './code-splitting';
+import { createCssConfig } from './create-css-config';
+import { createFilteringLogger } from './create-filtering-logger';
+
+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 | Promise<Plugin> | undefined][] = [
+        ['bundleStat', bundleStatPlugin(context)],
+        ['clean', cleanPlugin(context)],
+        ['cssInjector', cssInjectorPlugin(context)],
+        ['designSystemGuard', designSystemGuardPlugin(context)],
+        ['devServerRouting', devServerRoutingPlugin(context)],
+        ['externals', externalsPlugin(context)],
+        ['html', htmlPlugin(context)],
+        ['ignoreModules', ignoreModulesPlugin(context)],
+        ['istanbul', istanbulPlugin(context)],
+        ['magicComments', magicCommentsPlugin(context)],
+        ['metadata', metadataPlugin(context)],
+        ['momentLocales', momentLocalesPlugin(context)],
+        ['styleUrls', styleUrlsPlugin(context)],
+        ['svgr', svgrPlugin(context)],
+        ['virtualModules', virtualModulesPlugin(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'}`,
+        customLogger: createFilteringLogger(),
+        server: { port: context.bundlerConfig.port ?? (isWebComponent ? 8888 : 8080) },
+        mode: isProduction ? bundleConstants.mode.production : bundleConstants.mode.development,
+        configFile: false,
+        oxc: { legalComments: 'none' },
+        base: getCdnPath(context) || './', // eslint-disable-line @typescript-eslint/prefer-nullish-coalescing
+        css: createCssConfig(isProduction),
+        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,
+            sourcemap: true,
+            rolldownOptions: {
+                output: { assetFileNames, codeSplitting: getCodeSplitting(context) },
+                plugins: [chainSourceMapsPlugin()],
+            },
+        },
+        define: {
+            ...importMetaRemap(
+                defineExposedDependencies(context),
+                defineExposedInstanceDependencies(context),
+                defineWebComponentName(context)
+            ),
+            ...(getProcessEnv(context) ?? {}),
+        },
+        optimizeDeps: {
+            include: ['@servicetitan/startup-utils'],
+            /*
+             * Top-level plugins don't run during dependency pre-bundling, so
+             * register ignoreModulesPlugin again here. Without this, missing
+             * optional peer dependencies inside pre-bundled packages throw at
+             * runtime instead of resolving to an empty module.
+             */
+            rolldownOptions: {
+                plugins: [ignoreModulesPlugin(context)],
+            },
+        },
+        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 };
+    }
+
+    // Minified output can't be mapped back to source, so skip it when instrumenting.
+    if (context.options.codeCoverage) {
+        config.build = { ...config.build, minify: false };
+    }
+
+    return config;
+}

package/src/vite/config/code-splitting.ts

@@ -0,0 +1,23 @@
+import type { CodeSplittingGroup, CodeSplittingOptions } from 'rolldown';
+import { CHUNK_PATTERNS } from '../../core';
+import { ViteBuildContext } from '../types';
+
+/*
+ * Rolldown matches higher-priority groups first, so the specific @servicetitan and
+ * Kendo groups claim their modules before the general vendor groups can. Code outside
+ * node_modules matches no group, so it stays in the entry chunk.
+ */
+const VENDOR_GROUPS: CodeSplittingGroup[] = [
+    { name: 'servicetitan', test: CHUNK_PATTERNS.servicetitan, priority: 30 },
+    { name: 'kendo', test: CHUNK_PATTERNS.kendo, priority: 20 },
+    { name: 'vendor-core', test: CHUNK_PATTERNS['vendor-core'], priority: 15 },
+    { name: 'vendor', test: CHUNK_PATTERNS.vendor, priority: 10 },
+];
+
+export function getCodeSplitting(context: ViteBuildContext): CodeSplittingOptions | undefined {
+    if (!context.build.isProduction) {
+        return undefined;
+    }
+
+    return { groups: VENDOR_GROUPS, minSize: 20 * 1024 };
+}

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

@@ -0,0 +1,16 @@
+import type { CSSOptions } from 'vite';
+import { bundleConstants } from '../../core';
+
+export function createCssConfig(isProduction: boolean): CSSOptions {
+    return {
+        modules: {
+            localsConvention: bundleConstants.cssModules.localsConvention,
+            generateScopedName: isProduction
+                ? bundleConstants.cssModules.classnameTemplate.production
+                : bundleConstants.cssModules.classnameTemplate.development,
+        },
+        preprocessorOptions: {
+            less: { math: bundleConstants.less.math },
+        },
+    };
+}

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

@@ -0,0 +1,34 @@
+import { createLogger, type Logger } from 'vite';
+
+/*
+ * Expected warnings when a host's HTML references the shared-bundle assets created by
+ * separate "exposed dependencies" build. Matched on ./shared/ so a genuinely missing
+ * app asset still warns.
+ */
+const SHARED_ASSET_WARNINGS = [
+    /<script src="\.\/shared\/[^"]+"> in "[^"]*" can't be bundled without type="module"/,
+    /\.\/shared\/\S+ doesn't exist at build time/,
+];
+
+/*
+ * Wraps Vite's logger to drop the shared-asset HTML warnings. Everything else passes through.
+ */
+export function createFilteringLogger(): Logger {
+    const logger = createLogger();
+    const { warn, warnOnce } = logger;
+    const isSuppressed = (message: string) =>
+        SHARED_ASSET_WARNINGS.some(pattern => pattern.test(message));
+
+    logger.warn = (message, options) => {
+        if (!isSuppressed(message)) {
+            warn.call(logger, message, options);
+        }
+    };
+    logger.warnOnce = (message, options) => {
+        if (!isSuppressed(message)) {
+            warnOnce.call(logger, message, options);
+        }
+    };
+
+    return logger;
+}

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

@@ -0,0 +1,43 @@
+import { BuildContext } from '../../core';
+import { VitePackageJsonOverride } from '../../utils';
+import { ViteBuildContext } from '../types';
+import { 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,66 @@
+import {
+    BuildContextOptions,
+    createBuildContext,
+    resolveOutputPath,
+    resolveOutputRoot,
+    stringifyConfig,
+} from '../../core';
+import { getViteConfiguration, log } from '../../utils';
+import { createBaseConfig } from './base-config';
+import { createViteBuildContext } from './create-vite-build-context';
+import { getWarmupClientFiles } from './get-warmup-client-files';
+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);
+    const outputRoot = resolveOutputRoot(context, finalConfig.build?.outDir);
+
+    // Resolve the output path: web components force the default, hosts honor a configured path.
+    finalConfig.build = {
+        ...finalConfig.build,
+        outDir: resolveOutputPath(context, finalConfig.build?.outDir),
+    };
+
+    if (!context.build.isProduction) {
+        finalConfig.server = createDevServerConfig(viteContext, finalConfig, outputRoot);
+    }
+
+    /* istanbul ignore next: debug only */
+    log.debug('create-vite-config', () => stringifyConfig(finalConfig));
+
+    return finalConfig;
+}
+
+function createDevServerConfig(
+    viteContext: ReturnType<typeof createViteBuildContext>,
+    finalConfig: ReturnType<typeof mergeViteConfigs>,
+    outputRoot: string
+) {
+    const { light, headless, emitExposedDependencies } = viteContext.build;
+
+    const server = {
+        ...finalConfig.server,
+        warmup: {
+            clientFiles: getWarmupClientFiles(viteContext, outputRoot),
+            ...finalConfig.server?.warmup,
+        },
+    };
+
+    /*
+     * Background dev servers (light/headless) must use a random port to avoid
+     * conflicting with the full bundle's user-configured port.
+     */
+    if (light || headless) {
+        server.port = 0;
+    } else if (!emitExposedDependencies) {
+        server.port = Number(process.env.PORT) || finalConfig.server?.port;
+    }
+
+    return server;
+}

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/get-warmup-client-files.ts

@@ -0,0 +1,13 @@
+import path from 'path';
+import { ViteBuildContext } from '../types';
+
+/*
+ * Returns the glob patterns the dev server warms at startup: the package's compiled
+ * output, minus the production bundle. Warming the bundle makes Vite read sourcemaps
+ * that reference sources it cannot resolve, logging "missing source files" warnings.
+ */
+export function getWarmupClientFiles(context: ViteBuildContext, outputRoot: string): string[] {
+    const { destination } = context.package;
+    const bundleDir = path.relative(process.cwd(), outputRoot);
+    return [`${destination}/**/*.js`, `!${bundleDir.replace(/\\/g, '/')}/**`];
+}

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,33 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <title><%= it.title %></title>
+        <% if (it.favicon) { %>
+        <link rel="icon" href="<%= it.favicon %>" />
+        <% } %> <% it.css.forEach(function(item) { %>
+        <link href="./<%= item %>" rel="stylesheet" crossorigin="anonymous" />
+        <% }); %> <% it.js.forEach(function(item) { %>
+        <script src="./<%= item %>"></script>
+        <% }); %>
+        <script type="text/javascript">
+            <% if (it.isWebComponent) { %>
+            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 %> /><% } %>
+    </body>
+</html>

package/src/vite/index.ts

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

package/src/vite/plugins/__tests__/bundle-stat-plugin.test.ts

@@ -0,0 +1,70 @@
+import os from 'os';
+import path from 'path';
+import { analyzer, unstableRolldownAdapter } from 'vite-bundle-analyzer';
+import { bundleReportFileName, bundleReportTitle } from '../../../core';
+import { ViteBuildContext } from '../../types';
+import { bundleStatPlugin } from '../bundle-stat-plugin';
+
+jest.mock('vite-bundle-analyzer', () => ({
+    analyzer: jest.fn(() => ({ name: 'analyzer-plugin' })),
+    unstableRolldownAdapter: jest.fn(() => ({ name: 'bundle-stat' })),
+}));
+jest.mock('../../../core', () => ({
+    bundleReportFileName: jest.fn(() => 'report-name'),
+    bundleReportTitle: jest.fn(() => 'Report Title'),
+}));
+
+describe(bundleStatPlugin.name, () => {
+    let context: ViteBuildContext;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        context = { options: {} } as ViteBuildContext;
+    });
+
+    const subject = () => bundleStatPlugin(context);
+
+    test('returns undefined', () => {
+        expect(subject()).toBeUndefined();
+    });
+
+    describe('when buildStat is true', () => {
+        beforeEach(() => (context.options.buildStat = true));
+
+        test('returns a plugin with correct name', () => {
+            expect(subject()).toEqual({ name: 'bundle-stat' });
+        });
+
+        test('configures the analyzer for a static report', () => {
+            subject();
+
+            expect(analyzer).toHaveBeenCalledWith(
+                expect.objectContaining({ analyzerMode: 'static', openAnalyzer: true })
+            );
+        });
+
+        test('configures report title', () => {
+            subject();
+
+            expect(analyzer).toHaveBeenCalledWith(
+                expect.objectContaining({ reportTitle: bundleReportTitle(context) })
+            );
+        });
+
+        test('configures report location', () => {
+            subject();
+
+            const { fileName } = jest.mocked(analyzer).mock.calls[0][0] as {
+                fileName: () => string;
+            };
+
+            expect(fileName()).toBe(path.join(os.tmpdir(), bundleReportFileName(context)));
+        });
+
+        test('feeds the analyzer plugin through the rolldown adapter', () => {
+            subject();
+
+            expect(unstableRolldownAdapter).toHaveBeenCalledWith({ name: 'analyzer-plugin' });
+        });
+    });
+});

package/src/vite/plugins/__tests__/chain-source-maps-plugin.test.ts

@@ -0,0 +1,58 @@
+import { fs, vol } from 'memfs';
+import path from 'path';
+import { chainSourceMapsPlugin } from '../chain-source-maps-plugin';
+
+jest.mock('fs', () => fs);
+
+describe(chainSourceMapsPlugin.name, () => {
+    const code = 'compiled code';
+    const map = { version: 3, sources: ['../src/foo.ts'], sourcesContent: ['source'] };
+
+    let id: string;
+
+    beforeEach(() => {
+        id = '/abs/pkg/dist/foo.js';
+        vol.fromJSON({ [id]: code, [`${id}.map`]: JSON.stringify(map) });
+    });
+
+    afterEach(() => vol.reset());
+
+    const subject = () => {
+        const plugin = chainSourceMapsPlugin();
+        return (plugin.load as Function).call(plugin, id);
+    };
+
+    test('has correct name', () => {
+        expect(chainSourceMapsPlugin().name).toBe('chain-source-maps');
+    });
+
+    test('returns code with *.js.map sources as absolute paths', () => {
+        expect(subject()).toEqual({
+            code,
+            map: {
+                ...map,
+                sources: map.sources.map(source =>
+                    path.resolve(path.dirname(id), source).replace(/\\/g, '/')
+                ),
+            },
+        });
+    });
+
+    function itReturnsUndefined() {
+        test('returns undefined', () => {
+            expect(subject()).toBeUndefined();
+        });
+    }
+
+    describe('when id is not a .js file', () => {
+        beforeEach(() => (id = '/abs/pkg/src/foo.ts'));
+
+        itReturnsUndefined();
+    });
+
+    describe('when no sibling .map exists', () => {
+        beforeEach(() => vol.reset());
+
+        itReturnsUndefined();
+    });
+});