From 0d11993a06c31936f966dbebcad713e5612ff8e6 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Tue, 13 Oct 2026 03:41:40 +0000 Subject: [PATCH 1/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 --- .../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 | 10 ++- 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 23 files changed, 69 insertions(+), 141 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 (64%) 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/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 64% rename from rspack/react-compiler-babel-ts/package.json rename to rspack/react-compiler-ts/package.json index d9c86839e..ee046c3e0 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,20 @@ "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", +<<<<<<< HEAD:rspack/react-compiler-babel-ts/package.json "@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", +======= + "@types/node": "^24.12.4", + "@types/react": "^19.2.15", + "@types/react-dom": "^19.2.3", +>>>>>>> 418e1fd4 (refactor(rspack): switch React Compiler examples to builtin:swc-loader):rspack/react-compiler-ts/package.json "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 From e3ba2cbc9400cc206c69f738c539e8d7302c6d54 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Tue, 13 Oct 2026 03:42:58 +0000 Subject: [PATCH 2/2] 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 --- pnpm-lock.yaml | 25 ++----------------------- rspack/react-compiler-ts/package.json | 8 -------- 2 files changed, 2 insertions(+), 31 deletions(-) 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-ts/package.json b/rspack/react-compiler-ts/package.json index ee046c3e0..59ba869c2 100644 --- a/rspack/react-compiler-ts/package.json +++ b/rspack/react-compiler-ts/package.json @@ -18,17 +18,9 @@ "@rspack/cli": "2.2.8", "@rspack/core": "2.2.8", "@rspack/dev-server": "2.2.1", -<<<<<<< HEAD:rspack/react-compiler-babel-ts/package.json "@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", -======= - "@types/node": "^24.12.4", - "@types/react": "^19.2.15", - "@types/react-dom": "^19.2.3", ->>>>>>> 418e1fd4 (refactor(rspack): switch React Compiler examples to builtin:swc-loader):rspack/react-compiler-ts/package.json "typescript": "^5.9.3" } }