@servicetitan/startup 30.3.1 → 31.1.0

package/src/cli/tasks/cli-task.ts

@@ -1,5 +1,6 @@
 import execa from 'execa';
 import { Task, TaskParameters } from './task';
+import { pipeStdout, watchStdout } from '../utils';
 
 export interface Indicators {
     end: string;
@@ -41,24 +42,17 @@ export abstract class CliTask extends Task {
             return;
         }
 
-        childProcess.stdout!.on('data', this.stdoutDataHandler);
-        await childProcess;
-    }
-
-    private readonly stdoutDataHandler = (data: Uint8Array | string) => {
-        process.stdout.write(data);
-
-        const dataStr = data.toString();
-
-        if (dataStr.includes(this.indicators.watchStart)) {
+        pipeStdout(childProcess);
+        watchStdout(childProcess, this.indicators.watchStart, () => {
             this.taskTimer.start();
-        }
-
-        if (
-            dataStr.includes(this.indicators.end) ||
-            (this.indicators.watchEnd && dataStr.includes(this.indicators.watchEnd))
-        ) {
+        });
+        watchStdout(childProcess, this.indicators.end, () => {
             this.logCompletionResults(this.taskTimer.end());
-        }
-    };
+        });
+        watchStdout(childProcess, this.indicators.watchEnd, () => {
+            this.logCompletionResults(this.taskTimer.end());
+        });
+
+        await childProcess;
+    }
 }

package/src/cli/tasks/swc-cli.d.ts

@@ -1,3 +1,14 @@
 declare module '@swc/cli' {
-    function swcDir(options: any): void;
+    interface Options {
+        cliOptions?: {
+            [key: string]: unknown;
+        };
+        swcOptions?: {
+            [key: string]: unknown;
+        };
+        callbacks?: {
+            [key: string]: Function;
+        };
+    }
+    function swcDir(options: Options): void;
 }

package/src/cli/tasks/swc-compile-package.ts

@@ -1,70 +1,97 @@
 import { swcDir } from '@swc/cli';
-import { compilerOptions as baseCompilerOptions } from '../../../tsconfig/base.json';
+import deepmerge from 'deepmerge';
 
+import { getFolders, getSwcCompilePackageConfiguration, getTsConfig, log } from '../../utils';
+import { TSConfig } from '../utils';
 import { Task } from './task';
-import { getFolders, log, readJson } from '../../utils';
 
 interface Args {
     [key: string]: unknown;
     watch?: boolean;
 }
 
