@servicetitan/startup 34.2.0 → 34.3.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/startup",
-    "version": "34.2.0",
+    "version": "34.3.0-beta.0",
     "description": "CLI to create multi-package Lerna projects with TypeScript and React",
     "homepage": "https://docs.st.dev/docs/frontend/uikit/startup",
     "repository": {
@@ -56,13 +56,13 @@
         "@jest/core": "~30.2.0",
         "@jest/types": "~30.2.0",
         "@jsdevtools/coverage-istanbul-loader": "^3.0.5",
-        "@servicetitan/eslint-config": "34.2.0",
-        "@servicetitan/install": "34.2.0",
-        "@servicetitan/startup-utils": "34.2.0",
-        "@servicetitan/stylelint-config": "34.2.0",
+        "@servicetitan/eslint-config": "34.3.0-beta.0",
+        "@servicetitan/install": "34.3.0-beta.0",
+        "@servicetitan/startup-utils": "34.3.0-beta.0",
+        "@servicetitan/stylelint-config": "34.3.0-beta.0",
         "@svgr/webpack": "^8.1.0",
         "@swc/cli": "^0.5.0",
-        "@swc/core": "1.15.11",
+        "@swc/core": "1.15.18",
         "@types/debug": "^4.1.12",
         "@types/jest": "~30.0.0",
         "@vitest/coverage-v8": "^4.0.18",
@@ -85,10 +85,11 @@
         "jest-environment-jsdom": "^30.2.0",
         "jest-fetch-mock": "~3.0.3",
         "json5": "^2.2.3",
-        "lerna": "~9.0.4",
+        "lerna": "~9.0.5",
         "less": "~4.5.1",
         "less-loader": "~12.3.1",
         "less-plugin-npm-import": "~2.1.0",
+        "eta": "^3.5.0",
         "lodash.kebabcase": "^4.1.1",
         "lodash.memoize": "^4.1.2",
         "memfs": "~4.56.10",
@@ -111,7 +112,10 @@
         "ts-node": "~10.9.2",
         "typed-css-modules": "~0.9.1",
         "typescript": "5.9.3",
-        "vitest": "^4.0.18",
+        "vite": "^8.0.0",
+        "vite-plugin-css-injected-by-js": "^4.0.1",
+        "vite-plugin-svgr": "^4.5.0",
+        "vitest": "^4.1.0",
         "webpack": "~5.105.2",
         "webpack-assets-manifest": "~6.5.0",
         "webpack-bundle-analyzer": "^5.2.0",
@@ -143,6 +147,5 @@
     },
     "cli": {
         "webpack": false
-    },
-    "gitHead": "746e475f7514c9591d68cd71eda974b4d1b275a3"
+    }
 }

package/patches/vite-plugin-css-injected-by-js+3.5.2.patch

