@servicetitan/startup 36.0.0 → 36.1.1-beta.1

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 { VitePluginSvgrOptions } from 'vite-plugin-svgr';
 import { ViteUserConfig } from 'vitest/config';
 import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
 import { ReviewConfiguration } from '../cli/commands/review';
@@ -38,6 +39,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 +64,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 +96,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 +146,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 +191,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 +253,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 +265,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,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/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

@@ -11,7 +11,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';
@@ -22,3 +21,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,165 @@
+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,
+            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: { 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' } })
+        );
+    });
+
+    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,
+                emitExposedDependencies: { output: { path: customOutDir } },
+            });
+        });
+
+        test('builds with custom output directory', async () => {
+            await subject();
+
+            expect(build).toHaveBeenCalledWith(
+                expect.objectContaining({ build: { outDir: customOutputPath } })
+            );
+        });
+    });
+
+    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,47 @@
+import { build } from 'vite';
+import { BuildContextOptions, bundleConstants, createBuildContext, getOutputPath } from '../core';
+import { createViteConfig } from './config';
+import { sharedDependenciesPlugin } from './plugins/shared-dependencies-plugin';
+
+export async function buildSharedDependencies(options: BuildContextOptions) {
+    // Read custom outDir from user config overrides
+    const config = await createViteConfig(options);
+    const customOutDir = config.build?.outDir;
+
+    const context = createBuildContext({
+        ...options,
+        emitExposedDependencies: customOutDir ? { output: { path: customOutDir } } : true,
+    });
+
+    const { sharedDependencies } = context.package;
+    // We put customOutDir to context.emitExposedDependencies just to retrieve it back in getOutputPath. Overcomplicated.
+    const outputDir = getOutputPath(context);
+    const mode = context.build.isProduction
+        ? bundleConstants.mode.production
+        : bundleConstants.mode.development;
+
+    const css: Record<string, string[]> = {};
+    if (sharedDependencies['@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',
+        ];
+    }
+
+    await build({
+        configFile: false,
+        oxc: { legalComments: 'none' },
+        mode,
+        plugins: [
+            sharedDependenciesPlugin({
+                css,
+                dependencies: sharedDependencies,
+                metadataDir: context.package.destination,
+            }),
+        ],
+        build: {
+            outDir: outputDir,
+        },
+    });
+}