@servicetitan/startup 36.3.1 → 37.0.0

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

@@ -0,0 +1,52 @@
+import { build } from 'vite';
+import {
+    BuildContext,
+    BuildContextOptions,
+    bundleConstants,
+    createBuildContext,
+    resolveOutputPath,
+} 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, emitExposedDependencies: true });
+
+    await build({
+        configFile: false,
+        oxc: {
+            minify: config.oxc ? config.oxc.minify : undefined,
+            legalComments: 'none',
+        },
+        mode: getMode(context),
+        plugins: [getSharedDependenciesPlugin(context)],
+        build: {
+            outDir: resolveOutputPath(context, config.build?.outDir),
+            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 });
+}

package/src/vite/config/__tests__/asset-file-names.test.ts

@@ -0,0 +1,40 @@
+import { assetFileNames } from '../asset-file-names';
+
+describe(assetFileNames.name, () => {
+    let asset: Parameters<typeof assetFileNames>[0];
+
+    beforeEach(() => (asset = { names: [] }));
+
+    const subject = () => assetFileNames(asset);
+
+    test('returns assets/[name]-[hash][extname]', () => {
+        expect(subject()).toBe('assets/[name]-[hash][extname]');
+    });
+
+    [
+        {
+            name: 'fonts/[name]-[hash][extname]',
+            extensions: ['woff', 'woff2', 'eot', 'ttf', 'otf'],
+        },
+        {
+            name: 'images/[name]-[hash][extname]',
+            extensions: ['png', 'jpg', 'jpeg', 'gif', 'svg'],
+        },
+    ].forEach(({ extensions, name }) => {
+        describe.each(extensions)('with .%s', extension => {
+            beforeEach(() => (asset = { names: [`foo.${extension}`] }));
+
+            test(`returns ${name}`, () => {
+                expect(subject()).toBe(name);
+            });
+        });
+    });
+
+    describe('when asset has multiple names', () => {
+        beforeEach(() => (asset = { names: [`foo.png`, 'bar.ttf'] }));
+
+        test('uses first name', () => {
+            expect(subject()).toEqual('images/[name]-[hash][extname]');
+        });
+    });
+});

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

