@servicetitan/startup 36.3.1 → 37.0.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,70 @@
+import { fs, vol } from 'memfs';
+import { validateSharedDependencies } from '../validate-shared-dependencies';
+
+jest.mock('fs', () => fs);
+
+describe(`[startup] ${validateSharedDependencies.name}`, () => {
+    let cli: Record<string, any>;
+
+    beforeEach(() => (cli = {}));
+    afterEach(() => vol.reset());
+
+    const subject = () => {
+        vol.fromJSON({ 'package.json': JSON.stringify({ cli }) });
+        return validateSharedDependencies();
+    };
+
+    function itDoesNotThrow() {
+        test('does not throw', () => {
+            expect(subject).not.toThrow();
+        });
+    }
+
+    function itThrows(message: RegExp) {
+        test('throws', () => {
+            expect(subject).toThrow(message);
+        });
+    }
+
+    itDoesNotThrow();
+
+    describe('with conflicting {cli, cli.webpack}.shared-dependencies', () => {
+        beforeEach(() => {
+            cli['shared-dependencies'] = { defaults: '' };
+            cli.webpack = { 'shared-dependencies': { defaults: '', extra: 'foo' } };
+        });
+
+        itThrows(/both set but differ/);
+    });
+
+    describe('with conflicting {cli, cli.webpack}.expose-shared-dependencies', () => {
+        beforeEach(() => {
+            cli['expose-shared-dependencies'] = true;
+            cli.webpack = { 'expose-shared-dependencies': false };
+        });
+
+        itThrows(/both set but differ/);
+    });
+
+    describe('when configured as a web-component', () => {
+        beforeEach(() => (cli['web-component'] = true));
+
+        describe.each([
+            { cli: { 'expose-shared-dependencies': true } },
+            { cli: { webpack: { 'expose-shared-dependencies': true } } },
+        ])('with %o', config => {
+            beforeEach(() => Object.assign(cli, config.cli));
+
+            itThrows(/only applies to host applications/);
+        });
+
+        describe.each([
+            { cli: { 'expose-shared-dependencies': false } },
+            { cli: { webpack: { 'expose-shared-dependencies': false } } },
+        ])('with %o', config => {
+            beforeEach(() => Object.assign(cli, config.cli));
+
+            itDoesNotThrow();
+        });
+    });
+});

package/src/utils/get-configuration.ts

@@ -1,20 +1,27 @@
-import { Config } from '@jest/types';
-import { swcDir } from '@swc/cli';
-import { ESLint } from 'eslint';
+import type { Config } from '@jest/types';
+import type { swcDir } from '@swc/cli';
+import type { ESLint } from 'eslint';
 import fs from 'fs';
 import path from 'path';
