@servicetitan/startup 34.0.0 → 34.1.0

package/src/cli/tasks/swc-compile-package/__tests__/get-swc-options.test.ts

@@ -0,0 +1,77 @@
+import { fs, vol } from 'memfs';
+import { TSConfig } from '../../../utils';
+import { getSwcOptions } from '../get-swc-options';
+
+jest.mock('fs', () => fs);
+
+describe(`[startup] ${getSwcOptions.name}`, () => {
+    let tsConfig: TSConfig;
+
+    function setTsConfig(config: Record<string, any> = {}) {
+        return vol.fromJSON({
+            'tsconfig.json': JSON.stringify(config),
+        });
+    }
+
+    beforeEach(() => {
+        tsConfig = new TSConfig('tsconfig.json');
+        setTsConfig();
+    });
+
+    afterEach(() => vol.reset());
+
+    const subject = () => getSwcOptions(tsConfig);
+
+    test('returns default options', () => {
+        expect(subject()).toEqual({
+            jsc: {
+                parser: { syntax: 'typescript', tsx: true, decorators: true },
+                target: undefined,
+                transform: {
+                    decoratorMetadata: undefined,
+                    legacyDecorator: undefined,
+                    react: { runtime: 'automatic' },
+                },
+            },
+            module: { type: 'es6' },
+            sourceMaps: undefined,
+        });
+    });
+
+    describe.each(
+        Object.entries({
+            target: 'jsc.target',
+            experimentalDecorators: 'jsc.transform.legacyDecorator',
+            emitDecoratorMetadata: 'jsc.transform.decoratorMetadata',
+            sourceMap: 'sourceMaps',
+        })
+    )('when tsconfig contains "compilerOptions.%s"', (compilerOption, swcOption) => {
+        beforeEach(() => setTsConfig({ compilerOptions: { [compilerOption]: 'foo' } }));
+
+        test(`configures swcOptions.${swcOption}`, () => {
+            subject();
+
+            const keys = swcOption.split('.').toReversed();
+            const expected = keys.slice(1).reduce(
+                (result, key) => {
+                    return expect.objectContaining({ [key]: result });
+                },
+                expect.objectContaining({ [keys[0]]: 'foo' })
+            );
+            expect(subject()).toEqual(expected);
+        });
+    });
+
+    describe.each(['commonjs', 'commonJS', 'nodenext', 'NodeNext'])(
+        'when compilerOptions.module is "%s"',
+        module => {
+            beforeEach(() => setTsConfig({ compilerOptions: { module } }));
+
+            test('sets module.type to "commonjs"', () => {
+                expect(subject()).toEqual(
+                    expect.objectContaining({ module: { type: 'commonjs' } })
+                );
+            });
+        }
+    );
+});

package/src/cli/tasks/{__tests__ → swc-compile-package/__tests__}/swc-compile-package.test.ts

@@ -2,7 +2,9 @@ import { swcDir } from '@swc/cli';
 import debounce from 'debounce';
 import deepmerge from 'deepmerge';
 import { fs, vol } from 'memfs';
-import { getSwcCompilePackageConfiguration, log } from '../../../utils';
+import { getSwcCompilePackageConfiguration, log } from '../../../../utils';
+import { TSConfig } from '../../../utils';
+import { getSwcOptions } from '../get-swc-options';
 import { SwcCompilePackage } from '../swc-compile-package';
 
 jest.mock('debounce', () => jest.fn());
@@ -10,11 +12,9 @@ jest.mock('fs', () => fs);
 jest.mock('@swc/cli', () => ({
     swcDir: jest.fn(),
 }));
-jest.mock('yargs', () => jest.fn());
-jest.mock('yargs/helpers', () => ({ hideBin: jest.fn() }));
 
