@servicetitan/startup 25.0.0 → 26.0.0

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

@@ -6,6 +6,7 @@ import MomentLocalesPlugin from 'moment-locales-webpack-plugin';
 import os from 'os';
 import path from 'path';
 import { IgnorePlugin, ProvidePlugin } from 'webpack';
+import WebpackDevServer from 'webpack-dev-server';
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
 import { argv } from 'yargs';
@@ -13,6 +14,8 @@ import { argv } from 'yargs';
 import {
     Package,
     PackageType,
+    WebpackConfiguration,
+    getConfiguration,
     getFolders,
     getPackageData,
     getPackageDependencyVersion,
@@ -21,6 +24,7 @@ import {
     isCustomStyleRules,
     isWebComponent,
     loadSharedDependencies,
+    log,
 } from '../../utils';
 import { createPackage } from '../../__mocks__';
 import { fileRules, productionStyleRules, styleRules } from '../__mocks__';
@@ -47,6 +51,7 @@ jest.mock('webpack-virtual-modules', () => jest.fn());
 jest.mock('yargs', () => ({ argv: {} }));
 jest.mock('../../utils', () => ({
     ...jest.requireActual('../../utils'),
+    getConfiguration: jest.fn(),
     getFolders: jest.fn(),
     getPackageData: jest.fn(),
     getPackageDependencyVersion: jest.fn(),
@@ -56,7 +61,7 @@ jest.mock('../../utils', () => ({
     isExposeSharedDependencies: jest.fn(),
     isWebComponent: jest.fn(),
     loadSharedDependencies: jest.fn(),
-    log: { debug: jest.fn(), info: jest.fn() },
+    log: { debug: jest.fn(), info: jest.fn(), warning: jest.fn() },
 }));
 jest.mock('../utils', () => ({
     ...jest.requireActual('../utils'),
@@ -81,6 +86,7 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
     let packages: Package[];
     let overrides: Parameters<typeof createWebpackConfig>[0];
     let options: Parameters<typeof createWebpackConfig>[1];
+    let configuration: { webpack?: WebpackConfiguration };
 
     function mockPlugIn(name: string) {
         return (options: Record<string, any>): any => ({ [name]: options });
@@ -101,6 +107,7 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
             },
         };
         options = undefined;
+        configuration = {};
 
         jest.resetAllMocks();
         jest.mocked(MiniCssExtractPlugin).mockImplementation(mockPlugIn('MiniCssExtractPlugin'));
@@ -114,11 +121,16 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
         jest.mocked(MomentLocalesPlugin).mockImplementation(mockPlugIn('MomentLocalesPlugin'));
         jest.mocked(ProvidePlugin).mockImplementation(mockPlugIn('ProvidePlugin'));
 
+        jest.mocked(getConfiguration).mockImplementation(() => configuration as any);
         jest.mocked(getFolders).mockImplementation((location?: string) => {
             const prefix = location ? `${location.replace(/\W/g, '')}-` : '';
             return { source: `${prefix}${source}`, destination };
         });
-        jest.mocked(getPackageData).mockReturnValue({ dependencies, sharedDependencies });
+        jest.mocked(getPackageData).mockReturnValue({
+            name: packageName,
+            dependencies,
+            sharedDependencies,
+        });
         jest.mocked(getPackageDependencyVersion).mockImplementation(
             (_, defaultVersion) => defaultVersion
         );
@@ -181,16 +193,100 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
         expect(subject().amd).toEqual(false);
     });
 
+    const defaultDefServerConfig = {
+        hot: false,
+        port: 8080,
+        historyApiFallback: true,
+        devMiddleware: { stats: expect.anything(), writeToDisk: true },
+        headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept',
+        },
+        static: '.',
+    };
+
     test('configures "devServer"', () => {
-        expect(subject().devServer).toEqual({
-            port: 8080,
-            historyApiFallback: true,
-            writeToDisk: true,
-            headers: {
-                'Access-Control-Allow-Origin': '*',
-                'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept',
-            },
-            stats: expect.anything(),
+        expect(subject().devServer).toEqual(defaultDefServerConfig);
+    });
+
+    describe('with custom devServer options', () => {
+        const options: WebpackDevServer.Configuration = {
+            // allowed options
+            headers: { foo: 'bar' },
+            port: 9000,
+            proxy: [{ context: ['/foo'] }],
+            static: 'foo',
+            // disallowed options
+            compress: true,
+            client: { logging: 'verbose', overlay: false },
+        };
+
+        beforeEach(() => (configuration = { webpack: options }));
+
+        test('adds allowed options to "devServer" configuration', () => {
+            expect(subject().devServer).toEqual({
+                ...defaultDefServerConfig,
+                headers: options.headers,
+                port: options.port,
+                proxy: options.proxy,
+                static: options.static,
+            });
+        });
+
+        describe('with "devServer" option', () => {
+            beforeEach(() => (configuration.webpack = { devServer: options }));
+
+            test('adds all options to "devServer" configuration', () => {
+                expect(subject().devServer).toEqual({
+                    ...defaultDefServerConfig,
+                    ...options,
+                });
+            });
+        });
+
+        describe('when "proxy" is a path', () => {
+            const proxy = 'proxy.js';
+            const proxyConfig = { context: ['/bar'] };
+
+            beforeEach(() => (configuration.webpack!.proxy = proxy));
+
+            describe('when file does not exist', () => {
+                test('drops the proxy option', () => {
+                    expect(subject().devServer!.proxy).toBeUndefined();
+                });
+            });
+
+            describe('when file exists', () => {
+                beforeEach(() => {
+                    vol.fromJSON({ [proxy]: JSON.stringify(proxyConfig) });
+
+                    // Have to mock proxy file because our fs is virtual, but require() is not
+                    jest.doMock(path.resolve(proxy), () => proxyConfig, {
+                        virtual: true,
+                    });
+                });
+
+                test('loads proxy option from the file', () => {
+                    expect(subject().devServer!.proxy).toEqual(proxyConfig);
+                });
+            });
+        });
+
+        describe('when options omits "static"', () => {
+            beforeEach(() => delete configuration.webpack!.static);
+
+            describe('when options includes "contentBase"', () => {
+                const contentBase = 'src/public';
+
+                beforeEach(() => (configuration.webpack!.contentBase = contentBase));
+
+                test('moves "contentBase" value to "static" and logs deprecation warning', () => {
+                    expect(subject().devServer!.static).toEqual(contentBase);
+                    expect(log.warning).toHaveBeenCalledWith(
+                        expect.stringMatching('DEPRECATION WARNING')
+                    );
+                });
+            });
         });
     });
 
@@ -210,11 +306,11 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
             ];
         });
 
-        test('configures "devServer.watchOptions" to ignore TSC packages', () => {
+        test('configures "watchOptions" to ignore TSC packages', () => {
             const ignored = packages
                 .filter(({ type }) => type === PackageType.TSC)
                 .map(({ location }) => location);
-            expect(subject().devServer?.watchOptions).toEqual({ ignored });
+            expect(subject().watchOptions).toEqual({ ignored });
         });
     });
 
@@ -381,29 +477,61 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
             jest.useFakeTimers(); // because filename includes timestamp
         });
 
