@servicetitan/startup 38.0.0 → 38.1.0

package/src/cli/utils/compile.ts

@@ -1,5 +1,6 @@
 import { log } from '../../utils';
 import { lernaExec } from './lerna-exec';
+import { resolveBundler } from './resolve-bundler';
 
 export function compile({
     packages,
@@ -11,12 +12,18 @@ export function compile({
     useTsc?: boolean;
 }) {
     log.info('Compiling TypeScript files...');
+
+    const options = [
+        watch && '--watch',
+        watch && !useTsc && resolveBundler({}) === 'vite' && '--react-refresh',
+    ].filter(option => typeof option === 'string');
+
     return lernaExec({
         cmd: useTsc ? 'startup task tsc-compile-package' : 'startup task swc-compile-package',
         parallel: true,
         scope: packages,
         stream: true,
         stdio: watch ? ['inherit', 'pipe', 'inherit'] : 'inherit',
-        ...(watch ? { '--': ['--watch'] } : {}),
+        ...(options.length ? { '--': options } : {}),
     });
 }

package/src/cli/utils/copy-files.ts

@@ -7,7 +7,7 @@ import { compileLess } from './compile-less';
 import { compileSass } from './compile-sass';
 
 const assetExtensions = ['eot', 'gif', 'jpg', 'otf', 'png', 'svg', 'ttf', 'woff', 'woff2'];
-const resourceExtensions = ['html', 'json'];
+const resourceExtensions = ['html', 'js', 'json'];
 export const styleExtensions = ['css', 'less', 'scss'];
 const styleTypeDefinitionExtensions = styleExtensions.map(ext => `${ext}.d.ts`);
 

package/src/cli/utils/index.ts

@@ -16,7 +16,6 @@ export * from './compile';
  */
 export * from './constants';
 export * from './eslint';
-export * from './get-bundle-command';
 export * from './get-exit-code';
 export * from './get-module-type';
 export * from './is-module-installed';
@@ -32,3 +31,4 @@ export * from './set-node-options';
 export * from './ts-config';
 export * from './type-check';
 export * from './watch-stdout';
+export * from './with-exponential-backoff';

package/src/cli/utils/resolve-bundler.ts

@@ -1,3 +1,4 @@
+import { bundleConstants } from '../../core';
 import { type Bundler, getConfiguration, log } from '../../utils';
 
 interface BundlerArgs {
@@ -19,5 +20,5 @@ export function resolveBundler(args: BundlerArgs): Bundler {
         return 'vite';
     }
 
-    return getConfiguration().bundler ?? 'webpack';
+    return getConfiguration().bundler ?? bundleConstants.defaultBundler;
 }

package/src/cli/utils/ts-config.ts

@@ -5,7 +5,7 @@ import { readJson } from '../../utils';
 export class TSConfig {
     private readonly json: Map<string, any>;
 
-    constructor(private readonly configPath: string) {
+    constructor(readonly configPath: string) {
         this.json = new Map();
     }
 

package/src/cli/utils/with-exponential-backoff.ts

@@ -0,0 +1,28 @@
+export interface WithExponentialBackoffConfig {
+    initialDelay?: number;
+    maxRetries?: number;
+    onRetry?: (delay: number, error: unknown) => void;
+}
+
+export async function withExponentialBackoff<T>(
+    callback: () => Promise<T>,
+    config: WithExponentialBackoffConfig = {}
+): Promise<T> {
+    const { initialDelay = 500, maxRetries = 5, onRetry } = config;
+
+    const attempt = async (attemptNumber: number, delay: number): Promise<T> => {
+        try {
+            return await callback();
+        } catch (error) {
+            if (attemptNumber >= maxRetries) {
+                throw error;
+            }
+
+            onRetry?.(delay, error);
+            await new Promise(resolve => setTimeout(resolve, delay));
+            return attempt(attemptNumber + 1, delay * 2);
+        }
+    };
+
+    return attempt(1, initialDelay);
+}

package/src/core/constants.ts

@@ -13,4 +13,6 @@ export const bundleConstants = {
         production: 'production',
         development: 'development',
     },
+    bundlers: ['vite', 'webpack'],
+    defaultBundler: 'webpack',
 } as const;

package/src/storybook-config/__tests__/vite-final.test.ts

@@ -6,6 +6,12 @@ import { viteFinal } from '../vite-final';
 
 jest.mock('../../vite/plugins');
 jest.mock('../../vite/config/create-filtering-logger');
+jest.mock('../../vite/config/create-css-config', () => ({
+    createCssConfig: jest.fn(() => ({
+        modules: { localsConvention: 'camelCaseOnly' },
+        preprocessorOptions: { less: { math: 'always' } },
+    })),
+}));
 
 describe(`[startup/storybook-config] ${viteFinal.name}`, () => {
     const mockSvgrPlugin: any = { name: 'vite-plugin-svgr' };

package/src/storybook-config/__tests__/webpack-final.test.ts

@@ -1,6 +1,10 @@
 import type { Configuration } from 'webpack';
 import { rulesConfig } from '../../webpack/configs';
-import { ignorePlugin, miniCssExtractPlugin } from '../../webpack/configs/plugins';
+import {
+    filterWarningsPlugin,
+    ignorePlugin,
+    miniCssExtractPlugin,
+} from '../../webpack/configs/plugins';
 import { Overrides } from '../../webpack/types';
 import { webpackFinal } from '../webpack-final';
 
@@ -18,16 +22,18 @@ describe(`[startup/storybook-config] ${webpackFinal.name}`, () => {
         { test: /\.svg$/, use: ['svg-loader'] },
         { test: /\.css$/, use: ['css-loader'] },
     ];
-    const mockMiniCssExtractPlugin: any = { name: 'MiniCssExtractPlugin' };
+    const mockFilterWarningsPlugin: any = { name: 'FilterWarningsPlugin' };
     const mockIgnorePlugin: any = { name: 'IgnorePlugin' };
+    const mockMiniCssExtractPlugin: any = { name: 'MiniCssExtractPlugin' };
     let config: Configuration;
     let overrides: Overrides | undefined;
 
     beforeEach(() => {
         jest.clearAllMocks();
         jest.mocked(rulesConfig).mockReturnValue({ rules: mockRules });
-        jest.mocked(miniCssExtractPlugin).mockReturnValue(mockMiniCssExtractPlugin);
+        jest.mocked(filterWarningsPlugin).mockReturnValue(mockFilterWarningsPlugin);
         jest.mocked(ignorePlugin).mockReturnValue(mockIgnorePlugin);
+        jest.mocked(miniCssExtractPlugin).mockReturnValue(mockMiniCssExtractPlugin);
         config = {};
         overrides = undefined;
     });
@@ -53,12 +59,16 @@ describe(`[startup/storybook-config] ${webpackFinal.name}`, () => {
         );
     });
 
-    test('adds MiniCssExtractPlugin to config', () => {
-        expect(subject().plugins).toEqual(expect.arrayContaining([mockMiniCssExtractPlugin]));
+    test('adds FilterWarningPlugin to config', () => {
+        expect(subject().plugins).toContain(mockFilterWarningsPlugin);
     });
 
     test('adds IgnorePlugin to config', () => {
-        expect(subject().plugins).toEqual(expect.arrayContaining([mockIgnorePlugin]));
+        expect(subject().plugins).toContain(mockIgnorePlugin);
+    });
+
+    test('adds MiniCssExtractPlugin to config', () => {
+        expect(subject().plugins).toContain(mockMiniCssExtractPlugin);
     });
 
     describe('when config contains rules', () => {
@@ -76,22 +86,26 @@ describe(`[startup/storybook-config] ${webpackFinal.name}`, () => {
 
     describe('when config contains plugins', () => {
         const configPlugin: any = { name: 'MockPlugin' };
+        const defaultPlugIns = [
+            mockMiniCssExtractPlugin,
+            mockIgnorePlugin,
+            mockFilterWarningsPlugin,
+        ];
 
         beforeEach(() => (config.plugins = [configPlugin]));
 
         test('appends default plugins to config', () => {
-            expect(subject().plugins).toEqual([
-                configPlugin,
-                mockMiniCssExtractPlugin,
-                mockIgnorePlugin,
-            ]);
+            expect(subject().plugins).toEqual([configPlugin, ...defaultPlugIns]);
         });
 
         describe('when MiniCssExtractPlugin is disabled', () => {
             beforeEach(() => jest.mocked(miniCssExtractPlugin).mockReturnValue(undefined));
 
             test('omits plugin', () => {
-                expect(subject().plugins).toEqual([configPlugin, mockIgnorePlugin]);
+                expect(subject().plugins).toEqual([
+                    configPlugin,
+                    ...defaultPlugIns.filter(plugin => plugin !== mockMiniCssExtractPlugin),
+                ]);
             });
         });
     });

package/src/storybook-config/webpack-final.ts

@@ -3,7 +3,11 @@ import { inspect } from 'node:util';
 import type { Configuration } from 'webpack';
 import { log } from '../utils';
 import { rulesConfig } from '../webpack/configs';
-import { ignorePlugin, miniCssExtractPlugin } from '../webpack/configs/plugins';
+import {
+    filterWarningsPlugin,
+    ignorePlugin,
+    miniCssExtractPlugin,
+} from '../webpack/configs/plugins';
 import { Overrides, WebpackBuildContext } from '../webpack/types';
 
 export function webpackFinal(config: Configuration, overrides: Overrides = {}): Configuration {
@@ -48,9 +52,11 @@ function getContext(config: Configuration): WebpackBuildContext {
 }
 
 function getPlugins(context: WebpackBuildContext, overrides: Overrides) {
-    return [miniCssExtractPlugin(context, overrides), ignorePlugin(context, {})].filter(
-        plugin => !!plugin
-    );
+    return [
+        miniCssExtractPlugin(context, overrides),
+        ignorePlugin(context, {}),
+        filterWarningsPlugin(context, {}),
+    ].filter(plugin => !!plugin);
 }
 
 function getRules(context: WebpackBuildContext, overrides: Overrides) {

package/src/utils/__tests__/exit-when-parent-exits.test.ts

@@ -0,0 +1,87 @@
+/**
+ * @jest-environment node
+ */
+import { exitWhenParentExits } from '../exit-when-parent-exits';
+import { log } from '../log';
+
+jest.mock('../log', () => ({ log: { info: jest.fn() } }));
+
+describe(`[startup] ${exitWhenParentExits.name}`, () => {
+    const command = 'some-task';
+    const parentPid = 4321;
+    let callback: (() => void) | undefined;
+    let killSpy: jest.SpyInstance;
+    let exitSpy: jest.SpyInstance;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        jest.useFakeTimers();
+        callback = undefined;
+        killSpy = jest.spyOn(process, 'kill').mockImplementation(jest.fn());
+        exitSpy = jest.spyOn(process, 'exit').mockImplementation(jest.fn() as any);
+        process.env.STARTUP_PARENT_PID = String(parentPid);
+    });
+
+    afterEach(() => {
+        jest.useRealTimers();
+    });
+
+    const subject = () => {
+        exitWhenParentExits(command, callback);
+        jest.advanceTimersByTime(1000);
+    };
+
+    test('polls whether the parent process is still running', () => {
+        subject();
+
+        expect(killSpy).toHaveBeenCalledWith(parentPid, 0);
+    });
+
+    describe('with no process.env.STARTUP_PARENT_PID', () => {
+        beforeEach(() => delete process.env.STARTUP_PARENT_PID);
+
+        test('does not poll', () => {
+            subject();
+
+            expect(killSpy).not.toHaveBeenCalled();
+        });
+    });
+
+    describe('when the parent process has exited', () => {
+        beforeEach(() => {
+            killSpy.mockImplementation(() => {
+                throw new Error('ESRCH');
+            });
+        });
+
+        test('logs shutdown message', () => {
+            subject();
+
+            expect(log.info).toHaveBeenCalledWith(`${command} shutting down`);
+        });
+
+        test('exits the process', () => {
+            subject();
+
+            expect(exitSpy).toHaveBeenCalledWith(0);
+        });
+
+        describe('with a callback', () => {
+            beforeEach(() => (callback = jest.fn()));
+
+            test('does not exit the process', () => {
+                subject();
+
+                expect(exitSpy).not.toHaveBeenCalled();
+            });
+
+            test('calls the callback', () => {
+                subject();
+
+                jest.advanceTimersByTime(1000);
+
+                expect(callback).toHaveBeenCalled();
+            });
+        });
+    });
+});

package/src/utils/__tests__/find-up.test.ts

@@ -0,0 +1,49 @@
+import path from 'path';
+import { findUp } from '../find-up';
+
+describe(findUp.name, () => {
+    let callback: jest.Mock;
+    let from: string | undefined;
+
+    const subject = () => findUp(callback, from);
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        callback = jest.fn();
+        from = undefined;
+    });
+
+    test('searches upward from the current working directory', () => {
+        subject();
+
+        ['.', '..', '../..'].forEach((dir, index) =>
+            expect(callback).toHaveBeenNthCalledWith(index + 1, path.resolve(dir))
+        );
+    });
+
+    test('returns undefined', () => {
+        expect(subject()).toBeUndefined();
+    });
+
+    describe('when a directory matches', () => {
+        const result = 'foo';
+
+        beforeEach(() => callback.mockReturnValueOnce(undefined).mockReturnValueOnce(result));
+
+        test('returns the callback result', () => {
+            expect(subject()).toBe(result);
+        });
+    });
+
+    describe('with a starting directory', () => {
+        beforeEach(() => (from = path.resolve('a/b/c')));
+
+        test('searches upward from the specified directory', () => {
+            subject();
+
+            ['.', '..', '../..'].forEach((dir, index) =>
+                expect(callback).toHaveBeenNthCalledWith(index + 1, path.resolve(from!, dir))
+            );
+        });
+    });
+});

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

@@ -7,6 +7,7 @@ import {
     getExposeProcessEnv,
     getJestConfiguration,
     getReviewConfiguration,
+    getSharedDependencies,
     getStylelintConfiguration,
     getViteConfiguration,
     getVitestConfiguration,
@@ -243,6 +244,67 @@ describe('[startup] Utils', () => {
         });
     });
 
+    describe(getSharedDependencies.name, () => {
+        const sharedDependencies = { react: 'SharedDependencies.React' };
+        let locationOrJson: Parameters<typeof getSharedDependencies>[0];
+
+        beforeEach(() => (locationOrJson = undefined));
+
+        const subject = () => getSharedDependencies(locationOrJson);
+
+        itReturns(subject, undefined);
+
+        describe('with "cli.shared-dependencies"', () => {
+            beforeEach(() =>
+                mockPackageJson({ cli: { 'shared-dependencies': sharedDependencies } })
+            );
+
+            test('returns "cli.shared-dependencies"', () => {
+                expect(subject()).toEqual(sharedDependencies);
+            });
+        });
+
+        describe('with "cli.webpack.shared-dependencies"', () => {
+            beforeEach(() =>
+                mockPackageJson({ cli: { webpack: { 'shared-dependencies': sharedDependencies } } })
+            );
+
+            test('returns "cli.webpack.shared-dependencies"', () => {
+                expect(subject()).toEqual(sharedDependencies);
+            });
+        });
+
+        describe('with both top-level and webpack "shared-dependencies"', () => {
+            beforeEach(() =>
+                mockPackageJson({
+                    cli: {
+                        'shared-dependencies': sharedDependencies,
+                        'webpack': { 'shared-dependencies': { mobx: 'SharedDependencies.MobX' } },
+                    },
+                })
+            );
+
+            test('returns top-level "cli.shared-dependencies"', () => {
+                expect(subject()).toEqual(sharedDependencies);
+            });
+        });
+
+        describe('with a location', () => {
+            beforeEach(() => {
+                locationOrJson = 'packages/foo';
+                vol.fromJSON({
+                    [`packages/foo/${packageJson}`]: JSON.stringify({
+                        cli: { 'shared-dependencies': sharedDependencies },
+                    }),
+                });
+            });
+
+            test("returns location's shared dependencies", () => {
+                expect(subject()).toEqual(sharedDependencies);
+            });
+        });
+    });
+
     describe(getViteConfiguration.name, () => {
         const subject = () => getViteConfiguration();
 

package/src/utils/exit-when-parent-exits.ts

@@ -0,0 +1,33 @@
+import { log } from './log';
+
+const POLL_INTERVAL_MS = 1000;
+
+/**
+ * Exits current process when the parent identified by process.env.STARTUP_PARENT_PID
+ * is no longer running. Use `callback` to override default behavior.
+ */
+export function exitWhenParentExits(command: string, callback: () => void = () => process.exit(0)) {
+    const parentPid = Number(process.env.STARTUP_PARENT_PID);
+    if (!parentPid) {
+        return;
+    }
+
+    const interval = setInterval(() => {
+        if (!isRunning(parentPid)) {
+            clearInterval(interval);
+            log.info(`${command} shutting down`);
+            callback();
+        }
+    }, POLL_INTERVAL_MS);
+    interval.unref();
+}
+
+function isRunning(pid: number) {
+    try {
+        // signal 0 sends nothing; it only checks whether the pid exists
+        process.kill(pid, 0);
+        return true;
+    } catch {
+        return false;
+    }
+}

package/src/utils/find-up.ts

@@ -1,7 +1,7 @@
 import path from 'node:path';
 
-export function findUp<T>(callback: (directory: string) => T | undefined) {
-    let directory = path.resolve('./');
+export function findUp<T>(callback: (directory: string) => T | undefined, from = './') {
+    let directory = path.resolve(from);
     do {
         const result = callback(directory);
         if (result) {

package/src/utils/get-configuration.ts

@@ -8,6 +8,7 @@ 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 { bundleConstants } from '../core/constants';
 import { getFolders } from './get-folders';
 import { getPackageName } from './get-package-name';
 import { log } from './log';
@@ -18,7 +19,7 @@ type VitePluginSvgrOptions = NonNullable<Parameters<typeof svgr>[0]>;
 
 type ElementType<T> = T extends readonly (infer ElementType)[] ? ElementType : never;
 
-export type Bundler = 'vite' | 'webpack';
+export type Bundler = ElementType<typeof bundleConstants.bundlers>;
 
 export const allowedWebpackDevServerOptions = ['headers', 'port', 'proxy', 'static'] as const;
 
@@ -69,6 +70,7 @@ 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',
@@ -144,7 +146,7 @@ interface WebComponentOptions {
     branches?: Record<string, WebComponentBranchConfigs>;
 }
 
-type Configuration = {
+export type Configuration = {
     'bundler'?: Bundler;
     'jest'?: JestConfiguration;
     'legacy'?: boolean;
@@ -277,10 +279,17 @@ export function isViteDevServerDisabled() {
     return getViteConfiguration().devServer === false;
 }
 
-export function isExposeSharedDependencies() {
+export function getSharedDependencies(locationOrJson?: LocationOrJson) {
     return (
-        (getConfiguration()['expose-shared-dependencies'] ??
-            getWebpackConfiguration()['expose-shared-dependencies']) === true
+        getConfiguration(locationOrJson)['shared-dependencies'] ??
+        getWebpackConfiguration(locationOrJson)['shared-dependencies']
+    );
+}
+
+export function isExposeSharedDependencies(locationOrJson?: LocationOrJson) {
+    return (
+        (getConfiguration(locationOrJson)['expose-shared-dependencies'] ??
+            getWebpackConfiguration(locationOrJson)['expose-shared-dependencies']) === true
     );
 }
 

package/src/utils/index.ts

@@ -1,3 +1,4 @@
+export * from './exit-when-parent-exits';
 export * from './find-packages';
 export * from './find-up';
 export * from './format-duration';

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

@@ -18,11 +18,14 @@ jest.mock('../../core', () => ({
 jest.mock('../config', () => ({
     createViteConfig: jest.fn(),
 }));
+jest.mock('../plugins', () => ({
+    cleanPlugin: jest.fn(() => ({ name: 'clean' })),
+}));
 jest.mock('../plugins/shared-dependencies-plugin', () => ({
     sharedDependenciesPlugin: jest.fn(() => ({ name: 'shared-dependencies' })),
 }));
 
-describe(buildSharedDependencies.name, () => {
+describe(`[startup] ${buildSharedDependencies.name}`, () => {
     const viteConfig: any = {};
     let options: any;
     let context: BuildContext;
@@ -52,17 +55,48 @@ describe(buildSharedDependencies.name, () => {
         });
     });
 
-    test('passes shared dependencies and metadata directory to plugin', async () => {
+    test.each(['clean', 'shared-dependencies'])('registers the %s plugin', async name => {
         await subject();
 
-        expect(sharedDependenciesPlugin).toHaveBeenCalledWith(
+        expect(build).toHaveBeenCalledWith(
             expect.objectContaining({
-                dependencies: context.package.sharedDependencies,
-                metadataDir: context.package.destination,
+                plugins: expect.arrayContaining([{ name }]),
             })
         );
     });
 
+    test('passes dependencies and metadataDir to shared-dependencies plugin', async () => {
+        await subject();
+
+        expect(sharedDependenciesPlugin).toHaveBeenCalledWith({
+            css: {},
+            dependencies: context.package.sharedDependencies,
+            metadataDir: context.package.destination,
+        });
+    });
+
+    describe('when package depends on design system', () => {
+        beforeEach(() => {
+            context.package.sharedDependencies['@servicetitan/design-system'] = 'DesignSystem';
+        });
+
+        test('passes design system css to shared-dependencies 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',
+                        ],
+                    },
+                })
+            );
+        });
+    });
+
     test('builds with development mode', async () => {
         await subject();
 

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

@@ -7,6 +7,7 @@ import {
     resolveOutputPath,
 } from '../core';
 import { createViteConfig } from './config';
+import { cleanPlugin } from './plugins';
 import { sharedDependenciesPlugin } from './plugins/shared-dependencies-plugin';
 
 export async function buildSharedDependencies(options: BuildContextOptions) {
@@ -20,7 +21,7 @@ export async function buildSharedDependencies(options: BuildContextOptions) {
             legalComments: 'none',
         },
         mode: getMode(context),
-        plugins: [getSharedDependenciesPlugin(context)],
+        plugins: [cleanPlugin(context), getSharedDependenciesPlugin(context)],
         build: {
             outDir: resolveOutputPath(context, config.build?.outDir),
             minify: config.build?.minify,