@servicetitan/startup 32.1.0 → 32.3.0

package/src/webpack/__tests__/create-webpack-config-web-component.test.ts

@@ -15,7 +15,7 @@ import {
     isLegacyRoot,
     isWebComponent,
 } from '../../utils';
-import { webComponentStyleRules } from '../__mocks__';
+import { miniCssPluginStyleRules } from '../__mocks__';
 import { generateMetadata } from '../configs/utils';
 import { getCallerFile, splitByEntry } from '../utils';
 
@@ -119,6 +119,20 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
     const subject = () => createWebpackConfig(overrides, options);
 
     describe('when package is a web component', () => {
+        const baseCacheGroups = {
+            styles: {
+                name: 'main',
+                type: 'css/mini-extract',
+                chunks: 'all',
+                enforce: true,
+            },
+            servicetitan: {
+                name: 'servicetitan',
+                test: /[\\/]node_modules[\\/]@servicetitan[\\/]/,
+                chunks: 'all',
+            },
+        };
+
         beforeEach(() => jest.mocked(isWebComponent).mockReturnValue(true));
 
         test('configures MiniCssExtractPlugIn plugin', () => {
@@ -127,7 +141,7 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
             );
         });
 
-        Object.entries(webComponentStyleRules).forEach(([extension, rule]) => {
+        Object.entries(miniCssPluginStyleRules).forEach(([extension, rule]) => {
             test(`configures "${extension}" rules`, () => {
                 expect(subject().module?.rules).toContainEqual(rule);
             });
@@ -139,13 +153,9 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
             );
         });
 
-        test('configures "optimization.splitChunks.cacheGroups.styles', () => {
-            expect((subject().optimization?.splitChunks as any).cacheGroups.styles).toEqual({
-                name: 'main',
-                type: 'css/mini-extract',
-                chunks: 'all',
-                enforce: true,
-            });
+        test('configures "optimization.splitChunks.cacheGroups', () => {
+            // @ts-expect-error because splitChunks is polymorphic
+            expect(subject().optimization?.splitChunks.cacheGroups).toEqual(baseCacheGroups);
         });
 
         test('configures WEB_COMPONENT_NAME', () => {
@@ -183,6 +193,25 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
             });
         });
 
+        test('WebpackAssetsManifest plugin moves design system css to precede other css', () => {
+            const assets = {
+                entrypoints: {
+                    foo: {
+                        assets: {
+                            css: ['main.css', 'servicetitan.css', 'common.css'],
+                        },
+                    },
+                },
+            };
+
+            subject();
+
+            const transform: any = jest.mocked(WebpackAssetsManifest).mock.calls[0][0]?.transform;
+            expect(transform(assets)).toEqual(
+                expect.objectContaining({ css: ['servicetitan.css', 'main.css', 'common.css'] })
+            );
+        });
+
         test('generates metadata when WebpackAssetsManifest plugin is done', () => {
             subject();
 
@@ -373,27 +402,21 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
                 expect(subject().devtool).toBe('source-map');
             });
 
-            test('configures "optimization.splitChunks.cacheGroups"', () => {
+            test('adds "common" and "kendo" to "optimization.splitChunks.cacheGroups"', () => {
                 // @ts-expect-error because splitChunks is polymorphic
-                expect(subject().optimization?.splitChunks.cacheGroups).toEqual(
-                    expect.objectContaining({
-                        common: {
-                            name: 'common',
-                            test: /[\\/]node_modules[\\/](axios|classnames|formstate|mobx|mobx-react|mobx-utils|react|react-dom|react-router|react-router-dom)[\\/]/,
-                            chunks: 'all',
-                        },
-                        kendo: {
-                            name: 'kendo',
-                            test: /[\\/]node_modules[\\/](@progress|@telerik)[\\/]/,
-                            chunks: 'all',
-                        },
-                        servicetitan: {
-                            name: 'servicetitan',
-                            test: /[\\/]node_modules[\\/]@servicetitan[\\/]/,
-                            chunks: 'all',
-                        },
-                    })
-                );
+                expect(subject().optimization?.splitChunks.cacheGroups).toEqual({
+                    ...baseCacheGroups,
+                    common: {
+                        name: 'common',
+                        test: /[\\/]node_modules[\\/](axios|classnames|formstate|mobx|mobx-react|mobx-utils|react|react-dom|react-router|react-router-dom)[\\/]/,
+                        chunks: 'all',
+                    },
+                    kendo: {
+                        name: 'kendo',
+                        test: /[\\/]node_modules[\\/](@progress|@telerik)[\\/]/,
+                        chunks: 'all',
+                    },
+                });
             });
 
             test('configures "output.uniqueName"', () => {

package/src/webpack/configs/loaders/style-loader.ts

@@ -3,9 +3,12 @@ import { Context } from '../types';
 import { LoaderOptions } from './types';
 
 export function styleLoader(
-    { isProduction, isWebComponent }: Context,
+    { isProduction, isWebComponent, emitExposedDependencies }: Context,
     { esModule }: LoaderOptions = {}
 ) {
-    const loader = isProduction || isWebComponent ? MiniCssExtractPlugin.loader : 'style-loader';
+    const loader =
+        isProduction || isWebComponent || emitExposedDependencies
+            ? MiniCssExtractPlugin.loader
+            : 'style-loader';
     return esModule ? { loader, options: { esModule } } : loader;
 }

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

@@ -88,6 +88,11 @@ function webComponentConfig(optimization: ConfigWithCacheGroups, context: Contex
             chunks: 'all',
             enforce: true,
         },
+        servicetitan: {
+            name: 'servicetitan',
+            test: /[\\/]node_modules[\\/]@servicetitan[\\/]/,
+            chunks: 'all',
+        },
     });
 
     if (!isProduction) {
@@ -105,10 +110,5 @@ function webComponentConfig(optimization: ConfigWithCacheGroups, context: Contex
             test: /[\\/]node_modules[\\/](@progress|@telerik)[\\/]/,
             chunks: 'all',
         },
-        servicetitan: {
-            name: 'servicetitan',
-            test: /[\\/]node_modules[\\/]@servicetitan[\\/]/,
-            chunks: 'all',
-        },
     });
 }

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

@@ -12,18 +12,14 @@ export function outputConfig(context: Context, _: Overrides): Result {
     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 exposedDependenciesDir = getBundleType({ ...context, emitExposedDependencies: true });
         Object.assign(output, {
             filename: '[name].[contenthash].bundle.js',
-            clean:
-                exposedDependenciesDir && !emitExposedDependencies
-                    ? { keep: new RegExp(exposedDependenciesDir) }
-                    : true,
             ...(isWebComponent ? { uniqueName: name } : {}),
             ...(cdnPath ? { publicPath: cdnPath } : {}),
         });
@@ -32,6 +28,15 @@ export function outputConfig(context: Context, _: Overrides): Result {
     return { output };
 }
 
+function getClean(context: Context): NonNullable<Config>['clean'] {
+    const { emitExposedDependencies } = context;
+    if (emitExposedDependencies) {
+        return true;
+    }
+    const exposedDependenciesDir = getBundleType({ ...context, emitExposedDependencies: true });
+    return exposedDependenciesDir ? { keep: new RegExp(exposedDependenciesDir) } : true;
+}
+
 function getOutputPath(context: Context) {
     const { destination, emitExposedDependencies } = context;
 

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

@@ -26,13 +26,13 @@ export function assetsManifestPlugin(context: Context, _: Overrides) {
             entrypoints: Record<string, { assets: Record<string, string[]> }>;
         }): EntryPoints {
             const getAssetsByType = (type: string) => {
-                return Object.values(assets.entrypoints)
-                    .map(({ assets }) => assets[type] ?? [])
-                    .flat();
+                return Object.values(assets.entrypoints).flatMap(
+                    ({ assets }) => assets[type] ?? []
+                );
             };
 
             return {
-                css: getAssetsByType('css'),
+                css: ensureDesignSystemCssIsFirst(getAssetsByType('css')),
                 js: getAssetsByType('js'),
             };
         },
@@ -47,6 +47,13 @@ export function assetsManifestPlugin(context: Context, _: Overrides) {
     });
 }
 
+function ensureDesignSystemCssIsFirst(cssAssets: string[]) {
+    const offset = cssAssets.findIndex(name => name.startsWith('servicetitan'));
+    return offset > 0
+        ? [cssAssets[offset], ...cssAssets.filter((_, index) => index !== offset)]
+        : cssAssets;
+}
+
 export function getExposedDependenciesEntryPoints(context: Context) {
     const metadataPath = getExposedDependenciesMetadataPath(context);
     const metadata = readJsonSafe<Metadata>(metadataPath);

package/dist/cli/commands/get-user-commands.d.ts

@@ -1,7 +0,0 @@
-interface UserCommand {
-    name: string;
-    description: string;
-}
-export declare function getUserCommands(): UserCommand[];
-export {};
-//# sourceMappingURL=get-user-commands.d.ts.map

package/dist/cli/commands/get-user-commands.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"get-user-commands.d.ts","sourceRoot":"","sources":["../../../src/cli/commands/get-user-commands.ts"],"names":[],"mappings":"AAIA,UAAU,WAAW;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,eAAe,IAQwB,WAAW,EAAE,CACnE"}

package/dist/cli/commands/get-user-commands.js

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "getUserCommands", {
-    enumerable: true,
-    get: function() {
-        return getUserCommands;
-    }
-});
-const _utils = require("../../utils");
-const _getcommand = require("./get-command");
-function getUserCommands() {
-    return Object.values(_utils.CommandName).sort((a, b)=>a.localeCompare(b)).map((name)=>{
-        var _description, _this;
-        const Command = (0, _getcommand.getCommand)(name);
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        return {
-            name,
-            description: (_description = (_this = new Command({
-                _: []
-            })).description) === null || _description === void 0 ? void 0 : _description.call(_this)
-        };
-    }).filter(({ description })=>!!description);
-}
-
-//# sourceMappingURL=get-user-commands.js.map