@@ -0,0 +1,377 @@
+import {
+    bundleConstants,
+    defineExposedDependencies,
+    defineExposedInstanceDependencies,
+    defineWebComponentName,
+    getBundleType,
+} from '../../../core';
+import { omit } from '../../../utils';
+import {
+    bundleStatPlugin,
+    chainSourceMapsPlugin,
+    cleanPlugin,
+    cssInjectorPlugin,
+    designSystemGuardPlugin,
+    devServerRoutingPlugin,
+    externalsPlugin,
+    htmlPlugin,
+    ignoreModulesPlugin,
+    istanbulPlugin,
+    magicCommentsPlugin,
+    metadataPlugin,
+    momentLocalesPlugin,
+    styleUrlsPlugin,
+    svgrPlugin,
+    virtualModulesPlugin,
+} from '../../plugins';
+import type { ViteBuildContext } from '../../types';
+import { assetFileNames } from '../asset-file-names';
+import { createBaseConfig } from '../base-config';
+import { getCodeSplitting } from '../code-splitting';
+import { createFilteringLogger } from '../create-filtering-logger';
+
+jest.mock('../../../core', () => ({
+    ...jest.requireActual('../../../core'),
+    bundleConstants: {
+        cssModules: {
+            classnameTemplate: {
+                production: '[local]__[hash:base64:5]',
+                development: '[path][name]__[local]',
+            },
+            localsConvention: 'camelCaseOnly',
+        },
+        less: { math: 'always' },
+        mode: { production: 'production', development: 'development' },
+    },
+    getBundleType: jest.fn(),
+    defineExposedDependencies: jest.fn(),
+    defineExposedInstanceDependencies: jest.fn(),
+    defineWebComponentName: jest.fn(),
+}));
+
+jest.mock('../../../utils', () => ({
+    omit: jest.fn((obj: any) => obj),
+}));
+
+jest.mock('../create-filtering-logger', () => ({
+    createFilteringLogger: jest.fn(() => ({ name: 'filteringLogger' })),
+}));
+
+jest.mock('../code-splitting', () => ({
+    getCodeSplitting: jest.fn(),
+}));
+
+jest.mock('../../plugins', () => ({
+    bundleStatPlugin: jest.fn(() => ({ name: 'bundleStat' })),
+    chainSourceMapsPlugin: jest.fn(() => ({ name: 'chainSourceMaps' })),
+    cleanPlugin: jest.fn(() => ({ name: 'clean' })),
+    cssInjectorPlugin: jest.fn(() => [{ name: 'cssInjector' }]),
+    designSystemGuardPlugin: jest.fn(() => ({ name: 'designSystemGuard' })),
+    devServerRoutingPlugin: jest.fn(() => ({ name: 'devServerRouting' })),
+    externalsPlugin: jest.fn(() => ({ name: 'externals' })),
+    htmlPlugin: jest.fn(() => ({ name: 'html' })),
+    ignoreModulesPlugin: jest.fn((context: any) => ({ name: 'ignoreModules', context })),
+    istanbulPlugin: jest.fn(() => ({ name: 'istanbul' })),
+    magicCommentsPlugin: jest.fn(() => ({ name: 'magicComments' })),
+    metadataPlugin: jest.fn(() => ({ name: 'metadata' })),
+    momentLocalesPlugin: jest.fn(() => ({ name: 'momentLocales' })),
+    styleUrlsPlugin: jest.fn(() => ({ name: 'styleUrls' })),
+    svgrPlugin: jest.fn(() => ({ name: 'svgr' })),
+    virtualModulesPlugin: jest.fn(() => ({ name: 'virtualModules' })),
+}));
+
+describe(createBaseConfig.name, () => {
+    const codeSplitting = { groups: [{ name: 'vendor', test: /node_modules/ }] };
+    let context: ViteBuildContext;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        jest.mocked(getCodeSplitting).mockReturnValue(codeSplitting);
+        jest.mocked(getBundleType).mockReturnValue('full');
+        jest.mocked(defineExposedDependencies).mockReturnValue({
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            EXPOSED_DEPENDENCIES: '"deps"',
+        });
+        jest.mocked(defineExposedInstanceDependencies).mockReturnValue({
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            EXPOSED_INSTANCE_DEPENDENCIES: '"instance"',
+        });
+        jest.mocked(defineWebComponentName).mockReturnValue(undefined);
+        context = {
+            build: { isProduction: false },
+            options: {},
+            package: { isWebComponent: false, destination: 'dist/bundle/full' },
+            bundlerConfig: {
+                omitDefault: [],
+                minify: {},
+                pluginOverrides: {},
+            },
+        } as unknown as ViteBuildContext;
+    });
+
+    const subject = () => createBaseConfig(context);
+
+    test('sets cache directory from bundle type', () => {
+        expect(subject().cacheDir).toBe(`node_modules/.vite/${getBundleType(context)}`);
+    });
+
+    test('sets dev server port to 8080', () => {
+        expect(subject().server!.port).toBe(8080);
+    });
+
+    test('sets development mode', () => {
+        expect(subject().mode).toBe(bundleConstants.mode.development);
+    });
+
+    test('disables config file', () => {
+        expect(subject().configFile).toBe(false);
+    });
+
+    test('filters noisy warnings through a custom logger', () => {
+        expect(subject().customLogger).toBe(
+            jest.mocked(createFilteringLogger).mock.results[0].value
+        );
+    });
+
+    test('strips legal comments', () => {
+        expect(subject().oxc).toEqual({ legalComments: 'none' });
+    });
+
+    test('sets relative base path', () => {
+        expect(subject().base).toBe('./');
+    });
+
+    test('configures CSS modules locale convention', () => {
+        expect((subject().css!.modules as Record<string, unknown>).localsConvention).toBe(
+            bundleConstants.cssModules.localsConvention
+        );
+    });
+
+    test('uses development CSS class name template', () => {
+        expect((subject().css!.modules as Record<string, unknown>).generateScopedName).toBe(
+            bundleConstants.cssModules.classnameTemplate.development
+        );
+    });
+
+    test('configures LESS preprocessor', () => {
+        expect(subject().css!.preprocessorOptions!.less).toEqual({
+            math: bundleConstants.less.math,
+        });
+    });
+
+    test('enables CSS code splitting', () => {
+        expect(subject().build!.cssCodeSplit).toBe(true);
+    });
+
+    test('enables source maps', () => {
+        expect(subject().build!.sourcemap).toBe(true);
+    });
+
+    test('routes assets through assetFileNames', () => {
+        expect(subject().build!.rolldownOptions!.output).toEqual(
+            expect.objectContaining({ assetFileNames })
+        );
+    });
+
+    test('registers chainSourceMaps plugin', () => {
+        expect(subject().build!.rolldownOptions!.plugins).toEqual([chainSourceMapsPlugin()]);
+    });
+
+    test('configures code splitting from getCodeSplitting', () => {
+        expect(subject().build!.rolldownOptions!.output).toEqual(
+            expect.objectContaining({
+                codeSplitting: getCodeSplitting(context),
+            })
+        );
+    });
+
+    test('maps define values to import.meta.env prefix', () => {
+        const { define } = subject();
+        const exposed = defineExposedDependencies(context)!;
+        const instance = defineExposedInstanceDependencies(context)!;
+
+        for (const [key, value] of Object.entries({ ...exposed, ...instance })) {
+            expect(define![`import.meta.env.${key}`]).toBe(value);
+        }
+    });
+
+    describe('when exposeProcessEnv lists a variable', () => {
+        const variable = 'API_URL';
+        const value = 'https://api.example.com';
+
+        beforeEach(() => {
+            context.package.exposeProcessEnv = [variable];
+            process.env[variable] = value;
+        });
+
+        afterEach(() => delete process.env[variable]);
+
+        test('defines process.env.NAME with the value', () => {
+            expect(subject().define![`process.env.${variable}`]).toBe(JSON.stringify(value));
+        });
+
+        describe('when variable is not set', () => {
+            beforeEach(() => delete process.env[variable]);
+
+            test('defines process.env.NAME as undefined', () => {
+                expect(subject().define![`process.env.${variable}`]).toBe('undefined');
+            });
+        });
+    });
+
+    test('includes startup-utils in optimized dependencies', () => {
+        expect(subject().optimizeDeps!.include).toEqual(['@servicetitan/startup-utils']);
+    });
+
+    test('registers ignoreModulesPlugin for dependency pre-bundling', () => {
+        expect(subject().optimizeDeps!.rolldownOptions).toEqual({
+            plugins: [ignoreModulesPlugin(context)],
+        });
+    });
+
+    test('creates plugins from factories, passing context', () => {
+        const factories = [
+            bundleStatPlugin,
+            cleanPlugin,
+            cssInjectorPlugin,
+            designSystemGuardPlugin,
+            devServerRoutingPlugin,
+            externalsPlugin,
+            htmlPlugin,
+            ignoreModulesPlugin,
+            istanbulPlugin,
+            magicCommentsPlugin,
+            metadataPlugin,
+            momentLocalesPlugin,
+            styleUrlsPlugin,
+            svgrPlugin,
+            virtualModulesPlugin,
+        ];
+
+        const pluginNames = (subject().plugins as any[]).map((p: any) => p.name);
+        const expectedNames = factories.flatMap(factory => {
+            const result = jest.mocked(factory).mock.results[0].value;
+            return [result].flat().map((p: any) => p.name);
+        });
+
+        expect(pluginNames).toEqual(expectedNames);
+        for (const factory of factories) {
+            expect(factory).toHaveBeenCalledWith(context);
+        }
+    });
+
+    test('excludes plugin in omitDefault', () => {
+        const pluginName = 'externals';
+        const getPluginNames = () => (subject().plugins as any[]).map((p: any) => p.name);
+
+        // Verify plugin exists before testing omission
+        expect(getPluginNames()).toContain(pluginName);
+
+        context.bundlerConfig.omitDefault.push(`plugins.${pluginName}`);
+
+        expect(getPluginNames()).not.toContain(pluginName);
+    });
+
+    describe('when web component', () => {
+        beforeEach(() => (context.package.isWebComponent = true));
+
+        test('sets dev server port to 8888', () => {
+            expect(subject().server!.port).toBe(8888);
+        });
+
+        test('disables CSS code splitting', () => {
+            expect(subject().build!.cssCodeSplit).toBe(false);
+        });
+    });
+
+    describe('when production', () => {
+        beforeEach(() => (context.build.isProduction = true));
+
+        test('sets production mode', () => {
+            expect(subject().mode).toBe(bundleConstants.mode.production);
+        });
+
+        test('uses production CSS class name template', () => {
+            expect((subject().css!.modules as Record<string, unknown>).generateScopedName).toBe(
+                bundleConstants.cssModules.classnameTemplate.production
+            );
+        });
+
+        describe('with process.env.CLIENT_CDN_PATH', () => {
+            const cdnPath = 'http://www.example.com/cdn';
+
+            beforeEach(() => (process.env.CLIENT_CDN_PATH = cdnPath));
+            afterEach(() => delete process.env.CLIENT_CDN_PATH);
+
+            test('sets base path to CDN path', () => {
+                expect(subject().base).toEqual(cdnPath);
+            });
+        });
+    });
+
+    describe('when port is configured', () => {
+        const customPort = 9000;
+
+        beforeEach(() => (context.bundlerConfig.port = customPort));
+
+        test('uses configured port', () => {
+            expect(subject().server!.port).toBe(customPort);
+        });
+    });
+
+    describe('when bundle type is undefined', () => {
+        beforeEach(() => jest.mocked(getBundleType).mockReturnValue(undefined));
+
+        test('falls back to host cache directory', () => {
+            expect(subject().cacheDir).toBe('node_modules/.vite/host');
+        });
+    });
+
+    describe('when plugin returns undefined', () => {
+        beforeEach(() => {
+            jest.mocked(externalsPlugin).mockReturnValue(undefined as any);
+        });
+
+        test('excludes undefined plugin', () => {
+            const pluginNames = (subject().plugins as any[]).map((p: any) => p.name);
+
+            expect(pluginNames).not.toContain('externals');
+        });
+    });
+
+    describe('when config key is in omitDefault', () => {
+        const configKey = 'server';
+
+        beforeEach(() => context.bundlerConfig.omitDefault.push('plugins.externals', configKey));
+
+        test('omits config key from output, excluding plugin keys', () => {
+            subject();
+
+            expect(omit).toHaveBeenCalledWith(expect.any(Object), [configKey]);
+        });
+    });
+
+    describe('when JS minify is configured', () => {
+        beforeEach(() => (context.bundlerConfig.minify.js = false));
+
+        test('sets build minify option', () => {
+            expect(subject().build!.minify).toBe(!!context.bundlerConfig.minify.js);
+        });
+    });
+
+    describe('when CSS minify is configured', () => {
+        beforeEach(() => (context.bundlerConfig.minify.css = false));
+
+        test('sets build cssMinify option', () => {
+            expect(subject().build!.cssMinify).toBe(!!context.bundlerConfig.minify.css);
+        });
+    });
+
+    describe('when code coverage is enabled', () => {
+        beforeEach(() => (context.options.codeCoverage = true));
+
+        test('disables minify', () => {
+            expect(subject().build!.minify).toBe(false);
+        });
+    });
+});

