@servicetitan/startup 36.3.1 → 36.4.0

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

@@ -65,7 +65,7 @@ describe('[startup] Utils', () => {
                     version: '1.0.0',
                     private: true,
                     location: path.resolve('./packages/foo'),
-                    type: PackageType.Webpack,
+                    type: PackageType.Bundle,
                 },
                 {
                     name: 'bar',
@@ -167,14 +167,14 @@ describe('[startup] Utils', () => {
         });
 
         describe('with "type"', () => {
-            beforeEach(() => (options = { type: PackageType.Webpack }));
+            beforeEach(() => (options = { type: PackageType.Bundle }));
 
             test('returns only the specified packages', () => {
                 expect(subject()).toEqual([expect.objectContaining({ name: 'foo' })]);
             });
 
             describe('when "type" is an array', () => {
-                beforeEach(() => (options = { type: [PackageType.TSC, PackageType.Webpack] }));
+                beforeEach(() => (options = { type: [PackageType.TSC, PackageType.Bundle] }));
 
                 test('returns only the specified packages', () => {
                     expect(subject()).toEqual(
@@ -230,7 +230,7 @@ describe('[startup] Utils', () => {
                 itReturnsPackages();
             });
 
-            describe('with lerna.json contains packages', () => {
+            describe('when lerna.json contains packages', () => {
                 beforeEach(() => {
                     volFromJSON({
                         'lerna.json': JSON.stringify({ packages: ['packages/*'] }),

package/src/utils/__tests__/validate-shared-dependencies.test.ts

@@ -0,0 +1,55 @@
+import { fs, vol } from 'memfs';
+import { validateSharedDependencies } from '../validate-shared-dependencies';
+
+jest.mock('fs', () => fs);
+
+describe('validateSharedDependencies', () => {
+    function mockPackageJson(content: Record<string, any> = {}) {
+        vol.fromJSON({ 'package.json': JSON.stringify(content) });
+    }
+
+    afterEach(() => vol.reset());
+
+    test('passes when neither is set', () => {
+        mockPackageJson();
+        expect(() => validateSharedDependencies()).not.toThrow();
+    });
+
+    test('passes when only cli top level is set', () => {
+        mockPackageJson({ cli: { 'shared-dependencies': { defaults: '' } } });
+        expect(() => validateSharedDependencies()).not.toThrow();
+    });
+
+    test('passes when only cli.webpack is set', () => {
+        mockPackageJson({ cli: { webpack: { 'shared-dependencies': { defaults: '' } } } });
+        expect(() => validateSharedDependencies()).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(() => validateSharedDependencies()).not.toThrow();
+    });
+
+    test('throws when shared-dependencies both exist and differ', () => {
+        mockPackageJson({
+            cli: {
+                'shared-dependencies': { defaults: '' },
+                'webpack': { 'shared-dependencies': { defaults: '', extra: 'foo' } },
+            },
+        });
+        expect(() => validateSharedDependencies()).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(() => validateSharedDependencies()).toThrow(/both set but differ/);
+    });
+});

package/src/utils/get-configuration.ts

@@ -4,6 +4,7 @@ import { ESLint } from 'eslint';
 import fs from 'fs';
 import path from 'path';
 import { LinterOptions } from 'stylelint';
+import svgr from 'vite-plugin-svgr';
 import { ViteUserConfig } from 'vitest/config';
 import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
 import { ReviewConfiguration } from '../cli/commands/review';
@@ -11,10 +12,12 @@ import { getFolders } from './get-folders';
 import { log } from './log';
 import { readJson, readJsonSafe } from './read-json';
 
-export const allowedWebpackDevServerOptions = ['headers', 'port', 'proxy', 'static'] as const;
+type VitePluginSvgrOptions = NonNullable<Parameters<typeof svgr>[0]>;
 
 type ElementType<T> = T extends readonly (infer ElementType)[] ? ElementType : never;
 
+export const allowedWebpackDevServerOptions = ['headers', 'port', 'proxy', 'static'] as const;
+
 export interface MinifyJSOptions {
     compress?: boolean;
     mangle?: boolean;
@@ -38,6 +41,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 +66,8 @@ export interface NodeConfiguration {
 export enum CommandName {
     'build' = 'build',
     'bundle-package' = 'bundle-package',
+    'bundle-vite' = 'bundle-vite',
+    'bundle-webpack' = 'bundle-webpack',
     'clean' = 'clean',
     'convert-eslint-config' = 'convert-eslint-config',
     'eslint' = 'eslint',
@@ -92,6 +98,34 @@ export type VitestConfiguration = ViteUserConfig['test'] & {
     omitDefault?: string[];
 };
 
+export interface HtmlPluginOptions {
+    title?: string;
+    favicon?: string;
+    template?: string;
+}
+
+export interface SvgrPluginOptions {
+    include?: VitePluginSvgrOptions['include'];
+    exclude?: VitePluginSvgrOptions['exclude'];
+    svgrOptions?: VitePluginSvgrOptions['svgrOptions'];
+}
+
+export interface PluginOverrides {
+    html?: HtmlPluginOptions;
+    svgr?: SvgrPluginOptions;
+}
+
+export interface ViteBundlerConfig {
+    port?: number;
+    omitDefault?: string[];
+    minify?: MinifyOptions;
+    pluginOverrides?: PluginOverrides;
+}
+
+export interface VitePackageJsonOverride extends ViteBundlerConfig {
+    config?: Omit<import('vite').UserConfig, 'plugins'>;
+}
+
 export interface WebComponentBranchConfigs {
     publishTag?: string;
     uploadSourcemaps?: boolean;
@@ -114,6 +148,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'?: false | VitePackageJsonOverride;
     'vitest'?: VitestConfiguration;
     'web-component'?: boolean | string | WebComponentOptions;
     'webpack'?: false | WebpackConfiguration;
@@ -156,6 +193,11 @@ export function getStylelintConfiguration() {
     return getConfiguration().lint?.stylelint ?? {};
 }
 
+export function getViteConfiguration(): VitePackageJsonOverride {
+    const { vite } = getConfiguration();
+    return typeof vite === 'object' ? vite : {};
+}
+
 export function getVitestConfiguration() {
     return getConfiguration().vitest ?? {};
 }
@@ -213,11 +255,10 @@ export function getSwcCompilePackageConfiguration() {
 }
 
 export function isBundle(locationOrJson?: LocationOrJson) {
-    return getConfiguration(locationOrJson).webpack !== false;
-}
-
-export function isCustomStyleRules() {
-    return getWebpackConfiguration()['custom-style-rules'] === true;
+    return (
+        getConfiguration(locationOrJson).webpack !== false &&
+        getConfiguration(locationOrJson).vite !== false
+    );
 }
 
 export function isDevServerDisabled() {
@@ -226,7 +267,10 @@ export function isDevServerDisabled() {
 }
 
 export function isExposeSharedDependencies() {
-    return getWebpackConfiguration()['expose-shared-dependencies'] === true;
+    return (
+        (getConfiguration()['expose-shared-dependencies'] ??
+            getWebpackConfiguration()['expose-shared-dependencies']) === true
+    );
 }
 
 export function isLegacy(locationOrJson?: LocationOrJson) {

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

@@ -17,6 +17,8 @@ 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/utils/get-packages.ts

@@ -5,7 +5,7 @@ import { toArray } from './to-array';
 
 export enum PackageType {
     TSC,
-    Webpack,
+    Bundle,
     Legacy,
 }
 
@@ -124,7 +124,7 @@ function getPackageType(packageJson: ProjectPackage) {
     }
 
     if (isBundle(packageJson)) {
-        return PackageType.Webpack;
+        return PackageType.Bundle;
     }
 
     return PackageType.TSC;

package/src/utils/index.ts

@@ -12,7 +12,6 @@ export * from './get-jest-config';
 export * from './get-package-data';
 export * from './get-package-name';
 export * from './get-packages';
-export * from './get-startup-version';
 export * from './get-tsconfig';
 export * from './get-tsconfig-with-fallback';
 export * from './load-shared-dependencies';
@@ -23,3 +22,4 @@ export * from './pick';
 export * from './prettify';
 export * from './read-json';
 export * from './to-array';
+export * from './validate-shared-dependencies';

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

@@ -0,0 +1,32 @@
+import { getConfiguration, getWebpackConfiguration } from './get-configuration';
+
+export function validateSharedDependencies() {
+    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.'
+        );
+    }
+}

package/src/vite/__tests__/build-shared-dependencies.test.ts

@@ -0,0 +1,247 @@
+import { build } from 'vite';
+import type { BuildContext } from '../../core';
+import { bundleConstants, createBuildContext, getOutputPath } from '../../core';
+import { buildSharedDependencies } from '../build-shared-dependencies';
+import { createViteConfig } from '../config';
+import { sharedDependenciesPlugin } from '../plugins/shared-dependencies-plugin';
+
+jest.mock('vite', () => ({
+    build: jest.fn(),
+}));
+jest.mock('../../core', () => ({
+    bundleConstants: {
+        mode: { production: 'production', development: 'development' },
+    },
+    createBuildContext: jest.fn(),
+    getOutputPath: jest.fn(),
+}));
+jest.mock('../config', () => ({
+    createViteConfig: jest.fn(),
+}));
+jest.mock('../plugins/shared-dependencies-plugin', () => ({
+    sharedDependenciesPlugin: jest.fn(() => ({ name: 'shared-dependencies' })),
+}));
+
+describe(buildSharedDependencies.name, () => {
+    let options: any;
+    let context: BuildContext;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        options = { name: 'my-app' };
+        context = {
+            build: { isProduction: false },
+            package: {
+                sharedDependencies: { react: 'globalReact' },
+                destination: '/output/pkg',
+            },
+        } as any;
+        jest.mocked(createViteConfig).mockResolvedValue({});
+        jest.mocked(createBuildContext).mockReturnValue(context);
+        jest.mocked(getOutputPath).mockReturnValue('/output/pkg/bundle');
+    });
+
+    const subject = () => buildSharedDependencies(options);
+
+    test('creates build context with options and exposed dependencies enabled', async () => {
+        await subject();
+
+        expect(createBuildContext).toHaveBeenCalledWith({
+            ...options,
+            outputBasePath: undefined,
+            emitExposedDependencies: true,
+        });
+    });
+
+    test('passes shared dependencies and metadata directory to plugin', async () => {
+        await subject();
+
+        expect(sharedDependenciesPlugin).toHaveBeenCalledWith(
+            expect.objectContaining({
+                dependencies: context.package.sharedDependencies,
+                metadataDir: context.package.destination,
+            })
+        );
+    });
+
+    test('builds with development mode', async () => {
+        await subject();
+
+        expect(build).toHaveBeenCalledWith(
+            expect.objectContaining({ mode: bundleConstants.mode.development })
+        );
+    });
+
+    test('builds with output directory from context', async () => {
+        await subject();
+
+        expect(build).toHaveBeenCalledWith(
+            expect.objectContaining({
+                build: expect.objectContaining({ outDir: getOutputPath(context) }),
+            })
+        );
+    });
+
+    test('disables config file', async () => {
+        await subject();
+
+        expect(build).toHaveBeenCalledWith(expect.objectContaining({ configFile: false }));
+    });
+
+    test('strips legal comments', async () => {
+        await subject();
+
+        expect(build).toHaveBeenCalledWith(
+            expect.objectContaining({ oxc: { legalComments: 'none' } })
+        );
+    });
+
+    describe('when user config sets oxc options', () => {
+        const oxc = {
+            minify: { compress: true },
+            target: 'es2020',
+            legalComments: 'inline',
+        };
+
+        beforeEach(() => {
+            jest.mocked(createViteConfig).mockResolvedValue({ oxc });
+        });
+
+        test('forwards only oxc.minify', async () => {
+            await subject();
+
+            expect(build).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    oxc: { minify: oxc.minify, legalComments: 'none' },
+                })
+            );
+        });
+    });
+
+    test('passes empty CSS entries to plugin', async () => {
+        await subject();
+
+        expect(sharedDependenciesPlugin).toHaveBeenCalledWith(expect.objectContaining({ css: {} }));
+    });
+
+    describe('when production', () => {
+        beforeEach(() => (context.build.isProduction = true));
+
+        test('builds with production mode', async () => {
+            await subject();
+
+            expect(build).toHaveBeenCalledWith(
+                expect.objectContaining({ mode: bundleConstants.mode.production })
+            );
+        });
+    });
+
+    describe('when user config has custom outDir', () => {
+        const customOutDir = '/custom/out';
+        const customOutputPath = '/custom/out/bundle';
+
+        beforeEach(() => {
+            jest.mocked(createViteConfig).mockResolvedValue({
+                build: { outDir: customOutDir },
+            });
+            jest.mocked(getOutputPath).mockReturnValue(customOutputPath);
+        });
+
+        test('passes custom output path to build context', async () => {
+            await subject();
+
+            expect(createBuildContext).toHaveBeenCalledWith({
+                ...options,
+                outputBasePath: customOutDir,
+                emitExposedDependencies: true,
+            });
+        });
+
+        test('builds with custom output directory', async () => {
+            await subject();
+
+            expect(build).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    build: expect.objectContaining({ outDir: customOutputPath }),
+                })
+            );
+        });
+    });
+
+    describe('when user config sets build.minify', () => {
+        const minify = true;
+
+        beforeEach(() => {
+            jest.mocked(createViteConfig).mockResolvedValue({ build: { minify } });
+        });
+
+        test('forwards minify to build', async () => {
+            await subject();
+
+            expect(build).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    build: expect.objectContaining({ minify }),
+                })
+            );
+        });
+    });
+
+    describe('when user config sets build.cssMinify', () => {
+        const cssMinify = 'esbuild';
+
+        beforeEach(() => {
+            jest.mocked(createViteConfig).mockResolvedValue({ build: { cssMinify } });
+        });
+
+        test('forwards cssMinify to build', async () => {
+            await subject();
+
+            expect(build).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    build: expect.objectContaining({ cssMinify }),
+                })
+            );
+        });
+    });
+
+    describe('when user config sets build.terserOptions', () => {
+        const terserOptions = { maxWorkers: 1 };
+
+        beforeEach(() => {
+            jest.mocked(createViteConfig).mockResolvedValue({ build: { terserOptions } });
+        });
+
+        test('forwards terserOptions to build', async () => {
+            await subject();
+
+            expect(build).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    build: expect.objectContaining({ terserOptions }),
+                })
+            );
+        });
+    });
+
+    describe('when shared dependencies include design-system', () => {
+        beforeEach(() => {
+            context.package.sharedDependencies['@servicetitan/design-system'] =
+                'globalDesignSystem';
+        });
+
+        test('passes design-system CSS entries to plugin', async () => {
+            await subject();
+
+            expect(sharedDependenciesPlugin).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    css: {
+                        'design-system': [
+                            '@servicetitan/tokens/core/tokens.css',
+                            '@servicetitan/anvil-fonts/dist/css/anvil-fonts.css',
+                            '@servicetitan/design-system/dist/system.min.css',
+                        ],
+                    },
+                })
+            );
+        });
+    });
+});

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

@@ -0,0 +1,34 @@
+import { fs, vol } from 'memfs';
+import { validateViteSharedDependencies } from '../validate-shared-dependencies';
+
+jest.mock('fs', () => fs);
+
+describe('validateViteSharedDependencies', () => {
+    function mockPackageJson(content: Record<string, any> = {}) {
+        vol.fromJSON({ 'package.json': JSON.stringify(content) });
+    }
+
+    afterEach(() => vol.reset());
+
+    test('passes when neither is set', () => {
+        mockPackageJson();
+        expect(() => validateViteSharedDependencies()).not.toThrow();
+    });
+
+    test('passes when only cli top level is set', () => {
+        mockPackageJson({ cli: { 'expose-shared-dependencies': true } });
+        expect(() => validateViteSharedDependencies()).not.toThrow();
+    });
+
+    test('throws when webpack shared-dependencies is set but top level is not', () => {
+        mockPackageJson({ cli: { webpack: { 'shared-dependencies': { defaults: '' } } } });
+        expect(() => validateViteSharedDependencies()).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(() => validateViteSharedDependencies()).toThrow(
+            /Move your expose-shared-dependencies/
+        );
+    });
+});

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

@@ -0,0 +1,56 @@
+import { build } from 'vite';
+import {
+    BuildContext,
+    BuildContextOptions,
+    bundleConstants,
+    createBuildContext,
+    getOutputPath,
+} from '../core';
+import { createViteConfig } from './config';
+import { sharedDependenciesPlugin } from './plugins/shared-dependencies-plugin';
+
+export async function buildSharedDependencies(options: BuildContextOptions) {
+    const config = await createViteConfig(options);
+    const context = createBuildContext({
+        ...options,
+        outputBasePath: config.build?.outDir,
+        emitExposedDependencies: true,
+    });
+
+    await build({
+        configFile: false,
+        oxc: {
+            minify: config.oxc ? config.oxc.minify : undefined,
+            legalComments: 'none',
+        },
+        mode: getMode(context),
+        plugins: [getSharedDependenciesPlugin(context)],
+        build: {
+            outDir: getOutputPath(context),
+            minify: config.build?.minify,
+            cssMinify: config.build?.cssMinify,
+            terserOptions: config.build?.terserOptions,
+        },
+    });
+}
+
+function getMode(context: BuildContext) {
+    return context.build.isProduction
+        ? bundleConstants.mode.production
+        : bundleConstants.mode.development;
+}
+
+function getSharedDependenciesPlugin(context: BuildContext) {
+    const { destination: metadataDir, sharedDependencies: dependencies } = context.package;
+
+    const css: Record<string, string[]> = {};
+    if (dependencies['@servicetitan/design-system']) {
+        css['design-system'] = [
+            '@servicetitan/tokens/core/tokens.css',
+            '@servicetitan/anvil-fonts/dist/css/anvil-fonts.css',
+            '@servicetitan/design-system/dist/system.min.css',
+        ];
+    }
+
+    return sharedDependenciesPlugin({ css, dependencies, metadataDir });
+}