@servicetitan/startup 36.3.1 → 37.0.0

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

@@ -0,0 +1,37 @@
+import { type InlineConfig, mergeConfig } from 'vite';
+import { createCssConfig } from '../../vite/config/create-css-config';
+import { istanbulPlugin, svgrPlugin } from '../../vite/plugins';
+import type { ViteBuildContext } from '../../vite/types';
+
+/*
+ * Dedupe and pre-bundle React so component tests load a single React instance.
+ * Mirrors how viteFinal handles Storybook, where automatic discovery can miss
+ * React in monorepos.
+ */
+const REACT_DEDUPE = ['react', 'react-dom'];
+const REACT_OPTIMIZE = [...REACT_DEDUPE, 'react/jsx-runtime'];
+
+export function viteConfig(overrides?: InlineConfig): InlineConfig {
+    const context = getContext();
+
+    const config: InlineConfig = {
+        css: createCssConfig(false),
+        resolve: { dedupe: REACT_DEDUPE },
+        optimizeDeps: { include: REACT_OPTIMIZE },
+        plugins: [svgrPlugin(context), istanbulPlugin(context)],
+    };
+
+    return mergeConfig(config, overrides ?? {});
+}
+
+function getContext(): ViteBuildContext {
+    /*
+     * svgrPlugin reads bundlerConfig.pluginOverrides and istanbulPlugin reads
+     * options.codeCoverage, so a minimal context reuses both. Component tests
+     * always instrument for coverage, matching the webpack Cypress config.
+     */
+    return {
+        options: { codeCoverage: true },
+        bundlerConfig: { pluginOverrides: {} },
+    } as ViteBuildContext;
+}

package/src/cypress/config/webpack-config.ts

@@ -5,7 +5,8 @@ import merge from 'webpack-merge';
 import { getSwcOptions } from '../../cli/tasks';
 import { TSConfig } from '../../cli/utils';
 import { getTsConfigWithFallback, log } from '../../utils';
