@servicetitan/startup 22.18.0 → 22.20.0

package/src/cli/utils/bundle.ts

@@ -12,6 +12,8 @@ import { Overrides, createWebpackConfig } from '../../webpack';
 interface Options {
     buildStat?: boolean;
     config?: string;
+    esbuild?: boolean;
+    experimentalBundlers?: boolean;
 }
 
 function getName() {
@@ -33,7 +35,7 @@ export async function bundle(options: Options = {}) {
     const mode = 'production';
     const fallback = `./${webpackProdConfigFileName}`;
     const config = readWebpackConfig({ ...options, fallback });
-    const { buildStat } = options;
+    const { buildStat, esbuild, experimentalBundlers } = options;
 
     const run = async (config: Configuration) => {
         const compiler = webpack(config);
@@ -55,6 +57,8 @@ export async function bundle(options: Options = {}) {
         process.stdout.write(stats.toString(config.stats) + '\n');
     };
 
+    const webpackOptions = { name, buildStat, esbuild, experimentalBundlers };
+
     if (isWebComponent()) {
         const webpackConfig: Overrides = {
             configuration: { ...config?.configuration, mode },
@@ -62,12 +66,12 @@ export async function bundle(options: Options = {}) {
         };
 
         return Promise.all([
-            run(createWebpackConfig(webpackConfig, { embed: true, name, buildStat })),
-            run(createWebpackConfig(webpackConfig, { name, buildStat })),
+            run(createWebpackConfig(webpackConfig, { embed: true, ...webpackOptions })),
+            run(createWebpackConfig(webpackConfig, webpackOptions)),
         ]);
     }
 
-    return run(config ?? createWebpackConfig({ configuration: { mode } }, { buildStat, name }));
+    return run(config ?? createWebpackConfig({ configuration: { mode } }, webpackOptions));
 }
 
 export async function bundleWatch(options: Options = {}) {
@@ -76,6 +80,7 @@ export async function bundleWatch(options: Options = {}) {
     const name = getName();
     const mode = 'development';
     const config = readWebpackConfig({ ...options, fallback: `./${webpackDevConfigFileName}` });
+    const { esbuild, experimentalBundlers } = options;
 
     const runServe = async ({ devServer = {}, ...config }: Configuration) => {
         const compiler = webpack(config);
@@ -118,12 +123,25 @@ export async function bundleWatch(options: Options = {}) {
         };
 
         return Promise.all([
-            run(createWebpackConfig(webpackConfig, { embed: true, name })),
-            runServe(createWebpackConfig(webpackConfig, { name })),
+            run(
+                createWebpackConfig(webpackConfig, {
+                    embed: true,
+                    name,
+                    esbuild,
+                    experimentalBundlers,
+                })
+            ),
+            runServe(createWebpackConfig(webpackConfig, { name, esbuild, experimentalBundlers })),
         ]);
     }
 
-    return runServe(config ?? createWebpackConfig({ configuration: { mode } }, { name }));
+    return runServe(
+        config ??
+            createWebpackConfig(
+                { configuration: { mode } },
+                { name, esbuild, experimentalBundlers }
+            )
+    );
 }
 
 function readWebpackConfig({ config, fallback }: Options & { fallback: string }) {

package/src/utils/__tests__/get-configuration.test.ts

@@ -1,4 +1,7 @@
-import mockFS from 'mock-fs';
+import { fs, vol } from 'memfs';
+import WebpackDevServer from 'webpack-dev-server';
+import path from 'path';
+
 import {
     getConfiguration,
     getConfigurationSafe,
@@ -13,7 +16,8 @@ import {
     isStyleCheckDisabled,
     isWebComponent,
 } from '../get-configuration';
-import WebpackDevServer from 'webpack-dev-server';
+
+jest.mock('fs', () => fs);
 
 describe('[startup] Utils', () => {
     const packageJson = 'package.json';
@@ -23,7 +27,7 @@ describe('[startup] Utils', () => {
     }
 
     function mockPackageJson(content: Record<string, any> = {}) {
-        mockFS(packageJsonFS(content));
+        vol.fromJSON(packageJsonFS(content));
     }
 
     function itReturns(subject: Function, value: any) {
@@ -32,7 +36,7 @@ describe('[startup] Utils', () => {
 
     beforeEach(() => mockPackageJson());
 
-    afterEach(() => mockFS.restore());
+    afterEach(() => jest.resetAllMocks());
 
     describe(`${getConfiguration.name}`, () => {
         let location: string | undefined;
@@ -56,7 +60,7 @@ describe('[startup] Utils', () => {
 
             beforeEach(() => {
                 location = 'packages/foo';
-                mockFS({ packages: { foo: { [packageJson]: JSON.stringify({ cli }) } } });
+                vol.fromJSON({ [`packages/foo/${packageJson}`]: JSON.stringify({ cli }) });
             });
 
             test("returns location's cli", () => {
@@ -65,7 +69,7 @@ describe('[startup] Utils', () => {
         });
 
         describe('with no package.json', () => {
-            beforeEach(() => mockFS({}));
+            beforeEach(() => vol.reset());
 
             test('throws error', () => {
                 expect(subject).toThrowError();
@@ -95,7 +99,7 @@ describe('[startup] Utils', () => {
 
             beforeEach(() => {
                 location = 'packages/foo';
-                mockFS({ packages: { foo: { [packageJson]: JSON.stringify({ cli }) } } });
+                vol.fromJSON({ [`packages/foo/${packageJson}`]: JSON.stringify({ cli }) });
             });
 
             test("returns location's cli", () => {
@@ -104,7 +108,7 @@ describe('[startup] Utils', () => {
         });
 
         describe('with no package.json', () => {
-            beforeEach(() => mockFS({}));
+            beforeEach(() => vol.reset());
 
             itReturns(subject, {});
         });
@@ -135,7 +139,7 @@ describe('[startup] Utils', () => {
             });
 
             describe('when "cli.webpack.proxy" is a path', () => {
-                const proxy = 'proxy.json';
+                const proxy = 'proxy.js';
                 const proxyConfig = { cli: { webpack: { ...webpack, proxy } } };
 
                 beforeEach(() => mockPackageJson(proxyConfig));
@@ -148,12 +152,14 @@ describe('[startup] Utils', () => {
 
                 describe('when file exists', () => {
                     beforeEach(() => {
-                        mockFS({
+                        vol.fromJSON({
                             ...packageJsonFS(proxyConfig),
                             [proxy]: JSON.stringify(webpack.proxy),
-                            // Need node_modules so Jest can require() json file
-                            // eslint-disable-next-line @typescript-eslint/naming-convention
-                            node_modules: mockFS.load('./node_modules'),
+                        });
+
+                        // Have to mock proxy.js because our fs is virtual, but require() is not
+                        jest.doMock(path.resolve('proxy.js'), () => webpack.proxy, {
+                            virtual: true,
                         });
                     });
 
@@ -265,7 +271,7 @@ describe('[startup] Utils', () => {
         describe('with a location', () => {
             beforeEach(() => {
                 location = 'packages/foo';
-                mockFS({ packages: { foo: { [packageJson]: JSON.stringify(trigger) } } });
+                vol.fromJSON({ [`packages/foo/${packageJson}`]: JSON.stringify(trigger) });
             });
 
             test("returns location's status", () => {

package/src/utils/__tests__/get-destination-folders.test.ts

@@ -1,9 +1,9 @@
-import fs from 'fs';
-import mockFS from 'mock-fs';
+import { fs, vol } from 'memfs';
 import { getPackages } from '../get-packages';
 
 import { getDestinationFolders } from '../get-destination-folders';
 
+jest.mock('fs', () => fs);
 jest.mock('../get-packages', () => ({ getPackages: jest.fn() }));
 
 describe('[startup] Utils', () => {
@@ -12,28 +12,26 @@ describe('[startup] Utils', () => {
 
         beforeEach(() => {
             locations = ['foo', 'bar'];
-            mockFS(packageFS(locations));
+            vol.fromJSON(packageFS(locations));
             jest.mocked(getPackages).mockImplementation((): any =>
                 locations.map(location => ({ location: `packages/${location}` }))
             );
         });
 
-        afterEach(() => mockFS.restore());
+        afterEach(() => vol.reset());
 
         const subject = () => getDestinationFolders();
 
         function packageFS(locations: string[]) {
             const packages = Object.fromEntries(
                 locations.map(location => [
-                    location,
-                    {
-                        'tsconfig.json': JSON.stringify({
-                            compilerOptions: { outDir: `${location}outDir` },
-                        }),
-                    },
+                    `packages/${location}/tsconfig.json`,
+                    JSON.stringify({
+                        compilerOptions: { outDir: `${location}outDir` },
+                    }),
                 ])
             );
-            return { packages };
+            return packages;
         }
 
         function expectedOutDirs(locations: string[]) {
@@ -45,7 +43,7 @@ describe('[startup] Utils', () => {
         });
 
         describe('when package has no tsconfig', () => {
-            beforeEach(() => mockFS(packageFS(locations.slice(1))));
+            beforeEach(() => fs.rmSync(`packages/${locations[0]}/tsconfig.json`));
 
             test('omits location from result', () => {
                 expect(subject()).toEqual(expectedOutDirs(locations.slice(1)));
@@ -54,7 +52,7 @@ describe('[startup] Utils', () => {
 
         describe('when tsconfig has no "outDir"', () => {
             beforeEach(() => {
-                fs.writeFileSync(`packages/${locations[0]}/tsconfig.json`, JSON.stringify({}));
+                vol.fromJSON({ [`packages/${locations[0]}/tsconfig.json`]: JSON.stringify({}) });
             });
 
             test('omits location from result', () => {

package/src/utils/__tests__/get-folders.test.ts

@@ -1,14 +1,16 @@
-import mock from 'mock-fs';
+import { fs, vol } from 'memfs';
 
 import { getFolders } from '..';
 
+jest.mock('fs', () => fs);
+
 describe('[Startup] utils:get-folders', () => {
     afterAll(() => {
-        mock.restore();
+        vol.reset();
     });
 
     test('getFolders throws an exception if "compilerOptions.rootDir" isn\'t defined', () => {
-        mock({
+        vol.fromJSON({
             'package.json': JSON.stringify({}),
             'tsconfig.json': JSON.stringify({ compilerOptions: { ourDir: 'dist' } }),
         });
@@ -25,7 +27,7 @@ describe('[Startup] utils:get-folders', () => {
     });
 
     test('getFolders throws an exception if "compilerOptions.outDir" isn\'t defined', () => {
-        mock({
+        vol.fromJSON({
             'package.json': JSON.stringify({}),
             'tsconfig.json': JSON.stringify({ compilerOptions: { rootDir: 'src' } }),
         });
@@ -42,7 +44,7 @@ describe('[Startup] utils:get-folders', () => {
     });
 
     test('"compilerOptions.outDir" used as the destination', () => {
-        mock({
+        vol.fromJSON({
             'package.json': JSON.stringify({}),
             'tsconfig.json': JSON.stringify({
                 compilerOptions: { rootDir: 'src', outDir: 'path' },
@@ -53,7 +55,7 @@ describe('[Startup] utils:get-folders', () => {
     });
 
     test('"compilerOptions.rootDir" used as the source', () => {
-        mock({
+        vol.fromJSON({
             'package.json': JSON.stringify({}),
             'tsconfig.json': JSON.stringify({
                 compilerOptions: { rootDir: 'path', outDir: 'dist' },

package/src/utils/__tests__/get-tsconfig.test.ts

@@ -1,8 +1,10 @@
-import mockFS from 'mock-fs';
+import { fs, vol } from 'memfs';
 import path from 'path';
 
 import { getTsConfig } from '../get-tsconfig';
 
+jest.mock('fs', () => fs);
+
 describe(`[startup] Utils`, () => {
     describe(`${getTsConfig.name}`, () => {
         const defaultConfig = 'tsconfig.json';
@@ -13,14 +15,14 @@ describe(`[startup] Utils`, () => {
 
         beforeEach(() => (location = undefined));
 
-        afterEach(() => mockFS.restore());
+        afterEach(() => vol.reset());
 
         test(`returns ${defaultConfig}`, () => {
             expect(subject()).toBe(defaultConfig);
         });
 
         describe(`when ${buildConfig} is present`, () => {
-            beforeEach(() => mockFS({ [buildConfig]: JSON.stringify({}) }));
+            beforeEach(() => vol.fromJSON({ [buildConfig]: JSON.stringify({}) }));
 
             test(`returns ${buildConfig}`, () => {
                 expect(subject()).toBe(buildConfig);
@@ -36,7 +38,7 @@ describe(`[startup] Utils`, () => {
 
             describe(`when ${buildConfig} is present`, () => {
                 beforeEach(() => {
-                    mockFS({ packages: { foo: { [buildConfig]: JSON.stringify({}) } } });
+                    vol.fromJSON({ [`packages/foo/${buildConfig}`]: JSON.stringify({}) });
                 });
 
                 test(`returns {location}/${buildConfig}`, () => {

package/src/utils/__tests__/read-json.test.ts

@@ -1,14 +1,16 @@
-import mock from 'mock-fs';
+import { fs, vol } from 'memfs';
 
 import { readJson } from '..';
 
+jest.mock('fs', () => fs);
+
 describe('[Startup] utils:read-json', () => {
     afterAll(() => {
-        mock.restore();
+        vol.reset();
     });
 
     test('readJson works with the current directory', () => {
-        mock({
+        vol.fromJSON({
             'file.json': JSON.stringify({
                 a: true,
                 b: 'string',
@@ -28,20 +30,14 @@ describe('[Startup] utils:read-json', () => {
     });
 
     test('readJson works with the nested directory', () => {
-        mock({
-            path: {
-                to: {
-                    folder: {
-                        'file.json': JSON.stringify({
-                            a: true,
-                            b: 'string',
-                            c: {
-                                d: 7,
-                            },
-                        }),
-                    },
+        vol.fromJSON({
+            'path/to/folder/file.json': JSON.stringify({
+                a: true,
+                b: 'string',
+                c: {
+                    d: 7,
                 },
-            },
+            }),
         });
 
         expect(readJson('./path/to/folder/file.json')).toEqual({

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

@@ -1,6 +1,6 @@
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import mockFS from 'mock-fs';
+import { fs, vol } from 'memfs';
 import path from 'path';
 import { DefinePlugin } from 'webpack';
 import WebpackAssetsManifest from 'webpack-assets-manifest';
@@ -14,6 +14,7 @@ import { featureCohort, getCallerFile, splitByEntry } from '../utils';
 
 import { createWebpackConfig } from '../index';
 
+jest.mock('fs', () => fs);
 jest.mock('fork-ts-checker-webpack-plugin', () => jest.fn());
 jest.mock('html-webpack-plugin', () => jest.fn());
 jest.mock('mini-css-extract-plugin', () =>
@@ -86,10 +87,10 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
         jest.mocked(getPackages).mockReturnValue([]);
         jest.mocked(getTsConfig).mockReturnValue(tsConfig);
 
-        mockFS({ [packageJson]: JSON.stringify({ name: packageName }) });
+        vol.fromJSON({ [packageJson]: JSON.stringify({ name: packageName }) });
     });
 
-    afterEach(() => mockFS.restore());
+    afterEach(() => vol.reset());
 
     const subject = () => createWebpackConfig(overrides, options);
 
@@ -222,9 +223,9 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
 
         describe('when design-system.css exists', () => {
             beforeEach(() => {
-                mockFS({
+                vol.fromJSON({
                     [packageJson]: JSON.stringify({ name: packageName }),
-                    [source]: { 'design-system.css': '' },
+                    [`${source}/design-system.css`]: '',
                 });
             });
 

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

@@ -1,7 +1,7 @@
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import mockFS from 'mock-fs';
+import { fs, vol } from 'memfs';
 import MomentLocalesPlugin from 'moment-locales-webpack-plugin';
 import os from 'os';
 import path from 'path';
@@ -28,6 +28,7 @@ import { featureCohort, splitByEntry } from '../utils';
 
 import { createWebpackConfig } from '../index';
 
+jest.mock('fs', () => fs);
 jest.mock('fork-ts-checker-webpack-plugin', () => jest.fn());
 jest.mock('html-webpack-plugin', () => jest.fn());
 jest.mock('mini-css-extract-plugin', () =>
@@ -124,10 +125,10 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
 
         Object.keys(argv).forEach(key => delete (argv as any)[key]);
 
-        mockFS({ [packageJson]: JSON.stringify({ name: packageName }) });
+        vol.fromJSON({ [packageJson]: JSON.stringify({ name: packageName }) });
     });
 
-    afterEach(() => mockFS.restore());
+    afterEach(() => vol.reset());
 
     const subject = () => createWebpackConfig(overrides, options);
 
@@ -226,25 +227,63 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
         });
     });
 
-    describe('with --esbuild command line argument', () => {
-        beforeEach(() => Object.assign(argv, { esbuild: true }));
-
+    function itConfiguresTsLoader() {
         test('configures ".tsx" rules to use esbuild-loader', () => {
+            expect(subject().module?.rules).toContainEqual({
+                test: /\.tsx?$/,
+                exclude: /node_modules/,
+                use: [{ loader: 'esbuild-loader', options: { loader: 'tsx', target: 'es2018' } }],
+            });
+        });
+    }
+    function itConfiguresSwcLoader() {
+        test('configures ".tsx" rules to use swc-loader', () => {
             expect(subject().module?.rules).toContainEqual({
                 test: /\.tsx?$/,
                 exclude: /node_modules/,
                 use: [
                     {
-                        loader: 'esbuild-loader',
-                        options: { loader: 'tsx', target: 'es2018' },
+                        loader: 'swc-loader',
+                        options: {
+                            jsc: {
+                                parser: { syntax: 'typescript', tsx: true, decorators: true },
+                                target: 'es2018',
+                                transform: { legacyDecorator: true, decoratorMetadata: true },
+                            },
+                        },
                     },
                 ],
             });
         });
-
+    }
+    function itConfiguresReactToLoadAutomatically() {
         test('configures React to load automatically', () => {
             expect(subject().plugins).toContainEqual(new ProvidePlugin({ React: 'react' }));
         });
+    }
+    describe('with --esbuild command line argument', () => {
+        beforeEach(() => Object.assign(argv, { esbuild: true }));
+        itConfiguresTsLoader();
+        itConfiguresReactToLoadAutomatically();
+    });
+    describe('with esbuild option', () => {
+        beforeEach(() => {
+            options = { esbuild: true };
+        });
+        itConfiguresTsLoader();
+        itConfiguresReactToLoadAutomatically();
+    });
+    describe('with experimental-bundlers option', () => {
+        beforeEach(() => {
+            options = { experimentalBundlers: true };
+        });
+        itConfiguresSwcLoader();
+        itConfiguresReactToLoadAutomatically();
+    });
+    describe('with --experimental-bundlers command line argument', () => {
+        beforeEach(() => Object.assign(argv, { 'experimental-bundlers': true }));
+        itConfiguresSwcLoader();
+        itConfiguresReactToLoadAutomatically();
     });
 
     test('configures ".css" rule to exclude .module.css files', () => {

package/src/webpack/configs/plugins/provide-react-plugin.ts

@@ -1,8 +1,8 @@
 import { ProvidePlugin } from 'webpack';
 import { Context, Overrides } from '../types';
 
-export function provideReactPlugin({ esbuild }: Context, _: Overrides) {
-    if (!esbuild) {
+export function provideReactPlugin({ esbuild, experimentalBundlers }: Context, _: Overrides) {
+    if (!(esbuild || experimentalBundlers)) {
         return;
     }
 

package/src/webpack/configs/rules/tsx-rules.ts

@@ -1,16 +1,38 @@
 import { RuleSetRule } from 'webpack';
 import { Context } from '../types';
 
-export function tsxRules({ esbuild }: Context): RuleSetRule[] {
-    const loader = esbuild
-        ? {
-              loader: 'esbuild-loader',
-              options: { loader: 'tsx', target: 'es2018' },
-          }
-        : {
-              loader: 'ts-loader',
-              options: { transpileOnly: true },
-          };
+export function tsxRules({ esbuild, experimentalBundlers }: Context): RuleSetRule[] {
+    let loader: Record<string, any> = {
+        loader: 'ts-loader',
+        options: { transpileOnly: true },
+    };
+
+    if (esbuild) {
+        loader = {
+            loader: 'esbuild-loader',
+            options: { loader: 'tsx', target: 'es2018' },
+        };
+    }
+
+    if (experimentalBundlers) {
+        loader = {
+            loader: 'swc-loader',
+            options: {
+                jsc: {
+                    parser: {
+                        syntax: 'typescript',
+                        tsx: true,
+                        decorators: true,
+                    },
+                    target: 'es2018',
+                    transform: {
+                        legacyDecorator: true,
+                        decoratorMetadata: true,
+                    },
+                },
+            },
+        };
+    }
 
     return [
         {

package/src/webpack/configs/types.ts

@@ -5,6 +5,7 @@ export { Overrides } from '../types';
 export interface Context extends Options {
     destination: string;
     esbuild: boolean;
+    experimentalBundlers: boolean;
     isCustomStyleRules: boolean;
     isExposeSharedDependencies: boolean;
     isProduction: boolean;

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

@@ -1,11 +1,12 @@
-import fs from 'fs';
-import mockFS from 'mock-fs';
+import { fs, vol } from 'memfs';
+import * as mockedFs from 'fs';
 import { createPackage } from '../../../../__mocks__';
 import { Context } from '../../types';
 import { getStartupVersion } from '../get-startup-version';
 
 import { generateMetadata } from '../generate-metadata';
 
+jest.mock('fs', () => fs);
 jest.mock('../get-startup-version');
 
 describe(`[startup] ${generateMetadata.name}`, () => {
@@ -15,7 +16,7 @@ describe(`[startup] ${generateMetadata.name}`, () => {
     let context: Partial<Context>;
 
     function generatedMetadata(destination: string) {
-        return JSON.parse(fs.readFileSync(`${destination}/metadata.json`, 'utf8'));
+        return JSON.parse(mockedFs.readFileSync(`${destination}/metadata.json`, 'utf8'));
     }
 
     function packageFS() {
@@ -23,7 +24,7 @@ describe(`[startup] ${generateMetadata.name}`, () => {
     }
 
     beforeEach(() => {
-        mockFS(packageFS());
+        vol.fromJSON(packageFS());
         jest.mocked(getStartupVersion).mockReturnValue(startupVersion);
 
         context = {
@@ -34,7 +35,7 @@ describe(`[startup] ${generateMetadata.name}`, () => {
         };
     });
 
-    afterEach(() => mockFS.restore());
+    afterEach(() => vol.reset());
 
     const subject = () => generateMetadata(context as any);
 
@@ -55,14 +56,10 @@ describe(`[startup] ${generateMetadata.name}`, () => {
         const light = { css: 'baz', js: 'qux' };
 
         beforeEach(() => {
-            mockFS({
+            vol.fromJSON({
                 ...packageFS(),
-                [destination]: {
-                    bundle: {
-                        full: { 'entrypoints.json': JSON.stringify(full) },
-                        light: { 'entrypoints.json': JSON.stringify(light) },
-                    },
-                },
+                [`${destination}/bundle/full/entrypoints.json`]: JSON.stringify(full),
+                [`${destination}/bundle/light/entrypoints.json`]: JSON.stringify(light),
             });
         });