package/src/vite/config/__tests__/code-splitting.test.ts

@@ -0,0 +1,34 @@
+import { CHUNK_PATTERNS } from '../../../core';
+import type { ViteBuildContext } from '../../types';
+import { getCodeSplitting } from '../code-splitting';
+
+describe(getCodeSplitting.name, () => {
+    let context: ViteBuildContext;
+
+    beforeEach(() => {
+        context = { build: { isProduction: false } } as unknown as ViteBuildContext;
+    });
+
+    const subject = () => getCodeSplitting(context);
+
+    test('returns undefined', () => {
+        expect(subject()).toBeUndefined();
+    });
+
+    describe('when a production build', () => {
+        beforeEach(() => (context.build.isProduction = true));
+
+        test('splits node_modules into prioritized groups', () => {
+            expect(subject()?.groups).toEqual([
+                { name: 'servicetitan', test: CHUNK_PATTERNS.servicetitan, priority: 30 },
+                { name: 'kendo', test: CHUNK_PATTERNS.kendo, priority: 20 },
+                { name: 'vendor-core', test: CHUNK_PATTERNS['vendor-core'], priority: 15 },
+                { name: 'vendor', test: CHUNK_PATTERNS.vendor, priority: 10 },
+            ]);
+        });
+
+        test('sets a 20 KB minimum chunk size', () => {
+            expect(subject()?.minSize).toBe(20 * 1024);
+        });
+    });
+});