-import { LinterOptions } from 'stylelint';
-import { ViteUserConfig } from 'vitest/config';
-import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
-import { ReviewConfiguration } from '../cli/commands/review';
+import type { LinterOptions } from 'stylelint';
+import type svgr from 'vite-plugin-svgr';
+import type { ViteUserConfig } from 'vitest/config';
+import type { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
+import type { ReviewConfiguration } from '../cli/commands/review';
 import { getFolders } from './get-folders';
+import { getPackageName } from './get-package-name';
 import { log } from './log';
 import { readJson, readJsonSafe } from './read-json';
+import { LocationOrJson } from './types';
 
-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 type Bundler = 'vite' | 'webpack';
+
+export const allowedWebpackDevServerOptions = ['headers', 'port', 'proxy', 'static'] as const;
+
 export interface MinifyJSOptions {
     compress?: boolean;
     mangle?: boolean;
@@ -38,6 +45,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 {
@@ -61,7 +69,8 @@ export interface NodeConfiguration {
 /* eslint-disable @typescript-eslint/naming-convention */
 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 +101,35 @@ 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'>;
+    devServer?: false;
+}
+
 export interface WebComponentBranchConfigs {
     publishTag?: string;
     uploadSourcemaps?: boolean;
@@ -107,6 +145,7 @@ interface WebComponentOptions {
 }
 
 type Configuration = {
+    'bundler'?: Bundler;
     'jest'?: JestConfiguration;
     'legacy'?: boolean;
     'lint'?: { eslint: ESLintConfiguration; stylelint: StylelintConfiguration };
@@ -114,6 +153,10 @@ type Configuration = {
     'swc-compile-package'?: Parameters<typeof swcDir>[0];
     'test'?: JestConfiguration; // for backward-compatibility
     'testRunner'?: string;
+    'expose-process-env'?: string[];
+    'expose-shared-dependencies'?: boolean;
+    'shared-dependencies'?: Record<string, string>;
+    'vite'?: false | VitePackageJsonOverride;
     'vitest'?: VitestConfiguration;
     'web-component'?: boolean | string | WebComponentOptions;
     'webpack'?: false | WebpackConfiguration;
@@ -121,8 +164,6 @@ type Configuration = {
     [key in CommandName]?: NodeConfiguration;
 } & NodeConfiguration;
 
-type LocationOrJson = string | Record<string, any>;
-
 export function getConfiguration(locationOrJson: LocationOrJson = './'): Configuration {
     const json =
         typeof locationOrJson === 'string'
@@ -156,6 +197,15 @@ export function getStylelintConfiguration() {
     return getConfiguration().lint?.stylelint ?? {};
 }
 
+export function getExposeProcessEnv(): string[] {
+    return getConfiguration()['expose-process-env'] ?? [];
+}
+
+export function getViteConfiguration(): VitePackageJsonOverride {
+    const { vite } = getConfiguration();
+    return typeof vite === 'object' ? vite : {};
+}
+
 export function getVitestConfiguration() {
     return getConfiguration().vitest ?? {};
 }
@@ -213,11 +263,9 @@ export function getSwcCompilePackageConfiguration() {
 }
 
 export function isBundle(locationOrJson?: LocationOrJson) {
-    return getConfiguration(locationOrJson).webpack !== false;
-}
-
-export function isCustomStyleRules() {
-    return getWebpackConfiguration()['custom-style-rules'] === true;
+    const { webpack, vite } = getConfiguration(locationOrJson);
+    assertBundlersAgree(webpack, vite, locationOrJson);
+    return webpack !== false && vite !== false;
 }
 
 export function isDevServerDisabled() {
@@ -225,8 +273,15 @@ export function isDevServerDisabled() {
     return webpackConfiguration.devServer === false;
 }
 
+export function isViteDevServerDisabled() {
+    return getViteConfiguration().devServer === false;
+}
+
 export function isExposeSharedDependencies() {
-    return getWebpackConfiguration()['expose-shared-dependencies'] === true;
+    return (
+        (getConfiguration()['expose-shared-dependencies'] ??
+            getWebpackConfiguration()['expose-shared-dependencies']) === true
+    );
 }
 
 export function isLegacy(locationOrJson?: LocationOrJson) {
@@ -244,3 +299,27 @@ export function isStyleCheckDisabled() {
 export function isWebComponent(locationOrJson: LocationOrJson = './') {
     return !!getWebComponentConfiguration(locationOrJson);
 }
+
+/*
+ * Require that Vite and Webpack configurations agree whether package is a bundle.
+ */
+function assertBundlersAgree(
+    webpack: Configuration['webpack'],
+    vite: Configuration['vite'],
+    locationOrJson?: LocationOrJson
+) {
+    if (webpack === undefined || vite === undefined || !!webpack === !!vite) {
+        return;
+    }
+
+    const mismatch =
+        webpack === false
+            ? { falsy: 'cli.webpack', truthy: 'cli.vite' }
+            : { falsy: 'cli.vite', truthy: 'cli.webpack' };
+
+    throw new Error(
+        `package ${getPackageName(locationOrJson)} has conflicting webpack ` +
+            `and vite configurations: ${mismatch.falsy} is false but ` +
+            `${mismatch.truthy} is not`
+    );
+}

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-package-name.ts

@@ -1,6 +1,12 @@
 import path from 'path';
 import { readJson } from './read-json';
+import { LocationOrJson } from './types';
 
-export function getPackageName(location = './'): string {
-    return readJson(path.join(location, 'package.json')).name;
+export function getPackageName(locationOrJson: LocationOrJson = './'): string {
+    const json =
+        typeof locationOrJson === 'string'
+            ? readJson(path.join(locationOrJson, 'package.json'))
+            : locationOrJson;
+
+    return json?.name ?? '';
 }

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,5 @@ export * from './pick';
 export * from './prettify';
 export * from './read-json';
 export * from './to-array';
+export type * from './types';
+export * from './validate-shared-dependencies';

package/src/utils/types.ts

@@ -0,0 +1 @@
+export type LocationOrJson = string | Record<string, any>;

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

@@ -0,0 +1,46 @@
+import {
+    getConfiguration,
+    getWebpackConfiguration,
+    isExposeSharedDependencies,
+    isWebComponent,
+} from './get-configuration';
+import { getPackageName } from './get-package-name';
+
+export function validateSharedDependencies() {
+    const config = getConfiguration();
+
+    if (isWebComponent() && isExposeSharedDependencies()) {
+        throw new Error(
+            'cli.expose-shared-dependencies only applies to host applications.' +
+                `Remove it from ${getPackageName()}.`
+        );
+    }
+
+    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,234 @@
+import { build, type InlineConfig } from 'vite';
+import type { BuildContext } from '../../core';
+import { bundleConstants, createBuildContext, resolveOutputPath } 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', () => ({
+    ...jest.requireActual('../../core'),
+    bundleConstants: {
+        mode: { production: 'production', development: 'development' },
+    },
+    createBuildContext: jest.fn(),
+}));
+jest.mock('../config', () => ({
+    createViteConfig: jest.fn(),
+}));
+jest.mock('../plugins/shared-dependencies-plugin', () => ({
+    sharedDependenciesPlugin: jest.fn(() => ({ name: 'shared-dependencies' })),
+}));
+
+describe(buildSharedDependencies.name, () => {
+    const viteConfig: any = {};
+    let options: any;
+    let context: BuildContext;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        options = { name: 'my-app' };
+        context = {
+            build: { isProduction: false },
+            package: {
+                sharedDependencies: { react: 'globalReact' },
+                destination: 'dist',
+            },
+        } as any;
+        jest.mocked(createViteConfig).mockResolvedValue(viteConfig);
+        jest.mocked(createBuildContext).mockReturnValue(context);
+    });
+
+    const subject = () => buildSharedDependencies(options);
+
+    test('creates build context with options and exposed dependencies enabled', async () => {
+        await subject();
+
+        expect(createBuildContext).toHaveBeenCalledWith({
+            ...options,
+            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: resolveOutputPath(context, viteConfig.build?.outDir),
+                }),
+            })
+        );
+    });
+
+    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: InlineConfig['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 outDir = '/foo';
+
+        beforeEach(() => {
+            jest.mocked(createViteConfig).mockResolvedValue({ build: { outDir } });
+        });
+
+        test('builds with custom output directory', async () => {
+            await subject();
+
+            expect(build).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    build: expect.objectContaining({ outDir }),
+                })
+            );
+        });
+    });
+
+    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,45 @@
+import { fs, vol } from 'memfs';
+import { validateSharedDependencies } from '../../utils/validate-shared-dependencies';
+import { validateViteSharedDependencies } from '../validate-shared-dependencies';
+
+jest.mock('fs', () => fs);
+jest.mock('../../utils/validate-shared-dependencies');
+
+describe(`[startup] ${validateViteSharedDependencies.name}`, () => {
+    let cli: Record<string, any>;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        cli = {};
+    });
+    afterEach(() => vol.reset());
+
+    const subject = () => {
+        vol.fromJSON({ 'package.json': JSON.stringify({ cli }) });
+        return validateViteSharedDependencies();
+    };
+
+    function itThrows(message: RegExp) {
+        test('throws', () => {
+            expect(subject).toThrow(message);
+        });
+    }
+
+    test('delegates to validateSharedDependencies', () => {
+        subject();
+
+        expect(validateSharedDependencies).toHaveBeenCalled();
+    });
+
+    describe('with cli.webpack.shared-dependencies', () => {
+        beforeEach(() => (cli.webpack = { 'shared-dependencies': { defaults: '' } }));
+
+        itThrows(/Move your shared-dependencies/);
+    });
+
+    describe('with cli.webpack.expose-shared-dependencies', () => {
+        beforeEach(() => (cli.webpack = { 'expose-shared-dependencies': true }));
+
+        itThrows(/Move your expose-shared-dependencies/);
+    });
+});