feat: support react compiler for ReactLynx

.changeset/plenty-baboons-tan.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/react-webpack-plugin": patch
+---
+
+Add React Compiler loader, which uses `babel-plugin-react-compiler` to transform user code to optimized code before ReactLynx transform.

.changeset/quick-turtles-make.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/react": patch
+---
+
+Fix the `rerender` function in the testing library to keep the current `<page/>` element used. After this fix it will behavior the same with `react-testing-library`'s `rerender` function.

.changeset/sour-weeks-wait.md

@@ -0,0 +1,15 @@
+---
+"@lynx-js/react-rsbuild-plugin": patch
+---
+
+Support [React Compiler](https://react.dev/learn/react-compiler) for ReactLynx, enable it by set `experimental_enableReactCompiler` to `true` in `lynx.config.js`:
+
+```js
+export default defineConfig({
+  plugins: [
+    pluginReactLynx({
+      experimental_enableReactCompiler: true,
+    }),
+  ],
+});
+```

.changeset/tame-forks-agree.md

@@ -0,0 +1,17 @@
+---
+"@lynx-js/react": patch
+---
+
+Support testing React Compiler in testing library. Enable React Compiler by setting the `experimental_enableReactCompiler` option of `createVitestConfig` to `true`.
+
+```js
+import { defineConfig, mergeConfig } from 'vitest/config';
+import { createVitestConfig } from '@lynx-js/react/testing-library/vitest-config';
+
+const defaultConfig = await createVitestConfig({
+  runtimePkgName: '@lynx-js/react',
+  experimental_enableReactCompiler: true,
+});
+
+export default mergeConfig(defaultConfig, config);
+```

examples/react-compiler/lynx.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig } from '@lynx-js/rspeedy';
+import { pluginQRCode } from '@lynx-js/qrcode-rsbuild-plugin';
+import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
+
+const enableBundleAnalysis = !!process.env['RSPEEDY_BUNDLE_ANALYSIS'];
+
+export default defineConfig({
+  plugins: [
+    pluginReactLynx({
+      experimental_enableReactCompiler: true,
+    }),
+    pluginQRCode({
+      schema(url) {
+        // We use `?fullscreen=true` to open the page in LynxExplorer in full screen mode
+        return `${url}?fullscreen=true`;
+      },
+    }),
+  ],
+  performance: {
+    profile: enableBundleAnalysis,
+  },
+});

examples/react-compiler/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@lynx-js/example-react-compiler",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "rspeedy build",
+    "dev": "rspeedy dev"
+  },
+  "dependencies": {
+    "@lynx-js/react": "workspace:*"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.0",
+    "@babel/plugin-syntax-jsx": "^7.27.1",
+    "@babel/plugin-syntax-typescript": "^7.27.1",
+    "@lynx-js/qrcode-rsbuild-plugin": "workspace:*",
+    "@lynx-js/react-rsbuild-plugin": "workspace:*",
+    "@lynx-js/rspeedy": "workspace:*",
+    "@lynx-js/types": "3.3.0",
+    "@types/react": "^18.3.23",
+    "babel-plugin-react-compiler": "0.0.0-experimental-0566679-20250709",
+    "react-compiler-runtime": "0.0.0-experimental-0566679-20250709"
+  }
+}

examples/react-compiler/src/App.css

