chore: got something half working

Signed-off-by: blam <ben@blam.sh>

packages/cli/package.json

@@ -41,6 +41,7 @@
     "@hot-loader/react-dom-v17": "npm:@hot-loader/react-dom@^17.0.2",
     "@manypkg/get-packages": "^1.1.3",
     "@octokit/request": "^6.0.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.0.6",
@@ -50,6 +51,7 @@
     "@spotify/eslint-config-typescript": "^14.0.0",
     "@sucrase/jest-plugin": "^2.1.1",
     "@sucrase/webpack-loader": "^2.0.0",
+    "@swc/core": "^1.2.160",
     "@svgr/plugin-jsx": "6.3.x",
     "@svgr/plugin-svgo": "6.3.x",
     "@svgr/rollup": "6.3.x",
@@ -103,6 +105,7 @@
     "process": "^0.11.10",
     "react-dev-utils": "^12.0.0-next.60",
     "react-hot-loader": "^4.13.0",
+    "react-refresh": "^0.11.0",
     "recursive-readdir": "^2.2.2",
     "replace-in-file": "^6.0.0",
     "rollup": "^2.60.2",
@@ -114,6 +117,7 @@
     "semver": "^7.3.2",
     "style-loader": "^3.3.1",
     "sucrase": "^3.20.2",
+    "swc-loader": "^0.1.15",
     "tar": "^6.1.2",
     "terser-webpack-plugin": "^5.1.3",
     "util": "^0.12.3",

packages/cli/src/lib/bundler/transforms.ts

@@ -14,9 +14,10 @@
  * limitations under the License.
  */
 
-import webpack, { ModuleOptions, WebpackPluginInstance } from 'webpack';
+import { ModuleOptions, WebpackPluginInstance } from 'webpack';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import { svgrTemplate } from '../svgrTemplate';
+import ReactRefreshPlugin from '@pmmmwh/react-refresh-webpack-plugin';
 
 type Transforms = {
   loaders: ModuleOptions['rules'];
@@ -29,9 +30,7 @@ type TransformOptions = {
 };
 
 export const transforms = (options: TransformOptions): Transforms => {
-  const { isDev, isBackend } = options;
-
-  const extraTransforms = isDev && !isBackend ? ['react-hot-loader'] : [];
+  const { isDev } = options;
 
   // This ensures that styles inserted from the style-loader and any
   // async style chunks are always given lower priority than JSS styles.
@@ -54,22 +53,52 @@ export const transforms = (options: TransformOptions): Transforms => {
     {
       test: /\.(tsx?)$/,
       exclude: /node_modules/,
-      loader: require.resolve('@sucrase/webpack-loader'),
-      options: {
-        transforms: ['typescript', 'jsx', ...extraTransforms],
-        disableESTransforms: true,
-        production: !isDev,
-      },
+      use: [
+        {
+          loader: 'swc-loader',
+          options: {
+            env: { mode: 'usage' },
+            jsc: {
+              parser: {
+                syntax: 'typescript',
+                tsx: true,
+                dynamicImport: true,
+              },
+              transform: {
+                react: {
+                  runtime: 'automatic',
+                  refresh: isDev,
+                },
+              },
+            },
+          },
+        },
+      ],
     },
     {
       test: /\.(jsx?|mjs|cjs)$/,
       exclude: /node_modules/,
-      loader: require.resolve('@sucrase/webpack-loader'),
-      options: {
-        transforms: ['jsx', ...extraTransforms],
-        disableESTransforms: true,
-        production: !isDev,
-      },
+      use: [
+        {
+          loader: 'swc-loader',
+          options: {
+            env: { mode: 'usage' },
+            jsc: {
+              parser: {
+                syntax: 'ecmascript',
+                jsx: true,
+                dynamicImport: true,
+              },
+              transform: {
+                react: {
+                  runtime: 'automatic',
+                  refresh: isDev,
+                },
+              },
+            },
+          },
+        },
+      ],
     },
     {
       test: /\.(js|mjs|cjs)/,
@@ -83,7 +112,7 @@ export const transforms = (options: TransformOptions): Transforms => {
         {
           loader: require.resolve('@sucrase/webpack-loader'),
           options: {
-            transforms: ['jsx', ...extraTransforms],
+            transforms: ['jsx'],
             disableESTransforms: true,
             production: !isDev,
           },
@@ -151,7 +180,7 @@ export const transforms = (options: TransformOptions): Transforms => {
   const plugins = new Array<WebpackPluginInstance>();
 
   if (isDev) {
-    plugins.push(new webpack.HotModuleReplacementPlugin());
+    plugins.push(new ReactRefreshPlugin());
   } else {
     plugins.push(
       new MiniCssExtractPlugin({