-        const reportFilename = (type: string) =>
-            path.join(os.tmpdir(), `report-${type}-bundle-${Date.now()}.html`);
+        function reportFilename(type?: string) {
+            return path.join(
+                os.tmpdir(),
+                `${packageName}${type ? `-${type}` : ''}-bundle-${Date.now()}.html`
+            );
+        }
+
+        function reportTitle(type?: string) {
+            const date = new Date();
+
+            const timestamp = `${date.getFullYear()}-${
+                date.getMonth() + 1
+            }-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`;
+
+            return `${packageName.replace('@servicetitan/', '')}${
+                type ? ` (${type})` : ''
+            } ${timestamp}`;
+        }
 
         test('configures BundleAnalyzerPlugin plugin', () => {
             expect(subject().plugins).toContainEqual(
                 new BundleAnalyzerPlugin({
                     analyzerMode: 'static',
-                    reportFilename: reportFilename('full'),
+                    reportFilename: reportFilename(),
+                    reportTitle: reportTitle(),
                 })
             );
         });
 
-        describe('when embed option is set to true', () => {
-            beforeEach(() => setOptions({ embed: true }));
+        describe('when package is web component', () => {
+            beforeEach(() => jest.mocked(isWebComponent).mockReturnValue(true));
 
-            test('changes BundleAnalyzerPlugin reportFilename from "full" to "light"', () => {
+            test('adds "full" to reportFilename and reportTitle', () => {
                 expect(subject().plugins).toContainEqual(
                     new BundleAnalyzerPlugin({
                         analyzerMode: 'static',
-                        reportFilename: reportFilename('light'),
+                        reportFilename: reportFilename('full'),
+                        reportTitle: reportTitle('full'),
                     })
                 );
             });
+
+            describe('when embed option is set to true', () => {
+                beforeEach(() => setOptions({ embed: true }));
+
+                test('adds "light" to reportFilename and reportTitle', () => {
+                    expect(subject().plugins).toContainEqual(
+                        new BundleAnalyzerPlugin({
+                            analyzerMode: 'static',
+                            reportFilename: reportFilename('light'),
+                            reportTitle: reportTitle('light'),
+                        })
+                    );
+                });
+            });
         });
     });
 

package/src/webpack/configs/dev-server-config.ts

@@ -1,36 +1,85 @@
+import fs from 'fs';
+import path from 'path';
 import { Configuration } from 'webpack';
-import { PackageType, getDevServerConfiguration, getPackageName, getPackages } from '../../utils';
+import {
+    PackageType,
+    allowedWebpackDevServerOptions,
+    getConfiguration,
+    getPackageName,
+    getPackages,
+    log,
+    pick,
+} from '../../utils';
 import { statsConfig } from './stats-config';
 import { Context, Overrides } from './types';
 
-type Config = Configuration['devServer'];
-type Result = Pick<Configuration, 'devServer'> | undefined;
+type DevServerConfig = NonNullable<Configuration['devServer']>;
+type WatchOptionsConfig = NonNullable<Configuration['watchOptions']>;
+type Result = Pick<Configuration, 'devServer' | 'watchOptions'> | undefined;
 
 export function devServerConfig(context: Context, overrides: Overrides): Result {
     if (context.isProduction) {
         return;
     }
 
-    const devServer: Config = {
+    const watchOptions = watchOptionsConfig();
+    const devServer = {
+        hot: false,
         port: 8080,
         historyApiFallback: true,
-        writeToDisk: true,
+        devMiddleware: { writeToDisk: true, ...statsConfig(context, overrides) },
         headers: {
             'Access-Control-Allow-Origin': '*',
             'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept',
         },
-        ...watchOptionsConfig(),
-        ...statsConfig(context, overrides),
-        ...getDevServerConfiguration(),
+        ...getDevServerConfig(),
     };
 
-    return { devServer };
+    /* istanbul ignore next: debug only */
+    log.debug('dev-server-config', () => JSON.stringify({ devServer, watchOptions }, null, 2));
+    return { devServer, watchOptions };
 }
 
-function watchOptionsConfig() {
-    const watchIgnore = getPackages({ scope: getPackageName() })
+function getDevServerConfig() {
+    const webpack = getConfiguration().webpack || {}; // eslint-disable-line @typescript-eslint/prefer-nullish-coalescing
+    /* istanbul ignore next: debug only */
+    log.debug('dev-server-config', () => JSON.stringify({ webpack }, null, 2));
+
+    const result = pick(webpack, allowedWebpackDevServerOptions);
+    if (typeof result.proxy === 'string') {
+        if (fs.existsSync(result.proxy)) {
+            result.proxy = require(path.resolve(result.proxy));
+        } else {
+            delete result.proxy;
+        }
+    }
+
+    if (result.static === undefined) {
+        const contentBase = webpack.contentBase;
+        if (contentBase !== undefined) {
+            log.warning(CONTENT_BASE_DEPRECATION_WARNING);
+            if (typeof contentBase !== 'number') {
+                result.static = contentBase;
+            }
+        } else {
+            result.static = '.';
+        }
+    }
+
+    return { ...result, ...webpack.devServer } as Partial<DevServerConfig>;
+}
+
+function watchOptionsConfig(): WatchOptionsConfig {
+    const ignored = getPackages({ scope: getPackageName() })
         .filter(({ type }) => type === PackageType.TSC)
         .map(({ location }) => location);
 
-    return watchIgnore.length ? { watchOptions: { ignored: watchIgnore } } : undefined;
+    return { ignored };
 }
+
+const CONTENT_BASE_DEPRECATION_WARNING = `
+    DEPRECATION WARNING: webpack.contentBase in package.json is deprecated.
+    Use webpack.static instead.
+`
+    .replace(/\n\s*/g, ' ')
+    .trim();

package/src/webpack/configs/plugins/bundle-analyser-plugin.ts

@@ -3,16 +3,42 @@ import os from 'os';
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 import { Context, Overrides } from '../types';
 
-export function bundleAnalyzerPlugin({ buildStat, embed }: Context, _: Overrides) {
-    if (!buildStat) {
+export function bundleAnalyzerPlugin(context: Context, _: Overrides) {
+    if (!context.buildStat) {
         return;
     }
 
     return new BundleAnalyzerPlugin({
         analyzerMode: 'static',
-        reportFilename: path.join(
-            os.tmpdir(),
-            `report-${embed ? 'light' : 'full'}-bundle-${Date.now()}.html`
-        ),
+        reportFilename: path.join(os.tmpdir(), getReportFileName(context)),
+        reportTitle: getReportTitle(context),
     });
 }
+
+function getBundleType({ embed, isWebComponent }: Context) {
+    if (isWebComponent) {
+        return embed ? 'light' : 'full';
+    }
+}
+
+function getReportFileName(context: Context) {
+    const type = getBundleType(context);
+    const qualifier = type ? `-${type}` : '';
+    return `${context.packageData.name}${qualifier}-bundle-${Date.now()}.html`;
+}
+
+function getReportTitle(context: Context) {
+    const unscopedName = context.packageData.name.replace(/^@[^/]+\//, '');
+    const type = getBundleType(context);
+    const qualifier = type ? ` (${type})` : '';
+    return `${unscopedName}${qualifier} ${formatDate(new Date())}`;
+}
+
+function formatDate(date: Date) {
+    const yyyy = date.getFullYear();
+    const mm = date.getMonth() + 1;
+    const dd = date.getDate();
+    const HH = date.getHours();
+    const MM = date.getMinutes();
+    return `${yyyy}-${mm}-${dd} ${HH}:${MM}`;
+}

package/src/webpack/configs/utils/__tests__/generate-metadata.test.ts

@@ -34,7 +34,7 @@ describe(`[startup] ${generateMetadata.name}`, () => {
         context = {
             destination,
             name: pkg.name,
-            packageData: { dependencies: { foo: '1.0.1' } },
+            packageData: { name: pkg.name, dependencies: { foo: '1.0.1' } },
             sharedDependencies: { react: 'SharedDependencies.React' },
         };
     });