@servicetitan/startup 34.2.1 → 34.3.0-beta.0

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

@@ -0,0 +1,54 @@
+import fs from 'fs';
+import path from 'path';
+import { rolldown } from 'rolldown';
+import type { BuildContext } from '../core/types';
+import type { ViteConfigOverride } from './define-config';
+
+type ConfigFileExport = ViteConfigOverride | ((context: BuildContext) => ViteConfigOverride);
+
+const PROD_FILES = ['vite.prod.config.ts', 'vite.prod.config.js'] as const;
+const DEV_FILES = ['vite.dev.config.ts', 'vite.dev.config.js'] as const;
+
+export async function loadConfigFile(
+    root: string,
+    isProduction: boolean
+): Promise<ConfigFileExport | undefined> {
+    const candidates = isProduction ? PROD_FILES : DEV_FILES;
+    const configPath = candidates.map(f => path.join(root, f)).find(f => fs.existsSync(f));
+
+    if (!configPath) {
+        return undefined;
+    }
+
+    const bundle = await rolldown({
+        input: configPath,
+        external: [/^[^./]/],
+    });
+    const { output } = await bundle.generate({ format: 'cjs' });
+    const code = output[0].code;
+
+    /*
+     * Write to node_modules/.vite-temp/ (same approach as Vite) so Node can resolve
+     * package imports relative to the project's node_modules
+     */
+    const tmpDir = path.resolve(root, 'node_modules', '.vite-temp');
+    if (!fs.existsSync(tmpDir)) {
+        fs.mkdirSync(tmpDir, { recursive: true });
+    }
+    const tmpFile = path.join(
+        tmpDir,
+        `vite-config-${Date.now()}-${Math.random().toString(36).slice(2)}.cjs`
+    );
+
+    try {
+        fs.writeFileSync(tmpFile, code);
+        const mod = await import(tmpFile);
+        return mod.default;
+    } finally {
+        try {
+            fs.unlinkSync(tmpFile);
+        } catch {
+            // ignore cleanup errors
+        }
+    }
+}

package/src/vite/merge-config.ts

