@servicetitan/startup 31.4.0 → 31.5.0

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

@@ -0,0 +1,108 @@
+import path from 'path';
+import { execSync } from 'child_process';
+import { getTsConfig, isWebComponent, log, logErrors, readJson } from '../../utils';
+import { Command } from './types';
+import { TSConfig } from '../utils';
+
+interface Args {
+    dry?: boolean;
+    releaseVersion: string;
+}
+
+interface PackageJson {
+    name: string;
+}
+
+export class UploadSourcemaps implements Command {
+    #outDir?: string;
+    #packageJson?: PackageJson;
+
+    constructor(private readonly args: Args) {}
+
+    @logErrors
+    // eslint-disable-next-line @typescript-eslint/require-await
+    async execute() {
+        this.checkLocation();
+        if (!this.checkArgs()) {
+            return;
+        }
+
+        const bundleDir = this.getBundleDir();
+        const options = this.getOptions().join(' ');
+        this.run(`npx --yes @datadog/datadog-ci@3 sourcemaps upload ${bundleDir} ${options}`);
+    }
+
+    private checkArgs() {
+        if (!process.env.DATADOG_API_KEY) {
+            const message = 'DATADOG_API_KEY environment variable is not set';
+            if (!process.env.CI) {
+                throw new Error(message);
+            }
+            log.warning(`${message}; skipping sourcemaps`);
+            return false;
+        }
+
+        if (!this.args.releaseVersion) {
+            throw new Error('--release-version is required');
+        }
+
+        return true;
+    }
+
+    private checkLocation() {
+        if (!isWebComponent()) {
+            throw new Error(`this command must be run inside a web-component directory`);
+        }
+    }
+
+    private getBundleDir() {
+        return path.relative('.', path.join(this.getOutDir(), 'bundle'));
+    }
+
+    private getMinifiedPrefixPath() {
+        const { name } = this.getPackageJson();
+        const baseUrl = `https://unpkg.servicetitan.com/${name}@${this.args.releaseVersion}`;
+        return `${baseUrl}/${this.getBundleDir().replace(/\\/g, '/')}`;
+    }
+
+    private getOptions() {
+        const { dry, releaseVersion } = this.args;
+        const service = this.getPackageJson().name.replace(/^[^/]+\//, '');
+        return [
+            ...[dry && `--dry-run`],
+            `--service=${service}`,
+            `--release-version=${releaseVersion}`,
+            `--minified-path-prefix=${this.getMinifiedPrefixPath()}`,
+            `--project-path=${this.getProjectPath()}`,
+        ].filter(item => !!item) as string[];
+    }
+
+    private getOutDir() {
+        if (!this.#outDir) {
+            const outDir = new TSConfig(getTsConfig()).getValue<string>('compilerOptions.outDir');
+            if (!outDir) {
+                throw new Error('compilerOptions.outDir is not configured');
+            }
+
+            this.#outDir = outDir;
+        }
+        return this.#outDir;
+    }
+
+    private getPackageJson() {
+        if (!this.#packageJson) {
+            this.#packageJson = readJson<PackageJson>('package.json');
+        }
+        return this.#packageJson;
+    }
+
+    private getProjectPath() {
+        const name = readJson(path.join(this.getOutDir(), 'metadata.json')).name;
+        return `${name}/`;
+    }
+
+    private run(command: string) {
+        log.info(`Running: ${command}`);
+        return execSync(command, { stdio: 'inherit' });
+    }
+}

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

@@ -8,17 +8,13 @@ import {
     getFolders,
     getPackageData,
     hasHeadlessBundle,
+    isExposeSharedDependencies,
     loadSharedDependencies,
 } from '../../../utils';
 import { createWebpackConfig } from '../../../webpack';
 import { createPackage } from '../../../__mocks__';
 
-import {
-    bundle,
-    bundleWatch,
-    webpackDevConfigFileName,
-    webpackProdConfigFileName,
-} from '../bundle';
+import { bundle, webpackDevConfigFileName, webpackProdConfigFileName } from '../bundle';
 
 jest.mock('fs', () => fs);
 jest.mock('portfinder');
@@ -29,8 +25,9 @@ jest.mock('../../../utils', () => ({
     getFolders: jest.fn(),
     getPackageData: jest.fn(),
     hasHeadlessBundle: jest.fn(),
+    isExposeSharedDependencies: jest.fn(),
     loadSharedDependencies: jest.fn(),
-    log: { info: jest.fn() }, // suppress test output
+    log: { info: jest.fn(), debug: jest.fn() }, // suppress test output
 }));
 jest.mock('../../../webpack', () => ({ createWebpackConfig: jest.fn() }));
 
@@ -46,6 +43,7 @@ describe('[startup] Cli Utils', () => {
         jest.mocked(getPortPromise).mockImplementation(options =>
             Promise.resolve(options?.port ?? 0)
         );
+        jest.mocked(isExposeSharedDependencies).mockImplementation(() => false);
         compiler = { close: jest.fn(callback => callback(null)) };
     });
 
@@ -102,6 +100,29 @@ describe('[startup] Cli Utils', () => {
             expect(stdoutSpy).toHaveBeenCalledWith(`${stats.toString!()}\n`);
         });
 
+        describe('with "emitExposedDependencies"', () => {
+            beforeEach(() => (options = { emitExposedDependencies: true }));
+
+            test('does nothing', async () => {
+                await subject();
+
+                expect(createWebpackConfig).not.toHaveBeenCalled();
+            });
+
+            describe('when package exposes dependencies', () => {
+                beforeEach(() => jest.mocked(isExposeSharedDependencies).mockReturnValue(true));
+
+                test('emits exposed dependences', async () => {
+                    await subject();
+
+                    expect(createWebpackConfig).toHaveBeenCalledWith(
+                        expect.anything(),
+                        expect.objectContaining({ emitExposedDependencies: true })
+                    );
+                });
+            });
+        });
+
         describe('when webpack completes with errors', () => {
             const stats = { hasErrors: () => true, toString: () => 'Oops!' };
 
@@ -144,6 +165,7 @@ describe('[startup] Cli Utils', () => {
             test(`uses ${params.name}`, async () => {
                 await subject();
 
+                expect(createWebpackConfig).not.toHaveBeenCalled();
                 expect(webpack).toHaveBeenCalledWith(params.config());
             });
         }
@@ -169,6 +191,83 @@ describe('[startup] Cli Utils', () => {
                     itUsesConfig({ name: webpackProdConfigFileName, config: () => prodConfig });
                 });
             });
+
+            describe('when emitting dependencies', () => {
+                beforeEach(() => {
+                    options = { emitExposedDependencies: true };
+                    jest.mocked(isExposeSharedDependencies).mockReturnValue(true);
+                });
+
+                function itIgnoresProdConfig() {
+                    test(`ignores ${webpackProdConfigFileName}`, async () => {
+                        await subject();
+
+                        expect(createWebpackConfig).toHaveBeenCalled();
+                    });
+                }
+
+                itIgnoresProdConfig();
+
+                describe(`when ${webpackProdConfigFileName} contains "output"`, () => {
+                    const prodOutput = { path: './foo' };
+
+                    beforeEach(() => {
+                        jest.resetModules();
+                        jest.doMock(
+                            path.resolve(webpackProdConfigFileName),
+                            () => ({ output: prodOutput }),
+                            { virtual: true }
+                        );
+                    });
+
+                    function itUsesProdOutputConfig() {
+                        test(`uses ${webpackProdConfigFileName} "output" config`, async () => {
+                            await subject();
+
+                            expect(createWebpackConfig).toHaveBeenCalledWith(
+                                expect.anything(),
+                                expect.objectContaining({
+                                    emitExposedDependencies: { output: prodOutput },
+                                })
+                            );
+                        });
+                    }
+
+                    itUsesProdOutputConfig();
+
+                    describe(`when ${webpackDevConfigFileName} contains "output"`, () => {
+                        const devOutput = { path: './bar' };
+
+                        beforeEach(() => {
+                            vol.fromJSON({ ...FS, [webpackDevConfigFileName]: '' });
+                            jest.doMock(
+                                path.resolve(webpackDevConfigFileName),
+                                () => ({ output: devOutput }),
+                                { virtual: true }
+                            );
+                        });
+
+                        itUsesProdOutputConfig();
+
+                        describe('with "useWatchConfig"', () => {
+                            beforeEach(() => (options = { ...options, useWatchConfig: true }));
+
+                            test(`uses ${webpackDevConfigFileName} "output" config`, async () => {
+                                await subject();
+
+                                expect(createWebpackConfig).toHaveBeenCalledWith(
+                                    expect.anything(),
+                                    expect.objectContaining({
+                                        emitExposedDependencies: {
+                                            output: devOutput,
+                                        },
+                                    })
+                                );
+                            });
+                        });
+                    });
+                });
+            });
         });
 
         describe('when package is a web component', () => {
@@ -271,7 +370,7 @@ describe('[startup] Cli Utils', () => {
         });
     });
 