-import { Context, JS_RULE_EXCLUDE, Overrides, rulesConfig } from '../../webpack/configs';
+import { JS_RULE_EXCLUDE, rulesConfig } from '../../webpack/configs';
+import { Overrides, WebpackBuildContext } from '../../webpack/types';
 
 export function webpackConfig(overrides?: Overrides): Configuration {
     const context = getContext();
@@ -26,20 +27,32 @@ export function webpackConfig(overrides?: Overrides): Configuration {
     return merge(config, overrides?.configuration ?? {});
 }
 
-function getContext(): Context {
+function getContext(): WebpackBuildContext {
     return {
-        codeCoverage: true,
-        destination: '',
-        isProduction: false,
-        name: '',
-        packageData: {} as any,
-        packageManager: getPackageManager(),
-        sharedDependencies: {},
-        source: '',
+        package: {
+            name: '',
+            version: '',
+            destination: '',
+            source: '',
+            dependencies: {},
+            sharedDependencies: {},
+            isWebComponent: false,
+            isLegacyRoot: false,
+            isExposeSharedDependencies: false,
+            packageManager: getPackageManager(),
+        },
+        build: {
+            name: '',
+            isProduction: false,
+        },
+        options: {
+            codeCoverage: true,
+        },
+        bundlerConfig: {},
     };
 }
 
-function getRules(context: Context, overrides: Overrides) {
+function getRules(context: WebpackBuildContext, overrides: Overrides) {
     const { rules } = rulesConfig(context, overrides);
 
     return [getSwcLoaderRule(), getSwcIstanbulRule(), ...rules];

package/src/index.ts

@@ -1,2 +1,3 @@
 export * from './utils/get-packages';
+
 export * from './webpack';

package/src/storybook-config/__tests__/vite-final.test.ts

@@ -0,0 +1,122 @@
+import type { InlineConfig } from 'vite';
+import { createCssConfig } from '../../vite/config/create-css-config';
+import { svgrPlugin } from '../../vite/plugins/svgr-plugin';
+import { viteFinal } from '../vite-final';
+
+jest.mock('../../vite/plugins/svgr-plugin', () => ({ svgrPlugin: jest.fn() }));
+
+describe(`[startup/storybook-config] ${viteFinal.name}`, () => {
+    const mockSvgrPlugin = { name: 'vite-plugin-svgr' } as any;
+    let config: InlineConfig;
+    let configType: 'DEVELOPMENT' | 'PRODUCTION' | undefined;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        jest.mocked(svgrPlugin).mockReturnValue(mockSvgrPlugin);
+        config = {};
+        configType = undefined;
+    });
+
+    const subject = () => viteFinal(config, { configType });
+
+    test('adds svgr plugin', () => {
+        expect(subject()).toEqual(expect.objectContaining({ plugins: [mockSvgrPlugin] }));
+    });
+
+    test('dedupes react', () => {
+        expect(subject()).toEqual(
+            expect.objectContaining({ resolve: { dedupe: ['react', 'react-dom'] } })
+        );
+    });
+
+    test('pre-bundles react', () => {
+        expect(subject()).toEqual(
+            expect.objectContaining({
+                optimizeDeps: { include: ['react', 'react-dom', 'react/jsx-runtime'] },
+            })
+        );
+    });
+
+    describe.each([
+        ['DEVELOPMENT', false],
+        ['PRODUCTION', true],
+    ] as const)('when configType is %s', (type, isProduction) => {
+        const cssConfig = createCssConfig(isProduction);
+
+        beforeEach(() => (configType = type));
+
+        test('adds the css modules', () => {
+            const { modules } = cssConfig;
+
+            expect(subject()).toEqual(
+                expect.objectContaining({ css: expect.objectContaining({ modules }) })
+            );
+        });
+
+        test('adds the preprocessor options', () => {
+            const { preprocessorOptions } = cssConfig;
+
+            expect(subject()).toEqual(
+                expect.objectContaining({ css: expect.objectContaining({ preprocessorOptions }) })
+            );
+        });
+    });
+
+    describe('when config already contains css preprocessor options', () => {
+        const scssOptions = { quietDeps: true };
+
+        beforeEach(() => (config = { css: { preprocessorOptions: { scss: scssOptions } } }));
+
+        test('preserves existing preprocessor options', () => {
+            const { preprocessorOptions } = createCssConfig(false);
+
+            expect(subject()).toEqual(
+                expect.objectContaining({
+                    css: expect.objectContaining({
+                        preprocessorOptions: {
+                            ...config.css?.preprocessorOptions,
+                            ...preprocessorOptions,
+                        },
+                    }),
+                })
+            );
+        });
+    });
+
+    describe('when config already contains plugins', () => {
+        const existingPlugin = { name: 'existing' };
+
+        beforeEach(() => (config = { plugins: [existingPlugin] }));
+
+        test('preserves existing plugins', () => {
+            expect(subject()).toEqual(
+                expect.objectContaining({ plugins: [existingPlugin, mockSvgrPlugin] })
+            );
+        });
+    });
+
+    describe('when config already contains resolve.dedupe', () => {
+        beforeEach(() => (config = { resolve: { dedupe: ['lodash', 'react'] } }));
+
+        test('merges react without duplicating existing entries', () => {
+            expect((subject().resolve as { dedupe: string[] }).dedupe).toEqual([
+                'lodash',
+                'react',
+                'react-dom',
+            ]);
+        });
+    });
+
+    describe('when config already contains optimizeDeps.include', () => {
+        beforeEach(() => (config = { optimizeDeps: { include: ['lodash', 'react'] } }));
+
+        test('merges react without duplicating existing entries', () => {
+            expect((subject().optimizeDeps as { include: string[] }).include).toEqual([
+                'lodash',
+                'react',
+                'react-dom',
+                'react/jsx-runtime',
+            ]);
+        });
+    });
+});

package/src/storybook-config/__tests__/webpack-final.test.ts

@@ -1,6 +1,7 @@
 import type { Configuration } from 'webpack';
-import { Overrides, rulesConfig } from '../../webpack/configs';
+import { rulesConfig } from '../../webpack/configs';
 import { miniCssExtractPlugin } from '../../webpack/configs/plugins';
+import { Overrides } from '../../webpack/types';
 import { webpackFinal } from '../webpack-final';
 
 jest.mock('@servicetitan/install');
@@ -50,31 +51,6 @@ describe(`[startup/storybook-config] ${webpackFinal.name}`, () => {
         );
     });
 
-    describe('when config has optimization settings', () => {
-        beforeEach(() => {
-            config.optimization = { sideEffects: true, splitChunks: { chunks: 'all' } };
-        });
-
-        describe('when mode is development', () => {
-            beforeEach(() => (config.mode = 'development'));
-
-            test('disables sideEffects to preserve CSS imports from barrel files', () => {
-                expect(subject().optimization).toEqual({
-                    ...config.optimization,
-                    sideEffects: false,
-                });
-            });
-        });
-
-        describe('when mode is production', () => {
-            beforeEach(() => (config.mode = 'production'));
-
-            test('does not change sideEffects', () => {
-                expect(subject().optimization).toEqual(config.optimization);
-            });
-        });
-    });
-
     test('adds MiniCssExtractPlugin to config', () => {
         expect(subject().plugins).toEqual([mockMiniCssExtractPlugin]);
     });
@@ -117,7 +93,9 @@ describe(`[startup/storybook-config] ${webpackFinal.name}`, () => {
             subject();
 
             expect(rulesConfig).toHaveBeenCalledWith(
-                expect.objectContaining({ isProduction: true }),
+                expect.objectContaining({
+                    build: expect.objectContaining({ isProduction: true }),
+                }),
                 expect.anything()
             );
         });

package/src/storybook-config/index.ts

@@ -1,2 +1,3 @@
 export * from './swc';
+export * from './vite-final';
 export * from './webpack-final';

package/src/storybook-config/vite-final.ts

@@ -0,0 +1,65 @@
+import { inspect } from 'node:util';
+import type { InlineConfig } from 'vite';
+import { log } from '../utils';
+import { createCssConfig } from '../vite/config/create-css-config';
+import { svgrPlugin } from '../vite/plugins/svgr-plugin';
+import type { ViteBuildContext } from '../vite/types';
+
+interface ViteFinalOptions {
+    /*
+     * Storybook signals the build type through `configType`, not Vite's
+     * `config.mode` (which Storybook's Vite builder leaves unset).
+     */
+    configType?: 'DEVELOPMENT' | 'PRODUCTION';
+}
+
+/*
+ * Pre-bundle and dedupe React so the Storybook preview loads a single React
+ * instance. Storybook leaves this to Vite's automatic discovery, which can miss
+ * React in monorepos.
+ */
+const REACT_DEDUPE = ['react', 'react-dom'];
+const REACT_OPTIMIZE = [...REACT_DEDUPE, 'react/jsx-runtime'];
+
+export function viteFinal(
+    config: InlineConfig,
+    { configType }: ViteFinalOptions = {}
+): InlineConfig {
+    const isProduction = configType === 'PRODUCTION';
+    const css = createCssConfig(isProduction);
+    const plugins = [svgrPlugin(getContext())];
+
+    const merged: InlineConfig = {
+        ...config,
+        css: {
+            ...config.css,
+            modules: css.modules,
+            preprocessorOptions: {
+                ...config.css?.preprocessorOptions,
+                ...css.preprocessorOptions,
+            },
+        },
+        resolve: {
+            ...config.resolve,
+            dedupe: [...new Set([...(config.resolve?.dedupe ?? []), ...REACT_DEDUPE])],
+        },
+        optimizeDeps: {
+            ...config.optimizeDeps,
+            include: [...new Set([...(config.optimizeDeps?.include ?? []), ...REACT_OPTIMIZE])],
+        },
+        plugins: [...(config.plugins ?? []), ...plugins],
+    };
+
+    /* istanbul ignore next: debug only */
+    log.debug('storybook-config:vite-final', () => inspect({ merged }, { depth: null }));
+
+    return merged;
+}
+
+function getContext(): ViteBuildContext {
+    /*
+     * svgrPlugin only reads bundlerConfig.pluginOverrides, so a minimal context
+     * is enough to reuse it with startup's default SVG include patterns.
+     */
+    return { bundlerConfig: { pluginOverrides: {} } } as ViteBuildContext;
+}

package/src/storybook-config/webpack-final.ts

@@ -2,8 +2,9 @@ import { getPackageManager } from '@servicetitan/install';
 import { inspect } from 'node:util';
 import type { Configuration } from 'webpack';
 import { log } from '../utils';
-import { Context, Overrides, rulesConfig } from '../webpack/configs';
+import { rulesConfig } from '../webpack/configs';
 import { miniCssExtractPlugin } from '../webpack/configs/plugins';
+import { Overrides, WebpackBuildContext } from '../webpack/types';
 
 export function webpackFinal(config: Configuration, overrides: Overrides = {}): Configuration {
     const context = getContext(config);
@@ -15,10 +16,6 @@ export function webpackFinal(config: Configuration, overrides: Overrides = {}):
 
     return {
         ...config,
-        optimization: {
-            ...config.optimization,
-            ...(config.mode !== 'production' ? { sideEffects: false } : {}),
-        },
         module: {
             ...config.module,
             rules: [...transformDefaultRules(config.module?.rules), ...rules],
@@ -27,23 +24,34 @@ export function webpackFinal(config: Configuration, overrides: Overrides = {}):
     };
 }
 
-function getContext(config: Configuration): Context {
+function getContext(config: Configuration): WebpackBuildContext {
     return {
-        destination: '',
-        isProduction: config.mode === 'production',
-        name: '',
-        packageData: {} as any,
-        packageManager: getPackageManager(),
-        sharedDependencies: {},
-        source: '',
+        package: {
+            name: '',
+            version: '',
+            destination: '',
+            source: '',
+            dependencies: {},
+            sharedDependencies: {},
+            isWebComponent: false,
+            isLegacyRoot: false,
+            isExposeSharedDependencies: false,
+            packageManager: getPackageManager(),
+        },
+        build: {
+            name: '',
+            isProduction: config.mode === 'production',
+        },
+        options: {},
+        bundlerConfig: {},
     };
 }
 
-function getPlugins(context: Context, overrides: Overrides) {
+function getPlugins(context: WebpackBuildContext, overrides: Overrides) {
     return [miniCssExtractPlugin(context, overrides)].filter(plugin => !!plugin);
 }
 
-function getRules(context: Context, overrides: Overrides) {
+function getRules(context: WebpackBuildContext, overrides: Overrides) {
     const include = ['.module.css', '.module.less', '.less', '.module.scss', '.scss', '.svg'];
     const exclude = ['.css'];
 

package/src/utils/__tests__/get-configuration.test.ts

@@ -4,20 +4,22 @@ import {
     getConfiguration,
     getConfigurationSafe,
     getESLintConfiguration,
+    getExposeProcessEnv,
     getJestConfiguration,
     getReviewConfiguration,
     getStylelintConfiguration,
+    getViteConfiguration,
     getVitestConfiguration,
     getWebComponentBranchConfigs,
     getWebComponentConfiguration,
     hasHeadlessBundle,
     isBundle,
-    isCustomStyleRules,
     isDevServerDisabled,
     isExposeSharedDependencies,
     isLegacy,
     isLegacyRoot,
     isStyleCheckDisabled,
+    isViteDevServerDisabled,
     isWebComponent,
 } from '../get-configuration';
 import { log } from '../log';
@@ -225,6 +227,45 @@ describe('[startup] Utils', () => {
         });
     });
 
+    describe(getExposeProcessEnv.name, () => {
+        const subject = () => getExposeProcessEnv();
+
+        itReturns(subject, []);
+
+        describe('with "cli.expose-process-env"', () => {
+            const content = { cli: { 'expose-process-env': ['API_URL', 'FEATURE_FLAG'] } };
+
+            beforeEach(() => mockPackageJson(content));
+
+            test('returns "cli.expose-process-env"', () => {
+                expect(subject()).toEqual(content.cli['expose-process-env']);
+            });
+        });
+    });
+
+    describe(getViteConfiguration.name, () => {
+        const subject = () => getViteConfiguration();
+
+        itReturns(subject, {});
+
+        describe('with "cli.vite"', () => {
+            const content = {
+                cli: {
+                    vite: {
+                        omitDefault: ['plugins.svgr'],
+                        config: { server: { port: 9000 }, build: { minify: false } },
+                    },
+                },
+            };
+
+            beforeEach(() => mockPackageJson(content));
+
+            test('returns "cli.vite"', () => {
+                expect(subject()).toEqual(content.cli.vite);
+            });
+        });
+    });
+
     describe(getVitestConfiguration.name, () => {
         const subject = () => getVitestConfiguration();
 
@@ -390,24 +431,22 @@ describe('[startup] Utils', () => {
 
     describe.each([
         {
-            fn: isBundle,
-            defaultValue: true,
-            trigger: { cli: { webpack: false } },
-        },
-        {
-            fn: isCustomStyleRules,
+            fn: isDevServerDisabled,
             defaultValue: false,
-            trigger: { cli: { webpack: { 'custom-style-rules': true } } },
+            trigger: { cli: { webpack: { devServer: false } } },
         },
         {
-            fn: isDevServerDisabled,
+            fn: isViteDevServerDisabled,
             defaultValue: false,
-            trigger: { cli: { webpack: { devServer: false } } },
+            trigger: { cli: { vite: { devServer: false } } },
         },
         {
             fn: isExposeSharedDependencies,
             defaultValue: false,
-            trigger: { cli: { webpack: { 'expose-shared-dependencies': true } } },
+            trigger: [
+                { cli: { 'expose-shared-dependencies': true } },
+                { cli: { webpack: { 'expose-shared-dependencies': true } } },
+            ],
         },
         {
             fn: isLegacy,
@@ -465,4 +504,63 @@ describe('[startup] Utils', () => {
             });
         });
     });
+
+    describe(isBundle.name, () => {
+        let json: Record<string, any>;
+
+        beforeEach(() => {
+            json = { name: '{packageName}', cli: {} };
+            mockPackageJson(json);
+        });
+
+        const subject = () => isBundle();
+
+        itReturns(subject, true);
+
+        describe('when cli.webpack is false', () => {
+            beforeEach(() => {
+                json.cli.webpack = false;
+                mockPackageJson(json);
+            });
+
+            itReturns(subject, false);
+
+            describe('when cli.vite is truthy', () => {
+                beforeEach(() => {
+                    json.cli.vite = {};
+                    mockPackageJson(json);
+                });
+
+                test('throws error', () => {
+                    expect(subject).toThrow(
+                        `package ${json.name} has conflicting webpack and vite configurations: ` +
+                            `cli.webpack is false but cli.vite is not`
+                    );
+                });
+            });
+        });
+
+        describe('when cli.vite is false', () => {
+            beforeEach(() => {
+                json.cli.vite = false;
+                mockPackageJson(json);
+            });
+
+            itReturns(subject, false);
+
+            describe('when cli.webpack is truthy', () => {
+                beforeEach(() => {
+                    json.cli.webpack = {};
+                    mockPackageJson(json);
+                });
+
+                test('throws error', () => {
+                    expect(subject).toThrow(
+                        `package ${json.name} has conflicting webpack and vite configurations: ` +
+                            `cli.vite is false but cli.webpack is not`
+                    );
+                });
+            });
+        });
+    });
 });

package/src/utils/__tests__/get-package-data.test.ts

@@ -32,7 +32,7 @@ describe(`[startup] Utils`, () => {
             });
         });
 
-        describe(`when ${packageJson} contains sharedDependencies`, () => {
+        describe(`when ${packageJson} contains cli.webpack.sharedDependencies`, () => {
             const sharedDependencies = { react: 'SharedDependencies.React' };
 
             beforeEach(() => {
@@ -45,5 +45,39 @@ describe(`[startup] Utils`, () => {
                 expect(subject()).toEqual(expect.objectContaining({ sharedDependencies }));
             });
         });
+
+        describe(`when ${packageJson} contains cli.sharedDependencies`, () => {
+            const sharedDependencies = { mobx: 'SharedDependencies.MobX' };
+
+            beforeEach(() => {
+                Object.assign(packages[packageJson], {
+                    cli: { 'shared-dependencies': sharedDependencies },
+                });
+            });
+
+            test('returns sharedDependencies', () => {
+                expect(subject()).toEqual(expect.objectContaining({ sharedDependencies }));
+            });
+        });
+
+        describe(`when ${packageJson} contains cli.sharedDependencies and cli.webpack.sharedDependencies`, () => {
+            const topLevel = { react: 'SharedDependencies.React' };
+            const webpack = { mobx: 'SharedDependencies.MobX' };
+
+            beforeEach(() => {
+                Object.assign(packages[packageJson], {
+                    cli: {
+                        'shared-dependencies': topLevel,
+                        'webpack': { 'shared-dependencies': webpack },
+                    },
+                });
+            });
+
+            test('returns cli.sharedDependencies', () => {
+                expect(subject()).toEqual(
+                    expect.objectContaining({ sharedDependencies: topLevel })
+                );
+            });
+        });
     });
 });

package/src/utils/__tests__/get-package-name.test.ts

@@ -0,0 +1,57 @@
+import { fs, vol } from 'memfs';
+import { getPackageName } from '../get-package-name';
+import { LocationOrJson } from '../types';
+
+jest.mock('fs', () => fs);
+
+describe(getPackageName.name, () => {
+    let locationOrJson: LocationOrJson | undefined;
+
+    beforeEach(() => {
+        vol.reset();
+        locationOrJson = undefined;
+    });
+
+    const subject = () => getPackageName(locationOrJson);
+
+    describe('with a JSON object', () => {
+        beforeEach(() => (locationOrJson = { name: 'foo' }));
+
+        test('returns "name" property', () => {
+            expect(subject()).toBe((locationOrJson as Record<string, any>).name);
+        });
+    });
+
+    describe('when name is not present', () => {
+        beforeEach(() => (locationOrJson = {}));
+
+        test('returns empty string', () => {
+            expect(subject()).toBe('');
+        });
+    });
+
+    describe('with a location', () => {
+        const packageJson = { name: 'bar' };
+
+        beforeEach(() => {
+            locationOrJson = 'packages/foo';
+            vol.fromJSON({
+                [`${locationOrJson as string}/package.json`]: JSON.stringify(packageJson),
+            });
+        });
+
+        test('returns "name" from location\'s package.json', () => {
+            expect(subject()).toBe(packageJson.name);
+        });
+    });
+
+    describe('with no argument', () => {
+        const packageJson = { name: 'baz' };
+
+        beforeEach(() => vol.fromJSON({ 'package.json': JSON.stringify(packageJson) }));
+
+        test('returns "name" from current package.json', () => {
+            expect(subject()).toBe(packageJson.name);
+        });
+    });
+});