@servicetitan/startup 25.0.0 → 26.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/startup",
-    "version": "25.0.0",
+    "version": "26.0.0",
     "description": "",
     "homepage": "https://docs.st.dev/docs/frontend/startup",
     "repository": {
@@ -30,15 +30,14 @@
         "@types/moment-locales-webpack-plugin": "~1.2.2",
         "@types/sass": "~1.45.0",
         "@types/webpack-assets-manifest": "~5.1.4",
-        "@types/webpack-dev-server": "~3.11.5",
         "@types/yargs": "~17.0.24"
     },
     "dependencies": {
-        "@babel/preset-env": "~7.24.8",
+        "@babel/preset-env": "~7.25.3",
         "@jest/core": "~29.7.0",
         "@jest/types": "~29.6.3",
-        "@servicetitan/eslint-config": "25.0.0",
-        "@servicetitan/stylelint-config": "25.0.0",
+        "@servicetitan/eslint-config": "26.0.0",
+        "@servicetitan/stylelint-config": "26.0.0",
         "@svgr/webpack": "^8.1.0",
         "@swc/core": "1.6.13",
         "@types/debug": "^4.1.12",
@@ -47,7 +46,7 @@
         "chokidar": "~3.6.0",
         "cpx": "~1.5.0",
         "css-loader": "~7.1.2",
-        "debug": "^4.3.5",
+        "debug": "^4.3.6",
         "deepmerge": "~4.3.1",
         "esbuild-loader": "~4.2.2",
         "eslint": "~8.57.0",
@@ -60,7 +59,7 @@
         "jest-circus": "~29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "jest-fetch-mock": "~3.0.3",
-        "lerna": "~8.1.6",
+        "lerna": "~8.1.7",
         "less": "~4.2.0",
         "less-loader": "~12.2.0",
         "less-plugin-npm-import": "~2.1.0",
@@ -70,16 +69,16 @@
         "moment-locales-webpack-plugin": "~1.2.0",
         "multimatch": "~5.0.0",
         "portfinder": "~1.0.32",
-        "postcss": "~8.4.39",
+        "postcss": "~8.4.40",
         "prettier": "~2.7.1",
         "sass": "~1.77.8",
-        "sass-loader": "~14.2.1",
+        "sass-loader": "~16.0.0",
         "source-map-loader": "~5.0.0",
         "string-width": "<5.0.0",
         "style-loader": "~4.0.0",
         "stylelint": "~14.16.1",
         "swc-loader": "0.2.6",
-        "ts-jest": "~29.1.5",
+        "ts-jest": "~29.2.3",
         "ts-loader": "~9.5.1",
         "ts-node": "~10.9.2",
         "typed-css-modules": "~0.9.1",
@@ -88,7 +87,7 @@
         "webpack": "~5.93.0",
         "webpack-assets-manifest": "~5.2.1",
         "webpack-bundle-analyzer": "^4.10.2",
-        "webpack-dev-server": "~3.11.2",
+        "webpack-dev-server": "~5.0.4",
         "webpack-filter-warnings-plugin": "~1.2.1",
         "webpack-merge": "~6.0.1",
         "webpack-virtual-modules": "~0.6.2",
@@ -105,5 +104,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "db04847b5e4d8f0e679ce6c6f561aab10ade927d"
+    "gitHead": "c19b559c2183cbd7f74814b7b913f3343270756a"
 }

package/src/cli/commands/__tests__/start.test.ts

@@ -69,7 +69,7 @@ describe(`[startup] ${Start.name}`, () => {
                 'scope': packages.map(({ name }) => name),
                 'parallel': true,
                 'stream': true,
-                '--': ['--watch'],
+                '--': ['--color', '--watch'],
             });
         });
 
