@servicetitan/startup 36.0.0 → 36.1.1-beta.1

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

@@ -0,0 +1,66 @@
+import fs from 'fs';
+import path from 'path';
+import type { Plugin } from 'vite';
+import { BuildContext, generateMetadata } from '../../core';
+
+export function metadataPlugin(context: BuildContext): Plugin | undefined {
+    if (!context.package.isWebComponent) {
+        return;
+    }
+
+    let outDir = '';
+
+    return {
+        name: 'metadata',
+        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 = {
+                    module: true,
+                    port: address.port,
+                    css: [],
+                    js: ['@vite/client', '@id/__x00__VIRTUAL./index'],
+                };
+
+                const entrypointsPath = path.join(outDir, 'entrypoints.json');
+                fs.mkdirSync(path.dirname(entrypointsPath), { recursive: true });
+                fs.writeFileSync(entrypointsPath, JSON.stringify(entrypoints, null, 2));
+
+                generateMetadata(context);
+            });
+        },
+        writeBundle(options, bundle) {
+            if (!options.dir) {
+                throw new Error(
+                    'web-component build requires output.dir — output.file is not supported'
+                );
+            }
+
+            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({ module: true, css, js }, null, 2)
+            );
+
+            generateMetadata(context);
+        },
+    };
+}

package/src/vite/plugins/shared-dependencies-plugin.ts

