@servicetitan/startup 36.4.0 → 37.0.0

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

@@ -2,11 +2,12 @@ import HtmlWebpackPlugin from 'html-webpack-plugin';
 import { fs, vol } from 'memfs';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import path from 'path';
+import TerserPlugin from 'terser-webpack-plugin';
 import { DefinePlugin } from 'webpack';
 import { WebpackAssetsManifest } from 'webpack-assets-manifest';
 import VirtualModulesPlugin from 'webpack-virtual-modules';
 import yargs from 'yargs';
-import { generateMetadata } from '../../core';
+import { CHUNK_PATTERNS, generateMetadata } from '../../core';
 import {
     getFolders,
     getPackageData,
@@ -16,8 +17,11 @@ import {
     isWebComponent,
 } from '../../utils';
 import { miniCssPluginStyleRules } from '../__mocks__';
-import { webpackDevConfigFileName, webpackProdConfigFileName } from '../create-webpack-config';
-import { createWebpackConfig } from '../index';
+import {
+    createWebpackConfig,
+    webpackDevConfigFileName,
+    webpackProdConfigFileName,
+} from '../create-webpack-config';
 import { getCallerFile, splitByEntry } from '../utils';
 
 jest.mock('fs', () => fs);
@@ -26,6 +30,7 @@ jest.mock('mini-css-extract-plugin', () =>
     Object.assign(jest.fn(), { loader: 'MiniCssExtractPlugin.loader' })
 );
 jest.mock('moment-locales-webpack-plugin', () => jest.fn());
+jest.mock('terser-webpack-plugin', () => jest.fn());
 jest.mock('webpack', () => ({
     DefinePlugin: jest.fn(),
     IgnorePlugin: jest.fn(),
@@ -103,6 +108,7 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
         jest.mocked(DefinePlugin).mockImplementation(mockPlugIn('DefinePlugin'));
         jest.mocked(HtmlWebpackPlugin).mockImplementation(mockPlugIn('HtmlWebpackPlugin'));
         jest.mocked(VirtualModulesPlugin).mockImplementation(mockPlugIn('VirtualModulesPlugin'));
+        jest.mocked(TerserPlugin).mockImplementation(mockPlugIn('TerserPlugin'));
         jest.mocked(WebpackAssetsManifest).mockImplementation(mockPlugIn('WebpackAssetsManifest'));
         jest.mocked(yargs).mockImplementation(() => ({ argv: {} }) as any);
 
@@ -135,7 +141,7 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
             },
             servicetitan: {
                 name: 'servicetitan',
-                test: /[\\/]node_modules[\\/]@servicetitan[\\/]/,
+                test: CHUNK_PATTERNS.servicetitan,
                 chunks: 'all',
             },
         };
@@ -208,7 +214,7 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
                 entrypoints: {
                     foo: {
                         assets: {
-                            css: ['main.css', 'servicetitan.css', 'common.css'],
+                            css: ['main.css', 'servicetitan.css', 'vendor-core.css'],
                         },
                     },
                 },
@@ -218,7 +224,9 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
 
             const transform: any = jest.mocked(WebpackAssetsManifest).mock.calls[0][0]?.transform;
             expect(transform(assets)).toEqual(
-                expect.objectContaining({ css: ['servicetitan.css', 'main.css', 'common.css'] })
+                expect.objectContaining({
+                    css: ['servicetitan.css', 'main.css', 'vendor-core.css'],
+                })
             );
         });
 
@@ -394,6 +402,44 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
                     path.join(process.cwd(), destination, 'bundle', 'headless')
                 );
             });
+
+            test('omits "optimization.splitChunks.cacheGroups"', () => {
+                // @ts-expect-error because splitChunks is polymorphic
+                expect(subject().optimization?.splitChunks.cacheGroups).toEqual({});
+            });
+
+            describe('when mode is production', () => {
+                beforeEach(() =>
+                    Object.assign((overrides.configuration ??= {}), { mode: 'production' })
+                );
+
+                test('configures "optimization.splitChunks.cacheGroups"', () => {
+                    // @ts-expect-error because splitChunks is polymorphic
+                    expect(subject().optimization?.splitChunks.cacheGroups).toEqual({
+                        'servicetitan': {
+                            name: 'servicetitan',
+                            test: CHUNK_PATTERNS.servicetitan,
+                            chunks: 'all',
+                        },
+                        'vendor-core': {
+                            name: 'vendor-core',
+                            test: CHUNK_PATTERNS['vendor-core'],
+                            chunks: 'all',
+                        },
+                        'kendo': {
+                            name: 'kendo',
+                            test: CHUNK_PATTERNS.kendo,
+                            chunks: 'all',
+                        },
+                        'vendor': {
+                            name: 'vendor',
+                            test: CHUNK_PATTERNS.vendor,
+                            chunks: 'all',
+                            priority: -5,
+                        },
+                    });
+                });
+            });
         });
 
         describe.each([webpackDevConfigFileName, webpackProdConfigFileName])(
@@ -416,20 +462,26 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
                 expect(subject().devtool).toBe('source-map');
             });
 
