@servicetitan/startup 36.0.0 → 36.1.1-beta.1

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

@@ -10,20 +10,19 @@ 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 {
     getFolders,
     getPackageData,
     getPackageDependencyVersion,
     getPackages,
     getTsConfig,
-    isCustomStyleRules,
     isExposeSharedDependencies,
     loadSharedDependencies,
     log,
     pick,
 } from '../../utils';
 import { miniCssPluginStyleRules } from '../__mocks__';
-import { getLaunchDarklySdkVersion } from '../configs/utils/get-launchdarkly-sdk-version';
 import { createWebpackConfig } from '../index';
 import { getModuleEntryPath } from '../utils';
 
@@ -49,11 +48,17 @@ jest.mock('../../utils', () => ({
     getPackageDependencyVersion: jest.fn(),
     getPackages: jest.fn(),
     getTsConfig: jest.fn(),
-    isCustomStyleRules: jest.fn(),
     isExposeSharedDependencies: jest.fn(),
     loadSharedDependencies: jest.fn(),
 }));
-jest.mock('../configs/utils/get-launchdarkly-sdk-version');
+/*
+ * Mock get-version (not core) because internal modules import from get-version
+ * directly. Mocking the core barrel doesn't intercept those internal imports.
+ */
+jest.mock('../../core/get-version', () => ({
+    ...jest.requireActual('../../core/get-version'),
+    getLaunchDarklySdkVersion: jest.fn(),
+}));
 jest.mock('../utils', () => ({
     ...jest.requireActual('../utils'),
     getCallerFile: jest.fn(),
@@ -90,7 +95,10 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
     }
 
     beforeEach(() => {
-        overrides = { plugins: { MiniCssExtractPlugin: { attributes: { foo: 'bar' } } } };
+        overrides = {
+            configuration: { mode: 'development' },
+            plugins: { MiniCssExtractPlugin: { attributes: { foo: 'bar' } } },
+        };
         options = { name: 'app' };
 
         jest.resetAllMocks();
@@ -203,7 +211,13 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
         });
 
         describe('when package has custom style rules', () => {
-            beforeEach(() => jest.mocked(isCustomStyleRules).mockReturnValue(true));
+            beforeEach(() => {
+                vol.fromJSON({
+                    'package.json': JSON.stringify({
+                        cli: { webpack: { 'custom-style-rules': true } },
+                    }),
+                });
+            });
 
             test('does not configure MiniCssExtractPlugin plugin', () => {
                 expect(subject().plugins).not.toContainEqual(
@@ -285,9 +299,9 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
                 expect(plugins).toContainEqual(
                     new VirtualModulesPlugin({
                         [(entry as EntryObject)?.['design-system'] as string]: [
-                            `@import '~@servicetitan/tokens/core/tokens.css';`,
-                            `@import '~@servicetitan/anvil-fonts/dist/css/anvil-fonts.css';`,
-                            `@import '~@servicetitan/design-system/dist/system.min.css';`,
+                            `@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'),
                     })
                 );

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

@@ -6,7 +6,7 @@ import { DefinePlugin } from 'webpack';
 import { WebpackAssetsManifest } from 'webpack-assets-manifest';
 import VirtualModulesPlugin from 'webpack-virtual-modules';
 import yargs from 'yargs';
-import { webpackDevConfigFileName, webpackProdConfigFileName } from '../../cli/utils';
+import { generateMetadata } from '../../core';
 import {
     getFolders,
     getPackageData,
@@ -16,7 +16,7 @@ import {
     isWebComponent,
 } from '../../utils';
 import { miniCssPluginStyleRules } from '../__mocks__';
-import { generateMetadata } from '../configs/utils';
+import { webpackDevConfigFileName, webpackProdConfigFileName } from '../create-webpack-config';
 import { createWebpackConfig } from '../index';
 import { getCallerFile, splitByEntry } from '../utils';
 
@@ -42,7 +42,7 @@ jest.mock('../../utils', () => ({
     isLegacyRoot: jest.fn(),
     isWebComponent: jest.fn(),
 }));
-jest.mock('../configs/utils/generate-metadata');
+jest.mock('../../core/metadata/generate-metadata');
 jest.mock('../utils', () => ({
     ...jest.requireActual('../utils'),
     getCallerFile: jest.fn(),
@@ -57,22 +57,22 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
     const tsConfig = 'tsconfig.build.json';
     const designSystemPath = () => path.join(process.cwd(), `${destination}/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';`,
+        `@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(), `${destination}/index`);
     const indexCode = ({
-        embed = false,
+        light = false,
         legacyRoot = false,
         designSystem,
-    }: { embed?: boolean; legacyRoot?: boolean; designSystem?: boolean } = {}) =>
+    }: { light?: boolean; legacyRoot?: boolean; designSystem?: boolean } = {}) =>
         [
-            ...(designSystem ? [`require('./design-system.css');`] : []),
+            ...(designSystem ? [`import './design-system.css';`] : []),
             `import { register } from '@servicetitan/web-components';`,
             `import { App } from './app';`,
-            `register(App, ${embed}, { legacyRoot: ${legacyRoot}, sharedDependenciesNames: ${JSON.stringify(Object.keys(sharedDependencies))} });`,
+            `register(App, ${light}, { legacyRoot: ${legacyRoot}, sharedDependenciesNames: ${JSON.stringify(Object.keys(sharedDependencies))} });`,
         ].join('\n');
 
     let overrides: Parameters<typeof createWebpackConfig>[0];
@@ -86,6 +86,7 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
 
     beforeEach(() => {
         overrides = {
+            configuration: { mode: 'development' },
             plugins: {
                 HtmlWebpackPlugin: { favicon: 'foo' },
                 MiniCssExtractPlugin: { attributes: { foo: 'bar' } },
@@ -331,13 +332,13 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
             });
         });
 
-        describe('when embed option is set to true', () => {
-            beforeEach(() => (options.embed = true));
+        describe('when light option is set to true', () => {
+            beforeEach(() => (options.light = true));
 
-            test(`omits design system and registers App with embed set to true`, () => {
+            test(`omits design system and registers App with light set to true`, () => {
                 expect(subject().plugins).toContainEqual(
                     new VirtualModulesPlugin({
-                        [indexPath()]: indexCode({ designSystem: false, embed: true }),
+                        [indexPath()]: indexCode({ designSystem: false, light: true }),
                     })
                 );
             });
@@ -366,7 +367,7 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
                     expect(subject().plugins).toContainEqual(
                         new VirtualModulesPlugin({
                             [designSystemPath()]: designSystemCode,
-                            [indexPath()]: indexCode({ designSystem: true, embed: true }),
+                            [indexPath()]: indexCode({ designSystem: true, light: true }),
                         })
                     );
                 });
@@ -380,7 +381,7 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
                 expect(subject().plugins).toContainEqual(
                     new VirtualModulesPlugin({
                         [indexPath()]: [
-                            "import { registerHeadless } from '@servicetitan/web-components';",
+                            "import { registerHeadless } from '@servicetitan/web-components/register-headless';",
                             "import { connectedCallback, disconnectedCallback } from './headless';",
                             'registerHeadless(connectedCallback, disconnectedCallback);',
                         ].join('\n'),

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

@@ -22,7 +22,6 @@ import {
     getPackages,
     getTsConfig,
     getWebpackConfiguration,
-    isCustomStyleRules,
     isDevServerDisabled,
     isWebComponent,
     loadSharedDependencies,
@@ -60,7 +59,6 @@ jest.mock('../../utils', () => ({
     getPackages: jest.fn(),
     getTsConfig: jest.fn(),
     getWebpackConfiguration: jest.fn(),
-    isCustomStyleRules: jest.fn(),
     isDevServerDisabled: jest.fn(),
     isExposeSharedDependencies: jest.fn(),
     isWebComponent: jest.fn(),
@@ -108,6 +106,7 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
         argv = {};
         packages = [];
         overrides = {
+            configuration: { mode: 'development' },
             plugins: {
                 HtmlWebpackPlugin: { favicon: 'foo' },
                 MiniCssExtractPlugin: { attributes: { foo: 'bar' } },
@@ -405,7 +404,9 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
     });
 
     describe('when package has custom style rules', () => {
-        beforeEach(() => jest.mocked(isCustomStyleRules).mockReturnValue(true));
+        beforeEach(() => {
+            configuration.webpack = { 'custom-style-rules': true };
+        });
 
         Object.entries(styleRules).forEach(([extension, rule]) => {
             test(`omits "${extension}" rules`, () => {
@@ -472,10 +473,11 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
         );
     });
 
-    test('configures IgnorePlugin plugin', () => {
-        expect(subject().plugins).toContainEqual(
-            new IgnorePlugin({ checkResource: expect.any(Function) })
+    test('configures ReplaceOptionalDependenciesPlugin', () => {
+        const plugin = subject().plugins?.find(
+            p => p?.constructor.name === 'ReplaceOptionalDependenciesPlugin'
         );
+        expect(plugin).toBeDefined();
     });
 
     describe('when buildStat option is set to true', () => {
@@ -526,8 +528,8 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
                 );
             });
 
-            describe('when embed option is set to true', () => {
-                beforeEach(() => setOptions({ embed: true }));
+            describe('when light option is set to true', () => {
+                beforeEach(() => setOptions({ light: true }));
 
                 test('adds "light" to reportFilename and reportTitle', () => {
                     expect(subject().plugins).toContainEqual(

package/src/webpack/bundle-webpack.ts

@@ -0,0 +1,107 @@
+import { getPortPromise } from 'portfinder';
+import webpack, { Configuration } from 'webpack';
+import WebpackDevServer from 'webpack-dev-server';
+import { isDevServerDisabled, isExposeSharedDependencies, isWebComponent, log } from '../utils';
+import { createWebpackConfigs } from './create-webpack-configs';
+
+interface Options {
+    buildStat?: boolean;
+    codeCoverage?: boolean;
+    config?: string;
+    emitExposedDependencies?: boolean;
+    useWatchConfig?: boolean;
+    watch?: boolean;
+}
+
+export async function bundleWebpack(options: Options = {}) {
+    const { emitExposedDependencies, watch } = options;
+
+    if (emitExposedDependencies) {
+        if (watch) {
+            throw new Error('cannot bundle exposed dependencies in watch mode');
+        }
+        if (!isExposeSharedDependencies()) {
+            return;
+        }
+    }
+
+    log.info(`Bundling ${emitExposedDependencies ? 'exposed dependencies' : 'package'}...`);
+
+    const { full, light, headless } = createWebpackConfigs(options);
+
+    // Standalone app — only the full config is needed
+    if (!isWebComponent()) {
+        return watch ? runDevServer(full) : run(full);
+    }
+
+    if (watch) {
+        return Promise.all([
+            runDevServer(full),
+            light && runWatch(light),
+            headless && runWatch(headless),
+        ]);
+    }
+
+    return Promise.all([run(full), light && run(light), headless && run(headless)]);
+}
+
+async function runDevServer(config: Configuration) {
+    return isDevServerDisabled() ? runWatch(config) : runServe(config);
+}
+
+async function run(config: Configuration) {
+    const compiler = createWebpackCompiler(config);
+
+    const stats = await new Promise<webpack.Stats>((resolve, reject) => {
+        compiler.run((error, stats) => {
+            if (!stats || error) {
+                return reject(error ?? new Error('Something went wrong.'));
+            }
+
+            if (stats.hasErrors()) {
+                return reject(new Error(stats.toString('errors-only')));
+            }
+
+            compiler.close(() => resolve(stats));
+        });
+    });
+
+    process.stdout.write(stats.toString(config.stats) + '\n');
+}
+
+async function runServe({ devServer = {}, ...config }: Configuration) {
+    const compiler = createWebpackCompiler(config);
+    const host = devServer.host ?? 'localhost';
+    const port = await getPortPromise({
+        port: Number(process.env.PORT) || Number(devServer.port) || 8080,
+        host,
+    });
+
+    return new Promise<void>((_0, reject) => {
+        const server = new WebpackDevServer({ ...devServer, host, port }, compiler);
+        server.startCallback(e => {
+            if (e) {
+                server.stopCallback(() => {
+                    reject(e);
+                });
+            }
+        });
+    });
+}
+
+async function runWatch(config: Configuration) {
+    const compiler = createWebpackCompiler(config);
+    return new Promise<void>((_0, reject) => {
+        const watching = compiler.watch({}, e => {
+            if (e) {
+                watching?.close(() => {
+                    reject(e);
+                });
+            }
+        });
+    });
+}
+
+function createWebpackCompiler(config: Configuration) {
+    return webpack(config);
+}

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

@@ -1,8 +1,9 @@
 import { Configuration } from 'webpack';
-import { Context, Overrides } from './types';
+import { BuildContext } from '../../core';
+import { Overrides } from '../types';
 
 type Result = Pick<Configuration, 'amd'>;
 
-export function amdConfig(_context: Context, _: Overrides): Result {
+export function amdConfig(_context: BuildContext, _: Overrides): Result {
     return { amd: false };
 }

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

@@ -1,16 +1,17 @@
 import fs from 'fs';
 import path from 'path';
 import { Configuration } from 'webpack';
+import { BuildContext } from '../../core';
 import { findUp } from '../../utils';
-import { Context, Overrides } from './types';
+import { Overrides } from '../types';
 
 type Config = Configuration['cache'];
 type Result = Pick<Configuration, 'cache' | 'infrastructureLogging'> | undefined;
 
 const CACHE_VERSION = '1';
 
-export function cacheConfig(context: Context, _overrides: Overrides): Result {
-    const { emitExposedDependencies } = context;
+export function cacheConfig(context: BuildContext, _overrides: Overrides): Result {
+    const { emitExposedDependencies } = context.build;
     if (!emitExposedDependencies) {
         return;
     }

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

@@ -1,21 +1,19 @@
 import fs from 'fs';
 import path from 'path';
 import { Configuration } from 'webpack';
-import {
-    allowedWebpackDevServerOptions,
-    getWebpackConfiguration,
-    isDevServerDisabled,
-    log,
-    pick,
-} from '../../utils';
+import { allowedWebpackDevServerOptions, isDevServerDisabled, log, pick } from '../../utils';
+import { Overrides, WebpackBuildContext } from '../types';
 import { statsConfig } from './stats-config';
-import { Context, Overrides } from './types';
 
 type DevServerConfig = NonNullable<Configuration['devServer']>;
 type Result = Pick<Configuration, 'devServer'> | undefined;
 
-export function devServerConfig(context: Context, overrides: Overrides): Result {
-    if (context.isProduction || context.emitExposedDependencies || isDevServerDisabled()) {
+export function devServerConfig(context: WebpackBuildContext, overrides: Overrides): Result {
+    if (
+        context.build.isProduction ||
+        context.build.emitExposedDependencies ||
+        isDevServerDisabled()
+    ) {
         return;
     }
 
@@ -40,7 +38,7 @@ export function devServerConfig(context: Context, overrides: Overrides): Result
 
             return middlewares;
         },
-        ...getDevServerConfig(),
+        ...getDevServerConfig(context),
     };
 
     /* istanbul ignore next: debug only */
@@ -48,12 +46,13 @@ export function devServerConfig(context: Context, overrides: Overrides): Result
     return { devServer };
 }
 
-function getDevServerConfig() {
-    const webpack = getWebpackConfiguration();
+function getDevServerConfig(context: WebpackBuildContext) {
+    const { bundlerConfig } = context;
+
     /* istanbul ignore next: debug only */
-    log.debug('dev-server-config', () => JSON.stringify({ webpack }, null, 2));
+    log.debug('dev-server-config', () => JSON.stringify({ webpack: bundlerConfig }, null, 2));
 
-    const result = pick(webpack, allowedWebpackDevServerOptions);
+    const result = pick(bundlerConfig, allowedWebpackDevServerOptions);
     if (typeof result.proxy === 'string') {
         if (fs.existsSync(result.proxy)) {
             result.proxy = require(path.resolve(result.proxy));
@@ -63,7 +62,7 @@ function getDevServerConfig() {
     }
 
     if (result.static === undefined) {
-        const contentBase = webpack.contentBase;
+        const contentBase = bundlerConfig.contentBase;
         if (contentBase !== undefined) {
             log.warning(CONTENT_BASE_DEPRECATION_WARNING);
             if (typeof contentBase !== 'number') {
@@ -74,7 +73,7 @@ function getDevServerConfig() {
         }
     }
 
-    return { ...result, ...webpack.devServer } as Partial<DevServerConfig>;
+    return { ...result, ...bundlerConfig.devServer } as Partial<DevServerConfig>;
 }
 
 const CONTENT_BASE_DEPRECATION_WARNING = `

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

@@ -1,11 +1,12 @@
 import { Configuration } from 'webpack';
-import { Context, Overrides } from './types';
+import { BuildContext } from '../../core';
+import { Overrides } from '../types';
 
 type Config = Configuration['devtool'];
 type Result = Pick<Configuration, 'devtool'>;
 
-export function devtoolConfig(context: Context, _: Overrides): Result {
-    const { isProduction } = context;
+export function devtoolConfig(context: BuildContext, _: Overrides): Result {
+    const { isProduction } = context.build;
     let devtool: Config;
 
     if (isProduction) {

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

@@ -1,29 +1,30 @@
 import fs from 'fs';
 import { Configuration } from 'webpack';
+import { BuildContext, getDesignSystemPath } from '../../core';
+import { Overrides } from '../types';
 import { getModuleEntryPath } from '../utils';
-import { getDesignSystemPath } from './plugins';
-import { Context, Overrides } from './types';
 
 type Config = Configuration['entry'];
 type Result = Pick<Configuration, 'entry'>;
 
-export function entryConfig(context: Context, _: Overrides): Result {
-    const entry: Config = context.emitExposedDependencies
+export function entryConfig(context: BuildContext, _: Overrides): Result {
+    const entry: Config = context.build.emitExposedDependencies
         ? getSharedEntryPoints(context)
         : getIndexEntryPoint(context);
 
     return { entry };
 }
 
-function getIndexEntryPoint({ source, destination }: Context): Config {
+function getIndexEntryPoint(context: BuildContext): Config {
+    const { source, destination } = context.package;
     const index = fs.existsSync(`./${source}/index.js`)
         ? `./${source}/index`
         : `./${destination}/index`;
     return { main: [index] };
 }
 
-function getSharedEntryPoints(context: Context): Config {
-    const { sharedDependencies } = context;
+function getSharedEntryPoints(context: BuildContext): Config {
+    const { sharedDependencies } = context.package;
     return {
         shared: Object.keys(sharedDependencies).map(getModuleEntryPath),
         ...(sharedDependencies['@servicetitan/design-system']

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

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

package/src/webpack/configs/index.ts

@@ -11,5 +11,4 @@ export * from './plugins-config';
 export * from './resolve-config';
 export * from './rules-config';
 export * from './stats-config';
-export type * from './types';
 export * from './watch-options-config';

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

@@ -1,7 +1,8 @@
-import { Context } from '../types';
+import { BuildContext } from '../../../core';
 import { LoaderOptions } from './types';
 
-export function cssLoader({ isProduction }: Context, { esModule }: LoaderOptions = {}) {
+export function cssLoader(context: BuildContext, { esModule }: LoaderOptions = {}) {
+    const { isProduction } = context.build;
     const loader = 'css-loader';
     return esModule
         ? {

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

@@ -1,11 +1,10 @@
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import { Context } from '../types';
+import { BuildContext } from '../../../core';
 import { LoaderOptions } from './types';
 
-export function styleLoader(
-    { isProduction, isWebComponent, emitExposedDependencies }: Context,
-    { esModule }: LoaderOptions = {}
-) {
+export function styleLoader(context: BuildContext, { esModule }: LoaderOptions = {}) {
+    const { isProduction, emitExposedDependencies } = context.build;
+    const { isWebComponent } = context.package;
     const loader =
         isProduction || isWebComponent || emitExposedDependencies
             ? MiniCssExtractPlugin.loader

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

@@ -1,11 +1,11 @@
 import { Configuration } from 'webpack';
+import { Overrides, WebpackBuildContext } from '../types';
 import { rulesConfig } from './rules-config';
-import { Context, Overrides } from './types';
 
 type Config = Configuration['module'];
 type Result = Pick<Configuration, 'module'>;
 
-export function moduleConfig(context: Context, overrides: Overrides): Result {
+export function moduleConfig(context: WebpackBuildContext, overrides: Overrides): Result {
     const module: Config = { ...rulesConfig(context, overrides) };
 
     return { module };

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

@@ -1,14 +1,14 @@
 import CssMinimizerWebpackPlugin from 'css-minimizer-webpack-plugin';
 import TerserPlugin from 'terser-webpack-plugin';
 import { Configuration } from 'webpack';
-import { Context, Overrides } from './types';
+import { Overrides, WebpackBuildContext } from '../types';
 
 type Config = Configuration['optimization'];
 type ConfigWithCacheGroups = Config & { splitChunks: { cacheGroups: Record<string, any> } };
 type Result = Pick<Configuration, 'optimization'>;
 
-export function optimizationConfig(context: Context, _: Overrides): Result {
-    const { emitExposedDependencies, headless, isProduction } = context;
+export function optimizationConfig(context: WebpackBuildContext, _: Overrides): Result {
+    const { headless, isProduction, emitExposedDependencies } = context.build;
 
     const optimization: ConfigWithCacheGroups = {
         chunkIds: isProduction ? 'deterministic' : 'named',
@@ -30,14 +30,16 @@ export function optimizationConfig(context: Context, _: Overrides): Result {
     return { optimization };
 }
 
-function minimizeConfig(optimization: ConfigWithCacheGroups, context: Context) {
-    const { isProduction, codeCoverage } = context;
+function minimizeConfig(optimization: ConfigWithCacheGroups, context: WebpackBuildContext) {
+    const { isProduction } = context.build;
+    const { codeCoverage } = context.options;
+    const { minify } = context.bundlerConfig;
     if (!isProduction) {
         return;
     }
 
-    const minifyJs = context.minify?.js ?? true;
-    const minifyCss = context.minify?.css ?? true;
+    const minifyJs = minify?.js ?? true;
+    const minifyCss = minify?.css ?? true;
     optimization.minimize = !codeCoverage && (!!minifyJs || !!minifyCss);
     if (!optimization.minimize) {
         return;
@@ -59,8 +61,11 @@ function minimizeConfig(optimization: ConfigWithCacheGroups, context: Context) {
     ];
 }
 
-function sharedDependenciesConfig(optimization: ConfigWithCacheGroups, context: Context) {
-    const { emitExposedDependencies } = context;
+function sharedDependenciesConfig(
+    optimization: ConfigWithCacheGroups,
+    context: WebpackBuildContext
+) {
+    const { emitExposedDependencies } = context.build;
     if (!emitExposedDependencies) {
         return;
     }
@@ -75,8 +80,9 @@ function sharedDependenciesConfig(optimization: ConfigWithCacheGroups, context:
     });
 }
 
-function webComponentConfig(optimization: ConfigWithCacheGroups, context: Context) {
-    const { headless, isWebComponent, isProduction } = context;
+function webComponentConfig(optimization: ConfigWithCacheGroups, context: WebpackBuildContext) {
+    const { headless, isProduction } = context.build;
+    const { isWebComponent } = context.package;
     if (!isWebComponent || headless) {
         return;
     }