@servicetitan/startup 22.17.0 → 22.19.0

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

@@ -1,6 +1,7 @@
 import mockFS from 'mock-fs';
 import {
     getConfiguration,
+    getConfigurationSafe,
     getDevServerConfiguration,
     getESLintConfiguration,
     getJestConfiguration,
@@ -62,6 +63,51 @@ describe('[startup] Utils', () => {
                 expect(subject()).toEqual(cli);
             });
         });
+
+        describe('with no package.json', () => {
+            beforeEach(() => mockFS({}));
+
+            test('throws error', () => {
+                expect(subject).toThrowError();
+            });
+        });
+    });
+
+    describe(`${getConfigurationSafe.name}`, () => {
+        let location: string | undefined;
+
+        beforeEach(() => (location = undefined));
+
+        const subject = () => getConfigurationSafe(location);
+
+        itReturns(subject, {});
+
+        describe(`when ${packageJson} contains cli`, () => {
+            const cli = { foo: 'bar' };
+
+            beforeEach(() => mockPackageJson({ cli }));
+
+            test('returns cli', () => expect(subject()).toEqual(cli));
+        });
+
+        describe('with a location', () => {
+            const cli = { baz: 'qux' };
+
+            beforeEach(() => {
+                location = 'packages/foo';
+                mockFS({ packages: { foo: { [packageJson]: JSON.stringify({ cli }) } } });
+            });
+
+            test("returns location's cli", () => {
+                expect(subject()).toEqual(cli);
+            });
+        });
+
+        describe('with no package.json', () => {
+            beforeEach(() => mockFS({}));
+
+            itReturns(subject, {});
+        });
     });
 
     describe(`${getDevServerConfiguration.name}`, () => {

package/src/utils/__tests__/log.test.ts

@@ -1,5 +1,8 @@
 import chalk from 'chalk';
 import { log, logErrors } from '../log';
+import { createDebug } from '../debug';
+
+jest.mock('../debug');
 
 describe(`[startup] Utils`, () => {
     describe('log', () => {
@@ -29,11 +32,50 @@ describe(`[startup] Utils`, () => {
             expect(stdoutSpy).toHaveBeenCalledWith(`${chalk.bold.keyword('orange')(message)}\n`);
         });
 
-        test('log error writes red text', () => {
+        test('error() writes red text', () => {
             log.error(message);
 
             expect(stdoutSpy).toHaveBeenCalledWith(`${chalk.bold.red(message)}\n`);
         });
+
+        describe('debug()', () => {
+            const namespace = 'log-debug-test';
+            const dbg = Object.assign(jest.fn() as any, { enabled: true });
+
+            beforeEach(() => {
+                jest.resetAllMocks();
+                jest.mocked(createDebug).mockReturnValue(dbg);
+            });
+
+            const subject = (...args: any[]) => log.debug(namespace, ...args);
+
+            test('returns namespaced debug object', () => {
+                expect(subject()).toBe(dbg);
+                expect(createDebug).toHaveBeenCalledWith(namespace);
+            });
+
+            test('outputs text', () => {
+                subject('foo');
+
+                expect(dbg).toHaveBeenCalledWith('foo');
+            });
+
+            test('outputs function result', () => {
+                subject(() => 'bar');
+
+                expect(dbg).toHaveBeenCalledWith('bar');
+            });
+
+            describe('when output is disabled', () => {
+                beforeEach(() => (dbg.enabled = false));
+
+                test('outputs nothing', () => {
+                    subject('foo');
+
+                    expect(dbg).not.toHaveBeenCalled();
+                });
+            });
+        });
     });
 
     describe(`${logErrors.name}`, () => {

package/src/utils/debug.ts

@@ -0,0 +1,13 @@
+import debug from 'debug';
+
+const CONTEXT = 'startup';
+
+export function createDebug(namespace: string) {
+    const result = debug(CONTEXT).extend(namespace);
+    return Object.assign(result, {
+        /* istanbul ignore next: debug only */
+        enable() {
+            debug.enable([`${CONTEXT}:${namespace}`, debug.disable()].join());
+        },
+    });
+}

package/src/utils/get-configuration.ts

@@ -5,7 +5,7 @@ import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-serv
 import { ESLint } from 'eslint';
 import { LinterOptions } from 'stylelint';
 import { Config } from '@jest/types';
-import { readJson } from './read-json';
+import { readJson, readJsonSafe } from './read-json';
 
 const allowedWebpackDevServerOptions = ['headers', 'port', 'proxy', 'contentBase'] as const;
 
@@ -71,6 +71,10 @@ export function getConfiguration(location = './'): Configuration {
     return readJson(path.join(location, 'package.json')).cli ?? {};
 }
 
+export function getConfigurationSafe(location = './'): Configuration {
+    return readJsonSafe(path.join(location, 'package.json'))?.cli ?? {};
+}
+
 export function isBundle(location?: string) {
     return getConfiguration(location).webpack !== false;
 }

package/src/utils/log.ts

@@ -1,6 +1,15 @@
 import chalk from 'chalk';
+import { createDebug } from './debug';
+
+type Debugger = ReturnType<typeof createDebug>;
 
 class Log {
+    private readonly debugMap: Map<string, Debugger>;
+
+    constructor() {
+        this.debugMap = new Map<string, Debugger>();
+    }
+
     info(...text: string[]) {
         process.stdout.write(chalk.bold.cyan(...text) + '\n');
     }
@@ -16,6 +25,19 @@ class Log {
     error(...text: string[]) {
         process.stdout.write(chalk.bold.red(...text) + '\n');
     }
+
+    debug(namespace: string, ...text: any[]) {
+        let dbg = this.debugMap.get(namespace);
+        if (!dbg) {
+            dbg = createDebug(namespace);
+            this.debugMap.set(namespace, dbg);
+        }
+        if (dbg.enabled && text.length) {
+            const [formatter, ...args] = text.map(str => (typeof str === 'function' ? str() : str));
+            dbg(formatter, ...args);
+        }
+        return dbg;
+    }
 }
 
 export const log = new Log();

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

@@ -0,0 +1,29 @@
+import { RuleSetRule } from 'webpack';
+
+export const fileRules: Record<string, RuleSetRule> = {
+    '.js': {
+        test: /\.js$/,
+        enforce: 'pre',
+        exclude: /node_modules/,
+        loader: 'source-map-loader',
+    },
+    '.worker.js': {
+        test: /\.worker\.js$/,
+        use: { loader: 'worker-loader' },
+    },
+    'images': {
+        test: /\.(png|svg|jpg|jpeg|gif)$/i,
+        type: 'asset',
+        generator: { filename: 'images/[contenthash][ext][query]' },
+    },
+    'fonts': {
+        test: /\.(woff|woff2|eot|ttf|otf)$/i,
+        type: 'asset/resource',
+        generator: { filename: 'fonts/[contenthash][ext][query]' },
+    },
+    '.tsx': {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        use: [{ loader: 'ts-loader', options: { transpileOnly: true } }],
+    },
+};

package/src/webpack/__mocks__/index.ts

@@ -0,0 +1,2 @@
+export * from './file-rules';
+export * from './style-rules';

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

@@ -0,0 +1,126 @@
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import { RuleSetRule } from 'webpack';
+
+export type StyleRule = RuleSetRule & { use: (string | object)[] };
+
+export const styleRules: Record<string, StyleRule> = {
+    '.css': {
+        test: /(\.css)$/,
+        exclude: expect.any(Function),
+        use: ['style-loader', 'css-loader'],
+    },
+    '.scss': {
+        test: /(\.scss)$/,
+        exclude: /\.module.scss$/,
+        use: ['style-loader', 'css-loader', 'sass-loader'],
+    },
+    '.less': {
+        test: /(\.less)$/,
+        exclude: /\.module.less$/,
+        use: [
+            'style-loader',
+            'css-loader',
+            {
+                loader: 'less-loader',
+                options: { lessOptions: { math: 'always' } },
+            },
+        ],
+    },
+    '.module.css': {
+        test: /\.module.css$/,
+        use: [
+            {
+                loader: 'style-loader',
+                options: { esModule: true },
+            },
+            {
+                loader: 'css-loader',
+                options: {
+                    esModule: true,
+                    modules: { exportLocalsConvention: 'camelCaseOnly', namedExport: true },
+                },
+            },
+        ],
+    },
+    '.module.scss': {
+        test: /\.module.scss$/,
+        use: [
+            {
+                loader: 'style-loader',
+                options: { esModule: true },
+            },
+            {
+                loader: 'css-loader',
+                options: {
+                    esModule: true,
+                    modules: { exportLocalsConvention: 'camelCaseOnly', namedExport: true },
+                },
+            },
+            'sass-loader',
+        ],
+    },
+    '.module.less': {
+        test: /\.module.less$/,
+        use: [
+            {
+                loader: 'style-loader',
+                options: { esModule: true },
+            },
+            {
+                loader: 'css-loader',
+                options: {
+                    esModule: true,
+                    modules: { exportLocalsConvention: 'camelCaseOnly', namedExport: true },
+                },
+            },
+            {
+                loader: 'less-loader',
+                options: { lessOptions: { math: 'always' } },
+            },
+        ],
+    },
+};
+
+export const webComponentStyleRules = Object.entries(styleRules).reduce((result, [key, rule]) => {
+    result[key] = { ...rule, use: rule.use?.map(transformStyleLoader) };
+    return result;
+}, {} as typeof styleRules);
+
+export const productionStyleRules = Object.entries(webComponentStyleRules).reduce(
+    (result, [key, rule]) => {
+        if (key === '.css') {
+            result[key] = { ...rule, exclude: /\.module.css$/ }; // production doesn't use callback?!
+        } else {
+            result[key] = { ...rule, use: rule.use?.map(transformCssLoader) };
+        }
+        return result;
+    },
+    {} as typeof webComponentStyleRules
+);
+
+/**
+ * Adds options.modules.localIdentName
+ */
+function transformCssLoader(loader: string | Record<string, any>) {
+    if (typeof loader === 'object' && loader.loader === 'css-loader' && loader.options?.modules) {
+        const options = loader.options;
+        const modules = { ...options.modules, localIdentName: '[local]__[hash:base64:5]' };
+        return { ...loader, options: { ...options, modules } };
+    }
+    return loader;
+}
+
+/**
+ * Replaces "style-loader" with MiniCssExtractPlugin.loader
+ */
+function transformStyleLoader(loader: string | Record<string, any>) {
+    if (loader === 'style-loader') {
+        return MiniCssExtractPlugin.loader;
+    }
+
+    if (typeof loader === 'object' && loader.loader === 'style-loader') {
+        return { ...loader, loader: MiniCssExtractPlugin.loader };
+    }
+
+    return loader;
+}

package/src/webpack/__tests__/create-webpack-config-shared-dependencies.test.ts

@@ -0,0 +1,162 @@
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import { DefinePlugin } from 'webpack';
+import {
+    getFolders,
+    getPackageData,
+    getPackageDependencyVersion,
+    getPackages,
+    getTsConfig,
+    isCustomStyleRules,
+    isExposeSharedDependencies,
+    loadSharedDependencies,
+} from '../../utils';
+import { getModuleEntryPath } from '../utils';
+
+import { createWebpackConfig } from '../index';
+
+jest.mock('mini-css-extract-plugin', () =>
+    Object.assign(jest.fn(), { loader: 'MiniCssExtractPlugin.loader' })
+);
+jest.mock('moment-locales-webpack-plugin', () => jest.fn());
+jest.mock('webpack', () => ({
+    ...jest.requireActual('webpack'),
+    DefinePlugin: jest.fn(),
+}));
+
+jest.mock('../../utils', () => ({
+    ...jest.requireActual('../../utils'),
+    getFolders: jest.fn(),
+    getPackageData: jest.fn(),
+    getPackageDependencyVersion: jest.fn(),
+    getPackages: jest.fn(),
+    getTsConfig: jest.fn(),
+    isCustomStyleRules: jest.fn(),
+    isExposeSharedDependencies: jest.fn(),
+    loadSharedDependencies: jest.fn(),
+    log: { debug: jest.fn(), info: jest.fn() },
+}));
+jest.mock('../utils', () => ({
+    ...jest.requireActual('../utils'),
+    featureCohort: jest.fn(),
+    getCallerFile: jest.fn(),
+    getModuleEntryPath: jest.fn(),
+}));
+
+describe(`[startup] ${createWebpackConfig.name}`, () => {
+    const source = 'src';
+    const destination = 'dist';
+    const tsConfig = 'tsconfig.build.json';
+    const sharedDependencies = {
+        '@servicetitan/design-system': 'SharedDependencies.ServiceTitan.DesignSystem',
+        'react': 'SharedDependencies.React',
+    };
+    const dependencies: Record<string, string> = {
+        '@servicetitan/design-system': '1.2.3',
+        'react': '4.5.6',
+    };
+
+    let overrides: Parameters<typeof createWebpackConfig>[0];
+
+    function mockPlugIn(name: string) {
+        return (options: Record<string, any>): any => ({ [name]: options });
+    }
+
+    beforeEach(() => {
+        overrides = { plugins: {} };
+
+        jest.resetAllMocks();
+        jest.mocked(MiniCssExtractPlugin).mockImplementation(mockPlugIn('MiniCssExtractPlugin'));
+        jest.mocked(DefinePlugin).mockImplementation(mockPlugIn('DefinePlugin'));
+
+        jest.mocked(getFolders).mockReturnValue({ source, destination });
+        jest.mocked(getModuleEntryPath).mockImplementation(name => `${name}/entryPath`);
+        jest.mocked(getPackageData).mockReturnValue({ dependencies, sharedDependencies });
+        jest.mocked(getPackageDependencyVersion).mockImplementation(
+            (_, defaultVersion) => defaultVersion
+        );
+        jest.mocked(getPackages).mockReturnValue([]);
+        jest.mocked(getTsConfig).mockReturnValue(tsConfig);
+        jest.mocked(loadSharedDependencies).mockReturnValue(sharedDependencies);
+    });
+
+    const subject = () => createWebpackConfig(overrides);
+
+    describe('when package exposes shared dependencies', () => {
+        beforeEach(() => jest.mocked(isExposeSharedDependencies).mockReturnValue(true));
+
+        test('configures "optimization.splitChunks.cacheGroups.design-system"', () => {
+            expect(
+                (subject().optimization?.splitChunks as any).cacheGroups['design-system']
+            ).toEqual({
+                test: /[\\/]node_modules[\\/]@servicetitan[\\/](tokens|anvil-fonts|design-system)[\\/].*\.css$/,
+                name: 'design-system',
+                chunks: 'all',
+                enforce: true,
+            });
+        });
+
+        test('configures shared dependency entry points', () => {
+            expect(subject().entry).toEqual({
+                main: expect.arrayContaining(
+                    Object.keys(sharedDependencies).map(getModuleEntryPath)
+                ),
+            });
+        });
+
+        test('configures shared dependencies to use expose-loader', () => {
+            Object.entries(sharedDependencies).forEach(([name, value]) => {
+                expect(subject().module?.rules).toContainEqual({
+                    test: getModuleEntryPath(name),
+                    loader: require.resolve('../loaders/expose-loader'),
+                    options: { exposes: value },
+                });
+            });
+        });
+
+        test('configures EXPOSE_DEPENDENCIES', () => {
+            const exposedDependencies = Object.fromEntries(
+                Object.entries(sharedDependencies).map(([name, variable]) => [
+                    name,
+                    {
+                        version: getPackageDependencyVersion(name, dependencies[name]),
+                        variable,
+                    },
+                ])
+            );
+            expect(subject().plugins).toContainEqual(
+                new DefinePlugin({
+                    // eslint-disable-next-line @typescript-eslint/naming-convention
+                    EXPOSED_DEPENDENCIES: JSON.stringify(exposedDependencies),
+                })
+            );
+        });
+
+        test('configures "design-system.css" rules', () => {
+            expect(subject().module?.rules).toContainEqual({
+                test: /design-system.css$/,
+                use: [MiniCssExtractPlugin.loader, 'css-loader'],
+            });
+        });
+
+        test('configures ".css" rule to also exclude design-system.css', () => {
+            const cssRule: any = subject().module?.rules?.find(({ test }: { test: RegExp }) =>
+                '.css'.match(test)
+            );
+            expect(
+                ['design-system.css', 'foo.module.css', 'foo.css'].filter(path =>
+                    cssRule.exclude(path)
+                )
+            ).toEqual(['design-system.css', 'foo.module.css']);
+        });
+
+        describe('when package has custom style rules', () => {
+            beforeEach(() => jest.mocked(isCustomStyleRules).mockReturnValue(true));
+
+            test('does not configure MiniCssExtractPlugIn plugin', () => {
+                expect(subject().plugins).not.toContainEqual(
+                    expect.objectContaining({ MiniCssExtractPlugIn: expect.anything() })
+                );
+            });
+        });
+    });
+});