feat(react): add swc transpile option rather than tsc+babel

docs/angular/api-react/generators/library.md

@@ -186,6 +186,14 @@ Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/s
 
 The file extension to be used for style files.
 
+### swc
+
+Default: `false`
+
+Type: `boolean`
+
+Use SWC to transpile code instead of Babel and TSC. Note that this will skip type-checking.
+
 ### tags
 
 Alias(es): t

docs/angular/api-web/executors/package.md

@@ -108,6 +108,14 @@ Type: `array[] | string `
 
 Path to a function which takes a rollup config and returns an updated rollup config
 
+### swc
+
+Default: `false`
+
+Type: `boolean`
+
+Use SWC to transpile code instead of Babel and TSC. Note that this will skip type-checking.
+
 ### umdName
 
 Type: `string`

docs/node/api-react/generators/library.md

@@ -186,6 +186,14 @@ Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/s
 
 The file extension to be used for style files.
 
+### swc
+
+Default: `false`
+
+Type: `boolean`
+
+Use SWC to transpile code instead of Babel and TSC. Note that this will skip type-checking.
+
 ### tags
 
 Alias(es): t

docs/node/api-web/executors/package.md

@@ -109,6 +109,14 @@ Type: `array[] | string `
 
 Path to a function which takes a rollup config and returns an updated rollup config
 
+### swc
+
+Default: `false`
+
+Type: `boolean`
+
+Use SWC to transpile code instead of Babel and TSC. Note that this will skip type-checking.
+
 ### umdName
 
 Type: `string`

docs/react/api-react/generators/library.md

@@ -186,6 +186,14 @@ Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/s
 
 The file extension to be used for style files.
 
+### swc
+
+Default: `false`
+
+Type: `boolean`
+
+Use SWC to transpile code instead of Babel and TSC. Note that this will skip type-checking.
+
 ### tags
 
 Alias(es): t

docs/react/api-web/executors/package.md

@@ -109,6 +109,14 @@ Type: `array[] | string `
 
 Path to a function which takes a rollup config and returns an updated rollup config
 
+### swc
+
+Default: `false`
+
+Type: `boolean`
+
+Use SWC to transpile code instead of Babel and TSC. Note that this will skip type-checking.
+
 ### umdName
 
 Type: `string`

e2e/react/src/react-package.test.ts

@@ -107,7 +107,7 @@ describe('Build React libraries and apps', () => {
       `generate @nrwl/react:library ${buildableChildLib} --buildable --no-interactive`
     );
     runCLI(
-      `generate @nrwl/react:library ${buildableChildLib2} --buildable --no-interactive`
+      `generate @nrwl/react:library ${buildableChildLib2} --buildable --no-interactive --swc`
     );
 
     createDep(buildableParentLib, [buildableChildLib, buildableChildLib2]);

packages/react/src/generators/library/library.spec.ts

@@ -1,4 +1,10 @@
-import { getProjects, readJson, Tree, updateJson } from '@nrwl/devkit';
+import {
+  getProjects,
+  readJson,
+  Tree,
+  updateJson,
+  readProjectConfiguration,
+} from '@nrwl/devkit';
 import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
 import libraryGenerator from './library';
 import { Linter } from '@nrwl/linter';
@@ -615,6 +621,34 @@ describe('lib', () => {
     });
   });
 
