feat: default react runtime automatic

.changeset/five-drinks-grow.md

@@ -0,0 +1,5 @@
+---
+'craco-swc': minor
+---
+
+Enable react automatic runtime, you don't need to import React anymore!

examples/with-javascript/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.3",
   "private": true,
   "dependencies": {
-    "@craco/craco": "6.4.2",
+    "@craco/craco": "6.4.3",
     "@testing-library/jest-dom": "^5.15.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",

examples/with-javascript/src/App.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import logo from './logo.svg';
 import './App.css';
 

examples/with-javascript/src/App.test.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import App from './App';
 

examples/with-typescript/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@craco/craco": "6.4.2",
+    "@craco/craco": "6.4.3",
     "@testing-library/jest-dom": "^5.15.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
@@ -15,7 +15,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
-    "typescript": "^4.5.2",
+    "typescript": "^4.6.3",
     "web-vitals": "^1.1.2"
   },
   "scripts": {

examples/with-typescript/src/App.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import App from './App';
 

examples/with-typescript/src/App.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import logo from './logo.svg';
 import './App.css';
 

package.json

@@ -21,10 +21,10 @@
     ]
   },
   "devDependencies": {
-    "@changesets/changelog-github": "0.4.2",
-    "@changesets/cli": "2.18.1",
+    "@changesets/changelog-github": "0.4.4",
+    "@changesets/cli": "2.22.0",
     "husky": "7.0.4",
-    "lint-staged": "12.1.2",
-    "prettier": "2.5.0"
+    "lint-staged": "12.3.7",
+    "prettier": "2.6.1"
   }
 }

packages/craco-swc/package.json

@@ -13,13 +13,13 @@
     "react-scripts": "^3.3.0 || ^4.0.0"
   },
   "dependencies": {
-    "@swc/core": "^1.2.114",
-    "@swc/helpers": "^0.2.14",
-    "@swc/jest": "^0.2.11",
+    "@swc/core": "^1.2.161",
+    "@swc/helpers": "^0.3.8",
+    "@swc/jest": "^0.2.20",
     "swc-loader": "^0.1.15"
   },
   "devDependencies": {
-    "@craco/craco": "6.4.2",
+    "@craco/craco": "6.4.3",
     "react-scripts": "4.0.3"
   }
 }

packages/craco-swc/src/index.js

@@ -29,8 +29,13 @@ module.exports = {
             undefined
           : {
               jsc: {
-                externalHelpers: true,
                 target: 'es2015',
+                externalHelpers: true,
+                transform: {
+                  react: {
+                    runtime: 'automatic',
+                  },
+                },
                 parser: useTypeScript
                   ? {
                       syntax: 'typescript',
@@ -55,27 +60,33 @@ module.exports = {
   /**
    * To process the js/ts files we replace the babel-loader with the swc jest loader
    */
-  overrideJestConfig: ({
-    jestConfig,
-    pluginOptions,
-    context: { env, paths, resolve, rootDir },
-  }) => {
+  overrideJestConfig: ({ jestConfig, pluginOptions, context: { paths } }) => {
     const useTypeScript = fs.existsSync(paths.appTsConfig);
 
     // Replace babel transform with swc
     const key = Object.keys(jestConfig.transform)[0];
     // TODO find a way to pass options directly to the plugin without having to use a .swcrc
     jestConfig.transform[key] = [
       require.resolve('@swc/jest', {
+        sourceMaps: true,
         jsc: {
+          target: 'es2021',
+          externalHelpers: true,
+          transform: {
+            react: {
+              runtime: 'automatic',
+            },
+          },
           parser: useTypeScript
             ? {
                 syntax: 'typescript',
                 tsx: true,
+                dynamicImport: true,
               }
             : {
                 syntax: 'ecmascript',
                 jsx: true,
+                dynamicImport: true,
               },
         },
       }),