@@ -0,0 +1,93 @@
+import type { InlineConfig, Plugin } from 'vite';
+import { mergeConfig } from 'vite';
+import type { BuildContext } from '../core/types';
+import { omit } from '../utils';
+import type { ViteConfiguration } from '../utils/get-configuration';
+import type { ViteConfigOverride } from './define-config';
+import {
+    cssInjectorPlugin,
+    devServerRoutingPlugin,
+    externalsPlugin,
+    htmlPlugin,
+    ignoreModulesPlugin,
+    metadataPlugin,
+    styleUrlsPlugin,
+    svgrPlugin,
+    virtualModulesPlugin,
+} from './plugins';
+
+function resolveOverrides(pkgJsonConfig: ViteConfiguration, fileConfig: ViteConfigOverride) {
+    const {
+        omitDefault: pkgOmit = [],
+        pluginOverrides: pkgPluginOverrides = {},
+        minify: pkgMinify = {},
+        config: pkgViteConfig = {},
+    } = pkgJsonConfig;
+    const {
+        omitDefault: fileOmit = [],
+        pluginOverrides: filePluginOverrides = {},
+        minify: fileMinify = {},
+        config: fileViteConfig = {},
+    } = fileConfig;
+
+    return {
+        omitDefault: [...pkgOmit, ...fileOmit],
+        pluginOverrides: {
+            htmlTemplate: {
+                ...pkgPluginOverrides.htmlTemplate,
+                ...filePluginOverrides.htmlTemplate,
+            },
+            svgr: { ...pkgPluginOverrides.svgr, ...filePluginOverrides.svgr },
+        },
+        minify: { ...pkgMinify, ...fileMinify },
+        pkgViteConfig,
+        fileViteConfig,
+    };
+}
+
+function createPlugins(context: BuildContext, overrides: ReturnType<typeof resolveOverrides>) {
+    const entries: [string, Plugin | Plugin[]][] = [
+        ['htmlTemplate', htmlPlugin(context, overrides.pluginOverrides.htmlTemplate)],
+        ['svgr', svgrPlugin(overrides.pluginOverrides.svgr)],
+        ['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]) => !overrides.omitDefault.includes(`plugins.${name}`))
+        .flatMap(([, plugin]) => (Array.isArray(plugin) ? plugin : [plugin]));
+}
+
+export function mergeViteConfigs(
+    baseConfig: InlineConfig,
+    pkgJsonConfig: ViteConfiguration,
+    fileConfig: ViteConfigOverride,
+    context: BuildContext
+): InlineConfig {
+    const overrides = resolveOverrides(pkgJsonConfig, fileConfig);
+    const { omitDefault, minify, pkgViteConfig, fileViteConfig } = overrides;
+
+    const baseWithOmit = omit(
+        { ...baseConfig },
+        omitDefault.filter(k => !k.startsWith('plugins.'))
+    );
+
+    if (minify.js !== undefined) {
+        baseWithOmit.build = { ...baseWithOmit.build, minify: !!minify.js };
+    }
+    if (minify.css !== undefined) {
+        baseWithOmit.build = {
+            ...baseWithOmit.build,
+            cssMinify: !!minify.css,
+        };
+    }
+
+    const plugins = createPlugins(context, overrides);
+    baseWithOmit.plugins = plugins;
+    return mergeConfig(mergeConfig(baseWithOmit, pkgViteConfig), fileViteConfig);
+}

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

@@ -0,0 +1,85 @@
+import type { Plugin } from 'vite';
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
+import type { BuildContext } from '../../core';
+
+interface StyleData {
+    css: string;
+    attributes: Record<string, string>;
+}
+
+declare global {
+    interface Window {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        __VITE_WEB_COMPONENT_STYLES__?: Record<string, StyleData[]>;
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        __injectWebComponentStyles__?: Record<string, ((style: StyleData) => void)[]>;
+    }
+}
+
+export function cssInjectorPlugin({ build: { name, isProduction } }: BuildContext): Plugin[] {
+    if (isProduction) {
+        return [];
+    }
+
+    return cssInjectedByJsPlugin({
+        dev: {
+            enableDev: true,
+            removeStyleCodeFunction: function removeStyleCodeFunction(id: string, styleId: string) {
+                const componentName = styleId;
+                const styles = window.__VITE_WEB_COMPONENT_STYLES__?.[componentName];
+
+                if (!styles) {
+                    return;
+                }
+
+                // Find the style with matching data-vite-dev-id
+                const styleIndex = styles.findIndex(
+                    style => style.attributes['data-vite-dev-id'] === id
+                );
+
+                if (styleIndex !== -1) {
+                    // Empty the CSS content
+                    styles[styleIndex].css = '';
+
+                    // Call callbacks with empty style data
+                    const callbacks = window.__injectWebComponentStyles__?.[componentName];
+                    if (callbacks) {
+                        callbacks.forEach(callback => callback(styles[styleIndex]));
+                    }
+                }
+            },
+        },
+        styleId: name,
+        injectCodeFunction: function injectWebComponentStyles(cssCode, options) {
+            const componentName = options.styleId as string;
+            const styleData = {
+                css: cssCode,
+                attributes: options.attributes!,
+            };
+
+            // Store in array for components that haven't initialized yet
+            window.__VITE_WEB_COMPONENT_STYLES__ ??= {};
+            window.__VITE_WEB_COMPONENT_STYLES__[componentName] ??= [];
+
+            // Check if style with this data-vite-dev-id already exists
+            const devId = options.attributes!['data-vite-dev-id'];
+            const existingIndex = window.__VITE_WEB_COMPONENT_STYLES__[componentName].findIndex(
+                style => style.attributes['data-vite-dev-id'] === devId
+            );
+
+            if (existingIndex !== -1) {
+                // Update existing style
+                window.__VITE_WEB_COMPONENT_STYLES__[componentName][existingIndex] = styleData;
+            } else {
+                // Add new style
+                window.__VITE_WEB_COMPONENT_STYLES__[componentName].push(styleData);
+            }
+
+            // Call all registered callbacks with the style data
+            const callbacks = window.__injectWebComponentStyles__?.[componentName];
+            if (callbacks) {
+                callbacks.forEach(callback => callback(styleData));
+            }
+        },
+    });
+}

package/src/vite/plugins/dev-server-routing-plugin.ts

@@ -0,0 +1,89 @@
+import fs from 'fs';
+import path from 'path';
+import type { Plugin } from 'vite';
+import type { BuildContext } from '../../core';
+
+/**
+ * Configures URL rewrites and static file serving for dev and preview servers.
+ * All server middleware logic is centralized here for discoverability.
+ *
+ * - Host dev: rewrites `/shared/...` → `/dist/bundle/shared/...` (shared deps on disk)
+ * - MFE dev: strips output path prefix `/dist/bundle/full/...` → `/...`
+ * - Prod preview: serves static files (metadata.json) from the destination directory
+ */
+export function devServerRoutingPlugin(context: BuildContext): Plugin {
+    const { isProduction } = context.build;
+    const { isWebComponent, destination } = context.package;
+    let outDir = '';
+
+    return {
+        name: 'dev-server-routing',
+
+        configResolved(config) {
+            outDir = config.build.outDir;
+        },
+
+        configureServer(server) {
+            if (isWebComponent) {
+                // MFE dev: strip output path prefix so the dev server can resolve files
+                const prefix = '/' + path.relative(process.cwd(), outDir) + '/';
+
+                server.middlewares.use((req, _res, next) => {
+                    const url = req.url ?? '';
+                    if (url.startsWith(prefix)) {
+                        req.url = '/' + url.slice(prefix.length);
+                    }
+                    next();
+                });
+            } else {
+                /*
+                 * Host dev: if a file exists inside outDir (e.g. shared deps at
+                 * dist/bundle/shared/), rewrite the URL so Vite can serve it.
+                 */
+                const outDirPrefix = '/' + path.relative(process.cwd(), outDir) + '/';
+
+                server.middlewares.use((req, _res, next) => {
+                    const url = req.url ?? '';
+                    if (url !== '/' && !url.startsWith(outDirPrefix)) {
+                        const candidate = path.join(outDir, url);
+                        if (fs.existsSync(candidate) && !fs.statSync(candidate).isDirectory()) {
+                            req.url = outDirPrefix + url.slice(1);
+                        }
+                    }
+                    next();
+                });
+            }
+        },
+
+        configurePreviewServer(server) {
+            if (!isProduction || !isWebComponent) {
+                return;
+            }
+
+            // Preview: serve static files from destination that aren't in build.outDir
+            const destDir = path.resolve(destination);
+            const mountPath = '/' + path.relative(process.cwd(), destDir);
+
+            server.middlewares.use(mountPath, (req, res, next) => {
+                const filePath = path.join(destDir, req.url ?? '');
+
+                if (!fs.existsSync(filePath) || fs.statSync(filePath).isDirectory()) {
+                    return next();
+                }
+
+                const ext = path.extname(filePath);
+                const contentTypes: Record<string, string> = {
+                    '.js': 'application/javascript',
+                    '.css': 'text/css',
+                    '.json': 'application/json',
+                };
+
+                if (contentTypes[ext]) {
+                    res.setHeader('Content-Type', contentTypes[ext]);
+                }
+
+                fs.createReadStream(filePath).pipe(res);
+            });
+        },
+    };
+}

package/src/vite/plugins/externals-plugin.ts

@@ -0,0 +1,27 @@
+import type { Plugin } from 'vite';
+import { BuildContext, getExternalsMapping } from '../../core';
+
+export function externalsPlugin(context: BuildContext): Plugin[] {
+    const entries = getExternalsMapping(context);
+    if (!entries) {
+        return [];
+    }
+
+    return [
+        {
+            name: 'externals',
+            resolveId(source: string) {
+                if (source in entries) {
+                    return { id: '\0external:' + source, external: false };
+                }
+            },
+            load(id: string) {
+                if (!id.startsWith('\0external:')) {
+                    return;
+                }
+                const dep = id.slice('\0external:'.length);
+                return `module.exports = ${entries[dep]};`;
+            },
+        },
+    ];
+}

package/src/vite/plugins/html-plugin.ts

@@ -0,0 +1,65 @@
+import { Eta } from 'eta';
+import fs from 'fs';
+import path from 'path';
+import type { Plugin } from 'vite';
+import { BuildContext, getSharedEntryPoints } from '../../core';
+import type { HtmlTemplatePluginOptions } from '../../utils';
+
+export function htmlPlugin(context: BuildContext, options: HtmlTemplatePluginOptions = {}): Plugin {
+    const { isWebComponent } = context.package;
+    const { name } = context.build;
+    const { css, js } = getSharedEntryPoints(context);
+
+    const htmlTemplatePath = options.template
+        ? path.resolve(options.template)
+        : path.join(
+              path.dirname(require.resolve('@servicetitan/startup')),
+              '../src/vite/index.html'
+          );
+
+    const eta = new Eta({ views: path.dirname(htmlTemplatePath) });
+
+    function renderHtml() {
+        return eta.render(path.basename(htmlTemplatePath), {
+            title: options.title ?? 'ServiceTitan',
+            favicon: options.favicon,
+            css,
+            js,
+            isWebComponent,
+            name,
+        });
+    }
+
+    return {
+        name: 'html-template',
+        configureServer(server) {
+            return () => {
+                server.middlewares.use(async (req, res, next) => {
+                    if (req.url !== '/' && !req.url?.endsWith('.html')) {
+                        return next();
+                    }
+                    let html = renderHtml();
+                    html = await server.transformIndexHtml(req.url!, html);
+                    res.end(html);
+                });
+            };
+        },
+        // TODO: look into similarity with virtual-modules-plugin
+        resolveId(id: string, importer: string | undefined) {
+            if (id.endsWith('.html')) {
+                return path.resolve('index.html');
+            }
+            if (importer?.includes('/index.html') && id.startsWith('.')) {
+                const resolved = path.resolve(id + '.js');
+                if (fs.existsSync(resolved)) {
+                    return resolved;
+                }
+            }
+        },
+        load(id: string) {
+            if (id === path.resolve('index.html')) {
+                return renderHtml();
+            }
+        },
+    };
+}

package/src/vite/plugins/ignore-modules-plugin.ts

@@ -0,0 +1,22 @@
+import type { Plugin } from 'vite';
+import { BuildContext, checkResource } from '../../core';
+
+export function ignoreModulesPlugin(context: BuildContext): Plugin {
+    const VIRTUAL_PREFIX = '\0IGNORE';
+
+    const checker = checkResource(context);
+
+    return {
+        name: 'ignore-modules-plugin',
+        resolveId(source, importer) {
+            if (importer && checker(source, importer)) {
+                return `${VIRTUAL_PREFIX}${source}`;
+            }
+        },
+        load(id) {
+            if (id.startsWith(VIRTUAL_PREFIX)) {
+                return 'export default {}';
+            }
+        },
+    };
+}

package/src/vite/plugins/index.ts

@@ -0,0 +1,9 @@
+export * from './css-injector-plugin';
+export * from './dev-server-routing-plugin';
+export * from './externals-plugin';
+export * from './html-plugin';
+export * from './ignore-modules-plugin';
+export * from './metadata-plugin';
+export * from './style-urls-plugin';
+export * from './svgr-plugin';
+export * from './virtual-modules-plugin';

package/src/vite/plugins/metadata-plugin.ts

@@ -0,0 +1,78 @@
+import fs from 'fs';
+import path from 'path';
+import type { Plugin } from 'vite';
+import { BuildContext, generateMetadata } from '../../core';
+
+export function metadataPlugin(context: BuildContext): Plugin[] {
+    if (!context.package.isWebComponent) {
+        return [];
+    }
+
+    let outDir = '';
+
+    return [
+        {
+            name: 'entrypoints',
+            configResolved(config) {
+                outDir = config.build.outDir;
+            },
+            configureServer(server) {
+                server.httpServer?.once('listening', () => {
+                    const address = server.httpServer?.address();
+                    if (!address || typeof address === 'string') {
+                        return;
+                    }
+
+                    const entrypoints = {
+                        type: 'module',
+                        port: address.port,
+                        css: [],
+                        js: ['@vite/client', '@id/__x00__VIRTUAL./index'],
+                    };
+
+                    const entrypointsPath = path.join(outDir, 'entrypoints.json');
+                    const dir = path.dirname(entrypointsPath);
+
+                    if (!fs.existsSync(dir)) {
+                        fs.mkdirSync(dir, { recursive: true });
+                    }
+
+                    fs.writeFileSync(entrypointsPath, JSON.stringify(entrypoints, null, 2));
+
+                    // eslint-disable-next-line no-console
+                    console.log(`\nEntrypoints written to: ${entrypointsPath}`);
+
+                    generateMetadata(context);
+                });
+            },
+            writeBundle(options, bundle) {
+                if (!options.dir) {
+                    return;
+                }
+
+                const js: string[] = [];
+                const css: string[] = [];
+
+                for (const chunk of Object.values(bundle)) {
+                    if (chunk.type === 'chunk' && chunk.isEntry) {
+                        js.push(chunk.fileName);
+                    }
+                    if (chunk.type === 'asset' && chunk.fileName.endsWith('.css')) {
+                        css.push(chunk.fileName);
+                    }
+                }
+
+                fs.writeFileSync(
+                    path.join(options.dir, 'entrypoints.json'),
+                    JSON.stringify({ type: 'module', css, js }, null, 2)
+                );
+
+                generateMetadata(context);
+                fs.copyFileSync(
+                    path.join(context.package.destination, 'metadata.json'),
+                    path.join(options.dir, 'metadata.json')
+                );
+            },
+        },
+    ];
+}

package/src/vite/plugins/style-urls-plugin.ts

@@ -0,0 +1,34 @@
+import type { Plugin } from 'vite';
+import type { BuildContext } from '../../core';
+
+export function styleUrlsPlugin({
+    package: { isWebComponent },
+    build: { isProduction },
+}: BuildContext): Plugin[] {
+    if (!isWebComponent || !isProduction) {
+        return [];
+    }
+
+    return [
+        {
+            name: 'style-urls',
+            transformIndexHtml: {
+                order: 'post' as const,
+                handler(html, ctx) {
+                    const css = ctx.bundle
+                        ? Object.values(ctx.bundle)
+                              .filter(
+                                  chunk => chunk.type === 'asset' && chunk.fileName.endsWith('.css')
+                              )
+                              .map(chunk => chunk.fileName)
+                        : [];
+
+                    return html.replace(
+                        'style-urls="%5B%5D"',
+                        `style-urls="${encodeURIComponent(JSON.stringify(css))}"`
+                    );
+                },
+            },
+        },
+    ];
+}

package/src/vite/plugins/svgr-plugin.ts

@@ -0,0 +1,11 @@
+import type { Plugin } from 'vite';
+import svgr from 'vite-plugin-svgr';
+import type { SvgrPluginOptions } from '../../utils';
+
+export function svgrPlugin(options: SvgrPluginOptions = {}): Plugin {
+    return svgr({
+        include: options.include ?? ['**/*.svg?component', '**/@servicetitan/anvil2/**/*.svg'],
+        exclude: options.exclude,
+        ...(options.svgrOptions ? { svgrOptions: options.svgrOptions } : {}),
+    });
+}

package/src/vite/plugins/virtual-modules-plugin.ts

@@ -0,0 +1,74 @@
+import path from 'path';
+import type { Plugin } from 'vite';
+import { BuildContext, virtualModules } from '../../core';
+
+function devWebComponentIndexCode(code: string) {
+    const lines = code.split('\n');
+
+    const lastLineIndex = lines.length - 1;
+
+    if (lines[lastLineIndex].includes('register(App,')) {
+        lines[lastLineIndex] = lines[lastLineIndex].replace(
+            'register(App,',
+            'register(WrappedApp,'
+        );
+        lines.unshift("import { withStyleInjector } from '@servicetitan/web-components';");
+        lines.splice(lastLineIndex + 1, 0, '', 'const WrappedApp = withStyleInjector(App);', '');
+    }
+
+    return lines.join('\n');
+}
+
+export function virtualModulesPlugin(context: BuildContext): Plugin[] {
+    const VIRTUAL_PREFIX = '\0VIRTUAL';
+
+    const { destination } = context.package;
+    const { isProduction } = context.build;
+
+    const modules = virtualModules(context);
+
+    const viteModules: Record<string, string> = {};
+
+    if (modules.index) {
+        viteModules['./index'] = isProduction
+            ? modules.index
+            : devWebComponentIndexCode(modules.index);
+    }
+
+    if (modules.designSystem) {
+        viteModules['./design-system.css'] = modules.designSystem;
+    }
+
+    let rootDir = '';
+
+    if (Object.keys(viteModules).length === 0) {
+        return [];
+    }
+
+    return [
+        {
+            name: 'virtual-modules-plugin',
+            resolveId(source, importer) {
+                if (viteModules[source]) {
+                    return `${VIRTUAL_PREFIX}${source}`;
+                }
+                if (importer?.startsWith(VIRTUAL_PREFIX)) {
+                    const importerNoPrefix = importer.slice(VIRTUAL_PREFIX.length);
+                    if (viteModules[importerNoPrefix] && source.startsWith('.')) {
+                        return path.resolve(rootDir, source + '.js');
+                    }
+                }
+            },
+            load(id) {
+                if (id.startsWith(VIRTUAL_PREFIX)) {
+                    const idNoPrefix = id.slice(VIRTUAL_PREFIX.length);
+
+                    return viteModules[idNoPrefix];
+                }
+            },
+            configResolved(config) {
+                rootDir = path.join(config.root, destination);
+            },
+        },
+    ];
+}

package/src/webpack/__tests__/create-webpack-config-shared-dependencies.test.ts

@@ -10,6 +10,7 @@ import { WebpackAssetsManifest } from 'webpack-assets-manifest';
 import RemoveEmptyScriptsPlugin from 'webpack-remove-empty-scripts';
 import VirtualModulesPlugin from 'webpack-virtual-modules';
 import yargs from 'yargs';
+import { getLaunchDarklySdkVersion } from '../../core';
 import {
     getFolders,
     getPackageData,
@@ -23,7 +24,6 @@ import {
     pick,
 } from '../../utils';
 import { miniCssPluginStyleRules } from '../__mocks__';
-import { getLaunchDarklySdkVersion } from '../configs/utils/get-launchdarkly-sdk-version';
 import { createWebpackConfig } from '../index';
 import { getModuleEntryPath } from '../utils';
 
@@ -53,7 +53,7 @@ jest.mock('../../utils', () => ({
     isExposeSharedDependencies: jest.fn(),
     loadSharedDependencies: jest.fn(),
 }));
-jest.mock('../configs/utils/get-launchdarkly-sdk-version');
+jest.mock('../../core/utils/get-launchdarkly-sdk-version');
 jest.mock('../utils', () => ({
     ...jest.requireActual('../utils'),
     getCallerFile: jest.fn(),