@servicetitan/startup 22.17.0 → 22.19.0

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

@@ -1,74 +1,432 @@
-import { Configuration } from 'webpack';
-import { webpackDevConfigFileName, webpackProdConfigFileName } from '../../cli/utils';
-import { isWebComponent } from '../../utils';
-import { createConfig as createDevelopmentConfig } from '../development.config';
-import { createConfig as createProductionConfig } from '../production.config';
-import { getCallerFile } from '../utils/get-caller-filename';
+import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import mockFS from 'mock-fs';
+import MomentLocalesPlugin from 'moment-locales-webpack-plugin';
+import os from 'os';
+import path from 'path';
+import { ProvidePlugin } from 'webpack';
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
+import { argv } from 'yargs';
+
+import {
+    Package,
+    PackageType,
+    getFolders,
+    getPackageData,
+    getPackageDependencyVersion,
+    getPackages,
+    getTsConfig,
+    isCustomStyleRules,
+    isWebComponent,
+    loadSharedDependencies,
+} from '../../utils';
+import { createPackage } from '../../__mocks__';
+import { fileRules, productionStyleRules, styleRules } from '../__mocks__';
+import { featureCohort, splitByEntry } from '../utils';
 
 import { createWebpackConfig } from '../index';
 
+jest.mock('fork-ts-checker-webpack-plugin', () => jest.fn());
+jest.mock('html-webpack-plugin', () => jest.fn());
+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'),
+    ProvidePlugin: jest.fn(),
+}));
+jest.mock('webpack-assets-manifest', () => jest.fn());
+jest.mock('webpack-bundle-analyzer', () => ({ BundleAnalyzerPlugin: jest.fn() }));
+jest.mock('webpack-filter-warnings-plugin', () => jest.fn());
+jest.mock('webpack-virtual-modules', () => jest.fn());
+jest.mock('yargs', () => ({ argv: {} }));
 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(),
     isWebComponent: jest.fn(),
+    loadSharedDependencies: jest.fn(),
+    log: { debug: jest.fn(), info: jest.fn() },
+}));
+jest.mock('../utils', () => ({
+    ...jest.requireActual('../utils'),
+    featureCohort: jest.fn(),
 }));
-jest.mock('../development.config');
-jest.mock('../production.config');
-jest.mock('../utils/get-caller-filename');
 