@@ -0,0 +1,273 @@
+import crypto from 'crypto';
+import path from 'path';
+import { Plugin } from 'vite';
+import { bundleConstants, generateExposedDependenciesMetadata } from '../../core';
+
+/*
+ * Replaces `/` with `-` so scoped packages stay flat in Rolldown output.
+ * Without this, `@scope/foo` emits into a subdirectory and its require()
+ * calls use `../` paths that don't match the IIFE's flat module keys.
+ */
+function flatName(dep: string) {
+    return dep.replace('/', '-');
+}
+
+export interface SharedDependenciesPluginOptions {
+    dependencies: Record<string, string>;
+    css?: Record<string, string[]>;
+    metadataDir?: string;
+}
+
+function indent(spaces: number) {
+    return ' '.repeat(spaces);
+}
+
+export function sharedDependenciesPlugin({
+    dependencies,
+    css,
+    metadataDir,
+}: SharedDependenciesPluginOptions): Plugin {
+    const CSS_VIRTUAL_PREFIX = '\0SHARED_DEPENDENCY_CSS';
+
+    const dependencyNames = Object.keys(dependencies);
+    const dependencySet = new Set(dependencyNames);
+    const cssEntries = css ?? {};
+    const cssInputNames = Object.keys(cssEntries);
+    let isProduction = false;
+
+    return {
+        name: 'shared-dependencies',
+        enforce: 'pre',
+
+        config(_, env) {
+            isProduction = env.mode === bundleConstants.mode.production;
+
+            const input: Record<string, string> = {};
+            for (const dependency of dependencyNames) {
+                input[flatName(dependency)] = dependency;
+            }
+            for (const name of cssInputNames) {
+                input[name] = CSS_VIRTUAL_PREFIX + name;
+            }
+
+            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: {
+                    rolldownOptions: {
+                        // 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 rawName = assetInfo.names?.[0] ?? '';
+                                const ext = rawName.split('.').pop() ?? '';
+                                // Strip scope prefix added by flatName (e.g. @servicetitan-anvil2 → anvil2)
+                                const name = rawName
+                                    .replace(/^@[^-]+-/, '')
+                                    .replace(/\.[^.]+$/, '');
+                                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 (dependencySet.has(source)) {
+                return { id: source, external: true };
+            }
+        },
+
+        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${indent(12)}${chunk.code}\n${indent(8)}}`
+                    );
+                    delete bundle[fileName];
+                }
+            }
+
+            for (const [dependency, variable] of Object.entries(dependencies)) {
+                const entryFileName = `${flatName(dependency)}.cjs.js`;
+                const chunk = bundle[entryFileName];
+                if (chunk?.type !== 'chunk') {
+                    throw new Error(
+                        `Expected entry chunk for ${dependency}, got type: ${chunk?.type ?? 'undefined'}`
+                    );
+                }
+                factories.push(
+                    `'${dependency}': function(module, exports, require) {\n${indent(12)}${chunk.code}\n${indent(8)}}`
+                );
+                exposes.push(`expose('${variable}', '${dependency}');`);
+                delete bundle[entryFileName];
+            }
+
+            for (const name of cssInputNames) {
+                delete bundle[`${name}.cjs.js`];
+            }
+
+            const code = assembleIIFE(factories, exposes);
+            const hash = crypto.createHash('md5').update(code).digest('hex').slice(0, 20);
+            const sharedFileName = isProduction ? `shared.${hash}.bundle.js` : 'shared.bundle.js';
+
+            this.emitFile({
+                type: 'asset',
+                fileName: sharedFileName,
+                source: code,
+            });
+
+            const cssFiles = Object.keys(bundle).filter(f => f.endsWith('.bundle.css'));
+            const entrypoints = { css: cssFiles, js: [sharedFileName] };
+            this.emitFile({
+                type: 'asset',
+                fileName: 'entrypoints.json',
+                source: JSON.stringify(entrypoints, null, 2),
+            });
+        },
+
+        writeBundle: metadataDir
+            ? options => {
+                  /*
+                   * dir is always set when build.outDir is configured (our case).
+                   * Rolldown types it as optional, but falling back to '' would
+                   * silently resolve to cwd — better to crash than write wrong metadata.
+                   */
+                  generateExposedDependenciesMetadata(metadataDir, () =>
+                      path.resolve(options.dir!, 'entrypoints.json')
+                  );
+              }
+            : undefined,
+    };
+}
+
+function assembleIIFE(factories: string[], exposes: string[]): string {
+    return `\
+(function () {
+    const STORAGE_KEY = Symbol.for('SERVICETITAN_EXPOSE_LOADER_STORAGE');
+    const g = globalThis;
+
+    if (g[STORAGE_KEY] === undefined) {
+        g[STORAGE_KEY] = Object.assign(Object.create(null), {
+            clear(scope) {
+                delete this[scope];
+            },
+        });
+    }
+
+    var storage = g[STORAGE_KEY];
+
+    var modules = {
+        ${factories.join(`,\n${indent(8)}`)}
+    };
+
+    function createScopedRequire(scope) {
+        const 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);
+            }
+
+            const module = (cache[id] = { id, loaded: false, exports: {} });
+            modules[id](module, module.exports, require);
+            module.loaded = true;
+
+            const 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(id) {
+                return id;
+            },
+        });
+        return require;
+    }
+
+    function expose(path, moduleId) {
+        const parts = path.split('.');
+        let obj = g;
+
+        for (let 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() {
+                    return storage;
+                },
+            }),
+            {
+                get(target, scope, receiver) {
+                    if (scope === 'getStorage') {
+                        return Reflect.get(target, scope, receiver);
+                    }
+                    return createScopedRequire(scope)(moduleId);
+                },
+            }
+        );
+    }
+
+    ${exposes.join(`\n${indent(4)}`)}
+})();
+`;
+}

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

@@ -0,0 +1,28 @@
+import type { Plugin } from 'vite';
+import type { BuildContext } from '../../core';
+
+// Matches the empty style-urls attribute inserted by vite/index.html for web components
+const STYLE_URLS_PLACEHOLDER = `style-urls="${encodeURIComponent('[]')}"`;
+
+export function styleUrlsPlugin(context: BuildContext): Plugin | undefined {
+    const { isProduction } = context.build;
+    const { isWebComponent } = context.package;
+    if (isWebComponent && isProduction) {
+        return {
+            name: 'style-urls',
+            transformIndexHtml: {
+                order: 'post',
+                handler(html, context) {
+                    const css = Object.values(context.bundle ?? {})
+                        .filter(chunk => chunk.type === 'asset' && chunk.fileName.endsWith('.css'))
+                        .map(chunk => chunk.fileName);
+
+                    return html.replace(
+                        STYLE_URLS_PLACEHOLDER,
+                        `style-urls="${encodeURIComponent(JSON.stringify(css))}"`
+                    );
+                },
+            },
+        };
+    }
+}

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

@@ -0,0 +1,17 @@
+import type { Plugin } from 'vite';
+import svgr from 'vite-plugin-svgr';
+import { ViteBuildContext } from '../types';
+
+export function svgrPlugin(context: ViteBuildContext): Plugin {
+    const { pluginOverrides } = context.bundlerConfig;
+    return svgr({
+        include: pluginOverrides.svgr?.include ?? [
+            '**/*.svg?component',
+            '**/@servicetitan/anvil2/**/*.svg',
+        ],
+        exclude: pluginOverrides.svgr?.exclude,
+        ...(pluginOverrides.svgr?.svgrOptions
+            ? { svgrOptions: pluginOverrides.svgr.svgrOptions }
+            : {}),
+    });
+}

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

@@ -0,0 +1,59 @@
+import path from 'path';
+import type { Plugin } from 'vite';
+import { BuildContext, virtualModules } from '../../core';
+
+function devWebComponentIndexCode(indexCode: string) {
+    let code = "import { withCssInjector } from '@servicetitan/web-components';\n" + indexCode;
+    code = code.replace(
+        /register\(App/m,
+        '\nconst WrappedApp = withCssInjector(App);\n\nregister(WrappedApp'
+    );
+    return code;
+}
+
+export function virtualModulesPlugin(context: BuildContext): Plugin | undefined {
+    const VIRTUAL_PREFIX = '\0VIRTUAL';
+
+    const { isProduction } = context.build;
+    const { destination, isWebComponent } = context.package;
+
+    const modules = virtualModules(context);
+
+    const pluginModules: Record<string, string> = {};
+
+    if (modules.index) {
+        pluginModules['./index'] = modules.index;
+        if (isWebComponent && !isProduction) {
+            pluginModules['./index'] = devWebComponentIndexCode(pluginModules['./index']);
+        }
+    }
+
+    if (modules.designSystem) {
+        pluginModules['./design-system.css'] = modules.designSystem;
+    }
+
+    if (Object.keys(pluginModules).length === 0) {
+        return;
+    }
+
+    return {
+        name: 'virtual-modules',
+        resolveId(source, importer) {
+            if (pluginModules[source]) {
+                return VIRTUAL_PREFIX + source;
+            }
+            if (importer?.startsWith(VIRTUAL_PREFIX) && source.startsWith('.')) {
+                const importerNoPrefix = importer.slice(VIRTUAL_PREFIX.length);
+                if (pluginModules[importerNoPrefix]) {
+                    return path.resolve(destination, source + '.js');
+                }
+            }
+        },
+        load(id) {
+            if (id.startsWith(VIRTUAL_PREFIX)) {
+                const idNoPrefix = id.slice(VIRTUAL_PREFIX.length);
+                return pluginModules[idNoPrefix];
+            }
+        },
+    };
+}

package/src/vite/types.ts

@@ -0,0 +1,6 @@
+import { BuildContext } from '../core';
+import { ViteBundlerConfig } from '../utils';
+
+export type ViteBuildContext = BuildContext<
+    Required<Omit<ViteBundlerConfig, 'port'>> & Pick<ViteBundlerConfig, 'port'>
+>;

package/src/vite/validate-shared-dependencies.ts

@@ -0,0 +1,27 @@
+import { getConfiguration, getWebpackConfiguration, validateSharedDependencies } from '../utils';
+
+export function validateViteSharedDependencies() {
+    validateSharedDependencies();
+
+    const config = getConfiguration();
+    const webpackSharedDependencies = getWebpackConfiguration()['shared-dependencies'];
+    const topLevelSharedDependencies = config['shared-dependencies'];
+
+    if (webpackSharedDependencies && !topLevelSharedDependencies) {
+        throw new Error(
+            'cli.webpack.shared-dependencies is set but cli.shared-dependencies is not. ' +
+                'Vite reads shared-dependencies from cli top level. ' +
+                'Move your shared-dependencies config from cli.webpack to cli.'
+        );
+    }
+
+    const webpackExpose = getWebpackConfiguration()['expose-shared-dependencies'];
+    const topLevelExpose = config['expose-shared-dependencies'];
+
+    if (webpackExpose !== undefined && topLevelExpose === undefined) {
+        throw new Error(
+            'cli.webpack.expose-shared-dependencies is set but cli.expose-shared-dependencies is not. ' +
+                'Move your expose-shared-dependencies config from cli.webpack to cli.'
+        );
+    }
+}

package/src/{cli/utils/__tests__/bundle.test.ts → webpack/__tests__/bundle-webpack.test.ts}

@@ -3,7 +3,7 @@ import path from 'path';
 import { getPortPromise } from 'portfinder';
 import webpack from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
-import { createPackage } from '../../../__mocks__';
+import { createPackage } from '../../__mocks__';
 import {
     getConfiguration,
     getFolders,
@@ -11,16 +11,20 @@ import {
     hasHeadlessBundle,
     isExposeSharedDependencies,
     loadSharedDependencies,
-} from '../../../utils';
-import { createWebpackConfig } from '../../../webpack';
-import { bundle, webpackDevConfigFileName, webpackProdConfigFileName } from '../bundle';
+} from '../../utils';
+import { bundleWebpack } from '../bundle-webpack';
+import {
+    createWebpackConfig,
+    webpackDevConfigFileName,
+    webpackProdConfigFileName,
+} from '../create-webpack-config';
 
 jest.mock('fs', () => fs);
 jest.mock('portfinder');
 jest.mock('webpack', () => jest.fn());
 jest.mock('webpack-dev-server');
-jest.mock('../../../utils', () => ({
-    ...jest.requireActual('../../../utils'),
+jest.mock('../../utils', () => ({
+    ...jest.requireActual('../../utils'),
     getFolders: jest.fn(),
     getPackageData: jest.fn(),
     hasHeadlessBundle: jest.fn(),
@@ -28,7 +32,10 @@ jest.mock('../../../utils', () => ({
     loadSharedDependencies: jest.fn(),
     log: { info: jest.fn(), debug: jest.fn() }, // suppress test output
 }));
-jest.mock('../../../webpack', () => ({ createWebpackConfig: jest.fn() }));
+jest.mock('../create-webpack-config', () => ({
+    ...jest.requireActual('../create-webpack-config'),
+    createWebpackConfig: jest.fn(),
+}));
 
 describe('[startup] Cli Utils', () => {
     const pkg = createPackage({});
@@ -61,13 +68,13 @@ describe('[startup] Cli Utils', () => {
         return packageFS({ 'web-component': true, ...configuration });
     }
 
-    describe(`${bundle.name}`, () => {
+    describe(`${bundleWebpack.name}`, () => {
         const prodConfig = { configuration: { foo: 'bar' }, plugins: { baz: 'qux' } };
         const customConfig = { configuration: { baz: 'qux' }, plugins: { foo: 'bar' } };
         const customConfigFileName = 'custom.prod.config.js';
         const stats: Partial<webpack.Stats> = { hasErrors: () => false, toString: () => 'foo' };
 
-        let options: Parameters<typeof bundle>[0];
+        let options: Parameters<typeof bundleWebpack>[0];
         let stdoutSpy: jest.SpyInstance;
 
         beforeEach(() => {
@@ -82,7 +89,7 @@ describe('[startup] Cli Utils', () => {
             jest.doMock(path.resolve(customConfigFileName), () => customConfig, { virtual: true });
         });
 
-        const subject = async () => bundle(options);
+        const subject = async () => bundleWebpack(options);
 
         test('runs webpack and outputs stats', async () => {
             const toStringSpy = jest.spyOn(stats, 'toString');
@@ -293,7 +300,7 @@ describe('[startup] Cli Utils', () => {
                 };
             });
 
-            test('builds full and "embed" packages', async () => {
+            test('builds full and light packages', async () => {
                 await subject();
 
                 expect(createWebpackConfig).toHaveBeenCalledWith(
@@ -302,7 +309,7 @@ describe('[startup] Cli Utils', () => {
                 );
                 expect(createWebpackConfig).toHaveBeenCalledWith(defaultCreateOverrides, {
                     ...defaultCreateOptions,
-                    embed: true,
+                    light: true,
                 });
                 expect(compiler.run).toHaveBeenCalledTimes(2);
             });
@@ -339,7 +346,7 @@ describe('[startup] Cli Utils', () => {
                     expect(createWebpackConfig).toHaveBeenCalledWith(overrides, createOptions);
                     expect(createWebpackConfig).toHaveBeenCalledWith(overrides, {
                         ...createOptions,
-                        embed: true,
+                        light: true,
                     });
                 });
             }
@@ -382,7 +389,7 @@ describe('[startup] Cli Utils', () => {
         });
     });
 
-    describe(`${bundle.name} (watch mode)`, () => {
+    describe(`${bundleWebpack.name} (watch mode)`, () => {
         const devConfig = {
             devServer: { host: 'http://127.0.0.0', port: '9000' },
             configuration: { foo: 'bar' },
@@ -394,7 +401,7 @@ describe('[startup] Cli Utils', () => {
             plugins: { foo: 'bar' },
         };
         const customConfigFileName = 'custom.dev.config.js';
-        let options: Parameters<typeof bundle>[0];
+        let options: Parameters<typeof bundleWebpack>[0];
 
         function stopWatching(callback?: Function) {
             setTimeout(() => callback?.(new Error('stopped')), 0);
@@ -420,7 +427,7 @@ describe('[startup] Cli Utils', () => {
         });
 
         const subject = async () => {
-            await expect(bundle({ ...options, watch: true })).rejects.toThrow('stopped');
+            await expect(bundleWebpack({ ...options, watch: true })).rejects.toThrow('stopped');
         };
 
         test('runs webpack development server', async () => {
@@ -543,7 +550,7 @@ describe('[startup] Cli Utils', () => {
                 expect(createWebpackConfig).toHaveBeenCalledWith(overrides, options);
                 expect(createWebpackConfig).toHaveBeenCalledWith(overrides, {
                     ...options,
-                    embed: true,
+                    light: true,
                 });
                 expect(webpack).toHaveBeenNthCalledWith(1, createWebpackResult);
                 expect(webpack).toHaveBeenNthCalledWith(2, createWebpackResult);
@@ -585,7 +592,7 @@ describe('[startup] Cli Utils', () => {
                     expect(createWebpackConfig).toHaveBeenCalledWith(overrides, options);
                     expect(createWebpackConfig).toHaveBeenCalledWith(overrides, {
                         ...options,
-                        embed: true,
+                        light: true,
                     });
                     expect(WebpackDevServer).not.toHaveBeenCalled();
                 });
@@ -605,7 +612,7 @@ describe('[startup] Cli Utils', () => {
                     expect(createWebpackConfig).toHaveBeenCalledWith(overrides, options);
                     expect(createWebpackConfig).toHaveBeenCalledWith(overrides, {
                         ...options,
-                        embed: true,
+                        light: true,
                     });
                 });
             }