@servicetitan/startup 36.3.1 → 37.0.0

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

@@ -0,0 +1,182 @@
+import crypto from 'crypto';
+import path from 'path';
+import { Plugin } from 'vite';
+import { bundleConstants, generateExposedDependenciesMetadata, sortSharedCss } from '../../../core';
+import { assembleIife, Expose, ModuleFactory } from './assemble-iife';
+import { assertNoDynamicCss } from './assert-no-dynamic-css';
+import { flatten } from './flatten';
+
+export interface SharedDependenciesPluginOptions {
+    dependencies: Record<string, string>;
+    css?: Record<string, string[]>;
+    metadataDir?: string;
+}
+
+// Suffix for the CJS entry files emitted by `entryFileNames` below.
+const ENTRY_FILE_SUFFIX = '.cjs.js';
+
+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[flatten(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]${ENTRY_FILE_SUFFIX}`,
+                            chunkFileNames: '_[name]-[hash].js',
+                            assetFileNames: assetInfo => {
+                                const rawName = assetInfo.names?.[0] ?? '';
+                                const ext = rawName.split('.').pop() ?? '';
+                                // Strip scope prefix added by flatten (e.g. @servicetitan-anvil2 to 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) {
+            assertNoDynamicCss(bundle);
+
+            const modules: ModuleFactory[] = [];
+            const exposes: Expose[] = [];
+
+            for (const [fileName, chunk] of Object.entries(bundle)) {
+                if (chunk.type !== 'chunk') {
+                    continue;
+                }
+                if (!chunk.isEntry) {
+                    modules.push({ id: `./${fileName}`, code: chunk.code });
+                    delete bundle[fileName];
+                }
+            }
+
+            for (const [dependency, variable] of Object.entries(dependencies)) {
+                const entryFileName = `${flatten(dependency)}${ENTRY_FILE_SUFFIX}`;
+                const chunk = bundle[entryFileName];
+                if (chunk?.type !== 'chunk') {
+                    throw new Error(
+                        `Expected entry chunk for ${dependency}, got type: ${chunk?.type ?? 'undefined'}`
+                    );
+                }
+                modules.push({ id: dependency, code: chunk.code });
+                exposes.push({ variable, dependency });
+                delete bundle[entryFileName];
+            }
+
+            for (const name of cssInputNames) {
+                delete bundle[`${name}${ENTRY_FILE_SUFFIX}`];
+            }
+
+            const code = assembleIife(modules, 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 = sortSharedCss(
+                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,
+    };
+}

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

@@ -0,0 +1,21 @@
+import type { Plugin } from 'vite';
+import type { BuildContext } from '../../core';
+import { getCssFileNames } from './utils/get-css-file-names';
+
+export function styleUrlsPlugin(context: BuildContext): Plugin | undefined {
+    const { name, isProduction } = context.build;
+    const { isWebComponent } = context.package;
+    if (isWebComponent && isProduction) {
+        return {
+            name: 'style-urls',
+            transformIndexHtml: {
+                order: 'post',
+                handler(html, ctx) {
+                    const css = getCssFileNames(ctx.bundle ?? {});
+                    const styleUrls = `style-urls="${encodeURIComponent(JSON.stringify(css))}"`;
+                    return html.replace(`<${name} />`, `<${name} ${styleUrls} />`);
+                },
+            },
+        };
+    }
+}

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/utils/get-css-file-names.ts

@@ -0,0 +1,11 @@
+export function getCssFileNames(
+    bundle: Record<string, { type: string; fileName: string }>
+): string[] {
+    const css: string[] = [];
+    for (const chunk of Object.values(bundle)) {
+        if (chunk.type === 'asset' && chunk.fileName.endsWith('.css')) {
+            css.push(chunk.fileName);
+        }
+    }
+    return css;
+}

package/src/vite/plugins/utils/import-esm.ts

@@ -0,0 +1,15 @@
+/*
+ * Load an ES module from CommonJS output. SWC rewrites a plain dynamic
+ * import() to require(), which throws on ESM-only packages (those whose
+ * package exports have no "require" entry, e.g. vite-plugin-istanbul). Hiding
+ * the import() inside a Function keeps it native so it isn't rewritten.
+ */
+// eslint-disable-next-line @typescript-eslint/no-implied-eval
+const nativeImport = new Function('specifier', 'return import(specifier)') as (
+    specifier: string
+) => Promise<unknown>;
+
+/* istanbul ignore next -- native import can't run in jest; verified at runtime */
+export function importEsm<T = unknown>(specifier: string): Promise<T> {
+    return nativeImport(specifier) as Promise<T>;
+}

package/src/vite/plugins/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './get-css-file-names';
+export * from './import-esm';

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

@@ -0,0 +1,46 @@
+import path from 'path';
+import type { Plugin } from 'vite';
+import { BuildContext, virtualModules } from '../../core';
+
+export function virtualModulesPlugin(context: BuildContext): Plugin | undefined {
+    const VIRTUAL_PREFIX = '\0VIRTUAL';
+
+    const { destination } = context.package;
+
+    const modules = virtualModules(context);
+
+    const pluginModules: Record<string, string> = {};
+
+    if (modules.index) {
+        pluginModules['./index'] = modules.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/rolldown-oxc.d.ts

@@ -0,0 +1,20 @@
+/*
+ * rolldown@1.x ships an incomplete `TransformOptions` for its `rolldown/utils` entry: it
+ * omits the `minify` and `legalComments` oxc transform options, even though the runtime
+ * honors both. Vite surfaces these options through `OxcOptions` (`Omit<TransformOptions, …>`),
+ * so the gap shows up wherever we set `oxc` (e.g. base-config.ts, build-shared-dependencies.ts).
+ *
+ * Until rolldown's published types include them, augment `TransformOptions` to match the
+ * runtime. (`moduleResolution: "node10"` previously hid this by failing to resolve
+ * `rolldown/utils` at all, leaving `OxcOptions` as `any`.)
+ */
+declare module 'rolldown/utils' {
+    import type { MinifyOptions } from 'rolldown/utils';
+
+    interface TransformOptions {
+        minify?: boolean | MinifyOptions;
+        legalComments?: 'none' | 'inline' | 'eof' | 'external' | { linked: string };
+    }
+}
+
+export {};

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/webpack/__mocks__/style-rules.ts

@@ -37,7 +37,11 @@ export const styleRules: Record<string, StyleRule> = {
                 loader: 'css-loader',
                 options: {
                     esModule: true,
-                    modules: { exportLocalsConvention: 'camelCaseOnly', namedExport: true },
+                    modules: {
+                        localIdentName: '[path][name]__[local]',
+                        exportLocalsConvention: 'camelCaseOnly',
+                        namedExport: true,
+                    },
                 },
             },
         ],
@@ -53,7 +57,11 @@ export const styleRules: Record<string, StyleRule> = {
                 loader: 'css-loader',
                 options: {
                     esModule: true,
-                    modules: { exportLocalsConvention: 'camelCaseOnly', namedExport: true },
+                    modules: {
+                        localIdentName: '[path][name]__[local]',
+                        exportLocalsConvention: 'camelCaseOnly',
+                        namedExport: true,
+                    },
                 },
             },
             'sass-loader',
@@ -70,7 +78,11 @@ export const styleRules: Record<string, StyleRule> = {
                 loader: 'css-loader',
                 options: {
                     esModule: true,
-                    modules: { exportLocalsConvention: 'camelCaseOnly', namedExport: true },
+                    modules: {
+                        localIdentName: '[path][name]__[local]',
+                        exportLocalsConvention: 'camelCaseOnly',
+                        namedExport: true,
+                    },
                 },
             },
             {

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');
@@ -224,10 +231,10 @@ describe('[startup] Cli Utils', () => {
                             await subject();
 
                             expect(createWebpackConfig).toHaveBeenCalledWith(
-                                expect.anything(),
                                 expect.objectContaining({
-                                    emitExposedDependencies: { output: prodOutput },
-                                })
+                                    configuration: expect.objectContaining({ output: prodOutput }),
+                                }),
+                                expect.objectContaining({ emitExposedDependencies: true })
                             );
                         });
                     }
@@ -255,12 +262,12 @@ describe('[startup] Cli Utils', () => {
                                 await subject();
 
                                 expect(createWebpackConfig).toHaveBeenCalledWith(
-                                    expect.anything(),
                                     expect.objectContaining({
-                                        emitExposedDependencies: {
+                                        configuration: expect.objectContaining({
                                             output: devOutput,
-                                        },
-                                    })
+                                        }),
+                                    }),
+                                    expect.objectContaining({ emitExposedDependencies: true })
                                 );
                             });
                         });
@@ -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,
                     });
                 });
             }