@servicetitan/startup 36.3.0 → 36.4.0

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

@@ -17,20 +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'],
     };
 }
-
-export function getPackageDependencyVersion(dependency: string, defaultVersion?: string) {
-    try {
-        const { version } = require(`${dependency}/package.json`);
-
-        if (version) {
-            return version;
-        }
-    } catch {
-        // skip error
-    }
-
-    return defaultVersion;
-}

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 });
+}