package/src/vite/config/__tests__/create-css-config.test.ts

@@ -0,0 +1,58 @@
+import { bundleConstants } from '../../../core';
+import { createCssConfig } from '../create-css-config';
+
+describe(createCssConfig.name, () => {
+    let isProduction: boolean;
+
+    beforeEach(() => {
+        isProduction = false;
+    });
+
+    const subject = () => createCssConfig(isProduction);
+
+    test('uses camelCase locals convention', () => {
+        expect(subject()).toEqual(
+            expect.objectContaining({
+                modules: expect.objectContaining({
+                    localsConvention: bundleConstants.cssModules.localsConvention,
+                }),
+            })
+        );
+    });
+
+    test('uses development name template', () => {
+        expect(subject()).toEqual(
+            expect.objectContaining({
+                modules: expect.objectContaining({
+                    generateScopedName: bundleConstants.cssModules.classnameTemplate.development,
+                }),
+            })
+        );
+    });
+
+    test('sets less math option', () => {
+        expect(subject()).toEqual(
+            expect.objectContaining({
+                preprocessorOptions: {
+                    less: { math: bundleConstants.less.math },
+                },
+            })
+        );
+    });
+
+    describe('when production', () => {
+        beforeEach(() => {
+            isProduction = true;
+        });
+
+        test('uses production name template', () => {
+            expect(subject()).toEqual(
+                expect.objectContaining({
+                    modules: expect.objectContaining({
+                        generateScopedName: bundleConstants.cssModules.classnameTemplate.production,
+                    }),
+                })
+            );
+        });
+    });
+});