@@ -0,0 +1,119 @@
+:root {
+  background-color: #000;
+  --color-text: #fff;
+}
+
+.Background {
+  position: fixed;
+  background: radial-gradient(
+    71.43% 62.3% at 46.43% 36.43%,
+    rgba(18, 229, 229, 0) 15%,
+    rgba(239, 155, 255, 0.3) 56.35%,
+    #ff6448 100%
+  );
+  box-shadow: 0px 12.93px 28.74px 0px #ffd28db2 inset;
+  border-radius: 50%;
+  width: 200vw;
+  height: 200vw;
+  top: -60vw;
+  left: -14.27vw;
+  transform: rotate(15.25deg);
+}
+
+.App {
+  position: relative;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+text {
+  color: var(--color-text);
+}
+
+.Banner {
+  flex: 5;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+}
+
+.Logo {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 8px;
+}
+
+.Logo--react {
+  width: 100px;
+  height: 100px;
+  animation: Logo--spin infinite 20s linear;
+}
+
+.Logo--lynx {
+  width: 100px;
+  height: 100px;
+  animation: Logo--shake infinite 0.5s ease;
+}
+
+@keyframes Logo--spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes Logo--shake {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(0.9);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.Content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.Arrow {
+  width: 24px;
+  height: 24px;
+}
+
+.Title {
+  font-size: 36px;
+  font-weight: 700;
+}
+
+.Subtitle {
+  font-style: italic;
+  font-size: 22px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.Description {
+  font-size: 20px;
+  color: rgba(255, 255, 255, 0.85);
+  margin: 15rpx;
+}
+
+.Hint {
+  font-size: 12px;
+  margin: 5px;
+  color: rgba(255, 255, 255, 0.65);
+}

examples/react-compiler/src/App.tsx

@@ -0,0 +1,67 @@
+import { useCallback, useEffect, useState } from '@lynx-js/react';
+
+import './App.css';
+import arrow from './assets/arrow.png';
+import lynxLogo from './assets/lynx-logo.png';
+import reactLynxLogo from './assets/react-logo.png';
+
+function Hello({ name }: {
+  name: string;
+}) {
+  const items = [1, 2, 3].map(item => {
+    return <text key={item}>Item {item}</text>;
+  });
+  return (
+    <text>
+      Hello {name}
+      {items}
+    </text>
+  );
+}
+
+export function App() {
+  const [alterLogo, setAlterLogo] = useState(false);
+
+  useEffect(() => {
+    console.info('Hello, ReactLynx');
+  }, []);
+
+  const onTap = useCallback(() => {
+    'background-only';
+    setAlterLogo(!alterLogo);
+  }, [alterLogo]);
+
+  return (
+    <view>
+      <view className='Background' />
+      <view className='App'>
+        <view className='Banner'>
+          <view className='Logo' bindtap={onTap}>
+            {alterLogo
+              ? <image src={reactLynxLogo} className='Logo--react' />
+              : <image src={lynxLogo} className='Logo--lynx' />}
+          </view>
+          <text className='Title'>React</text>
+          <text className='Subtitle'>on Lynx</text>
+          <Hello name='Lynx' />
+        </view>
+        <view className='Content'>
+          <image src={arrow} className='Arrow' />
+          <text className='Description'>Tap the logo and have fun!</text>
+          <text className='Hint'>
+            Edit<text
+              style={{
+                fontStyle: 'italic',
+                color: 'rgba(255, 255, 255, 0.85)',
+              }}
+            >
+              {' src/App.tsx '}
+            </text>
+            to see updates!
+          </text>
+        </view>
+        <view style={{ flex: 1 }}></view>
+      </view>
+    </view>
+  );
+}

examples/react-compiler/src/index.tsx

@@ -0,0 +1,11 @@
+import { root } from '@lynx-js/react';
+
+import { App } from './App.js';
+
+root.render(
+  <App />,
+);
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept();
+}

examples/react-compiler/src/rspeedy-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="@lynx-js/rspeedy/client" />

examples/react-compiler/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "@lynx-js/react",
+    "noEmit": true,
+
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedDeclarations": false,
+  },
+  "include": ["src", "lynx.config.ts", "test"],
+  "references": [
+    { "path": "../../packages/react/tsconfig.json" },
+    { "path": "../../packages/rspeedy/core/tsconfig.build.json" },
+    { "path": "../../packages/rspeedy/plugin-qrcode/tsconfig.build.json" },
+    { "path": "../../packages/rspeedy/plugin-react/tsconfig.build.json" },
+  ],
+}

packages/react/testing-library/src/__tests__/rerender.test.jsx

@@ -5,7 +5,7 @@ import { useEffect, useState } from '@lynx-js/react';
 
 test('rerender will re-render the element', async () => {
   const Greeting = (props) => <text>{props.message}</text>;
-  const { container, rerender } = render(<Greeting message='hi' />);
+  const { container, rerender, asFragment } = render(<Greeting message='hi' />);
   expect(container).toMatchInlineSnapshot(`
     <page>
       <text>
@@ -16,15 +16,16 @@ test('rerender will re-render the element', async () => {
   expect(container.firstChild).toHaveTextContent('hi');
 
   {
-    const { container } = rerender(<Greeting message='hey' />);
+    rerender(<Greeting message='hey' />);
+    const container = asFragment();
     expect(container.firstChild).toHaveTextContent('hey');
 
     expect(container).toMatchInlineSnapshot(`
-      <page>
+      <DocumentFragment>
         <text>
           hey
         </text>
-      </page>
+      </DocumentFragment>
     `);
   }
 });
@@ -42,8 +43,8 @@ test('rerender will flush pending hooks effects', async () => {
     return value;
   };
 
-  const { rerender } = render(<Component />);
-  const { findByText } = rerender(<Component />);
+  const { rerender, findByText } = render(<Component />);
+  rerender(<Component />);
   vi.spyOn(lynx.getNativeApp(), 'callLepusMethod');
   const callLepusMethod = lynxTestingEnv.backgroundThread.lynx.getNativeApp().callLepusMethod;
   expect(callLepusMethod.mock.calls).toMatchInlineSnapshot(`[]`);