Add swc transpilation flag

docusaurus/docs/advanced-configuration.md

@@ -30,3 +30,4 @@ You can adjust various development and production settings by setting environmen
 | ESLINT_NO_DEV_ERRORS      |   ✅ Used   | 🚫 Ignored | When set to `true`, ESLint errors are converted to warnings during development. As a result, ESLint output will no longer appear in the error overlay.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 | DISABLE_ESLINT_PLUGIN     |   ✅ Used   |  ✅ Used   | When set to `true`, [eslint-webpack-plugin](https://github.com/webpack-contrib/eslint-webpack-plugin) will be completely disabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
 | DISABLE_NEW_JSX_TRANSFORM |   ✅ Used   |  ✅ Used   | When set to `true`, disables the [new JSX transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) introduced in React 17 and backported to React 16.14.0, 15.7.0, and 0.14.10. New projects will use a version of React that supports this by default but you may need to disable it in existing projects if you can't upgrade React.                                                                                                                                                                                                                                                                                                     |
+| SWC_TRANSFORM             |   ✅ Used   |  ✅ Used   | When set to `true`, enables [SWC](https://swc.rs/) - We are evaluating and taking feedback on this experimental feature. Note that `Flow` is currently not supported but might be later on [Strip flow types](https://github.com/swc-project/swc/issues/256) React.                                                                                                                                                                                                                                                                                                                                                                                                      |

package.json

@@ -33,7 +33,7 @@
     "get-port": "^5.1.1",
     "globby": "^11.0.4",
     "husky": "^4.3.8",
-    "jest": "^27.4.3",
+    "jest": "^27.4.4",
     "lerna": "^4.0.0",
     "lerna-changelog": "^2.2.0",
     "lint-staged": "^12.1.2",

packages/babel-plugin-named-asset-import/package.json

@@ -20,7 +20,7 @@
   },
   "devDependencies": {
     "babel-plugin-tester": "^10.1.0",
-    "jest": "^27.4.3"
+    "jest": "^27.4.4"
   },
   "scripts": {
     "test": "jest"

packages/confusing-browser-globals/package.json

@@ -20,6 +20,6 @@
     "index.js"
   ],
   "devDependencies": {
-    "jest": "^27.4.3"
+    "jest": "^27.4.4"
   }
 }

packages/create-react-app/createReactApp.js

@@ -43,7 +43,8 @@ const path = require('path');
 const semver = require('semver');
 const spawn = require('cross-spawn');
 const tmp = require('tmp');
-const unpack = require('tar-pack').unpack;
+const tar = require('tar');
+const zlib = require('zlib');
 const url = require('url');
 const validateProjectName = require('validate-npm-package-name');
 
@@ -667,15 +668,13 @@ function getTemporaryDirectory() {
 
 function extractStream(stream, dest) {
   return new Promise((resolve, reject) => {
-    stream.pipe(
-      unpack(dest, err => {
-        if (err) {
-          reject(err);
-        } else {
-          resolve(dest);
-        }
-      })
-    );
+    stream
+      .on('error', reject)
+      .pipe(zlib.createGunzip())
+      .on('error', reject)
+      .pipe(tar.extract({ strip: 1, C: dest }))
+      .on('error', reject)
+      .on('finish', () => resolve(dest));
   });
 }
 

packages/create-react-app/package.json

@@ -36,12 +36,12 @@
     "hyperquest": "^2.1.3",
     "prompts": "^2.4.2",
     "semver": "^7.3.5",
-    "tar-pack": "^3.4.1",
+    "tar": "^6.1.11",
     "tmp": "^0.2.1",
     "validate-npm-package-name": "^3.0.0"
   },
   "devDependencies": {
     "cross-env": "^7.0.3",
-    "jest": "^27.4.3"
+    "jest": "^27.4.4"
   }
 }

packages/react-dev-utils/package.json

