@servicetitan/startup 36.3.1 → 37.0.0

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,25 +1,24 @@
-import fs from 'fs';
-import path from 'path';
 import { Configuration } from 'webpack';
-import { findUp } from '../../utils';
-import { Context, Overrides } from './types';
+import { BuildContext } from '../../core';
+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, packageManager } = context;
+export function cacheConfig(context: BuildContext, _overrides: Overrides): Result {
+    const { emitExposedDependencies } = context.build;
+    const { packageManager } = context.package;
     if (!emitExposedDependencies) {
         return;
     }
 
-    const packageLock = findPackageLock(packageManager.lockFileName);
+    const lockFilePath = packageManager.getLockFilePath();
     const cache: Config = {
         type: 'filesystem',
         version: CACHE_VERSION,
-        ...(packageLock ? { buildDependencies: { packageLock: [packageLock] } } : {}),
+        ...(lockFilePath ? { buildDependencies: { packageLock: [lockFilePath] } } : {}),
     };
 
     return {
@@ -28,10 +27,3 @@ export function cacheConfig(context: Context, _overrides: Overrides): Result {
         infrastructureLogging: { level: 'error' },
     };
 }
-
-function findPackageLock(lockFileName: string) {
-    return findUp(directory => {
-        const lockFile = path.resolve(path.join(directory), lockFileName);
-        return fs.existsSync(lockFile) ? lockFile : undefined;
-    });
-}

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

@@ -12,5 +12,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,9 @@
-import { Context } from '../types';
+import { BuildContext, bundleConstants } 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 { classnameTemplate } = bundleConstants.cssModules;
     const loader = 'css-loader';
     return esModule
         ? {
@@ -9,7 +11,9 @@ export function cssLoader({ isProduction }: Context, { esModule }: LoaderOptions
               options: {
                   esModule,
                   modules: {
-                      ...(isProduction ? { localIdentName: '[local]__[hash:base64:5]' } : {}),
+                      localIdentName: isProduction
+                          ? classnameTemplate.production
+                          : classnameTemplate.development,
                       exportLocalsConvention: 'camelCaseOnly',
                       namedExport: true,
                   },

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,15 @@
 import CssMinimizerWebpackPlugin from 'css-minimizer-webpack-plugin';
 import TerserPlugin from 'terser-webpack-plugin';
 import { Configuration } from 'webpack';
-import { Context, Overrides } from './types';
+import { CHUNK_PATTERNS } from '../../core';
+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',
@@ -23,29 +24,46 @@ export function optimizationConfig(context: Context, _: Overrides): Result {
         optimization.runtimeChunk = 'single';
     }
 
-    [minimizeConfig, sharedDependenciesConfig, webComponentConfig].forEach(handler =>
+    [hostConfig, minimizeConfig, sharedDependenciesConfig, webComponentConfig].forEach(handler =>
         handler(optimization, context)
     );
 
     return { optimization };
 }
 
-function minimizeConfig(optimization: ConfigWithCacheGroups, context: Context) {
-    const { isProduction, codeCoverage } = context;
+function hostConfig(optimization: ConfigWithCacheGroups, context: WebpackBuildContext) {
+    const { isProduction } = context.build;
+    const { isWebComponent } = context.package;
+    if (isWebComponent || !isProduction) {
+        return;
+    }
+
+    Object.assign(optimization.splitChunks.cacheGroups, vendorGroups());
+}
+
+function minimizeConfig(optimization: ConfigWithCacheGroups, context: WebpackBuildContext) {
+    const { isProduction } = context.build;
+    const { isWebComponent } = context.package;
+    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;
     }
 
+    /*
+     * MFE source maps are available to Datadog, so compress and mangle are OK.
+     * Disable for hosts until their source maps are uploaded too.
+     */
     const terserOptions = {
-        compress: false,
-        mangle: false,
+        compress: !!isWebComponent,
+        mangle: !!isWebComponent,
         ...(typeof minifyJs === 'object' ? minifyJs : {}),
     };
 
@@ -59,8 +77,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;
     }
@@ -71,44 +92,51 @@ function sharedDependenciesConfig(optimization: ConfigWithCacheGroups, context:
             name: 'anvil2',
             chunks: 'all',
             enforce: true,
+            // Must outrank vendor groups so anvil2 CSS lands in separate chunk
+            priority: 10,
         },
     });
 }
 
-function webComponentConfig(optimization: ConfigWithCacheGroups, context: Context) {
-    const { headless, isWebComponent, isProduction } = context;
-    if (!isWebComponent || headless) {
+function webComponentConfig(optimization: ConfigWithCacheGroups, context: WebpackBuildContext) {
+    const { headless, isProduction } = context.build;
+    const { isWebComponent } = context.package;
+    if (!isWebComponent) {
         return;
     }
 
+    const groups = vendorGroups();
+    const styles = { name: 'main', type: 'css/mini-extract', chunks: 'all', enforce: true };
+
     Object.assign(optimization.splitChunks.cacheGroups, {
-        styles: {
-            name: 'main',
-            type: 'css/mini-extract',
-            chunks: 'all',
-            enforce: true,
-        },
-        servicetitan: {
+        ...(headless ? {} : { styles }),
+        // assets-manifest-plugin requires servicetitan to order CSS correctly (headless has no CSS)
+        ...(isProduction ? groups : headless ? {} : { servicetitan: groups.servicetitan }),
+    });
+}
+
+function vendorGroups() {
+    return {
+        'servicetitan': {
             name: 'servicetitan',
-            test: /[\\/]node_modules[\\/]@servicetitan[\\/]/,
+            test: CHUNK_PATTERNS.servicetitan,
             chunks: 'all',
         },
-    });
-
-    if (!isProduction) {
-        return;
-    }
-
-    Object.assign(optimization.splitChunks.cacheGroups, {
-        common: {
-            name: 'common',
-            test: /[\\/]node_modules[\\/](axios|classnames|formstate|mobx|mobx-react|mobx-utils|react|react-dom|react-router|react-router-dom)[\\/]/,
+        'vendor-core': {
+            name: 'vendor-core',
+            test: CHUNK_PATTERNS['vendor-core'],
             chunks: 'all',
         },
-        kendo: {
+        'kendo': {
             name: 'kendo',
-            test: /[\\/]node_modules[\\/](@progress|@telerik)[\\/]/,
+            test: CHUNK_PATTERNS.kendo,
             chunks: 'all',
         },
-    });
+        'vendor': {
+            name: 'vendor',
+            test: CHUNK_PATTERNS.vendor,
+            chunks: 'all',
+            priority: -5,
+        },
+    };
 }

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

@@ -1,23 +1,22 @@
-import path from 'path';
 import { Configuration } from 'webpack';
-import { Context, Overrides } from './types';
-import { getBundleType } from './utils';
+import { BuildContext, getBundleType, getCdnPath } 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',
-        path: getOutputPath(context),
         clean: getClean(context),
         ...(emitExposedDependencies ? { chunkLoadingGlobal: `sharedChunk${name}` } : {}),
     };
 
     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 +27,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);
-}