@@ -0,0 +1,63 @@
+diff --git a/node_modules/vite-plugin-css-injected-by-js/dist/cjs/index.js b/node_modules/vite-plugin-css-injected-by-js/dist/cjs/index.js
+index 64d0da7..8367087 100644
+--- a/node_modules/vite-plugin-css-injected-by-js/dist/cjs/index.js
++++ b/node_modules/vite-plugin-css-injected-by-js/dist/cjs/index.js
+@@ -113,16 +113,16 @@ function cssInjectedByJsPlugin({ cssAssetsFilterFunction, dev: { enableDev, remo
+                     }`;
+                     let removeStyleFunction = removeStyleCode || defaultRemoveStyleCode;
+                     if (removeStyleCodeFunction) {
+-                        removeStyleFunction = (id) => `(${removeStyleCodeFunction})("${id}")`;
++                        removeStyleFunction = (id, styleId) => `(${removeStyleCodeFunction})("${id}", "${styleId}")`;
+                     }
+                     // removeStyleFunction is called before since the function that inject the CSS doesn't handle the update case required in dev mode.
+                     let injectionCode = src.replace('__vite__updateStyle(__vite__id, __vite__css)', ';\n' +
+-                        removeStyleFunction(id) +
++                        removeStyleFunction(id, styleId) +
+                         ';\n' +
+                         (0, utils_js_1.resolveInjectionCode)('__vite__css', injectCode, injectCodeFunction, {
+-                            attributes: { type: 'text/css', ['data-vite-dev-id']: id },
++                            attributes: { type: 'text/css', ['data-vite-dev-id']: id }, styleId: styleId,
+                         }));
+-                    injectionCode = injectionCode.replace('__vite__removeStyle(__vite__id)', removeStyleFunction(id));
++                    injectionCode = injectionCode.replace('__vite__removeStyle(__vite__id)', removeStyleFunction(id, styleId));
+                     return {
+                         code: injectionCode,
+                         map: null,
+diff --git a/node_modules/vite-plugin-css-injected-by-js/dist/esm/declarations/interface.d.ts b/node_modules/vite-plugin-css-injected-by-js/dist/esm/declarations/interface.d.ts
+index 572ff1e..6a7a99e 100644
+--- a/node_modules/vite-plugin-css-injected-by-js/dist/esm/declarations/interface.d.ts
++++ b/node_modules/vite-plugin-css-injected-by-js/dist/esm/declarations/interface.d.ts
+@@ -5,7 +5,7 @@ import type { ModuleFormat } from 'rollup';
+ export interface DevOptions {
+     enableDev?: boolean;
+     removeStyleCode?: (id: string) => string;
+-    removeStyleCodeFunction?: (id: string) => void;
++    removeStyleCodeFunction?: (id: string, styleId: string) => void;
+ }
+ export interface BaseOptions {
+     dev?: DevOptions;
+diff --git a/node_modules/vite-plugin-css-injected-by-js/dist/esm/index.js b/node_modules/vite-plugin-css-injected-by-js/dist/esm/index.js
+index 0f21901..27a1692 100644
+--- a/node_modules/vite-plugin-css-injected-by-js/dist/esm/index.js
++++ b/node_modules/vite-plugin-css-injected-by-js/dist/esm/index.js
+@@ -100,16 +100,16 @@ export default function cssInjectedByJsPlugin({ cssAssetsFilterFunction, dev: {
+                     }`;
+                     let removeStyleFunction = removeStyleCode || defaultRemoveStyleCode;
+                     if (removeStyleCodeFunction) {
+-                        removeStyleFunction = (id) => `(${removeStyleCodeFunction})("${id}")`;
++                        removeStyleFunction = (id, styleId) => `(${removeStyleCodeFunction})("${id}", "${styleId}")`;
+                     }
+                     // removeStyleFunction is called before since the function that inject the CSS doesn't handle the update case required in dev mode.
+                     let injectionCode = src.replace('__vite__updateStyle(__vite__id, __vite__css)', ';\n' +
+-                        removeStyleFunction(id) +
++                        removeStyleFunction(id, styleId) +
+                         ';\n' +
+                         resolveInjectionCode('__vite__css', injectCode, injectCodeFunction, {
+-                            attributes: { type: 'text/css', ['data-vite-dev-id']: id },
++                            attributes: { type: 'text/css', ['data-vite-dev-id']: id, styleId: styleId },
+                         }));
+-                    injectionCode = injectionCode.replace('__vite__removeStyle(__vite__id)', removeStyleFunction(id));
++                    injectionCode = injectionCode.replace('__vite__removeStyle(__vite__id)', removeStyleFunction(id, styleId));
+                     return {
+                         code: injectionCode,
+                         map: null,

package/src/cli/commands/__tests__/mfe-generate-metadata.test.ts

@@ -1,8 +1,7 @@
 import { fs, vol } from 'memfs';
 import path from 'node:path';
+import { getLaunchDarklySdkVersion, getWebComponentsVersion } from '../../../core';
 import { getPackageData, getStartupVersion, loadSharedDependencies, log } from '../../../utils';
-import { getLaunchDarklySdkVersion } from '../../../webpack/configs/utils/get-launchdarkly-sdk-version';
-import { getWebComponentsVersion } from '../../../webpack/configs/utils/get-web-components-version';
 import { MfeGenerateMetadata } from '../mfe-generate-metadata';
 
 jest.mock('fs', () => fs);
@@ -10,13 +9,13 @@ jest.mock('../../../utils', () => ({
     ...jest.requireActual('../../../utils'),
     log: { info: jest.fn() },
 }));
-jest.mock('../../../webpack/configs/utils/get-web-components-version', () => ({
+jest.mock('../../../core/utils/get-web-components-version', () => ({
     getWebComponentsVersion: jest.fn(() => '1.0.0'),
 }));
 jest.mock('../../../utils/get-startup-version', () => ({
     getStartupVersion: jest.fn(() => '33.0.0'),
 }));
-jest.mock('../../../webpack/configs/utils/get-launchdarkly-sdk-version', () => ({
+jest.mock('../../../core/utils/get-launchdarkly-sdk-version', () => ({
     getLaunchDarklySdkVersion: jest.fn(() => '3.4.5'),
 }));
 

package/src/cli/commands/build.ts

@@ -8,9 +8,11 @@ const options = {
     codeCoverage: { boolean: true, description: 'Instrument code for coverage analysis?' },
     config: { string: true, hidden: true, description: 'Use specified configuration' },
     ignore: { array: true, string: true, description: 'Packages to skip' },
+    preview: { boolean: true, description: 'Start preview server after build?' },
     scope: { array: true, string: true, description: 'Packages to build' },
     stat: { boolean: true, description: 'Generate bundle report?' },
     useTsc: { boolean: true, description: 'Use tsc to compile packages?' },
+    useVite: { boolean: true, description: 'Use Vite to bundle packages?' },
 } satisfies CommandOptions;
 
 enum BuildProcesses {
@@ -33,6 +35,8 @@ export class Build extends Command<typeof options> {
         checkArgs(this.args, { obsolete: ['--esbuild', '--experimental-bundlers'] });
 
         const useTsc = this.args.useTsc;
+        const useVite = this.args.useVite;
+        const cmd = useVite ? 'startup bundle-vite' : 'startup bundle-package';
 
         const packages = getPackages({
             scope: this.args.scope,
@@ -89,7 +93,7 @@ export class Build extends Command<typeof options> {
                     return Promise.resolve();
                 }
                 return lernaExec({
-                    'cmd': 'startup bundle-package',
+                    cmd,
                     'scope': webpackScope,
                     'parallel': true,
                     'stream': true,
@@ -112,13 +116,14 @@ export class Build extends Command<typeof options> {
                 }
 
                 return lernaExec({
-                    'cmd': 'startup bundle-package',
+                    cmd,
                     'scope': webpackScope,
                     'stream': true,
                     '--': [
                         ...[this.args.config ? `--config "${this.args.config}"` : undefined],
                         ...[this.args.codeCoverage ? '--code-coverage' : undefined],
                         ...[this.args.stat ? '--stat' : undefined],
+                        ...[useVite && this.args.preview ? '--preview' : undefined],
                     ].filter(item => !!item) as string[],
                 });
             },

package/src/cli/commands/bundle-vite.ts

@@ -0,0 +1,112 @@
+import { build, createServer, preview as previewServer } from 'vite';
+import { CreateBuildContextInput, getName, stringifyConfig } from '../../core';
+import {
+    hasHeadlessBundle,
+    isExposeSharedDependencies,
+    isWebComponent,
+    log,
+    logErrors,
+    validateSharedDependenciesConsistency,
+    validateSharedDependenciesMigration,
+} from '../../utils';
+import { buildSharedDeps } from '../../vite/build-shared-deps';
+import { createViteConfig } from '../../vite/create-vite-config';
+import { Command, CommandOptions } from './types';
+
+const options = {
+    codeCoverage: { boolean: true, hidden: true },
+    exposedDependencies: { boolean: true, hidden: true },
+    preview: { boolean: true, hidden: true },
+    printConfig: { boolean: true, hidden: true },
+    stat: { boolean: true, hidden: true },
+    useWatchConfig: { boolean: true, hidden: true },
+    watch: { boolean: true, hidden: true },
+} satisfies CommandOptions;
+
+export class BundleVite extends Command<typeof options> {
+    static readonly options = options;
+    @logErrors
+    async execute() {
+        validateSharedDependenciesConsistency();
+        validateSharedDependenciesMigration();
+
+        const { preview = false, useWatchConfig = false, watch = false } = this.args;
+        const isProduction = !(watch || useWatchConfig);
+
+        const baseInput: CreateBuildContextInput = {
+            name: getName(),
+            isProduction,
+        };
+
+        if (this.args.printConfig) {
+            const config = await createViteConfig(baseInput);
+            log.text(stringifyConfig(config));
+            return;
+        }
+
+        if (this.args.exposedDependencies) {
+            if (watch) {
+                throw new Error('cannot bundle exposed dependencies in watch mode');
+            }
+            if (!isExposeSharedDependencies()) {
+                return;
+            }
+            await buildSharedDeps(baseInput);
+            return;
+        }
+
+        if (isWebComponent()) {
+            if (watch) {
+                /*
+                 * Start dev servers sequentially to avoid I/O contention during startup.
+                 * Full first — it serves metadata.json and the standalone MFE dev page.
+                 */
+                await buildAndServe(baseInput, { watch, preview });
+                await buildAndServe({ ...baseInput, light: true }, { watch });
+                if (hasHeadlessBundle()) {
+                    await buildAndServe({ ...baseInput, headless: true }, { watch });
+                }
+            } else {
+                // TODO: test if sequential is faster
+                await Promise.all([
+                    buildAndServe(baseInput, { watch, preview }),
+                    buildAndServe({ ...baseInput, light: true }, { watch }),
+                    hasHeadlessBundle() &&
+                        buildAndServe({ ...baseInput, headless: true }, { watch }),
+                ]);
+            }
+
+            return;
+        }
+
+        await buildAndServe(baseInput, { watch, preview });
+    }
+}
+
+async function buildAndServe(
+    input: CreateBuildContextInput,
+    { watch, preview = false }: { watch: boolean; preview?: boolean }
+): Promise<void> {
+    const config = await createViteConfig(input);
+
+    // TODO: look into isDevServerDisabled webpack's counterpart
+    if (watch) {
+        await serve(config);
+    } else {
+        await build(config);
+
+        if (preview) {
+            await serve({ ...config, preview: { port: config.server?.port, open: true } }, true);
+        }
+    }
+}
+
+async function serve(config: import('vite').InlineConfig, preview = false) {
+    const server = preview ? await previewServer(config) : await createServer(config);
+    if ('listen' in server) {
+        await server.listen();
+    }
+    server.printUrls();
+    server.bindCLIShortcuts({ print: true });
+    return server;
+}

package/src/cli/commands/get-command.ts

@@ -1,6 +1,7 @@
 import { CommandName } from '../../utils';
 import { Build } from './build';
 import { BundlePackage } from './bundle-package';
+import { BundleVite } from './bundle-vite';
 import { Clean } from './clean';
 import { ConvertEslintConfig } from './convert-eslint-config';
 import { ESLintCommand } from './eslint';
@@ -28,6 +29,7 @@ import { UploadSourcemaps } from './upload-sourcemaps';
 const commands: Record<CommandName, Newable<Command>> = {
     [CommandName.build]: Build,
     [CommandName['bundle-package']]: BundlePackage,
+    [CommandName['bundle-vite']]: BundleVite,
     [CommandName['convert-eslint-config']]: ConvertEslintConfig,
     [CommandName.clean]: Clean,
     [CommandName.eslint]: ESLintCommand,

package/src/cli/commands/mfe-check.ts

@@ -1,5 +1,6 @@
 import { getVersionMismatches } from '@servicetitan/startup-utils';
 import path from 'node:path';
+import { getExposedDependencies, Metadata } from '../../core';
 import {
     isWebComponent,
     loadSharedDependencies,
@@ -8,8 +9,6 @@ import {
     readJson,
     toArray,
 } from '../../utils';
-import { Metadata } from '../../webpack/configs/types';
-import { getExposedDependencies } from '../../webpack/configs/utils';
 import { Command, CommandOptions } from './types';
 
 interface HostPackageJSON {

package/src/cli/commands/mfe-generate-metadata.ts

@@ -1,5 +1,6 @@
 import fs from 'node:fs';
 import path from 'node:path';
+import { buildMetadata } from '../../core';
 import {
     getFolders,
     getPackageData,
@@ -9,7 +10,6 @@ import {
     log,
     logErrors,
 } from '../../utils';
-import { buildMetadata } from '../../webpack/configs/utils/build-metadata';
 import { Command, CommandOptions } from './types';
 
 const options = {

package/src/cli/commands/mfe-package-publish.ts

@@ -1,5 +1,6 @@
 import fs from 'fs';
 import path from 'path';
+import { EntryPoint, EntryPoints, Metadata } from '../../core';
 import {
     getBranchesConfigs,
     getFolders,
@@ -8,7 +9,6 @@ import {
     logErrors,
     readJson,
 } from '../../utils';
-import { EntryPoint, EntryPoints, Metadata } from '../../webpack/configs';
 import {
     DRY_RUN_PREFIX,
     getDefaultBuildVersion,

package/src/cli/commands/start.ts

@@ -16,6 +16,7 @@ const options = {
     ignore: { array: true, string: true, description: 'Packages to skip' },
     scope: { array: true, string: true, description: 'Packages to run and watch' },
     useTsc: { boolean: true, description: 'Use tsc to compile packages?' },
+    useVite: { boolean: true, description: 'Use Vite to bundle packages?' },
 } satisfies CommandOptions;
 
 enum StartProcesses {
@@ -39,6 +40,8 @@ export class Start extends Command<typeof options> {
         checkArgs(this.args, { obsolete: ['--esbuild', '--experimental-bundlers'] });
 
         const useTsc = this.args.useTsc;
+        const useVite = this.args.useVite;
+        const cmd = useVite ? 'startup bundle-vite' : 'startup bundle-package';
 
         const packages = getPackages({
             scope: this.args.scope,
@@ -151,7 +154,7 @@ export class Start extends Command<typeof options> {
                     return Promise.resolve();
                 }
                 return lernaExec({
-                    'cmd': 'startup bundle-package',
+                    cmd,
                     'scope': webpackScope,
                     'parallel': true,
                     'stream': true,
@@ -167,7 +170,7 @@ export class Start extends Command<typeof options> {
                     return Promise.resolve();
                 }
                 return lernaExec({
-                    'cmd': 'startup bundle-package',
+                    cmd,
                     'scope': webpackScope,
                     'parallel': true,
                     'stream': true,

package/src/cli/utils/__tests__/bundle.test.ts

@@ -12,8 +12,12 @@ import {
     isExposeSharedDependencies,
     loadSharedDependencies,
 } from '../../../utils';
-import { createWebpackConfig } from '../../../webpack';
-import { bundle, webpackDevConfigFileName, webpackProdConfigFileName } from '../bundle';
+import { createWebpackConfig, createWebpackConfigs } from '../../../webpack';
+import {
+    webpackDevConfigFileName,
+    webpackProdConfigFileName,
+} from '../../../webpack/create-webpack-config';
+import { bundle } from '../bundle';
 
 jest.mock('fs', () => fs);
 jest.mock('portfinder');
@@ -24,11 +28,16 @@ jest.mock('../../../utils', () => ({
     getFolders: jest.fn(),
     getPackageData: jest.fn(),
     hasHeadlessBundle: jest.fn(),
+    isDevServerDisabled: jest.fn(),
     isExposeSharedDependencies: jest.fn(),
+    isWebComponent: jest.fn(),
     loadSharedDependencies: jest.fn(),
     log: { info: jest.fn(), debug: jest.fn() }, // suppress test output
 }));
-jest.mock('../../../webpack', () => ({ createWebpackConfig: jest.fn() }));
+jest.mock('../../../webpack', () => ({
+    createWebpackConfig: jest.fn(),
+    createWebpackConfigs: jest.fn(),
+}));
 
 describe('[startup] Cli Utils', () => {
     const pkg = createPackage({});
@@ -37,7 +46,7 @@ describe('[startup] Cli Utils', () => {
 
     beforeEach(() => {
         jest.resetAllMocks();
-        jest.mocked(createWebpackConfig).mockReturnValue(createWebpackResult);
+        jest.mocked(createWebpackConfigs).mockReturnValue([createWebpackResult]);
         jest.mocked(webpack).mockImplementation((): any => compiler);
         jest.mocked(getPortPromise).mockImplementation(options =>
             Promise.resolve(options?.port ?? 0)
@@ -111,7 +120,7 @@ describe('[startup] Cli Utils', () => {
             describe('when package exposes dependencies', () => {
                 beforeEach(() => jest.mocked(isExposeSharedDependencies).mockReturnValue(true));
 
-                test('emits exposed dependences', async () => {
+                test('emits exposed dependencies', async () => {
                     await subject();
 
                     expect(createWebpackConfig).toHaveBeenCalledWith(
@@ -293,7 +302,7 @@ describe('[startup] Cli Utils', () => {
                 };
             });
 
-            test('builds full and "embed" packages', async () => {
+            test('builds full and light packages', async () => {
                 await subject();
 
                 expect(createWebpackConfig).toHaveBeenCalledWith(
@@ -302,7 +311,7 @@ describe('[startup] Cli Utils', () => {
                 );
                 expect(createWebpackConfig).toHaveBeenCalledWith(defaultCreateOverrides, {
                     ...defaultCreateOptions,
-                    embed: true,
+                    light: true,
                 });
                 expect(compiler.run).toHaveBeenCalledTimes(2);
             });
@@ -339,7 +348,7 @@ describe('[startup] Cli Utils', () => {
                     expect(createWebpackConfig).toHaveBeenCalledWith(overrides, createOptions);
                     expect(createWebpackConfig).toHaveBeenCalledWith(overrides, {
                         ...createOptions,
-                        embed: true,
+                        light: true,
                     });
                 });
             }
@@ -526,7 +535,7 @@ describe('[startup] Cli Utils', () => {
                 expect(createWebpackConfig).toHaveBeenCalledWith(overrides, options);
                 expect(createWebpackConfig).toHaveBeenCalledWith(overrides, {
                     ...options,
-                    embed: true,
+                    light: true,
                 });
                 expect(webpack).toHaveBeenNthCalledWith(1, createWebpackResult);
                 expect(webpack).toHaveBeenNthCalledWith(2, createWebpackResult);
@@ -568,7 +577,7 @@ describe('[startup] Cli Utils', () => {
                     expect(createWebpackConfig).toHaveBeenCalledWith(overrides, options);
                     expect(createWebpackConfig).toHaveBeenCalledWith(overrides, {
                         ...options,
-                        embed: true,
+                        light: true,
                     });
                     expect(WebpackDevServer).not.toHaveBeenCalled();
                 });
@@ -588,7 +597,7 @@ describe('[startup] Cli Utils', () => {
                     expect(createWebpackConfig).toHaveBeenCalledWith(overrides, options);
                     expect(createWebpackConfig).toHaveBeenCalledWith(overrides, {
                         ...options,
-                        embed: true,
+                        light: true,
                     });
                 });
             }

package/src/cli/utils/bundle.ts

@@ -1,44 +1,21 @@
-import crypto from 'crypto';
-import fs from 'fs';
-import path from 'path';
 import { getPortPromise } from 'portfinder';
 import webpack, { Configuration } from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
-import {
-    getPackageName,
-    hasHeadlessBundle,
-    isDevServerDisabled,
-    isExposeSharedDependencies,
-    isWebComponent,
-    log,
-    pick,
-} from '../../utils';
-import { Overrides, createWebpackConfig } from '../../webpack';
-import { stringifyConfig } from '../../webpack/utils';
+import { isDevServerDisabled, isExposeSharedDependencies, isWebComponent, log } from '../../utils';
+import { createWebpackConfigs } from '../../webpack';
 
 interface Options {
     buildStat?: boolean;
     codeCoverage?: boolean;
     config?: string;
-    emitExposedDependencies?: boolean | Pick<Configuration, 'output'>;
+    emitExposedDependencies?: boolean;
     useWatchConfig?: boolean;
     watch?: boolean;
 }
 
-function getName() {
-    const packageName = getPackageName()
-        .replace(/\//g, '-')
-        .replace(/[^\w-]/g, '');
-    const hash = crypto.randomBytes(4).toString('hex');
-
-    return `${packageName}-${hash}`;
-}
-
-export const webpackDevConfigFileName = 'webpack.dev.config.js';
-export const webpackProdConfigFileName = 'webpack.prod.config.js';
-
 export async function bundle(options: Options = {}) {
-    const { emitExposedDependencies, useWatchConfig, watch } = options;
+    const { emitExposedDependencies, watch } = options;
+
     if (emitExposedDependencies) {
         if (watch) {
             throw new Error('cannot bundle exposed dependencies in watch mode');
@@ -50,89 +27,31 @@ export async function bundle(options: Options = {}) {
 
     log.info(`Bundling ${emitExposedDependencies ? 'exposed dependencies' : 'package'}...`);
 
-    const mode = watch || useWatchConfig ? 'development' : 'production';
-    const fallback = watch || useWatchConfig ? webpackDevConfigFileName : webpackProdConfigFileName;
-    const customConfig = readWebpackConfig({ ...options, fallback });
-    const webpackOptions = getWebpackOptions(options, customConfig);
+    if (isWebComponent()) {
+        const [fullConfig, lightConfig, headlessConfig] = createWebpackConfigs(options);
 
-    /* istanbul ignore next: debug only */
-    log.debug('custom-webpack-config', () => stringifyConfig(customConfig));
+        if (watch) {
+            return Promise.all([
+                isDevServerDisabled() ? runWatch(fullConfig) : runServe(fullConfig),
+                runWatch(lightConfig),
+                headlessConfig && runWatch(headlessConfig),
+            ]);
+        }
 
-    if (isWebComponent()) {
-        return bundleWebComponent({ customConfig, mode, watch, webpackOptions });
+        return Promise.all([
+            run(fullConfig),
+            run(lightConfig),
+            headlessConfig && run(headlessConfig),
+        ]);
     }
 
-    const config =
-        customConfig && !emitExposedDependencies
-            ? customConfig
-            : createWebpackConfig({ configuration: { mode } }, webpackOptions);
-
+    const [config] = createWebpackConfigs(options);
     if (watch) {
         return isDevServerDisabled() ? runWatch(config) : runServe(config);
     }
-
     return run(config);
 }
 
-function bundleWebComponent({
-    customConfig,
-    mode,
-    watch,
-    webpackOptions,
-}: {
-    customConfig: ReturnType<typeof readWebpackConfig>;
-    mode: 'development' | 'production';
-    watch?: boolean;
-    webpackOptions: ReturnType<typeof getWebpackOptions>;
-}) {
-    const overrides: Overrides = {
-        configuration: { ...customConfig?.configuration, mode },
-        plugins: customConfig?.plugins,
-    };
-
-    const fullConfig = createWebpackConfig(overrides, webpackOptions);
-    const lightConfig = createWebpackConfig(overrides, { ...webpackOptions, embed: true });
-    const headlessConfig = hasHeadlessBundle()
-        ? createWebpackConfig(overrides, {
-              ...webpackOptions,
-              headless: true,
-          })
-        : undefined;
-
-    const promises = watch
-        ? [
-              runWatch(lightConfig),
-              isDevServerDisabled() ? runWatch(fullConfig) : runServe(fullConfig),
-              headlessConfig && runWatch(headlessConfig),
-          ]
-        : [run(lightConfig), run(fullConfig), headlessConfig && run(headlessConfig)];
-
-    return Promise.all(promises.filter(promise => !!promise));
-}
-
-function getWebpackOptions(options: Options, customConfig?: Record<string, any>) {
-    const result = {
-        name: getName(),
-        ...pick(options, ['buildStat', 'codeCoverage', 'emitExposedDependencies']),
-    };
-
-    if (result.emitExposedDependencies && customConfig) {
-        result.emitExposedDependencies = { output: customConfig.output };
-    }
-
-    return result;
-}
-
-function readWebpackConfig({ config, fallback }: Options & { fallback: string }) {
-    return readConfig(config) ?? readConfig(fallback);
-}
-
-function readConfig(relativePath?: string): Record<string, any> | undefined {
-    if (relativePath && fs.existsSync(relativePath)) {
-        return require(path.resolve(relativePath));
-    }
-}
-
 async function run(config: Configuration) {
     const compiler = createWebpackCompiler(config);