@servicetitan/startup 31.3.2 → 31.5.0

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