@servicetitan/startup 22.19.0 → 22.20.0

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

package/src/webpack/configs/utils/__tests__/get-startup-version.test.ts

@@ -1,23 +1,19 @@
-import mockFS from 'mock-fs';
+import { fs, vol } from 'memfs';
 
 import { getStartupVersion } from '../get-startup-version';
 
+jest.mock('fs', () => fs);
+
 describe(`[startup] ${getStartupVersion.name}`, () => {
     const startupVersion = '1.2.3';
 
     beforeEach(() => {
-        mockFS({
-            // eslint-disable-next-line @typescript-eslint/naming-convention
-            node_modules: {
-                '@servicetitan': {
-                    'package.json': JSON.stringify({ version: startupVersion }),
-                    'startup': { 'index.js': '' },
-                },
-            },
+        vol.fromJSON({
+            'packages/startup/package.json': JSON.stringify({ version: startupVersion }),
         });
     });
 
-    afterEach(() => mockFS.restore());
+    afterEach(() => vol.reset());
 
     const subject = () => getStartupVersion();
 

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

@@ -41,7 +41,9 @@ export function createWebpackConfig(overrides: Overrides, options: Options = {})
 
     const context: Context = {
         destination,
-        esbuild: !!(argv as Arguments).esbuild,
+        esbuild: options.esbuild ?? !!(argv as Arguments).esbuild ?? false,
+        experimentalBundlers:
+            options.experimentalBundlers ?? !!(argv as Arguments)['experimental-bundlers'] ?? false,
         isCustomStyleRules: isCustomStyleRules(),
         isExposeSharedDependencies: isExposeSharedDependencies(),
         isProduction: configuration.mode === 'production',

package/src/webpack/types.ts

@@ -7,6 +7,8 @@ export interface Options {
     embed?: boolean;
     buildStat?: boolean;
     name?: string;
+    esbuild?: boolean;
+    experimentalBundlers?: boolean;
 }
 
 export interface Overrides {

package/template/.gitignore

@@ -6,6 +6,10 @@
 # Node.js
 node_modules/
 
+# yalc store
+.yalc/
+yalc.lock
+
 *.css.d.ts
 *.less.d.ts
 *.scss.d.ts