-jest.mock('../../../utils', () => ({
-    ...jest.requireActual('../../../utils'),
+jest.mock('../../../../utils', () => ({
+    ...jest.requireActual('../../../../utils'),
     getFolders: jest.fn().mockReturnValue({
         source: 'src',
         destination: 'dist',
@@ -69,9 +69,10 @@ describe(`[startup] ${SwcCompilePackage.name} task`, () => {
     };
 
     function itCallsSwcDir(
+        how: string,
         packageConfig: ReturnType<typeof getSwcCompilePackageConfiguration> = {}
     ) {
-        test('calls swcDir', () => {
+        test(`calls swcDir ${how}`, () => {
             subject();
 
             expect(swcDir).toHaveBeenCalledWith(
@@ -91,23 +92,7 @@ describe(`[startup] ${SwcCompilePackage.name} task`, () => {
                                 '**/*.stories.*',
                             ],
                         },
-                        swcOptions: {
-                            jsc: {
-                                parser: {
-                                    syntax: 'typescript',
-                                    tsx: true,
-                                    decorators: true,
-                                },
-                                transform: {
-                                    react: {
-                                        runtime: 'automatic',
-                                    },
-                                },
-                            },
-                            module: {
-                                type: 'es6',
-                            },
-                        },
+                        swcOptions: getSwcOptions(new TSConfig('tsconfig.json')),
                         callbacks: {
                             onSuccess: expect.any(Function),
                             onFail: expect.any(Function),
@@ -120,17 +105,18 @@ describe(`[startup] ${SwcCompilePackage.name} task`, () => {
         });
     }
 
-    itCallsSwcDir();
+    itCallsSwcDir('with default config');
 
-    describe('when package has swc-compile-package config', () => {
-        const overrides = {
+    describe('with swc-compile-package config', () => {
+        const config = {
             cliOptions: { ignore: ['**/*.d.ts', '**/__tests__/*', '**/*.test.*'] },
         };
+
         beforeEach(() => {
-            jest.mocked(getSwcCompilePackageConfiguration).mockReturnValue(overrides);
+            jest.mocked(getSwcCompilePackageConfiguration).mockReturnValue(config);
         });
 
-        itCallsSwcDir(overrides);
+        itCallsSwcDir('with swc-compile-package config', config);
     });
 
     describe('when tsconfig contains "exclude" with "**/*.d.ts"', () => {
@@ -177,54 +163,6 @@ describe(`[startup] ${SwcCompilePackage.name} task`, () => {
         });
     });
 
-    describe.each(
-        Object.entries({
-            target: 'jsc.target',
-            experimentalDecorators: 'jsc.transform.legacyDecorator',
-            emitDecoratorMetadata: 'jsc.transform.decoratorMetadata',
-            sourceMap: 'sourceMaps',
-        })
-    )('when tsconfig contains "compilerOptions.%s"', (compilerOption, swcOption) => {
-        beforeEach(() => {
-            volumeFromJSON({
-                'tsconfig.json': { compilerOptions: { [compilerOption]: 'foo' } },
-            });
-        });
-
-        test(`configures swcOptions.${swcOption}`, () => {
-            subject();
-
-            const keys = swcOption.split('.').toReversed();
-            const expected = keys.slice(1).reduce(
-                (result, key) => {
-                    return expect.objectContaining({ [key]: result });
-                },
-                expect.objectContaining({ [keys[0]]: 'foo' })
-            );
-            expect(swcDir).toHaveBeenCalledWith(expect.objectContaining({ swcOptions: expected }));
-        });
-    });
-
-    describe('when package is commonjs', () => {
-        beforeEach(() => {
-            volumeFromJSON({
-                'tsconfig.json': { compilerOptions: { module: 'commonjs' } },
-            });
-        });
-
-        test('swc module type is commonjs', () => {
-            subject();
-
-            expect(swcDir).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    swcOptions: expect.objectContaining({
-                        module: { type: 'commonjs' },
-                    }),
-                })
-            );
-        });
-    });
-
     test('onSuccess handler completes task and logs completion message', async () => {
         const task = subject();
 

package/src/cli/tasks/swc-compile-package/get-swc-options.ts

@@ -0,0 +1,34 @@
+import type { SwcOptions } from '@swc/cli';
+import { TSConfig } from '../../utils';
+
+type JscConfig = NonNullable<SwcOptions['jsc']>;
+
+export function getSwcOptions(tsConfig: TSConfig) {
+    const target = tsConfig.getValue<JscConfig['target']>('compilerOptions.target');
+    const legacyDecorator = tsConfig.getValue<boolean>('compilerOptions.experimentalDecorators');
+    const decoratorMetadata = tsConfig.getValue<boolean>('compilerOptions.emitDecoratorMetadata');
+    const sourceMaps = tsConfig.getValue<SwcOptions['sourceMaps']>('compilerOptions.sourceMap');
+    const module = tsConfig.getValue<string>('compilerOptions.module')?.toLowerCase();
+
+    return {
+        jsc: {
+            parser: {
+                syntax: 'typescript',
+                tsx: true,
+                decorators: true,
+            },
+            target,
+            transform: {
+                legacyDecorator,
+                decoratorMetadata,
+                react: {
+                    runtime: 'automatic',
+                },
+            },
+        },
+        sourceMaps,
+        module: {
+            type: module === 'commonjs' || module === 'nodenext' ? 'commonjs' : 'es6',
+        },
+    } satisfies SwcOptions;
+}

package/src/cli/tasks/swc-compile-package/index.ts

@@ -0,0 +1,2 @@
+export * from './get-swc-options';
+export * from './swc-compile-package';

package/src/cli/tasks/swc-compile-package/swc-cli.d.ts

@@ -0,0 +1,22 @@
+declare module '@swc/cli' {
+    import type { Config } from '@swc/types';
+
+    interface Options {
+        cliOptions?: {
+            extensions?: string[];
+            filenames?: string[];
+            ignore?: string[];
+            outDir?: string;
+            stripLeadingPaths?: boolean;
+            watch?: boolean;
+        };
+        swcOptions?: Config;
+        callbacks?: {
+            [key: string]: Function;
+        };
+    }
+
+    type SwcOptions = NonNullable<Options['swcOptions']>;
+
+    function swcDir(options: Options): void;
+}

package/src/cli/tasks/{swc-compile-package.ts → swc-compile-package/swc-compile-package.ts}

@@ -1,9 +1,11 @@
-import { Options, swcDir } from '@swc/cli';
+import type { Options } from '@swc/cli';
+import { swcDir } from '@swc/cli';
 import debounce from 'debounce';
 import deepmerge from 'deepmerge';
-import { getFolders, getSwcCompilePackageConfiguration, getTsConfig, log } from '../../utils';
-import { TSConfig } from '../utils';
-import { Task } from './task';
+import { getFolders, getSwcCompilePackageConfiguration, getTsConfig, log } from '../../../utils';
+import { TSConfig } from '../../utils';
+import { Task } from '../task';
+import { getSwcOptions } from './get-swc-options';
 
 interface Args {
     watch?: boolean;
@@ -13,8 +15,6 @@ function overwriteMerge(_destinationArray: unknown[], sourceArray: unknown[]) {
     return sourceArray;
 }
 
-const typedefsPattern = '**/*.d.ts';
-
 export class SwcCompilePackage extends Task {
     constructor({ watch }: Args) {
         super({ name: 'swc-compile-package', global: false, watch });
@@ -58,60 +58,41 @@ export class SwcCompilePackage extends Task {
     }
 
     private getConfig(): Options {
-        const { source, destination } = getFolders();
         const packageConfig = getSwcCompilePackageConfiguration();
         const tsConfig = new TSConfig(getTsConfig());
-        const target = tsConfig.getValue('compilerOptions.target');
-        const legacyDecorator = tsConfig.getValue('compilerOptions.experimentalDecorators');
-        const decoratorMetadata = tsConfig.getValue('compilerOptions.emitDecoratorMetadata');
-        const sourceMaps = tsConfig.getValue('compilerOptions.sourceMap');
-        const module = tsConfig.getValue<string>('compilerOptions.module')?.toLowerCase();
-        const ignore = tsConfig.getValue('exclude', [
-            '**/*.d.ts',
-            '**/__tests__/*',
-            '**/*.test.*',
-            '**/__mocks__/*',
-            '**/*.stories.*',
-        ]);
-
-        if (!ignore.includes(typedefsPattern)) {
-            ignore.push(typedefsPattern);
-        }
 
         return deepmerge(
             {
-                cliOptions: {
-                    watch: this.watch,
-                    outDir: destination,
-                    stripLeadingPaths: true,
-                    extensions: ['.ts', '.tsx'],
-                    filenames: [source],
-                    ignore,
-                },
-                swcOptions: {
-                    jsc: {
-                        parser: {
-                            syntax: 'typescript',
-                            tsx: true,
-                            decorators: true,
-                        },
-                        target,
-                        transform: {
-                            legacyDecorator,
-                            decoratorMetadata,
-                            react: {
-                                runtime: 'automatic',
-                            },
-                        },
-                    },
-                    sourceMaps,
-                    module: {
-                        type: module === 'commonjs' || module === 'nodenext' ? 'commonjs' : 'es6',
-                    },
-                },
+                cliOptions: getCliOptions(tsConfig, { watch: this.watch }),
+                swcOptions: getSwcOptions(tsConfig),
             },
             packageConfig,
             { arrayMerge: overwriteMerge, clone: false }
         );
     }
 }
+
+function getCliOptions(tsConfig: TSConfig, { watch }: { watch?: boolean }): Options['cliOptions'] {
+    const { source, destination } = getFolders();
+    const typedefsPattern = '**/*.d.ts';
+    const ignore = tsConfig.getValue('exclude', [
+        typedefsPattern,
+        '**/__tests__/*',
+        '**/*.test.*',
+        '**/__mocks__/*',
+        '**/*.stories.*',
+    ]);
+
+    if (!ignore.includes(typedefsPattern)) {
+        ignore.push(typedefsPattern);
+    }
+
+    return {
+        extensions: ['.ts', '.tsx'],
+        filenames: [source],
+        ignore,
+        outDir: destination,
+        stripLeadingPaths: true,
+        watch,
+    };
+}

package/src/cli/tasks/{__tests__ → tsc-compile/__tests__}/tsc-compile.test.ts

@@ -1,7 +1,7 @@
 import execa from 'execa';
 import { fs, vol } from 'memfs';
 import path from 'path';
-import { log } from '../../../utils';
+import { log } from '../../../../utils';
 import { TscCompile } from '../tsc-compile';
 
 jest.mock('fs', () => fs);
@@ -14,8 +14,6 @@ jest.mock('execa', () =>
         })
     )
 );
-jest.mock('yargs', () => jest.fn());
-jest.mock('yargs/helpers', () => ({ hideBin: jest.fn() }));
 
 describe(`[startup] ${TscCompile.name} task`, () => {
     let options: ConstructorParameters<typeof TscCompile>[0];

package/src/cli/tasks/tsc-compile/index.ts

@@ -0,0 +1 @@
+export * from './tsc-compile';

package/src/cli/tasks/{tsc-compile.ts → tsc-compile/tsc-compile.ts}

@@ -1,5 +1,12 @@
-import { getPackages, getPackagesGraph, getTsConfig, log, Package, PackageType } from '../../utils';
-import { CliTask } from './cli-task';
+import {
+    getPackages,
+    getPackagesGraph,
+    getTsConfig,
+    log,
+    Package,
+    PackageType,
+} from '../../../utils';
+import { CliTask } from '../cli-task';
 
 interface Args {
     ignore?: string | string[];

package/src/cli/tasks/{__tests__ → tsc-compile-package/__tests__}/tsc-compile-package.test.ts

@@ -10,8 +10,6 @@ jest.mock('execa', () =>
         })
     )
 );
-jest.mock('yargs', () => jest.fn());
-jest.mock('yargs/helpers', () => ({ hideBin: jest.fn() }));
 
 const tsConfig = 'tsconfig.build.json';
 
@@ -31,8 +29,8 @@ const tscOptions = [
     tsConfig,
 ];
 
-jest.mock('../../../utils', () => ({
-    ...jest.requireActual('../../../utils'),
+jest.mock('../../../../utils', () => ({
+    ...jest.requireActual('../../../../utils'),
     getFolders: jest.fn().mockReturnValue({
         source: 'src',
         destination: 'dist',

package/src/cli/tasks/tsc-compile-package/index.ts

@@ -0,0 +1 @@
+export * from './tsc-compile-package';

package/src/cli/tasks/{tsc-compile-package.ts → tsc-compile-package/tsc-compile-package.ts}

@@ -1,5 +1,5 @@
-import { getTsConfig } from '../../utils';
-import { CliTask } from './cli-task';
+import { getTsConfig } from '../../../utils';
+import { CliTask } from '../cli-task';
 
 interface Args {
     watch?: boolean;

package/src/cli/utils/bundle.ts

@@ -187,5 +187,5 @@ async function runWatch(config: Configuration) {
 }
 
 function createWebpackCompiler(config: Configuration) {
-    return webpack(config)!; // webpack only potentially returns null when given a callback argument
+    return webpack(config);
 }

package/src/storybook-config/__tests__/swc.test.ts

@@ -0,0 +1,37 @@
+import { SwcOptions } from '@swc/cli';
+import { fs, vol } from 'memfs';
+import { getSwcOptions } from '../../cli/tasks';
+import { TSConfig } from '../../cli/utils';
+import { swc } from '../swc';
+
+jest.mock('fs', () => fs);
+
+describe(`[startup/storybook-config] ${swc.name}`, () => {
+    const config: SwcOptions = { env: { bugfixes: true } };
+    let tsConfig: TSConfig;
+
+    function setTsConfig(config: Record<string, any> = {}) {
+        return vol.fromJSON({
+            'tsconfig.json': JSON.stringify(config),
+        });
+    }
+
+    beforeEach(() => {
+        tsConfig = new TSConfig('tsconfig.json');
+        setTsConfig();
+    });
+
+    const subject = () => swc(config);
+
+    test('merges default swc config with input config', () => {
+        expect(subject()).toEqual({ ...config, ...getSwcOptions(tsConfig) });
+    });
+
+    describe('when tsConfig contains compilerOptions.target', () => {
+        beforeEach(() => setTsConfig({ compilerOptions: { target: '2018' } }));
+
+        test('omits target from result', () => {
+            expect(subject().jsc.target).toBeUndefined();
+        });
+    });
+});

package/src/storybook-config/__tests__/webpack-final.test.ts

@@ -0,0 +1,133 @@
+import type { Configuration } from 'webpack';
+import { Overrides, rulesConfig } from '../../webpack/configs';
+import { miniCssExtractPlugin } from '../../webpack/configs/plugins';
+import { webpackFinal } from '../webpack-final';
+
+jest.mock('../../webpack/configs');
+jest.mock('../../webpack/configs/plugins');
+
+describe(`[startup/storybook-config] ${webpackFinal.name}`, () => {
+    const mockRules: any[] = [
+        { test: /\.module\.css$/, use: ['style-loader', 'css-loader'] },
+        { test: /\.module\.less$/, use: ['style-loader', 'less-loader'] },
+        { test: /\.less$/, use: ['less-loader'] },
+        { test: /\.svg$/, use: ['svg-loader'] },
+        { test: /\.css$/, use: ['css-loader'] },
+    ];
+    const mockMiniCssExtractPlugin: any = { name: 'MiniCssExtractPlugin' };
+    let config: Configuration;
+    let overrides: Overrides | undefined;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        jest.mocked(rulesConfig).mockReturnValue({ rules: mockRules });
+        jest.mocked(miniCssExtractPlugin).mockReturnValue(mockMiniCssExtractPlugin);
+        config = {};
+        overrides = undefined;
+    });
+
+    const subject = () => webpackFinal(config, overrides);
+
+    function toRegExp(extension: string) {
+        return new RegExp(`${extension.replaceAll('.', '\\.')}$`);
+    }
+
+    test.each(['.module.css', '.module.less', '.less', '.svg'])(
+        'adds %s rules to config',
+        extension => {
+            expect(subject().module!.rules).toContainEqual(
+                expect.objectContaining({ test: toRegExp(extension) })
+            );
+        }
+    );
+
+    test.each(['.css'])('excludes %s rules from config', extension => {
+        expect(subject().module!.rules).not.toContainEqual(
+            expect.objectContaining({ test: toRegExp(extension) })
+        );
+    });
+
+    test('adds MiniCssExtractPlugin to config', () => {
+        expect(subject().plugins).toEqual([mockMiniCssExtractPlugin]);
+    });
+
+    describe('when config contains rules', () => {
+        const configRules: any = [false, null, { test: /.foo$/ }, { test: '.bar' }];
+
+        beforeEach(() => (config = { module: { rules: configRules } }));
+
+        test('appends rules to config', () => {
+            expect(subject().module!.rules).toEqual([
+                ...configRules,
+                ...mockRules.filter(({ test }) => test.toString() !== '/\\.css$/'),
+            ]);
+        });
+    });
+
+    describe('when config contains plugins', () => {
+        const configPlugin: any = { name: 'MockPlugin' };
+
+        beforeEach(() => (config.plugins = [configPlugin]));
+
+        test('appends MiniCssExtractPlugin to config', () => {
+            expect(subject().plugins).toEqual([configPlugin, mockMiniCssExtractPlugin]);
+        });
+
+        describe('when MiniCssExtractPlugin is disabled', () => {
+            beforeEach(() => jest.mocked(miniCssExtractPlugin).mockReturnValue(undefined));
+
+            test('returns only configured plugins', () => {
+                expect(subject().plugins).toEqual(config.plugins);
+            });
+        });
+    });
+
+    describe('when in production mode', () => {
+        beforeEach(() => (config.mode = 'production'));
+
+        test('creates production rules', () => {
+            subject();
+
+            expect(rulesConfig).toHaveBeenCalledWith(
+                expect.objectContaining({ isProduction: true }),
+                expect.anything()
+            );
+        });
+    });
+
+    describe('with overrides', () => {
+        beforeEach(() => (overrides = { plugins: { MiniCssExtractPlugin: {} } }));
+
+        test('passes overrides through to miniCssExtractPlug', () => {
+            subject();
+
+            expect(miniCssExtractPlugin).toHaveBeenCalledWith(expect.anything(), overrides);
+        });
+
+        test('passes overrides through to rulesConfig', () => {
+            subject();
+
+            expect(rulesConfig).toHaveBeenCalledWith(expect.anything(), overrides);
+        });
+    });
+
+    describe('when config contains .css rule', () => {
+        const cssRule = { test: /\.css$/, use: ['css-loader'] };
+
+        beforeEach(() => (config = { module: { rules: [cssRule] } }));
+
+        test('transforms css rule to exclude .module.css', () => {
+            expect(subject().module!.rules![0]).toEqual({ ...cssRule, exclude: /\.module.css$/ });
+        });
+    });
+
+    describe('when config contains .svg rule', () => {
+        const svgRule = { test: /\.svg$/, use: ['svg-loader'] };
+
+        beforeEach(() => (config = { module: { rules: [svgRule] } }));
+
+        test('disables svg rule', () => {
+            expect(subject().module!.rules![0]).toEqual({ ...svgRule, exclude: /\.svg$/i });
+        });
+    });
+});

package/src/storybook-config/index.ts

@@ -0,0 +1,2 @@
+export * from './swc';
+export * from './webpack-final';

package/src/storybook-config/swc.ts

@@ -0,0 +1,24 @@
+import type { SwcOptions } from '@swc/cli';
+import { inspect } from 'node:util';
+import { getSwcOptions } from '../cli/tasks';
+import { TSConfig } from '../cli/utils';
+import { getTsConfig, log } from '../utils';
+
+export function swc(config: SwcOptions) {
+    const tsConfig = new TSConfig(getTsConfig());
+    const swcOptions = getSwcOptions(tsConfig);
+
+    /*
+     * We cannot set 'jsc.target' because Storybook always sets 'env'
+     * (see https://github.com/storybookjs/storybook/blob/24db05a0e4b499a99fb5a53b5a70fa894fa6a8c8/code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts#L19)
+     * and 'env' and 'jsc.target' cannot be used together
+     */
+    if (swcOptions.jsc.target) {
+        delete swcOptions.jsc.target;
+    }
+
+    /* istanbul ignore next: debug only */
+    log.debug('storybook-config:swc', () => inspect({ swcOptions }, { depth: null }));
+
+    return { ...config, ...swcOptions };
+}