@servicetitan/startup 31.4.0 → 31.5.0

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

@@ -1,4 +1,5 @@
 import { exec, execSync } from 'child_process';
+import { log } from '../../../utils';
 import { Clean } from '../clean';
 
 jest.mock('child_process', () => ({
@@ -9,6 +10,7 @@ jest.mock('child_process', () => ({
 describe(`[startup] ${Clean.name}`, () => {
     beforeEach(() => {
         jest.clearAllMocks();
+        jest.spyOn(log, 'info').mockImplementation(jest.fn()); // suppress output
     });
 
     const subject = async () => new Clean().execute();

package/src/cli/commands/__tests__/get-user-commands.test.ts

@@ -13,7 +13,7 @@ describe(`${getUserCommands.name}`, () => {
             .map(name => {
                 const Command = getCommand(name)!;
                 // eslint-disable-next-line @typescript-eslint/naming-convention
-                return new Command({ _: [] }).description();
+                return new Command({ _: [] }).description?.();
             })
             .filter(description => !!description);
 

package/src/cli/commands/__tests__/mfe-package-publish.test.ts

@@ -1,6 +1,6 @@
 import { fs, vol } from 'memfs';
 import path from 'path';
-import { isWebComponent, log, readJson } from '../../../utils';
+import { isWebComponent, log, readJson, WebComponentBranchConfigs } from '../../../utils';
 import { gitGetBranch, gitGetCommitHash } from '../../utils/cli-git';
 import {
     npmGetPackageVersions,
@@ -8,13 +8,14 @@ import {
     npmPublish,
     npmTagVersion,
 } from '../../utils/cli-npm';
+import { runCommand } from '../../utils/cli-os';
 import { MFEPackagePublish } from '../mfe-package-publish';
 
 jest.mock('fs', () => fs);
 jest.mock('../../../utils', () => ({
     ...jest.requireActual('../../../utils'),
     isWebComponent: jest.fn(),
-    log: { info: jest.fn() },
+    log: { info: jest.fn(), warning: jest.fn() },
 }));
 jest.mock('../../utils/cli-git', () => ({
     gitGetBranch: jest.fn(),
@@ -26,6 +27,9 @@ jest.mock('../../utils/cli-npm', () => ({
     npmPublish: jest.fn(),
     npmTagVersion: jest.fn(),
 }));
+jest.mock('../../utils/cli-os', () => ({
+    runCommand: jest.fn(),
+}));
 
 describe(`[startup] ${MFEPackagePublish.name}`, () => {
     const defaultRegistry = 'https://verdaccio.servicetitan.com';
@@ -112,6 +116,45 @@ describe(`[startup] ${MFEPackagePublish.name}`, () => {
         );
     });
 
+    test('uploads sourcemaps', async () => {
+        await subject();
+
+        expect(runCommand).toHaveBeenCalledWith(
+            `npx startup upload-sourcemaps --releaseVersion=${defaultPackageVersion()}`
+        );
+    });
+
+    function itDoesNotUploadSourcemaps() {
+        test('does not upload sourcemaps', async () => {
+            await subject();
+
+            expect(runCommand).not.toHaveBeenCalledWith(
+                expect.stringContaining('upload-sourcemaps')
+            );
+        });
+    }
+
+    describe('with "uploadSourcemaps: false"', () => {
+        beforeEach(() => (args.uploadSourcemaps = false));
+
+        itDoesNotUploadSourcemaps();
+    });
+
+    describe('when branch configuration includes "uploadSourcemaps: false"', () => {
+        beforeEach(() =>
+            vol.fromJSON({
+                'package.json': JSON.stringify({
+                    name: packageName,
+                    cli: {
+                        'web-component': { branches: { [branch]: { uploadSourcemaps: false } } },
+                    },
+                }),
+            })
+        );
+
+        itDoesNotUploadSourcemaps();
+    });
+
     Object.entries({ dev: ['dev', 'develop'], next: ['next'], prod: ['master'] }).forEach(
         ([tag, branches]) => {
             describe.each(branches)('when branch is %s', branch => {
@@ -120,17 +163,7 @@ describe(`[startup] ${MFEPackagePublish.name}`, () => {
                 test(`uses tag "${tag}"`, async () => {
                     await subject();
 
-                    expect(npmPublish).toHaveBeenCalledWith({ dry: false, tag });
-                });
-
-                describe('with "dry" argument', () => {
-                    beforeEach(() => (args.dry = true));
-
-                    test(`does dry run with tag "${tag}"`, async () => {
-                        await subject();
-
-                        expect(npmPublish).toHaveBeenCalledWith({ dry: true, tag });
-                    });
+                    expect(npmPublish).toHaveBeenCalledWith(expect.objectContaining({ tag }));
                 });
             });
         }
@@ -142,7 +175,28 @@ describe(`[startup] ${MFEPackagePublish.name}`, () => {
         test('uses specified tag', async () => {
             await subject();
 
-            expect(npmPublish).toHaveBeenCalledWith({ dry: false, tag: args.tag });
+            expect(npmPublish).toHaveBeenCalledWith(expect.objectContaining({ tag: args.tag }));
+        });
+    });
+
+    describe('when branch configuration includes "publishTag"', () => {
+        const branchConfig: WebComponentBranchConfigs = { publishTag: 'foo' };
+
+        beforeEach(() =>
+            vol.fromJSON({
+                'package.json': JSON.stringify({
+                    name: packageName,
+                    cli: { 'web-component': { branches: { [branch]: branchConfig } } },
+                }),
+            })
+        );
+
+        test('uses configured "publishTag"', async () => {
+            await subject();
+
+            expect(npmPublish).toHaveBeenCalledWith(
+                expect.objectContaining({ tag: branchConfig.publishTag })
+            );
         });
     });
 
@@ -159,6 +213,20 @@ describe(`[startup] ${MFEPackagePublish.name}`, () => {
     describe('with "dry" argument', () => {
         beforeEach(() => (args.dry = true));
 
+        test('publishes in "dry run" mode', async () => {
+            await subject();
+
+            expect(npmPublish).toHaveBeenCalledWith(expect.objectContaining({ dry: true }));
+        });
+
+        test('logs warning', async () => {
+            await subject();
+
+            expect(log.warning).toHaveBeenCalledWith(
+                'DRY-RUN MODE ENABLED, WILL NOT PUBLISH PACKAGES'
+            );
+        });
+
         test('logs message', async () => {
             await subject();
 
@@ -168,6 +236,14 @@ describe(`[startup] ${MFEPackagePublish.name}`, () => {
                 )
             );
         });
+
+        test('uploads sourcemaps with "--dry" option', async () => {
+            await subject();
+
+            expect(runCommand).toHaveBeenCalledWith(
+                `npx startup upload-sourcemaps --dry --releaseVersion=${defaultPackageVersion()}`
+            );
+        });
     });
 
     describe('when package has no files', () => {
@@ -204,7 +280,7 @@ describe(`[startup] ${MFEPackagePublish.name}`, () => {
         test('logs message and skips publishing', async () => {
             await subject();
 
-            expect(log.info).toHaveBeenCalledWith(expect.stringMatching(message));
+            expect(log.warning).toHaveBeenCalledWith(expect.stringMatching(message));
             expect(npmPublish).not.toHaveBeenCalled();
         });
     }

package/src/cli/commands/__tests__/mfe-publish.test.ts

@@ -141,6 +141,8 @@ describe(`[startup] ${MFEPublish.name}`, () => {
             { name: 'dry', value: true, expected: '--dry' },
             { name: 'force', value: true, expected: '--force' },
             { name: 'registry', value: 'https://foo' },
+            { name: 'uploadSourcemaps', value: true, expected: '--upload-sourcemaps' },
+            { name: 'uploadSourcemaps', value: false, expected: '--no-upload-sourcemaps' },
         ];
 
         describe.each(testArgs)('with "{$name: $value}"', ({ name, value, expected }) => {

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

@@ -106,6 +106,18 @@ describe(`[startup] ${Start.name}`, () => {
         itPreparesThePackages();
         itRunsCompileAndTypeCheck();
 
+        test('bundles exposed dependencies', async () => {
+            await subject();
+
+            expect(lernaExec).toHaveBeenCalledWith({
+                'cmd': 'startup bundle-package',
+                'scope': packages.map(({ name }) => name),
+                'parallel': true,
+                'stream': true,
+                '--': ['--exposed-dependencies', '--use-watch-config'],
+            });
+        });
+
         test('bundles the package in watch mode', async () => {
             await subject();
 
@@ -126,6 +138,7 @@ describe(`[startup] ${Start.name}`, () => {
 
                 expect(lernaExec).toHaveBeenCalledWith(
                     expect.objectContaining({
+                        'cmd': 'startup bundle-package',
                         '--': ['--watch', '--code-coverage'],
                     })
                 );
@@ -140,6 +153,7 @@ describe(`[startup] ${Start.name}`, () => {
 
                 expect(lernaExec).toHaveBeenCalledWith(
                     expect.objectContaining({
+                        'cmd': 'startup bundle-package',
                         '--': ['--watch', `--config "${args.config}"`],
                     })
                 );
@@ -175,7 +189,7 @@ describe(`[startup] ${Start.name}`, () => {
         beforeEach(() => ((args as Record<string, any>)[arg] = true));
 
         test('logs warning', async () => {
-            const logSpy = jest.spyOn(log, 'warning');
+            const logSpy = jest.spyOn(log, 'warning').mockImplementation(jest.fn());
 
             await subject();
 

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

@@ -1,15 +1,6 @@
 import { fs, vol } from 'memfs';
 import path from 'path';
-import {
-    getFolders,
-    getPackageData,
-    isBundle,
-    isLegacy,
-    isStyleCheckDisabled,
-    isWebComponent,
-    loadSharedDependencies,
-    log,
-} from '../../../utils';
+import { getFolders, isBundle, isLegacy, isStyleCheckDisabled, log } from '../../../utils';
 
 import { StylesCheck } from '../styles-check';
 
@@ -17,59 +8,44 @@ jest.mock('fs', () => fs);
 jest.mock('../../../utils', () => ({
     ...jest.requireActual('../../../utils'),
     getFolders: jest.fn(),
-    getPackageData: jest.fn(),
     isBundle: jest.fn(),
     isLegacy: jest.fn(),
     isStyleCheckDisabled: jest.fn(),
-    isWebComponent: jest.fn(),
-    loadSharedDependencies: jest.fn(),
-    log: { error: jest.fn(), info: jest.fn(), warning: jest.fn() },
+    log: { error: jest.fn(), info: jest.fn() },
 }));
 
 describe(`[startup] ${StylesCheck.name}`, () => {
-    const subject = async () => new StylesCheck().execute();
-
     beforeEach(() => {
-        jest.resetAllMocks();
-        jest.mocked(isBundle).mockReturnValue(true);
         jest.mocked(getFolders).mockReturnValue({ source: 'src', destination: 'dist' });
-        jest.mocked(getPackageData).mockReturnValue({
-            name: '',
-            version: '',
-            dependencies: {},
-            sharedDependencies: {},
-        });
-        jest.mocked(loadSharedDependencies).mockReturnValue({});
+        jest.mocked(isBundle).mockReturnValue(true);
+        jest.mocked(isLegacy).mockReturnValue(false);
+        jest.mocked(isStyleCheckDisabled).mockReturnValue(false);
+        jest.clearAllMocks();
     });
 
     afterEach(() => vol.reset());
 
-    describe('when application has design-system as a dependency', () => {
-        beforeEach(() => {
-            jest.mocked(loadSharedDependencies).mockReturnValue({
-                '@servicetitan/design-system': '1.0.0',
-            });
-        });
+    const subject = async () => new StylesCheck().execute();
 
-        test("warns that application doesn't have design-system.css", async () => {
+    function itExitsSilently() {
+        test('exits silently', async () => {
             await subject();
 
-            expect(log.warning).toHaveBeenCalledWith(
-                expect.stringContaining("application doesn't have design-system.css")
-            );
+            expect(getFolders).not.toHaveBeenCalled();
+            expect(log.info).not.toHaveBeenCalled();
         });
-    });
+    }
 
     describe('with a legacy package', () => {
         beforeEach(() => jest.mocked(isLegacy).mockReturnValue(true));
 
-        test('exits silently', async () => {
-            await subject();
+        itExitsSilently();
+    });
 
-            expect(getFolders).not.toHaveBeenCalled();
-            expect(log.info).not.toHaveBeenCalled();
-            expect(log.warning).not.toHaveBeenCalled();
-        });
+    describe('when package is a library', () => {
+        beforeEach(() => jest.mocked(isBundle).mockReturnValue(false));
+
+        itExitsSilently();
     });
 
     describe('when style check is disabled', () => {
@@ -78,9 +54,8 @@ describe(`[startup] ${StylesCheck.name}`, () => {
         test('logs message and does not check styles', async () => {
             await subject();
 
-            expect(log.info).toHaveBeenCalledWith('style check is disabled');
             expect(getFolders).not.toHaveBeenCalled();
-            expect(log.warning).not.toHaveBeenCalled();
+            expect(log.info).toHaveBeenCalledWith('style check is disabled');
         });
     });
 
@@ -98,43 +73,15 @@ describe(`[startup] ${StylesCheck.name}`, () => {
             });
         });
 
-        function itReportsErrors() {
-            test('reports errors', async () => {
-                try {
-                    await subject();
-                } catch (error: any) {
-                    expect(error.message).toMatch(/style check error/);
-                }
-
-                const errors = jest.mocked(log.error).mock.calls[0][0].split('\n');
-                const expectedErrors = [
-                    expect.stringMatching(/style check error/i),
-                    expect.stringMatching(/style check failed/i),
-                    `file bar.less contains link to "${anvilFontsCss}"`,
-                    `file foo.css contains link to "${tokenCss}"`,
-                    `file ${path.join('styles', 'baz.css')} contains link to "${systemMinCss}"`,
-                ];
-                expect(errors).toEqual(expect.arrayContaining(expectedErrors));
-                expect(errors.length).toEqual(expectedErrors.length);
-            });
-        }
+        test('reports errors', async () => {
+            jest.spyOn(process.stdout, 'write').mockImplementation(jest.fn()); // suppress error output
+            await expect(subject()).rejects.toThrow(/style check failed/);
 
-        itReportsErrors();
-
-        describe('when package is web component', () => {
-            beforeEach(() => jest.mocked(isWebComponent).mockReturnValue(true));
-
-            itReportsErrors();
-        });
-
-        describe('when package is a library', () => {
-            beforeEach(() => jest.mocked(isBundle).mockReturnValue(false));
-
-            test('does not report errors', async () => {
-                await subject();
-
-                expect(log.error).not.toHaveBeenCalled();
-            });
+            [
+                `Error: file bar.less contains "${anvilFontsCss}"`,
+                `Error: file foo.css contains "${tokenCss}"`,
+                `Error: file ${path.join('styles', 'baz.css')} contains "${systemMinCss}"`,
+            ].forEach(message => expect(log.error).toHaveBeenCalledWith(message));
         });
     });
 });

package/src/cli/commands/__tests__/upload-sourcemaps.test.ts

@@ -0,0 +1,127 @@
+import { execSync } from 'child_process';
+import { vol, fs } from 'memfs';
+import { inspect } from 'node:util';
+import path from 'path';
+import { log } from '../../../utils';
+import { UploadSourcemaps } from '../upload-sourcemaps';
+
+jest.mock('child_process', () => ({ execSync: jest.fn() }));
+jest.mock('fs', () => fs);
+jest.mock('../../../utils', () => ({
+    ...jest.requireActual('../../../utils'),
+    log: { info: jest.fn(), warning: jest.fn() },
+}));
+
+describe(`[startup] ${UploadSourcemaps.name}`, () => {
+    const OLD_ENV = process.env;
+    const packageJSON = { name: '@servicetitan/example-mfe', cli: { 'web-component': true } };
+    const tsconfigJSON = { compilerOptions: { outDir: 'dist' } };
+    const metadataJSON = { name: `${packageJSON.name}-hash` };
+    let args: ConstructorParameters<typeof UploadSourcemaps>[0];
+
+    function volumeFromJSON(overrides: Record<string, any> = {}) {
+        const { outDir } = tsconfigJSON.compilerOptions;
+        vol.fromJSON({
+            'package.json': JSON.stringify(packageJSON),
+            'tsconfig.json': JSON.stringify(tsconfigJSON),
+            [path.join(outDir, 'metadata.json')]: JSON.stringify(metadataJSON),
+            ...Object.fromEntries(
+                Object.entries(overrides).map(([key, value]) => [key, JSON.stringify(value)])
+            ),
+        });
+    }
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        process.env = { DATADOG_API_KEY: 'datadog-api-key' };
+        args = { releaseVersion: 'releaseVersion' };
+
+        volumeFromJSON();
+    });
+
+    afterEach(() => {
+        vol.reset();
+        process.env = OLD_ENV;
+    });
+
+    const subject = () => new UploadSourcemaps(args).execute();
+
+    test('runs datadog-ci sourcemaps upload', async () => {
+        await subject();
+
+        const outDir = tsconfigJSON.compilerOptions.outDir;
+        expect(execSync).toHaveBeenCalledWith(
+            [
+                'npx --yes @datadog/datadog-ci@3 sourcemaps upload',
+                path.join(outDir, 'bundle'),
+                `--service=${packageJSON.name.replace('@servicetitan/', '')}`,
+                `--release-version=${args.releaseVersion}`,
+                `--minified-path-prefix=https://unpkg.servicetitan.com/${packageJSON.name}@${args.releaseVersion}/${outDir}/bundle`,
+                `--project-path=${metadataJSON.name}/`,
+            ].join(' '),
+            { stdio: 'inherit' }
+        );
+    });
+
+    describe('with "--dry"', () => {
+        beforeEach(() => (args.dry = true));
+
+        test('runs datadog-ci with --dry-run', async () => {
+            await subject();
+
+            expect(execSync).toHaveBeenCalledWith(
+                expect.stringMatching(' --dry-run '),
+                expect.anything()
+            );
+        });
+    });
+
+    function itThrowsError(message: string | RegExp) {
+        test(`throws ${inspect(message)}`, async () => {
+            jest.spyOn(process.stdout, 'write').mockImplementation(jest.fn());
+            await expect(subject()).rejects.toThrow(message);
+        });
+    }
+
+    describe('when DATADOG_API_KEY is not set', () => {
+        beforeEach(() => delete process.env.DATADOG_API_KEY);
+
+        itThrowsError('DATADOG_API_KEY environment variable is not set');
+
+        describe('when in CI environment', () => {
+            beforeEach(() => (process.env.CI = '1'));
+
+            afterEach(() => delete process.env.CI);
+
+            test('logs warning', async () => {
+                await subject();
+
+                expect(log.warning).toHaveBeenCalledWith(
+                    'DATADOG_API_KEY environment variable is not set; skipping sourcemaps'
+                );
+            });
+        });
+    });
+
+    describe('when --releaseVersion is omitted', () => {
+        beforeEach(() => delete (args as any).releaseVersion);
+
+        itThrowsError('--release-version is required');
+    });
+
+    describe('when package is not a web-component', () => {
+        beforeEach(() => {
+            volumeFromJSON({ 'package.json': { name: packageJSON.name } });
+        });
+
+        itThrowsError(/must be run inside .+ directory/);
+    });
+
+    describe('when outDir is not configured', () => {
+        beforeEach(() => volumeFromJSON({ 'tsconfig.json': {} }));
+
+        itThrowsError('compilerOptions.outDir is not configured');
+    });
+});

package/src/cli/commands/build.ts

@@ -13,12 +13,13 @@ interface Args {
     'use-tsc'?: boolean;
 }
 
-export enum BuildProcesses {
-    'Compile',
-    'KendoUILicense',
-    'PreparePackage',
-    'TypeCheck',
-    'BundlePackage',
+enum BuildProcesses {
+    Compile,
+    KendoUILicense,
+    PreparePackage,
+    TypeCheck,
+    BundleExposedDependencies,
+    BundlePackage,
 }
 
 export class Build implements Command {
@@ -50,6 +51,9 @@ export class Build implements Command {
         }
 
         const scope = packages.map(({ name }) => name);
+        const webpackScope = packages
+            .filter(({ type }) => type === PackageType.Webpack)
+            .map(({ name }) => name);
 
         const processTree = new ProcessTree<typeof BuildProcesses>();
 
@@ -66,25 +70,17 @@ export class Build implements Command {
             dependsOn: [BuildProcesses.PreparePackage],
         });
         processTree.add(
-            BuildProcesses.BundlePackage,
+            BuildProcesses.BundleExposedDependencies,
             () => {
-                const webpackScope = packages
-                    .filter(({ type }) => type === PackageType.Webpack)
-                    .map(({ name }) => name);
-
                 if (webpackScope.length === 0) {
                     return Promise.resolve();
                 }
-
                 return lernaExec({
                     'cmd': 'startup bundle-package',
                     'scope': webpackScope,
+                    'parallel': true,
                     'stream': true,
-                    '--': [
-                        ...[this.args.config ? `--config "${this.args.config}"` : undefined],
-                        ...[this.args['code-coverage'] ? '--code-coverage' : undefined],
-                        ...[this.args.stat ? '--stat' : undefined],
-                    ].filter(item => !!item) as string[],
+                    '--': ['--exposed-dependencies'],
                 });
             },
             {
@@ -95,6 +91,26 @@ export class Build implements Command {
                 ],
             }
         );
+        processTree.add(
+            BuildProcesses.BundlePackage,
+            () => {
+                if (webpackScope.length === 0) {
+                    return Promise.resolve();
+                }
+
+                return lernaExec({
+                    'cmd': 'startup bundle-package',
+                    'scope': webpackScope,
+                    'stream': true,
+                    '--': [
+                        ...[this.args.config ? `--config "${this.args.config}"` : undefined],
+                        ...[this.args['code-coverage'] ? '--code-coverage' : undefined],
+                        ...[this.args.stat ? '--stat' : undefined],
+                    ].filter(item => !!item) as string[],
+                });
+            },
+            { dependsOn: [BuildProcesses.BundleExposedDependencies] }
+        );
 
         await processTree.run();
     }

package/src/cli/commands/bundle-package.ts

@@ -1,12 +1,11 @@
-import path from 'path';
-
-import { log, logErrors } from '../../utils';
-import { bundle, bundleWatch, getModuleType } from '../utils';
+import { getTsConfig, log, logErrors } from '../../utils';
+import { bundle, getModuleType } from '../utils';
 import { Command } from '.';
 
 interface Args {
     'config'?: string;
     'code-coverage'?: boolean;
+    'exposed-dependencies'?: boolean;
     'stat'?: boolean;
     'watch'?: boolean;
 }
@@ -14,31 +13,23 @@ interface Args {
 export class BundlePackage implements Command {
     constructor(private args: Args) {}
 
-    description() {
-        return undefined;
-    }
-
     @logErrors
     async execute() {
         const { config, stat = false, watch } = this.args;
 
-        if (getModuleType(path.join(process.cwd(), './tsconfig.json')) !== 'esnext') {
+        if (getModuleType(getTsConfig()) !== 'esnext') {
             log.warning(
-                '\x1b[31m',
-                'It\'s recommended to use the "esnext" option for the "compilerOptions.module" in the "tsconfig.json" for the Webpack packages!',
-                '\x1b[0m'
+                'webpack packages should set compilerOptions.module to "esnext" in tsconfig.json'
             );
         }
 
-        const options = {
-            config,
+        const emitExposedDependencies = this.args['exposed-dependencies'];
+        const options: Parameters<typeof bundle>[0] = {
+            ...(emitExposedDependencies ? {} : { config }),
             codeCoverage: this.args['code-coverage'],
+            emitExposedDependencies,
         };
 
-        if (!watch) {
-            await bundle({ buildStat: stat, ...options });
-        } else {
-            await bundleWatch(options);
-        }
+        await bundle({ buildStat: stat, ...options, watch });
     }
 }

package/src/cli/commands/clean.ts

@@ -4,7 +4,7 @@ import { Command } from './types';
 
 export class Clean implements Command {
     description() {
-        return 'resets project to fresh state';
+        return 'reset project to fresh state';
     }
 
     @logErrors