From e070c4f84b62e495cfef33227f35b26e8a084249 Mon Sep 17 00:00:00 2001 From: Ari Date: Mon, 12 Oct 2026 21:56:54 +0800 Subject: [PATCH 1/2] fix(rspack): apply React Compiler to .ts files in babel-ts example (#1) * fix(rspack): apply React Compiler to .ts files in babel-ts example Hooks are commonly defined in .ts files, so babel-loader with babel-plugin-react-compiler should process those as well as .tsx. Adds a small useCounter.ts hook to demonstrate the pattern. Fixes #331 Co-authored-by: Ari * style(rspack): make counter button readable in react-compiler-babel-ts Co-authored-by: Ari --------- Co-authored-by: Cursor Agent --- .../react-compiler-babel-ts/rspack.config.js | 20 ++++++++++++++++++- rspack/react-compiler-babel-ts/src/App.css | 7 +++++++ rspack/react-compiler-babel-ts/src/App.tsx | 8 +++++++- .../react-compiler-babel-ts/src/useCounter.ts | 7 +++++++ 4 files changed, 40 insertions(+), 2 deletions(-) create mode 100644 rspack/react-compiler-babel-ts/src/useCounter.ts diff --git a/rspack/react-compiler-babel-ts/rspack.config.js b/rspack/react-compiler-babel-ts/rspack.config.js index 7a4821bb8..45ab20af4 100644 --- a/rspack/react-compiler-babel-ts/rspack.config.js +++ b/rspack/react-compiler-babel-ts/rspack.config.js @@ -16,7 +16,7 @@ export default defineConfig({ type: 'css', }, { - test: /\.(?:js|mjs|cjs|ts|mts|cts)$/, + test: /\.(?:js|mjs|cjs|mts|cts)$/, exclude: [/[\\/]node_modules[\\/]/], use: [ { @@ -30,6 +30,24 @@ export default defineConfig({ }, ], }, + { + test: /\.ts$/, + exclude: [/[\\/]node_modules[\\/]/], + use: [ + { + loader: 'builtin:swc-loader', + options: { + detectSyntax: 'auto', + jsc: { + externalHelpers: true, + }, + }, + }, + { + loader: 'babel-loader', + }, + ], + }, { test: /\.(?:jsx|tsx)$/, use: [ diff --git a/rspack/react-compiler-babel-ts/src/App.css b/rspack/react-compiler-babel-ts/src/App.css index 74b5e0534..1c7b51c75 100644 --- a/rspack/react-compiler-babel-ts/src/App.css +++ b/rspack/react-compiler-babel-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); diff --git a/rspack/react-compiler-babel-ts/src/App.tsx b/rspack/react-compiler-babel-ts/src/App.tsx index ce9cbd294..35ba1601f 100644 --- a/rspack/react-compiler-babel-ts/src/App.tsx +++ b/rspack/react-compiler-babel-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 (
logo

- Edit src/App.js and save to reload. + Edit src/App.tsx and save to reload.

+ setCount((c) => c + 1); + return { count, increment }; +} From a13b4e5225a770d4a21b5a9914302c19b55e68fe Mon Sep 17 00:00:00 2001 From: Ari Date: Tue, 13 Oct 2026 12:43:08 +0800 Subject: [PATCH 2/2] refactor(rspack): switch React Compiler examples to builtin:swc-loader (#2) * refactor(rspack): switch React Compiler examples to builtin:swc-loader Use Rspack's Rust React Compiler via jsc.transform.reactCompiler instead of babel-loader. Consolidate JS/TS/JSX/TSX into a single rule with detectSyntax: 'auto', remove Babel config/deps, and rename examples to react-compiler and react-compiler-ts. Addresses review feedback on rstackjs/rstack-examples#517. Co-authored-by: Ari * chore(rspack): fix package.json conflict and update lockfile Resolve leftover rebase conflict markers in react-compiler-ts and refresh pnpm-lock.yaml after renaming the React Compiler examples. Co-authored-by: Ari --------- Co-authored-by: Cursor Agent --- pnpm-lock.yaml | 25 +----- .../react-compiler-babel-ts/babel.config.js | 10 --- .../react-compiler-babel-ts/rspack.config.js | 84 ------------------- rspack/react-compiler-babel/babel.config.js | 9 -- .../index.html | 0 .../package.json | 6 +- rspack/react-compiler-ts/rspack.config.js | 48 +++++++++++ .../src/App.css | 0 .../src/App.tsx | 0 .../src/assets.d.ts | 0 .../src/env.d.ts | 0 .../src/index.css | 0 .../src/index.tsx | 0 .../src/logo.svg | 0 .../src/useCounter.ts | 0 .../tsconfig.json | 0 .../index.html | 0 .../package.json | 7 +- .../rspack.config.js | 42 +++------- .../src/App.css | 0 .../src/App.jsx | 0 .../src/index.css | 0 .../src/index.jsx | 0 .../src/logo.svg | 0 24 files changed, 65 insertions(+), 166 deletions(-) delete mode 100644 rspack/react-compiler-babel-ts/babel.config.js delete mode 100644 rspack/react-compiler-babel-ts/rspack.config.js delete mode 100644 rspack/react-compiler-babel/babel.config.js rename rspack/{react-compiler-babel-ts => react-compiler-ts}/index.html (100%) rename rspack/{react-compiler-babel-ts => react-compiler-ts}/package.json (70%) create mode 100644 rspack/react-compiler-ts/rspack.config.js rename rspack/{react-compiler-babel-ts => react-compiler-ts}/src/App.css (100%) rename rspack/{react-compiler-babel-ts => react-compiler-ts}/src/App.tsx (100%) rename rspack/{react-compiler-babel-ts => react-compiler-ts}/src/assets.d.ts (100%) rename rspack/{react-compiler-babel-ts => react-compiler-ts}/src/env.d.ts (100%) rename rspack/{react-compiler-babel-ts => react-compiler-ts}/src/index.css (100%) rename rspack/{react-compiler-babel-ts => react-compiler-ts}/src/index.tsx (100%) rename rspack/{react-compiler-babel-ts => react-compiler-ts}/src/logo.svg (100%) rename rspack/{react-compiler-babel-ts => react-compiler-ts}/src/useCounter.ts (100%) rename rspack/{react-compiler-babel-ts => react-compiler-ts}/tsconfig.json (100%) rename rspack/{react-compiler-babel => react-compiler}/index.html (100%) rename rspack/{react-compiler-babel => react-compiler}/package.json (65%) rename rspack/{react-compiler-babel => react-compiler}/rspack.config.js (51%) rename rspack/{react-compiler-babel => react-compiler}/src/App.css (100%) rename rspack/{react-compiler-babel => react-compiler}/src/App.jsx (100%) rename rspack/{react-compiler-babel => react-compiler}/src/index.css (100%) rename rspack/{react-compiler-babel => react-compiler}/src/index.jsx (100%) rename rspack/{react-compiler-babel => react-compiler}/src/logo.svg (100%) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 51c9e53c3..e436606cf 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3140,7 +3140,7 @@ importers: specifier: 2.2.1 version: 2.2.1(@rspack/core@2.2.8)(selfsigned@5.5.0) - rspack/react-compiler-babel: + rspack/react-compiler: dependencies: '@swc/helpers': specifier: ^0.5.23 @@ -3155,9 +3155,6 @@ importers: specifier: 0.19.0 version: 0.19.0 devDependencies: - '@babel/plugin-syntax-jsx': - specifier: ^7.29.7 - version: 7.29.7(@babel/core@7.29.7) '@rspack/cli': specifier: 2.2.8 version: 2.2.8(@rspack/core@2.2.8)(@rspack/dev-server@2.2.1) @@ -3167,14 +3164,8 @@ importers: '@rspack/dev-server': specifier: 2.2.1 version: 2.2.1(@rspack/core@2.2.8)(selfsigned@5.5.0) - babel-loader: - specifier: ^10.1.1 - version: 10.1.1(@babel/core@7.29.7)(@rspack/core@2.2.8)(webpack@5.102.1) - babel-plugin-react-compiler: - specifier: ^1.0.0 - version: 1.0.0 - rspack/react-compiler-babel-ts: + rspack/react-compiler-ts: dependencies: '@swc/helpers': specifier: ^0.5.23 @@ -3189,12 +3180,6 @@ importers: specifier: 0.19.0 version: 0.19.0 devDependencies: - '@babel/plugin-syntax-jsx': - specifier: ^7.29.7 - version: 7.29.7(@babel/core@7.29.7) - '@babel/plugin-syntax-typescript': - specifier: ^7.29.7 - version: 7.29.7(@babel/core@7.29.7) '@rspack/cli': specifier: 2.2.8 version: 2.2.8(@rspack/core@2.2.8)(@rspack/dev-server@2.2.1) @@ -3213,12 +3198,6 @@ importers: '@types/react-dom': specifier: ^19.3.0 version: 19.3.0(@types/react@19.3.0) - babel-loader: - specifier: ^10.1.1 - version: 10.1.1(@babel/core@7.29.7)(@rspack/core@2.2.8)(webpack@5.102.1) - babel-plugin-react-compiler: - specifier: ^1.0.0 - version: 1.0.0 typescript: specifier: ^5.9.3 version: 5.9.3 diff --git a/rspack/react-compiler-babel-ts/babel.config.js b/rspack/react-compiler-babel-ts/babel.config.js deleted file mode 100644 index 4ef52232a..000000000 --- a/rspack/react-compiler-babel-ts/babel.config.js +++ /dev/null @@ -1,10 +0,0 @@ -// babel.config.js -const ReactCompilerConfig = {/* ... */}; - -export default { - plugins: [ - ['babel-plugin-react-compiler', ReactCompilerConfig], // must run first! - '@babel/plugin-syntax-jsx', - ['@babel/plugin-syntax-typescript', { isTSX: true }], - ], -}; diff --git a/rspack/react-compiler-babel-ts/rspack.config.js b/rspack/react-compiler-babel-ts/rspack.config.js deleted file mode 100644 index 45ab20af4..000000000 --- a/rspack/react-compiler-babel-ts/rspack.config.js +++ /dev/null @@ -1,84 +0,0 @@ -// @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|cjs|mts|cts)$/, - exclude: [/[\\/]node_modules[\\/]/], - use: [ - { - loader: 'builtin:swc-loader', - options: { - detectSyntax: 'auto', - jsc: { - externalHelpers: true, - }, - }, - }, - ], - }, - { - test: /\.ts$/, - exclude: [/[\\/]node_modules[\\/]/], - use: [ - { - loader: 'builtin:swc-loader', - options: { - detectSyntax: 'auto', - jsc: { - externalHelpers: true, - }, - }, - }, - { - loader: 'babel-loader', - }, - ], - }, - { - test: /\.(?:jsx|tsx)$/, - use: [ - { - loader: 'builtin:swc-loader', - options: { - detectSyntax: 'auto', - jsc: { - externalHelpers: true, - transform: { - react: { - runtime: 'automatic', - }, - }, - }, - }, - }, - { - loader: 'babel-loader', - }, - ], - }, - { - test: /\.(png|svg|jpg)$/, - type: 'asset/resource', - }, - ], - }, - plugins: [ - new rspack.HtmlRspackPlugin({ - template: './index.html', - }), - ], -}); diff --git a/rspack/react-compiler-babel/babel.config.js b/rspack/react-compiler-babel/babel.config.js deleted file mode 100644 index 6b5438722..000000000 --- a/rspack/react-compiler-babel/babel.config.js +++ /dev/null @@ -1,9 +0,0 @@ -// babel.config.js -const ReactCompilerConfig = {/* ... */}; - -export default { - plugins: [ - ['babel-plugin-react-compiler', ReactCompilerConfig], // must run first! - '@babel/plugin-syntax-jsx', - ], -}; diff --git a/rspack/react-compiler-babel-ts/index.html b/rspack/react-compiler-ts/index.html similarity index 100% rename from rspack/react-compiler-babel-ts/index.html rename to rspack/react-compiler-ts/index.html diff --git a/rspack/react-compiler-babel-ts/package.json b/rspack/react-compiler-ts/package.json similarity index 70% rename from rspack/react-compiler-babel-ts/package.json rename to rspack/react-compiler-ts/package.json index d9c86839e..59ba869c2 100644 --- a/rspack/react-compiler-babel-ts/package.json +++ b/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" } } diff --git a/rspack/react-compiler-ts/rspack.config.js b/rspack/react-compiler-ts/rspack.config.js new file mode 100644 index 000000000..1dcf7baea --- /dev/null +++ b/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', + }), + ], +}); diff --git a/rspack/react-compiler-babel-ts/src/App.css b/rspack/react-compiler-ts/src/App.css similarity index 100% rename from rspack/react-compiler-babel-ts/src/App.css rename to rspack/react-compiler-ts/src/App.css diff --git a/rspack/react-compiler-babel-ts/src/App.tsx b/rspack/react-compiler-ts/src/App.tsx similarity index 100% rename from rspack/react-compiler-babel-ts/src/App.tsx rename to rspack/react-compiler-ts/src/App.tsx diff --git a/rspack/react-compiler-babel-ts/src/assets.d.ts b/rspack/react-compiler-ts/src/assets.d.ts similarity index 100% rename from rspack/react-compiler-babel-ts/src/assets.d.ts rename to rspack/react-compiler-ts/src/assets.d.ts diff --git a/rspack/react-compiler-babel-ts/src/env.d.ts b/rspack/react-compiler-ts/src/env.d.ts similarity index 100% rename from rspack/react-compiler-babel-ts/src/env.d.ts rename to rspack/react-compiler-ts/src/env.d.ts diff --git a/rspack/react-compiler-babel-ts/src/index.css b/rspack/react-compiler-ts/src/index.css similarity index 100% rename from rspack/react-compiler-babel-ts/src/index.css rename to rspack/react-compiler-ts/src/index.css diff --git a/rspack/react-compiler-babel-ts/src/index.tsx b/rspack/react-compiler-ts/src/index.tsx similarity index 100% rename from rspack/react-compiler-babel-ts/src/index.tsx rename to rspack/react-compiler-ts/src/index.tsx diff --git a/rspack/react-compiler-babel-ts/src/logo.svg b/rspack/react-compiler-ts/src/logo.svg similarity index 100% rename from rspack/react-compiler-babel-ts/src/logo.svg rename to rspack/react-compiler-ts/src/logo.svg diff --git a/rspack/react-compiler-babel-ts/src/useCounter.ts b/rspack/react-compiler-ts/src/useCounter.ts similarity index 100% rename from rspack/react-compiler-babel-ts/src/useCounter.ts rename to rspack/react-compiler-ts/src/useCounter.ts diff --git a/rspack/react-compiler-babel-ts/tsconfig.json b/rspack/react-compiler-ts/tsconfig.json similarity index 100% rename from rspack/react-compiler-babel-ts/tsconfig.json rename to rspack/react-compiler-ts/tsconfig.json diff --git a/rspack/react-compiler-babel/index.html b/rspack/react-compiler/index.html similarity index 100% rename from rspack/react-compiler-babel/index.html rename to rspack/react-compiler/index.html diff --git a/rspack/react-compiler-babel/package.json b/rspack/react-compiler/package.json similarity index 65% rename from rspack/react-compiler-babel/package.json rename to rspack/react-compiler/package.json index cbe76fd57..5e6f72655 100644 --- a/rspack/react-compiler-babel/package.json +++ b/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" } } diff --git a/rspack/react-compiler-babel/rspack.config.js b/rspack/react-compiler/rspack.config.js similarity index 51% rename from rspack/react-compiler-babel/rspack.config.js rename to rspack/react-compiler/rspack.config.js index 68bff5ff2..ff88800e6 100644 --- a/rspack/react-compiler-babel/rspack.config.js +++ b/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)$/, diff --git a/rspack/react-compiler-babel/src/App.css b/rspack/react-compiler/src/App.css similarity index 100% rename from rspack/react-compiler-babel/src/App.css rename to rspack/react-compiler/src/App.css diff --git a/rspack/react-compiler-babel/src/App.jsx b/rspack/react-compiler/src/App.jsx similarity index 100% rename from rspack/react-compiler-babel/src/App.jsx rename to rspack/react-compiler/src/App.jsx diff --git a/rspack/react-compiler-babel/src/index.css b/rspack/react-compiler/src/index.css similarity index 100% rename from rspack/react-compiler-babel/src/index.css rename to rspack/react-compiler/src/index.css diff --git a/rspack/react-compiler-babel/src/index.jsx b/rspack/react-compiler/src/index.jsx similarity index 100% rename from rspack/react-compiler-babel/src/index.jsx rename to rspack/react-compiler/src/index.jsx diff --git a/rspack/react-compiler-babel/src/logo.svg b/rspack/react-compiler/src/logo.svg similarity index 100% rename from rspack/react-compiler-babel/src/logo.svg rename to rspack/react-compiler/src/logo.svg