@servicetitan/startup 38.0.0 → 38.2.0

package/src/vite/plugins/react-refresh-plugin/react-refresh-plugin.ts

@@ -0,0 +1,144 @@
+import fs from 'fs';
+import MagicString from 'magic-string';
+import path from 'path';
+import type { Plugin } from 'vite';
+import type { BuildContext } from '../../../core';
+import { findPackages } from '../../../utils';
+
+const RUNTIME_ID = '/@react-refresh';
+const RUNTIME_HELPERS_PATH = path.join(__dirname, 'refresh-runtime.js');
+
+/* Triggers injectIntoGlobalHook (via the virtual module's side effect) before app code executes. */
+const preamble = `import "${RUNTIME_ID}";`;
+
+/*
+ * Per-module locals satisfy swc's $RefreshReg$/$RefreshSig$ calls without relying on
+ * window globals. Scoping the registration id to the served module URL ensures host and
+ * MFE servers sharing one runtime singleton cannot produce colliding refresh families.
+ */
+const modulePrelude = `import RefreshRuntime from "${RUNTIME_ID}";
+const __react_refresh_id__ = import.meta.url.replace(/[?#].*$/, "");
+var $RefreshReg$ = (type, id) => RefreshRuntime.register(type, __react_refresh_id__ + " " + id);
+var $RefreshSig$ = () => RefreshRuntime.createSignatureFunctionForTransform();\n`;
+
+/* Makes refreshable modules self-accepting and runs React Fast Refresh after safe updates. */
+const postlude = `
+import {
+    __hmr_import,
+    registerExportsForReactRefresh,
+    validateRefreshBoundaryAndEnqueueUpdate,
+} from "${RUNTIME_ID}";
+if (import.meta.hot) {
+    __hmr_import(__react_refresh_id__).then(currentExports => {
+        registerExportsForReactRefresh(__react_refresh_id__, currentExports);
+        import.meta.hot.accept(nextExports => {
+            if (!nextExports) {
+                return;
+            }
+
+            const invalidateMessage = validateRefreshBoundaryAndEnqueueUpdate(
+                __react_refresh_id__,
+                currentExports,
+                nextExports
+            );
+
+            if (invalidateMessage) {
+                import.meta.hot.invalidate(invalidateMessage);
+            }
+        });
+    });
+}`;
+
+function transformWithSourceMap(source: MagicString, id: string) {
+    return {
+        code: source.toString(),
+        map: source.generateMap({ hires: true, source: id }),
+    };
+}
+
+function normalizeSlashes(filePath: string) {
+    return filePath.replaceAll('\\', '/');
+}
+
+function getRefreshRuntimeCode() {
+    return `\
+import _RefreshRuntime from "react-refresh/runtime";
+const RefreshRuntime = window.__ReactRefreshRuntime || _RefreshRuntime;
+if (!window.__ReactRefreshRuntime) {
+    _RefreshRuntime.injectIntoGlobalHook(window);
+}
+window.__ReactRefreshRuntime = RefreshRuntime;
+${fs.readFileSync(RUNTIME_HELPERS_PATH, 'utf8')}
+export default RefreshRuntime;`;
+}
+
+/* Bridges swc's refresh markers to Vite HMR and the React Fast Refresh runtime. */
+export function reactRefreshPlugin(context: BuildContext): Plugin | undefined {
+    if (context.build.isProduction) {
+        return;
+    }
+
+    const refreshableModuleDirs = findPackages().map(
+        ({ location }) => normalizeSlashes(location) + '/'
+    );
+
+    return {
+        name: 'react-refresh',
+        enforce: 'pre',
+        /* Serve react-refresh/runtime as an ESM virtual module. */
+        resolveId(source) {
+            if (source === RUNTIME_ID) {
+                return { id: RUNTIME_ID, moduleSideEffects: true };
+            }
+        },
+        load(id) {
+            if (id === RUNTIME_ID) {
+                return { code: getRefreshRuntimeCode() };
+            }
+        },
+        /* Inject the preamble before React and app code load. */
+        transformIndexHtml() {
+            return [
+                {
+                    tag: 'script',
+                    attrs: { type: 'module' },
+                    children: preamble,
+                    injectTo: 'head-prepend',
+                },
+            ];
+        },
+        /* Handle modules compiled with swc refresh markers. */
+        transform: {
+            filter: { code: /\$RefreshReg\$|\$RefreshSig\$/ },
+            handler(code, id) {
+                const normalizedId = normalizeSlashes(id);
+                const isRefreshableModule = refreshableModuleDirs.some(dir =>
+                    normalizedId.startsWith(dir)
+                );
+
+                /* Prevent non-workspace libraries from registering duplicate refresh families. */
+                if (!isRefreshableModule) {
+                    const source = new MagicString(code);
+                    const noopPreamble =
+                        'var $RefreshReg$ = () => {};\nvar $RefreshSig$ = () => (t) => t;\n';
+                    source.prepend(noopPreamble);
+                    return transformWithSourceMap(source, id);
+                }
+
+                /*
+                 * Workspace modules always get per-module refresh locals. This satisfies
+                 * $RefreshSig$ calls in HOC-wrapped modules without relying on window globals.
+                 * Modules with registered component families additionally get an HMR postlude.
+                 */
+                const source = new MagicString(code);
+                source.prepend(modulePrelude);
+
+                if (code.includes('$RefreshReg$')) {
+                    source.append(postlude);
+                }
+
+                return transformWithSourceMap(source, id);
+            },
+        },
+    };
+}