-describe(`${createWebpackConfig.name}`, () => {
-    const developmentConfig: Configuration = { devServer: { port: 8080 } };
-    const productionConfig: Configuration = { output: { clean: true } };
+describe(`[startup] ${createWebpackConfig.name}`, () => {
+    const source = 'src';
+    const destination = 'dist';
+    const packageName = '@servicetitan/foo';
+    const packageJson = 'package.json';
+    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 packages: Package[];
     let overrides: Parameters<typeof createWebpackConfig>[0];
     let options: Parameters<typeof createWebpackConfig>[1];
 
+    function mockPlugIn(name: string) {
+        return (options: Record<string, any>): any => ({ [name]: options });
+    }
+
+    function setOptions(props: typeof options) {
+        Object.assign((options ??= {}), props);
+    }
+
     beforeEach(() => {
-        jest.mocked(createDevelopmentConfig).mockReturnValue(developmentConfig);
-        jest.mocked(createProductionConfig).mockReturnValue(productionConfig);
-        jest.mocked(getCallerFile).mockReturnValue('');
-        options = { buildStat: false };
+        packages = [];
+        overrides = {
+            plugins: {
+                ForkTsCheckerWebpackPlugin: { logger: 'webpack-infrastructure' },
+                HtmlWebpackPlugin: { favicon: 'foo' },
+                MiniCssExtractPlugin: { attributes: { foo: 'bar' } },
+            },
+        };
+        options = undefined;
+
+        jest.resetAllMocks();
+        jest.mocked(MiniCssExtractPlugin).mockImplementation(mockPlugIn('MiniCssExtractPlugin'));
+        jest.mocked(BundleAnalyzerPlugin).mockImplementation(mockPlugIn('BundleAnalyzerPlugin'));
+        jest.mocked(FilterWarningsPlugin).mockImplementation(mockPlugIn('FilterWarningsPlugin'));
+        jest.mocked(ForkTsCheckerWebpackPlugin).mockImplementation(
+            mockPlugIn('ForkTsCheckerWebpackPlugin')
+        );
+        jest.mocked(HtmlWebpackPlugin).mockImplementation(mockPlugIn('HtmlWebpackPlugin'));
+        jest.mocked(MomentLocalesPlugin).mockImplementation(mockPlugIn('MomentLocalesPlugin'));
+        jest.mocked(ProvidePlugin).mockImplementation(mockPlugIn('ProvidePlugin'));
+
+        jest.mocked(getFolders).mockImplementation((location?: string) => ({
+            source: `${location ? `${location.replace(/\W/g, '')}-` : ''}${source}`,
+            destination,
+        }));
+        jest.mocked(getPackageData).mockReturnValue({ dependencies, sharedDependencies });
+        jest.mocked(getPackageDependencyVersion).mockImplementation(
+            (_, defaultVersion) => defaultVersion
+        );
+        jest.mocked(getPackages).mockImplementation(() => packages);
+        jest.mocked(getTsConfig).mockReturnValue(tsConfig);
+        jest.mocked(loadSharedDependencies).mockReturnValue(sharedDependencies);
+
+        Object.keys(argv).forEach(key => delete (argv as any)[key]);
+
+        mockFS({ [packageJson]: JSON.stringify({ name: packageName }) });
     });
 
+    afterEach(() => mockFS.restore());
+
     const subject = () => createWebpackConfig(overrides, options);
 
-    describe('when mode is "development"', () => {
-        beforeEach(() => (overrides = { configuration: { mode: 'development' } }));
+    test('configures "entry"', () => {
+        expect(subject().entry).toEqual({ main: [`./${source}/index`] });
+    });
+
+    test('configures "resolve"', () => {
+        expect(subject().resolve).toEqual({ extensions: ['.js', '.jsx', '.ts', '.tsx'] });
+    });
+
+    test('configures "devtool"', () => {
+        expect(subject().devtool).toEqual('cheap-module-source-map');
+    });
+
+    test('configures "output.filename"', () => {
+        expect(subject().output?.filename).toEqual('[name].bundle.js');
+    });
+
+    test('configures "output.path"', () => {
+        expect(subject().output!.path).toEqual(
+            expect.stringContaining(path.join(destination, 'bundle'))
+        );
+    });
+
+    test('configures "optimization"', () => {
+        expect(subject().optimization).toEqual({
+            chunkIds: 'size',
+            moduleIds: 'size',
+            mangleExports: 'size',
+            splitChunks: { cacheGroups: {} },
+        });
+    });
+
+    test('configures "stats"', () => {
+        expect(subject().stats).toEqual({
+            all: false,
+            errors: true,
+            errorDetails: true,
+            warnings: true,
+            builtAt: true,
+            colors: true,
+        });
+    });
+
+    test('configures "devServer"', () => {
+        expect(subject().devServer).toEqual({
+            port: 8080,
+            historyApiFallback: true,
+            writeToDisk: true,
+            headers: {
+                'Access-Control-Allow-Origin': '*',
+                'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept',
+            },
+            stats: expect.anything(),
+        });
+    });
+
+    describe('with configuration overrides', () => {
+        beforeEach(() => (overrides.configuration = { devtool: 'eval' }));
+
+        test('includes input configuration', () => {
+            expect(subject()).toEqual(expect.objectContaining(overrides.configuration));
+        });
+    });
+
+    describe('with subordinate TSC packages', () => {
+        beforeEach(() => {
+            packages = [
+                createPackage({ name: 'bar', type: PackageType.TSC }),
+                createPackage({ name: 'baz', type: PackageType.Webpack }),
+            ];
+        });
 
-        test('returns development config', () => {
-            expect(subject()).toBe(developmentConfig);
-            expect(createDevelopmentConfig).toHaveBeenCalledWith(overrides, {
-                embed: false,
-                name: '',
-                ...options,
+        test('configures "devServer.watchOptions" to ignore TSC packages', () => {
+            const ignored = packages
+                .filter(({ type }) => type === PackageType.TSC)
+                .map(({ location }) => path.join(location, getFolders(location).source));
+            expect(subject().devServer?.watchOptions).toEqual({ ignored });
+        });
+    });
+
+    Object.entries({ ...fileRules, ...styleRules }).forEach(([extension, rule]) => {
+        test(`configures "${extension}" rules`, () => {
+            expect(subject().module?.rules).toContainEqual(rule);
+        });
+    });
+
+    describe('when package has custom style rules', () => {
+        beforeEach(() => jest.mocked(isCustomStyleRules).mockReturnValue(true));
+
+        Object.entries(styleRules).forEach(([extension, rule]) => {
+            test(`omits "${extension}" rules`, () => {
+                expect(subject().module?.rules).not.toContainEqual(rule);
             });
         });
     });
 
-    describe('when mode is "production"', () => {
-        beforeEach(() => (overrides = { configuration: { mode: 'production' } }));
-
-        test('returns production config', () => {
-            expect(subject()).toBe(productionConfig);
-            expect(createProductionConfig).toHaveBeenCalledWith(overrides, {
-                embed: false,
-                name: '',
-                ...options,
+    describe('with --esbuild command line argument', () => {
+        beforeEach(() => Object.assign(argv, { esbuild: true }));
+
+        test('configures ".tsx" rules to use esbuild-loader', () => {
+            expect(subject().module?.rules).toContainEqual({
+                test: /\.tsx?$/,
+                exclude: /node_modules/,
+                use: [
+                    {
+                        loader: 'esbuild-loader',
+                        options: { loader: 'tsx', target: 'es2018' },
+                    },
+                ],
+            });
+        });
+
+        test('configures React to load automatically', () => {
+            expect(subject().plugins).toContainEqual(new ProvidePlugin({ React: 'react' }));
+        });
+    });
+
+    test('configures ".css" rule to exclude .module.css files', () => {
+        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(['foo.module.css']);
+    });
+
+    test('configures MomentLocalesPlugin plugin', () => {
+        expect(subject().plugins).toContainEqual(
+            new MomentLocalesPlugin({ localesToKeep: ['en-au', 'en-ca', 'en-gb'] })
+        );
+    });
+
+    test('configures ForkTsCheckerWebpackPlugin plugin', () => {
+        expect(subject().plugins).toContainEqual(
+            new ForkTsCheckerWebpackPlugin({
+                typescript: {
+                    configFile: tsConfig,
+                    configOverwrite: {
+                        exclude: [
+                            '**/__tests__/**/*',
+                            '**/__mocks__/**/*',
+                            '**/*.test.*',
+                            '**/*.stories.tsx',
+                        ],
+                        references: [],
+                    },
+                },
+                ...overrides.plugins?.ForkTsCheckerWebpackPlugin,
+            })
+        );
+    });
+
+    test('configures FilterWarningsPlugin plugin', () => {
+        expect(subject().plugins).toContainEqual(
+            new FilterWarningsPlugin({
+                exclude: /export .* was not found in/,
+            })
+        );
+    });
+
+    test('configures HtmlWebpackPlugin plugin', () => {
+        expect(subject().plugins).toContainEqual(
+            new HtmlWebpackPlugin({
+                title: 'ServiceTitan',
+                hash: true,
+                templateParameters: { splitByEntry },
+                ...overrides.plugins?.HtmlWebpackPlugin,
+            })
+        );
+    });
+
+    describe('when buildStat option is set to true', () => {
+        beforeEach(() => {
+            setOptions({ buildStat: true });
+            jest.useFakeTimers(); // because filename includes timestamp
+        });
+
+        const reportFilename = (type: string) =>
+            path.join(os.tmpdir(), `report-${type}-bundle-${Date.now()}.html`);
+
+        test('configures BundleAnalyzerPlugin plugin', () => {
+            expect(subject().plugins).toContainEqual(
+                new BundleAnalyzerPlugin({
+                    analyzerMode: 'static',
+                    reportFilename: reportFilename('full'),
+                })
+            );
+        });
+
+        describe('when embed option is set to true', () => {
+            beforeEach(() => setOptions({ embed: true }));
+
+            test('changes BundleAnalyzerPlugin reportFilename from "full" to "light"', () => {
+                expect(subject().plugins).toContainEqual(
+                    new BundleAnalyzerPlugin({
+                        analyzerMode: 'static',
+                        reportFilename: reportFilename('light'),
+                    })
+                );
             });
         });
     });
 
-    describe('when package is webComponent', () => {
-        beforeEach(() => jest.mocked(isWebComponent).mockReturnValue(true));
+    describe('when embed option is set to true', () => {
+        beforeEach(() => setOptions({ embed: true, name: packageName }));
+
+        test('configures "externals"', () => {
+            expect(subject().externals).toEqual(
+                Object.fromEntries(
+                    Object.entries(sharedDependencies).map(([name, value]) => [
+                        name,
+                        `${value}['${options!.name}']`,
+                    ])
+                )
+            );
+        });
+    });
+
+    describe('when featureCohort is active', () => {
+        beforeEach(() => {
+            jest.mocked(featureCohort).mockImplementation((_: number[], fn: Function) => fn());
+        });
+
+        test('configures "cache"', () => {
+            expect(subject().cache).toEqual({
+                type: 'filesystem',
+                name: packageName,
+                profile: true,
+            });
+        });
 
-        describe.each([webpackDevConfigFileName, webpackProdConfigFileName])(
-            'when invoked from "%s"',
-            configFileName => {
-                beforeEach(() => jest.mocked(getCallerFile).mockReturnValue(configFileName));
+        describe('when package is web component', () => {
+            beforeEach(() => jest.mocked(isWebComponent).mockReturnValue(true));
 
-                test('throws error', () => {
-                    expect(subject).toThrowError(/cannot call createWebpackConfig/);
+            function itAppendsSuffixToPackageName(suffix: string) {
+                test(`appends "${suffix}" to package name`, () => {
+                    expect(subject().cache).toEqual(
+                        expect.objectContaining({
+                            name: `${packageName}${suffix}`,
+                        })
+                    );
                 });
             }
-        );
+
+            itAppendsSuffixToPackageName('__full');
+
+            describe('when embed option is set to true', () => {
+                beforeEach(() => setOptions({ embed: true }));
+
+                itAppendsSuffixToPackageName('__light');
+            });
+        });
+    });
+
+    describe('when mode is "production"', () => {
+        beforeEach(() => Object.assign((overrides.configuration ??= {}), { mode: 'production' }));
+
+        test('changes "devtool" to "source-map"', () => {
+            expect(subject().devtool).toEqual('source-map');
+        });
+
+        test('configures MiniCssExtractPlugin plugin', () => {
+            expect(subject().plugins).toContainEqual(
+                new MiniCssExtractPlugin({
+                    filename: '[name].[contenthash:8].bundle.css',
+                    ...overrides.plugins?.MiniCssExtractPlugin,
+                })
+            );
+        });
+
+        test('changes "output.filename"', () => {
+            expect(subject().output?.filename).toBe('[name].[contenthash:8].bundle.js');
+        });
+
+        test('configures "output.clean"', () => {
+            expect(subject().output?.clean).toBe(true);
+        });
+
+        test('configures "optimization.runtimeChunk"', () => {
+            expect(subject().optimization?.runtimeChunk).toBe('single');
+        });
+
+        Object.entries(productionStyleRules).forEach(([extension, rules]) => {
+            test(`configures "${extension}" rules`, () => {
+                expect(subject().module?.rules).toContainEqual(rules);
+            });
+        });
+
+        describe('with process.env.CLIENT_CDN_PATH', () => {
+            const cdnPath = 'http://www.example.com/cdn';
+
+            beforeEach(() => (process.env.CLIENT_CDN_PATH = cdnPath));
+            afterEach(() => delete process.env.CLIENT_CDN_PATH);
+
+            test('configures "output.publicPath"', () => {
+                expect(subject().output?.publicPath).toEqual(cdnPath);
+            });
+        });
     });
 });

package/src/webpack/configs/cache-config.ts

@@ -0,0 +1,25 @@
+import { Configuration } from 'webpack';
+import { getPackageName, log } from '../../utils';
+import { featureCohort } from '../utils';
+import { Context, Overrides } from './types';
+
+type Result = Pick<Configuration, 'cache'> | undefined;
+
+export function cacheConfig(context: Context, _: Overrides): Result {
+    const { embed, isProduction, isWebComponent } = context;
+    if (isProduction) {
+        return;
+    }
+
+    return featureCohort([2, 5], () => {
+        const packageName = getPackageName();
+        log.info('Persistent cache is active');
+        return {
+            cache: {
+                type: 'filesystem',
+                name: isWebComponent ? `${packageName}__${embed ? 'light' : 'full'}` : packageName,
+                profile: true,
+            },
+        };
+    });
+}

package/src/webpack/configs/dev-server-config.ts

@@ -0,0 +1,43 @@
+import path from 'path';
+import { Configuration } from 'webpack';
+import {
+    PackageType,
+    getDevServerConfiguration,
+    getFolders,
+    getPackageName,
+    getPackages,
+} from '../../utils';
+import { statsConfig } from './stats-config';
+import { Context, Overrides } from './types';
+
+type Config = Configuration['devServer'];
+type Result = Pick<Configuration, 'devServer'> | undefined;
+
+export function devServerConfig(context: Context, overrides: Overrides): Result {
+    if (context.isProduction) {
+        return;
+    }
+
+    const devServer: Config = {
+        port: 8080,
+        historyApiFallback: true,
+        writeToDisk: true,
+        headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept',
+        },
+        ...watchOptionsConfig(),
+        ...statsConfig(context, overrides),
+        ...getDevServerConfiguration(),
+    };
+
+    return { devServer };
+}
+
+function watchOptionsConfig() {
+    const watchIgnore = getPackages({ scope: getPackageName() })
+        .filter(({ type }) => type === PackageType.TSC)
+        .map(({ location }) => path.join(location, getFolders(location).source));
+
+    return watchIgnore.length ? { watchOptions: { ignored: watchIgnore } } : undefined;
+}

package/src/webpack/configs/devtool-config.ts

@@ -0,0 +1,18 @@
+import { Configuration } from 'webpack';
+import { Context, Overrides } from './types';
+
+type Config = Configuration['devtool'];
+type Result = Pick<Configuration, 'devtool'>;
+
+export function devtoolConfig(context: Context, _: Overrides): Result {
+    const { isProduction, isWebComponent } = context;
+    let devtool: Config;
+
+    if (isProduction) {
+        devtool = isWebComponent ? false : 'source-map';
+    } else {
+        devtool = 'cheap-module-source-map';
+    }
+
+    return { devtool };
+}

package/src/webpack/configs/entry.config.ts

@@ -0,0 +1,18 @@
+import { Configuration } from 'webpack';
+import { getModuleEntryPath } from '../utils';
+import { Context, Overrides } from './types';
+
+type Config = Configuration['entry'];
+type Result = Pick<Configuration, 'entry'>;
+
+export function entryConfig(context: Context, _: Overrides): Result {
+    const { isExposeSharedDependencies, sharedDependencies, source } = context;
+
+    const entry: Config = { main: [`./${source}/index`] };
+
+    if (isExposeSharedDependencies) {
+        (entry.main as string[]).push(...Object.keys(sharedDependencies).map(getModuleEntryPath));
+    }
+
+    return { entry };
+}

package/src/webpack/configs/externals-config.ts

@@ -0,0 +1,21 @@
+import { Configuration } from 'webpack';
+import { Context, Overrides } from './types';
+
+type Config = Configuration['externals'];
+type Result = Pick<Configuration, 'externals'> | undefined;
+
+export function externalsConfig(context: Context, _: Overrides): Result {
+    const { embed, name, sharedDependencies } = context;
+    if (!embed) {
+        return;
+    }
+
+    const externals: Config = Object.fromEntries(
+        Object.entries(sharedDependencies).map(([dependency, variable]) => [
+            dependency,
+            `${variable}['${name}']`,
+        ])
+    );
+
+    return { externals };
+}

package/src/webpack/configs/index.ts

@@ -0,0 +1,12 @@
+export * from './cache-config';
+export * from './dev-server-config';
+export * from './devtool-config';
+export * from './entry.config';
+export * from './externals-config';
+export * from './module-config';
+export * from './optimization-config';
+export * from './output-config';
+export * from './plugins-config';
+export * from './resolve-config';
+export * from './stats-config';
+export * from './types';

package/src/webpack/configs/loaders/css-loader.ts

@@ -0,0 +1,19 @@
+import { Context } from '../types';
+import { LoaderOptions } from './types';
+
+export function cssLoader({ isProduction }: Context, { esModule }: LoaderOptions = {}) {
+    const loader = 'css-loader';
+    return esModule
+        ? {
+              loader,
+              options: {
+                  esModule,
+                  modules: {
+                      ...(isProduction ? { localIdentName: '[local]__[hash:base64:5]' } : {}),
+                      exportLocalsConvention: 'camelCaseOnly',
+                      namedExport: true,
+                  },
+              },
+          }
+        : loader;
+}

package/src/webpack/configs/loaders/index.ts

@@ -0,0 +1,4 @@
+export * from './css-loader';
+export * from './less-loader';
+export * from './style-loader';
+export * from './types';

package/src/webpack/configs/loaders/less-loader.ts

@@ -0,0 +1,3 @@
+export function lessLoader() {
+    return { loader: 'less-loader', options: { lessOptions: { math: 'always' } } };
+}

package/src/webpack/configs/loaders/style-loader.ts

@@ -0,0 +1,11 @@
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import { Context } from '../types';
+import { LoaderOptions } from './types';
+
+export function styleLoader(
+    { isProduction, isWebComponent }: Context,
+    { esModule }: LoaderOptions = {}
+) {
+    const loader = isProduction || isWebComponent ? MiniCssExtractPlugin.loader : 'style-loader';
+    return esModule ? { loader, options: { esModule } } : loader;
+}

package/src/webpack/configs/loaders/types.ts

@@ -0,0 +1,3 @@
+export interface LoaderOptions {
+    esModule?: boolean;
+}