+function overwriteMerge(_destinationArray: unknown[], sourceArray: unknown[]) {
+    return sourceArray;
+}
+
 export class SwcCompilePackage extends Task {
     constructor({ watch }: Args) {
         super({ name: 'swc-compile-package', global: false, watch });
     }
 
-    description() {
-        return 'Compiles TypeScript files to JavaScript with SWC within package folder';
-    }
-
     async execute(): Promise<void> {
         const { source, destination } = getFolders();
-        const compilerOptions = readJson('tsconfig.json').compilerOptions ?? {};
+        const packageConfig = getSwcCompilePackageConfiguration();
+        const tsConfig = new TSConfig(getTsConfig());
+        const target = tsConfig.getValue('compilerOptions.target');
+        const legacyDecorator = tsConfig.getValue('compilerOptions.experimentalDecorators');
+        const decoratorMetadata = tsConfig.getValue('compilerOptions.emitDecoratorMetadata');
+        const sourceMaps = tsConfig.getValue('compilerOptions.sourceMap');
+        const module = tsConfig.getValue<string>('compilerOptions.module')?.toLowerCase();
+        const ignore = tsConfig.getValue('exclude', [
+            '**/*.d.ts',
+            '**/__tests__/*',
+            '**/*.test.*',
+            '**/__mocks__/*',
+            '**/*.stories.*',
+        ]);
 
         return new Promise((resolve, reject) => {
-            swcDir({
-                cliOptions: {
-                    watch: this.watch,
-                    outDir: destination,
-                    stripLeadingPaths: true,
-                    extensions: ['.ts', '.tsx'],
-                    filenames: [source],
-                },
-                swcOptions: {
-                    jsc: {
-                        parser: {
-                            syntax: 'typescript',
-                            tsx: true,
-                            decorators: true,
+            swcDir(
+                deepmerge(
+                    {
+                        cliOptions: {
+                            watch: this.watch,
+                            outDir: destination,
+                            stripLeadingPaths: true,
+                            extensions: ['.ts', '.tsx'],
+                            filenames: [source],
+                            ignore,
                         },
-                        target: baseCompilerOptions.target,
-                        transform: {
-                            legacyDecorator: baseCompilerOptions.experimentalDecorators,
-                            decoratorMetadata: baseCompilerOptions.emitDecoratorMetadata,
+                        swcOptions: {
+                            jsc: {
+                                parser: {
+                                    syntax: 'typescript',
+                                    tsx: true,
+                                    decorators: true,
+                                },
+                                target,
+                                transform: {
+                                    legacyDecorator,
+                                    decoratorMetadata,
+                                    react: {
+                                        runtime: 'automatic',
+                                    },
+                                },
+                            },
+                            sourceMaps,
+                            module: {
+                                type:
+                                    module === 'commonjs' || module === 'nodenext'
+                                        ? 'commonjs'
+                                        : 'es6',
+                            },
+                        },
+                        callbacks: {
+                            onSuccess: (e: { duration: number }) => {
+                                this.logCompletionResults(this.taskTimer.add(e.duration));
+                                if (!this.watch) {
+                                    resolve();
+                                }
+                            },
+                            onFail: (e: { duration: number; reasons: Map<string, string> }) => {
+                                log.text([...e.reasons.values()][0]);
+                                this.logCompletionResults(this.taskTimer.add(e.duration));
+                                if (!this.watch) {
+                                    reject(new Error('Compilation failed'));
+                                }
+                            },
                         },
                     },
-                    sourceMaps: baseCompilerOptions.sourceMap,
-                    module: {
-                        type: compilerOptions.module === 'commonjs' ? 'commonjs' : 'es6',
-                    },
-                },
-                callbacks: {
-                    onSuccess: (e: { duration: number }) => {
-                        this.logCompletionResults(this.taskTimer.add(e.duration));
-                        if (!this.watch) {
-                            resolve();
-                        }
-                    },
-                    onFail: (e: { duration: number; reasons: Map<string, string> }) => {
-                        log.text([...e.reasons.values()][0]);
-                        this.logCompletionResults(this.taskTimer.add(e.duration));
-                        if (!this.watch) {
-                            reject(new Error('Compilation failed'));
-                        }
-                    },
-                },
-            });
+                    packageConfig,
+                    { arrayMerge: overwriteMerge, clone: false }
+                )
+            );
         });
     }
 }

package/src/cli/tasks/task.ts

@@ -1,4 +1,4 @@
-import { log, readJsonSafe } from '../../utils';
+import { formatDuration, log, readJsonSafe } from '../../utils';
 
 class TaskTimer {
     private counter = 0;
@@ -85,17 +85,10 @@ export abstract class Task {
     }) {
         const enumerator = counter === 0 ? 'Initial ' : 'Subsequent ';
         log.info(
-            `${this.watch ? enumerator : ''}${this.name} task completed in ${this.formatDuration(measure.duration)}`
+            `${this.watch ? enumerator : ''}${this.name} task completed in ${formatDuration(measure.duration)}`
         );
     }
 
-    private formatDuration(duration: number) {
-        if (duration < 1000) {
-            return `${duration.toFixed(0)}ms`;
-        }
-        return `${(duration / 1000).toFixed(2)}s`;
-    }
-
     private checkRunLocation() {
         const packageJson = readJsonSafe('package.json');
         if (!packageJson?.workspaces && this.global) {
@@ -106,7 +99,5 @@ export abstract class Task {
         }
     }
 
-    abstract description(): string;
-
     abstract execute(): Promise<void>;
 }

package/src/cli/tasks/tsc-compile-package.ts

@@ -18,10 +18,6 @@ export class TscCompilePackage extends CliTask {
         });
     }
 
-    description() {
-        return 'Compiles TypeScript files to JavaScript with TSC within package folder';
-    }
-
     async execute() {
         const tsConfig = getTsConfig();
         await this.runChildProcess(

package/src/cli/tasks/tsc-compile.ts

@@ -1,11 +1,4 @@
-import {
-    getPackages,
-    getPackagesGraph,
-    getTsConfig,
-    Package,
-    PackageType,
-    splitPackagesByType,
-} from '../../utils';
+import { getPackages, getPackagesGraph, getTsConfig, log, Package, PackageType } from '../../utils';
 import { CliTask } from './cli-task';
 
 interface Args {
@@ -13,7 +6,6 @@ interface Args {
     ignore?: string | string[];
     scope?: string | string[];
     watch?: boolean;
-    typeCheckOnly?: boolean;
 }
 
 export class TscCompile extends CliTask {
@@ -29,15 +21,20 @@ export class TscCompile extends CliTask {
         });
     }
 
-    description() {
-        return 'Compiles one or more TypeScript projects with optional type checking';
-    }
-
     async execute() {
-        const packages = splitPackagesByType(
-            getPackages({ scope: this.args.scope, ignore: this.args.ignore })
-        )[PackageType.TSC];
+        const packages = getPackages({
+            scope: this.args.scope,
+            ignore: this.args.ignore,
+            type: [PackageType.TSC, PackageType.Webpack],
+        });
+
         const tsConfigs = collapsePackages(packages).map(({ location }) => getTsConfig(location));
+
+        log.debug(
+            'tsc-compile',
+            `${this.args.watch ? 'watching' : 'compiling'} ${tsConfigs.join(' ')}`
+        );
+
         await this.runChildProcess(
             'tsc',
             [
@@ -45,7 +42,7 @@ export class TscCompile extends CliTask {
                 this.watch ? '-w' : undefined,
                 '--pretty',
                 '--preserveWatchOutput',
-                this.args.typeCheckOnly ? '--emitDeclarationOnly' : undefined,
+                '--emitDeclarationOnly',
                 ...tsConfigs,
             ].filter(i => i !== undefined)
         );

package/src/cli/types/cpx2.d.ts

@@ -1,3 +1,10 @@
 declare module 'cpx2' {
-    export * from '@types/cpx';
+    import { WatchOptions } from '@types/cpx';
+
+    interface Cpx2WatchOptions extends WatchOptions {
+        ignore?: string | string[];
+    }
+
+    export { copy, copySync } from '@types/cpx';
+    export function watch(source: string, dest: string, options?: Cpx2WatchOptions): Watcher;
 }

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

@@ -7,6 +7,7 @@ import {
     getConfiguration,
     getFolders,
     getPackageData,
+    hasHeadlessBundle,
     loadSharedDependencies,
 } from '../../../utils';
 import { createWebpackConfig } from '../../../webpack';
@@ -27,6 +28,7 @@ jest.mock('../../../utils', () => ({
     ...jest.requireActual('../../../utils'),
     getFolders: jest.fn(),
     getPackageData: jest.fn(),
+    hasHeadlessBundle: jest.fn(),
     loadSharedDependencies: jest.fn(),
     log: { info: jest.fn() }, // suppress test output
 }));
@@ -73,7 +75,7 @@ describe('[startup] Cli Utils', () => {
 
         beforeEach(() => {
             vol.fromJSON(packageFS());
-            options = { buildStat: false };
+            options = undefined;
             stdoutSpy = jest.spyOn(process.stdout, 'write').mockImplementation(jest.fn());
             compiler.run = jest.fn(callback => callback(null, stats as any));
             // Allows config file to be loaded with require(...)
@@ -174,6 +176,8 @@ describe('[startup] Cli Utils', () => {
             const destination = 'dist';
             const dependencies = { foo: '1.0.1' };
             const sharedDependencies = { react: 'SharedDependencies.React' };
+            let defaultCreateOverrides: Parameters<typeof createWebpackConfig>[0];
+            let defaultCreateOptions: Parameters<typeof createWebpackConfig>[1];
 
             beforeEach(() => {
                 vol.fromJSON(webComponentFS());
@@ -184,22 +188,42 @@ describe('[startup] Cli Utils', () => {
                     dependencies,
                 });
                 jest.mocked(loadSharedDependencies).mockReturnValue(sharedDependencies);
+                defaultCreateOverrides = { configuration: { mode: 'production' } };
+                defaultCreateOptions = {
+                    buildStat: options?.buildStat,
+                    name: expectPackageName(),
+                };
             });
 
             test('builds full and "embed" packages', async () => {
-                const createOptions = { buildStat: options?.buildStat, name: expectPackageName() };
-                const overrides = { configuration: { mode: 'production' } };
-
                 await subject();
 
-                expect(createWebpackConfig).toHaveBeenCalledWith(overrides, createOptions);
-                expect(createWebpackConfig).toHaveBeenCalledWith(overrides, {
-                    ...createOptions,
+                expect(createWebpackConfig).toHaveBeenCalledWith(
+                    defaultCreateOverrides,
+                    defaultCreateOptions
+                );
+                expect(createWebpackConfig).toHaveBeenCalledWith(defaultCreateOverrides, {
+                    ...defaultCreateOptions,
                     embed: true,
                 });
                 expect(compiler.run).toHaveBeenCalledTimes(2);
             });
 
+            describe('when headless file exists', () => {
+                beforeEach(() => {
+                    jest.mocked(hasHeadlessBundle).mockReturnValue(true);
+                });
+
+                test('builds headless package', async () => {
+                    await subject();
+
+                    expect(createWebpackConfig).toHaveBeenCalledWith(defaultCreateOverrides, {
+                        ...defaultCreateOptions,
+                        headless: true,
+                    });
+                });
+            });
+
             function itUsesConfig(params: { config: () => Record<string, any>; name: string }) {
                 test(`uses ${params.name}`, async () => {
                     const { configuration, plugins } = params.config();
@@ -384,13 +408,30 @@ describe('[startup] Cli Utils', () => {
                 });
                 expect(webpack).toHaveBeenNthCalledWith(1, createWebpackResult);
                 expect(webpack).toHaveBeenNthCalledWith(2, createWebpackResult);
-                expect(compiler.watch).toHaveBeenCalled();
+                expect(compiler.watch).toHaveBeenCalledTimes(1);
                 expect(WebpackDevServer).toHaveBeenCalledWith(
                     { host: 'localhost', port: 8080 },
                     compiler
                 );
             });
 
+            describe('when headless file exists', () => {
+                beforeEach(() => {
+                    jest.mocked(hasHeadlessBundle).mockReturnValue(true);
+                });
+
+                test('runs watch on headless bundle', async () => {
+                    await subject();
+
+                    expect(createWebpackConfig).toHaveBeenCalledWith(
+                        expect.any(Object),
+                        expect.objectContaining({ headless: true })
+                    );
+                    expect(webpack).toHaveBeenNthCalledWith(3, createWebpackResult);
+                    expect(compiler.watch).toHaveBeenCalledTimes(2);
+                });
+            });
+
             describe('when webpack.devServer is set to false in package.json', () => {
                 beforeEach(() => {
                     vol.fromJSON(webComponentFS({ webpack: { devServer: false } } as any));

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

@@ -0,0 +1,34 @@
+import { checkArgs } from '../check-args';
+import { log } from '../../../utils';
+
+jest.mock('../../../utils', () => ({ log: { warning: jest.fn() } }));
+
+describe(checkArgs.name, () => {
+    let args: Parameters<typeof checkArgs>[0];
+    let options: Parameters<typeof checkArgs>[1];
+
+    beforeEach(() => {
+        args = { foo: true };
+        options = {};
+    });
+
+    const subject = () => checkArgs(args, options);
+
+    test('logs nothing', () => {
+        subject();
+
+        expect(log.warning).not.toHaveBeenCalled();
+    });
+
+    describe('when argument is obsolete', () => {
+        beforeEach(() => (options = { obsolete: ['foo'] }));
+
+        test('logs warning', () => {
+            subject();
+
+            expect(log.warning).toHaveBeenCalledWith(
+                expect.stringMatching(/WARNING: \w+ option is obsolete and is ignored/)
+            );
+        });
+    });
+});

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

@@ -0,0 +1,59 @@
+import { lernaExec } from '../lerna-exec';
+import { compile } from '../compile';
+
+jest.mock('../lerna-exec', () => ({
+    lernaExec: jest.fn(),
+}));
+
+describe('[startup] Cli Utils', () => {
+    const packages = ['foo', 'bar'];
+    let args: Parameters<typeof compile>[0];
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        args = { packages };
+    });
+
+    function itRunsSwcCompilePackage({ watch }: { watch?: boolean } = {}) {
+        expect(lernaExec).toHaveBeenCalledWith({
+            cmd: 'startup task swc-compile-package',
+            parallel: true,
+            scope: packages,
+            stream: true,
+            stdio: watch ? ['inherit', 'pipe', 'inherit'] : 'inherit',
+            ...(watch ? { '--': ['--watch'] } : {}),
+        });
+    }
+
+    describe(`${compile.name}`, () => {
+        const subject = async () => compile(args);
+
+        test('compiles packages', async () => {
+            await subject();
+
+            itRunsSwcCompilePackage();
+        });
+
+        describe('with "watch"', () => {
+            beforeEach(() => (args.watch = true));
+
+            test('compiles packages in watch mode', async () => {
+                await subject();
+
+                itRunsSwcCompilePackage({ watch: true });
+            });
+        });
+
+        describe('with "useTsc"', () => {
+            beforeEach(() => (args.useTsc = true));
+
+            test('runs tsc-compile-package', async () => {
+                await subject();
+
+                expect(lernaExec).toHaveBeenCalledWith(
+                    expect.objectContaining({ cmd: 'startup task tsc-compile-package' })
+                );
+            });
+        });
+    });
+});

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

@@ -0,0 +1,157 @@
+/**
+ * @jest-environment node
+ */
+import cpx from 'cpx2';
+import fs from 'fs';
+import { getFolders, log } from '../../../utils';
+import * as compileSassModule from '../compile-sass';
+
+import { copyFiles, styleExtensions, supportedExtensions } from '../copy-files';
+
+jest.mock('cpx2', () => ({
+    copySync: jest.fn(),
+    watch: jest.fn(),
+}));
+jest.mock('../../../utils', () => ({
+    ...jest.requireActual('../../../utils'),
+    getFolders: jest.fn(),
+    log: { debug: jest.fn(), info: jest.fn(), error: jest.fn() },
+}));
+
+/**
+ * Note: These tests don't use memfs because the typed-css-modules package
+ * uses node: URLs to import the fs modules, which bypasses the memfs filesystem
+ * (as of memfs ~4.6.0). Also sass requires the jest-environment be set to "node".
+ */
+
+describe(`[startup] cli utils (${copyFiles.name})`, () => {
+    const source = fs.mkdtempSync('src');
+    const destination = 'dist';
+    const files = `${source}/**/*.{${supportedExtensions.join()}}`;
+    let options: Parameters<typeof copyFiles>[0];
+
+    beforeEach(() => {
+        jest.resetAllMocks();
+        jest.mocked(getFolders).mockReturnValue({ source, destination });
+        fs.readdirSync(source).forEach(file => fs.rmSync(`${source}/${file}`));
+
+        options = {};
+
+        jest.mocked(cpx.watch).mockImplementation(() => {
+            const emitter: { on?: Function } = {};
+            emitter.on = jest.fn((_event: string, _handler: Function) => emitter);
+            return emitter;
+        });
+    });
+
+    afterAll(() => {
+        if (fs.existsSync(source)) {
+            fs.rmSync(source, { recursive: true });
+        }
+    });
+
+    function mockStylesModule(module: string, id = 'foo') {
+        const content = `.${id} { display: none; }`;
+        fs.writeFileSync(`${source}/${module}`, content);
+    }
+
+    function expectTypeDefinitions(module: string, id = 'foo') {
+        expect(fs.readFileSync(`${source}/${module}.d.ts`, 'utf8')).toContain(
+            `export const ${id}: string;`
+        );
+    }
+
+    function getHandler(event: string) {
+        const emitter = jest.mocked(cpx.watch).mock.results[0].value;
+        const { calls } = jest.mocked(emitter.on).mock;
+        return calls.find(([name]: string[]) => name === event)[1] as Function;
+    }
+
+    const subject = async () => copyFiles(options);
+
+    test('copies assets and styles from source to destination', async () => {
+        await subject();
+
+        expect(cpx.copySync).toHaveBeenCalledWith(files, destination);
+    });
+
+    describe.each(styleExtensions)('with %s module', extension => {
+        const module = `foo.module.${extension}`;
+
+        beforeEach(() => mockStylesModule(module));
+
+        test(`generates types for ${extension} module`, async () => {
+            await subject();
+
+            expectTypeDefinitions(module);
+        });
+    });
+
+    describe('when an error occurs generating types', () => {
+        const errorMessage = 'Oops!';
+
+        beforeEach(() => {
+            mockStylesModule('foo.module.scss');
+            jest.spyOn(compileSassModule, 'compileSass').mockImplementation(() => {
+                throw new Error(errorMessage);
+            });
+        });
+
+        test('logs error', async () => {
+            await subject();
+
+            expect(log.error).toHaveBeenCalledWith(expect.stringContaining(errorMessage));
+        });
+    });
+
+    describe('with {watch: true}', () => {
+        beforeEach(() => (options = { watch: true }));
+
+        test('watches files', async () => {
+            await subject();
+
+            expect(cpx.watch).toHaveBeenCalledWith(
+                files,
+                destination,
+                expect.objectContaining({ initialCopy: false })
+            );
+        });
+
+        describe('when module is changed', () => {
+            const module = 'foo.module.scss';
+
+            beforeEach(async () => {
+                mockStylesModule(module);
+                await subject();
+                await getHandler('copy')({ srcPath: `${source}/${module}` });
+            });
+
+            test('generates types', () => {
+                expectTypeDefinitions(module);
+            });
+        });
+
+        describe('when an error occurs watching files', () => {
+            const errorMessage = 'Nope!';
+
+            beforeEach(async () => {
+                await subject();
+                await getHandler('watch-error')(new Error(errorMessage));
+            });
+
+            test('logs error', () => {
+                expect(log.error).toHaveBeenCalledWith(expect.stringContaining(errorMessage));
+            });
+        });
+    });
+
+    describe('when source location does not exist', () => {
+        beforeEach(() => fs.rmSync(source, { recursive: true }));
+
+        test('does not copy files', async () => {
+            await subject();
+
+            expect(cpx.copySync).not.toHaveBeenCalledWith();
+        });
+    });
+});