-            test('adds "common" and "kendo" to "optimization.splitChunks.cacheGroups"', () => {
+            test('adds "vendor-core", "kendo", and "vendor" to "optimization.splitChunks.cacheGroups"', () => {
                 // @ts-expect-error because splitChunks is polymorphic
                 expect(subject().optimization?.splitChunks.cacheGroups).toEqual({
                     ...baseCacheGroups,
-                    common: {
-                        name: 'common',
-                        test: /[\\/]node_modules[\\/](axios|classnames|formstate|mobx|mobx-react|mobx-utils|react|react-dom|react-router|react-router-dom)[\\/]/,
+                    'vendor-core': {
+                        name: 'vendor-core',
+                        test: CHUNK_PATTERNS['vendor-core'],
                         chunks: 'all',
                     },
-                    kendo: {
+                    'kendo': {
                         name: 'kendo',
-                        test: /[\\/]node_modules[\\/](@progress|@telerik)[\\/]/,
+                        test: CHUNK_PATTERNS.kendo,
                         chunks: 'all',
                     },
+                    'vendor': {
+                        name: 'vendor',
+                        test: CHUNK_PATTERNS.vendor,
+                        chunks: 'all',
+                        priority: -5,
+                    },
                 });
             });
 
@@ -437,6 +489,12 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
                 expect(subject().output?.uniqueName).toEqual(options.name);
             });
 
+            test('enables terser compress and mangle', () => {
+                expect(subject().optimization?.minimizer).toContainEqual(
+                    new TerserPlugin({ terserOptions: { compress: true, mangle: true } })
+                );
+            });
+
             describe('when headless option is set to true', () => {
                 beforeEach(() => (options.headless = true));
 

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

@@ -6,15 +6,17 @@ import MomentLocalesPlugin from 'moment-locales-webpack-plugin';
 import os from 'os';
 import path from 'path';
 import TerserPlugin from 'terser-webpack-plugin';
-import { IgnorePlugin, ProvidePlugin } from 'webpack';
+import { DefinePlugin, IgnorePlugin, ProvidePlugin } from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
 import yargs from 'yargs';
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
 
 import { getPackageManager } from '@servicetitan/install';
+import { CHUNK_PATTERNS } from '../../core';
 import {
     getConfiguration,
+    getExposeProcessEnv,
     getFolders,
     getPackageData,
     getPackages,
@@ -29,10 +31,9 @@ import {
 } from '../../utils';
 import { fileRules, productionStyleRules, styleRules } from '../__mocks__';
 import { JS_RULE_EXCLUDE } from '../configs/constants';
+import { createWebpackConfig } from '../create-webpack-config';
 import { splitByEntry } from '../utils';
 
-import { createWebpackConfig } from '../index';
-
 jest.mock('fs', () => fs);
 jest.mock('css-minimizer-webpack-plugin', () => jest.fn());
 jest.mock('html-webpack-plugin', () => jest.fn());
@@ -56,6 +57,7 @@ jest.mock('@servicetitan/install', () => ({ getPackageManager: jest.fn() }));
 jest.mock('../../utils', () => ({
     ...jest.requireActual('../../utils'),
     getConfiguration: jest.fn(),
+    getExposeProcessEnv: jest.fn(),
     getFolders: jest.fn(),
     getPackageData: jest.fn(),
     getPackages: jest.fn(),
@@ -201,6 +203,26 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
         expect(subject().output!.path).toEqual(path.join(process.cwd(), destination, 'bundle'));
     });
 
+    describe('with custom "output.path"', () => {
+        const output = { path: '/foo' };
+
+        beforeEach(() => (overrides.configuration!.output = output));
+
+        test('uses custom output.path', () => {
+            expect(subject().output!.path).toEqual(output.path);
+        });
+
+        describe('when package is web component', () => {
+            beforeEach(() => jest.mocked(isWebComponent).mockReturnValue(true));
+
+            test('uses default output.path', () => {
+                expect(subject().output!.path).toEqual(
+                    path.join(process.cwd(), destination, 'bundle', 'full')
+                );
+            });
+        });
+    });
+
     test('configures "optimization"', () => {
         expect(subject().optimization).toEqual({
             chunkIds: 'named',
@@ -487,10 +509,11 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
         );
     });
 
-    test('configures IgnorePlugin plugin', () => {
-        expect(subject().plugins).toContainEqual({
-            IgnorePlugin: { checkResource: expect.any(Function) },
-        });
+    test('configures IgnoreOptionalDependenciesPlugin', () => {
+        const plugin = subject().plugins?.find(
+            p => p?.constructor.name === 'IgnoreOptionalDependenciesPlugin'
+        );
+        expect(plugin).toBeDefined();
     });
 
     describe('when buildStat option is set to true', () => {
@@ -509,9 +532,10 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
         function reportTitle(type?: string) {
             const date = new Date();
 
-            const timestamp = `${date.getFullYear()}-${
+            const zeroPad = (n: number) => n.toString().padStart(2, '0');
+            const timestamp = `${date.getFullYear()}-${zeroPad(
                 date.getMonth() + 1
-            }-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`;
+            )}-${zeroPad(date.getDate())} ${zeroPad(date.getHours())}:${zeroPad(date.getMinutes())}`;
 
             return `${packageName.replace('@servicetitan/', '')}${
                 type ? ` (${type})` : ''
@@ -595,6 +619,33 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
             expect(subject().optimization?.runtimeChunk).toBe('single');
         });
 
+        test('configures "optimization.splitChunks.cacheGroups"', () => {
+            // @ts-expect-error because splitChunks is polymorphic
+            expect(subject().optimization?.splitChunks.cacheGroups).toEqual({
+                'servicetitan': {
+                    name: 'servicetitan',
+                    test: CHUNK_PATTERNS.servicetitan,
+                    chunks: 'all',
+                },
+                'vendor-core': {
+                    name: 'vendor-core',
+                    test: CHUNK_PATTERNS['vendor-core'],
+                    chunks: 'all',
+                },
+                'kendo': {
+                    name: 'kendo',
+                    test: CHUNK_PATTERNS.kendo,
+                    chunks: 'all',
+                },
+                'vendor': {
+                    name: 'vendor',
+                    test: CHUNK_PATTERNS.vendor,
+                    chunks: 'all',
+                    priority: -5,
+                },
+            });
+        });
+
         test('configures "optimization.minimize"', () => {
             expect(subject().optimization?.minimize).toBe(true);
         });
@@ -681,4 +732,36 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
             expect(subject).toThrow('package does not expose shared dependencies');
         });
     });
+
+    describe('with "expose-process-env"', () => {
+        const variable = 'API_URL';
+        const value = 'https://api.example.com';
+
+        beforeEach(() => {
+            jest.mocked(getExposeProcessEnv).mockReturnValue([variable]);
+            process.env[variable] = value;
+        });
+
+        afterEach(() => delete process.env[variable]);
+
+        test('defines the variable via DefinePlugin', () => {
+            subject();
+
+            expect(DefinePlugin).toHaveBeenCalledWith({
+                [`process.env.${variable}`]: JSON.stringify(value),
+            });
+        });
+
+        describe('when variable is not set', () => {
+            beforeEach(() => delete process.env[variable]);
+
+            test('defines the variable as undefined', () => {
+                subject();
+
+                expect(DefinePlugin).toHaveBeenCalledWith({
+                    [`process.env.${variable}`]: 'undefined',
+                });
+            });
+        });
+    });
 });

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

@@ -1,6 +1,7 @@
 import CssMinimizerWebpackPlugin from 'css-minimizer-webpack-plugin';
 import TerserPlugin from 'terser-webpack-plugin';
 import { Configuration } from 'webpack';
+import { CHUNK_PATTERNS } from '../../core';
 import { Overrides, WebpackBuildContext } from '../types';
 
 type Config = Configuration['optimization'];
@@ -23,15 +24,26 @@ export function optimizationConfig(context: WebpackBuildContext, _: Overrides):
         optimization.runtimeChunk = 'single';
     }
 
-    [minimizeConfig, sharedDependenciesConfig, webComponentConfig].forEach(handler =>
+    [hostConfig, minimizeConfig, sharedDependenciesConfig, webComponentConfig].forEach(handler =>
         handler(optimization, context)
     );
 
     return { optimization };
 }
 
+function hostConfig(optimization: ConfigWithCacheGroups, context: WebpackBuildContext) {
+    const { isProduction } = context.build;
+    const { isWebComponent } = context.package;
+    if (isWebComponent || !isProduction) {
+        return;
+    }
+
+    Object.assign(optimization.splitChunks.cacheGroups, vendorGroups());
+}
+
 function minimizeConfig(optimization: ConfigWithCacheGroups, context: WebpackBuildContext) {
     const { isProduction } = context.build;
+    const { isWebComponent } = context.package;
     const { codeCoverage } = context.options;
     const { minify } = context.bundlerConfig;
     if (!isProduction) {
@@ -45,9 +57,13 @@ function minimizeConfig(optimization: ConfigWithCacheGroups, context: WebpackBui
         return;
     }
 
+    /*
+     * MFE source maps are available to Datadog, so compress and mangle are OK.
+     * Disable for hosts until their source maps are uploaded too.
+     */
     const terserOptions = {
-        compress: false,
-        mangle: false,
+        compress: !!isWebComponent,
+        mangle: !!isWebComponent,
         ...(typeof minifyJs === 'object' ? minifyJs : {}),
     };
 
@@ -76,6 +92,8 @@ function sharedDependenciesConfig(
             name: 'anvil2',
             chunks: 'all',
             enforce: true,
+            // Must outrank vendor groups so anvil2 CSS lands in separate chunk
+            priority: 10,
         },
     });
 }
@@ -83,38 +101,42 @@ function sharedDependenciesConfig(
 function webComponentConfig(optimization: ConfigWithCacheGroups, context: WebpackBuildContext) {
     const { headless, isProduction } = context.build;
     const { isWebComponent } = context.package;
-    if (!isWebComponent || headless) {
+    if (!isWebComponent) {
         return;
     }
 
+    const groups = vendorGroups();
+    const styles = { name: 'main', type: 'css/mini-extract', chunks: 'all', enforce: true };
+
     Object.assign(optimization.splitChunks.cacheGroups, {
-        styles: {
-            name: 'main',
-            type: 'css/mini-extract',
-            chunks: 'all',
-            enforce: true,
-        },
-        servicetitan: {
+        ...(headless ? {} : { styles }),
+        // assets-manifest-plugin requires servicetitan to order CSS correctly (headless has no CSS)
+        ...(isProduction ? groups : headless ? {} : { servicetitan: groups.servicetitan }),
+    });
+}
+
+function vendorGroups() {
+    return {
+        'servicetitan': {
             name: 'servicetitan',
-            test: /[\\/]node_modules[\\/]@servicetitan[\\/]/,
+            test: CHUNK_PATTERNS.servicetitan,
             chunks: 'all',
         },
-    });
-
-    if (!isProduction) {
-        return;
-    }
-
-    Object.assign(optimization.splitChunks.cacheGroups, {
-        common: {
-            name: 'common',
-            test: /[\\/]node_modules[\\/](axios|classnames|formstate|mobx|mobx-react|mobx-utils|react|react-dom|react-router|react-router-dom)[\\/]/,
+        'vendor-core': {
+            name: 'vendor-core',
+            test: CHUNK_PATTERNS['vendor-core'],
             chunks: 'all',
         },
-        kendo: {
+        'kendo': {
             name: 'kendo',
-            test: /[\\/]node_modules[\\/](@progress|@telerik)[\\/]/,
+            test: CHUNK_PATTERNS.kendo,
             chunks: 'all',
         },
-    });
+        'vendor': {
+            name: 'vendor',
+            test: CHUNK_PATTERNS.vendor,
+            chunks: 'all',
+            priority: -5,
+        },
+    };
 }

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

@@ -1,5 +1,5 @@
 import { Configuration } from 'webpack';
-import { BuildContext, getBundleType, getCdnPath, getOutputPath } from '../../core';
+import { BuildContext, getBundleType, getCdnPath } from '../../core';
 import { Overrides } from '../types';
 
 type Config = Configuration['output'];
@@ -11,7 +11,6 @@ export function outputConfig(context: BuildContext, _: Overrides): Result {
 
     const output: Config = {
         filename: '[name].bundle.js',
-        path: getOutputPath(context),
         clean: getClean(context),
         ...(emitExposedDependencies ? { chunkLoadingGlobal: `sharedChunk${name}` } : {}),
     };

package/src/webpack/configs/plugins/assets-manifest-plugin.ts

@@ -1,5 +1,10 @@
 import { WebpackAssetsManifest } from 'webpack-assets-manifest';
-import { BuildContext, generateExposedDependenciesMetadata, generateMetadata } from '../../../core';
+import {
+    BuildContext,
+    generateExposedDependenciesMetadata,
+    generateMetadata,
+    sortSharedCss,
+} from '../../../core';
 import { Overrides } from '../../types';
 
 interface EntryPoints {
@@ -22,13 +27,15 @@ export function assetsManifestPlugin(context: BuildContext, _: Overrides) {
             entrypoints: Record<string, { assets: Record<string, string[]> }>;
         }): EntryPoints {
             const getAssetsByType = (type: string) => {
-                return Object.values(assets.entrypoints).flatMap(
+                const assetsForType = Object.values(assets.entrypoints).flatMap(
                     ({ assets }) => assets[type] ?? []
                 );
+                // Dedupe chunks shared by entry points
+                return [...new Set(assetsForType)];
             };
 
             return {
-                css: ensureDesignSystemCssIsFirst(getAssetsByType('css')),
+                css: ensureDesignSystemCssIsFirst(context, getAssetsByType('css')),
                 js: getAssetsByType('js'),
             };
         },
@@ -43,7 +50,12 @@ export function assetsManifestPlugin(context: BuildContext, _: Overrides) {
     });
 }
 
-function ensureDesignSystemCssIsFirst(cssAssets: string[]) {
+function ensureDesignSystemCssIsFirst(context: BuildContext, cssAssets: string[]) {
+    if (context.build.emitExposedDependencies) {
+        return sortSharedCss(cssAssets);
+    }
+
+    // Put MFE's 'servicetitan' CSS chunk first to give custom CSS higher precedence
     const offset = cssAssets.findIndex(name => name.startsWith('servicetitan'));
     return offset > 0
         ? [cssAssets[offset], ...cssAssets.filter((_, index) => index !== offset)]

package/src/webpack/configs/plugins/bundle-analyser-plugin.ts

@@ -1,6 +1,6 @@
 import os from 'os';
 import path from 'path';
-import { BuildContext, getBundleType } from '../../../core';
+import { BuildContext, bundleReportFileName, bundleReportTitle } from '../../../core';
 import { Overrides } from '../../types';
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
@@ -11,29 +11,7 @@ export function bundleAnalyzerPlugin(context: BuildContext, _: Overrides) {
 
     return new BundleAnalyzerPlugin({
         analyzerMode: 'static',
-        reportFilename: path.join(os.tmpdir(), getReportFileName(context)),
-        reportTitle: getReportTitle(context),
+        reportFilename: path.join(os.tmpdir(), `${bundleReportFileName(context)}.html`),
+        reportTitle: bundleReportTitle(context),
     });
 }
-
-function getReportFileName(context: BuildContext) {
-    const type = getBundleType(context);
-    const qualifier = type ? `-${type}` : '';
-    return `${context.package.name}${qualifier}-bundle-${Date.now()}.html`;
-}
-
-function getReportTitle(context: BuildContext) {
-    const unscopedName = context.package.name.replace(/^@[^/]+\//, '');
-    const type = getBundleType(context);
-    const qualifier = type ? ` (${type})` : '';
-    return `${unscopedName}${qualifier} ${formatDate(new Date())}`;
-}
-
-function formatDate(date: Date) {
-    const yyyy = date.getFullYear();
-    const mm = date.getMonth() + 1;
-    const dd = date.getDate();
-    const HH = date.getHours();
-    const MM = date.getMinutes();
-    return `${yyyy}-${mm}-${dd} ${HH}:${MM}`;
-}

package/src/webpack/configs/plugins/define-process-env-plugin.ts

@@ -0,0 +1,10 @@
+import { DefinePlugin } from 'webpack';
+import { BuildContext, getProcessEnv } from '../../../core';
+import { Overrides } from '../../types';
+
+export function defineProcessEnvPlugin(context: BuildContext, _: Overrides) {
+    const definitions = getProcessEnv(context);
+    if (definitions) {
+        return new DefinePlugin(definitions);
+    }
+}