@servicetitan/startup 31.3.2 → 31.5.0

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

@@ -1,151 +1,48 @@
 import fs from 'fs';
+import { glob } from 'glob';
 import path from 'path';
-import process from 'process';
-import {
-    getFolders,
-    getPackageData,
-    isBundle,
-    isLegacy,
-    isStyleCheckDisabled,
-    isWebComponent,
-    loadSharedDependencies,
-    log,
-} from '../../utils';
+import { getFolders, isBundle, isLegacy, isStyleCheckDisabled, log, logErrors } from '../../utils';
 import { Command } from './index';
 
-interface FileInfo {
-    path: string;
-    relativePath: string;
-}
-
-const styleCheckError = [
-    '!!!!!!!!!!!!! STYLE CHECK ERROR !!!!!!!!!!!!!',
-    'Style check failed with following errors:',
+const patterns = [
+    "@import '~@servicetitan/tokens/core/tokens.css';",
+    "@import '~@servicetitan/anvil-fonts/dist/css/anvil-fonts.css';",
+    "@import '~@servicetitan/design-system/dist/system.min.css';",
 ];
-const designSystem = 'design-system.css';
-
-enum PackageType {
-    App = 'app',
-    WebComponent = 'web_component',
-}
-
-function readDir(startPath: string, filter: string[]): string[] {
-    let out: string[] = [];
-
-    if (!fs.existsSync(startPath)) {
-        return out;
-    }
-
-    const files = fs.readdirSync(startPath);
-    for (const file of files) {
-        const filename = path.join(startPath, file);
-        const stat = fs.lstatSync(filename);
-
-        if (stat.isDirectory()) {
-            out = [...out, ...readDir(filename, filter)];
-        } else if (filter.some(f => filename.endsWith(f))) {
-            out.push(filename);
-        }
-    }
-
-    return out;
-}
-
-const findStyleFiles = (basePath: string, sourceFolder: string): FileInfo[] => {
-    const sourcePath = path.join(basePath, sourceFolder);
-    const files = readDir(sourcePath, ['.css', '.less']);
-
-    return files.map(f => ({
-        path: f,
-        relativePath: f.replace(sourcePath, '').substring(1),
-    }));
-};
-
-const checkStyleFiles = (files: FileInfo[], packageType: PackageType): string[] | undefined => {
-    const errors = [];
-    const patterns = [
-        "@import '~@servicetitan/tokens/core/tokens.css';",
-        "@import '~@servicetitan/anvil-fonts/dist/css/anvil-fonts.css';",
-        "@import '~@servicetitan/design-system/dist/system.min.css';",
-    ];
-
-    for (const file of files) {
-        if (
-            [PackageType.App, PackageType.WebComponent].includes(packageType) &&
-            file.relativePath === designSystem
-        ) {
-            continue;
-        }
-
-        const content = fs.readFileSync(file.path);
-
-        for (const pattern of patterns) {
-            if (content.includes(pattern)) {
-                errors.push(`file ${file.relativePath} contains link to "${pattern}"`);
-            }
-        }
-    }
-
-    return errors.length ? errors : undefined;
-};
-
-const checkErrors = (errors: string[] | undefined) => {
-    if (!errors) {
-        log.info('style check: OK');
-    } else {
-        log.error([...styleCheckError, ...errors].join('\n'));
-        throw new Error('style check error, please check logs above');
-    }
-};
-
-function checkStylesLib(_files: FileInfo[]) {
-    /* ToDo: add checks for libraries */
-}
-
-function checkStylesApp(files: FileInfo[]) {
-    const { dependencies, sharedDependencies } = getPackageData();
-    if (
-        loadSharedDependencies(dependencies, sharedDependencies)['@servicetitan/design-system'] &&
-        !files.some(f => f.relativePath === designSystem)
-    ) {
-        log.warning(
-            "application doesn't have design-system.css. Please check https://docs.st.dev/docs/frontend/micro-frontends#host-configuration"
-        );
-    }
-
-    checkErrors(checkStyleFiles(files, PackageType.App));
-}
-
-function checkStylesWebComponent(files: FileInfo[]) {
-    checkErrors(checkStyleFiles(files, PackageType.WebComponent));
-}
 
 export class StylesCheck implements Command {
-    description() {
-        return undefined;
-    }
-
-    // eslint-disable-next-line @typescript-eslint/require-await
+    @logErrors
     async execute() {
-        if (isLegacy()) {
+        if (isLegacy() || !isBundle()) {
             return;
         }
 
         if (isStyleCheckDisabled()) {
             log.info('style check is disabled');
-
             return;
         }
 
-        const projectFolders = getFolders();
-        const files = findStyleFiles(process.cwd(), projectFolders.source);
+        let ok = true;
+        const { source } = getFolders();
+        const files = await glob(`${source}/**/*.{css,less}`);
+
+        for (const file of files) {
+            const relativePath = path.relative(source, file);
+            if (relativePath === 'design-system.css') {
+                continue;
+            }
+
+            const content = fs.readFileSync(file, { encoding: 'utf-8' });
+            patterns.forEach(pattern => {
+                if (content.includes(pattern)) {
+                    log.error(`Error: file ${relativePath} contains "${pattern}"`);
+                    ok = false;
+                }
+            });
+        }
 
-        if (!isBundle()) {
-            checkStylesLib(files);
-        } else if (isWebComponent()) {
-            checkStylesWebComponent(files);
-        } else {
-            checkStylesApp(files);
+        if (!ok) {
+            throw new Error('style check failed, see errors above');
         }
     }
 }

package/src/cli/commands/types.ts

@@ -1,7 +1,7 @@
 export interface Command {
     greedy?: boolean;
     execute(): Promise<void>;
-    description(): string | undefined;
+    description?(): string;
 }
 
 export type Newable<T> = new (...args: any[]) => T;

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 };
         });