@servicetitan/startup 36.3.1 → 36.4.0

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;
     }

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

@@ -1,13 +1,13 @@
-import path from 'path';
 import { Configuration } from 'webpack';
-import { Context, Overrides } from './types';
-import { getBundleType } from './utils';
+import { BuildContext, getBundleType, getCdnPath, getOutputPath } from '../../core';
+import { Overrides } from '../types';
 
 type Config = Configuration['output'];
 type Result = Pick<Configuration, 'output'>;
 
-export function outputConfig(context: Context, _: Overrides): Result {
-    const { emitExposedDependencies, isProduction, isWebComponent, name } = context;
+export function outputConfig(context: BuildContext, _: Overrides): Result {
+    const { name, isProduction, emitExposedDependencies } = context.build;
+    const { isWebComponent } = context.package;
 
     const output: Config = {
         filename: '[name].bundle.js',
@@ -17,7 +17,7 @@ export function outputConfig(context: Context, _: Overrides): Result {
     };
 
     if (isProduction) {
-        const cdnPath = process.env.CLIENT_CDN_PATH;
+        const cdnPath = getCdnPath(context);
         Object.assign(output, {
             filename: '[name].[contenthash].bundle.js',
             ...(isWebComponent ? { uniqueName: name } : {}),
@@ -28,25 +28,14 @@ export function outputConfig(context: Context, _: Overrides): Result {
     return { output };
 }
 
-function getClean(context: Context): NonNullable<Config>['clean'] {
-    const { emitExposedDependencies } = context;
+function getClean(context: BuildContext): NonNullable<Config>['clean'] {
+    const { emitExposedDependencies } = context.build;
     if (emitExposedDependencies) {
         return true;
     }
-    const exposedDependenciesDir = getBundleType({ ...context, emitExposedDependencies: true });
+    const exposedDependenciesDir = getBundleType({
+        ...context,
+        build: { ...context.build, emitExposedDependencies: true },
+    });
     return exposedDependenciesDir ? { keep: new RegExp(exposedDependenciesDir) } : true;
 }
-
-function getOutputPath(context: Context) {
-    const { destination, emitExposedDependencies } = context;
-
-    const subdir = getBundleType(context) ?? '';
-    if (typeof emitExposedDependencies === 'object') {
-        const { output } = emitExposedDependencies;
-        if (output?.path) {
-            return path.join(output.path, subdir);
-        }
-    }
-
-    return path.join(process.cwd(), destination, 'bundle', subdir);
-}

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

@@ -1,21 +1,17 @@
-import fs from 'fs';
-import path from 'path';
 import { WebpackAssetsManifest } from 'webpack-assets-manifest';
-import { readJsonSafe } from '../../../utils';
-import { Context, Overrides } from '../types';
-import { generateMetadata } from '../utils';
-
-interface Metadata {
-    entryPointsPath: string;
-}
+import { BuildContext, generateExposedDependenciesMetadata, generateMetadata } from '../../../core';
+import { Overrides } from '../../types';
 
 interface EntryPoints {
     css: string[];
     js: string[];
 }
 
-export function assetsManifestPlugin(context: Context, _: Overrides) {
-    if (!(context.isWebComponent || context.emitExposedDependencies)) {
+export function assetsManifestPlugin(context: BuildContext, _: Overrides) {
+    const { destination, isWebComponent } = context.package;
+    const { emitExposedDependencies } = context.build;
+
+    if (!(isWebComponent || emitExposedDependencies)) {
         return;
     }
 
@@ -38,8 +34,8 @@ export function assetsManifestPlugin(context: Context, _: Overrides) {
         },
         // eslint-disable-next-line @typescript-eslint/require-await
         done: async (manifest: WebpackAssetsManifest) => {
-            if (context.emitExposedDependencies) {
-                generateExposedDependenciesMetadata(context, manifest);
+            if (emitExposedDependencies) {
+                generateExposedDependenciesMetadata(destination, () => manifest.getOutputPath());
             } else {
                 generateMetadata(context);
             }
@@ -53,26 +49,3 @@ function ensureDesignSystemCssIsFirst(cssAssets: string[]) {
         ? [cssAssets[offset], ...cssAssets.filter((_, index) => index !== offset)]
         : cssAssets;
 }
-
-export function getExposedDependenciesEntryPoints(context: Context) {
-    const metadataPath = getExposedDependenciesMetadataPath(context);
-    const metadata = readJsonSafe<Metadata>(metadataPath);
-    if (metadata?.entryPointsPath) {
-        return readJsonSafe<EntryPoints>(metadata.entryPointsPath);
-    }
-}
-
-function generateExposedDependenciesMetadata(context: Context, manifest: WebpackAssetsManifest) {
-    const { destination } = context;
-    if (!fs.existsSync(destination)) {
-        fs.mkdirSync(destination, { recursive: true });
-    }
-
-    const metadataPath = getExposedDependenciesMetadataPath(context);
-    const metadata: Metadata = { entryPointsPath: manifest.getOutputPath() };
-    fs.writeFileSync(metadataPath, JSON.stringify(metadata, null, 2), 'utf-8');
-}
-
-function getExposedDependenciesMetadataPath({ destination }: Context) {
-    return path.join(destination, 'exposed-dependencies-metadata.json');
-}

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

@@ -1,11 +1,11 @@
 import os from 'os';
 import path from 'path';
-import { Context, Overrides } from '../types';
-import { getBundleType } from '../utils';
+import { BuildContext, getBundleType } from '../../../core';
+import { Overrides } from '../../types';
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
-export function bundleAnalyzerPlugin(context: Context, _: Overrides) {
-    if (!context.buildStat) {
+export function bundleAnalyzerPlugin(context: BuildContext, _: Overrides) {
+    if (!context.options.buildStat) {
         return;
     }
 
@@ -16,14 +16,14 @@ export function bundleAnalyzerPlugin(context: Context, _: Overrides) {
     });
 }
 
-function getReportFileName(context: Context) {
+function getReportFileName(context: BuildContext) {
     const type = getBundleType(context);
     const qualifier = type ? `-${type}` : '';
-    return `${context.packageData.name}${qualifier}-bundle-${Date.now()}.html`;
+    return `${context.package.name}${qualifier}-bundle-${Date.now()}.html`;
 }
 
-function getReportTitle(context: Context) {
-    const unscopedName = context.packageData.name.replace(/^@[^/]+\//, '');
+function getReportTitle(context: BuildContext) {
+    const unscopedName = context.package.name.replace(/^@[^/]+\//, '');
     const type = getBundleType(context);
     const qualifier = type ? ` (${type})` : '';
     return `${unscopedName}${qualifier} ${formatDate(new Date())}`;

package/src/webpack/configs/plugins/define-exposed-dependencies-plugin.ts

@@ -1,24 +1,13 @@
 import { DefinePlugin } from 'webpack';
-import { Context, Overrides } from '../types';
-import { getExposedDependencies } from '../utils';
+import { BuildContext, defineExposedDependencies } from '../../../core';
+import { Overrides } from '../../types';
 
-export function defineExposedDependenciesPlugin(context: Context, _: Overrides) {
-    const { emitExposedDependencies, isExposeSharedDependencies } = context;
-    if (!isExposeSharedDependencies || emitExposedDependencies) {
+export function defineExposedDependenciesPlugin(context: BuildContext, _: Overrides) {
+    const definition = defineExposedDependencies(context);
+
+    if (!definition) {
         return;
     }
 
-    const { packageData, packageManager, sharedDependencies } = context;
-    const workspacePackage = packageManager.getWorkspacePackage();
-    const exposedDependencies = getExposedDependencies(
-        sharedDependencies,
-        dependency =>
-            packageManager.getResolvedVersion({ workspacePackage, dependency }) ??
-            packageData.dependencies?.[dependency]
-    );
-
-    return new DefinePlugin({
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        EXPOSED_DEPENDENCIES: JSON.stringify(exposedDependencies),
-    });
+    return new DefinePlugin(definition);
 }

package/src/webpack/configs/plugins/define-exposed-instance-dependencies-plugin.ts

@@ -1,19 +1,13 @@
 import { DefinePlugin } from 'webpack';
-import { Context, Overrides } from '../types';
-import { getLaunchDarklySdkVersion } from '../utils/get-launchdarkly-sdk-version';
+import { BuildContext, defineExposedInstanceDependencies } from '../../../core';
+import { Overrides } from '../../types';
 
-export function defineExposedInstanceDependenciesPlugin(context: Context, _: Overrides) {
-    const { emitExposedDependencies, isExposeSharedDependencies } = context;
-    if (!isExposeSharedDependencies || emitExposedDependencies) {
+export function defineExposedInstanceDependenciesPlugin(context: BuildContext, _: Overrides) {
+    const definition = defineExposedInstanceDependencies(context);
+
+    if (!definition) {
         return;
     }
 
-    const instanceDependencies = {
-        launchDarkly: { version: getLaunchDarklySdkVersion(context.packageManager) },
-    };
-
-    return new DefinePlugin({
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        EXPOSED_INSTANCE_DEPENDENCIES: JSON.stringify(instanceDependencies),
-    });
+    return new DefinePlugin(definition);
 }

package/src/webpack/configs/plugins/define-web-component-name-plugin.ts

@@ -1,14 +1,13 @@
 import { DefinePlugin } from 'webpack';
-import { Context, Overrides } from '../types';
+import { BuildContext, defineWebComponentName } from '../../../core';
+import { Overrides } from '../../types';
 
-export function defineWebComponentNamePlugin(context: Context, _: Overrides) {
-    const { isWebComponent, name } = context;
-    if (!isWebComponent) {
+export function defineWebComponentNamePlugin(context: BuildContext, _: Overrides) {
+    const definition = defineWebComponentName(context);
+
+    if (!definition) {
         return;
     }
 
-    return new DefinePlugin({
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        WEB_COMPONENT_NAME: JSON.stringify(name),
-    });
+    return new DefinePlugin(definition);
 }

package/src/webpack/configs/plugins/filter-warnings-plugin.ts

@@ -1,8 +1,9 @@
 const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
-import { Context, Overrides } from '../types';
+import { BuildContext } from '../../../core';
+import { Overrides } from '../../types';
 
-export function filterWarningsPlugin({ embed }: Context, _: Overrides) {
-    if (embed) {
+export function filterWarningsPlugin(context: BuildContext, _: Overrides) {
+    if (context.build.light) {
         return;
     }
 

package/src/webpack/configs/plugins/html-plugin.ts

@@ -1,15 +1,15 @@
 import deepmerge from 'deepmerge';
 import HtmlWebpackPlugin, { Options as HtmlWebpackPluginOptions } from 'html-webpack-plugin';
+import { BuildContext } from '../../../core';
+import { Overrides } from '../../types';
 import { splitByEntry } from '../../utils';
-import { Context, Overrides } from '../types';
 
-export function htmlPlugin(
-    { embed, emitExposedDependencies, headless, isWebComponent, name }: Context,
-    { plugins }: Overrides
-) {
+export function htmlPlugin(context: BuildContext, { plugins }: Overrides) {
+    const { light, headless, name, emitExposedDependencies } = context.build;
+    const { isWebComponent } = context.package;
     const { HtmlWebpackPlugin: htmlWebpackPluginOptions = {} } = plugins ?? {};
 
-    if (embed || headless || emitExposedDependencies) {
+    if (light || headless || emitExposedDependencies) {
         return;
     }
 

package/src/webpack/configs/plugins/html-tags-plugin.ts

@@ -1,28 +1,21 @@
 import HtmlWebpackTagsPlugin from 'html-webpack-tags-plugin';
-import { Context, Overrides } from '../types';
-import { getBundleType } from '../utils';
-import { getExposedDependenciesEntryPoints } from './assets-manifest-plugin';
+import { BuildContext, getSharedEntryPoints } from '../../../core';
+import { Overrides } from '../../types';
 
-export function htmlTagsPlugin(context: Context, _overrides: Overrides) {
-    const { emitExposedDependencies, isExposeSharedDependencies } = context;
+export function htmlTagsPlugin(context: BuildContext, _overrides: Overrides) {
+    const { isExposeSharedDependencies } = context.package;
+    const { emitExposedDependencies } = context.build;
     if (!isExposeSharedDependencies || emitExposedDependencies) {
         return;
     }
 
-    const sharedEntryPoints = getSharedEntryPoints(context);
-    if (!sharedEntryPoints.length) {
+    const { css, js } = getSharedEntryPoints(context);
+    if (!css.length && !js.length) {
         return;
     }
 
-    return new HtmlWebpackTagsPlugin({ tags: sharedEntryPoints, append: false });
-}
-
-function getSharedEntryPoints(context: Context) {
-    const dirname = getBundleType({ ...context, emitExposedDependencies: true });
-    if (!dirname) {
-        return [];
-    }
+    // crossorigin matches the MFE side's <link> so both share one cache entry for the shared CSS.
+    const tags = [...css.map(path => ({ path, attributes: { crossorigin: 'anonymous' } })), ...js];
 
-    const { css = [], js = [] } = getExposedDependenciesEntryPoints(context) ?? {};
-    return [...css, ...js].map(name => `${dirname}/${name}`);
+    return new HtmlWebpackTagsPlugin({ tags, append: false });
 }

package/src/webpack/configs/plugins/ignore-plugin/__tests__/ignore-plugin.test.ts

@@ -0,0 +1,67 @@
+import { IgnorePlugin } from 'webpack';
+import type { BuildContext } from '../../../../../core';
+import { checkResource } from '../../../../../core';
+import { ignorePlugin } from '../ignore-plugin';
+
+jest.mock('../../../../../core', () => ({
+    checkResource: jest.fn(),
+}));
+
+describe(ignorePlugin.name, () => {
+    let context: BuildContext;
+    let checker: jest.Mock;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        context = {} as BuildContext;
+        checker = jest.fn().mockReturnValue(false);
+        jest.mocked(checkResource).mockReturnValue(checker);
+    });
+
+    const subject = () => ignorePlugin(context, {});
+
+    test('returns an IgnorePlugin', () => {
+        expect(subject()).toBeInstanceOf(IgnorePlugin);
+    });
+
+    test('creates checker from build context', () => {
+        subject();
+
+        expect(checkResource).toHaveBeenCalledWith(context);
+    });
+
+    describe('checkResource callback', () => {
+        let resource: string;
+        let importer: string;
+
+        beforeEach(() => {
+            resource = 'some-module';
+            importer = '/app';
+        });
+
+        const subject = () => {
+            const { options } = ignorePlugin(context, {});
+            return (
+                options as { checkResource: (resource: string, importer: string) => boolean }
+            ).checkResource(resource, importer);
+        };
+
+        test('checks resource against importer', () => {
+            subject();
+
+            expect(checker).toHaveBeenCalledWith({ resource, importer });
+        });
+
+        test('returns false', () => {
+            expect(subject()).toBe(false);
+        });
+
+        describe('when checker matches the resource', () => {
+            beforeEach(() => checker.mockReturnValue(true));
+
+            test('returns true', () => {
+                expect(subject()).toBe(true);
+            });
+        });
+    });
+});

package/src/webpack/configs/plugins/ignore-plugin/ignore-plugin.ts

@@ -1,13 +1,13 @@
 import { IgnorePlugin } from 'webpack';
-import { Context, Overrides } from '../../types';
-import { checkResource } from './check-resource';
+import { BuildContext, checkResource } from '../../../../core';
+import { Overrides } from '../../../types';
 
-export function ignorePlugin(context: Context, _: Overrides) {
-    /**
-     * Ignore optional peer dependencies
-     * @see {@link: file://./../../../../../../web-components/src/register.tsx}
-     * @see {@link: file://./../../../../../../web-components/src/render.ts}
-     * @see {@link: file://./../../../../../../ko-bridge/src/ko-binding-handlers.tsx}
-     */
-    return new IgnorePlugin({ checkResource: checkResource(context) });
+export function ignorePlugin(context: BuildContext, _: Overrides) {
+    const checker = checkResource(context);
+
+    return new IgnorePlugin({
+        checkResource(resource: string, importer: string) {
+            return checker({ resource, importer });
+        },
+    });
 }

package/src/webpack/configs/plugins/mini-css-extract-plugin.ts

@@ -1,11 +1,15 @@
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import { Context, Overrides } from '../types';
+import { Overrides, WebpackBuildContext } from '../../types';
 
-export function miniCssExtractPlugin(context: Context, overrides: Overrides) {
-    const { isCustomStyleRules, isExposeSharedDependencies, isProduction, isWebComponent } =
-        context;
+export function miniCssExtractPlugin(context: WebpackBuildContext, overrides: Overrides) {
+    const { isProduction, emitExposedDependencies } = context.build;
+    const { isExposeSharedDependencies, isWebComponent } = context.package;
+    const { 'custom-style-rules': isCustomStyleRules } = context.bundlerConfig;
 
-    if (!isCustomStyleRules && (isProduction || isWebComponent || isExposeSharedDependencies)) {
+    if (
+        (!isCustomStyleRules || emitExposedDependencies) &&
+        (isProduction || isWebComponent || isExposeSharedDependencies)
+    ) {
         return new MiniCssExtractPlugin({
             filename: isProduction ? '[name].[contenthash].bundle.css' : '[name].bundle.css',
             ...overrides.plugins?.MiniCssExtractPlugin,

package/src/webpack/configs/plugins/moment-locales-plugin.ts

@@ -1,9 +1,10 @@
-import { Context, Overrides } from '../types';
+import { BuildContext } from '../../../core';
+import { Overrides } from '../../types';
 
 const MomentLocalesPlugin: typeof import('moment-locales-webpack-plugin') | undefined =
     isMomentInstalled() ? require('moment-locales-webpack-plugin') : undefined;
 
-export function momentLocalesPlugin(_: Context, _overrides: Overrides) {
+export function momentLocalesPlugin(_: BuildContext, _overrides: Overrides) {
     return (
         MomentLocalesPlugin &&
         new MomentLocalesPlugin({

package/src/webpack/configs/plugins/remove-empty-scripts-plugin.ts

@@ -1,8 +1,9 @@
 import RemoveEmptyScriptsPlugin from 'webpack-remove-empty-scripts';
-import { Context, Overrides } from '../types';
+import { BuildContext } from '../../../core';
+import { Overrides } from '../../types';
 
-export function removeEmptyScriptsPlugin(context: Context, _overrides: Overrides) {
-    const { emitExposedDependencies } = context;
+export function removeEmptyScriptsPlugin(context: BuildContext, _overrides: Overrides) {
+    const { emitExposedDependencies } = context.build;
     if (!emitExposedDependencies) {
         return;
     }

package/src/webpack/configs/plugins/virtual-modules-plugin.ts

@@ -1,80 +1,26 @@
 import fs from 'fs';
 import path from 'path';
 import VirtualModulesPlugin from 'webpack-virtual-modules';
-import { Context, Overrides } from '../types';
+import { BuildContext, getDesignSystemPath, virtualModules } from '../../../core';
+import { Overrides } from '../../types';
 
-export function virtualModulesPlugin(context: Context, _: Overrides) {
-    const { destination } = context;
+export function virtualModulesPlugin(context: BuildContext, _: Overrides) {
+    const { destination } = context.package;
 
-    const modules: ConstructorParameters<typeof VirtualModulesPlugin>[0] = {};
+    const modules = virtualModules(context);
+    const pluginModules: ConstructorParameters<typeof VirtualModulesPlugin>[0] = {};
 
-    if (context.isWebComponent) {
+    if (modules.index) {
         const indexPath = path.join(process.cwd(), destination, 'index');
-        modules[indexPath] = indexCode(context);
+        pluginModules[indexPath] = modules.index;
     }
 
-    if (needsToIncludeDesignSystem(context)) {
+    if (modules.designSystem) {
         const designSystemPath = getDesignSystemPath(context);
         if (!fs.existsSync(designSystemPath)) {
-            modules[designSystemPath] = designSystemCode();
+            pluginModules[designSystemPath] = modules.designSystem;
         }
     }
 
-    return Object.keys(modules).length ? new VirtualModulesPlugin(modules) : undefined;
-}
-
-export function getDesignSystemPath({ destination }: Context) {
-    return path.join(process.cwd(), destination, 'design-system.css');
-}
-
-function designSystemCode() {
-    return [
-        `@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');
-}
-
-function indexCode(context: Context) {
-    const { embed = false, headless, isLegacyRoot, sharedDependencies } = context;
-    if (headless) {
-        return headlessIndex();
-    }
-
-    const options = `{ legacyRoot: ${isLegacyRoot}, sharedDependenciesNames: ${JSON.stringify(
-        Object.keys(sharedDependencies)
-    )} }`;
-    return [
-        ...(needsToIncludeDesignSystem(context) ? [`require('./design-system.css');`] : []),
-        `import { register } from '@servicetitan/web-components';`,
-        `import { App } from './app';`,
-        `register(App, ${embed}, ${options});`,
-    ].join('\n');
-}
-
-function needsToIncludeDesignSystem({
-    embed,
-    emitExposedDependencies,
-    headless,
-    isWebComponent,
-    packageData,
-    sharedDependencies,
-}: Context) {
-    return (
-        (!!emitExposedDependencies && !!sharedDependencies['@servicetitan/design-system']) ||
-        (isWebComponent &&
-            !headless &&
-            // Depends on design system
-            !!packageData.dependencies['@servicetitan/design-system'] &&
-            // ... and is not light bundle with private copy of design system
-            !(embed && !!sharedDependencies['@servicetitan/design-system']))
-    );
-}
-
-function headlessIndex() {
-    return [
-        "import { registerHeadless } from '@servicetitan/web-components';",
-        "import { connectedCallback, disconnectedCallback } from './headless';",
-        'registerHeadless(connectedCallback, disconnectedCallback);',
-    ].join('\n');
+    return Object.keys(pluginModules).length ? new VirtualModulesPlugin(pluginModules) : undefined;
 }

package/src/webpack/configs/plugins/watch-run-plugin.ts

@@ -1,9 +1,10 @@
 import path from 'path';
 import { Compiler } from 'webpack';
+import { BuildContext } from '../../../core';
 import { log } from '../../../utils';
-import { Context, Overrides } from '../types';
+import { Overrides } from '../../types';
 
-export function watchRunPlugin(_context: Context, _overrides: Overrides) {
+export function watchRunPlugin(_context: BuildContext, _overrides: Overrides) {
     /* istanbul ignore next: debug only */
     if (log.debug('modified-files').enabled) {
         return new WatchRunPlugin();