@@ -81,7 +81,7 @@ describe(`[startup] ${Start.name}`, () => {
 
                 expect(lernaExec).toHaveBeenCalledWith(
                     expect.objectContaining({
-                        '--': ['--watch', '--code-coverage'],
+                        '--': ['--color', '--watch', '--code-coverage'],
                     })
                 );
             });
@@ -95,7 +95,7 @@ describe(`[startup] ${Start.name}`, () => {
 
                 expect(lernaExec).toHaveBeenCalledWith(
                     expect.objectContaining({
-                        '--': ['--watch', '--esbuild'],
+                        '--': ['--color', '--watch', '--esbuild'],
                     })
                 );
             });
@@ -109,7 +109,7 @@ describe(`[startup] ${Start.name}`, () => {
 
                 expect(lernaExec).toHaveBeenCalledWith(
                     expect.objectContaining({
-                        '--': ['--watch', '--experimental-bundlers'],
+                        '--': ['--color', '--watch', '--experimental-bundlers'],
                     })
                 );
             });
@@ -123,7 +123,7 @@ describe(`[startup] ${Start.name}`, () => {
 
                 expect(lernaExec).toHaveBeenCalledWith(
                     expect.objectContaining({
-                        '--': ['--watch', `--config "${args.config}"`],
+                        '--': ['--color', '--watch', `--config "${args.config}"`],
                     })
                 );
             });

package/src/cli/commands/__tests__/styles-check.test.ts

@@ -33,7 +33,11 @@ describe(`[startup] ${StylesCheck.name}`, () => {
         jest.resetAllMocks();
         jest.mocked(isBundle).mockReturnValue(true);
         jest.mocked(getFolders).mockReturnValue({ source: 'src', destination: 'dist' });
-        jest.mocked(getPackageData).mockReturnValue({ dependencies: {}, sharedDependencies: {} });
+        jest.mocked(getPackageData).mockReturnValue({
+            name: '',
+            dependencies: {},
+            sharedDependencies: {},
+        });
         jest.mocked(loadSharedDependencies).mockReturnValue({});
     });
 

package/src/cli/commands/start.ts

