fix(rspack): apply React Compiler to .ts files in babel-ts example (#1)

rspack/react-compiler-babel-ts/package.json → rspack/react-compiler-ts/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@rspack-example/react-compiler-babel-ts",
+  "name": "@rspack-example/react-compiler-ts",
   "version": "1.0.0",
   "private": true,
   "license": "MIT",
@@ -15,16 +15,12 @@
     "react-refresh": "0.19.0"
   },
   "devDependencies": {
-    "@babel/plugin-syntax-jsx": "^7.29.7",
-    "@babel/plugin-syntax-typescript": "^7.29.7",
     "@rspack/cli": "2.2.8",
     "@rspack/core": "2.2.8",
     "@rspack/dev-server": "2.2.1",
     "@types/node": "^24.19.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
-    "babel-loader": "^10.1.1",
-    "babel-plugin-react-compiler": "^1.0.0",
     "typescript": "^5.9.3"
   }
 }

rspack/react-compiler-ts/rspack.config.js

@@ -0,0 +1,48 @@
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+
+export default defineConfig({
+  entry: {
+    main: './src/index.tsx',
+  },
+  resolve: {
+    extensions: ['...', '.jsx', '.tsx', '.ts'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        type: 'css',
+      },
+      {
+        test: /\.(?:js|mjs|jsx|ts|tsx)$/,
+        exclude: [/[\\/]node_modules[\\/]/],
+        use: {
+          loader: 'builtin:swc-loader',
+          options: {
+            detectSyntax: 'auto',
+            jsc: {
+              externalHelpers: true,
+              transform: {
+                react: {
+                  runtime: 'automatic',
+                },
+                reactCompiler: true,
+              },
+            },
+          },
+        },
+      },
+      {
+        test: /\.(png|svg|jpg)$/,
+        type: 'asset/resource',
+      },
+    ],
+  },
+  plugins: [
+    new rspack.HtmlRspackPlugin({
+      template: './index.html',
+    }),
+  ],
+});

rspack/react-compiler-babel/src/App.css → rspack/react-compiler-ts/src/App.css

@@ -28,6 +28,13 @@
   color: #61dafb;
 }
 
+.App-header button {
+  margin: 1rem 0;
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  cursor: pointer;
+}
+
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);

rspack/react-compiler-babel-ts/src/App.tsx → rspack/react-compiler-ts/src/App.tsx

@@ -1,15 +1,21 @@
 import React from 'react';
 import logo from './logo.svg';
 import './App.css';
+import { useCounter } from './useCounter';
 
 function App() {
+  const { count, increment } = useCounter();
+
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <p>
-          Edit <code>src/App.js</code> and save to reload.
+          Edit <code>src/App.tsx</code> and save to reload.
         </p>
+        <button type="button" onClick={increment}>
+          Count: {count}
+        </button>
         <a
           className="App-link"
           href="https://reactjs.org"

rspack/react-compiler-ts/src/useCounter.ts

@@ -0,0 +1,7 @@
+import { useState } from 'react';
+
+export function useCounter(initial = 0) {
+  const [count, setCount] = useState(initial);
+  const increment = () => setCount((c) => c + 1);
+  return { count, increment };
+}

rspack/react-compiler-babel/package.json → rspack/react-compiler/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@rspack-example/react-compiler-babel",
+  "name": "@rspack-example/react-compiler",
   "version": "1.0.0",
   "private": true,
   "license": "MIT",
@@ -15,11 +15,8 @@
     "react-refresh": "0.19.0"
   },
   "devDependencies": {
-    "@babel/plugin-syntax-jsx": "^7.29.7",
     "@rspack/cli": "2.2.8",
     "@rspack/core": "2.2.8",
-    "@rspack/dev-server": "2.2.1",
-    "babel-loader": "^10.1.1",
-    "babel-plugin-react-compiler": "^1.0.0"
+    "@rspack/dev-server": "2.2.1"
   }
 }

rspack/react-compiler-babel/rspack.config.js → rspack/react-compiler/rspack.config.js

@@ -22,41 +22,23 @@ export default defineConfig({
         type: 'css',
       },
       {
-        test: /\.(?:js|mjs|cjs)$/,
+        test: /\.(?:js|mjs|jsx)$/,
         exclude: [/[\\/]node_modules[\\/]/],
-        use: [
-          {
-            loader: 'builtin:swc-loader',
-            options: {
-              detectSyntax: 'auto',
-              jsc: {
-                externalHelpers: true,
-              },
-            },
-          },
-        ],
-      },
-      {
-        test: /\.jsx$/,
-        use: [
-          {
-            loader: 'builtin:swc-loader',
-            options: {
-              detectSyntax: 'auto',
-              jsc: {
-                externalHelpers: true,
-                transform: {
-                  react: {
-                    runtime: 'automatic',
-                  },
+        use: {
+          loader: 'builtin:swc-loader',
+          options: {
+            detectSyntax: 'auto',
+            jsc: {
+              externalHelpers: true,
+              transform: {
+                react: {
+                  runtime: 'automatic',
                 },
+                reactCompiler: true,
               },
             },
           },
-          {
-            loader: 'babel-loader',
-          },
-        ],
+        },
       },
       {
         test: /\.(png|svg|jpg)$/,