@servicetitan/startup 30.3.0 → 31.0.0

package/src/cli/utils/bundle.ts

@@ -13,8 +13,6 @@ interface Options {
     buildStat?: boolean;
     codeCoverage?: boolean;
     config?: string;
-    esbuild?: boolean;
-    experimentalBundlers?: boolean;
 }
 
 function getName() {
@@ -36,9 +34,8 @@ export async function bundle(options: Options = {}) {
     const mode = 'production';
     const fallback = `./${webpackProdConfigFileName}`;
     const config = readWebpackConfig({ ...options, fallback });
-    const { buildStat, codeCoverage, esbuild, experimentalBundlers } = options;
-
-    const webpackOptions = { name, buildStat, codeCoverage, esbuild, experimentalBundlers };
+    const { buildStat, codeCoverage } = options;
+    const webpackOptions = { name, buildStat, codeCoverage };
 
     if (isWebComponent()) {
         const webpackConfig: Overrides = {
@@ -61,8 +58,7 @@ export async function bundleWatch(options: Options = {}) {
     const name = getName();
     const mode = 'development';
     const config = readWebpackConfig({ ...options, fallback: `./${webpackDevConfigFileName}` });
-    const { codeCoverage, esbuild, experimentalBundlers } = options;
-    const configOverrides = { codeCoverage, esbuild, experimentalBundlers, name };
+    const configOverrides = { codeCoverage: options.codeCoverage, name };
 
     if (isWebComponent()) {
         const webpackConfig: Overrides = {
@@ -71,12 +67,7 @@ export async function bundleWatch(options: Options = {}) {
         };
 
         return Promise.all([
-            runWatch(
-                createWebpackConfig(webpackConfig, {
-                    embed: true,
-                    ...configOverrides,
-                })
-            ),
+            runWatch(createWebpackConfig(webpackConfig, { embed: true, ...configOverrides })),
             isDevServerDisabled()
                 ? runWatch(createWebpackConfig(webpackConfig, configOverrides))
                 : runServe(createWebpackConfig(webpackConfig, configOverrides)),
@@ -86,11 +77,7 @@ export async function bundleWatch(options: Options = {}) {
     const webpackConfig =
         config ?? createWebpackConfig({ configuration: { mode } }, configOverrides);
 
-    if (isDevServerDisabled()) {
-        return runWatch(webpackConfig);
-    }
-
-    return runServe(webpackConfig);
+    return isDevServerDisabled() ? runWatch(webpackConfig) : runServe(webpackConfig);
 }
 
 function readWebpackConfig({ config, fallback }: Options & { fallback: string }) {

package/src/cli/utils/check-args.ts

@@ -0,0 +1,13 @@
+import { log } from '../../utils';
+
+interface Options {
+    obsolete?: string[];
+}
+
+export function checkArgs(args: Record<string, any>, { obsolete }: Options) {
+    obsolete?.forEach(arg => {
+        if (args[arg.replace(/^--/, '')]) {
+            log.warning(`WARNING: ${arg} option is obsolete and is ignored`);
+        }
+    });
+}

package/src/cli/utils/compile-less.ts

@@ -1,6 +1,5 @@
 import fs from 'fs';
 import path from 'path';
-
 import less from 'less';
 const lessPackageImporter = require('less-plugin-npm-import');
 

package/src/cli/utils/compile-sass.ts

@@ -1,5 +1,4 @@
 import path from 'path';
-
 import sass from 'sass';
 
 export async function compileSass(filePath: string) {

package/src/cli/utils/compile.ts

@@ -0,0 +1,22 @@
+import { log } from '../../utils';
+import { lernaExec } from './lerna-exec';
+
+export function compile({
+    packages,
+    watch = false,
+    useTsc = false,
+}: {
+    packages: string[];
+    watch?: boolean;
+    useTsc?: boolean;
+}) {
+    log.info('Compiling TypeScript files...');
+    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'] } : {}),
+    });
+}

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

@@ -0,0 +1,76 @@
+import cpx from 'cpx2';
+import fs from 'fs';
+import { glob } from 'glob';
+import DtsCreator from 'typed-css-modules';
+
+import { getFolders, log } from '../../utils';
+import { compileLess } from './compile-less';
+import { compileSass } from './compile-sass';
+
+export const assetExtensions = ['eot', 'gif', 'jpg', 'otf', 'png', 'svg', 'ttf', 'woff', 'woff2'];
+export const styleExtensions = ['css', 'less', 'scss'];
+
+const styleModuleRegex = new RegExp(`\\.module\\.(${styleExtensions.join('|')})$`);
+
+interface CopyFilesOptions {
+    watch?: boolean;
+}
+
+export async function copyFiles({ watch }: CopyFilesOptions) {
+    const { source, destination } = getFolders();
+    if (!fs.existsSync(source)) {
+        return;
+    }
+
+    const filesPattern = `${source}/**/*.{${[...assetExtensions, ...styleExtensions].join()}}`;
+    const creator = new DtsCreator({ camelCase: true, namedExports: true });
+    const generateDefinitions = async (file: string) => {
+        try {
+            const css = await compile(file);
+            const content = await creator.create(file, css, !!watch);
+            await content.writeFile();
+        } catch (error) {
+            log.error(String(error));
+        }
+    };
+
+    if (!watch) {
+        log.info(`Copying ${filesPattern} -> ${destination}`);
+        cpx.copy(filesPattern, destination);
+
+        const modulesPattern = `${source}/**/*.module.{${styleExtensions.join()}}`;
+        log.info(`Generating types for ${modulesPattern}`);
+        const modules = await glob(modulesPattern);
+        await Promise.all(modules.map(generateDefinitions));
+        return;
+    }
+
+    log.info(`Watching ${filesPattern} -> ${destination}`);
+    cpx.watch(filesPattern, destination, {
+        initialCopy: false,
+        // Optimization so cpx2 doesn't waste resources watching irrelevant files
+        ignore: ['__tests__', '__mocks__', '**/*.ts', '**/*.tsx'],
+    })
+        .on('copy', async ({ srcPath, dstPath }: { srcPath: string; dstPath: string }) => {
+            log.info(`Copied ${srcPath} -> ${dstPath}`);
+            if (styleModuleRegex.test(srcPath)) {
+                log.info(`Generating types for ${srcPath}`);
+                await generateDefinitions(srcPath);
+            }
+        })
+        .on('watch-error', (error: unknown) => log.error(String(error)));
+
+    /* istanbul ignore next: not executed in test environment */
+    if (process.env.NODE_ENV !== 'test') {
+        await new Promise<void>(() => {});
+    }
+}
+
+async function compile(filePath: string) {
+    if (filePath.endsWith('.less')) {
+        return compileLess(filePath);
+    }
+    if (filePath.endsWith('.scss')) {
+        return compileSass(filePath);
+    }
+}

package/src/cli/utils/eslint.ts

@@ -29,6 +29,7 @@ export async function eslint({ fix, paths }: Args) {
         ...config,
     };
 
+    /* istanbul ignore next: debug only */
     log.debug('eslint-options', () => JSON.stringify(options, null, 2));
 
     const eslint = new ESLint(options);

package/src/cli/utils/get-module-type.ts

@@ -3,7 +3,7 @@ import path from 'path';
 import { readJson } from '../../utils';
 
 export function getModuleType(configPath: string): string {
-    const config = readJson(configPath);
+    const config = readJson<{ compilerOptions?: { module: string }; extends?: string }>(configPath);
 
     if (config.compilerOptions?.module) {
         return config.compilerOptions.module.toLowerCase();
@@ -11,11 +11,9 @@ export function getModuleType(configPath: string): string {
 
     if (config.extends) {
         return getModuleType(
-            require.resolve(
-                config.extends.startsWith('./') || config.extends.startsWith('../')
-                    ? path.join(path.dirname(configPath), config.extends)
-                    : config.extends
-            )
+            /^\.?\.\//.test(config.extends)
+                ? path.join(path.dirname(configPath), config.extends)
+                : require.resolve(config.extends)
         );
     }
 

package/src/cli/utils/index.ts

@@ -1,15 +1,16 @@
-export const assetExtensions = ['eot', 'gif', 'jpg', 'otf', 'png', 'svg', 'ttf', 'woff', 'woff2'];
-export const styleExtensions = ['css', 'less', 'scss'];
-
-export * from './assets-copy';
 export * from './bundle';
+export * from './check-args';
+export * from './compile';
 export * from './compile-less';
 export * from './compile-sass';
+export * from './copy-files';
 export * from './eslint';
 export * from './get-module-type';
 export * from './is-module-installed';
 export * from './lerna-exec';
+export * from './pipe-stdout';
+export * from './process-tree';
 export * from './set-node-options';
-export * from './styles-copy';
 export * from './tcm';
-export * from './tsc';
+export * from './type-check';
+export * from './watch-stdout';

package/src/cli/utils/lerna-exec.ts

@@ -1,17 +1,19 @@
-import execa from 'execa';
+import execa, { StdioOption } from 'execa';
+import os from 'node:os';
+
 import { log } from '../../utils';
 
 interface Args {
     'bail'?: boolean;
     'cmd': string;
-    'concurrency'?: number;
     'scope'?: string[];
     'stream'?: boolean;
-    'parallel'?: boolean;
+    'parallel'?: boolean | number;
     '--'?: string[];
+    'stdio'?: 'pipe' | 'ignore' | 'inherit' | readonly StdioOption[];
 }
 
-export async function lernaExec(args: Args) {
+export function lernaExec(args: Args) {
     const lernaArguments = [
         'exec',
         ...getOptions(args),
@@ -20,7 +22,13 @@ export async function lernaExec(args: Args) {
         ...(args['--'] ?? []).flatMap(arg => arg.split(' ')),
     ];
     log.info(`Running ${[args.cmd, ...(args['--'] ?? [])].join(' ')}`);
-    await execa('lerna', lernaArguments, { stdio: 'inherit' });
+    return execa('lerna', lernaArguments, {
+        stdio: args.stdio ?? 'inherit',
+        env: {
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            FORCE_COLOR: 'true',
+        },
+    });
 }
 
 function getOptions(args: Args) {
@@ -28,14 +36,13 @@ function getOptions(args: Args) {
     if (args.bail === false) {
         result.push('--no-bail');
     }
-    if (args.parallel) {
-        result.push('--parallel');
+    if (args.parallel === true) {
+        result.push(process.env.CI ? `--concurrency=${os.availableParallelism()}` : '--parallel');
+    } else if (typeof args.parallel === 'number') {
+        result.push(`--concurrency=${args.parallel}`);
     }
     if (args.stream) {
         result.push('--stream');
     }
-    if (typeof args.concurrency === 'number') {
-        result.push(`--concurrency=${args.concurrency}`);
-    }
     return result;
 }

package/src/cli/utils/pipe-stdout.ts

@@ -0,0 +1,10 @@
+import execa from 'execa';
+
+export function pipeStdout(proc: execa.ExecaChildProcess) {
+    function stdoutHandler(data: Uint8Array | string) {
+        process.stdout.write(data);
+    }
+    proc.stdout!.on('data', stdoutHandler);
+
+    return () => proc.stdout!.off('data', stdoutHandler);
+}

package/src/cli/utils/process-tree.ts

@@ -0,0 +1,57 @@
+interface HandlerResultObject {
+    process: Promise<unknown>;
+    onComplete?: Promise<unknown>;
+}
+
+export type HandlerResult = HandlerResultObject | Promise<unknown>;
+
+function isHandlerResultObject(result: HandlerResult): result is HandlerResultObject {
+    return 'process' in result;
+}
+
+export class ProcessTree<T extends Record<any, any> = never> {
+    readonly #entries: Map<
+        T,
+        {
+            handler: () => HandlerResult;
+            dependsOn: T[keyof T][];
+            process?: Promise<unknown>;
+            onComplete?: Promise<unknown>;
+        }
+    > = new Map();
+
+    add(
+        name: T[keyof T],
+        handler: () => HandlerResult,
+        {
+            dependsOn = [],
+        }: {
+            dependsOn?: T[keyof T][];
+        } = {}
+    ) {
+        dependsOn.forEach(item => {
+            if (!this.#entries.has(item)) {
+                throw new Error(`Unknown process dependency: ${item}`);
+            }
+        });
+        this.#entries.set(name, { handler, dependsOn });
+    }
+
+    run() {
+        [...this.#entries.keys()].forEach(item => {
+            const entry = this.#entries.get(item)!;
+
+            const handlerResult = Promise.all(
+                entry.dependsOn.map(item => this.#entries.get(item)!.onComplete)
+            ).then(() => ({ result: entry.handler() }));
+
+            entry.process = handlerResult.then(({ result }) =>
+                isHandlerResultObject(result) ? result.process : result
+            );
+            entry.onComplete = handlerResult.then(({ result }) =>
+                isHandlerResultObject(result) ? (result.onComplete ?? result.process) : result
+            );
+        });
+        return Promise.all([...this.#entries.values()].map(item => item.process));
+    }
+}

package/src/cli/utils/set-node-options.ts

@@ -1,5 +1,6 @@
 import os from 'os';
 import { CommandName, NodeConfiguration, getConfigurationSafe } from '../../utils';
+import { Command } from '../commands';
 
 const MAX_OLD_SPACE_SIZE_OPTION = 'max_old_space_size';
 const DEFAULT_MAX_OLD_SPACE_SIZE_MB = 8192;
@@ -10,21 +11,21 @@ const MIN_REMAINING_MEMORY_MB = 512;
  * @param command - the command being executed
  * @returns whether process's NODE_OPTIONS were changed
  */
-export function setNodeOptions(command: CommandName) {
+export function setNodeOptions(commandName: CommandName, command: Command) {
     const cliConfig = getConfigurationSafe();
-    const cmdConfig: NodeConfiguration = cliConfig[command];
+    const cmdConfig: NodeConfiguration = cliConfig[commandName];
 
-    const cmdNodeOptions = cmdConfig?.NODE_OPTIONS?.join(' ') ?? '';
-    const cliNodeOptions = cliConfig?.NODE_OPTIONS?.join(' ') ?? '';
+    const cliNodeOptions = cliConfig.NODE_OPTIONS ?? [];
+    const cmdNodeOptions = cmdConfig?.NODE_OPTIONS ?? [];
     const oldNodeOptions = process.env.NODE_OPTIONS ?? '';
 
-    const mergedOptions = [cmdNodeOptions, cliNodeOptions]
-        .reduce((result, options) => {
-            return result.includes(options) ? result : `${options} ${result}`;
+    const mergedOptions = [...cmdNodeOptions, ...cliNodeOptions]
+        .reduce((result, option) => {
+            return result.includes(option) ? result : `${result} ${option}`;
         }, oldNodeOptions)
         .trim();
 
-    const newNodeOptions = ensureMaxOldSpaceSize(mergedOptions);
+    const newNodeOptions = ensureMaxOldSpaceSize(mergedOptions, command.greedy);
     if (newNodeOptions !== oldNodeOptions) {
         process.env.NODE_OPTIONS = newNodeOptions;
         return true;
@@ -33,10 +34,12 @@ export function setNodeOptions(command: CommandName) {
     return false;
 }
 
-function ensureMaxOldSpaceSize(nodeOptions: string) {
-    return !nodeOptions.includes(MAX_OLD_SPACE_SIZE_OPTION)
-        ? `--${MAX_OLD_SPACE_SIZE_OPTION}=${getMaxOldSpaceSize()} ${nodeOptions}`.trim()
-        : nodeOptions;
+function ensureMaxOldSpaceSize(nodeOptions: string, greedy?: boolean) {
+    if (!greedy || nodeOptions.includes(MAX_OLD_SPACE_SIZE_OPTION)) {
+        return nodeOptions;
+    }
+
+    return `--${MAX_OLD_SPACE_SIZE_OPTION}=${getMaxOldSpaceSize()} ${nodeOptions}`.trim();
 }
 
 function getMaxOldSpaceSize() {

package/src/cli/utils/style-extensions.ts

@@ -0,0 +1 @@
+export const styleExtensions = ['css', 'less', 'scss'];

package/src/cli/utils/tcm.ts

@@ -1,10 +1,11 @@
 import { glob } from 'glob';
 import chokidar from 'chokidar';
-
 import DtsCreator from 'typed-css-modules';
 
 import { getFolders, log } from '../../utils';
-import { compileLess, compileSass, styleExtensions } from '.';
+import { compileLess } from './compile-less';
+import { compileSass } from './compile-sass';
+import { styleExtensions } from './style-extensions';
 
 interface RunOptions {
     watch?: boolean;
@@ -19,19 +20,15 @@ async function compile(filePath: string) {
     }
 }
 
-async function run({ watch }: RunOptions = {}) {
+export async function tcm({ watch }: RunOptions = {}) {
     const source = getFolders().source.replace(/\\/g, '/');
     const filesPattern = `${source}/**/*.module.{${styleExtensions.join()}}`;
+    const creator = new DtsCreator({ camelCase: true, namedExports: true });
 
-    const creator = new DtsCreator({
-        camelCase: true,
-        namedExports: true,
-    });
-
-    const writeFile = async (filePath: string) => {
+    const generateDefinitions = async (file: string) => {
         try {
-            const initialContents = await compile(filePath);
-            const content = await creator.create(filePath, initialContents, !!watch);
+            const css = await compile(file);
+            const content = await creator.create(file, css, !!watch);
             await content.writeFile();
         } catch (error) {
             log.error(String(error));
@@ -39,25 +36,18 @@ async function run({ watch }: RunOptions = {}) {
     };
 
     if (!watch) {
+        log.info(`Generating types for ${filesPattern}`);
         const files = await glob(filesPattern);
-        await Promise.all(files.map(writeFile));
+        await Promise.all(files.map(generateDefinitions));
         return;
     }
 
-    log.info('Watch ' + filesPattern + '...');
+    log.info(`Watching to generate types for ${filesPattern}`);
 
-    const stylesRegex = new RegExp(`\\.module\\.(${styleExtensions.join('|')})$`);
-    const watcher = chokidar.watch(source, {
-        ignored: (path, stats) => !!stats?.isFile() && !stylesRegex.test(path),
-        ignoreInitial: true,
-    });
-    const callback = async (path: string) => {
+    watchFiles(source, async (path: string) => {
         log.debug('tcm', `Compiling ${path}`);
-        await writeFile(path);
-    };
-
-    watcher.on('add', callback);
-    watcher.on('change', callback);
+        await generateDefinitions(path);
+    });
 
     /* istanbul ignore next: not executed in test environment */
     if (process.env.NODE_ENV !== 'test') {
@@ -65,12 +55,12 @@ async function run({ watch }: RunOptions = {}) {
     }
 }
 
-export async function tcm() {
-    log.info('Generating TypeScript definition files for Style Modules...');
-
-    await run();
-}
-
-export async function tcmWatch() {
-    await run({ watch: true });
+function watchFiles(source: string, callback: (path: string) => Promise<void>) {
+    const stylesRegex = new RegExp(`\\.module\\.(${styleExtensions.join('|')})$`);
+    const watcher = chokidar.watch(source, {
+        ignored: (path, stats) => !!stats?.isFile() && !stylesRegex.test(path),
+        ignoreInitial: true,
+    });
+    watcher.on('add', callback);
+    watcher.on('change', callback);
 }

package/src/cli/utils/type-check.ts

@@ -0,0 +1,19 @@
+import execa from 'execa';
+import { log } from '../../utils';
+
+export function typeCheck({
+    packages,
+    watch = false,
+}: {
+    packages: string[];
+    watch?: boolean;
+    useTsc?: boolean;
+}) {
+    log.info('Type checking TypeScript files...');
+    const tscCompileOptions = packages.map(name => `--scope=${name}`);
+    return execa(
+        'startup',
+        ['task', 'tsc-compile', ...tscCompileOptions, ...(watch ? ['--watch'] : [])],
+        { stdio: 'inherit' }
+    );
+}

package/src/cli/utils/watch-stdout.ts

@@ -0,0 +1,24 @@
+import execa from 'execa';
+
+export function watchStdout(
+    proc: execa.ExecaChildProcess,
+    indicator: string | undefined,
+    handler: (count: number) => void
+) {
+    if (!indicator) {
+        return () => {};
+    }
+
+    function stdoutHandler(data: Uint8Array | string) {
+        const dataStr = data.toString();
+        const match = dataStr.match(new RegExp(indicator!, 'gm'));
+
+        if (match !== null) {
+            handler(match.length);
+        }
+    }
+
+    proc.stdout!.on('data', stdoutHandler);
+
+    return () => proc.stdout!.off('data', stdoutHandler);
+}

package/src/utils/__tests__/format-duration.test.ts

@@ -0,0 +1,22 @@
+import { formatDuration } from '../format-duration';
+
+describe('[startup] Utils', () => {
+    describe(formatDuration.name, () => {
+        const SECOND = 1000;
+        const MINUTE = 60 * SECOND;
+
+        test.each([
+            [0, '0ms'],
+            [SECOND - 1, '999ms'],
+            [SECOND, '1.00s'],
+            [SECOND + SECOND / 10, '1.10s'],
+            [MINUTE - SECOND, '59.00s'],
+            [MINUTE, '1m 0s'],
+            [MINUTE + SECOND - 1, '1m 1s'],
+            [5 * MINUTE + 20 * SECOND + SECOND / 2 - 1, '5m 20s'],
+            [60 * MINUTE, '60m 0s'],
+        ])('%p -> %p', (duration, expected) => {
+            expect(formatDuration(duration)).toBe(expected);
+        });
+    });
+});

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

@@ -6,6 +6,7 @@ import {
     getConfigurationSafe,
     getESLintConfiguration,
     getJestConfiguration,
+    getReviewConfiguration,
     getStylelintConfiguration,
     getWebComponentBranchConfigs,
     getWebComponentConfiguration,
@@ -18,6 +19,7 @@ import {
     isStyleCheckDisabled,
     isWebComponent,
 } from '../get-configuration';
+import { log } from '../log';
 
 jest.mock('fs', () => fs);
 
@@ -170,6 +172,22 @@ describe('[startup] Utils', () => {
         });
     });
 
+    describe(`${getReviewConfiguration.name}`, () => {
+        const subject = () => getReviewConfiguration();
+
+        itReturns(subject, {});
+
+        describe('with "cli.review"', () => {
+            const content = { cli: { review: { rules: { foo: 'off' } } } };
+
+            beforeEach(() => mockPackageJson(content));
+
+            test('return "cli.review"', () => {
+                expect(subject()).toEqual(content.cli.review);
+            });
+        });
+    });
+
     describe(`${getStylelintConfiguration.name}`, () => {
         const subject = () => getStylelintConfiguration();
 
@@ -246,8 +264,26 @@ describe('[startup] Utils', () => {
                 });
             });
 
-            test('returns web-component config', () => {
-                expect(subject()).toEqual(configJSON);
+            function itReturnsConfigFromPath() {
+                test('returns config from path', () => {
+                    expect(subject()).toEqual(configJSON);
+                });
+            }
+
+            itReturnsConfigFromPath();
+
+            describe('when path does not exist', () => {
+                beforeEach(() => fs.rmSync(configPath));
+
+                test('logs warning and returns undefined', () => {
+                    const logSpy = jest.spyOn(log, 'warning');
+
+                    expect(subject()).toBeUndefined();
+
+                    expect(logSpy).toHaveBeenCalledWith(
+                        `could not find web-component configuration: "${configPath}"`
+                    );
+                });
             });
 
             describe('with a location', () => {
@@ -271,6 +307,12 @@ describe('[startup] Utils', () => {
                     expect(subject()).toEqual(locationConfigJSON);
                 });
             });
+
+            describe('with path inside config object', () => {
+                beforeEach(() => (locationOrJson = { cli }));
+
+                itReturnsConfigFromPath();
+            });
         });
     });