@servicetitan/startup 31.4.0 → 31.5.0

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

@@ -8,7 +8,7 @@ type ConfigWithCacheGroups = Config & { splitChunks: { cacheGroups: Record<strin
 type Result = Pick<Configuration, 'optimization'>;
 
 export function optimizationConfig(context: Context, _: Overrides): Result {
-    const { headless, isProduction } = context;
+    const { emitExposedDependencies, headless, isProduction } = context;
 
     const optimization: ConfigWithCacheGroups = {
         chunkIds: isProduction ? 'deterministic' : 'named',
@@ -17,7 +17,9 @@ export function optimizationConfig(context: Context, _: Overrides): Result {
         splitChunks: { cacheGroups: {} },
     };
 
-    if (!headless && isProduction) {
+    if (emitExposedDependencies) {
+        optimization.runtimeChunk = false;
+    } else if (!headless && isProduction) {
         optimization.runtimeChunk = 'single';
     }
 
@@ -58,19 +60,13 @@ function minimizeConfig(optimization: ConfigWithCacheGroups, context: Context) {
 }
 
 function sharedDependenciesConfig(optimization: ConfigWithCacheGroups, context: Context) {
-    const { headless, isExposeSharedDependencies } = context;
-    if (!isExposeSharedDependencies || headless) {
+    const { emitExposedDependencies } = context;
+    if (!emitExposedDependencies) {
         return;
     }
 
     Object.assign(optimization.splitChunks.cacheGroups, {
-        'design-system': {
-            test: /[\\/]node_modules[\\/]@servicetitan[\\/](tokens|anvil-fonts|design-system)[\\/].*\.css$/,
-            name: 'design-system',
-            chunks: 'all',
-            enforce: true,
-        },
-        'anvil2': {
+        anvil2: {
             test: /@servicetitan[\\/]anvil2[\\/].*\.css$/,
             name: 'anvil2',
             chunks: 'all',

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

@@ -1,27 +1,29 @@
 import path from 'path';
 import { Configuration } from 'webpack';
 import { Context, Overrides } from './types';
+import { getBundleType } from './utils';
 
 type Config = Configuration['output'];
 type Result = Pick<Configuration, 'output'>;
 
 export function outputConfig(context: Context, _: Overrides): Result {
-    const { destination, embed, headless, isProduction, isWebComponent, name } = context;
-
-    const bundleDir = headless ? 'headless' : embed ? 'light' : 'full';
+    const { emitExposedDependencies, isProduction, isWebComponent, name } = context;
 
     const output: Config = {
         filename: '[name].bundle.js',
-        path: isWebComponent
-            ? path.join(process.cwd(), `${destination}/bundle/${bundleDir}`)
-            : path.join(process.cwd(), `${destination}/bundle`),
+        path: getOutputPath(context),
+        ...(emitExposedDependencies ? { chunkLoadingGlobal: `sharedChunk${name}` } : {}),
     };
 
     if (isProduction) {
         const cdnPath = process.env.CLIENT_CDN_PATH;
+        const exposedDependenciesDir = getBundleType({ ...context, emitExposedDependencies: true });
         Object.assign(output, {
             filename: '[name].[contenthash].bundle.js',
-            clean: true,
+            clean:
+                exposedDependenciesDir && !emitExposedDependencies
+                    ? { keep: new RegExp(exposedDependenciesDir) }
+                    : true,
             ...(isWebComponent ? { uniqueName: name } : {}),
             ...(cdnPath ? { publicPath: cdnPath } : {}),
         });
@@ -29,3 +31,17 @@ export function outputConfig(context: Context, _: Overrides): Result {
 
     return { output };
 }
+
+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,23 +1,32 @@
+import fs from 'fs';
+import path from 'path';
 import { WebpackAssetsManifest } from 'webpack-assets-manifest';
 import { Context, Overrides } from '../types';
 import { generateMetadata } from '../utils';
+import { readJsonSafe } from '../../../utils';
+
+interface Metadata {
+    entryPointsPath: string;
+}
+
+interface EntryPoints {
+    css: string[];
+    js: string[];
+}
 
 export function assetsManifestPlugin(context: Context, _: Overrides) {
-    if (!context.isWebComponent) {
+    if (!(context.isWebComponent || context.emitExposedDependencies)) {
         return;
     }
 
     return new WebpackAssetsManifest({
         entrypoints: true,
         output: 'entrypoints.json',
-        transform(assets) {
-            const entrypoints = assets.entrypoints as Record<
-                string,
-                { assets: Record<string, string[]> }
-            >;
-
+        transform(assets: {
+            entrypoints: Record<string, { assets: Record<string, string[]> }>;
+        }): EntryPoints {
             const getAssetsByType = (type: string) => {
-                return Object.values(entrypoints)
+                return Object.values(assets.entrypoints)
                     .map(({ assets }) => assets[type] ?? [])
                     .flat();
             };
@@ -28,8 +37,35 @@ export function assetsManifestPlugin(context: Context, _: Overrides) {
             };
         },
         // eslint-disable-next-line @typescript-eslint/require-await
-        done: async (_manifest: WebpackAssetsManifest) => {
-            generateMetadata(context);
+        done: async (manifest: WebpackAssetsManifest) => {
+            if (context.emitExposedDependencies) {
+                generateExposedDependenciesMetadata(context, manifest);
+            } else {
+                generateMetadata(context);
+            }
         },
     });
 }
+
+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

@@ -2,6 +2,7 @@ import path from 'path';
 import os from 'os';
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 import { Context, Overrides } from '../types';
+import { getBundleType } from '../utils';
 
 export function bundleAnalyzerPlugin(context: Context, _: Overrides) {
     if (!context.buildStat) {
@@ -15,12 +16,6 @@ export function bundleAnalyzerPlugin(context: Context, _: Overrides) {
     });
 }
 
-function getBundleType({ embed, isWebComponent }: Context) {
-    if (isWebComponent) {
-        return embed ? 'light' : 'full';
-    }
-}
-
 function getReportFileName(context: Context) {
     const type = getBundleType(context);
     const qualifier = type ? `-${type}` : '';

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

@@ -3,11 +3,12 @@ import { getPackageDependencyVersion } from '../../../utils';
 import { Context, Overrides } from '../types';
 
 export function defineExposedDependenciesPlugin(context: Context, _: Overrides) {
-    const { isExposeSharedDependencies, packageData, sharedDependencies } = context;
-    if (!isExposeSharedDependencies) {
+    const { emitExposedDependencies, isExposeSharedDependencies } = context;
+    if (!isExposeSharedDependencies || emitExposedDependencies) {
         return;
     }
 
+    const { packageData, sharedDependencies } = context;
     return new DefinePlugin({
         // eslint-disable-next-line @typescript-eslint/naming-convention
         EXPOSED_DEPENDENCIES: JSON.stringify(

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

@@ -3,8 +3,8 @@ import { Context, Overrides } from '../types';
 import { getLaunchDarklySdkVersion } from '../utils/get-launchdarkly-sdk-version';
 
 export function defineExposedInstanceDependenciesPlugin(context: Context, _: Overrides) {
-    const { isExposeSharedDependencies } = context;
-    if (!isExposeSharedDependencies) {
+    const { emitExposedDependencies, isExposeSharedDependencies } = context;
+    if (!isExposeSharedDependencies || emitExposedDependencies) {
         return;
     }
 

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

@@ -4,12 +4,12 @@ import { splitByEntry } from '../../utils';
 import { Context, Overrides } from '../types';
 
 export function htmlPlugin(
-    { embed, headless, isWebComponent, name }: Context,
+    { embed, emitExposedDependencies, headless, isWebComponent, name }: Context,
     { plugins }: Overrides
 ) {
     const { HtmlWebpackPlugin: htmlWebpackPluginOptions = {} } = plugins ?? {};
 
-    if (embed || headless) {
+    if (embed || headless || emitExposedDependencies) {
         return;
     }
 
@@ -17,7 +17,6 @@ export function htmlPlugin(
         deepmerge<HtmlWebpackPluginOptions>(
             {
                 title: 'ServiceTitan',
-                hash: true,
                 ...(isWebComponent
                     ? {
                           inject: false,

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

@@ -0,0 +1,28 @@
+import HtmlWebpackTagsPlugin from 'html-webpack-tags-plugin';
+import { Context, Overrides } from '../types';
+import { getBundleType } from '../utils';
+import { getExposedDependenciesEntryPoints } from './assets-manifest-plugin';
+
+export function htmlTagsPlugin(context: Context, _overrides: Overrides) {
+    const { emitExposedDependencies, isExposeSharedDependencies } = context;
+    if (!isExposeSharedDependencies || emitExposedDependencies) {
+        return;
+    }
+
+    const sharedEntryPoints = getSharedEntryPoints(context);
+    if (!sharedEntryPoints.length) {
+        return;
+    }
+
+    return new HtmlWebpackTagsPlugin({ tags: sharedEntryPoints, append: false });
+}
+
+function getSharedEntryPoints(context: Context) {
+    const dirname = getBundleType({ ...context, emitExposedDependencies: true });
+    if (!dirname) {
+        return [];
+    }
+
+    const { css = [], js = [] } = getExposedDependenciesEntryPoints(context) ?? {};
+    return [...css, ...js].map(name => `${dirname}/${name}`);
+}

package/src/webpack/configs/plugins/index.ts

@@ -5,8 +5,10 @@ export * from './define-exposed-instance-dependencies-plugin';
 export * from './define-web-component-name-plugin';
 export * from './filter-warnings-plugin';
 export * from './html-plugin';
+export * from './html-tags-plugin';
 export * from './ignore-plugin';
 export * from './mini-css-extract-plugin';
 export * from './moment-locales-plugin';
+export * from './remove-empty-scripts-plugin';
 export * from './virtual-modules-plugin';
 export * from './watch-run-plugin';

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

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

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

@@ -4,25 +4,27 @@ import VirtualModulesPlugin from 'webpack-virtual-modules';
 import { Context, Overrides } from '../types';
 
 export function virtualModulesPlugin(context: Context, _: Overrides) {
-    if (!context.isWebComponent) {
-        return;
-    }
-
     const { destination } = context;
 
-    const indexPath = path.join(process.cwd(), `${destination}/index`);
-    const modules: ConstructorParameters<typeof VirtualModulesPlugin>[0] = {
-        [indexPath]: indexCode(context),
-    };
+    const modules: ConstructorParameters<typeof VirtualModulesPlugin>[0] = {};
+
+    if (context.isWebComponent) {
+        const indexPath = path.join(process.cwd(), destination, 'index');
+        modules[indexPath] = indexCode(context);
+    }
 
     if (needsToIncludeDesignSystem(context)) {
-        const designSystemPath = path.join(process.cwd(), `${destination}/design-system.css`);
+        const designSystemPath = getDesignSystemPath(context);
         if (!fs.existsSync(designSystemPath)) {
             modules[designSystemPath] = designSystemCode();
         }
     }
 
-    return new VirtualModulesPlugin(modules);
+    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() {
@@ -50,13 +52,22 @@ function indexCode(context: Context) {
     ].join('\n');
 }
 
-function needsToIncludeDesignSystem({ embed, headless, packageData, sharedDependencies }: Context) {
+function needsToIncludeDesignSystem({
+    embed,
+    emitExposedDependencies,
+    headless,
+    isWebComponent,
+    packageData,
+    sharedDependencies,
+}: Context) {
     return (
-        !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'])
+        (!!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']))
     );
 }
 

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

@@ -7,9 +7,11 @@ import {
     defineWebComponentNamePlugin,
     filterWarningsPlugin,
     htmlPlugin,
+    htmlTagsPlugin,
     ignorePlugin,
     miniCssExtractPlugin,
     momentLocalesPlugin,
+    removeEmptyScriptsPlugin,
     virtualModulesPlugin,
     watchRunPlugin,
 } from './plugins';
@@ -27,9 +29,11 @@ export function pluginsConfig(context: Context, overrides: Overrides): Result {
         defineWebComponentNamePlugin,
         filterWarningsPlugin,
         htmlPlugin,
+        htmlTagsPlugin,
         ignorePlugin,
         miniCssExtractPlugin,
         momentLocalesPlugin,
+        removeEmptyScriptsPlugin,
         virtualModulesPlugin,
         watchRunPlugin,
     ]

package/src/webpack/configs/rules/css-rules.ts

@@ -1,20 +1,11 @@
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import path from 'path';
 import { RuleSetRule } from 'webpack';
+import { log } from '../../../utils';
 import { cssLoader, styleLoader } from '../loaders';
 import { Context } from '../types';
 
-const sharedCssDependencies = [/design-system\.css$/, /@servicetitan[\\/]anvil2[\\/].*\.css$/];
-
 export function cssRules(context: Context): RuleSetRule[] {
-    const { isExposeSharedDependencies, isProduction } = context;
-
-    const excludeCallback = (path: string) => {
-        return (
-            path.endsWith('.module.css') ||
-            (isExposeSharedDependencies && sharedCssDependencies.some(regex => regex.test(path)))
-        );
-    };
-
+    const { emitExposedDependencies, isExposeSharedDependencies, sharedDependencies } = context;
     const result: RuleSetRule[] = [
         {
             test: /\.module.css$/,
@@ -22,18 +13,26 @@ export function cssRules(context: Context): RuleSetRule[] {
         },
         {
             test: /(\.css)$/,
-            exclude: isProduction ? /\.module.css$/ : excludeCallback,
+            exclude: /\.module.css$/,
             use: [styleLoader(context), cssLoader(context)],
         },
     ];
 
-    if (isExposeSharedDependencies && !isProduction) {
-        result.push(
-            ...sharedCssDependencies.map(test => ({
-                test,
-                use: [MiniCssExtractPlugin.loader, cssLoader(context)],
-            }))
-        );
+    if (
+        isExposeSharedDependencies &&
+        !!sharedDependencies['@servicetitan/design-system'] &&
+        !emitExposedDependencies
+    ) {
+        result.push({
+            test: /[\\/]design-system.css$/,
+            use({ issuer }) {
+                const filename = path.basename(issuer, '.js');
+                log.error(
+                    `Error: do not import design-system.css in "${filename}"; it is automatically included as a shared dependency`
+                );
+                process.exit(1);
+            },
+        });
     }
 
     return result;

package/src/webpack/configs/utils/get-bundle-type.ts

@@ -0,0 +1,22 @@
+import { Context } from '../types';
+
+export function getBundleType({
+    embed,
+    emitExposedDependencies,
+    headless,
+    isExposeSharedDependencies,
+    isWebComponent,
+}: Context) {
+    if (isExposeSharedDependencies && emitExposedDependencies) {
+        return 'shared';
+    }
+
+    if (isWebComponent) {
+        if (headless) {
+            return 'headless';
+        }
+        return embed ? 'light' : 'full';
+    }
+
+    return undefined;
+}

package/src/webpack/configs/utils/index.ts

@@ -1 +1,2 @@
 export * from './generate-metadata';
+export * from './get-bundle-type';

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

@@ -17,6 +17,7 @@ import {
 import {
     Context,
     amdConfig,
+    cacheConfig,
     devServerConfig,
     devtoolConfig,
     entryConfig,
@@ -30,11 +31,46 @@ import {
     watchOptionsConfig,
 } from './configs';
 import { Options, Overrides } from './types';
-import { getCallerFile } from './utils';
+import { getCallerFile, stringifyConfig } from './utils';
 
 export function createWebpackConfig(overrides: Overrides, options: Options = {}): Configuration {
-    const { configuration = {} } = overrides;
+    const context = getContext(overrides, options);
+    if (context.isWebComponent && isCalledFromCustomWebpackConfigFile()) {
+        throw new Error(WEB_COMPONENT_CONFIG_ERROR);
+    }
+
+    if (options.emitExposedDependencies && !context.isExposeSharedDependencies) {
+        throw new Error('package does not expose shared dependencies');
+    }
+
+    const configs = [
+        amdConfig,
+        cacheConfig,
+        devServerConfig,
+        devtoolConfig,
+        entryConfig,
+        externalsConfig,
+        moduleConfig,
+        optimizationConfig,
+        outputConfig,
+        pluginsConfig,
+        resolveConfig,
+        statsConfig,
+        watchOptionsConfig,
+    ];
 
+    const result = merge(
+        configs.reduce((result, fn) => ({ ...result, ...fn(context, overrides) }), {}),
+        overrides.configuration ?? {}
+    );
+
+    /* istanbul ignore next: debug only */
+    log.debug('create-webpack-config', () => stringifyConfig(result));
+
+    return result;
+}
+
+function getContext({ configuration = {} }: Overrides, options: Options): Context {
     const { source, destination } = getFolders();
     const { minify } = getWebpackConfiguration();
     const packageData = getPackageData();
@@ -43,10 +79,15 @@ export function createWebpackConfig(overrides: Overrides, options: Options = {})
         packageData.sharedDependencies
     );
 
-    const context: Context = {
-        codeCoverage: options.codeCoverage ?? !!(argv as Arguments)['code-coverage'],
+    const args = argv as Arguments;
+    const emitExposedDependencies =
+        options.emitExposedDependencies ?? !!args['exposed-dependencies'];
+
+    return {
+        codeCoverage: options.codeCoverage ?? !!args['code-coverage'],
         destination,
-        isCustomStyleRules: isCustomStyleRules(),
+        emitExposedDependencies,
+        isCustomStyleRules: !emitExposedDependencies && isCustomStyleRules(),
         isExposeSharedDependencies: isExposeSharedDependencies(),
         isLegacyRoot: isLegacyRoot(),
         isProduction: configuration.mode === 'production',
@@ -58,33 +99,6 @@ export function createWebpackConfig(overrides: Overrides, options: Options = {})
         sharedDependencies,
         source,
     };
-
-    if (context.isWebComponent && isCalledFromCustomWebpackConfigFile()) {
-        throw new Error(WEB_COMPONENT_CONFIG_ERROR);
-    }
-
-    const result = merge(
-        [
-            amdConfig,
-            devServerConfig,
-            devtoolConfig,
-            entryConfig,
-            externalsConfig,
-            moduleConfig,
-            optimizationConfig,
-            outputConfig,
-            pluginsConfig,
-            resolveConfig,
-            statsConfig,
-            watchOptionsConfig,
-        ].reduce((result, fn) => ({ ...result, ...fn(context, overrides) }), {}),
-        configuration
-    );
-
-    /* istanbul ignore next: debug only */
-    log.debug('create-webpack-config', () => stringify(result));
-
-    return result;
 }
 
 function isCalledFromCustomWebpackConfigFile() {
@@ -94,26 +108,6 @@ function isCalledFromCustomWebpackConfigFile() {
     );
 }
 
-/* istanbul ignore next: debug only */
-function stringify(configuration: any) {
-    function replacer(key: string, value: any) {
-        if (typeof value === 'function') {
-            return `Function(${value.name ?? ''})`;
-        }
-        if (value instanceof RegExp) {
-            return String(value);
-        }
-        if (key === 'plugins' && Array.isArray(value)) {
-            return value.map(plugin => {
-                const name = plugin.constructor?.name ?? plugin.name;
-                return name ? { [name]: plugin } : plugin;
-            });
-        }
-        return value;
-    }
-    return JSON.stringify(configuration, replacer, 2);
-}
-
 const WEB_COMPONENT_CONFIG_ERROR = `
     You cannot call createWebpackConfig in a custom webpack config file in a web component (MFE) project.
     Export webpack configuration itself as a default export from the config file instead.

package/src/webpack/types.ts

@@ -2,10 +2,14 @@ import { Options as HtmlWebpackPluginOptions } from 'html-webpack-plugin';
 import { PluginOptions as MiniCssExtractPlugInOptions } from 'mini-css-extract-plugin';
 import { Configuration } from 'webpack';
 
+export interface ExposedDependenciesConfig {
+    output?: Configuration['output'];
+}
 export interface Options {
     buildStat?: boolean;
     codeCoverage?: boolean;
     embed?: boolean;
+    emitExposedDependencies?: boolean | ExposedDependenciesConfig;
     headless?: boolean;
     name?: string;
 }

package/src/webpack/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './get-caller-filename';
 export * from './get-module-entry-path';
 export * from './split-by-entry';
+export * from './stringify-config';

package/src/webpack/utils/stringify-config.ts

@@ -0,0 +1,19 @@
+/* istanbul ignore next: debug only */
+export function stringifyConfig(configuration: any) {
+    function replacer(key: string, value: any) {
+        if (typeof value === 'function') {
+            return `Function(${value.name ?? ''})`;
+        }
+        if (value instanceof RegExp) {
+            return String(value);
+        }
+        if (key === 'plugins' && Array.isArray(value)) {
+            return value.map(plugin => {
+                const name = plugin.constructor?.name ?? plugin.name;
+                return name ? { [name]: plugin } : plugin;
+            });
+        }
+        return value;
+    }
+    return JSON.stringify(configuration, replacer, 2);
+}