+  describe('--swc', () => {
+    it('should use SWC to build the library when --swc=true', async () => {
+      await libraryGenerator(appTree, {
+        ...defaultSchema,
+        buildable: true,
+        experimentalSwc: true,
+      });
+
+      const packageJson = readJson(appTree, '/package.json');
+      const config = readProjectConfiguration(appTree, 'my-lib');
+      expect(packageJson.devDependencies['@swc/core']).toMatch(
+        /\^?\d+\.\d+\.\d+$/
+      );
+      expect(config.targets.build.options.swc).toBe(true);
+    });
+
+    it('should not use SWC to build the library when --swc=false', async () => {
+      await libraryGenerator(appTree, {
+        ...defaultSchema,
+        buildable: true,
+        experimentalSwc: false,
+      });
+
+      const config = readProjectConfiguration(appTree, 'my-lib');
+      expect(config.targets.build.options.swc).not.toBeDefined();
+    });
+  });
+
   it.each`
     style
     ${'styled-components'}

packages/react/src/generators/library/library.ts

@@ -1,24 +1,4 @@
-import { CSS_IN_JS_DEPENDENCIES } from '../../utils/styled';
-
 import * as ts from 'typescript';
-import { assertValidStyle } from '../../utils/assertion';
-import {
-  addBrowserRouter,
-  addInitialRoutes,
-  addRoute,
-  findComponentImportPath,
-} from '../../utils/ast-utils';
-import {
-  extraEslintDependencies,
-  createReactEslintJson,
-} from '../../utils/lint';
-import {
-  reactDomVersion,
-  reactRouterDomVersion,
-  reactVersion,
-  typesReactRouterDomVersion,
-} from '../../utils/versions';
-import { Schema } from './schema';
 import {
   addDependenciesToPackageJson,
   addProjectConfiguration,
@@ -37,6 +17,25 @@ import {
   Tree,
   updateJson,
 } from '@nrwl/devkit';
+import { assertValidStyle } from '../../utils/assertion';
+import {
+  addBrowserRouter,
+  addInitialRoutes,
+  addRoute,
+  findComponentImportPath,
+} from '../../utils/ast-utils';
+import {
+  createReactEslintJson,
+  extraEslintDependencies,
+} from '../../utils/lint';
+import {
+  reactDomVersion,
+  reactRouterDomVersion,
+  reactVersion,
+  swcCoreVersion,
+  typesReactRouterDomVersion,
+} from '../../utils/versions';
+import { Schema } from './schema';
 import { runTasksInSerial } from '@nrwl/workspace/src/utilities/run-tasks-in-serial';
 import init from '../init/init';
 import { Linter, lintProjectGenerator } from '@nrwl/linter';
@@ -121,7 +120,7 @@ export async function libraryGenerator(host: Tree, schema: Schema) {
       react: reactVersion,
       'react-dom': reactDomVersion,
     },
-    {}
+    options.experimentalSwc ? { '@swc/core': swcCoreVersion } : {}
   );
   tasks.push(installTask);
 
@@ -200,6 +199,10 @@ function addProject(host: Tree, options: NormalizedSchema) {
         ],
       },
     };
+
+    if (options.experimentalSwc) {
+      targets.build.options.swc = true;
+    }
   }
 
   addProjectConfiguration(

packages/react/src/generators/library/schema.d.ts

@@ -22,4 +22,5 @@ export interface Schema {
   strict?: boolean;
   setParserOptionsProject?: boolean;
   standaloneConfig?: boolean;
+  experimentalSwc?: boolean;
 }

packages/react/src/generators/library/schema.json

@@ -155,6 +155,11 @@
       "description": "Split the project configuration into <projectRoot>/project.json rather than including it inside workspace.json",
       "type": "boolean",
       "default": false
+    },
+    "experimentalSwc": {
+      "description": "Use SWC to transpile code instead of Babel and TSC. Note that this will skip type-checking.",
+      "type": "boolean",
+      "default": false
     }
   },
   "required": ["name"]

packages/react/src/utils/versions.ts

@@ -32,3 +32,5 @@ export const eslintPluginReactVersion = '7.23.1';
 export const eslintPluginReactHooksVersion = '4.2.0';
 
 export const babelPluginStyledComponentsVersion = '1.10.7';
+
+export const swcCoreVersion = '^1.2.78';

packages/web/src/executors/package/lib/swc-plugin.ts

@@ -0,0 +1,20 @@
+import { Plugin } from 'rollup';
+
+export function swc(options = {}): Plugin {
+  try {
+    const { transform } = require('@swc/core');
+    return {
+      name: 'nx-swc',
+      transform(code, filename) {
+        return transform(code, {
+          filename,
+          ...options,
+        });
+      },
+    };
+  } catch {
+    throw new Error(
+      '"@swc/core" not installed  in the workspace. Try `npm install --save-dev @swc/core` or `yarn add -D @swc/core`'
+    );
+  }
+}

packages/web/src/executors/package/package.impl.ts

@@ -27,6 +27,7 @@ import {
   NormalizedWebPackageOptions,
   normalizePackageOptions,
 } from './lib/normalize';
+import { swc } from './lib/swc-plugin';
 
 // These use require because the ES import isn't correct.
 const commonjs = require('@rollup/plugin-commonjs');
@@ -171,13 +172,6 @@ export function createRollupOptions(
         ),
       }),
       image(),
-      typescript({
-        check: true,
-        tsconfig: options.tsConfig,
-        tsconfigOverride: {
-          compilerOptions: createCompilerOptions(format, options, dependencies),
-        },
-      }),
       peerDepsExternal({
         packageJsonPath: options.project,
       }),
@@ -191,29 +185,43 @@ export function createRollupOptions(
         preferBuiltins: true,
         extensions: fileExtensions,
       }),
-      getBabelInputPlugin({
-        // Let's `@nrwl/web/babel` preset know that we are packaging.
-        caller: {
-          // Ignored since this is for our custom babel-loader + babel preset
-          // @ts-ignore
-          isNxPackage: true,
-        },
-        cwd: join(context.root, sourceRoot),
-        rootMode: 'upward',
-        babelrc: true,
-        extensions: fileExtensions,
-        babelHelpers: 'bundled',
-        exclude: /node_modules/,
-        plugins: [
-          format === 'esm'
-            ? undefined
-            : require.resolve('babel-plugin-transform-async-to-promises'),
-        ].filter(Boolean),
-      }),
+      options.experimentalSwc && swc(),
+      !options.experimentalSwc &&
+        typescript({
+          check: true,
+          tsconfig: options.tsConfig,
+          tsconfigOverride: {
+            compilerOptions: createCompilerOptions(
+              format,
+              options,
+              dependencies
+            ),
+          },
+        }),
+      !options.experimentalSwc &&
+        getBabelInputPlugin({
+          // Let's `@nrwl/web/babel` preset know that we are packaging.
+          caller: {
+            // Ignored since this is for our custom babel-loader + babel preset
+            // @ts-ignore
+            isNxPackage: true,
+          },
+          cwd: join(context.root, sourceRoot),
+          rootMode: 'upward',
+          babelrc: true,
+          extensions: fileExtensions,
+          babelHelpers: 'bundled',
+          exclude: /node_modules/,
+          plugins: [
+            format === 'esm'
+              ? undefined
+              : require.resolve('babel-plugin-transform-async-to-promises'),
+          ].filter(Boolean),
+        }),
       commonjs(),
       filesize(),
       json(),
-    ];
+    ].filter(Boolean);
 
     const globals = options.globals
       ? options.globals.reduce(

packages/web/src/executors/package/schema.d.ts

@@ -20,4 +20,5 @@ export interface WebPackageOptions {
   umdName?: string;
   deleteOutputPath?: boolean;
   format: string[];
+  experimentalSwc?: boolean;
 }

packages/web/src/executors/package/schema.json

@@ -113,6 +113,11 @@
       "items": {
         "$ref": "#/definitions/assetPattern"
       }
+    },
+    "experimentalSwc": {
+      "type": "boolean",
+      "description": "Use SWC to transpile code instead of Babel and TSC. Note that this will skip type-checking.",
+      "default": false
     }
   },
   "required": ["tsConfig", "project", "entryFile", "outputPath"],

scripts/check-versions.ts

@@ -24,6 +24,7 @@ const scoped = [
   'babel',
   'emotion',
   'reduxjs',
+  'swc',
   'testing-library',
   'types',
   'zeit',

scripts/depcheck/missing.ts

@@ -73,7 +73,11 @@ const IGNORE_MATCHES = {
     '@angular-devkit/core',
     '@angular-devkit/architect',
   ],
-  web: ['fibers', 'node-sass'],
+  web: [
+    '@swc/core', // we don't want to bloat the install of @nrwl/web by including @swc/core as a dependency.
+    'fibers',
+    'node-sass',
+  ],
   workspace: [
     'tslint',
     '@angular-devkit/architect',