package/src/vite/plugins/react-refresh-plugin/refresh-runtime.js

@@ -0,0 +1,113 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2019-present, Yuxi (Evan) You and Vite contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/*
+ * Adapted from https://github.com/vitejs/vite-plugin-react/blob/84693214ef8cccc3357561fe4654f401a30dab62/packages/common/refresh-runtime.js.
+ * Keep this local because the helpers are bundled into that plugin's virtual
+ * runtime and are not exposed as stable public package exports.
+ *
+ * This file is served inside the browser-only /@react-refresh virtual module.
+ * It relies on that module storing the runtime on window.__ReactRefreshRuntime.
+ */
+const refreshCallbacks = [];
+
+function getRefreshRuntime() {
+    return window.__ReactRefreshRuntime;
+}
+
+// Hook for integrations to finish async work before the debounced refresh flush.
+window.__registerBeforePerformReactRefresh = callback => {
+    refreshCallbacks.push(callback);
+};
+
+function debounce(fn, delay) {
+    let handle;
+    return () => {
+        clearTimeout(handle);
+        handle = setTimeout(fn, delay);
+    };
+}
+
+const enqueueUpdate = debounce(async () => {
+    if (refreshCallbacks.length) {
+        await Promise.all(refreshCallbacks.map(callback => callback()));
+    }
+    getRefreshRuntime().performReactRefresh();
+}, 16);
+
+function predicateOnExport(moduleExports, predicate) {
+    for (const key in moduleExports) {
+        if (key === '__esModule') {
+            continue;
+        }
+        const descriptor = Object.getOwnPropertyDescriptor(moduleExports, key);
+        if (descriptor?.get) {
+            return key;
+        }
+        if (!predicate(key, moduleExports[key])) {
+            return key;
+        }
+    }
+    return true;
+}
+
+export function registerExportsForReactRefresh(id, moduleExports) {
+    for (const key in moduleExports) {
+        if (key === '__esModule') {
+            continue;
+        }
+        const exportValue = moduleExports[key];
+        if (getRefreshRuntime().isLikelyComponentType(exportValue)) {
+            getRefreshRuntime().register(exportValue, `${id} export ${key}`);
+        }
+    }
+}
+
+export function validateRefreshBoundaryAndEnqueueUpdate(id, prevExports, nextExports) {
+    if (predicateOnExport(prevExports, key => key in nextExports) !== true) {
+        return 'Could not Fast Refresh (export removed)';
+    }
+    if (predicateOnExport(nextExports, key => key in prevExports) !== true) {
+        return 'Could not Fast Refresh (new export)';
+    }
+
+    let hasExports = false;
+    const allExportsAreComponentsOrUnchanged = predicateOnExport(nextExports, (key, value) => {
+        hasExports = true;
+        if (getRefreshRuntime().isLikelyComponentType(value)) {
+            return true;
+        }
+        return prevExports[key] === nextExports[key];
+    });
+
+    if (hasExports && allExportsAreComponentsOrUnchanged === true) {
+        enqueueUpdate();
+    } else {
+        return `Could not Fast Refresh ("${allExportsAreComponentsOrUnchanged}" export is incompatible).`;
+    }
+}
+
+export function __hmr_import(module) {
+    return import(/* @vite-ignore */ module);
+}

