@servicetitan/startup 22.16.0 → 22.17.0

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

@@ -0,0 +1,508 @@
+import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import mockFS from 'mock-fs';
+import MomentLocalesPlugin from 'moment-locales-webpack-plugin';
+import os from 'os';
+import path from 'path';
+import { DefinePlugin, ProvidePlugin } from 'webpack';
+import WebpackAssetsManifest from 'webpack-assets-manifest';
+import VirtualModulesPlugin from 'webpack-virtual-modules';
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
+import { argv } from 'yargs';
+import {
+    getFolders,
+    getPackageData,
+    getPackageDependencyVersion,
+    getTsConfig,
+    isExposeSharedDependencies,
+    isWebComponent,
+    loadSharedDependencies,
+} from '../../utils';
+import { getModuleEntryPath } from '../utils/bundle';
+import { splitByEntry } from '../utils/split-by-entry';
+
+import { createConfig as createSharedConfig } from '../shared.config';
+
+jest.mock('fork-ts-checker-webpack-plugin', () => jest.fn());
+jest.mock('html-webpack-plugin', () => jest.fn());
+jest.mock('moment-locales-webpack-plugin', () => jest.fn());
+jest.mock('webpack', () => ({
+    ...jest.requireActual('webpack'),
+    DefinePlugin: jest.fn(),
+    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(),
+    getTsConfig: jest.fn(),
+    loadSharedDependencies: jest.fn(),
+    isExposeSharedDependencies: jest.fn(),
+    isWebComponent: jest.fn(),
+}));
+jest.mock('../utils/bundle', () => ({
+    ...jest.requireActual('../utils/bundle'),
+    getModuleEntryPath: jest.fn(),
+}));
+
+describe('createSharedConfig', () => {
+    const source = 'src';
+    const destination = 'dist';
+    const tsConfig = 'tsconfig.build.json';
+
+    let overrides: Parameters<typeof createSharedConfig>[0];
+    let options: Parameters<typeof createSharedConfig>[1];
+
+    function mockPlugIn(name: string) {
+        return (options: Record<string, any>): any => ({ [name]: options });
+    }
+
+    beforeEach(() => {
+        overrides = {
+            configuration: { mode: 'production' },
+            plugins: {
+                ForkTsCheckerWebpackPlugin: { logger: 'webpack-infrastructure' },
+                HtmlWebpackPlugin: { favicon: 'foo' },
+            },
+        };
+        options = { name: '' };
+
+        jest.resetAllMocks();
+        jest.mocked(BundleAnalyzerPlugin).mockImplementation(mockPlugIn('BundleAnalyzerPlugin'));
+        jest.mocked(DefinePlugin).mockImplementation(mockPlugIn('DefinePlugin'));
+        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(VirtualModulesPlugin).mockImplementation(mockPlugIn('VirtualModulesPlugin'));
+        jest.mocked(WebpackAssetsManifest).mockImplementation(mockPlugIn('WebpackAssetsManifest'));
+
+        jest.mocked(getFolders).mockReturnValue({ source, destination });
+        jest.mocked(getPackageData).mockReturnValue({ dependencies: {}, sharedDependencies: {} });
+        jest.mocked(getTsConfig).mockReturnValue(tsConfig);
+        jest.mocked(loadSharedDependencies).mockReturnValue({});
+
+        Object.keys(argv).forEach(key => delete (argv as any)[key]);
+    });
+
+    const subject = () => createSharedConfig(overrides, options);
+
+    test('includes input configuration', () => {
+        expect(subject()).toEqual(expect.objectContaining(overrides.configuration));
+    });
+
+    test('configures "resolve"', () => {
+        expect(subject().resolve).toEqual({ extensions: ['.js', '.jsx', '.ts', '.tsx'] });
+    });
+
+    test('configures "entry"', () => {
+        expect(subject().entry).toEqual({ main: [`./${source}/index`] });
+    });
+
+    Object.entries({
+        '.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 } }],
+        },
+    }).forEach(([extension, rule]) => {
+        test(`configures "${extension}" rules`, () => {
+            expect(subject().module?.rules).toContainEqual(rule);
+        });
+    });
+
+    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 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/,
+            })
+        );
+    });
+
+    const defaultHtmlWebpackPluginOptions: ConstructorParameters<typeof HtmlWebpackPlugin>[0] = {
+        title: 'ServiceTitan',
+        hash: true,
+        templateParameters: { splitByEntry },
+    };
+
+    test('configures HtmlWebpackPlugin plugin', () => {
+        expect(subject().plugins).toContainEqual(
+            new HtmlWebpackPlugin({
+                ...defaultHtmlWebpackPluginOptions,
+                ...overrides.plugins?.HtmlWebpackPlugin,
+            })
+        );
+    });
+
+    describe('when package is web component', () => {
+        const designSystemPath = () => path.join(process.cwd(), `${source}/design-system.css`);
+        const designSystemCode = [
+            `@import '~@servicetitan/tokens/core/tokens.css';`,
+            `@import '~@servicetitan/anvil-fonts/dist/css/anvil-fonts.css';`,
+            `@import '~@servicetitan/design-system/dist/system.min.css';`,
+        ].join('\n');
+
+        const indexPath = () => path.join(process.cwd(), `${source}/index.ts`);
+        const indexCode = [
+            `import { register } from '@servicetitan/web-components';`,
+            `import { App } from './app';`,
+            `require('./design-system.css');`,
+            `register(App, false);`,
+        ].join('\n');
+
+        beforeEach(() => jest.mocked(isWebComponent).mockReturnValue(true));
+
+        test('configures WEB_COMPONENT_NAME', () => {
+            expect(subject().plugins).toContainEqual(
+                // eslint-disable-next-line @typescript-eslint/naming-convention
+                new DefinePlugin({ WEB_COMPONENT_NAME: JSON.stringify(options.name) })
+            );
+        });
+
+        test('configures WebpackAssetsManifest plugin', () => {
+            expect(subject().plugins).toContainEqual(
+                new WebpackAssetsManifest({
+                    entrypoints: true,
+                    output: 'entrypoints.json',
+                    transform: expect.any(Function),
+                })
+            );
+        });
+
+        test('WebpackAssetsManifest plugin groups assets by type', () => {
+            const assets = {
+                entrypoints: {
+                    foo: { assets: { css: ['bar.css'] } },
+                    baz: { assets: { js: ['qux.js'] } },
+                },
+            };
+
+            subject();
+
+            const transform: any = jest.mocked(WebpackAssetsManifest).mock.calls[0][0]?.transform;
+            expect(transform(assets)).toEqual({
+                css: ['bar.css'],
+                js: ['qux.js'],
+            });
+        });
+
+        test('configures HtmlWebpackPlugin plugin with additional properties', () => {
+            expect(subject().plugins).toContainEqual(
+                new HtmlWebpackPlugin({
+                    ...defaultHtmlWebpackPluginOptions,
+                    ...overrides.plugins?.HtmlWebpackPlugin,
+                    inject: false,
+                    publicPath: '/',
+                    templateContent: expect.any(Function),
+                })
+            );
+        });
+
+        test('configures HtmlWebpackPlugin plugin to render template content', () => {
+            const headTags = '{headTags}';
+            const bodyTags = '{bodyTags}';
+            const files = { css: ['foo.css'] };
+            const styleUrls = encodeURIComponent(JSON.stringify(files.css));
+            const template = `
+                <!DOCTYPE html>
+                <html>
+                    <head>
+                        <meta name="viewport" content="width=device-width,initial-scale=1">
+                        ${headTags}
+                    </head>
+                    <body>
+                        <${options.name} style-urls="${styleUrls}" />
+                        ${bodyTags}
+                    </body>
+                </html>
+            `;
+
+            subject();
+
+            const templateContent: any =
+                jest.mocked(HtmlWebpackPlugin).mock.calls[0][0]?.templateContent;
+            expect(
+                templateContent({
+                    htmlWebpackPlugin: { tags: { headTags, bodyTags }, files },
+                }).replace(/\n\s+/g, '\n')
+            ).toEqual(template.replace(/\n\s+/g, '\n'));
+        });
+
+        test(`configures virtual modules`, () => {
+            expect(subject().plugins).toContainEqual(
+                new VirtualModulesPlugin({
+                    [designSystemPath()]: designSystemCode,
+                    [indexPath()]: indexCode,
+                })
+            );
+        });
+
+        test('appends "/full" to output path', () => {
+            expect(subject().output?.path).toEqual(
+                expect.stringContaining(path.join(destination, 'bundle', 'full'))
+            );
+        });
+
+        test('configures "optimization.splitChunks.cacheGroups.styles', () => {
+            expect((subject().optimization?.splitChunks as any).cacheGroups.styles).toEqual({
+                name: 'main',
+                type: 'css/mini-extract',
+                chunks: 'all',
+                enforce: true,
+            });
+        });
+
+        describe('when design-system.css exists', () => {
+            beforeEach(() => mockFS({ [source]: { 'design-system.css': '' } }));
+            afterEach(() => mockFS.restore());
+
+            test('omits design system virtual module', () => {
+                expect(subject().plugins).toContainEqual(
+                    new VirtualModulesPlugin({
+                        [indexPath()]: indexCode,
+                    })
+                );
+            });
+        });
+
+        describe('when embed option is set to true', () => {
+            beforeEach(() => (options.embed = true));
+
+            test(`changes virtual index module to omit design system and to register App`, () => {
+                expect(subject().plugins).toContainEqual(
+                    new VirtualModulesPlugin({
+                        [designSystemPath()]: designSystemCode,
+                        [indexPath()]: indexCode
+                            .replace("require('./design-system.css');\n", '')
+                            .replace('register(App, false)', 'register(App, true)'),
+                    })
+                );
+            });
+
+            test('appends "/light" to output path', () => {
+                expect(subject().output?.path).toEqual(
+                    expect.stringContaining(path.join(destination, 'bundle', 'light'))
+                );
+            });
+        });
+    });
+
+    describe('when package exposes shared dependencies', () => {
+        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',
+        };
+
+        beforeEach(() => {
+            jest.mocked(isExposeSharedDependencies).mockReturnValue(true);
+            jest.mocked(loadSharedDependencies).mockReturnValue(sharedDependencies);
+            jest.mocked(getModuleEntryPath).mockImplementation(name => `${name}/entryPath`);
+            jest.mocked(getPackageData).mockReturnValue({ dependencies, sharedDependencies });
+            jest.mocked(getPackageDependencyVersion).mockImplementation(
+                (_, defaultVersion) => defaultVersion
+            );
+        });
+
+        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 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 "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,
+            });
+        });
+
+        describe('when embed option is set to true', () => {
+            beforeEach(() => (options.embed = true));
+
+            test('configures "externals"', () => {
+                expect(subject().externals).toEqual(
+                    Object.fromEntries(
+                        Object.entries(sharedDependencies).map(([name, value]) => [
+                            name,
+                            `${value}['${options.name}']`,
+                        ])
+                    )
+                );
+            });
+        });
+    });
+
+    describe('when buildStat option is set to true', () => {
+        beforeEach(() => {
+            options.buildStat = true;
+            jest.useFakeTimers();
+            jest.spyOn(os, 'tmpdir').mockReturnValue('tmpdir');
+        });
+
+        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(() => (options.embed = true));
+
+            test('changes BundleAnalyzerPlugin reportFilename from "full" to "light"', () => {
+                expect(subject().plugins).toContainEqual(
+                    new BundleAnalyzerPlugin({
+                        analyzerMode: 'static',
+                        reportFilename: reportFilename('light'),
+                    })
+                );
+            });
+        });
+    });
+
+    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' }));
+        });
+    });
+});

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