package/src/vite/config/__tests__/create-filtering-logger.test.ts

@@ -0,0 +1,51 @@
+import { createLogger, Logger } from 'vite';
+import { createFilteringLogger } from '../create-filtering-logger';
+
+jest.mock('vite', () => ({ createLogger: jest.fn() }));
+
+describe(createFilteringLogger.name, () => {
+    let spies: Record<'warn' | 'warnOnce', jest.Mock>;
+
+    beforeEach(() => {
+        spies = { warn: jest.fn(), warnOnce: jest.fn() };
+        jest.mocked(createLogger).mockReturnValue({ ...spies } as unknown as Logger);
+    });
+
+    describe.each(['warn', 'warnOnce'] as ('warn' | 'warnOnce')[])('%s', method => {
+        let message: string;
+
+        beforeEach(() => (message = 'some message'));
+
+        const subject = () => (createFilteringLogger()[method] as Function)(message);
+
+        test('passes message through', () => {
+            subject();
+
+            expect(spies[method]).toHaveBeenCalled();
+        });
+
+        function itSuppressesMessage() {
+            test('suppresses message', () => {
+                subject();
+
+                expect(spies[method]).not.toHaveBeenCalled();
+            });
+        }
+        describe('when message is shared .js asset warning', () => {
+            beforeEach(() => {
+                message =
+                    '<script src="./shared/shared.abc.bundle.js"> in "/index.html" can\'t be bundled without type="module" attribute';
+            });
+
+            itSuppressesMessage();
+        });
+
+        describe('when message is shared .css asset warning', () => {
+            beforeEach(() => {
+                message = "./shared/anvil2.abc.bundle.css doesn't exist at build time";
+            });
+
+            itSuppressesMessage();
+        });
+    });
+});