@servicetitan/startup 34.2.0 → 34.3.0-beta.0

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

@@ -1,5 +1,6 @@
 import type { Configuration } from 'webpack';
-import { Overrides, rulesConfig } from '../../webpack/configs';
+import { rulesConfig } from '../../webpack/configs';
+import { Overrides } from '../../webpack/types';
 import { miniCssExtractPlugin } from '../../webpack/configs/plugins';
 import { webpackFinal } from '../webpack-final';
 
@@ -89,7 +90,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/webpack-final.ts

@@ -1,8 +1,10 @@
 import { inspect } from 'node:util';
 import type { Configuration } from 'webpack';
+import { BuildContext } from '../core';
 import { log } from '../utils';
-import { Context, Overrides, rulesConfig } from '../webpack/configs';
+import { rulesConfig } from '../webpack/configs';
 import { miniCssExtractPlugin } from '../webpack/configs/plugins';
+import { Overrides } from '../webpack/types';
 
 export function webpackFinal(config: Configuration, overrides: Overrides = {}): Configuration {
     const context = getContext(config);
@@ -22,22 +24,34 @@ export function webpackFinal(config: Configuration, overrides: Overrides = {}):
     };
 }
 
-function getContext(config: Configuration): Context {
+function getContext(config: Configuration): BuildContext {
     return {
-        destination: '',
-        isProduction: config.mode === 'production',
-        name: '',
-        packageData: {} as any,
-        sharedDependencies: {},
-        source: '',
+        package: {
+            name: '',
+            version: '',
+            destination: '',
+            source: '',
+            dependencies: {},
+            sharedDependencies: {},
+            isWebComponent: false,
+            isLegacyRoot: false,
+            isExposeSharedDependencies: false,
+        },
+        build: {
+            name: '',
+            isProduction: config.mode === 'production',
+        },
+        options: {
+            bundlerConfig: {},
+        },
     };
 }
 
-function getPlugins(context: Context, overrides: Overrides) {
+function getPlugins(context: BuildContext, overrides: Overrides) {
     return [miniCssExtractPlugin(context, overrides)].filter(plugin => !!plugin);
 }
 
-function getRules(context: Context, overrides: Overrides) {
+function getRules(context: BuildContext, overrides: Overrides) {
     const include = ['.module.css', '.module.less', '.less', '.svg'];
     const exclude = ['.css'];
 

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

@@ -7,6 +7,7 @@ import {
     getJestConfiguration,
     getReviewConfiguration,
     getStylelintConfiguration,
+    getViteConfiguration,
     getVitestConfiguration,
     getWebComponentBranchConfigs,
     getWebComponentConfiguration,
@@ -19,6 +20,8 @@ import {
     isLegacyRoot,
     isStyleCheckDisabled,
     isWebComponent,
+    validateSharedDependenciesConsistency,
+    validateSharedDependenciesMigration,
 } from '../get-configuration';
 import { log } from '../log';
 
@@ -225,6 +228,29 @@ describe('[startup] Utils', () => {
         });
     });
 
+    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();
 
@@ -407,7 +433,10 @@ describe('[startup] Utils', () => {
         {
             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,
@@ -446,6 +475,75 @@ describe('[startup] Utils', () => {
         });
     });
 
+    describe(validateSharedDependenciesConsistency.name, () => {
+        test('passes when neither is set', () => {
+            expect(() => validateSharedDependenciesConsistency()).not.toThrow();
+        });
+
+        test('passes when only cli top level is set', () => {
+            mockPackageJson({ cli: { 'shared-dependencies': { defaults: '' } } });
+            expect(() => validateSharedDependenciesConsistency()).not.toThrow();
+        });
+
+        test('passes when only cli.webpack is set', () => {
+            mockPackageJson({ cli: { webpack: { 'shared-dependencies': { defaults: '' } } } });
+            expect(() => validateSharedDependenciesConsistency()).not.toThrow();
+        });
+
+        test('passes when both are set and identical', () => {
+            const deps = { defaults: '', lodash: 'SharedDependencies.Lodash' };
+            mockPackageJson({
+                cli: { 'shared-dependencies': deps, 'webpack': { 'shared-dependencies': deps } },
+            });
+            expect(() => validateSharedDependenciesConsistency()).not.toThrow();
+        });
+
+        test('throws when shared-dependencies both exist and differ', () => {
+            mockPackageJson({
+                cli: {
+                    'shared-dependencies': { defaults: '' },
+                    'webpack': { 'shared-dependencies': { defaults: '', extra: 'foo' } },
+                },
+            });
+            expect(() => validateSharedDependenciesConsistency()).toThrow(/both set but differ/);
+        });
+
+        test('throws when expose-shared-dependencies both exist and differ', () => {
+            mockPackageJson({
+                cli: {
+                    'expose-shared-dependencies': true,
+                    'webpack': { 'expose-shared-dependencies': false },
+                },
+            });
+            expect(() => validateSharedDependenciesConsistency()).toThrow(/both set but differ/);
+        });
+    });
+
+    describe(validateSharedDependenciesMigration.name, () => {
+        test('passes when neither is set', () => {
+            expect(() => validateSharedDependenciesMigration()).not.toThrow();
+        });
+
+        test('passes when only cli top level is set', () => {
+            mockPackageJson({ cli: { 'expose-shared-dependencies': true } });
+            expect(() => validateSharedDependenciesMigration()).not.toThrow();
+        });
+
+        test('throws when webpack shared-dependencies is set but top level is not', () => {
+            mockPackageJson({ cli: { webpack: { 'shared-dependencies': { defaults: '' } } } });
+            expect(() => validateSharedDependenciesMigration()).toThrow(
+                /Move your shared-dependencies/
+            );
+        });
+
+        test('throws when webpack expose-shared-dependencies is set but top level is not', () => {
+            mockPackageJson({ cli: { webpack: { 'expose-shared-dependencies': true } } });
+            expect(() => validateSharedDependenciesMigration()).toThrow(
+                /Move your expose-shared-dependencies/
+            );
+        });
+    });
+
     describe(isLegacy.name, () => {
         const trigger = { cli: { legacy: true } };
         let location: string | undefined;

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 sharedDependencies in cli.webpack`, () => {
             const sharedDependencies = { react: 'SharedDependencies.React' };
 
             beforeEach(() => {
@@ -45,6 +45,40 @@ describe(`[startup] Utils`, () => {
                 expect(subject()).toEqual(expect.objectContaining({ sharedDependencies }));
             });
         });
+
+        describe(`when ${packageJson} contains sharedDependencies in cli top level`, () => {
+            const sharedDependencies = { mobx: 'SharedDependencies.MobX' };
+
+            beforeEach(() => {
+                Object.assign(packages[packageJson], {
+                    cli: { 'shared-dependencies': sharedDependencies },
+                });
+            });
+
+            test('returns sharedDependencies from cli top level', () => {
+                expect(subject()).toEqual(expect.objectContaining({ sharedDependencies }));
+            });
+        });
+
+        describe(`when ${packageJson} contains sharedDependencies in both locations`, () => {
+            const topLevel = { react: 'SharedDependencies.React' };
+            const webpack = { mobx: 'SharedDependencies.MobX' };
+
+            beforeEach(() => {
+                Object.assign(packages[packageJson], {
+                    cli: {
+                        'shared-dependencies': topLevel,
+                        'webpack': { 'shared-dependencies': webpack },
+                    },
+                });
+            });
+
+            test('prefers cli top level', () => {
+                expect(subject()).toEqual(
+                    expect.objectContaining({ sharedDependencies: topLevel })
+                );
+            });
+        });
     });
 
     describe(`${getPackageDependencyVersion.name}`, () => {

package/src/utils/get-configuration.ts

@@ -38,6 +38,7 @@ export interface WebpackConfiguration extends Omit<
     'disable-style-check'?: boolean;
     'minify'?: MinifyOptions;
     'proxy'?: WebpackDevServerConfiguration['proxy'] | string;
+    'shared-dependencies'?: Record<string, string>;
 }
 
 export interface ESLintConfiguration extends ESLint.Options {
@@ -62,6 +63,7 @@ export interface NodeConfiguration {
 export enum CommandName {
     'build' = 'build',
     'bundle-package' = 'bundle-package',
+    'bundle-vite' = 'bundle-vite',
     'clean' = 'clean',
     'convert-eslint-config' = 'convert-eslint-config',
     'eslint' = 'eslint',
@@ -91,6 +93,30 @@ export type VitestConfiguration = ViteUserConfig['test'] & {
     omitDefault?: string[];
 };
 
+export interface HtmlTemplatePluginOptions {
+    title?: string;
+    favicon?: string;
+    template?: string;
+}
+
+export interface SvgrPluginOptions {
+    include?: string | RegExp | (string | RegExp)[];
+    exclude?: string | RegExp | (string | RegExp)[];
+    svgrOptions?: Record<string, any>;
+}
+
+export interface PluginOverrides {
+    htmlTemplate?: HtmlTemplatePluginOptions;
+    svgr?: SvgrPluginOptions;
+}
+
+export interface ViteConfiguration {
+    omitDefault?: string[];
+    minify?: MinifyOptions;
+    pluginOverrides?: PluginOverrides;
+    config?: Omit<import('vite').UserConfig, 'plugins'>;
+}
+
 export interface WebComponentBranchConfigs {
     publishTag?: string;
     uploadSourcemaps?: boolean;
@@ -113,6 +139,9 @@ type Configuration = {
     'swc-compile-package'?: Parameters<typeof swcDir>[0];
     'test'?: JestConfiguration; // for backward-compatibility
     'testRunner'?: string;
+    'expose-shared-dependencies'?: boolean;
+    'shared-dependencies'?: Record<string, string>;
+    'vite'?: ViteConfiguration;
     'vitest'?: VitestConfiguration;
     'web-component'?: boolean | string | WebComponentOptions;
     'webpack'?: false | WebpackConfiguration;
@@ -155,6 +184,10 @@ export function getStylelintConfiguration() {
     return getConfiguration().lint?.stylelint ?? {};
 }
 
+export function getViteConfiguration(): ViteConfiguration {
+    return getConfiguration().vite ?? {};
+}
+
 export function getVitestConfiguration() {
     return getConfiguration().vitest ?? {};
 }
@@ -225,7 +258,65 @@ export function isDevServerDisabled() {
 }
 
 export function isExposeSharedDependencies() {
-    return getWebpackConfiguration()['expose-shared-dependencies'] === true;
+    return (
+        (getConfiguration()['expose-shared-dependencies'] ??
+            getWebpackConfiguration()['expose-shared-dependencies']) === true
+    );
+}
+
+export function validateSharedDependenciesConsistency() {
+    const config = getConfiguration();
+    const webpackSharedDependencies = getWebpackConfiguration()['shared-dependencies'];
+    const topLevelSharedDependencies = config['shared-dependencies'];
+
+    if (
+        webpackSharedDependencies &&
+        topLevelSharedDependencies &&
+        JSON.stringify(webpackSharedDependencies) !== JSON.stringify(topLevelSharedDependencies)
+    ) {
+        throw new Error(
+            'cli.shared-dependencies and cli.webpack.shared-dependencies are both set but differ. ' +
+                'Remove cli.webpack.shared-dependencies and use cli.shared-dependencies only.'
+        );
+    }
+
+    const webpackExpose = getWebpackConfiguration()['expose-shared-dependencies'];
+    const topLevelExpose = config['expose-shared-dependencies'];
+
+    if (
+        webpackExpose !== undefined &&
+        topLevelExpose !== undefined &&
+        webpackExpose !== topLevelExpose
+    ) {
+        throw new Error(
+            'cli.expose-shared-dependencies and cli.webpack.expose-shared-dependencies are both set but differ. ' +
+                'Remove cli.webpack.expose-shared-dependencies and use cli.expose-shared-dependencies only.'
+        );
+    }
+}
+
+export function validateSharedDependenciesMigration() {
+    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.'
+        );
+    }
 }
 
 export function isLegacy(locationOrJson?: LocationOrJson) {

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

@@ -17,7 +17,9 @@ export function getPackageData(): PackageData {
             ...readJson('../../package.json').dependencies,
             ...packageJson.dependencies,
         },
-        sharedDependencies: packageJson.cli?.webpack?.['shared-dependencies'],
+        sharedDependencies:
+            packageJson.cli?.['shared-dependencies'] ??
+            packageJson.cli?.webpack?.['shared-dependencies'],
     };
 }
 

package/src/vite/__tests__/define-config.test.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from '../define-config';
+
+describe('defineConfig', () => {
+    test('returns object config as-is', () => {
+        const config = { config: { build: { minify: false } } };
+        expect(defineConfig(config)).toBe(config);
+    });
+
+    test('returns function config as-is', () => {
+        const fn = () => ({ config: { build: { minify: false } } });
+        expect(defineConfig(fn)).toBe(fn);
+    });
+});

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

@@ -0,0 +1,115 @@
+import { fs, vol } from 'memfs';
+import { loadConfigFile } from '../load-config-file';
+
+jest.mock('fs', () => fs);
+
+jest.mock('../load-config-file', () => {
+    const realPath = jest.requireActual('path') as typeof import('path');
+
+    return {
+        // eslint-disable-next-line @typescript-eslint/require-await
+        loadConfigFile: async (root: string, isProduction: boolean) => {
+            const candidates = isProduction
+                ? ['vite.prod.config.ts', 'vite.prod.config.js']
+                : ['vite.dev.config.ts', 'vite.dev.config.js'];
+
+            const configPath = candidates
+                .map((f: string) => realPath.join(root, f))
+                .find((f: string) => {
+                    try {
+                        fs.statSync(f);
+                        return true;
+                    } catch {
+                        return false;
+                    }
+                });
+
+            if (!configPath) {
+                return undefined;
+            }
+
+            const content = fs.readFileSync(configPath, 'utf-8') as string;
+
+            // Parse simple export default { ... } or export default (ctx) => ...
+            if (content.includes('=>')) {
+                // Function export
+                // eslint-disable-next-line @typescript-eslint/no-implied-eval
+                return new Function('return ' + content.replace('export default ', ''))();
+            }
+
+            // Object export — extract the object literal
+            const match = content.match(/export default\s+({[\s\S]*});?\s*$/);
+            if (match) {
+                // eslint-disable-next-line @typescript-eslint/no-implied-eval
+                return new Function('return ' + match[1])();
+            }
+
+            return undefined;
+        },
+    };
+});
+
+describe('loadConfigFile', () => {
+    afterEach(() => vol.reset());
+
+    test('returns undefined when no config file exists', async () => {
+        vol.fromJSON({ '/project/dummy': '' });
+        const result = await loadConfigFile('/project', true);
+        expect(result).toBeUndefined();
+    });
+
+    test('loads prod config file', async () => {
+        vol.fromJSON({
+            '/project/vite.prod.config.ts':
+                'export default { config: { build: { minify: false } } };',
+        });
+        const result = await loadConfigFile('/project', true);
+        expect(result).toEqual({ config: { build: { minify: false } } });
+    });
+
+    test('loads dev config when isProduction is false', async () => {
+        vol.fromJSON({
+            '/project/vite.dev.config.ts': 'export default { config: { server: { port: 3000 } } };',
+        });
+        const result = await loadConfigFile('/project', false);
+        expect(result).toEqual({ config: { server: { port: 3000 } } });
+    });
+
+    test('prefers .ts over .js', async () => {
+        vol.fromJSON({
+            '/project/vite.prod.config.ts':
+                'export default { config: { build: { minify: true } } };',
+            '/project/vite.prod.config.js':
+                'export default { config: { build: { minify: false } } };',
+        });
+        const result = await loadConfigFile('/project', true);
+        expect(result).toEqual({ config: { build: { minify: true } } });
+    });
+
+    test('falls back to .js when .ts does not exist', async () => {
+        vol.fromJSON({
+            '/project/vite.prod.config.js':
+                'export default { config: { server: { port: 9000 } } };',
+        });
+        const result = await loadConfigFile('/project', true);
+        expect(result).toEqual({ config: { server: { port: 9000 } } });
+    });
+
+    test('returns function export without calling it', async () => {
+        vol.fromJSON({
+            '/project/vite.prod.config.ts':
+                'export default (context) => ({ config: { build: { minify: true } } });',
+        });
+        const result = await loadConfigFile('/project', true);
+        expect(typeof result).toBe('function');
+    });
+
+    test('does not find prod config when looking for dev', async () => {
+        vol.fromJSON({
+            '/project/vite.prod.config.ts':
+                'export default { config: { build: { minify: false } } };',
+        });
+        const result = await loadConfigFile('/project', false);
+        expect(result).toBeUndefined();
+    });
+});