-    describe(`${bundleWatch.name}`, () => {
+    describe(`${bundle.name} (watch mode)`, () => {
         const devConfig = {
             devServer: { host: 'http://127.0.0.0', port: '9000' },
             configuration: { foo: 'bar' },
@@ -302,13 +401,14 @@ describe('[startup] Cli Utils', () => {
                 stopWatching(callback);
                 return { compiler, close: compiler.close };
             });
+            jest.resetModules();
             // Allows config files to be loaded with require(...)
             jest.doMock(path.resolve(customConfigFileName), () => customConfig, { virtual: true });
             jest.doMock(path.resolve(webpackDevConfigFileName), () => devConfig, { virtual: true });
         });
 
         const subject = async () => {
-            await expect(bundleWatch(options)).rejects.toThrow('stopped');
+            await expect(bundle({ ...options, watch: true })).rejects.toThrow('stopped');
         };
 
         test('runs webpack development server', async () => {
@@ -325,6 +425,16 @@ describe('[startup] Cli Utils', () => {
             );
         });
 
+        describe('with "emitExposedDependencies"', () => {
+            beforeEach(() => (options = { emitExposedDependencies: true }));
+
+            test('throws error', async () => {
+                await expect(subject()).rejects.toThrow(
+                    'cannot bundle exposed dependencies in watch mode'
+                );
+            });
+        });
+
         describe('when webpack.devServer is set to false in package.json', () => {
             beforeEach(() => {
                 vol.fromJSON(packageFS({ webpack: { devServer: false } } as any));

package/src/cli/utils/__tests__/cli-os.test.ts

@@ -71,7 +71,7 @@ describe('[startup] Cli Utils (OS)', () => {
             const logInfoSpy = jest.spyOn(log, 'info');
             await subject('foo');
 
-            expect(logInfoSpy).toHaveBeenCalledWith('run command foo');
+            expect(logInfoSpy).toHaveBeenCalledWith('Running: foo');
             expect(logInfoSpy).toHaveBeenCalledWith('command finished with code 0', 'foo');
         });
 
@@ -128,7 +128,7 @@ describe('[startup] Cli Utils (OS)', () => {
             const logInfoSpy = jest.spyOn(log, 'info');
             subject('foo');
 
-            expect(logInfoSpy).toHaveBeenCalledWith('run command foo');
+            expect(logInfoSpy).toHaveBeenCalledWith('Running: foo');
             expect(logInfoSpy).toHaveBeenCalledWith('command finished', '');
         });
 

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

@@ -1,3 +1,4 @@
+import { log } from '../../../utils';
 import { lernaExec } from '../lerna-exec';
 import { compile } from '../compile';
 
@@ -11,6 +12,7 @@ describe('[startup] Cli Utils', () => {
 
     beforeEach(() => {
         jest.clearAllMocks();
+        jest.spyOn(log, 'info').mockImplementation(jest.fn()); // suppress output
         args = { packages };
     });
 

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

@@ -1,4 +1,5 @@
 import execa from 'execa';
+import { log } from '../../../utils';
 import { typeCheck } from '../type-check';
 
 jest.mock('execa', () => jest.fn());
@@ -10,6 +11,7 @@ describe('[startup] Cli Utils', () => {
 
         beforeEach(() => {
             jest.clearAllMocks();
+            jest.spyOn(log, 'info').mockImplementation(jest.fn()); // suppress output
             args = { packages };
         });
 

package/src/cli/utils/bundle.ts

@@ -10,15 +10,21 @@ import {
     getPackageName,
     hasHeadlessBundle,
     isDevServerDisabled,
+    isExposeSharedDependencies,
     isWebComponent,
     log,
+    pick,
 } from '../../utils';
 import { Overrides, createWebpackConfig } from '../../webpack';
+import { stringifyConfig } from '../../webpack/utils';
 
 interface Options {
     buildStat?: boolean;
     codeCoverage?: boolean;
     config?: string;
+    emitExposedDependencies?: boolean | Pick<Configuration, 'output'>;
+    useWatchConfig?: boolean;
+    watch?: boolean;
 }
 
 function getName() {
@@ -34,72 +40,88 @@ export const webpackDevConfigFileName = 'webpack.dev.config.js';
 export const webpackProdConfigFileName = 'webpack.prod.config.js';
 
 export async function bundle(options: Options = {}) {
-    log.info('Bundling the package...');
+    const { emitExposedDependencies, useWatchConfig, watch } = options;
+    if (emitExposedDependencies) {
+        if (watch) {
+            throw new Error('cannot bundle exposed dependencies in watch mode');
+        }
+        if (!isExposeSharedDependencies()) {
+            return;
+        }
+    }
+
+    log.info(`Bundling ${emitExposedDependencies ? 'exposed dependencies' : 'package'}...`);
 
-    const name = getName();
-    const mode = 'production';
-    const fallback = `./${webpackProdConfigFileName}`;
-    const config = readWebpackConfig({ ...options, fallback });
-    const { buildStat, codeCoverage } = options;
-    const webpackOptions = { name, buildStat, codeCoverage };
+    const mode = watch ? 'development' : 'production';
+    const fallback = watch || useWatchConfig ? webpackDevConfigFileName : webpackProdConfigFileName;
+    const customConfig = readWebpackConfig({ ...options, fallback });
+    const webpackOptions = getWebpackOptions(options, customConfig);
+
+    log.debug('custom-webpack-config', () => stringifyConfig(customConfig));
 
     if (isWebComponent()) {
-        const webpackConfig: Overrides = {
-            configuration: { ...config?.configuration, mode },
-            plugins: config?.plugins,
-        };
-
-        const bundles = [
-            run(createWebpackConfig(webpackConfig, { embed: true, ...webpackOptions })),
-            run(createWebpackConfig(webpackConfig, webpackOptions)),
-        ];
-
-        if (hasHeadlessBundle()) {
-            bundles.push(
-                run(createWebpackConfig(webpackConfig, { ...webpackOptions, headless: true }))
-            );
-        }
+        return bundleWebComponent({ customConfig, mode, watch, webpackOptions });
+    }
 
-        return Promise.all(bundles);
+    const config =
+        customConfig && !emitExposedDependencies
+            ? customConfig
+            : createWebpackConfig({ configuration: { mode } }, webpackOptions);
+
+    if (watch) {
+        return isDevServerDisabled() ? runWatch(config) : runServe(config);
     }
 
-    return run(config ?? createWebpackConfig({ configuration: { mode } }, webpackOptions));
+    return run(config);
 }
 
-export async function bundleWatch(options: Options = {}) {
-    log.info('Bundling the package...');
-
-    const name = getName();
-    const mode = 'development';
-    const config = readWebpackConfig({ ...options, fallback: `./${webpackDevConfigFileName}` });
-    const configOverrides = { codeCoverage: options.codeCoverage, name };
+function bundleWebComponent({
+    customConfig,
+    mode,
+    watch,
+    webpackOptions,
+}: {
+    customConfig: ReturnType<typeof readWebpackConfig>;
+    mode: 'development' | 'production';
+    watch?: boolean;
+    webpackOptions: ReturnType<typeof getWebpackOptions>;
+}) {
+    const overrides: Overrides = {
+        configuration: { ...customConfig?.configuration, mode },
+        plugins: customConfig?.plugins,
+    };
+
+    const fullConfig = createWebpackConfig(overrides, webpackOptions);
+    const lightConfig = createWebpackConfig(overrides, { ...webpackOptions, embed: true });
+    const headlessConfig = hasHeadlessBundle()
+        ? createWebpackConfig(overrides, {
+              ...webpackOptions,
+              headless: true,
+          })
+        : undefined;
+
+    const promises = watch
+        ? [
+              runWatch(lightConfig),
+              isDevServerDisabled() ? runWatch(fullConfig) : runServe(fullConfig),
+              headlessConfig && runWatch(headlessConfig),
+          ]
+        : [run(lightConfig), run(fullConfig), headlessConfig && run(headlessConfig)];
+
+    return Promise.all(promises.filter(promise => !!promise));
+}
 
-    if (isWebComponent()) {
-        const webpackConfig: Overrides = {
-            configuration: { ...config?.configuration, mode },
-            plugins: config?.plugins,
-        };
-
-        const bundles = [
-            runWatch(createWebpackConfig(webpackConfig, { embed: true, ...configOverrides })),
-            isDevServerDisabled()
-                ? runWatch(createWebpackConfig(webpackConfig, configOverrides))
-                : runServe(createWebpackConfig(webpackConfig, configOverrides)),
-        ];
-
-        if (hasHeadlessBundle()) {
-            bundles.push(
-                runWatch(createWebpackConfig(webpackConfig, { ...configOverrides, headless: true }))
-            );
-        }
+function getWebpackOptions(options: Options, customConfig?: Record<string, any>) {
+    const result = {
+        name: getName(),
+        ...pick(options, ['buildStat', 'codeCoverage', 'emitExposedDependencies']),
+    };
 
-        return Promise.all(bundles);
+    if (result.emitExposedDependencies && customConfig) {
+        result.emitExposedDependencies = { output: customConfig.output };
     }
 
-    const webpackConfig =
-        config ?? createWebpackConfig({ configuration: { mode } }, configOverrides);
-
-    return isDevServerDisabled() ? runWatch(webpackConfig) : runServe(webpackConfig);
+    return result;
 }
 
 function readWebpackConfig({ config, fallback }: Options & { fallback: string }) {

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

@@ -31,7 +31,7 @@ export const runCommand = (
         }
 
         if (!quiet) {
-            log.info(`run command ${fullCommand}`);
+            log.info(`Running: ${fullCommand}`);
         }
 
         const proc = spawn(commandName, commandArray, {
@@ -78,7 +78,7 @@ export const runCommandOutput = (
     }
 
     if (!quiet) {
-        log.info(`run command ${fullCommand}`);
+        log.info(`Running: ${fullCommand}`);
     }
 
     const result = execSync(fullCommand, execSyncOptions).toString();

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

@@ -277,7 +277,7 @@ describe('[startup] Utils', () => {
                 beforeEach(() => fs.rmSync(configPath));
 
                 test('logs warning and returns undefined', () => {
-                    const logSpy = jest.spyOn(log, 'warning');
+                    const logSpy = jest.spyOn(log, 'warning').mockImplementation(jest.fn());
 
                     expect(subject()).toBeUndefined();
 

package/src/utils/find-packages.ts

@@ -1,6 +1,7 @@
 import { globSync } from 'glob';
 import multimatch from 'multimatch';
 import path from 'path';
+import { findUp } from './find-up';
 import { readJsonSafe } from './read-json';
 import { log } from './log';
 
@@ -36,8 +37,7 @@ export function findPackages(): ProjectPackage[] {
 }
 
 function findWorkspaces() {
-    let directory = path.resolve('./');
-    do {
+    return findUp(directory => {
         const packageJson = path.resolve(path.join(directory, 'package.json'));
 
         log.debug('find-packages', `reading: ${packageJson}`);
@@ -61,7 +61,5 @@ function findWorkspaces() {
             log.debug('find-packages', () => `found workspaces: ${JSON.stringify(workspaces)}`);
             return workspaces;
         }
-
-        directory = path.resolve(path.join(directory, '../'));
-    } while (path.parse(directory).name);
+    });
 }

package/src/utils/find-up.ts

@@ -0,0 +1,12 @@
+import path from 'path';
+
+export function findUp<T>(callback: (directory: string) => T | undefined) {
+    let directory = path.resolve('./');
+    do {
+        const result = callback(directory);
+        if (result) {
+            return result;
+        }
+        directory = path.resolve(path.join(directory, '../'));
+    } while (path.parse(directory).name);
+}

package/src/utils/get-configuration.ts

@@ -77,11 +77,13 @@ export enum CommandName {
     'styles-check' = 'styles-check',
     'test' = 'test',
     'task' = 'task',
+    'upload-sourcemaps' = 'upload-sourcemaps',
 }
 /* eslint-enable @typescript-eslint/naming-convention */
 
 export interface WebComponentBranchConfigs {
     publishTag?: string;
+    uploadSourcemaps?: boolean;
 }
 
 interface WebComponentOptions {

package/src/utils/index.ts

@@ -1,4 +1,5 @@
 export * from './find-packages';
+export * from './find-up';
 export * from './format-duration';
 export * from './get-configuration';
 export * from './get-destination-folders';

package/src/webpack/__mocks__/style-rules.ts

@@ -6,7 +6,7 @@ export type StyleRule = RuleSetRule & { use: (string | object)[] };
 export const styleRules: Record<string, StyleRule> = {
     '.css': {
         test: /(\.css)$/,
-        exclude: expect.any(Function),
+        exclude: /\.module.css$/,
         use: ['style-loader', 'css-loader'],
     },
     '.scss': {