diff --git a/e2e/cases/react/react-compiler-babel/index.test.ts b/e2e/cases/react/react-compiler-babel/index.test.ts new file mode 100644 index 0000000000..de6a8c0627 --- /dev/null +++ b/e2e/cases/react/react-compiler-babel/index.test.ts @@ -0,0 +1,42 @@ +import { build, dev, gotoPage, rspackOnlyTest } from '@e2e/helper'; +import { expect } from '@playwright/test'; + +rspackOnlyTest( + 'should render basic React component in development correctly', + async ({ page }) => { + const rsbuild = await dev({ + cwd: __dirname, + }); + + await gotoPage(page, rsbuild); + + const button = page.locator('#button'); + await expect(button).toHaveText('count: 0'); + button.click(); + await expect(button).toHaveText('count: 1'); + + rsbuild.close(); + }, +); + +rspackOnlyTest( + 'should render basic React component in production correctly', + async ({ page }) => { + const rsbuild = await build({ + cwd: __dirname, + runServer: true, + }); + + await gotoPage(page, rsbuild); + + const button = page.locator('#button'); + await expect(button).toHaveText('count: 0'); + button.click(); + await expect(button).toHaveText('count: 1'); + + const index = await rsbuild.getIndexFile(); + expect(index.content).toContain('memo_cache_sentinel'); + + rsbuild.close(); + }, +); diff --git a/e2e/cases/react/react-compiler-babel/package.json b/e2e/cases/react/react-compiler-babel/package.json new file mode 100644 index 0000000000..88056bf184 --- /dev/null +++ b/e2e/cases/react/react-compiler-babel/package.json @@ -0,0 +1,12 @@ +{ + "name": "@e2e/react-compiler-babel", + "version": "1.0.0", + "private": true, + "dependencies": { + "react": "19.0.0-rc-6d3110b4d9-20240531", + "react-dom": "19.0.0-rc-6d3110b4d9-20240531" + }, + "devDependencies": { + "babel-plugin-react-compiler": "0.0.0-experimental-938cd9a-20240601" + } +} diff --git a/e2e/cases/react/react-compiler-babel/rsbuild.config.ts b/e2e/cases/react/react-compiler-babel/rsbuild.config.ts new file mode 100644 index 0000000000..0d4f521898 --- /dev/null +++ b/e2e/cases/react/react-compiler-babel/rsbuild.config.ts @@ -0,0 +1,15 @@ +import { defineConfig } from '@rsbuild/core'; +import { pluginBabel } from '@rsbuild/plugin-babel'; +import { pluginReact } from '@rsbuild/plugin-react'; + +export default defineConfig({ + plugins: [ + pluginReact(), + pluginBabel({ + include: /\.(?:jsx|tsx)$/, + babelLoaderOptions(opts) { + opts.plugins?.unshift(require.resolve('babel-plugin-react-compiler')); + }, + }), + ], +}); diff --git a/e2e/cases/react/react-compiler-babel/src/App.jsx b/e2e/cases/react/react-compiler-babel/src/App.jsx new file mode 100644 index 0000000000..c1cfb36706 --- /dev/null +++ b/e2e/cases/react/react-compiler-babel/src/App.jsx @@ -0,0 +1,19 @@ +import { useState } from 'react'; + +const App = () => { + const [count, setCount] = useState(0); + + return ( + <> + +
+

Rsbuild with React

+

Start building amazing things with Rsbuild.

+
+ + ); +}; + +export default App; diff --git a/e2e/cases/react/react-compiler-babel/src/index.js b/e2e/cases/react/react-compiler-babel/src/index.js new file mode 100644 index 0000000000..5ceb026ccc --- /dev/null +++ b/e2e/cases/react/react-compiler-babel/src/index.js @@ -0,0 +1,9 @@ +import React from 'react'; +import { createRoot } from 'react-dom/client'; +import App from './App'; + +const container = document.getElementById('root'); +if (container) { + const root = createRoot(container); + root.render(React.createElement(App)); +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6046017e30..7788ee519e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -263,6 +263,19 @@ importers: specifier: ^3.4.19 version: 3.4.23(typescript@5.4.5) + e2e/cases/react/react-compiler-babel: + dependencies: + react: + specifier: 19.0.0-rc-6d3110b4d9-20240531 + version: 19.0.0-rc-6d3110b4d9-20240531 + react-dom: + specifier: 19.0.0-rc-6d3110b4d9-20240531 + version: 19.0.0-rc-6d3110b4d9-20240531(react@19.0.0-rc-6d3110b4d9-20240531) + devDependencies: + babel-plugin-react-compiler: + specifier: 0.0.0-experimental-938cd9a-20240601 + version: 0.0.0-experimental-938cd9a-20240601 + e2e/cases/resolve-pkg-imports: {} e2e/cases/rsdoctor/mock: {} @@ -306,7 +319,7 @@ importers: version: link:../../../packages/plugin-styled-components styled-components: specifier: ^6.1.11 - version: 6.1.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 6.1.11(react-dom@19.0.0-rc-6d3110b4d9-20240531(react@19.0.0-rc-6d3110b4d9-20240531))(react@19.0.0-rc-6d3110b4d9-20240531) e2e/cases/svelte: dependencies: @@ -1917,6 +1930,9 @@ packages: resolution: {integrity: sha512-qAHSfAdVyFmIvl0VHELib8xar7ONuSHrE2hLnsaWkYNTI68dmi1x8GYDhJjMI/e7XWal9QBlZkwbOnkcw7Z8gQ==} engines: {node: '>=6.9.0'} + '@babel/generator@7.2.0': + resolution: {integrity: sha512-BA75MVfRlFQG2EZgFYIwyT1r6xSkwfP2bdkY/kLZusEYWiJs4xCowab/alaEaT0wSvmVuXGqiefeBlP+7V1yKg==} + '@babel/generator@7.24.5': resolution: {integrity: sha512-x32i4hEXvr+iI0NEoEfDKzlemF8AmtOP8CcrRaEcpzysWuoEb1KknpcvMsHKPONoKZiDuItklgWhB18xEhr9PA==} engines: {node: '>=6.9.0'} @@ -2998,6 +3014,10 @@ packages: resolution: {integrity: sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} + '@jest/types@24.9.0': + resolution: {integrity: sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==} + engines: {node: '>= 6'} + '@jest/types@29.6.3': resolution: {integrity: sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} @@ -3792,6 +3812,9 @@ packages: '@types/istanbul-lib-report@3.0.3': resolution: {integrity: sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==} + '@types/istanbul-reports@1.1.2': + resolution: {integrity: sha512-P/W9yOX/3oPZSpaYOCQzGqgCQRXn0FFO/V8bWrCQs+wLmvVVxk6CRBXALEvNs9OHIatlnlFokfhuDo2ug01ciw==} + '@types/istanbul-reports@3.0.4': resolution: {integrity: sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==} @@ -3903,6 +3926,9 @@ packages: '@types/yargs-parser@21.0.3': resolution: {integrity: sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==} + '@types/yargs@13.0.12': + resolution: {integrity: sha512-qCxJE1qgz2y0hA4pIxjBR+PelCH0U5CK1XJXFwCNqfmliatKp47UCXXE9Dyk1OXBDLvsCF57TqQEJaeLfDYEOQ==} + '@types/yargs@17.0.32': resolution: {integrity: sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==} @@ -4155,6 +4181,10 @@ packages: resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==} engines: {node: '>=8'} + ansi-regex@4.1.1: + resolution: {integrity: sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==} + engines: {node: '>=6'} + ansi-regex@5.0.1: resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==} engines: {node: '>=8'} @@ -4279,6 +4309,9 @@ packages: peerDependencies: '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0 + babel-plugin-react-compiler@0.0.0-experimental-938cd9a-20240601: + resolution: {integrity: sha512-t+uBHxbfxq2z4j83ZYgOsV0dlSaRgPfhrYB5+CMv6ByXUAv5wm7m7YLFx67fWKrG3eDhq3+KH1OMeFypuDLkUA==} + babel-plugin-vue-jsx-hmr@1.0.0: resolution: {integrity: sha512-XRq+XTD4bub6HkavELMhihvLX2++JkSBAxRXlqQK32b+Tb0S9PEqxrDSMpOEZ1iGyOaJZj9Y0uU/FzICdyL9MA==} @@ -7417,6 +7450,10 @@ packages: engines: {node: '>=14'} hasBin: true + pretty-format@24.9.0: + resolution: {integrity: sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==} + engines: {node: '>= 6'} + pretty-format@29.7.0: resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} @@ -7536,6 +7573,11 @@ packages: peerDependencies: react: ^18.3.1 + react-dom@19.0.0-rc-6d3110b4d9-20240531: + resolution: {integrity: sha512-+dPxMs8RKrvt+rqc+yXLxjUV8D4WyrsvhlKrIm+Sfcek3t+tQfp0L9nHqiFrYnWmr2QGUijAZr18JK6GMHkYAw==} + peerDependencies: + react: 19.0.0-rc-6d3110b4d9-20240531 + react-fast-compare@3.2.2: resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==} @@ -7586,6 +7628,10 @@ packages: resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==} engines: {node: '>=0.10.0'} + react@19.0.0-rc-6d3110b4d9-20240531: + resolution: {integrity: sha512-PeNhsJDvPc12kjbohywr1Mgl3J53LzbUTTpE5A5uqQxlA/ZcXs2ErZvBndiYBT3jqqgnqCcGIdvvZ8A0r0FsAQ==} + engines: {node: '>=0.10.0'} + read-cache@1.0.0: resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==} @@ -7962,6 +8008,9 @@ packages: scheduler@0.23.2: resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==} + scheduler@0.25.0-rc-6d3110b4d9-20240531: + resolution: {integrity: sha512-DQp/XrKAuIFX153kxp1yVa8dLuGRcm/z8RAGLLEv97iEMrFlwyOXx+AIvPk3jLrX1Y68oDyNBfXh3Su7LDGcOg==} + schema-utils@3.3.0: resolution: {integrity: sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==} engines: {node: '>= 10.13.0'} @@ -8122,6 +8171,10 @@ packages: source-map-support@0.5.21: resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==} + source-map@0.5.7: + resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==} + engines: {node: '>=0.10.0'} + source-map@0.6.1: resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==} engines: {node: '>=0.10.0'} @@ -8484,6 +8537,10 @@ packages: resolution: {integrity: sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==} engines: {node: '>=8'} + trim-right@1.0.1: + resolution: {integrity: sha512-WZGXGstmCWgeevgTL54hrCuw1dyMQIzWy7ZfqRJfSmJZBwklI15egmQytFP6bPidmw3M8d5yEowl1niq4vmqZw==} + engines: {node: '>=0.10.0'} + trough@2.2.0: resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==} @@ -9012,6 +9069,15 @@ packages: resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==} engines: {node: '>=12.20'} + zod-validation-error@2.1.0: + resolution: {integrity: sha512-VJh93e2wb4c3tWtGgTa0OF/dTt/zoPCPzXq4V11ZjxmEAFaPi/Zss1xIZdEB5RD8GD00U0/iVXgqkF77RV7pdQ==} + engines: {node: '>=18.0.0'} + peerDependencies: + zod: ^3.18.0 + + zod@3.23.8: + resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==} + zwitch@2.0.4: resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==} @@ -9115,6 +9181,14 @@ snapshots: transitivePeerDependencies: - supports-color + '@babel/generator@7.2.0': + dependencies: + '@babel/types': 7.24.6 + jsesc: 2.5.2 + lodash: 4.17.21 + source-map: 0.5.7 + trim-right: 1.0.1 + '@babel/generator@7.24.5': dependencies: '@babel/types': 7.24.6 @@ -10383,6 +10457,12 @@ snapshots: dependencies: '@sinclair/typebox': 0.27.8 + '@jest/types@24.9.0': + dependencies: + '@types/istanbul-lib-coverage': 2.0.6 + '@types/istanbul-reports': 1.1.2 + '@types/yargs': 13.0.12 + '@jest/types@29.6.3': dependencies: '@jest/schemas': 29.6.3 @@ -11264,6 +11344,11 @@ snapshots: dependencies: '@types/istanbul-lib-coverage': 2.0.6 + '@types/istanbul-reports@1.1.2': + dependencies: + '@types/istanbul-lib-coverage': 2.0.6 + '@types/istanbul-lib-report': 3.0.3 + '@types/istanbul-reports@3.0.4': dependencies: '@types/istanbul-lib-report': 3.0.3 @@ -11388,6 +11473,10 @@ snapshots: '@types/yargs-parser@21.0.3': {} + '@types/yargs@13.0.12': + dependencies: + '@types/yargs-parser': 21.0.3 + '@types/yargs@17.0.32': dependencies: '@types/yargs-parser': 21.0.3 @@ -11794,6 +11883,8 @@ snapshots: dependencies: type-fest: 0.21.3 + ansi-regex@4.1.1: {} + ansi-regex@5.0.1: {} ansi-regex@6.0.1: {} @@ -11929,6 +12020,16 @@ snapshots: transitivePeerDependencies: - supports-color + babel-plugin-react-compiler@0.0.0-experimental-938cd9a-20240601: + dependencies: + '@babel/generator': 7.2.0 + '@babel/types': 7.24.6 + chalk: 4.1.2 + invariant: 2.2.4 + pretty-format: 24.9.0 + zod: 3.23.8 + zod-validation-error: 2.1.0(zod@3.23.8) + babel-plugin-vue-jsx-hmr@1.0.0: dependencies: '@babel/core': 7.24.6 @@ -15552,6 +15653,13 @@ snapshots: prettier@3.2.5: {} + pretty-format@24.9.0: + dependencies: + '@jest/types': 24.9.0 + ansi-regex: 4.1.1 + ansi-styles: 3.2.1 + react-is: 16.13.1 + pretty-format@29.7.0: dependencies: '@jest/schemas': 29.6.3 @@ -15700,6 +15808,11 @@ snapshots: react: 18.3.1 scheduler: 0.23.2 + react-dom@19.0.0-rc-6d3110b4d9-20240531(react@19.0.0-rc-6d3110b4d9-20240531): + dependencies: + react: 19.0.0-rc-6d3110b4d9-20240531 + scheduler: 0.25.0-rc-6d3110b4d9-20240531 + react-fast-compare@3.2.2: {} react-helmet-async@1.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): @@ -15754,6 +15867,8 @@ snapshots: dependencies: loose-envify: 1.4.0 + react@19.0.0-rc-6d3110b4d9-20240531: {} + read-cache@1.0.0: dependencies: pify: 2.3.0 @@ -16175,6 +16290,8 @@ snapshots: dependencies: loose-envify: 1.4.0 + scheduler@0.25.0-rc-6d3110b4d9-20240531: {} + schema-utils@3.3.0: dependencies: '@types/json-schema': 7.0.15 @@ -16343,6 +16460,8 @@ snapshots: buffer-from: 1.1.2 source-map: 0.6.1 + source-map@0.5.7: {} + source-map@0.6.1: {} source-map@0.7.4: {} @@ -16467,7 +16586,7 @@ snapshots: dependencies: inline-style-parser: 0.2.3 - styled-components@6.1.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + styled-components@6.1.11(react-dom@19.0.0-rc-6d3110b4d9-20240531(react@19.0.0-rc-6d3110b4d9-20240531))(react@19.0.0-rc-6d3110b4d9-20240531): dependencies: '@emotion/is-prop-valid': 1.2.2 '@emotion/unitless': 0.8.1 @@ -16475,8 +16594,8 @@ snapshots: css-to-react-native: 3.2.0 csstype: 3.1.3 postcss: 8.4.38 - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) + react: 19.0.0-rc-6d3110b4d9-20240531 + react-dom: 19.0.0-rc-6d3110b4d9-20240531(react@19.0.0-rc-6d3110b4d9-20240531) shallowequal: 1.1.0 stylis: 4.3.2 tslib: 2.6.2 @@ -16719,6 +16838,8 @@ snapshots: trim-newlines@3.0.1: {} + trim-right@1.0.1: {} + trough@2.2.0: {} trouter@2.0.1: @@ -17360,4 +17481,10 @@ snapshots: yocto-queue@1.0.0: {} + zod-validation-error@2.1.0(zod@3.23.8): + dependencies: + zod: 3.23.8 + + zod@3.23.8: {} + zwitch@2.0.4: {}