first commit

2026-03-10 19:37:31 +03:30
commit 61f56f997c
27684 changed files with 2784175 additions and 0 deletions
--- a/test/e2e/react-compiler/.babelrc
+++ b/test/e2e/react-compiler/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["next/babel"]
+}
--- a/test/e2e/react-compiler/.gitignore
+++ b/test/e2e/react-compiler/.gitignore
@@ -0,0 +1 @@
+node_modules/
--- a/test/e2e/react-compiler/app/function-naming/page.tsx
+++ b/test/e2e/react-compiler/app/function-naming/page.tsx
@@ -0,0 +1,23 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+export default function Page() {
+  const [callFrame, setCallFrame] = useState(null)
+  useEffect(() => {
+    const error = new Error('test-top-frame')
+    console.error(error)
+
+    const callStack = new Error('test-top-frame').stack.split(
+      'test-top-frame\n'
+    )[1]
+    // indices might change due to different compiler optimizations
+    const callFrame = callStack.split('\n')[0]
+    setCallFrame(callFrame)
+  }, [])
+  return (
+    <pre data-testid="call-frame" aria-busy={callFrame === null}>
+      {String(callFrame)}
+    </pre>
+  )
+}
--- a/test/e2e/react-compiler/app/layout.tsx
+++ b/test/e2e/react-compiler/app/layout.tsx
@@ -0,0 +1,11 @@
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
--- a/test/e2e/react-compiler/app/library-client/page.tsx
+++ b/test/e2e/react-compiler/app/library-client/page.tsx
@@ -0,0 +1,5 @@
+import { Container } from 'reference-library/client'
+
+export default function Page() {
+  return <Container>Client</Container>
+}
--- a/test/e2e/react-compiler/app/library-missing-react-server/page.tsx
+++ b/test/e2e/react-compiler/app/library-missing-react-server/page.tsx
@@ -0,0 +1,7 @@
+import { Container } from 'reference-library/missing-react-server'
+
+export const dynamic = 'force-dynamic'
+
+export default function Page() {
+  return <Container>Library missing react-server</Container>
+}
--- a/test/e2e/react-compiler/app/library-react-server/page.tsx
+++ b/test/e2e/react-compiler/app/library-react-server/page.tsx
@@ -0,0 +1,5 @@
+import { Container } from 'reference-library'
+
+export default function Page() {
+  return <Container>Library react-server</Container>
+}
--- a/test/e2e/react-compiler/app/page.tsx
+++ b/test/e2e/react-compiler/app/page.tsx
@@ -0,0 +1,31 @@
+'use client'
+
+import { Profiler, useReducer } from 'react'
+
+if (typeof window !== 'undefined') {
+  ;(window as any).staticChildRenders = 0
+}
+
+function StaticChild() {
+  return (
+    <Profiler
+      onRender={(id, phase) => {
+        ;(window as any).staticChildRenders += 1
+      }}
+      id="test"
+    >
+      <div>static child</div>
+    </Profiler>
+  )
+}
+
+export default function Page() {
+  const [count, increment] = useReducer((n) => n + 1, 1)
+  return (
+    <>
+      <div data-testid="parent-commits">Parent commits: {count}</div>
+      <button onClick={increment}>Increment</button>
+      <StaticChild />
+    </>
+  )
+}
--- a/test/e2e/react-compiler/next.config.js
+++ b/test/e2e/react-compiler/next.config.js
@@ -0,0 +1,9 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  reactCompiler: true,
+  reactProductionProfiling: true,
+}
+
+module.exports = nextConfig
--- a/test/e2e/react-compiler/package.json
+++ b/test/e2e/react-compiler/package.json
@@ -0,0 +1,7 @@
+{
+  "private": true,
+  "name": "test-e2e-react-compiler",
+  "dependencies": {
+    "reference-library": "link:./reference-library"
+  }
+}
--- a/test/e2e/react-compiler/react-compiler.test.ts
+++ b/test/e2e/react-compiler/react-compiler.test.ts
@@ -0,0 +1,150 @@
+import { nextTestSetup, FileRef } from 'e2e-utils'
+import { waitForRedbox } from 'next-test-utils'
+import { join } from 'path'
+import stripAnsi from 'strip-ansi'
+
+function normalizeCodeLocInfo(str) {
+  return (
+    str &&
+    str.replace(/^ +(?:at|in) ([\S]+)[^\n]*/gm, function (m, name) {
+      const dot = name.lastIndexOf('.')
+      if (dot !== -1) {
+        name = name.slice(dot + 1)
+      }
+      return '    at ' + name + (/\d/.test(m) ? ' (**)' : '')
+    })
+  )
+}
+
+describe.each(['default', 'babelrc'] as const)(
+  'react-compiler %s',
+  (variant) => {
+    const dependencies = (global as any).isNextDeploy
+      ? // `link` is incompatible with the npm version used when this test is deployed
+        {
+          'reference-library': 'file:./reference-library',
+        }
+      : {
+          'reference-library': 'link:./reference-library',
+        }
+    const { next, isNextDev, isTurbopack } = nextTestSetup({
+      files:
+        variant === 'babelrc'
+          ? __dirname
+          : {
+              app: new FileRef(join(__dirname, 'app')),
+              'next.config.js': new FileRef(join(__dirname, 'next.config.js')),
+              'reference-library': new FileRef(
+                join(__dirname, 'reference-library')
+              ),
+            },
+      // TODO: set only config instead once bundlers are consistent
+      buildArgs: ['--profile'],
+      dependencies: {
+        'babel-plugin-react-compiler': '0.0.0-experimental-3fde738-20250918',
+        ...dependencies,
+      },
+    })
+
+    it('should memoize Components', async () => {
+      const browser = await next.browser('/')
+
+      expect(await browser.eval('window.staticChildRenders')).toEqual(1)
+      expect(
+        await browser.elementByCss('[data-testid="parent-commits"]').text()
+      ).toEqual('Parent commits: 1')
+
+      await browser.elementByCss('button').click()
+      await browser.elementByCss('button').click()
+      await browser.elementByCss('button').click()
+
+      expect(await browser.eval('window.staticChildRenders')).toEqual(1)
+      expect(
+        await browser.elementByCss('[data-testid="parent-commits"]').text()
+      ).toEqual('Parent commits: 4')
+    })
+
+    it('should work with a library that uses the react-server condition', async () => {
+      const outputIndex = next.cliOutput.length
+      await next.render('/library-react-server')
+
+      const cliOutput = stripAnsi(next.cliOutput.slice(outputIndex))
+      expect(cliOutput).not.toMatch(/error/)
+    })
+
+    it('should work with a library using use client', async () => {
+      const outputIndex = next.cliOutput.length
+      await next.render('/library-client')
+
+      const cliOutput = stripAnsi(next.cliOutput.slice(outputIndex))
+      expect(cliOutput).not.toMatch(/error/)
+    })
+
+    it('should name functions in dev', async () => {
+      const browser = await next.browser('/function-naming')
+      await browser.waitForElementByCss(
+        '[data-testid="call-frame"][aria-busy="false"]',
+        5000
+      )
+
+      const callFrame = await browser
+        .elementByCss('[data-testid="call-frame"]')
+        .text()
+      const devFunctionName =
+        variant === 'babelrc' && !isTurbopack
+          ? // next/babel transpiles away arrow functions defeating the React Compiler naming
+            // TODO: Does Webpack or Turbopack get the Babel config right?
+            'PageUseEffect'
+          : // expected naming heuristic from React Compiler. This may change in future.
+            // Just make sure this is the heuristic from the React Compiler not something else.
+            'Page[useEffect()]'
+      if (isNextDev) {
+        await expect(browser).toDisplayCollapsedRedbox(`
+         {
+           "description": "test-top-frame",
+           "environmentLabel": null,
+           "label": "Console Error",
+           "source": "app/function-naming/page.tsx (8:19) @ ${devFunctionName}
+         >  8 |     const error = new Error('test-top-frame')
+              |                   ^",
+           "stack": [
+             "${devFunctionName} app/function-naming/page.tsx (8:19)",
+           ],
+         }
+        `)
+        // We care more about the sourcemapped frame in the Redbox.
+        // This assertion is only here to show that the negative assertion below is valid.
+        expect(normalizeCodeLocInfo(callFrame)).toEqual(
+          `    at ${devFunctionName} (**)`
+        )
+      } else {
+        expect(normalizeCodeLocInfo(callFrame)).not.toEqual(
+          `    at ${devFunctionName} (**)`
+        )
+      }
+    })
+
+    it('throws if the React Compiler is used in a React Server environment', async () => {
+      const outputIndex = next.cliOutput.length
+      const browser = await next.browser('/library-missing-react-server')
+
+      const cliOutput = normalizeCodeLocInfo(
+        stripAnsi(next.cliOutput.slice(outputIndex))
+      )
+      if (isNextDev) {
+        // TODO(NDX-663): Unhelpful error message.
+        // Should say that the library should have a react-server entrypoint that doesn't use the React Compiler.
+        expect(cliOutput).toContain(
+          "⨯ TypeError: Cannot read properties of undefined (reading 'H')" +
+            // location not important. Just that this is the only frame.
+            // TODO: Stack should start at product code. Possible React limitation.
+            '\n    at Container (**)' +
+            // Will just point to original file location
+            '\n  2 |'
+        )
+
+        await waitForRedbox(browser)
+      }
+    })
+  }
+)
--- a/test/e2e/react-compiler/reference-library/compiled/README.md
+++ b/test/e2e/react-compiler/reference-library/compiled/README.md
@@ -0,0 +1,8 @@
+These are manually compiled versions from `src/index`.js with [React Compiler Playground](https://playground.react.dev/) and [Babel.js Repl](https://babeljs.io/repl) (only to compile JSX runtime).
+
+| module                                   | import condition | resolved                             | React Compiler | Server-Client boundary | Valid environment |
+|------------------------------------------|------------------|--------------------------------------|----------------|------------------------|-------------------|
+| `reference-library/client`               | any              | `./compiled/client.js`               | Yes            | Yes                    | client-only       |
+| `reference-library`                      | `react-server`   | `./compiled/index.react-server.js`   | No             | No                     | any               |
+| `reference-library`                      | default          | `./compiled/index.js`   | Yes            | No                     | client-only       |
+| `reference-library/missing-react-server` | any              | `./compiled/missing-react-server.js` | Yes            | No                     | client-only       |
--- a/test/e2e/react-compiler/reference-library/compiled/client.js
+++ b/test/e2e/react-compiler/reference-library/compiled/client.js
@@ -0,0 +1,19 @@
+'use client'
+
+import { c as _c } from 'react/compiler-runtime'
+import { jsx as _jsx } from 'react/jsx-runtime'
+export function Container(t0) {
+  const $ = _c(2)
+  const { children } = t0
+  let t1
+  if ($[0] !== children) {
+    t1 = /*#__PURE__*/ _jsx('p', {
+      children: children,
+    })
+    $[0] = children
+    $[1] = t1
+  } else {
+    t1 = $[1]
+  }
+  return t1
+}
--- a/test/e2e/react-compiler/reference-library/compiled/index.js
+++ b/test/e2e/react-compiler/reference-library/compiled/index.js
@@ -0,0 +1,17 @@
+import { c as _c } from 'react/compiler-runtime'
+import { jsx as _jsx } from 'react/jsx-runtime'
+export function Container(t0) {
+  const $ = _c(2)
+  const { children } = t0
+  let t1
+  if ($[0] !== children) {
+    t1 = /*#__PURE__*/ _jsx('button', {
+      children: children,
+    })
+    $[0] = children
+    $[1] = t1
+  } else {
+    t1 = $[1]
+  }
+  return t1
+}
--- a/test/e2e/react-compiler/reference-library/compiled/index.react-server.js
+++ b/test/e2e/react-compiler/reference-library/compiled/index.react-server.js
@@ -0,0 +1,6 @@
+import { jsx as _jsx } from 'react/jsx-runtime'
+export function Container({ children }) {
+  return /*#__PURE__*/ _jsx('p', {
+    children: children,
+  })
+}
--- a/test/e2e/react-compiler/reference-library/compiled/missing-react-server.js
+++ b/test/e2e/react-compiler/reference-library/compiled/missing-react-server.js
@@ -0,0 +1,17 @@
+import { c as _c } from 'react/compiler-runtime'
+import { jsx as _jsx } from 'react/jsx-runtime'
+export function Container(t0) {
+  const $ = _c(2)
+  const { children } = t0
+  let t1
+  if ($[0] !== children) {
+    t1 = /*#__PURE__*/ _jsx('button', {
+      children: children,
+    })
+    $[0] = children
+    $[1] = t1
+  } else {
+    t1 = $[1]
+  }
+  return t1
+}
--- a/test/e2e/react-compiler/reference-library/index.d.ts
+++ b/test/e2e/react-compiler/reference-library/index.d.ts
@@ -0,0 +1,23 @@
+declare module 'reference-library' {
+  import type * as React from 'react'
+
+  export function Container(props: {
+    children?: React.ReactNode
+  }): React.ReactNode
+}
+
+declare module 'reference-library/client' {
+  import type * as React from 'react'
+
+  export function Container(props: {
+    children?: React.ReactNode
+  }): React.ReactNode
+}
+
+declare module 'reference-library/missing-react-server' {
+  import type * as React from 'react'
+
+  export function Container(props: {
+    children?: React.ReactNode
+  }): React.ReactNode
+}
--- a/test/e2e/react-compiler/reference-library/package.json
+++ b/test/e2e/react-compiler/reference-library/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "reference-library",
+  "version": "1.0.0",
+  "types": "./index.d.ts",
+  "exports": {
+    "./client": {
+      "types": "./index.d.ts",
+      "default": "./compiled/client.js"
+    },
+    "./missing-react-server": {
+      "types": "./index.d.ts",
+      "default": "./compiled/missing-react-server.js"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "react-server": "./compiled/index.react-server.js",
+      "default": "./compiled/index.js"
+    }
+  }
+}
--- a/test/e2e/react-compiler/reference-library/src/index.js
+++ b/test/e2e/react-compiler/reference-library/src/index.js
@@ -0,0 +1,3 @@
+export function Container({ children }) {
+  return <p children={children} />
+}