package/src/vite/plugins/shared-dependencies-plugin/__tests__/shared-dependencies-plugin.test.ts

@@ -14,7 +14,7 @@ jest.mock('../../../../core', () => ({
 }));
 
 describe(sharedDependenciesPlugin.name, () => {
-    const CSS_VIRTUAL_PREFIX = '\0SHARED_DEPENDENCY_CSS';
+    const CSS_VIRTUAL_PREFIX = '\0shared-dependencies:css:';
     const mockDependencies: Record<string, string> = {
         'react': 'globalReact',
         '@scope/lib': 'globalScopeLib',
@@ -32,7 +32,7 @@ describe(sharedDependenciesPlugin.name, () => {
     const subject = () => sharedDependenciesPlugin(options);
 
     test('returns plugin with correct name', () => {
-        expect(subject().name).toBe('shared-dependencies');
+        expect(subject().name).toBe('st:shared-dependencies');
     });
 
     test('enforces pre', () => {
@@ -204,6 +204,21 @@ describe(sharedDependenciesPlugin.name, () => {
         });
     });
 
+    describe('load filter', () => {
+        const subject = () => {
+            const plugin = sharedDependenciesPlugin(options);
+            return (plugin.load as { filter: { id: RegExp } }).filter.id;
+        };
+
+        test('matches the CSS virtual module ids', () => {
+            expect(subject().test(`${CSS_VIRTUAL_PREFIX}design-system`)).toBe(true);
+        });
+
+        test('ignores ordinary module ids', () => {
+            expect(subject().test('/src/app.tsx')).toBe(false);
+        });
+    });
+
     describe('load', () => {
         const cssName = 'design-system';
         const cssImports = ['tokens.css', 'fonts.css'];
@@ -217,29 +232,19 @@ describe(sharedDependenciesPlugin.name, () => {
 
         const subject = () => {
             const plugin = sharedDependenciesPlugin(options);
-            return (plugin.load as Function).call(plugin, id);
-        };
-
-        const itReturnsUndefined = () => {
-            test('returns undefined', () => {
-                expect(subject()).toBeUndefined();
-            });
+            return (plugin.load as { handler: Function }).handler.call({}, id);
         };
 
         test('returns import statements', () => {
             expect(subject()).toBe(cssImports.map(p => `import '${p}';`).join('\n'));
         });
 
-        describe('when id is not a CSS virtual module', () => {
-            beforeEach(() => (id = ''));
-
-            itReturnsUndefined();
-        });
-
         describe('with unknown CSS module', () => {
             beforeEach(() => (id = CSS_VIRTUAL_PREFIX + 'unknown'));
 
-            itReturnsUndefined();
+            test('returns undefined', () => {
+                expect(subject()).toBeUndefined();
+            });
         });
     });
 

package/src/vite/plugins/shared-dependencies-plugin/shared-dependencies-plugin.ts

@@ -20,7 +20,8 @@ export function sharedDependenciesPlugin({
     css,
     metadataDir,
 }: SharedDependenciesPluginOptions): Plugin {
-    const CSS_VIRTUAL_PREFIX = '\0SHARED_DEPENDENCY_CSS';
+    const CSS_VIRTUAL_PREFIX = '\0shared-dependencies:css:';
+    const CSS_VIRTUAL_ID_PATTERN = new RegExp(`^${CSS_VIRTUAL_PREFIX}`);
 
     const dependencyNames = Object.keys(dependencies);
     const dependencySet = new Set(dependencyNames);
@@ -29,7 +30,7 @@ export function sharedDependenciesPlugin({
     let isProduction = false;
 
     return {
-        name: 'shared-dependencies',
+        name: 'st:shared-dependencies',
         enforce: 'pre',
 
         config(_, env) {
@@ -100,16 +101,16 @@ export function sharedDependenciesPlugin({
             }
         },
 
-        load(id: string) {
-            if (!id.startsWith(CSS_VIRTUAL_PREFIX)) {
-                return;
-            }
-            const name = id.slice(CSS_VIRTUAL_PREFIX.length);
-            const imports = cssEntries[name];
-            if (!imports) {
-                return;
-            }
-            return imports.map(p => `import '${p}';`).join('\n');
+        load: {
+            filter: { id: CSS_VIRTUAL_ID_PATTERN },
+            handler(id: string) {
+                const name = id.slice(CSS_VIRTUAL_PREFIX.length);
+                const imports = cssEntries[name];
+                if (!imports) {
+                    return;
+                }
+                return imports.map(p => `import '${p}';`).join('\n');
+            },
         },
 
         generateBundle(_options, bundle) {

package/src/vite/plugins/style-urls-plugin.ts

@@ -7,7 +7,7 @@ export function styleUrlsPlugin(context: BuildContext): Plugin | undefined {
     const { isWebComponent } = context.package;
     if (isWebComponent && isProduction) {
         return {
-            name: 'style-urls',
+            name: 'st:style-urls',
             transformIndexHtml: {
                 order: 'post',
                 handler(html, ctx) {

package/src/vite/plugins/virtual-modules-plugin.ts

@@ -3,7 +3,8 @@ import type { Plugin } from 'vite';
 import { BuildContext, virtualModules } from '../../core';
 
 export function virtualModulesPlugin(context: BuildContext): Plugin | undefined {
-    const VIRTUAL_PREFIX = '\0VIRTUAL';
+    const VIRTUAL_PREFIX = '\0virtual-modules:';
+    const VIRTUAL_ID_PATTERN = new RegExp(`^${VIRTUAL_PREFIX}`);
 
     const { destination } = context.package;
 
@@ -24,7 +25,7 @@ export function virtualModulesPlugin(context: BuildContext): Plugin | undefined
     }
 
     return {
-        name: 'virtual-modules',
+        name: 'st:virtual-modules',
         resolveId(source, importer) {
             if (pluginModules[source]) {
                 return VIRTUAL_PREFIX + source;
@@ -36,11 +37,11 @@ export function virtualModulesPlugin(context: BuildContext): Plugin | undefined
                 }
             }
         },
-        load(id) {
-            if (id.startsWith(VIRTUAL_PREFIX)) {
-                const idNoPrefix = id.slice(VIRTUAL_PREFIX.length);
-                return pluginModules[idNoPrefix];
-            }
+        load: {
+            filter: { id: VIRTUAL_ID_PATTERN },
+            handler(id) {
+                return pluginModules[id.slice(VIRTUAL_PREFIX.length)];
+            },
         },
     };
 }

package/src/vite/plugins/window-externals-plugin.ts

@@ -0,0 +1,94 @@
+import type { Plugin } from 'vite';
+
+/**
+ * Maps each `window` global to the import(s) that resolve to it. The key is the `window` global
+ * (`jQuery` names `window.jQuery`). Every value matches specifiers with a regex:
+ *
+ * - `RegExp` resolves matching imports to `window.<global>` (`/^jquery$/`, or
+ *   `/^(moment|moment-timezone)$/` to cover several specifiers)
+ * - `{ match, exports }` resolves imports to `window.<global>.<export>`, for
+ *    packages that have named imports (e.g., (`import { formatMoney } from 'accounting'`))
+ * - `{ match, member }` resolves imports to `window.<global>[member(specifier)]`, deriving the key from
+ *   the function result. For example `{ match: /^@arcgis\/core\//, member: s => s.split('/').pop() }`
+ *   maps `@arcgis/core/views/MapView` to `window.arcgis["MapView"]`.
+ */
+export type WindowExternals = Record<
+    string,
+    | RegExp
+    | {
+          match: RegExp;
+          exports?: string[];
+      }
+    | {
+          match: RegExp;
+          member?: (specifier: string) => string | false | null | undefined;
+      }
+>;
+
+interface Binding {
+    expression: string;
+    exports?: string[];
+}
+
+interface Entry {
+    match: RegExp;
+    bind: (specifier: string) => Binding;
+}
+
+const VIRTUAL_PREFIX = '\0window-externals:';
+const VIRTUAL_ID_PATTERN = new RegExp(`^${VIRTUAL_PREFIX}`);
+
+/*
+ * Uses a global the host already puts on `window` instead of bundling the library, like webpack's
+ * `externals` with externalsType `var`/`window`. Vite/Rolldown offers no built-in way to do this
+ * for ES module builds (its `output.globals` maps externals to globals only for umd/iife output).
+ * This plugin replaces matched imports with a module that reads the global.
+ */
+export function windowExternalsPlugin(externals: WindowExternals): Plugin {
+    const entries: Entry[] = Object.entries(externals).map(([global, value]) => {
+        if (value instanceof RegExp) {
+            return { match: value, bind: () => ({ expression: `window.${global}` }) };
+        }
+        const { match } = value;
+        const exports = 'exports' in value ? value.exports : undefined;
+        const member = 'member' in value ? value.member : undefined;
+        return {
+            match,
+            bind: specifier => {
+                const key = member?.(specifier);
+                const expression = key
+                    ? `window.${global}[${JSON.stringify(key)}]`
+                    : `window.${global}`;
+                return { expression, exports };
+            },
+        };
+    });
+
+    const bind = (specifier: string): Binding | null =>
+        entries.find(entry => entry.match.test(specifier))?.bind(specifier) ?? null;
+
+    return {
+        name: 'st:window-externals',
+        enforce: 'pre',
+        resolveId: {
+            filter: { id: entries.map(entry => entry.match) },
+            handler(source) {
+                return VIRTUAL_PREFIX + source;
+            },
+        },
+        load: {
+            filter: { id: VIRTUAL_ID_PATTERN },
+            handler(id) {
+                const binding = bind(id.slice(VIRTUAL_PREFIX.length))!;
+                if (!binding.exports?.length) {
+                    return `export default ${binding.expression};`;
+                }
+                return [
+                    `const _m = ${binding.expression};`,
+                    'export default _m;',
+                    ...binding.exports.map(name => `export const ${name} = _m.${name};`),
+                ].join('\n');
+            },
+        },
+    };
+}

package/src/webpack/__tests__/bundle-webpack.test.ts

@@ -18,6 +18,7 @@ import {
     webpackDevConfigFileName,
     webpackProdConfigFileName,
 } from '../create-webpack-config';
+import { normalizeProxyConfig } from '../utils';
 
 jest.mock('fs', () => fs);
 jest.mock('portfinder');
@@ -36,6 +37,10 @@ jest.mock('../create-webpack-config', () => ({
     ...jest.requireActual('../create-webpack-config'),
     createWebpackConfig: jest.fn(),
 }));
+jest.mock('../utils', () => ({
+    ...jest.requireActual('../utils'),
+    normalizeProxyConfig: jest.fn(),
+}));
 
 describe('[startup] Cli Utils', () => {
     const pkg = createPackage({});
@@ -461,6 +466,33 @@ describe('[startup] Cli Utils', () => {
             });
         });
 
+        describe('with a proxy config', () => {
+            const proxy = [{ context: ['/api'], target: 'http://localhost:9000' }];
+            const normalizedProxy = [
+                { context: ['/api'], target: 'http://localhost:9000', on: {} },
+            ];
+
+            beforeEach(() => {
+                jest.mocked(createWebpackConfig).mockReturnValue({ devServer: { proxy } });
+                jest.mocked(normalizeProxyConfig).mockReturnValue(normalizedProxy);
+            });
+
+            test('normalizes the proxy config', async () => {
+                await subject();
+
+                expect(normalizeProxyConfig).toHaveBeenCalledWith(proxy);
+            });
+
+            test('constructs WebpackDevServer with the normalized proxy config', async () => {
+                await subject();
+
+                expect(WebpackDevServer).toHaveBeenCalledWith(
+                    expect.objectContaining({ proxy: normalizedProxy }),
+                    compiler
+                );
+            });
+        });
+
         describe('with "emitExposedDependencies"', () => {
             beforeEach(() => (options = { emitExposedDependencies: true }));
 

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

@@ -11,7 +11,7 @@ import { WebpackAssetsManifest } from 'webpack-assets-manifest';
 import RemoveEmptyScriptsPlugin from 'webpack-remove-empty-scripts';
 import VirtualModulesPlugin from 'webpack-virtual-modules';
 import yargs from 'yargs';
-import { getLaunchDarklySdkVersion } from '../../core';
+import { CHUNK_PATTERNS, getLaunchDarklySdkVersion } from '../../core';
 import {
     getFolders,
     getPackageData,
@@ -350,6 +350,32 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
                         cacheGroups.servicetitan.priority ?? 0
                     );
                 });
+
+                describe.each(Object.keys(CHUNK_PATTERNS))(
+                    'optimization.splitChunks.cacheGroups.%s',
+                    name => {
+                        const cacheGroup = () =>
+                            (subject().optimization!.splitChunks as any).cacheGroups[name];
+
+                        test('excludes the design-system chunk', () => {
+                            expect(cacheGroup().chunks({ name: 'design-system' })).toBe(false);
+                        });
+
+                        test('claims other chunks', () => {
+                            expect(cacheGroup().chunks({ name: 'foo' })).toBe(true);
+                        });
+
+                        describe('when application does not share design system', () => {
+                            beforeEach(() => {
+                                jest.mocked(loadSharedDependencies).mockReturnValue({});
+                            });
+
+                            test('claims all chunks', () => {
+                                expect(cacheGroup().chunks).toBe('all');
+                            });
+                        });
+                    }
+                );
             });
 
             test('configures "output.chunkLoadingGlobal"', () => {

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

@@ -1,8 +1,8 @@
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import { fs, vol } from 'memfs';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import MinimizerPlugin from 'minimizer-webpack-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';
@@ -31,7 +31,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('minimizer-webpack-plugin', () => jest.fn());
 jest.mock('webpack', () => ({
     DefinePlugin: jest.fn(),
     IgnorePlugin: jest.fn(),
@@ -111,7 +111,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(MinimizerPlugin).mockImplementation(mockPlugIn('MinimizerPlugin'));
         jest.mocked(WebpackAssetsManifest).mockImplementation(mockPlugIn('WebpackAssetsManifest'));
         jest.mocked(yargs).mockImplementation(() => ({ argv: {} }) as any);
 
@@ -497,12 +497,20 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
             });
 
             test('configures "output.uniqueName"', () => {
-                expect(subject().output?.uniqueName).toEqual(options.name);
+                expect(subject().output?.uniqueName).toEqual(`${options.name}-full`);
+            });
+
+            describe('when light option is set to true', () => {
+                beforeEach(() => (options.light = true));
+
+                test('configures "output.uniqueName" distinctly from the full bundle', () => {
+                    expect(subject().output?.uniqueName).toEqual(`${options.name}-light`);
+                });
             });
 
             test('enables terser compress and mangle', () => {
                 expect(subject().optimization?.minimizer).toContainEqual(
-                    new TerserPlugin({ terserOptions: { compress: true, mangle: true } })
+                    new MinimizerPlugin({ minimizerOptions: { compress: true, mangle: true } })
                 );
             });
 
@@ -512,6 +520,10 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
                 test('omits optimization.runtimeChunk', () => {
                     expect(subject().optimization?.runtimeChunk).toBeUndefined();
                 });
+
+                test('configures "output.uniqueName" distinctly from the full bundle', () => {
+                    expect(subject().output?.uniqueName).toEqual(`${options.name}-headless`);
+                });
             });
         });
     });