@servicetitan/startup 37.0.2 → 38.1.0

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

@@ -2,10 +2,10 @@ import CssMinimizerWebpackPlugin from 'css-minimizer-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import { fs, vol } from 'memfs';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import MinimizerPlugin from 'minimizer-webpack-plugin';
 import MomentLocalesPlugin from 'moment-locales-webpack-plugin';
 import os from 'os';
 import path from 'path';
-import TerserPlugin from 'terser-webpack-plugin';
 import { DefinePlugin, IgnorePlugin, ProvidePlugin } from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
 import yargs from 'yargs';
@@ -41,7 +41,7 @@ jest.mock('mini-css-extract-plugin', () =>
     Object.assign(jest.fn(), { loader: 'MiniCssExtractPlugin.loader' })
 );
 jest.mock('moment-locales-webpack-plugin', () => jest.fn());
-jest.mock('terser-webpack-plugin', () => jest.fn());
+jest.mock('minimizer-webpack-plugin', () => jest.fn());
 jest.mock('webpack', () => ({
     DefinePlugin: jest.fn(),
     IgnorePlugin: jest.fn(),
@@ -131,7 +131,7 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
         jest.mocked(IgnorePlugin).mockImplementation(mockPlugIn('IgnorePlugin'));
         jest.mocked(MomentLocalesPlugin).mockImplementation(mockPlugIn('MomentLocalesPlugin'));
         jest.mocked(ProvidePlugin).mockImplementation(mockPlugIn('ProvidePlugin'));
-        jest.mocked(TerserPlugin).mockImplementation(mockPlugIn('TerserPlugin'));
+        jest.mocked(MinimizerPlugin).mockImplementation(mockPlugIn('MinimizerPlugin'));
 
         jest.mocked(getConfiguration).mockImplementation(() => configuration as any);
         jest.mocked(getWebpackConfiguration).mockImplementation(() => configuration.webpack ?? {});
@@ -582,7 +582,9 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
     });
 
     describe('when mode is "production"', () => {
-        const defaultTerserPluginOptions = { terserOptions: { compress: false, mangle: false } };
+        const defaultMinimizerPluginOptions = {
+            minimizerOptions: { compress: false, mangle: false },
+        };
         const defaultCssMinimizerOptions = {};
 
         beforeEach(() => {
@@ -652,7 +654,7 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
 
         test('configures "optimization.minimizer"', () => {
             expect(subject().optimization?.minimizer).toEqual([
-                new TerserPlugin(defaultTerserPluginOptions),
+                new MinimizerPlugin(defaultMinimizerPluginOptions),
                 new CssMinimizerWebpackPlugin(defaultCssMinimizerOptions),
             ]);
         });
@@ -702,7 +704,9 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
 
             test('applies the options', () => {
                 expect(subject().optimization?.minimizer).toEqual([
-                    new TerserPlugin({ terserOptions: configuration.webpack?.minify?.js as any }),
+                    new MinimizerPlugin({
+                        minimizerOptions: configuration.webpack?.minify?.js as any,
+                    }),
                 ]);
             });
         });

package/src/webpack/bundle-webpack.ts

@@ -3,6 +3,7 @@ import webpack, { Configuration } from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
 import { isDevServerDisabled, isExposeSharedDependencies, isWebComponent, log } from '../utils';
 import { createWebpackConfigs } from './create-webpack-configs';
+import { normalizeProxyConfig } from './utils';
 
 interface Options {
     buildStat?: boolean;
@@ -77,8 +78,13 @@ async function runServe({ devServer = {}, ...config }: Configuration) {
         host,
     });
 
+    const proxy = devServer.proxy && normalizeProxyConfig(devServer.proxy);
+
     return new Promise<void>((_0, reject) => {
-        const server = new WebpackDevServer({ ...devServer, host, port }, compiler);
+        const server = new WebpackDevServer(
+            { ...devServer, host, port, ...(proxy && { proxy }) },
+            compiler
+        );
         server.startCallback(e => {
             if (e) {
                 server.stopCallback(() => {

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

@@ -1,5 +1,5 @@
 import CssMinimizerWebpackPlugin from 'css-minimizer-webpack-plugin';
-import TerserPlugin from 'terser-webpack-plugin';
+import MinimizerPlugin from 'minimizer-webpack-plugin';
 import { Configuration } from 'webpack';
 import { CHUNK_PATTERNS } from '../../core';
 import { Overrides, WebpackBuildContext } from '../types';
@@ -61,7 +61,7 @@ function minimizeConfig(optimization: ConfigWithCacheGroups, context: WebpackBui
      * 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 = {
+    const minimizerOptions = {
         compress: !!isWebComponent,
         mangle: !!isWebComponent,
         ...(typeof minifyJs === 'object' ? minifyJs : {}),
@@ -72,7 +72,7 @@ function minimizeConfig(optimization: ConfigWithCacheGroups, context: WebpackBui
     };
 
     optimization.minimizer = [
-        ...(minifyJs ? [new TerserPlugin({ terserOptions })] : []),
+        ...(minifyJs ? [new MinimizerPlugin({ minimizerOptions })] : []),
         ...(minifyCss ? [new CssMinimizerWebpackPlugin(cssMinimizerPluginOptions)] : []),
     ];
 }

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

@@ -19,7 +19,7 @@ export function outputConfig(context: BuildContext, _: Overrides): Result {
         const cdnPath = getCdnPath(context);
         Object.assign(output, {
             filename: '[name].[contenthash].bundle.js',
-            ...(isWebComponent ? { uniqueName: name } : {}),
+            ...(isWebComponent ? { uniqueName: `${name}-${getBundleType(context)}` } : {}),
             ...(cdnPath ? { publicPath: cdnPath } : {}),
         });
     }

package/src/webpack/utils/__tests__/normalize-proxy-config.test.ts

@@ -0,0 +1,121 @@
+import { log } from '../../../utils';
+import { normalizeProxyConfig } from '../normalize-proxy-config';
+
+jest.mock('../../../utils', () => ({
+    ...jest.requireActual('../../../utils'),
+    log: { warning: jest.fn() },
+}));
+
+describe(`[startup] ${normalizeProxyConfig.name}`, () => {
+    const target = 'http://localhost:9000';
+
+    let proxy: Parameters<typeof normalizeProxyConfig>[0];
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        proxy = [{ context: ['/api'], target }];
+    });
+
+    const subject = () => normalizeProxyConfig(proxy);
+
+    test('returns items unchanged', () => {
+        expect(subject()).toEqual(proxy);
+    });
+
+    test('does not log a warning', () => {
+        subject();
+
+        expect(log.warning).not.toHaveBeenCalled();
+    });
+
+    describe.each`
+        legacyOption      | eventName
+        ${'onProxyReq'}   | ${'proxyReq'}
+        ${'onProxyRes'}   | ${'proxyRes'}
+        ${'onProxyReqWs'} | ${'proxyReqWs'}
+        ${'onOpen'}       | ${'open'}
+        ${'onClose'}      | ${'close'}
+        ${'onError'}      | ${'error'}
+    `('with a "$legacyOption" handler', ({ legacyOption, eventName }) => {
+        const handler = () => {};
+
+        beforeEach(() => {
+            (proxy[0] as Record<string, unknown>)[legacyOption] = handler;
+        });
+
+        test(`moves the handler to "on.${eventName}"`, () => {
+            const [item] = subject() as Record<string, unknown>[];
+
+            expect((item.on as Record<string, unknown>)[eventName]).toBe(handler);
+        });
+
+        test(`removes the legacy "${legacyOption}" option`, () => {
+            const [item] = subject() as Record<string, unknown>[];
+
+            expect(item[legacyOption]).toBeUndefined();
+        });
+
+        test('logs a deprecation warning', () => {
+            subject();
+
+            expect(log.warning).toHaveBeenCalled();
+        });
+    });
+
+    describe('with an existing "on" object', () => {
+        const existingHandler = () => {};
+        const legacyHandler = () => {};
+
+        beforeEach(() => {
+            Object.assign(proxy[0], {
+                on: { proxyRes: existingHandler },
+                onProxyReq: legacyHandler,
+            });
+        });
+
+        test('preserves the existing handler', () => {
+            const [item] = subject() as Record<string, unknown>[];
+
+            expect((item.on as Record<string, unknown>).proxyRes).toBe(existingHandler);
+        });
+
+        test('adds the migrated handler alongside it', () => {
+            const [item] = subject() as Record<string, unknown>[];
+
+            expect((item.on as Record<string, unknown>).proxyReq).toBe(legacyHandler);
+        });
+    });
+
+    describe('with a handler for the same event in both "on" and the legacy option', () => {
+        const onHandler = () => {};
+        const legacyHandler = () => {};
+
+        beforeEach(() => {
+            Object.assign(proxy[0], {
+                on: { proxyReq: onHandler },
+                onProxyReq: legacyHandler,
+            });
+        });
+
+        test('keeps the "on" handler', () => {
+            const [item] = subject() as Record<string, unknown>[];
+
+            expect((item.on as Record<string, unknown>).proxyReq).toBe(onHandler);
+        });
+    });
+
+    describe('with a proxy config function', () => {
+        const legacyHandler = () => {};
+
+        beforeEach(() => {
+            proxy = [() => ({ context: ['/api'], target, onProxyReq: legacyHandler }) as any];
+        });
+
+        test('migrates the object the function returns', () => {
+            const [item] = subject();
+            const result = (item as Function)() as Record<string, unknown>;
+
+            expect((result.on as Record<string, unknown>).proxyReq).toBe(legacyHandler);
+        });
+    });
+});

package/src/webpack/utils/index.ts

@@ -1,4 +1,5 @@
 export * from './create-webpack-build-context';
 export * from './get-caller-filename';
 export * from './get-module-entry-path';
+export * from './normalize-proxy-config';
 export * from './split-by-entry';

package/src/webpack/utils/normalize-proxy-config.ts

@@ -0,0 +1,59 @@
+import { Configuration } from 'webpack';
+import { log } from '../../utils';
+
+type DevServerConfig = NonNullable<Configuration['devServer']>;
+type ProxyConfig = NonNullable<DevServerConfig['proxy']>;
+type ProxyConfigItem = ProxyConfig[number];
+
+const LEGACY_PROXY_EVENTS = {
+    onProxyReq: 'proxyReq',
+    onProxyRes: 'proxyRes',
+    onProxyReqWs: 'proxyReqWs',
+    onOpen: 'open',
+    onClose: 'close',
+    onError: 'error',
+} as const;
+
+export function normalizeProxyConfig(proxy: ProxyConfig): ProxyConfig {
+    return proxy.map(item =>
+        typeof item === 'function'
+            ? (((...args: Parameters<typeof item>) =>
+                  migrateLegacyProxyEvents(item(...args))) as typeof item)
+            : migrateLegacyProxyEvents(item)
+    );
+}
+
+function migrateLegacyProxyEvents(item: ProxyConfigItem): ProxyConfigItem {
+    const source = item as Record<string, unknown>;
+    const legacyKeys = Object.keys(LEGACY_PROXY_EVENTS).filter(
+        key => source[key] !== undefined
+    ) as (keyof typeof LEGACY_PROXY_EVENTS)[];
+
+    if (!legacyKeys.length) {
+        return item;
+    }
+
+    log.warning(PROXY_EVENTS_DEPRECATION_WARNING);
+
+    const legacyOn: Record<string, unknown> = {};
+    const { on: modernOn, ...rest } = source;
+    for (const key of legacyKeys) {
+        legacyOn[LEGACY_PROXY_EVENTS[key]] = rest[key];
+        delete rest[key];
+    }
+
+    return {
+        ...rest,
+        on: { ...legacyOn, ...(modernOn as Record<string, unknown>) },
+    } as ProxyConfigItem;
+}
+
+const PROXY_EVENTS_DEPRECATION_WARNING = `
+    DEPRECATION WARNING: webpack-dev-server proxy config uses one or more legacy event options
+    (onProxyReq, onProxyRes, onProxyReqWs, onOpen, onClose, onError). These are moved to an "on"
+    object automatically, but support for the legacy options will be removed in a future release.
+    See the http-proxy-middleware v3 migration guide:
+    https://github.com/chimurai/http-proxy-middleware/blob/master/MIGRATION.md
+`
+    .replace(/\n\s*/g, ' ')
+    .trim();

package/tsconfig/types.d.ts

@@ -23,6 +23,16 @@ declare module '@servicetitan/anvil2/*.svg' {
     export default ReactComponent;
 }
 
+declare module '*.png' {
+    const content: string;
+    export default content;
+}
+
+declare module '*.gif' {
+    const content: string;
+    export default content;
+}
+
 declare module '*.less' {
     const content: string;
     export default content;

package/dist/cli/utils/get-bundle-command.d.ts

@@ -1,3 +0,0 @@
-import { resolveBundler } from './resolve-bundler';
-export declare function getBundleCommand(args: Parameters<typeof resolveBundler>[0]): string;
-//# sourceMappingURL=get-bundle-command.d.ts.map

package/dist/cli/utils/get-bundle-command.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"get-bundle-command.d.ts","sourceRoot":"","sources":["../../../src/cli/utils/get-bundle-command.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAEnF"}

package/dist/cli/utils/get-bundle-command.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "getBundleCommand", {
-    enumerable: true,
-    get: function() {
-        return getBundleCommand;
-    }
-});
-const _resolvebundler = require("./resolve-bundler");
-function getBundleCommand(args) {
-    return (0, _resolvebundler.resolveBundler)(args) === 'vite' ? 'startup bundle-vite' : 'startup bundle-webpack';
-}
-
-//# sourceMappingURL=get-bundle-command.js.map

package/dist/cli/utils/get-bundle-command.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/cli/utils/get-bundle-command.ts"],"sourcesContent":["import { resolveBundler } from './resolve-bundler';\n\nexport function getBundleCommand(args: Parameters<typeof resolveBundler>[0]): string {\n    return resolveBundler(args) === 'vite' ? 'startup bundle-vite' : 'startup bundle-webpack';\n}\n"],"names":["getBundleCommand","args","resolveBundler"],"mappings":";;;;+BAEgBA;;;eAAAA;;;gCAFe;AAExB,SAASA,iBAAiBC,IAA0C;IACvE,OAAOC,IAAAA,8BAAc,EAACD,UAAU,SAAS,wBAAwB;AACrE"}

package/src/cli/utils/__tests__/get-bundle-command.test.ts

@@ -1,23 +0,0 @@
-import { getBundleCommand } from '../get-bundle-command';
-
-describe(`[startup] ${getBundleCommand.name}`, () => {
-    let args: Parameters<typeof getBundleCommand>[0];
-
-    const subject = () => getBundleCommand(args);
-
-    describe('when bundler is vite', () => {
-        beforeEach(() => (args = { bundler: 'vite' }));
-
-        test('returns "startup bundle-vite"', () => {
-            expect(subject()).toBe('startup bundle-vite');
-        });
-    });
-
-    describe('when bundler is webpack', () => {
-        beforeEach(() => (args = { bundler: 'webpack' }));
-
-        test('returns "startup bundle-webpack"', () => {
-            expect(subject()).toBe('startup bundle-webpack');
-        });
-    });
-});

package/src/cli/utils/get-bundle-command.ts

@@ -1,5 +0,0 @@
-import { resolveBundler } from './resolve-bundler';
-
-export function getBundleCommand(args: Parameters<typeof resolveBundler>[0]): string {
-    return resolveBundler(args) === 'vite' ? 'startup bundle-vite' : 'startup bundle-webpack';
-}