@@ -61,6 +61,7 @@ export class Start implements Command {
                           'parallel': true,
                           'stream': true,
                           '--': [
+                              '--color',
                               '--watch',
                               this.args.config ? `--config "${this.args.config}"` : undefined,
                               this.args['code-coverage'] ? '--code-coverage' : undefined,

package/src/cli/utils/__tests__/bundle.test.ts

@@ -168,7 +168,7 @@ describe('[startup] Cli Utils', () => {
             beforeEach(() => {
                 vol.fromJSON(webComponentFS());
                 jest.mocked(getFolders).mockReturnValue({ source, destination });
-                jest.mocked(getPackageData).mockReturnValue({ dependencies });
+                jest.mocked(getPackageData).mockReturnValue({ name: '', dependencies });
                 jest.mocked(loadSharedDependencies).mockReturnValue(sharedDependencies);
             });
 
@@ -255,10 +255,10 @@ describe('[startup] Cli Utils', () => {
             options = undefined;
             vol.fromJSON(packageFS());
             jest.mocked(WebpackDevServer).mockImplementation((): any => ({
-                listen: jest.fn((_0: number, _1: string, callback?: (error?: Error) => void) =>
+                startCallback: jest.fn((callback?: (error?: Error) => void) =>
                     stopWatching(callback)
                 ),
-                close: compiler.close,
+                stopCallback: compiler.close,
             }));
             compiler.watch = jest.fn((_, callback): any => {
                 stopWatching(callback);
@@ -281,17 +281,26 @@ describe('[startup] Cli Utils', () => {
                 { name: expectPackageName() }
             );
             expect(webpack).toHaveBeenCalledWith(createWebpackResult);
-            expect(WebpackDevServer).toHaveBeenCalledWith(compiler, {});
+            expect(WebpackDevServer).toHaveBeenCalledWith(
+                { host: 'localhost', port: 8080 },
+                compiler
+            );
         });
 
         function itUsesConfig(params: { name: string; config: () => Record<string, any> }) {
             test(`uses ${params.name}`, async () => {
                 const { devServer, ...config } = params.config();
+                const host = devServer.host ?? 'localhost';
+                const port =
+                    typeof devServer.port === 'string' ? Number(devServer.port) : devServer.port;
 
                 await subject();
 
                 expect(webpack).toHaveBeenCalledWith(config);
-                expect(WebpackDevServer).toHaveBeenCalledWith(compiler, devServer);
+                expect(WebpackDevServer).toHaveBeenCalledWith(
+                    { ...devServer, host, port },
+                    compiler
+                );
             });
         }
 
@@ -327,7 +336,7 @@ describe('[startup] Cli Utils', () => {
             beforeEach(() => {
                 vol.fromJSON(webComponentFS());
                 jest.mocked(getFolders).mockReturnValue({ source, destination });
-                jest.mocked(getPackageData).mockReturnValue({ dependencies });
+                jest.mocked(getPackageData).mockReturnValue({ name: '', dependencies });
                 jest.mocked(loadSharedDependencies).mockReturnValue(sharedDependencies);
             });
 
@@ -344,7 +353,10 @@ describe('[startup] Cli Utils', () => {
                 });
                 expect(webpack).toHaveBeenCalledWith(createWebpackResult);
                 expect(compiler.watch).toHaveBeenCalled();
-                expect(WebpackDevServer).toHaveBeenCalledWith(compiler, {});
+                expect(WebpackDevServer).toHaveBeenCalledWith(
+                    { host: 'localhost', port: 8080 },
+                    compiler
+                );
             });
 
             function itUsesConfig(params: { name: string; config: () => Record<string, any> }) {

package/src/cli/utils/bundle.ts

@@ -38,26 +38,6 @@ export async function bundle(options: Options = {}) {
     const config = readWebpackConfig({ ...options, fallback });
     const { buildStat, codeCoverage, esbuild, experimentalBundlers } = options;
 
-    const run = async (config: Configuration) => {
-        const compiler = webpack(config);
-
-        const stats = await new Promise<webpack.Stats>((resolve, reject) => {
-            compiler.run((error, stats) => {
-                if (!stats || error) {
-                    return reject(error ?? new Error('Something went wrong.'));
-                }
-
-                if (stats.hasErrors()) {
-                    return reject(stats.toString('errors-only'));
-                }
-
-                compiler.close(() => resolve(stats));
-            });
-        });
-
-        process.stdout.write(stats.toString(config.stats) + '\n');
-    };
-
     const webpackOptions = { name, buildStat, codeCoverage, esbuild, experimentalBundlers };
 
     if (isWebComponent()) {
@@ -83,40 +63,6 @@ export async function bundleWatch(options: Options = {}) {
     const config = readWebpackConfig({ ...options, fallback: `./${webpackDevConfigFileName}` });
     const { codeCoverage, esbuild, experimentalBundlers } = options;
 
-    const runServe = async ({ devServer = {}, ...config }: Configuration) => {
-        const compiler = webpack(config);
-        const host = devServer.host ?? 'localhost';
-        const port = await getPortPromise({
-            port: devServer.port ?? 8080,
-            host,
-        });
-
-        return new Promise<void>((_0, reject) => {
-            const server = new WebpackDevServer(compiler, devServer);
-
-            server.listen(port, host, e => {
-                if (e) {
-                    server.close(() => {
-                        reject(e);
-                    });
-                }
-            });
-        });
-    };
-
-    const run = async (config: Configuration) => {
-        const compiler = webpack(config);
-        return new Promise<void>((_0, reject) => {
-            const watching = compiler.watch({}, e => {
-                if (e) {
-                    watching.close(() => {
-                        reject(e);
-                    });
-                }
-            });
-        });
-    };
-
     if (isWebComponent()) {
         const webpackConfig: Overrides = {
             configuration: { ...config?.configuration, mode },
@@ -124,7 +70,7 @@ export async function bundleWatch(options: Options = {}) {
         };
 
         return Promise.all([
-            run(
+            runWatch(
                 createWebpackConfig(webpackConfig, {
                     codeCoverage,
                     embed: true,
@@ -162,3 +108,56 @@ function readConfig(relativePath?: string): Record<string, any> | undefined {
         return require(path.resolve(relativePath));
     }
 }
+
+async function run(config: Configuration) {
+    const compiler = webpack(config);
+
+    const stats = await new Promise<webpack.Stats>((resolve, reject) => {
+        compiler.run((error, stats) => {
+            if (!stats || error) {
+                return reject(error ?? new Error('Something went wrong.'));
+            }
+
+            if (stats.hasErrors()) {
+                return reject(stats.toString('errors-only'));
+            }
+
+            compiler.close(() => resolve(stats));
+        });
+    });
+
+    process.stdout.write(stats.toString(config.stats) + '\n');
+}
+
+async function runServe({ devServer = {}, ...config }: Configuration) {
+    const compiler = webpack(config);
+    const host = devServer.host ?? 'localhost';
+    const port = await getPortPromise({
+        port: Number(devServer.port) || 8080,
+        host,
+    });
+
+    return new Promise<void>((_0, reject) => {
+        const server = new WebpackDevServer({ ...devServer, host, port }, compiler);
+        server.startCallback(e => {
+            if (e) {
+                server.stopCallback(() => {
+                    reject(e);
+                });
+            }
+        });
+    });
+}
+
+async function runWatch(config: Configuration) {
+    const compiler = webpack(config);
+    return new Promise<void>((_0, reject) => {
+        const watching = compiler.watch({}, e => {
+            if (e) {
+                watching.close(() => {
+                    reject(e);
+                });
+            }
+        });
+    });
+}

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

@@ -1,11 +1,8 @@
 import { fs, vol } from 'memfs';
-import WebpackDevServer from 'webpack-dev-server';
-import path from 'path';
 
 import {
     getConfiguration,
     getConfigurationSafe,
-    getDevServerConfiguration,
     getESLintConfiguration,
     getJestConfiguration,
     getStylelintConfiguration,
@@ -137,63 +134,6 @@ describe('[startup] Utils', () => {
         });
     });
 
-    describe(`${getDevServerConfiguration.name}`, () => {
-        const subject = () => getDevServerConfiguration();
-
-        itReturns(subject, undefined);
-
-        describe('with "cli.webpack"', () => {
-            const webpack: WebpackDevServer.Configuration = {
-                // allowed options
-                contentBase: 'foo',
-                headers: { foo: 'bar' },
-                port: 9000,
-                proxy: { baz: 'qux' },
-                // example disallowed options
-                compress: true,
-                clientLogLevel: 'debug',
-            };
-
-            beforeEach(() => mockPackageJson({ cli: { webpack } }));
-
-            test('returns allowed options from "cli.webpack', () => {
-                const { contentBase, headers, port, proxy } = webpack;
-                expect(subject()).toEqual({ contentBase, headers, port, proxy });
-            });
-
-            describe('when "cli.webpack.proxy" is a path', () => {
-                const proxy = 'proxy.js';
-                const proxyConfig = { cli: { webpack: { ...webpack, proxy } } };
-
-                beforeEach(() => mockPackageJson(proxyConfig));
-
-                describe('when file does not exist', () => {
-                    test('drops the proxy option', () => {
-                        expect(subject()?.proxy).toBeUndefined();
-                    });
-                });
-
-                describe('when file exists', () => {
-                    beforeEach(() => {
-                        vol.fromJSON({
-                            ...packageJsonFS(proxyConfig),
-                            [proxy]: JSON.stringify(webpack.proxy),
-                        });
-
-                        // Have to mock proxy.js because our fs is virtual, but require() is not
-                        jest.doMock(path.resolve('proxy.js'), () => webpack.proxy, {
-                            virtual: true,
-                        });
-                    });
-
-                    test('loads proxy option from the file', () => {
-                        expect(subject()?.proxy).toEqual(webpack.proxy);
-                    });
-                });
-            });
-        });
-    });
-
     describe(`${getESLintConfiguration.name}`, () => {
         const subject = () => getESLintConfiguration();
 

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

@@ -13,7 +13,10 @@ describe(`[startup] Utils`, () => {
         beforeEach(() => {
             packages = {
                 [ancestorPackageJson]: { dependencies: { foo: '1.0.0', bar: '2.0.0' } },
-                [packageJson]: { dependencies: { foo: '1.1.0', baz: '3.0.0' } },
+                [packageJson]: {
+                    name: 'packageName',
+                    dependencies: { foo: '1.1.0', baz: '3.0.0' },
+                },
             };
             jest.mocked(readJson).mockImplementation(path => packages[path] ?? {});
         });
@@ -22,6 +25,7 @@ describe(`[startup] Utils`, () => {
 
         test(`returns merged dependencies from ${packageJson} and ${ancestorPackageJson}`, () => {
             expect(subject()).toEqual({
+                name: packages[packageJson].name,
                 dependencies: {
                     ...packages[ancestorPackageJson].dependencies,
                     ...packages[packageJson].dependencies,

package/src/utils/__tests__/log.test.ts

@@ -26,10 +26,10 @@ describe(`[startup] Utils`, () => {
             expect(stdoutSpy).toHaveBeenCalledWith(`${chalk.bold.green(message)}\n`);
         });
 
-        test('warning() writes orange text', () => {
+        test('warning() writes yellow text', () => {
             log.warning(message);
 
-            expect(stdoutSpy).toHaveBeenCalledWith(`${chalk.bold.keyword('orange')(message)}\n`);
+            expect(stdoutSpy).toHaveBeenCalledWith(`${chalk.bold.yellow(message)}\n`);
         });
 
         test('error() writes red text', () => {

package/src/utils/get-configuration.ts

@@ -1,4 +1,3 @@
-import fs from 'fs';
 import path from 'path';
 
 import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
@@ -7,7 +6,7 @@ import { LinterOptions } from 'stylelint';
 import { Config } from '@jest/types';
 import { readJson, readJsonSafe } from './read-json';
 
-const allowedWebpackDevServerOptions = ['headers', 'port', 'proxy', 'contentBase'] as const;
+export const allowedWebpackDevServerOptions = ['headers', 'port', 'proxy', 'static'] as const;
 
 type ElementType<T> = T extends readonly (infer ElementType)[] ? ElementType : never;
 
@@ -16,8 +15,10 @@ export interface WebpackConfiguration
         Pick<WebpackDevServerConfiguration, ElementType<typeof allowedWebpackDevServerOptions>>,
         'proxy'
     > {
+    'contentBase'?: boolean | string | string[] | number; // deprecated 2024-07
     'custom-style-rules'?: boolean;
     'expose-shared-dependencies'?: boolean;
+    'devServer'?: WebpackDevServerConfiguration;
     'disable-style-check'?: boolean;
     'proxy'?: WebpackDevServerConfiguration['proxy'] | string;
 }
@@ -89,29 +90,6 @@ export function getConfigurationSafe(locationOrJson: LocationOrJson = './'): Con
     return json?.cli ?? {};
 }
 
-export function getDevServerConfiguration() {
-    const configuration = getConfiguration();
-
-    if (typeof configuration.webpack !== 'object') {
-        return undefined;
-    }
-
-    const result = pick(configuration.webpack, allowedWebpackDevServerOptions);
-
-    if (typeof result.proxy === 'string') {
-        if (fs.existsSync(result.proxy)) {
-            result.proxy = require(path.resolve(result.proxy));
-        } else {
-            delete result.proxy;
-        }
-    }
-
-    return result as Pick<
-        WebpackDevServerConfiguration,
-        ElementType<typeof allowedWebpackDevServerOptions>
-    >;
-}
-
 export function getESLintConfiguration() {
     return getConfiguration().lint?.eslint ?? {};
 }
@@ -171,12 +149,3 @@ export function isWebComponent() {
     const config = getConfiguration()['web-component'];
     return config === true || typeof config === 'object';
 }
-
-function pick<T extends object, K extends keyof T>(target: T, keys: readonly K[]) {
-    return keys.reduce((result, key) => {
-        if (Object.hasOwn(target, key)) {
-            result[key] = target[key];
-        }
-        return result;
-    }, {} as Pick<T, K>);
-}

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

@@ -1,12 +1,14 @@
 import { readJson } from './read-json';
 
 export function getPackageData(): {
+    name: string;
     dependencies: Record<string, string>;
     sharedDependencies?: Record<string, string>;
 } {
     const packageJson = readJson('./package.json');
 
     return {
+        name: packageJson.name,
         dependencies: {
             ...readJson('../../package.json').dependencies,
             ...packageJson.dependencies,

package/src/utils/index.ts

@@ -1,13 +1,14 @@
 export * from './get-configuration';
 export * from './get-destination-folders';
 export * from './get-folders';
+export * from './get-jest-config';
+export * from './get-package-data';
 export * from './get-package-name';
 export * from './get-packages';
-export * from './get-package-data';
 export * from './get-startup-version';
 export * from './get-tsconfig';
+export * from './load-shared-dependencies';
 export * from './log';
+export * from './pick';
 export * from './read-json';
 export * from './to-array';
-export * from './load-shared-dependencies';
-export * from './get-jest-config';

package/src/utils/log.ts

@@ -19,7 +19,7 @@ class Log {
     }
 
     warning(...text: string[]) {
-        process.stdout.write(chalk.bold.keyword('orange')(...text) + '\n');
+        process.stdout.write(chalk.bold.yellow(...text) + '\n');
     }
 
     error(...text: string[]) {

package/src/utils/pick.ts

@@ -0,0 +1,8 @@
+export function pick<T extends object, K extends keyof T>(target: T, keys: readonly K[]) {
+    return keys.reduce((result, key) => {
+        if (Object.hasOwn(target, key)) {
+            result[key] = target[key];
+        }
+        return result;
+    }, {} as Pick<T, K>);
+}

package/src/webpack/__tests__/create-webpack-config-shared-dependencies.test.ts

@@ -70,7 +70,11 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
 
         jest.mocked(getFolders).mockReturnValue({ source, destination });
         jest.mocked(getModuleEntryPath).mockImplementation(name => `${name}/entryPath`);
-        jest.mocked(getPackageData).mockReturnValue({ dependencies, sharedDependencies });
+        jest.mocked(getPackageData).mockReturnValue({
+            name: '',
+            dependencies,
+            sharedDependencies,
+        });
         jest.mocked(getPackageDependencyVersion).mockImplementation(
             (_, defaultVersion) => defaultVersion
         );

package/src/webpack/__tests__/create-webpack-config-web-component.test.ts

@@ -95,7 +95,11 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
 
         jest.mocked(getCallerFile).mockReturnValue('');
         jest.mocked(getFolders).mockReturnValue({ source, destination });
-        jest.mocked(getPackageData).mockReturnValue({ dependencies: {}, sharedDependencies: {} });
+        jest.mocked(getPackageData).mockReturnValue({
+            name: packageName,
+            dependencies: {},
+            sharedDependencies: {},
+        });
         jest.mocked(getPackages).mockReturnValue([]);
         jest.mocked(getTsConfig).mockReturnValue(tsConfig);
         jest.mocked(isLegacyRoot).mockReturnValue(false);