@@ -0,0 +1,74 @@
+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 { createWebpackConfig } from '../index';
+
+jest.mock('../../utils', () => ({
+    ...jest.requireActual('../../utils'),
+    isWebComponent: 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 } };
+
+    let overrides: Parameters<typeof createWebpackConfig>[0];
+    let options: Parameters<typeof createWebpackConfig>[1];
+
+    beforeEach(() => {
+        jest.mocked(createDevelopmentConfig).mockReturnValue(developmentConfig);
+        jest.mocked(createProductionConfig).mockReturnValue(productionConfig);
+        jest.mocked(getCallerFile).mockReturnValue('');
+        options = { buildStat: false };
+    });
+
+    const subject = () => createWebpackConfig(overrides, options);
+
+    describe('when mode is "development"', () => {
+        beforeEach(() => (overrides = { configuration: { mode: 'development' } }));
+
+        test('returns development config', () => {
+            expect(subject()).toBe(developmentConfig);
+            expect(createDevelopmentConfig).toHaveBeenCalledWith(overrides, {
+                embed: false,
+                name: '',
+                ...options,
+            });
+        });
+    });
+
+    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('when package is webComponent', () => {
+        beforeEach(() => jest.mocked(isWebComponent).mockReturnValue(true));
+
+        describe.each([webpackDevConfigFileName, webpackProdConfigFileName])(
+            'when invoked from "%s"',
+            configFileName => {
+                beforeEach(() => jest.mocked(getCallerFile).mockReturnValue(configFileName));
+
+                test('throws error', () => {
+                    expect(subject).toThrowError(/cannot call createWebpackConfig/);
+                });
+            }
+        );
+    });
+});

package/dist/cli/__mocks__/create-package.d.ts

@@ -1,3 +0,0 @@
-import { Package } from '../../utils';
-export declare function createPackage(props: Partial<Package>): Package;
-//# sourceMappingURL=create-package.d.ts.map

package/dist/cli/__mocks__/create-package.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"create-package.d.ts","sourceRoot":"","sources":["../../../src/cli/__mocks__/create-package.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAe,MAAM,aAAa,CAAC;AAEnD,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAS9D"}

package/dist/cli/__mocks__/create-package.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"create-package.js","sourceRoot":"","sources":["../../../src/cli/__mocks__/create-package.ts"],"names":[],"mappings":";;;AAAA,uCAAmD;AAEnD,SAAgB,aAAa,CAAC,KAAuB;IACjD,uBACI,IAAI,EAAE,mBAAmB,EACzB,IAAI,EAAE,mBAAW,CAAC,MAAM,EACxB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,cAAc,IACrB,KAAK,EACV;AACN,CAAC;AATD,sCASC"}

package/dist/cli/__mocks__/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/cli/__mocks__/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/dist/cli/__mocks__/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/cli/__mocks__/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,mDAAiC"}