package/dist/cli/commands/get-user-commands.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/cli/commands/get-user-commands.ts"],"sourcesContent":["import { CommandName } from '../../utils';\n\nimport { getCommand } from './get-command';\n\ninterface UserCommand {\n    name: string;\n    description: string;\n}\n\nexport function getUserCommands() {\n    return Object.values(CommandName)\n        .sort((a, b) => a.localeCompare(b))\n        .map(name => {\n            const Command = getCommand(name)!;\n            // eslint-disable-next-line @typescript-eslint/naming-convention\n            return { name, description: new Command({ _: [] }).description?.() };\n        })\n        .filter(({ description }) => !!description) as UserCommand[];\n}\n"],"names":["getUserCommands","Object","values","CommandName","sort","a","b","localeCompare","map","name","Command","getCommand","description","_","filter"],"mappings":";;;;+BASgBA;;;eAAAA;;;uBATY;4BAED;AAOpB,SAASA;IACZ,OAAOC,OAAOC,MAAM,CAACC,kBAAW,EAC3BC,IAAI,CAAC,CAACC,GAAGC,IAAMD,EAAEE,aAAa,CAACD,IAC/BE,GAAG,CAACC,CAAAA;YAG2B,cAAA;QAF5B,MAAMC,UAAUC,IAAAA,sBAAU,EAACF;QAC3B,gEAAgE;QAChE,OAAO;YAAEA;YAAMG,WAAW,GAAE,eAAA,CAAA,QAAA,IAAIF,QAAQ;gBAAEG,GAAG,EAAE;YAAC,IAAGD,WAAW,cAAlC,mCAAA,kBAAA;QAAuC;IACvE,GACCE,MAAM,CAAC,CAAC,EAAEF,WAAW,EAAE,GAAK,CAAC,CAACA;AACvC"}

package/src/cli/commands/__tests__/get-user-commands.test.ts

@@ -1,27 +0,0 @@
-/**
- * @jest-environment node
- */
-import { CommandName } from '../../../utils';
-import { getCommand } from '../get-command';
-import { getUserCommands } from '../get-user-commands';
-
-describe(`${getUserCommands.name}`, () => {
-    const subject = () => getUserCommands();
-
-    test('returns commands with descriptions', () => {
-        const descriptions = Object.values(CommandName)
-            .map(name => {
-                const Command = getCommand(name)!;
-                // eslint-disable-next-line @typescript-eslint/naming-convention
-                return new Command({ _: [] }).description?.();
-            })
-            .filter(description => !!description);
-
-        expect(subject().length).toBe(descriptions.length);
-    });
-
-    test('returns commands in ascending order by name', () => {
-        const names = subject().map(({ name }) => name);
-        expect(names).toEqual([...names].sort((a, b) => a.localeCompare(b)));
-    });
-});

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

@@ -1,19 +0,0 @@
-import { CommandName } from '../../utils';
-
-import { getCommand } from './get-command';
-
-interface UserCommand {
-    name: string;
-    description: string;
-}
-
-export function getUserCommands() {
-    return Object.values(CommandName)
-        .sort((a, b) => a.localeCompare(b))
-        .map(name => {
-            const Command = getCommand(name)!;
-            // eslint-disable-next-line @typescript-eslint/naming-convention
-            return { name, description: new Command({ _: [] }).description?.() };
-        })
-        .filter(({ description }) => !!description) as UserCommand[];
-}