@@ -79,7 +79,7 @@
   },
   "devDependencies": {
     "cross-env": "^7.0.3",
-    "jest": "^27.4.3"
+    "jest": "^27.4.4"
   },
   "scripts": {
     "test": "cross-env FORCE_COLOR=true jest"

packages/react-error-overlay/package.json

@@ -46,7 +46,7 @@
     "cross-env": "^7.0.3",
     "flow-bin": "^0.116.0",
     "html-entities": "^2.3.2",
-    "jest": "^27.4.3",
+    "jest": "^27.4.4",
     "jest-fetch-mock": "^3.0.3",
     "object-assign": "^4.1.1",
     "promise": "^8.1.0",

packages/react-scripts/config/createSwcConfig.js

@@ -0,0 +1,157 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2014-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+const fs = require('fs');
+const path = require('path');
+const merge = require('lodash.merge');
+const JSON5 = require('json5');
+const paths = require('./paths');
+const hasJsxRuntime = require('./hasJsxRuntime');
+const browserslist = require('browserslist');
+
+const targets = browserslist.loadConfig({ path: paths.appPath });
+
+module.exports = function createSwcConfig({
+  shouldUseSourceMap = true,
+  isEnvDevelopment = false,
+  isEnvProduction = false,
+  shouldUseReactRefresh = false,
+} = {}) {
+  const projectSwcConfig = mapProjectConfigToSwcConfig(getProjectConfig());
+
+  const generalOptions = {
+    jsx: true,
+    runtime: hasJsxRuntime ? 'automatic' : 'classic',
+    sourceMaps: shouldUseSourceMap,
+    refresh: shouldUseReactRefresh,
+    useBrowserslist: isEnvDevelopment | isEnvProduction,
+    development: isEnvDevelopment,
+  };
+
+  return {
+    ecmascript: merge(
+      {},
+      projectSwcConfig,
+      getBaseConfiguration({
+        ...generalOptions,
+      })
+    ),
+    typescript: merge(
+      {},
+      projectSwcConfig,
+      getBaseConfiguration({
+        ...generalOptions,
+        syntax: 'typescript',
+      })
+    ),
+  };
+};
+
+function getBaseConfiguration({
+  runtime = 'classic',
+  syntax = 'ecmascript',
+  jsx = false,
+  sourceMaps = false,
+  refresh = false,
+  useBrowserslist = false,
+  development = false,
+}) {
+  return {
+    sourceMaps,
+    jsc: {
+      parser: {
+        [syntax === 'typescript' ? 'tsx' : 'jsx']: jsx,
+        syntax,
+      },
+      transform: {
+        react: {
+          runtime,
+          refresh,
+          development,
+        },
+      },
+    },
+    env: useBrowserslist
+      ? {
+          targets,
+          mode: 'entry',
+          coreJs: 3,
+        }
+      : {},
+  };
+}
+
+function mapProjectConfigToSwcConfig(projectConfig = {}) {
+  const {
+    compilerOptions: {
+      target,
+      importHelpers,
+      experimentalDecorators,
+      emitDecoratorMetadata,
+      baseUrl,
+      paths,
+    } = {},
+  } = projectConfig;
+  const result = { jsc: { externalHelpers: true, parser: {}, transform: {} } };
+
+  if (target != null) {
+    result.jsc.target = target;
+  }
+  if (importHelpers != null) {
+    result.jsc.externalHelpers = importHelpers;
+  }
+  if (experimentalDecorators != null) {
+    result.jsc.parser.decorators = experimentalDecorators;
+  }
+  if (emitDecoratorMetadata != null) {
+    result.jsc.transform.decoratorMetadata = emitDecoratorMetadata;
+  }
+
+  if (baseUrl != null) {
+    result.jsc.baseUrl = baseUrl;
+    if (paths != null) {
+      result.jsc.paths = paths;
+    }
+  }
+
+  return result;
+}
+
+function getProjectConfig(configPath, loadedPaths = []) {
+  const configPaths =
+    configPath != null ? [configPath] : [paths.appTsConfig, paths.appJsConfig];
+  const [projectConfigPath] = configPaths.filter(p => fs.existsSync(p));
+  if (projectConfigPath == null) {
+    return {};
+  }
+  if (loadedPaths.includes(projectConfigPath)) {
+    return {};
+  }
+  try {
+    const projectConfig = JSON5.parse(
+      fs.readFileSync(projectConfigPath, 'utf-8')
+    );
+    if (projectConfig.extends != null) {
+      const baseConfig = require.resolve(projectConfig.extends, {
+        paths: [path.dirname(projectConfigPath)],
+      });
+      delete projectConfig.extends;
+      return merge(
+        getProjectConfig(baseConfig, [...loadedPaths, projectConfigPath]),
+        projectConfig
+      );
+    }
+    return projectConfig;
+  } catch (error) {
+    console.error(
+      `Error: Failed to load "${projectConfigPath}", error: "${error.message}"`
+    );
+    process.exit(1);
+  }
+}

packages/react-scripts/config/hasJsxRuntime.js

@@ -0,0 +1,21 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2014-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+module.exports = (() => {
+  if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
+    return false;
+  }
+
+  try {
+    require.resolve('react/jsx-runtime');
+    return true;
+  } catch (e) {
+    return false;
+  }
+})();

packages/react-scripts/config/jest/babelTransform.js

@@ -9,19 +9,7 @@
 'use strict';
 
 const babelJest = require('babel-jest').default;
-
-const hasJsxRuntime = (() => {
-  if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
-    return false;
-  }
-
-  try {
-    require.resolve('react/jsx-runtime');
-    return true;
-  } catch (e) {
-    return false;
-  }
-})();
+const hasJsxRuntime = require('../hasJsxRuntime');
 
 module.exports = babelJest.createTransformer({
   presets: [

packages/react-scripts/config/modules.js

@@ -13,6 +13,7 @@ const path = require('path');
 const paths = require('./paths');
 const chalk = require('react-dev-utils/chalk');
 const resolve = require('resolve');
+const JSON5 = require('json5');
 
 /**
  * Get additional module paths based on the baseUrl of a compilerOptions object.
@@ -123,7 +124,19 @@ function getModules() {
     // Otherwise we'll check if there is jsconfig.json
     // for non TS projects.
   } else if (hasJsConfig) {
-    config = require(paths.appJsConfig);
+    // Projects using jsconfig.json do not need TypeScript installed, using JSON5
+    try {
+      config = JSON5.parse(fs.readFileSync(paths.appJsConfig, 'utf-8'));
+    } catch (error) {
+      const errorType = /^JSON5/.test(error.message) ? 'parse' : 'load';
+      const errorMessge = error.message.replace(/^JSON5/, 'Error');
+      console.error(
+        chalk.red(
+          `Failed to ${errorType} "${paths.appJsConfig}" got error: "${errorMessge}"`
+        )
+      );
+      process.exit(1);
+    }
   }
 
   config = config || {};