[compiler][bugfix] Avoid inserting duplicate context variable declarations

(note: also see alternative implementation in https://github.com/facebook/react/pull/32747)

`PruneHoistedContexts` currently strips hoisted declarations and rewrites the first `StoreContext` reassignment to a declaration. For example, in the following example, instruction 0 is removed while a synthetic `DeclareContext let` is inserted before instruction 1.

```js
// source
const cb = () => x; // reference that causes x to be hoisted

let x = 4;
x = 5;

// React Compiler IR
[0] DeclareContext HoistedLet 'x'
...
[1] StoreContext reassign 'x' = 4
[2] StoreContext reassign 'x' = 5
```

Currently, we don't account for `DeclareContext let`. As a result, we're rewriting to insert duplicate declarations.
For the below example, we should only remove instruction 0 (no need to insert a DeclareContext `let` since one is already present).
```js
// source
const cb = () => x; // reference that causes x to be hoisted

let x;
x = 5;

// React Compiler IR
[0] DeclareContext HoistedLet 'x'
...
[1] DeclareContext Let 'x'
[2] StoreContext reassign 'x' = 5
```

.claude/instructions.md

@@ -1,46 +0,0 @@
-# React
-
-**Scope**: All code EXCEPT `/compiler/` (compiler has its own instructions).
-
-## Project Structure
-
-| Directory | Purpose |
-|-----------|---------|
-| `/packages/` | Publishable packages (react, react-dom, scheduler, etc.) |
-| `/scripts/` | Build, test, and development scripts |
-| `/fixtures/` | Test applications for manual testing |
-| `/compiler/` | React Compiler (separate sub-project) |
-
-## Key Packages
-
-| Package | Purpose |
-|---------|---------|
-| `react` | Core React library |
-| `react-dom` | DOM renderer |
-| `react-reconciler` | Core reconciliation algorithm |
-| `scheduler` | Cooperative scheduling |
-| `react-server-dom-*` | Server Components |
-| `react-devtools-*` | Developer Tools |
-| `react-refresh` | Fast Refresh runtime |
-
-## Requirements
-
-- **Node**: Must be installed. Stop and prompt user if missing.
-- **Package Manager**: Use `yarn` only.
-
-## Verification
-
-**IMPORTANT**: Use `/verify` to validate all changes before committing.
-
-## Commands
-
-| Command  | Purpose              |
-|----------|----------------------|
-| `/fix`   | Lint and format code |
-| `/test`  | Run tests            |
-| `/flow`  | Type check with Flow |
-| `/flags` | Check feature flags  |
-
-## Building
-
-Builds are handled by CI. Do not run locally unless instructed.

.claude/settings.json

@@ -1,44 +0,0 @@
-{
-  "hooks": {
-    "SessionStart": [
-      {
-        "hooks": [
-          {
-            "type": "command",
-            "command": "if [[ \"$PWD\" != */compiler* ]]; then cat .claude/instructions.md 2>/dev/null || true; fi"
-          }
-        ]
-      }
-    ]
-  },
-  "permissions": {
-    "allow": [
-      "Skill(extract-errors)",
-      "Skill(feature-flags)",
-      "Skill(fix)",
-      "Skill(flags)",
-      "Skill(flow)",
-      "Skill(test)",
-      "Skill(verify)",
-      "Bash(yarn test:*)",
-      "Bash(yarn test-www:*)",
-      "Bash(yarn test-classic:*)",
-      "Bash(yarn test-stable:*)",
-      "Bash(yarn linc:*)",
-      "Bash(yarn lint:*)",
-      "Bash(yarn flow:*)",
-      "Bash(yarn prettier:*)",
-      "Bash(yarn build:*)",
-      "Bash(yarn extract-errors:*)",
-      "Bash(yarn flags:*)"
-    ],
-    "deny": [
-      "Bash(yarn download-build:*)",
-      "Bash(yarn download-build-for-head:*)",
-      "Bash(npm:*)",
-      "Bash(pnpm:*)",
-      "Bash(bun:*)",
-      "Bash(npx:*)"
-    ]
-  }
-}

.claude/skills/extract-errors/SKILL.md

@@ -1,12 +0,0 @@
----
-name: extract-errors
-description: Use when adding new error messages to React, or seeing "unknown error code" warnings.
----
-
-# Extract Error Codes
-
-## Instructions
-
-1. Run `yarn extract-errors`
-2. Report if any new errors need codes assigned
-3. Check if error codes are up to date

.claude/skills/feature-flags/SKILL.md

@@ -1,79 +0,0 @@
----
-name: feature-flags
-description: Use when feature flag tests fail, flags need updating, understanding @gate pragmas, debugging channel-specific test failures, or adding new flags to React.
----
-
-# React Feature Flags
-
-## Flag Files
-
-| File | Purpose |
-|------|---------|
-| `packages/shared/ReactFeatureFlags.js` | Default flags (canary), `__EXPERIMENTAL__` overrides |
-| `packages/shared/forks/ReactFeatureFlags.www.js` | www channel, `__VARIANT__` overrides |
-| `packages/shared/forks/ReactFeatureFlags.native-fb.js` | React Native, `__VARIANT__` overrides |
-| `packages/shared/forks/ReactFeatureFlags.test-renderer.js` | Test renderer |
-
-## Gating Tests
-
-### `@gate` pragma (test-level)
-
-Use when the feature is completely unavailable without the flag:
-
-```javascript
-// @gate enableViewTransition
-it('supports view transitions', () => {
-  // This test only runs when enableViewTransition is true
-  // and is SKIPPED (not failed) when false
-});
-```
-
-### `gate()` inline (assertion-level)
-
-Use when the feature exists but behavior differs based on flag:
-
-```javascript
-it('renders component', async () => {
-  await act(() => root.render(<App />));
-
-  if (gate(flags => flags.enableNewBehavior)) {
-    expect(container.textContent).toBe('new output');
-  } else {
-    expect(container.textContent).toBe('legacy output');
-  }
-});
-```
-
-## Adding a New Flag
-
-1. Add to `ReactFeatureFlags.js` with default value
-2. Add to each fork file (`*.www.js`, `*.native-fb.js`, etc.)
-3. If it should vary in www/RN, set to `__VARIANT__` in the fork file
-4. Gate tests with `@gate flagName` or inline `gate()`
-
-## Checking Flag States
-
-Use `/flags` to view states across channels. See the `flags` skill for full command options.
-
-## `__VARIANT__` Flags (GKs)
-
-Flags set to `__VARIANT__` simulate gatekeepers - tested twice (true and false):
-
-```bash
-/test www <pattern>              # __VARIANT__ = true
-/test www variant false <pattern> # __VARIANT__ = false
-```
-
-## Debugging Channel-Specific Failures
-
-1. Run `/flags --diff <channel1> <channel2>` to compare values
-2. Check `@gate` conditions - test may be gated to specific channels
-3. Run `/test <channel> <pattern>` to isolate the failure
-4. Verify flag exists in all fork files if newly added
-
-## Common Mistakes
-
-- **Forgetting both variants** - Always test `www` AND `www variant false` for `__VARIANT__` flags
-- **Using @gate for behavior differences** - Use inline `gate()` if both paths should run
-- **Missing fork files** - New flags must be added to ALL fork files, not just the main one
-- **Wrong gate syntax** - It's `gate(flags => flags.name)`, not `gate('name')`

.claude/skills/fix/SKILL.md

@@ -1,17 +0,0 @@
----
-name: fix
-description: Use when you have lint errors, formatting issues, or before committing code to ensure it passes CI.
----
-
-# Fix Lint and Formatting
-
-## Instructions
-
-1. Run `yarn prettier` to fix formatting
-2. Run `yarn linc` to check for remaining lint issues
-3. Report any remaining manual fixes needed
-
-## Common Mistakes
-
-- **Running prettier on wrong files** - `yarn prettier` only formats changed files
-- **Ignoring linc errors** - These will fail CI, fix them before committing

.claude/skills/flags/SKILL.md

@@ -1,39 +0,0 @@
----
-name: flags
-description: Use when you need to check feature flag states, compare channels, or debug why a feature behaves differently across release channels.
----
-
-# Feature Flags
-
-Arguments:
-- $ARGUMENTS: Optional flags
-
-## Options
-
-| Option | Purpose |
-|--------|---------|
-| (none) | Show all flags across all channels |
-| `--diff <ch1> <ch2>` | Compare flags between channels |
-| `--cleanup` | Show flags grouped by cleanup status |
-| `--csv` | Output in CSV format |
-
-## Channels
-
-- `www`, `www-modern` - Meta internal
-- `canary`, `next`, `experimental` - OSS channels
-- `rn`, `rn-fb`, `rn-next` - React Native
-
-## Legend
-
-✅ enabled, ❌ disabled, 🧪 `__VARIANT__`, 📊 profiling-only
-
-## Instructions
-
-1. Run `yarn flags $ARGUMENTS`
-2. Explain the output to the user
-3. For --diff, highlight meaningful differences
-
-## Common Mistakes
-
-- **Forgetting `__VARIANT__` flags** - These are tested both ways in www; check both variants
-- **Comparing wrong channels** - Use `--diff` to see exact differences

.claude/skills/flow/SKILL.md

@@ -1,30 +0,0 @@
----
-name: flow
-description: Use when you need to run Flow type checking, or when seeing Flow type errors in React code.
----
-
-# Flow Type Checking
-
-Arguments:
-- $ARGUMENTS: Renderer to check (default: dom-node)
-
-## Renderers
-
-| Renderer | When to Use |
-|----------|-------------|
-| `dom-node` | Default, recommended for most changes |
-| `dom-browser` | Browser-specific DOM code |
-| `native` | React Native |
-| `fabric` | React Native Fabric |
-
-## Instructions
-
-1. Run `yarn flow $ARGUMENTS` (use `dom-node` if no argument)
-2. Report type errors with file locations
-3. For comprehensive checking (slow), use `yarn flow-ci`
-
-## Common Mistakes
-
-- **Running without a renderer** - Always specify or use default `dom-node`
-- **Ignoring suppressions** - Check if `$FlowFixMe` comments are masking real issues
-- **Missing type imports** - Ensure types are imported from the correct package

.claude/skills/test/SKILL.md

@@ -1,46 +0,0 @@
----
-name: test
-description: Use when you need to run tests for React core. Supports source, www, stable, and experimental channels.
----
-
-Run tests for the React codebase.
-
-Arguments:
-- $ARGUMENTS: Channel, flags, and test pattern
-
-Usage Examples:
-- `/test ReactFiberHooks` - Run with source channel (default)
-- `/test experimental ReactFiberHooks` - Run with experimental channel
-- `/test www ReactFiberHooks` - Run with www-modern channel
-- `/test www variant false ReactFiberHooks` - Test __VARIANT__=false
-- `/test stable ReactFiberHooks` - Run with stable channel
-- `/test classic ReactFiberHooks` - Run with www-classic channel
-- `/test watch ReactFiberHooks` - Run in watch mode (TDD)
-
-Release Channels:
-- `(default)` - Source/canary channel, uses ReactFeatureFlags.js defaults
-- `experimental` - Source/experimental channel with __EXPERIMENTAL__ flags = true
-- `www` - www-modern channel with __VARIANT__ flags = true
-- `www variant false` - www channel with __VARIANT__ flags = false
-- `stable` - What ships to npm
-- `classic` - Legacy www-classic (rarely needed)
-
-Instructions:
-1. Parse channel from arguments (default: source)
-2. Map to yarn command:
-   - (default) → `yarn test --silent --no-watchman <pattern>`
-   - experimental → `yarn test -r=experimental --silent --no-watchman <pattern>`
-   - stable → `yarn test-stable --silent --no-watchman <pattern>`
-   - classic → `yarn test-classic --silent --no-watchman <pattern>`
-   - www → `yarn test-www --silent --no-watchman <pattern>`
-   - www variant false → `yarn test-www --variant=false --silent --no-watchman <pattern>`
-3. Report test results and any failures
-
-Hard Rules:
-1. **Use --silent to see failures** - This limits the test output to only failures.
-2. **Use --no-watchman** - This is a common failure in sandboxing.
-
-Common Mistakes:
-- **Running without a pattern** - Runs ALL tests, very slow. Always specify a pattern.
-- **Forgetting both www variants** - Test `www` AND `www variant false` for `__VARIANT__` flags.
-- **Test skipped unexpectedly** - Check for `@gate` pragma; see `feature-flags` skill.

.claude/skills/verify/SKILL.md

@@ -1,24 +0,0 @@
----
-name: verify
-description: Use when you want to validate changes before committing, or when you need to check all React contribution requirements.
----
-
-# Verification
-
-Run all verification steps.
-
-Arguments:
-- $ARGUMENTS: Test pattern for the test step
-
-## Instructions
-
-Run these first in sequence:
-1. Run `yarn prettier` - format code (stop if fails)
-2. Run `yarn linc` - lint changed files (stop if fails)
-
-Then run these with subagents in parallel:
-1. Use `/flow` to type check (stop if fails)
-2. Use `/test` to test changes in source (stop if fails)
-3. Use `/test www` to test changes in www (stop if fails)
-
-If all pass, show success summary. On failure, stop immediately and report the issue with suggested fixes.

.codesandbox/ci.json

@@ -1,11 +1,10 @@
 {
-  "packages": ["packages/react", "packages/react-dom", "packages/react-server-dom-webpack", "packages/scheduler"],
+  "packages": ["packages/react", "packages/react-dom", "packages/scheduler"],
   "buildCommand": "download-build-in-codesandbox-ci",
-  "node": "20",
+  "node": "18",
   "publishDirectory": {
     "react": "build/oss-experimental/react",
     "react-dom": "build/oss-experimental/react-dom",
-    "react-server-dom-webpack": "build/oss-experimental/react-server-dom-webpack",
     "scheduler": "build/oss-experimental/scheduler"
   },
   "sandboxes": ["new"],

.eslintignore

@@ -28,6 +28,3 @@ packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/
 packages/react-devtools-shell/dist
 packages/react-devtools-timeline/dist
 packages/react-devtools-timeline/static
-
-# Imported third-party Flow types
-flow-typed/

.eslintrc.js

@@ -331,7 +331,6 @@ module.exports = {
         'packages/react-server-dom-turbopack/**/*.js',
         'packages/react-server-dom-parcel/**/*.js',
         'packages/react-server-dom-fb/**/*.js',
-        'packages/react-server-dom-unbundled/**/*.js',
         'packages/react-test-renderer/**/*.js',
         'packages/react-debug-tools/**/*.js',
         'packages/react-devtools-extensions/**/*.js',
@@ -469,14 +468,13 @@ module.exports = {
       files: ['packages/react-server-dom-webpack/**/*.js'],
       globals: {
         __webpack_chunk_load__: 'readonly',
-        __webpack_get_script_filename__: 'readonly',
         __webpack_require__: 'readonly',
       },
     },
     {
       files: ['packages/react-server-dom-turbopack/**/*.js'],
       globals: {
-        __turbopack_load_by_url__: 'readonly',
+        __turbopack_load__: 'readonly',
         __turbopack_require__: 'readonly',
       },
     },
@@ -498,7 +496,6 @@ module.exports = {
         'packages/react-devtools-shared/src/devtools/views/**/*.js',
         'packages/react-devtools-shared/src/hook.js',
         'packages/react-devtools-shared/src/backend/console.js',
-        'packages/react-devtools-shared/src/backend/fiber/renderer.js',
         'packages/react-devtools-shared/src/backend/shared/DevToolsComponentStackFrame.js',
         'packages/react-devtools-shared/src/frontend/utils/withPermissionsCheck.js',
       ],
@@ -517,14 +514,6 @@ module.exports = {
         __IS_INTERNAL_VERSION__: 'readonly',
       },
     },
-    {
-      files: ['packages/react-devtools-*/**/*.js'],
-      excludedFiles: '**/__tests__/**/*.js',
-      plugins: ['eslint-plugin-react-hooks-published'],
-      rules: {
-        'react-hooks-published/rules-of-hooks': ERROR,
-      },
-    },
     {
       files: ['packages/eslint-plugin-react-hooks/src/**/*'],
       extends: ['plugin:@typescript-eslint/recommended'],
@@ -555,10 +544,13 @@ module.exports = {
   },
 
   globals: {
+    $Call: 'readonly',
+    $ElementType: 'readonly',
     $Flow$ModuleRef: 'readonly',
     $FlowFixMe: 'readonly',
     $Keys: 'readonly',
     $NonMaybeType: 'readonly',
+    $PropertyType: 'readonly',
     $ReadOnly: 'readonly',
     $ReadOnlyArray: 'readonly',
     $ArrayBufferView: 'readonly',
@@ -567,13 +559,11 @@ module.exports = {
     ConsoleTask: 'readonly', // TOOD: Figure out what the official name of this will be.
     ReturnType: 'readonly',
     AnimationFrameID: 'readonly',
-    WeakRef: 'readonly',
     // For Flow type annotation. Only `BigInt` is valid at runtime.
     bigint: 'readonly',
     BigInt: 'readonly',
     BigInt64Array: 'readonly',
     BigUint64Array: 'readonly',
-    CacheType: 'readonly',
     Class: 'readonly',
     ClientRect: 'readonly',
     CopyInspectedElementPath: 'readonly',
@@ -585,20 +575,15 @@ module.exports = {
     $AsyncIterator: 'readonly',
     Iterator: 'readonly',
     AsyncIterator: 'readonly',
-    IntervalID: 'readonly',
     IteratorResult: 'readonly',
     JSONValue: 'readonly',
     JSResourceReference: 'readonly',
-    mixin$Animatable: 'readonly',
     MouseEventHandler: 'readonly',
-    NavigateEvent: 'readonly',
-    Partial: 'readonly',
-    PerformanceMeasureOptions: 'readonly',
     PropagationPhases: 'readonly',
     PropertyDescriptor: 'readonly',
-    PropertyDescriptorMap: 'readonly',
-    Proxy$traps: 'readonly',
+    React$AbstractComponent: 'readonly',
     React$Component: 'readonly',
+    React$ComponentType: 'readonly',
     React$Config: 'readonly',
     React$Context: 'readonly',
     React$Element: 'readonly',
@@ -619,23 +604,18 @@ module.exports = {
     symbol: 'readonly',
     SyntheticEvent: 'readonly',
     SyntheticMouseEvent: 'readonly',
-    SyntheticPointerEvent: 'readonly',
     Thenable: 'readonly',
     TimeoutID: 'readonly',
     WheelEventHandler: 'readonly',
     FinalizationRegistry: 'readonly',
-    Exclude: 'readonly',
     Omit: 'readonly',
     Keyframe: 'readonly',
     PropertyIndexedKeyframes: 'readonly',
     KeyframeAnimationOptions: 'readonly',
     GetAnimationsOptions: 'readonly',
+    Animatable: 'readonly',
     ScrollTimeline: 'readonly',
-    EventListenerOptionsOrUseCapture: 'readonly',
-    FocusOptions: 'readonly',
-    OptionalEffectTiming: 'readonly',
 
-    __REACT_ROOT_PATH_TEST__: 'readonly',
     spyOnDev: 'readonly',
     spyOnDevAndProd: 'readonly',
     spyOnProd: 'readonly',
@@ -652,6 +632,5 @@ module.exports = {
     AsyncLocalStorage: 'readonly',
     async_hooks: 'readonly',
     globalThis: 'readonly',
-    navigation: 'readonly',
   },
 };

.github/ISSUE_TEMPLATE/19.md

@@ -0,0 +1,18 @@
+---
+name: "⚛React 19 beta issue"
+about: Report a issue with React 19 beta.
+title: '[React 19]'
+labels: 'React 19'
+
+---
+
+
+## Summary
+
+<!--
+  Please provide a CodeSandbox (https://codesandbox.io/s/new), a link to a
+  repository on GitHub, or provide a minimal code example that reproduces the
+  problem. You may provide a screenshot of the application if you think it is
+  relevant to your bug report. Here are some tips for providing a minimal
+  example: https://stackoverflow.com/help/mcve.
+-->

.github/ISSUE_TEMPLATE/compiler_bug_report.yml

@@ -11,7 +11,7 @@ body:
     options:
       - label: React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
       - label: babel-plugin-react-compiler (build issue installing or using the Babel plugin)
-      - label: eslint-plugin-react-hooks (build issue installing or using the eslint plugin)
+      - label: eslint-plugin-react-compiler (build issue installing or using the eslint plugin)
       - label: react-compiler-healthcheck (build issue installing or using the healthcheck script)
 - type: input
   attributes:

.github/workflows/compiler_discord_notify.yml

@@ -1,7 +1,7 @@
 name: (Compiler) Discord Notify
 
 on:
-  pull_request_target:
+  pull_request:
     types: [opened, ready_for_review]
     paths:
       - compiler/**
@@ -10,21 +10,7 @@ on:
 permissions: {}
 
 jobs:
-  check_access:
-    if: ${{ github.event.pull_request.draft == false }}
-    runs-on: ubuntu-latest
-    outputs:
-      is_member_or_collaborator: ${{ steps.check_is_member_or_collaborator.outputs.is_member_or_collaborator }}
-    steps:
-      - run: echo ${{ github.event.pull_request.author_association }}
-      - name: Check is member or collaborator
-        id: check_is_member_or_collaborator
-        if: ${{ github.event.pull_request.author_association == 'MEMBER' || github.event.pull_request.author_association == 'COLLABORATOR' }}
-        run: echo "is_member_or_collaborator=true" >> "$GITHUB_OUTPUT"
-
   check_maintainer:
-    if: ${{ needs.check_access.outputs.is_member_or_collaborator == 'true' || needs.check_access.outputs.is_member_or_collaborator == true }}
-    needs: [check_access]
     uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main
     permissions:
       # Used by check_maintainer

.github/workflows/compiler_playground.yml

@@ -40,12 +40,8 @@ jobs:
         with:
           path: |
             **/node_modules
-          key: compiler-and-playground-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('compiler/**/yarn.lock') }}
+          key: compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('compiler/**/yarn.lock') }}
       - run: yarn install --frozen-lockfile
-        if: steps.node_modules.outputs.cache-hit != 'true'
-        working-directory: compiler
-      - run: yarn install --frozen-lockfile
-        if: steps.node_modules.outputs.cache-hit != 'true'
       - name: Check Playwright version
         id: playwright_version
         run: echo "playwright_version=$(npm ls @playwright/test | grep @playwright | sed 's/.*@//' | head -1)" >> "$GITHUB_OUTPUT"
@@ -57,6 +53,8 @@ jobs:
           key: playwright-browsers-v6-${{ runner.arch }}-${{ runner.os }}-${{ steps.playwright_version.outputs.playwright_version }}
       - run: npx playwright install --with-deps chromium
         if: steps.cache_playwright_browsers.outputs.cache-hit != 'true'
+      - run: npx playwright install-deps
+        if: steps.cache_playwright_browsers.outputs.cache-hit == 'true'
       - run: CI=true yarn test
       - run: ls -R test-results
         if: '!cancelled()'

.github/workflows/compiler_prereleases.yml

@@ -16,12 +16,6 @@ on:
       version_name:
         required: true
         type: string
-      tag_version:
-        required: false
-        type: string
-      dry_run:
-        required: false
-        type: boolean
     secrets:
       NPM_TOKEN:
         required: true
@@ -55,16 +49,9 @@ jobs:
         with:
           path: |
             **/node_modules
-          key: compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('compiler/yarn.lock') }}
+          key: compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('compiler/**/yarn.lock') }}
       - run: yarn install --frozen-lockfile
-        if: steps.node_modules.outputs.cache-hit != 'true'
-      - if: inputs.dry_run == true
-        name: Publish packages to npm (dry run)
+      - name: Publish packages to npm
         run: |
           cp ./scripts/release/ci-npmrc ~/.npmrc
-          scripts/release/publish.js --frfr --debug --ci --versionName=${{ inputs.version_name }} --tag=${{ inputs.dist_tag }} ${{ inputs.tag_version && format('--tagVersion={0}', inputs.tag_version) || '' }}
-      - if: inputs.dry_run != true
-        name: Publish packages to npm
-        run: |
-          cp ./scripts/release/ci-npmrc ~/.npmrc
-          scripts/release/publish.js --frfr --ci --versionName=${{ inputs.version_name }} --tag=${{ inputs.dist_tag }} ${{ inputs.tag_version && format('--tagVersion={0}', inputs.tag_version) || '' }}
+          scripts/release/publish.js --frfr --ci --versionName=${{ inputs.version_name }} --tag ${{ inputs.dist_tag }}

.github/workflows/compiler_prereleases_manual.yml

@@ -14,12 +14,6 @@ on:
       version_name:
         required: true
         type: string
-      tag_version:
-        required: false
-        type: string
-      dry_run:
-        required: false
-        type: boolean
 
 permissions: {}
 
@@ -35,7 +29,5 @@ jobs:
       release_channel: ${{ inputs.release_channel }}
       dist_tag: ${{ inputs.dist_tag }}
       version_name: ${{ inputs.version_name }}
-      tag_version: ${{ inputs.tag_version }}
-      dry_run: ${{ inputs.dry_run }}
     secrets:
       NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/compiler_prereleases_nightly.yml

@@ -19,6 +19,5 @@ jobs:
       release_channel: experimental
       dist_tag: experimental
       version_name: '0.0.0'
-      dry_run: false
     secrets:
       NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/compiler_prereleases_weekly.yml

@@ -0,0 +1,23 @@
+name: (Compiler) Publish Prereleases Weekly
+
+on:
+  schedule:
+    # At 10 minutes past 9:00 on Mon
+    - cron: 10 9 * * 1
+
+permissions: {}
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+
+jobs:
+  publish_prerelease_beta:
+    name: Publish to beta channel
+    uses: facebook/react/.github/workflows/compiler_prereleases.yml@main
+    with:
+      commit_sha: ${{ github.sha }}
+      release_channel: beta
+      dist_tag: beta
+      version_name: '19.0.0'
+    secrets:
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/compiler_typescript.yml

@@ -47,13 +47,11 @@ jobs:
           cache-dependency-path: compiler/yarn.lock
       - name: Restore cached node_modules
         uses: actions/cache@v4
-        id: node_modules
         with:
           path: |
             **/node_modules
-          key: compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('compiler/yarn.lock') }}
+          key: compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('compiler/**/yarn.lock') }}
       - run: yarn install --frozen-lockfile
-        if: steps.node_modules.outputs.cache-hit != 'true'
       - run: yarn workspace babel-plugin-react-compiler lint
 
   # Hardcoded to improve parallelism
@@ -73,9 +71,8 @@ jobs:
         with:
           path: |
             **/node_modules
-          key: compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('compiler/yarn.lock') }}
+          key: compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('compiler/**/yarn.lock') }}
       - run: yarn install --frozen-lockfile
-        if: steps.node_modules.outputs.cache-hit != 'true'
       - run: yarn workspace babel-plugin-react-compiler jest
 
   test:
@@ -99,9 +96,8 @@ jobs:
         with:
           path: |
             **/node_modules
-          key: compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('compiler/yarn.lock') }}
+          key: compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('compiler/**/yarn.lock') }}
       - run: yarn install --frozen-lockfile
-        if: steps.node_modules.outputs.cache-hit != 'true'
       - run: xvfb-run -a yarn workspace ${{ matrix.workspace_name }} test
         if: runner.os == 'Linux' && matrix.workspace_name == 'react-forgive'
       - run: yarn workspace ${{ matrix.workspace_name }} test

.github/workflows/devtools_discord_notify.yml

@@ -1,49 +0,0 @@
-name: (DevTools) Discord Notify
-
-on:
-  pull_request_target:
-    types: [opened, ready_for_review]
-    paths:
-      - packages/react-devtools**
-      - .github/workflows/devtools_**.yml
-
-permissions: {}
-
-jobs:
-  check_access:
-    if: ${{ github.event.pull_request.draft == false }}
-    runs-on: ubuntu-latest
-    outputs:
-      is_member_or_collaborator: ${{ steps.check_is_member_or_collaborator.outputs.is_member_or_collaborator }}
-    steps:
-      - run: echo ${{ github.event.pull_request.author_association }}
-      - name: Check is member or collaborator
-        id: check_is_member_or_collaborator
-        if: ${{ github.event.pull_request.author_association == 'MEMBER' || github.event.pull_request.author_association == 'COLLABORATOR' }}
-        run: echo "is_member_or_collaborator=true" >> "$GITHUB_OUTPUT"
-
-  check_maintainer:
-    if: ${{ needs.check_access.outputs.is_member_or_collaborator == 'true' || needs.check_access.outputs.is_member_or_collaborator == true }}
-    needs: [check_access]
-    uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main
-    permissions:
-      # Used by check_maintainer
-      contents: read
-    with:
-      actor: ${{ github.event.pull_request.user.login }}
-
-  notify:
-    if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }}
-    needs: check_maintainer
-    runs-on: ubuntu-latest
-    steps:
-      - name: Discord Webhook Action
-        uses: tsickert/discord-webhook@86dc739f3f165f16dadc5666051c367efa1692f4
-        with:
-          webhook-url: ${{ secrets.DEVTOOLS_DISCORD_WEBHOOK_URL }}
-          embed-author-name: ${{ github.event.pull_request.user.login }}
-          embed-author-url: ${{ github.event.pull_request.user.html_url }}
-          embed-author-icon-url: ${{ github.event.pull_request.user.avatar_url }}
-          embed-title: '#${{ github.event.number }} (+${{github.event.pull_request.additions}} -${{github.event.pull_request.deletions}}): ${{ github.event.pull_request.title }}'
-          embed-description: ${{ github.event.pull_request.body }}
-          embed-url: ${{ github.event.pull_request.html_url }}

.github/workflows/devtools_regression_tests.yml

@@ -40,9 +40,7 @@ jobs:
       - name: Ensure clean build directory
         run: rm -rf build
       - run: yarn install --frozen-lockfile
-        if: steps.node_modules.outputs.cache-hit != 'true'
       - run: yarn --cwd scripts/release install --frozen-lockfile
-        if: steps.node_modules.outputs.cache-hit != 'true'
       - name: Download react-devtools artifacts for base revision
         run: |
           git fetch origin main
@@ -77,7 +75,6 @@ jobs:
       - name: Ensure clean build directory
         run: rm -rf build
       - run: yarn install --frozen-lockfile
-        if: steps.node_modules.outputs.cache-hit != 'true'
       - name: Restore archived build
         uses: actions/download-artifact@v4
         with:
@@ -92,7 +89,7 @@ jobs:
         uses: actions/upload-artifact@v4
         with:
           name: react-devtools
-          path: build/devtools
+          path: build/devtools.tgz
           if-no-files-found: error
       # Simplifies getting the extension for local testing
       - name: Archive chrome extension
@@ -137,7 +134,6 @@ jobs:
             **/node_modules
           key: runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
       - run: yarn install --frozen-lockfile
-        if: steps.node_modules.outputs.cache-hit != 'true'
       - name: Restore all archived build artifacts
         uses: actions/download-artifact@v4
       - name: Display structure of build
@@ -173,24 +169,14 @@ jobs:
             **/node_modules
           key: runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
       - run: yarn install --frozen-lockfile
-        if: steps.node_modules.outputs.cache-hit != 'true'
       - name: Restore all archived build artifacts
         uses: actions/download-artifact@v4
       - name: Display structure of build
         run: ls -R build
-      - name: Check Playwright version
-        id: playwright_version
-        run: echo "playwright_version=$(npm ls @playwright/test | grep @playwright | sed 's/.*@//' | head -1)" >> "$GITHUB_OUTPUT"
-      - name: Cache Playwright Browsers for version ${{ steps.playwright_version.outputs.playwright_version }}
-        id: cache_playwright_browsers
-        uses: actions/cache@v4
-        with:
-          path: ~/.cache/ms-playwright
-          key: playwright-browsers-v6-${{ runner.arch }}-${{ runner.os }}-${{ steps.playwright_version.outputs.playwright_version }}
-      - run: npx playwright install --with-deps
-        if: steps.cache_playwright_browsers.outputs.cache-hit != 'true'
-      - run: npx playwright install-deps
-        if: steps.cache_playwright_browsers.outputs.cache-hit == 'true'
+      - name: Playwright install deps
+        run: |
+          npx playwright install
+          sudo npx playwright install-deps
       - run: ./scripts/ci/download_devtools_regression_build.js ${{ matrix.version }}
       - run: ls -R build-regression
       - run: ./scripts/ci/run_devtools_e2e_tests.js ${{ matrix.version }}
@@ -201,5 +187,5 @@ jobs:
       - uses: actions/upload-artifact@v4
         with:
           name: screenshots
-          path: ./tmp/playwright-artifacts
+          path: ./tmp/screenshots
           if-no-files-found: warn

.github/workflows/runtime_build_and_test.yml

@@ -3,19 +3,9 @@ name: (Runtime) Build and Test
 on:
   push:
     branches: [main]
-    tags:
-      # To get CI for backport releases.
-      # This will duplicate CI for releases from main which is acceptable
-      - "v*"
   pull_request:
     paths-ignore:
       - compiler/**
-  workflow_dispatch:
-    inputs:
-      commit_sha:
-        required: false
-        type: string
-        default: ''
 
 permissions: {}
 
@@ -38,14 +28,14 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
       - name: Check cache hit
         uses: actions/cache/restore@v4
         id: node_modules
         with:
           path: |
             **/node_modules
-          key: runtime-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          key: runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
           lookup-only: true
       - uses: actions/setup-node@v4
         if: steps.node_modules.outputs.cache-hit != 'true'
@@ -59,8 +49,10 @@ jobs:
         with:
           path: |
             **/node_modules
-          key: runtime-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
-          # Don't use restore-keys here. Otherwise the cache grows indefinitely.
+          key: runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-
+            runtime-node_modules-v6-
       - run: yarn install --frozen-lockfile
         if: steps.node_modules.outputs.cache-hit != 'true'
       - name: Save cache
@@ -69,7 +61,7 @@ jobs:
         with:
           path: |
             **/node_modules
-          key: runtime-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          key: runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
 
   runtime_compiler_node_modules_cache:
     name: Cache Runtime, Compiler node_modules
@@ -77,14 +69,14 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
       - name: Check cache hit
         uses: actions/cache/restore@v4
         id: node_modules
         with:
           path: |
             **/node_modules
-          key: runtime-and-compiler-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'compiler/yarn.lock') }}
+          key: runtime-and-compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'compiler/yarn.lock') }}
           lookup-only: true
       - uses: actions/setup-node@v4
         if: steps.node_modules.outputs.cache-hit != 'true'
@@ -100,8 +92,10 @@ jobs:
         with:
           path: |
             **/node_modules
-          key: runtime-and-compiler-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'compiler/yarn.lock') }}
-          # Don't use restore-keys here. Otherwise the cache grows indefinitely.
+          key: runtime-and-compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'compiler/yarn.lock') }}
+          restore-keys: |
+            runtime-and-compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-
+            runtime-and-compiler-node_modules-v6-
       - run: yarn install --frozen-lockfile
         if: steps.node_modules.outputs.cache-hit != 'true'
       - run: yarn --cwd compiler install --frozen-lockfile
@@ -112,7 +106,7 @@ jobs:
         with:
           path: |
             **/node_modules
-          key: runtime-and-compiler-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'compiler/yarn.lock') }}
+          key: runtime-and-compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'compiler/yarn.lock') }}
 
   # ----- FLOW -----
   discover_flow_inline_configs:
@@ -123,7 +117,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
       - uses: actions/github-script@v7
         id: set-matrix
         with:
@@ -142,7 +136,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
       - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
@@ -154,8 +148,10 @@ jobs:
         with:
           path: |
             **/node_modules
-          key: runtime-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
-          # Don't use restore-keys here. Otherwise the cache grows indefinitely.
+          key: runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-
+            runtime-node_modules-v6-
       - name: Ensure clean build directory
         run: rm -rf build
       - run: yarn install --frozen-lockfile
@@ -170,7 +166,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
       - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
@@ -182,15 +178,17 @@ jobs:
         with:
           path: |
             **/node_modules
-          key: runtime-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
-          # Don't use restore-keys here. Otherwise the cache grows indefinitely.
+          key: runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-
+            runtime-node_modules-v6-
       - name: Ensure clean build directory
         run: rm -rf build
       - run: yarn install --frozen-lockfile
         if: steps.node_modules.outputs.cache-hit != 'true'
       - run: |
           yarn generate-inline-fizz-runtime
-          git diff --exit-code || (echo "There was a change to the Fizz runtime. Run \`yarn generate-inline-fizz-runtime\` and check in the result." && false)
+          git diff --quiet || (echo "There was a change to the Fizz runtime. Run `yarn generate-inline-fizz-runtime` and check in the result." && false)
 
   # ----- FEATURE FLAGS -----
   flags:
@@ -200,7 +198,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
       - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
@@ -212,7 +210,7 @@ jobs:
         with:
           path: |
             **/node_modules
-          key: runtime-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          key: runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
       - name: Ensure clean build directory
         run: rm -rf build
       - run: yarn install --frozen-lockfile
@@ -256,7 +254,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
       - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
@@ -270,48 +268,18 @@ jobs:
         with:
           path: |
             **/node_modules
-          key: runtime-and-compiler-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'compiler/yarn.lock') }}
-          # Don't use restore-keys here. Otherwise the cache grows indefinitely.
+          key: runtime-and-compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'compiler/yarn.lock') }}
+          restore-keys: |
+            runtime-and-compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-
+            runtime-and-compiler-node_modules-v6-
       - name: Ensure clean build directory
         run: rm -rf build
       - run: yarn install --frozen-lockfile
         if: steps.node_modules.outputs.cache-hit != 'true'
       - run: yarn --cwd compiler install --frozen-lockfile
         if: steps.node_modules.outputs.cache-hit != 'true'
-      - run: node --version
       - run: yarn test ${{ matrix.params }} --ci --shard=${{ matrix.shard }}
 
-  # Hardcoded to improve parallelism
-  test-linter:
-    name: Test eslint-plugin-react-hooks
-    needs: [runtime_compiler_node_modules_cache]
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version-file: '.nvmrc'
-          cache: yarn
-          cache-dependency-path:  |
-            yarn.lock
-            compiler/yarn.lock
-      - name: Restore cached node_modules
-        uses: actions/cache@v4
-        id: node_modules
-        with:
-          path: |
-            **/node_modules
-          key: runtime-and-compiler-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'compiler/yarn.lock') }}
-      - name: Install runtime dependencies
-        run: yarn install --frozen-lockfile
-        if: steps.node_modules.outputs.cache-hit != 'true'
-      - name: Install compiler dependencies
-        run: yarn install --frozen-lockfile
-        working-directory: compiler
-        if: steps.node_modules.outputs.cache-hit != 'true'
-      - run: ./scripts/react-compiler/build-compiler.sh && ./scripts/react-compiler/link-compiler.sh
-      - run: yarn workspace eslint-plugin-react-hooks test
-
   # ----- BUILD -----
   build_and_lint:
     name: yarn build and lint
@@ -326,7 +294,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
       - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
@@ -344,8 +312,10 @@ jobs:
         with:
           path: |
             **/node_modules
-          key: runtime-and-compiler-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'compiler/yarn.lock') }}
-          # Don't use restore-keys here. Otherwise the cache grows indefinitely.
+          key: runtime-and-compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'compiler/yarn.lock') }}
+          restore-keys: |
+            runtime-and-compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-
+            runtime-and-compiler-node_modules-v6-
       - name: Ensure clean build directory
         run: rm -rf build
       - run: yarn install --frozen-lockfile
@@ -383,6 +353,9 @@ jobs:
           -r=experimental --env=development,
           -r=experimental --env=production,
 
+          # Dev Tools
+          --project=devtools -r=experimental,
+
           # TODO: Update test config to support www build tests
           # - "-r=www-classic --env=development --variant=false"
           # - "-r=www-classic --env=production --variant=false"
@@ -416,7 +389,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
       - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
@@ -430,8 +403,10 @@ jobs:
         with:
           path: |
             **/node_modules
-          key: runtime-and-compiler-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'compiler/yarn.lock') }}
-          # Don't use restore-keys here. Otherwise the cache grows indefinitely.
+          key: runtime-and-compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'compiler/yarn.lock') }}
+          restore-keys: |
+            runtime-and-compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-
+            runtime-and-compiler-node_modules-v6-
       - name: Ensure clean build directory
         run: rm -rf build
       - run: yarn install --frozen-lockfile
@@ -446,66 +421,16 @@ jobs:
           merge-multiple: true
       - name: Display structure of build
         run: ls -R build
-      - run: node --version
       - run: yarn test --build ${{ matrix.test_params }} --shard=${{ matrix.shard }} --ci
 
-  test_build_devtools:
-    name: yarn test-build (devtools)
-    needs: [build_and_lint, runtime_node_modules_cache]
-    strategy:
-      fail-fast: false
-      matrix:
-        shard:
-          - 1/5
-          - 2/5
-          - 3/5
-          - 4/5
-          - 5/5
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
-      - uses: actions/setup-node@v4
-        with:
-          node-version-file: '.nvmrc'
-          cache: yarn
-          cache-dependency-path: yarn.lock
-      - name: Restore cached node_modules
-        uses: actions/cache/restore@v4
-        id: node_modules
-        with:
-          path: |
-            **/node_modules
-          key: runtime-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
-          # Don't use restore-keys here. Otherwise the cache grows indefinitely.
-      - name: Ensure clean build directory
-        run: rm -rf build
-      - run: yarn install --frozen-lockfile
-        if: steps.node_modules.outputs.cache-hit != 'true'
-      - name: Restore archived build
-        uses: actions/download-artifact@v4
-        with:
-          pattern: _build_*
-          path: build
-          merge-multiple: true
-      - name: Display structure of build
-        run: ls -R build
-      - run: node --version
-      - run: yarn test --build --project=devtools -r=experimental --shard=${{ matrix.shard }} --ci
-
   process_artifacts_combined:
     name: Process artifacts combined
     needs: [build_and_lint, runtime_node_modules_cache]
-    permissions:
-      # https://github.com/actions/attest-build-provenance
-      id-token: write
-      attestations: write
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
         with:
-          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
       - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
@@ -517,8 +442,10 @@ jobs:
         with:
           path: |
             **/node_modules
-          key: runtime-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
-          # Don't use restore-keys here. Otherwise the cache grows indefinitely.
+          key: runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-
+            runtime-node_modules-v6-
       - name: Ensure clean build directory
         run: rm -rf build
       - run: yarn install --frozen-lockfile
@@ -531,7 +458,7 @@ jobs:
           merge-multiple: true
       - name: Display structure of build
         run: ls -R build
-      - run: echo ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }} >> build/COMMIT_SHA
+      - run: echo ${{ github.event.pull_request.head.sha || github.sha }} >> build/COMMIT_SHA
       - name: Scrape warning messages
         run: |
           mkdir -p ./build/__test_utils__
@@ -541,7 +468,6 @@ jobs:
         # TODO: Migrate scripts to use `build` directory instead of `build2`
       - run: cp ./build.tgz ./build2.tgz
       - name: Archive build artifacts
-        id: upload_artifacts_combined
         uses: actions/upload-artifact@v4
         with:
           name: artifacts_combined
@@ -549,17 +475,6 @@ jobs:
             ./build.tgz
             ./build2.tgz
           if-no-files-found: error
-      - uses: actions/attest-build-provenance@v2
-        # We don't verify builds generated from pull requests not originating from facebook/react.
-        # However, if the PR lands, the run on `main` will generate the attestation which can then
-        # be used to download a build via scripts/release/download-experimental-build.js.
-        #
-        # Note that this means that scripts/release/download-experimental-build.js must be run with
-        # --no-verify when downloading a build from a fork.
-        if: github.event_name == 'push' && github.ref_name == 'main' || github.event.pull_request.head.repo.full_name == github.repository
-        with:
-          subject-name: artifacts_combined.zip
-          subject-digest: sha256:${{ steps.upload_artifacts_combined.outputs.artifact-digest }}
 
   check_error_codes:
     name: Search build artifacts for unminified errors
@@ -568,7 +483,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
       - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
@@ -580,8 +495,10 @@ jobs:
         with:
           path: |
             **/node_modules
-          key: runtime-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
-          # Don't use restore-keys here. Otherwise the cache grows indefinitely.
+          key: runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-
+            runtime-node_modules-v6-
       - name: Ensure clean build directory
         run: rm -rf build
       - run: yarn install --frozen-lockfile
@@ -597,7 +514,7 @@ jobs:
       - name: Search build artifacts for unminified errors
         run: |
           yarn extract-errors
-          git diff --exit-code || (echo "Found unminified errors. Either update the error codes map or disable error minification for the affected build, if appropriate." && false)
+          git diff --quiet || (echo "Found unminified errors. Either update the error codes map or disable error minification for the affected build, if appropriate." && false)
 
   check_release_dependencies:
     name: Check release dependencies
@@ -606,7 +523,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
       - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
@@ -618,8 +535,10 @@ jobs:
         with:
           path: |
             **/node_modules
-          key: runtime-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
-          # Don't use restore-keys here. Otherwise the cache grows indefinitely.
+          key: runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-
+            runtime-node_modules-v6-
       - name: Ensure clean build directory
         run: rm -rf build
       - run: yarn install --frozen-lockfile
@@ -641,7 +560,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
       - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
@@ -682,7 +601,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
       - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
@@ -756,7 +675,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
       - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
@@ -768,8 +687,10 @@ jobs:
         with:
           path: |
             **/node_modules
-          key: runtime-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
-          # Don't use restore-keys here. Otherwise the cache grows indefinitely.
+          key: runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-
+            runtime-node_modules-v6-
       - name: Ensure clean build directory
         run: rm -rf build
       - run: yarn install --frozen-lockfile
@@ -792,11 +713,6 @@ jobs:
           name: react-devtools-${{ matrix.browser }}-extension
           path: build/devtools/${{ matrix.browser }}-extension.zip
           if-no-files-found: error
-      - name: Archive ${{ matrix.browser }} metadata
-        uses: actions/upload-artifact@v4
-        with:
-          name: react-devtools-${{ matrix.browser }}-metadata
-          path: build/devtools/webpack-stats.*.json
 
   merge_devtools_artifacts:
     name: Merge DevTools artifacts
@@ -807,7 +723,7 @@ jobs:
         uses: actions/upload-artifact/merge@v4
         with:
           name: react-devtools
-          pattern: react-devtools-*
+          pattern: react-devtools-*-extension
 
   run_devtools_e2e_tests:
     name: Run DevTools e2e tests
@@ -816,7 +732,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
       - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
@@ -828,8 +744,10 @@ jobs:
         with:
           path: |
             **/node_modules
-          key: runtime-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
-          # Don't use restore-keys here. Otherwise the cache grows indefinitely.
+          key: runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-
+            runtime-node_modules-v6-
       - name: Ensure clean build directory
         run: rm -rf build
       - run: yarn install --frozen-lockfile
@@ -840,27 +758,12 @@ jobs:
           pattern: _build_*
           path: build
           merge-multiple: true
-      - name: Check Playwright version
-        id: playwright_version
-        run: echo "playwright_version=$(npm ls @playwright/test | grep @playwright | sed 's/.*@//' | head -1)" >> "$GITHUB_OUTPUT"
-      - name: Cache Playwright Browsers for version ${{ steps.playwright_version.outputs.playwright_version }}
-        id: cache_playwright_browsers
-        uses: actions/cache@v4
-        with:
-          path: ~/.cache/ms-playwright
-          key: playwright-browsers-v6-${{ runner.arch }}-${{ runner.os }}-${{ steps.playwright_version.outputs.playwright_version }}
-      - name: Playwright install deps
-        if: steps.cache_playwright_browsers.outputs.cache-hit != 'true'
-        run: npx playwright install --with-deps chromium
+      - run: |
+          npx playwright install
+          sudo npx playwright install-deps
       - run: ./scripts/ci/run_devtools_e2e_tests.js
         env:
           RELEASE_CHANNEL: experimental
-      - name: Archive Playwright report
-        uses: actions/upload-artifact@v4
-        with:
-          name: devtools-playwright-artifacts
-          path: tmp/playwright-artifacts
-          if-no-files-found: warn
 
   # ----- SIZEBOT -----
   sizebot:
@@ -874,7 +777,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
       - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
@@ -894,18 +797,14 @@ jobs:
       - run: yarn --cwd scripts/release install --frozen-lockfile
         if: steps.node_modules.outputs.cache-hit != 'true'
       - name: Download artifacts for base revision
-        # The build could have been generated from a fork, so we must download the build without
-        # any verification. This is safe since we only use this for sizebot calculation and the
-        # unverified artifact is not used. Additionally this workflow runs in the pull_request
-        # trigger so only restricted permissions are available.
         run: |
-          GH_TOKEN=${{ github.token }} scripts/release/download-experimental-build.js --commit=$(git rev-parse ${{ github.event.pull_request.base.sha }}) ${{ (github.event.pull_request.head.repo.full_name != github.repository && '--noVerify') || ''}}
+          GH_TOKEN=${{ github.token }} scripts/release/download-experimental-build.js --commit=$(git rev-parse ${{ github.event.pull_request.base.sha }})
           mv ./build ./base-build
+      # TODO: The `download-experimental-build` script copies the npm
+      # packages into the `node_modules` directory. This is a historical
+      # quirk of how the release script works. Let's pretend they
+      # don't exist.
       - name: Delete extraneous files
-        # TODO: The `download-experimental-build` script copies the npm
-        # packages into the `node_modules` directory. This is a historical
-        # quirk of how the release script works. Let's pretend they
-        # don't exist.
         run: rm -rf ./base-build/node_modules
       - name: Display structure of base-build from origin/main
         run: ls -R base-build
@@ -923,7 +822,7 @@ jobs:
           node ./scripts/print-warnings/print-warnings.js > build/__test_utils__/ReactAllWarnings.js
       - name: Display structure of build for PR
         run: ls -R build
-      - run: echo ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }} >> build/COMMIT_SHA
+      - run: echo ${{ github.event.pull_request.head.sha || github.sha }} >> build/COMMIT_SHA
       - run: node ./scripts/tasks/danger
       - name: Archive sizebot results
         uses: actions/upload-artifact@v4

.github/workflows/runtime_commit_artifacts.yml

@@ -132,9 +132,9 @@ jobs:
           mkdir ./compiled/facebook-www/__test_utils__
           mv build/__test_utils__/ReactAllWarnings.js ./compiled/facebook-www/__test_utils__/ReactAllWarnings.js
 
-          # Copy eslint-plugin-react-hooks
+          # Move eslint-plugin-react-hooks into eslint-plugin-react-hooks
           mkdir ./compiled/eslint-plugin-react-hooks
-          cp build/oss-experimental/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js \
+          mv build/oss-experimental/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js \
             ./compiled/eslint-plugin-react-hooks/index.js
 
           # Move unstable_server-external-runtime.js into facebook-www
@@ -162,19 +162,10 @@ jobs:
           mv build/facebook-react-native/react-is/cjs/ $BASE_FOLDER/RKJSModules/vendor/react/react-is/
           mv build/facebook-react-native/react-test-renderer/cjs/ $BASE_FOLDER/RKJSModules/vendor/react/react-test-renderer/
 
-          # Delete the OSS renderers, these are sync'd to RN separately.
+          # Delete OSS renderer. OSS renderer is synced through internal script.
           RENDERER_FOLDER=$BASE_FOLDER/react-native-github/Libraries/Renderer/implementations/
           rm $RENDERER_FOLDER/ReactFabric-{dev,prod,profiling}.js
-          
-          # Delete the legacy renderer shim, this is not sync'd and will get deleted in the future.
-          SHIM_FOLDER=$BASE_FOLDER/react-native-github/Libraries/Renderer/shims/
-          rm $SHIM_FOLDER/ReactNative.js
-
-          # Copy eslint-plugin-react-hooks
-          # NOTE: This is different from www, here we include the full package
-          #       including package.json to include dependencies in fbsource.
-          mkdir "$BASE_FOLDER/tools"
-          cp -r build/oss-experimental/eslint-plugin-react-hooks "$BASE_FOLDER/tools"
+          rm $RENDERER_FOLDER/ReactNativeRenderer-{dev,prod,profiling}.js
 
           # Move React Native version file
           mv build/facebook-react-native/VERSION_NATIVE_FB ./compiled-rn/VERSION_NATIVE_FB
@@ -335,10 +326,10 @@ jobs:
           git --no-pager diff -U0 --cached | grep '^[+-]' | head -n 100
           echo "===================="
           # Ignore REVISION or lines removing @generated headers.
-          if git diff --cached ':(exclude)*REVISION' ':(exclude)*/eslint-plugin-react-hooks/package.json' | grep -vE "^(@@|diff|index|\-\-\-|\+\+\+|\- \* @generated SignedSource)" | grep "^[+-]" > /dev/null; then
+          if git diff --cached ':(exclude)*REVISION' | grep -vE "^(@@|diff|index|\-\-\-|\+\+\+|\- \* @generated SignedSource)" | grep "^[+-]" > /dev/null; then
             echo "Changes detected"
             echo "===== Changes ====="
-            git --no-pager diff --cached ':(exclude)*REVISION' ':(exclude)*/eslint-plugin-react-hooks/package.json' | grep -vE "^(@@|diff|index|\-\-\-|\+\+\+|\- \* @generated SignedSource)" | grep "^[+-]" | head -n 50
+            git --no-pager diff --cached ':(exclude)*REVISION' | grep -vE "^(@@|diff|index|\-\-\-|\+\+\+|\- \* @generated SignedSource)" | grep "^[+-]" | head -n 50
             echo "==================="
             echo "should_commit=true" >> "$GITHUB_OUTPUT"
           else

.github/workflows/runtime_discord_notify.yml

@@ -1,32 +1,16 @@
 name: (Runtime) Discord Notify
 
 on:
-  pull_request_target:
+  pull_request:
     types: [opened, ready_for_review]
     paths-ignore:
-      - packages/react-devtools**
       - compiler/**
       - .github/workflows/compiler_**.yml
-      - .github/workflows/devtools**.yml
 
 permissions: {}
 
 jobs:
-  check_access:
-    if: ${{ github.event.pull_request.draft == false }}
-    runs-on: ubuntu-latest
-    outputs:
-      is_member_or_collaborator: ${{ steps.check_is_member_or_collaborator.outputs.is_member_or_collaborator }}
-    steps:
-      - run: echo ${{ github.event.pull_request.author_association }}
-      - name: Check is member or collaborator
-        id: check_is_member_or_collaborator
-        if: ${{ github.event.pull_request.author_association == 'MEMBER' || github.event.pull_request.author_association == 'COLLABORATOR' }}
-        run: echo "is_member_or_collaborator=true" >> "$GITHUB_OUTPUT"
-
   check_maintainer:
-    if: ${{ needs.check_access.outputs.is_member_or_collaborator == 'true' || needs.check_access.outputs.is_member_or_collaborator == true }}
-    needs: [check_access]
     uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main
     permissions:
       # Used by check_maintainer

.github/workflows/runtime_eslint_plugin_e2e.yml

@@ -29,7 +29,6 @@ jobs:
           - "7"
           - "8"
           - "9"
-          - "10"
     steps:
       - uses: actions/checkout@v4
         with:
@@ -47,20 +46,17 @@ jobs:
         with:
           path: |
             **/node_modules
-          key: runtime-and-compiler-eslint_e2e-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'compiler/yarn.lock', 'fixtures/eslint-v*/yarn.lock') }}
+          key: runtime-and-compiler-eslint_e2e-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'compiler/yarn.lock') }}
       - name: Ensure clean build directory
         run: rm -rf build
       - run: yarn install --frozen-lockfile
-        if: steps.node_modules.outputs.cache-hit != 'true'
       - run: yarn --cwd compiler install --frozen-lockfile
-        if: steps.node_modules.outputs.cache-hit != 'true'
-      - name: Install fixture dependencies
-        working-directory: ./fixtures/eslint-v${{ matrix.eslint_major }}
-        run: yarn --frozen-lockfile
-        if: steps.node_modules.outputs.cache-hit != 'true'
       - name: Build plugin
         working-directory: fixtures/eslint-v${{ matrix.eslint_major }}
         run: node build.mjs
+      - name: Install fixture dependencies
+        working-directory: ./fixtures/eslint-v${{ matrix.eslint_major }}
+        run: yarn --frozen-lockfile
       - name: Run lint test
         working-directory: ./fixtures/eslint-v${{ matrix.eslint_major }}
         run: yarn lint

.github/workflows/runtime_prereleases.yml

@@ -13,27 +13,7 @@ on:
       dist_tag:
         required: true
         type: string
-      enableFailureNotification:
-        description: 'Whether to notify the team on Discord when the release fails. Useful if this workflow is called from an automation.'
-        required: false
-        type: boolean
-      only_packages:
-        description: Packages to publish (space separated)
-        type: string
-      skip_packages:
-        description: Packages to NOT publish (space separated)
-        type: string
-      dry:
-        required: true
-        description: Dry run instead of publish?
-        type: boolean
-        default: true
     secrets:
-      DISCORD_WEBHOOK_URL:
-        description: 'Discord webhook URL to notify on failure. Only required if enableFailureNotification is true.'
-        required: false
-      GH_TOKEN:
-        required: true
       NPM_TOKEN:
         required: true
 
@@ -49,9 +29,6 @@ jobs:
   publish_prerelease:
     name: Publish prelease (${{ inputs.release_channel }}) ${{ inputs.commit_sha }} @${{ inputs.dist_tag }}
     runs-on: ubuntu-latest
-    permissions:
-      # We use github.token to download the build artifact from a previous runtime_build_and_test.yml run
-      actions: read
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
@@ -69,42 +46,8 @@ jobs:
       - name: Ensure clean build directory
         run: rm -rf build
       - run: yarn install --frozen-lockfile
-        if: steps.node_modules.outputs.cache-hit != 'true'
       - run: yarn --cwd scripts/release install --frozen-lockfile
-        if: steps.node_modules.outputs.cache-hit != 'true'
-      - run: cp ./scripts/release/ci-npmrc ~/.npmrc
       - run: |
-          GH_TOKEN=${{ secrets.GH_TOKEN }} scripts/release/prepare-release-from-ci.js --skipTests -r ${{ inputs.release_channel }} --commit=${{ inputs.commit_sha }}
-      - name: Check prepared files
-        run: ls -R build/node_modules
-      - if: '${{ inputs.only_packages }}'
-        name: 'Publish ${{ inputs.only_packages }}'
-        run: |
-          scripts/release/publish.js \
-            --ci \
-            --tags=${{ inputs.dist_tag }} \
-            --onlyPackages=${{ inputs.only_packages }} ${{ (inputs.dry && '') || '\'}}
-            ${{ inputs.dry && '--dry' || '' }}
-      - if: '${{ inputs.skip_packages }}'
-        name: 'Publish all packages EXCEPT ${{ inputs.skip_packages }}'
-        run: |
-          scripts/release/publish.js \
-            --ci \
-            --tags=${{ inputs.dist_tag }} \
-            --skipPackages=${{ inputs.skip_packages }} ${{ (inputs.dry && '') || '\'}}
-            ${{ inputs.dry && '--dry' || '' }}
-      - if: '${{ !inputs.skip_packages && !inputs.only_packages }}'
-        name: 'Publish all packages'
-        run: |
-          scripts/release/publish.js \
-            --ci \
-            --tags=${{ inputs.dist_tag }} ${{ (inputs.dry && '') || '\'}}
-            ${{ inputs.dry && '--dry' || '' }}
-      - name: Notify Discord on failure
-        if: failure() && inputs.enableFailureNotification == true
-        uses: tsickert/discord-webhook@86dc739f3f165f16dadc5666051c367efa1692f4
-        with:
-          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
-          embed-author-name: "GitHub Actions"
-          embed-title: '[Runtime] Publish of ${{ inputs.release_channel }}@${{ inputs.dist_tag}} release failed'
-          embed-url: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}/attempts/${{ github.run_attempt }}
+          scripts/release/prepare-release-from-ci.js --skipTests -r ${{ inputs.release_channel }} --commit=${{ inputs.commit_sha }}
+          cp ./scripts/release/ci-npmrc ~/.npmrc
+          scripts/release/publish.js --ci --tags ${{ inputs.dist_tag }}

.github/workflows/runtime_prereleases_manual.yml

@@ -5,25 +5,6 @@ on:
     inputs:
       prerelease_commit_sha:
         required: true
-      only_packages:
-        description: Packages to publish (space separated)
-        type: string
-      skip_packages:
-        description: Packages to NOT publish (space separated)
-        type: string
-      dry:
-        required: true
-        description: Dry run instead of publish?
-        type: boolean
-        default: true
-      experimental_only:
-        type: boolean
-        description: Only publish to the experimental tag
-        default: false
-      force_notify:
-        description: Force a Discord notification?
-        type: boolean
-        default: false
 
 permissions: {}
 
@@ -31,31 +12,10 @@ env:
   TZ: /usr/share/zoneinfo/America/Los_Angeles
 
 jobs:
-  notify:
-    if: ${{ inputs.force_notify || inputs.dry == false || inputs.dry == 'false' }}
-    runs-on: ubuntu-latest
-    steps:
-      - name: Discord Webhook Action
-        uses: tsickert/discord-webhook@86dc739f3f165f16dadc5666051c367efa1692f4
-        with:
-          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
-          embed-author-name: ${{ github.event.sender.login }}
-          embed-author-url: ${{ github.event.sender.html_url }}
-          embed-author-icon-url: ${{ github.event.sender.avatar_url }}
-          embed-title: "⚠️ Publishing ${{ inputs.experimental_only && 'EXPERIMENTAL' || 'CANARY & EXPERIMENTAL' }} release ${{ (inputs.dry && ' (dry run)') || '' }}"
-          embed-description: |
-            ```json
-            ${{ toJson(inputs) }}
-            ```
-          embed-url: https://github.com/facebook/react/actions/runs/${{ github.run_id }}
 
   publish_prerelease_canary:
-    if: ${{ !inputs.experimental_only }}
     name: Publish to Canary channel
     uses: facebook/react/.github/workflows/runtime_prereleases.yml@main
-    permissions:
-      # We use github.token to download the build artifact from a previous runtime_build_and_test.yml run
-      actions: read
     with:
       commit_sha: ${{ inputs.prerelease_commit_sha }}
       release_channel: stable
@@ -70,33 +30,20 @@ jobs:
       # downstream consumers might still expect that tag. We can remove this
       # after some time has elapsed and the change has been communicated.
       dist_tag: canary,next
-      only_packages: ${{ inputs.only_packages }}
-      skip_packages: ${{ inputs.skip_packages }}
-      dry: ${{ inputs.dry }}
     secrets:
       NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
   publish_prerelease_experimental:
     name: Publish to Experimental channel
     uses: facebook/react/.github/workflows/runtime_prereleases.yml@main
-    permissions:
-      # We use github.token to download the build artifact from a previous runtime_build_and_test.yml run
-      actions: read
     # NOTE: Intentionally running these jobs sequentially because npm
     # will sometimes fail if you try to concurrently publish two
     # different versions of the same package, even if they use different
     # dist tags.
     needs: publish_prerelease_canary
-    # Ensures the job runs even if canary is skipped
-    if: always()
     with:
       commit_sha: ${{ inputs.prerelease_commit_sha }}
       release_channel: experimental
       dist_tag: experimental
-      only_packages: ${{ inputs.only_packages }}
-      skip_packages: ${{ inputs.skip_packages }}
-      dry: ${{ inputs.dry }}
     secrets:
       NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/runtime_prereleases_nightly.yml

@@ -14,26 +14,16 @@ jobs:
   publish_prerelease_canary:
     name: Publish to Canary channel
     uses: facebook/react/.github/workflows/runtime_prereleases.yml@main
-    permissions:
-      # We use github.token to download the build artifact from a previous runtime_build_and_test.yml run
-      actions: read
     with:
       commit_sha: ${{ github.sha }}
       release_channel: stable
       dist_tag: canary,next
-      enableFailureNotification: true
-      dry: false
     secrets:
-      DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }}
       NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
   publish_prerelease_experimental:
     name: Publish to Experimental channel
     uses: facebook/react/.github/workflows/runtime_prereleases.yml@main
-    permissions:
-      # We use github.token to download the build artifact from a previous runtime_build_and_test.yml run
-      actions: read
     # NOTE: Intentionally running these jobs sequentially because npm
     # will sometimes fail if you try to concurrently publish two
     # different versions of the same package, even if they use different
@@ -43,9 +33,5 @@ jobs:
       commit_sha: ${{ github.sha }}
       release_channel: experimental
       dist_tag: experimental
-      enableFailureNotification: true
-      dry: false
     secrets:
-      DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }}
       NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/runtime_releases_from_npm_manual.yml

@@ -78,9 +78,7 @@ jobs:
       - name: Ensure clean build directory
         run: rm -rf build
       - run: yarn install --frozen-lockfile
-        if: steps.node_modules.outputs.cache-hit != 'true'
       - run: yarn --cwd scripts/release install --frozen-lockfile
-        if: steps.node_modules.outputs.cache-hit != 'true'
       - run: cp ./scripts/release/ci-npmrc ~/.npmrc
       - if: '${{ inputs.only_packages }}'
         name: 'Prepare ${{ inputs.only_packages }} from NPM'
@@ -110,7 +108,7 @@ jobs:
             --tags=${{ inputs.tags }} \
             --publishVersion=${{ inputs.version_to_publish }} \
             --onlyPackages=${{ inputs.only_packages }} ${{ (inputs.dry && '') || '\'}}
-            ${{ inputs.dry && '--dry' || '' }}
+            ${{ inputs.dry && '--dry'}}
       - if: '${{ inputs.skip_packages }}'
         name: 'Publish all packages EXCEPT ${{ inputs.skip_packages }}'
         run: |
@@ -119,7 +117,7 @@ jobs:
             --tags=${{ inputs.tags }} \
             --publishVersion=${{ inputs.version_to_publish }} \
             --skipPackages=${{ inputs.skip_packages }} ${{ (inputs.dry && '') || '\'}}
-            ${{ inputs.dry && '--dry' || '' }}
+            ${{ inputs.dry && '--dry'}}
       - name: Archive released package for debugging
         uses: actions/upload-artifact@v4
         with:

.github/workflows/shared_check_maintainer.yml

@@ -6,6 +6,10 @@ on:
       actor:
         required: true
         type: string
+      is_remote:
+        required: false
+        type: boolean
+        default: false
     outputs:
       is_core_team:
         value: ${{ jobs.check_maintainer.outputs.is_core_team }}
@@ -26,6 +30,7 @@ jobs:
     outputs:
       is_core_team: ${{ steps.check_if_actor_is_maintainer.outputs.result }}
     steps:
+      - uses: actions/checkout@v4
       - name: Check if actor is maintainer
         id: check_if_actor_is_maintainer
         uses: actions/github-script@v7
@@ -33,20 +38,33 @@ jobs:
           script: |
             const fs = require('fs');
             const actor = '${{ inputs.actor }}';
-            const res = await github.rest.repos.getContent({
-              owner: 'facebook',
-              repo: 'react',
-              path: 'MAINTAINERS',
-              ref: 'main',
-              headers: { Accept: 'application/vnd.github+json' }
-            });
-            if (res.status !== 200) {
-              console.error(res);
-              throw new Error('Unable to fetch MAINTAINERS file');
+            let isRemote = ${{ inputs.is_remote }};
+            if (typeof isRemote === 'string') {
+              isRemote = isRemote === 'true';
             }
-            content = Buffer.from(res.data.content, 'base64').toString();
-            if (content == null || typeof content !== 'string') {
-              throw new Error('Unable to retrieve MAINTAINERS file');
+            if (typeof isRemote !== 'boolean') {
+              throw new Error(`Invalid \`isRemote\` input. Expected a boolean, got: ${isRemote}`);
+            }
+
+            let content = null;
+            if (isRemote === true) {
+              const res = await github.rest.repos.getContent({
+                owner: 'facebook',
+                repo: 'react',
+                path: 'MAINTAINERS',
+                ref: 'main',
+                headers: { Accept: 'application/vnd.github+json' }
+              });
+              if (res.status !== 200) {
+                console.error(res);
+                throw new Error('Unable to fetch MAINTAINERS file');
+              }
+              content = Buffer.from(res.data.content, 'base64').toString();
+            } else {
+              content = await fs.readFileSync('./MAINTAINERS', { encoding: 'utf8' });
+            }
+            if (content === null) {
+              throw new Error('Unable to retrieve local or http MAINTAINERS file');
             }
 
             const maintainers = new Set(content.split('\n'));

.github/workflows/shared_cleanup_stale_branch_caches.yml

@@ -3,8 +3,7 @@
 name: (Shared) Cleanup Stale Branch Caches
 on:
   schedule:
-    # Every 6 hours
-    - cron: 0 */6 * * *
+    - cron: 0 0 * * *
   workflow_dispatch:
 
 permissions: {}

.github/workflows/shared_close_direct_sync_branch_prs.yml

@@ -18,7 +18,6 @@ jobs:
     permissions:
       # Used to create a review and close PRs
       pull-requests: write
-      contents: write
     steps:
       - name: Close PR
         uses: actions/github-script@v7

.github/workflows/shared_label_core_team_prs.yml

@@ -1,8 +1,7 @@
 name: (Shared) Label Core Team PRs
 
 on:
-  pull_request_target:
-    types: [opened]
+  pull_request:
 
 permissions: {}
 
@@ -12,20 +11,7 @@ env:
   SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
 
 jobs:
-  check_access:
-    runs-on: ubuntu-latest
-    outputs:
-      is_member_or_collaborator: ${{ steps.check_is_member_or_collaborator.outputs.is_member_or_collaborator }}
-    steps:
-      - run: echo ${{ github.event.pull_request.author_association }}
-      - name: Check is member or collaborator
-        id: check_is_member_or_collaborator
-        if: ${{ github.event.pull_request.author_association == 'MEMBER' || github.event.pull_request.author_association == 'COLLABORATOR' }}
-        run: echo "is_member_or_collaborator=true" >> "$GITHUB_OUTPUT"
-
   check_maintainer:
-    if: ${{ needs.check_access.outputs.is_member_or_collaborator == 'true' || needs.check_access.outputs.is_member_or_collaborator == true }}
-    needs: [check_access]
     uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main
     permissions:
       # Used by check_maintainer

.github/workflows/shared_lint.yml

@@ -29,7 +29,6 @@ jobs:
           cache-dependency-path: yarn.lock
       - name: Restore cached node_modules
         uses: actions/cache@v4
-        id: node_modules
         with:
           path: |
             **/node_modules
@@ -37,7 +36,6 @@ jobs:
       - name: Ensure clean build directory
         run: rm -rf build
       - run: yarn install --frozen-lockfile
-        if: steps.node_modules.outputs.cache-hit != 'true'
       - run: yarn prettier-check
 
   eslint:
@@ -52,7 +50,6 @@ jobs:
           cache-dependency-path: yarn.lock
       - name: Restore cached node_modules
         uses: actions/cache@v4
-        id: node_modules
         with:
           path: |
             **/node_modules
@@ -60,7 +57,6 @@ jobs:
       - name: Ensure clean build directory
         run: rm -rf build
       - run: yarn install --frozen-lockfile
-        if: steps.node_modules.outputs.cache-hit != 'true'
       - run: node ./scripts/tasks/eslint
 
   check_license:
@@ -75,7 +71,6 @@ jobs:
           cache-dependency-path: yarn.lock
       - name: Restore cached node_modules
         uses: actions/cache@v4
-        id: node_modules
         with:
           path: |
             **/node_modules
@@ -83,7 +78,6 @@ jobs:
       - name: Ensure clean build directory
         run: rm -rf build
       - run: yarn install --frozen-lockfile
-        if: steps.node_modules.outputs.cache-hit != 'true'
       - run: ./scripts/ci/check_license.sh
 
   test_print_warnings:
@@ -98,7 +92,6 @@ jobs:
           cache-dependency-path: yarn.lock
       - name: Restore cached node_modules
         uses: actions/cache@v4
-        id: node_modules
         with:
           path: |
             **/node_modules
@@ -106,5 +99,4 @@ jobs:
       - name: Ensure clean build directory
         run: rm -rf build
       - run: yarn install --frozen-lockfile
-        if: steps.node_modules.outputs.cache-hit != 'true'
       - run: ./scripts/ci/test_print_warnings.sh

.github/workflows/shared_stale.yml

@@ -6,10 +6,7 @@ on:
     - cron: '0 * * * *'
   workflow_dispatch:
 
-permissions:
-  # https://github.com/actions/stale/tree/v9/?tab=readme-ov-file#recommended-permissions
-  issues: write
-  pull-requests: write
+permissions: {}
 
 env:
   TZ: /usr/share/zoneinfo/America/Los_Angeles

.gitignore

@@ -23,9 +23,6 @@ chrome-user-data
 .vscode
 *.swp
 *.swo
-/tmp
-/.worktrees
-.claude/*.local.*
 
 packages/react-devtools-core/dist
 packages/react-devtools-extensions/chrome/build

.nvmrc

@@ -1 +1 @@
-v20.19.0
+v18.20.1

.prettierrc.js

@@ -3,12 +3,13 @@
 const {esNextPaths} = require('./scripts/shared/pathsByLanguageVersion');
 
 module.exports = {
+  plugins: ['prettier-plugin-hermes-parser'],
   bracketSpacing: false,
   singleQuote: true,
   bracketSameLine: true,
   trailingComma: 'es5',
   printWidth: 80,
-  parser: 'flow',
+  parser: 'hermes',
   arrowParens: 'avoid',
   overrides: [
     {

CHANGELOG-canary.md

@@ -0,0 +1,18 @@
+## March 22, 2024 (18.3.0-canary-670811593-20240322)
+
+## React
+- Added `useActionState` to replace `useFormState` and added `pending` value ([#28491](https://github.com/facebook/react/pull/28491)).
+
+## October 5, 2023 (18.3.0-canary-546178f91-20231005)
+
+### React
+
+- Added support for async functions to be passed to `startTransition`. 
+- `useTransition` now triggers the nearest error boundary instead of a global error.
+- Added `useOptimistic`, a new Hook for handling optimistic UI updates. It optimistically updates the UI before receiving confirmation from a server or external source.
+
+### React DOM
+
+- Added support for passing async functions to the `action` prop on `<form>`. When the function passed to `action` is marked with [`'use server'`](https://react.dev/reference/react/use-server), the form is [progressively enhanced](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement).
+- Added `useFormStatus`, a new Hook for checking the submission state of a form.
+- Added `useFormState`, a new Hook for updating state upon form submission. When the function passed to `useFormState` is marked with [`'use server'`](https://react.dev/reference/react/use-server), the update is [progressively enhanced](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement).

CHANGELOG.md

@@ -1,146 +1,3 @@
-## 19.2.1 (Dec 3, 2025)
-
-### React Server Components
-
-- Bring React Server Component fixes to Server Actions (@sebmarkbage [#35277](https://github.com/facebook/react/pull/35277))
-
-## 19.2.0 (October 1st, 2025)
-
-Below is a list of all new features, APIs, and bug fixes.
-
-Read the [React 19.2 release post](https://react.dev/blog/2025/10/01/react-19-2) for more information.
-
-### New React Features
-
-- [`<Activity>`](https://react.dev/reference/react/Activity): A new API to hide and restore the UI and internal state of its children.
-- [`useEffectEvent`](https://react.dev/reference/react/useEffectEvent) is a React Hook that lets you extract non-reactive logic into an [Effect Event](https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event).
-- [`cacheSignal`](https://react.dev/reference/react/cacheSignal) (for RSCs) lets your know when the `cache()` lifetime is over.
-- [React Performance tracks](https://react.dev/reference/dev-tools/react-performance-tracks) appear on the Performance panel’s timeline in your browser developer tools
-
-### New React DOM Features
-
-- Added resume APIs for partial pre-rendering with Web Streams:
-  - [`resume`](https://react.dev/reference/react-dom/server/resume): to resume a prerender to a stream.
-  - [`resumeAndPrerender`](https://react.dev/reference/react-dom/static/resumeAndPrerender): to resume a prerender to HTML.
-- Added resume APIs for partial pre-rendering with Node Streams:
-  - [`resumeToPipeableStream`](https://react.dev/reference/react-dom/server/resumeToPipeableStream): to resume a prerender to a stream.
-  - [`resumeAndPrerenderToNodeStream`](https://react.dev/reference/react-dom/static/resumeAndPrerenderToNodeStream): to resume a prerender to HTML.
-- Updated [`prerender`](https://react.dev/reference/react-dom/static/prerender) APIs to return a `postponed` state that can be passed to the `resume` APIs.
-
-### Notable changes
-
-- React DOM now batches suspense boundary reveals, matching the behavior of client side rendering. This change is especially noticeable when animating the reveal of Suspense boundaries e.g. with the upcoming `<ViewTransition>` Component. React will batch as much reveals as possible before the first paint while trying to hit popular first-contentful paint metrics.
-- Add Node Web Streams (`prerender`, `renderToReadableStream`) to server-side-rendering APIs for Node.js
-- Use underscore instead of `:` IDs generated by useId
-
-### All Changes
-
-#### React
-
-- `<Activity />` was developed over many years, starting before `ClassComponent.setState` (@acdlite @sebmarkbage and many others)
-- Stringify context as "SomeContext" instead of "SomeContext.Provider" (@kassens [#33507](https://github.com/facebook/react/pull/33507))
-- Include stack of cause of React instrumentation errors with `%o` placeholder (@eps1lon [#34198](https://github.com/facebook/react/pull/34198))
-- Fix infinite `useDeferredValue` loop in popstate event (@acdlite [#32821](https://github.com/facebook/react/pull/32821))
-- Fix a bug when an initial value was passed to `useDeferredValue` (@acdlite [#34376](https://github.com/facebook/react/pull/34376))
-- Fix a crash when submitting forms with Client Actions (@sebmarkbage [#33055](https://github.com/facebook/react/pull/33055))
-- Hide/unhide the content of dehydrated suspense boundaries if they resuspend (@sebmarkbage [#32900](https://github.com/facebook/react/pull/32900))
-- Avoid stack overflow on wide trees during Hot Reload (@sophiebits [#34145](https://github.com/facebook/react/pull/34145))
-- Improve Owner and Component stacks in various places (@sebmarkbage, @eps1lon: [#33629](https://github.com/facebook/react/pull/33629), [#33724](https://github.com/facebook/react/pull/33724), [#32735](https://github.com/facebook/react/pull/32735), [#33723](https://github.com/facebook/react/pull/33723))
-- Add `cacheSignal` (@sebmarkbage [#33557](https://github.com/facebook/react/pull/33557))
-
-#### React DOM
-
-- Block on Suspensey Fonts during reveal of server-side-rendered content (@sebmarkbage [#33342](https://github.com/facebook/react/pull/33342))
-- Use underscore instead of `:` for IDs generated by `useId` (@sebmarkbage, @eps1lon: [#32001](https://github.com/facebook/react/pull/32001), [https://github.com/facebook/react/pull/33342](https://github.com/facebook/react/pull/33342)[#33099](https://github.com/facebook/react/pull/33099), [#33422](https://github.com/facebook/react/pull/33422))
-- Stop warning when ARIA 1.3 attributes are used (@Abdul-Omira [#34264](https://github.com/facebook/react/pull/34264))
-- Allow `nonce` to be used on hoistable styles (@Andarist [#32461](https://github.com/facebook/react/pull/32461))
-- Warn for using a React owned node as a Container if it also has text content (@sebmarkbage [#32774](https://github.com/facebook/react/pull/32774))
-- s/HTML/text for for error messages if text hydration mismatches (@rickhanlonii [#32763](https://github.com/facebook/react/pull/32763))
-- Fix a bug with `React.use` inside `React.lazy`\-ed Component (@hi-ogawa [#33941](https://github.com/facebook/react/pull/33941))
-- Enable the `progressiveChunkSize` option for server-side-rendering APIs (@sebmarkbage [#33027](https://github.com/facebook/react/pull/33027))
-- Fix a bug with deeply nested Suspense inside Suspense fallback when server-side-rendering (@gnoff [#33467](https://github.com/facebook/react/pull/33467))
-- Avoid hanging when suspending after aborting while rendering (@gnoff [#34192](https://github.com/facebook/react/pull/34192))
-- Add Node Web Streams to server-side-rendering APIs for Node.js (@sebmarkbage [#33475](https://github.com/facebook/react/pull/33475))
-
-#### React Server Components
-
-- Preload `<img>` and `<link>` using hints before they're rendered (@sebmarkbage [#34604](https://github.com/facebook/react/pull/34604))
-- Log error if production elements are rendered during development (@eps1lon [#34189](https://github.com/facebook/react/pull/34189))
-- Fix a bug when returning a Temporary reference (e.g. a Client Reference) from Server Functions (@sebmarkbage [#34084](https://github.com/facebook/react/pull/34084), @denk0403 [#33761](https://github.com/facebook/react/pull/33761))
-- Pass line/column to `filterStackFrame` (@eps1lon [#33707](https://github.com/facebook/react/pull/33707))
-- Support Async Modules in Turbopack Server References (@lubieowoce [#34531](https://github.com/facebook/react/pull/34531))
-- Add support for .mjs file extension in Webpack (@jennyscript [#33028](https://github.com/facebook/react/pull/33028))
-- Fix a wrong missing key warning (@unstubbable [#34350](https://github.com/facebook/react/pull/34350))
-- Make console log resolve in predictable order (@sebmarkbage [#33665](https://github.com/facebook/react/pull/33665))
-
-#### React Reconciler
-
-- [createContainer](https://github.com/facebook/react/blob/v19.2.0/packages/react-reconciler/src/ReactFiberReconciler.js#L255-L261) and [createHydrationContainer](https://github.com/facebook/react/blob/v19.2.0/packages/react-reconciler/src/ReactFiberReconciler.js#L305-L312) had their parameter order adjusted after `on*` handlers to account for upcoming experimental APIs
-
-## 19.1.2 (Dec 3, 2025)
-
-### React Server Components
-
-- Bring React Server Component fixes to Server Actions (@sebmarkbage [#35277](https://github.com/facebook/react/pull/35277))
-
-## 19.1.1 (July 28, 2025)
-
-### React
-* Fixed Owner Stacks to work with ES2015 function.name semantics ([#33680](https://github.com/facebook/react/pull/33680) by @hoxyq)
-
-## 19.1.0 (March 28, 2025)
-
-### Owner Stack
-
-An Owner Stack is a string representing the components that are directly responsible for rendering a particular component. You can log Owner Stacks when debugging or use Owner Stacks to enhance error overlays or other development tools. Owner Stacks are only available in development builds. Component Stacks in production are unchanged.
-
-* An Owner Stack is a development-only stack trace that helps identify which components are responsible for rendering a particular component. An Owner Stack is distinct from a Component Stacks, which shows the hierarchy of components leading to an error.
-* The [captureOwnerStack API](https://react.dev/reference/react/captureOwnerStack) is only available in development mode and returns a Owner Stack, if available. The API can be used to enhance error overlays or log component relationships when debugging. [#29923](https://github.com/facebook/react/pull/29923), [#32353](https://github.com/facebook/react/pull/32353), [#30306](https://github.com/facebook/react/pull/30306),
-[#32538](https://github.com/facebook/react/pull/32538), [#32529](https://github.com/facebook/react/pull/32529), [#32538](https://github.com/facebook/react/pull/32538)
-
-### React
-* Enhanced support for Suspense boundaries to be used anywhere, including the client, server, and during hydration. [#32069](https://github.com/facebook/react/pull/32069), [#32163](https://github.com/facebook/react/pull/32163), [#32224](https://github.com/facebook/react/pull/32224), [#32252](https://github.com/facebook/react/pull/32252)
-* Reduced unnecessary client rendering through improved hydration scheduling [#31751](https://github.com/facebook/react/pull/31751)
-* Increased priority of client rendered Suspense boundaries [#31776](https://github.com/facebook/react/pull/31776)
-* Fixed frozen fallback states by rendering unfinished Suspense boundaries on the client. [#31620](https://github.com/facebook/react/pull/31620)
-* Reduced garbage collection pressure by improving Suspense boundary retries. [#31667](https://github.com/facebook/react/pull/31667)
-* Fixed erroneous “Waiting for Paint” log when the passive effect phase was not delayed [#31526](https://github.com/facebook/react/pull/31526)
-* Fixed a regression causing key warnings for flattened positional children in development mode. [#32117](https://github.com/facebook/react/pull/32117)
-* Updated `useId` to use valid CSS selectors, changing format from `:r123:` to `«r123»`. [#32001](https://github.com/facebook/react/pull/32001)
-* Added a dev-only warning for null/undefined created in useEffect, useInsertionEffect, and useLayoutEffect. [#32355](https://github.com/facebook/react/pull/32355)
-* Fixed a bug where dev-only methods were exported in production builds. React.act is no longer available in production builds. [#32200](https://github.com/facebook/react/pull/32200)
-* Improved consistency across prod and dev to improve compatibility with Google Closure Compiler and bindings [#31808](https://github.com/facebook/react/pull/31808)
-* Improve passive effect scheduling for consistent task yielding. [#31785](https://github.com/facebook/react/pull/31785)
-* Fixed asserts in React Native when passChildrenWhenCloningPersistedNodes is enabled for OffscreenComponent rendering. [#32528](https://github.com/facebook/react/pull/32528)
-* Fixed component name resolution for Portal [#32640](https://github.com/facebook/react/pull/32640)
-* Added support for beforetoggle and toggle events on the dialog element. [#32479](https://github.com/facebook/react/pull/32479)
-
-### React DOM
-* Fixed double warning when the `href` attribute is an empty string [#31783](https://github.com/facebook/react/pull/31783)
- * Fixed an edge case where `getHoistableRoot()` didn’t work properly when the container was a Document [#32321](https://github.com/facebook/react/pull/32321)
-* Removed support for using HTML comments (e.g. `<!-- -->`) as a DOM container. [#32250](https://github.com/facebook/react/pull/32250)
-* Added support for `<script>` and `<template>` tags to be nested within `<select>` tags. [#31837](https://github.com/facebook/react/pull/31837)
-* Fixed responsive images to be preloaded as HTML instead of headers [#32445](https://github.com/facebook/react/pull/32445)
-
-### use-sync-external-store
-* Added `exports` field to `package.json` for `use-sync-external-store` to support various entrypoints. [#25231](https://github.com/facebook/react/pull/25231)
-
-### React Server Components
-* Added `unstable_prerender`, a new experimental API for prerendering React Server Components on the server [#31724](https://github.com/facebook/react/pull/31724)
-* Fixed an issue where streams would hang when receiving new chunks after a global error [#31840](https://github.com/facebook/react/pull/31840), [#31851](https://github.com/facebook/react/pull/31851)
-* Fixed an issue where pending chunks were counted twice. [#31833](https://github.com/facebook/react/pull/31833)
-* Added support for streaming in edge environments [#31852](https://github.com/facebook/react/pull/31852)
-* Added support for sending custom error names from a server so that they are available in the client for console replaying. [#32116](https://github.com/facebook/react/pull/32116)
-* Updated the server component wire format to remove IDs for hints and console.log because they have no return value [#31671](https://github.com/facebook/react/pull/31671)
-* Exposed `registerServerReference` in client builds to handle server references in different environments. [#32534](https://github.com/facebook/react/pull/32534)
-* Added react-server-dom-parcel package which integrates Server Components with the [Parcel bundler](https://parceljs.org/) [#31725](https://github.com/facebook/react/pull/31725), [#32132](https://github.com/facebook/react/pull/32132), [#31799](https://github.com/facebook/react/pull/31799), [#32294](https://github.com/facebook/react/pull/32294), [#31741](https://github.com/facebook/react/pull/31741)
-
-## 19.0.1 (Dec 3, 2025)
-
-### React Server Components
-
-- Bring React Server Component fixes to Server Actions (@sebmarkbage [#35277](https://github.com/facebook/react/pull/35277))
-
 ## 19.0.0 (December 5, 2024)
 
 Below is a list of all new features, APIs, deprecations, and breaking changes. Read [React 19 release post](https://react.dev/blog/2024/04/25/react-19) and [React 19 upgrade guide](https://react.dev/blog/2024/04/25/react-19-upgrade-guide) for more information.

CLAUDE.md

@@ -1,8 +0,0 @@
-# React
-
-React is a JavaScript library for building user interfaces.
-
-## Monorepo Overview
-
-- **React**: All files outside `/compiler/`
-- **React Compiler**: `/compiler/` directory (has its own instructions)

MAINTAINERS

@@ -1,6 +1,5 @@
 acdlite
 eps1lon
-EugeneChoi4
 gaearon
 gnoff
 unstubbable

ReactVersions.js

@@ -7,18 +7,18 @@
 //
 // The @latest channel uses the version as-is, e.g.:
 //
-//   19.3.0
+//   19.1.0
 //
 // The @canary channel appends additional information, with the scheme
 // <version>-<label>-<commit_sha>, e.g.:
 //
-//   19.3.0-canary-a1c2d3e4
+//   19.1.0-canary-a1c2d3e4
 //
 // The @experimental channel doesn't include a version, only a date and a sha, e.g.:
 //
 //   0.0.0-experimental-241c4467e-20200129
 
-const ReactVersion = '19.3.0';
+const ReactVersion = '19.1.0';
 
 // The label used by the @canary channel. Represents the upcoming release's
 // stability. Most of the time, this will be "canary", but we may temporarily
@@ -33,8 +33,8 @@ const canaryChannelLabel = 'canary';
 const rcNumber = 0;
 
 const stablePackages = {
-  'eslint-plugin-react-hooks': '7.1.0',
-  'jest-react': '0.18.0',
+  'eslint-plugin-react-hooks': '5.2.0',
+  'jest-react': '0.17.0',
   react: ReactVersion,
   'react-art': ReactVersion,
   'react-dom': ReactVersion,
@@ -42,12 +42,12 @@ const stablePackages = {
   'react-server-dom-turbopack': ReactVersion,
   'react-server-dom-parcel': ReactVersion,
   'react-is': ReactVersion,
-  'react-reconciler': '0.34.0',
-  'react-refresh': '0.19.0',
+  'react-reconciler': '0.32.0',
+  'react-refresh': '0.17.0',
   'react-test-renderer': ReactVersion,
-  'use-subscription': '1.13.0',
-  'use-sync-external-store': '1.7.0',
-  scheduler: '0.28.0',
+  'use-subscription': '1.11.0',
+  'use-sync-external-store': '1.5.0',
+  scheduler: '0.26.0',
 };
 
 // These packages do not exist in the @canary or @latest channel, only

babel.config-ts.js

@@ -8,7 +8,6 @@ module.exports = {
     '@babel/plugin-syntax-jsx',
     '@babel/plugin-transform-flow-strip-types',
     ['@babel/plugin-transform-class-properties', {loose: true}],
-    ['@babel/plugin-transform-private-methods', {loose: true}],
     '@babel/plugin-transform-classes',
   ],
   presets: [

compiler/.claude/agents/investigate-error.md

@@ -1,113 +0,0 @@
----
-name: investigate-error
-description: Investigates React compiler errors to determine the root cause and identify potential mitigation(s). Use this agent when the user asks to 'investigate a bug', 'debug why this fixture errors', 'understand why the compiler is failing', 'find the root cause of a compiler issue', or when they provide a snippet of code and ask to debug. Use automatically when encountering a failing test case, in order to understand the root cause.
-model: opus
-color: pink
----
-
-You are an expert React Compiler debugging specialist with deep knowledge of compiler internals, intermediate representations, and optimization passes. Your mission is to systematically investigate compiler bugs to identify root causes and provide actionable information for fixes.
-
-## Your Investigation Process
-
-### Step 1: Create Test Fixture
-Create a new fixture file at `packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/<fixture-name>.js` containing the problematic code. Use a descriptive name that reflects the issue (e.g., `bug-optional-chain-in-effect.js`).
-
-### Step 2: Run Debug Compilation
-Execute `yarn snap -d -p <fixture-name>` to compile the fixture with full debug output. This shows the state of the program after each compilation pass. You can also use `yarn snap compile -d <path-to-fixture>`.
-
-### Step 3: Analyze Compilation Results
-
-### Step 3a: If the fixture compiles successfully
-- Compare the output against the user's expected behavior
-- Review each compilation pass output from the `-d` flag
-- Identify the first pass where the output diverges from expected behavior
-- Proceed to binary search simplification
-
-### Step 3b: If the fixture errors
-Execute `yarn snap minimize --update <path-to-fixture>` to remove non-critical aspects of the failing test case. This **updates the fixture in place**.
-
-Re-read the fixture file to see the latest, minimal reproduction of the error.
-
-### Step 4: Iteratively adjust the fixture until it stops erroring
-After the previous step the fixture will have all extraneous aspects removed. Try to make further edits to determine the specific feature that is causing the error.
-
-Ideas:
-* Replace immediately-invoked function expressions with labeled blocks
-* Remove statements
-* Simplify calls (remove arguments, replace the call with its lone argument)
-* Simplify control flow statements by picking a single branch. Try using a labeled block with just the selected block
-* Replace optional member/call expressions with non-optional versions
-* Remove items in array/object expressions
-* Remove properties from member expressions
-
-Try to make the minimal possible edit to get the fixture stop erroring.
-
-### Step 5: Compare Debug Outputs
-With both minimal versions (failing and non-failing):
-- Run `yarn snap -d -p <fixture-name>` on both
-- Compare the debug output pass-by-pass
-- Identify the exact pass where behavior diverges
-- Note specific differences in HIR, effects, or generated code
-
-### Step 6: Investigate Compiler Logic
-- Read the documentation for the problematic pass in `packages/babel-plugin-react-compiler/docs/passes/`
-- Examine the pass implementation in `packages/babel-plugin-react-compiler/src/`
-- Key directories to investigate:
-  - `src/HIR/` - IR definitions and utilities
-  - `src/Inference/` - Effect inference (aliasing, mutation)
-  - `src/Validation/` - Validation passes
-  - `src/Optimization/` - Optimization passes
-  - `src/ReactiveScopes/` - Reactive scope analysis
-- Identify specific code locations that may be handling the pattern incorrectly
-
-## Output Format
-
-Provide a structured investigation report:
-
-```
-## Investigation Summary
-
-### Bug Description
-[Brief description of the issue]
-
-### Minimal Failing Fixture
-```javascript
-// packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/<name>.js
-[minimal code that reproduces the error]
-```
-
-### Minimal Non-Failing Fixture
-```javascript
-// The simplest change that makes it work
-[code that compiles correctly]
-```
-
-### Problematic Compiler Pass
-[Name of the pass where the issue occurs]
-
-### Root Cause Analysis
-[Explanation of what the compiler is doing wrong]
-
-### Suspect Code Locations
-- `packages/babel-plugin-react-compiler/src/<path>:<line>:<column>` - [description of what may be incorrect]
-- [additional locations if applicable]
-
-### Suggested Fix Direction
-[Brief suggestion of how the bug might be fixed]
-```
-
-## Key Debugging Tips
-
-1. The debug output (`-d` flag) shows the program state after each pass - use this to pinpoint where things go wrong
-2. Look for `@aliasingEffects=` on FunctionExpressions to understand data flow
-3. Check for `Impure`, `Render`, `Capture` effects on instructions
-4. The pass ordering in `Pipeline.ts` shows when effects are populated vs validated
-5. Todo errors indicate unsupported but known patterns; Invariant errors indicate unexpected states
-
-## Important Reminders
-
-- Always create the fixture file before running tests
-- Use descriptive fixture names that indicate the bug being investigated
-- Keep both failing and non-failing minimal versions for your report
-- Provide specific file:line:column references when identifying suspect code
-- Read the relevant pass documentation before making conclusions about the cause

compiler/.claude/settings.json

@@ -1,18 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(yarn snap:*)",
-      "Bash(yarn snap:build)",
-      "Bash(node scripts/enable-feature-flag.js:*)"
-    ],
-    "deny": [
-      "Skill(extract-errors)",
-      "Skill(feature-flags)",
-      "Skill(fix)",
-      "Skill(flags)",
-      "Skill(flow)",
-      "Skill(test)",
-      "Skill(verify)"
-    ]
-  }
-}

compiler/.gitignore

@@ -1,16 +1,28 @@
 .DS_Store
 .spr.yml
 
+# Generated by Cargo
+# will have compiled files and executables
+debug/
+target/
+
+# These are backup files generated by rustfmt
+**/*.rs.bk
+
+# MSVC Windows builds of rustc generate these, which store debugging information
+*.pdb
+
 node_modules
 .watchmanconfig
 .watchman-cookie-*
 dist
 .vscode
 !packages/playground/.vscode
+.spr.yml
 testfilter.txt
-.claude/settings.local.json
+
+bundle-oss.sh
 
 # forgive
 *.vsix
 .vscode-test
-

compiler/CHANGELOG.md

@@ -1,65 +0,0 @@
-## 19.1.0-rc.2 (May 14, 2025)
-
-## babel-plugin-react-compiler
-
-* Fix for string attribute values with emoji [#33096](https://github.com/facebook/react/pull/33096) by [@josephsavona](https://github.com/josephsavona)
-
-## 19.1.0-rc.1 (April 21, 2025)
-
-## eslint-plugin-react-hooks
-* Temporarily disable ref access in render validation [#32839](https://github.com/facebook/react/pull/32839) by [@poteto](https://github.com/poteto)
-* Fix type error with recommended config [#32666](https://github.com/facebook/react/pull/32666) by [@niklasholm](https://github.com/niklasholm)
-* Merge rule from eslint-plugin-react-compiler into `react-hooks` plugin [#32416](https://github.com/facebook/react/pull/32416) by [@michaelfaith](https://github.com/michaelfaith)
-* Add dev dependencies for typescript migration [#32279](https://github.com/facebook/react/pull/32279) by [@michaelfaith](https://github.com/michaelfaith)
-* Support v9 context api [#32045](https://github.com/facebook/react/pull/32045) by [@michaelfaith](https://github.com/michaelfaith)
-* Support eslint 8+ flat plugin syntax out of the box for eslint-plugin-react-compiler [#32120](https://github.com/facebook/react/pull/32120) by [@orta](https://github.com/orta)
-
-## babel-plugin-react-compiler
-* Support satisfies operator [#32742](https://github.com/facebook/react/pull/32742) by [@rodrigofariow](https://github.com/rodrigofariow)
-* Fix inferEffectDependencies lint false positives [#32769](https://github.com/facebook/react/pull/32769) by [@mofeiZ](https://github.com/mofeiZ)
-* Fix hoisting of let declarations [#32724](https://github.com/facebook/react/pull/32724) by [@mofeiZ](https://github.com/mofeiZ)
-* Avoid failing builds when import specifiers conflict or shadow vars [#32663](https://github.com/facebook/react/pull/32663) by [@mofeiZ](https://github.com/mofeiZ)
-* Optimize components declared with arrow function and implicit return and `compilationMode: 'infer'` [#31792](https://github.com/facebook/react/pull/31792) by [@dimaMachina](https://github.com/dimaMachina)
-* Validate static components [#32683](https://github.com/facebook/react/pull/32683) by [@josephsavona](https://github.com/josephsavona)
-* Hoist dependencies from functions more conservatively [#32616](https://github.com/facebook/react/pull/32616) by [@mofeiZ](https://github.com/mofeiZ)
-* Implement NumericLiteral as ObjectPropertyKey [#31791](https://github.com/facebook/react/pull/31791) by [@dimaMachina](https://github.com/dimaMachina)
-* Avoid bailouts when inserting gating [#32598](https://github.com/facebook/react/pull/32598) by [@mofeiZ](https://github.com/mofeiZ)
-* Stop bailing out early for hoisted gated functions [#32597](https://github.com/facebook/react/pull/32597) by [@mofeiZ](https://github.com/mofeiZ)
-* Add shape for Array.from [#32522](https://github.com/facebook/react/pull/32522) by [@mofeiZ](https://github.com/mofeiZ)
-* Patch array and argument spread mutability [#32521](https://github.com/facebook/react/pull/32521) by [@mofeiZ](https://github.com/mofeiZ)
-* Make CompilerError compatible with reflection [#32539](https://github.com/facebook/react/pull/32539) by [@poteto](https://github.com/poteto)
-* Add simple walltime measurement [#32331](https://github.com/facebook/react/pull/32331) by [@poteto](https://github.com/poteto)
-* Improve error messages for unhandled terminal and instruction kinds [#32324](https://github.com/facebook/react/pull/32324) by [@inottn](https://github.com/inottn)
-* Handle TSInstantiationExpression in lowerExpression [#32302](https://github.com/facebook/react/pull/32302) by [@inottn](https://github.com/inottn)
-* Fix invalid Array.map type [#32095](https://github.com/facebook/react/pull/32095) by [@mofeiZ](https://github.com/mofeiZ)
-* Patch for JSX escape sequences in @babel/generator [#32131](https://github.com/facebook/react/pull/32131) by [@mofeiZ](https://github.com/mofeiZ)
-* `JSXText` emits incorrect with bracket [#32138](https://github.com/facebook/react/pull/32138) by [@himself65](https://github.com/himself65)
-* Validation against calling impure functions [#31960](https://github.com/facebook/react/pull/31960) by [@josephsavona](https://github.com/josephsavona)
-* Always target node [#32091](https://github.com/facebook/react/pull/32091) by [@poteto](https://github.com/poteto)
-* Patch compilationMode:infer object method edge case [#32055](https://github.com/facebook/react/pull/32055) by [@mofeiZ](https://github.com/mofeiZ)
-* Generate ts defs [#31994](https://github.com/facebook/react/pull/31994) by [@poteto](https://github.com/poteto)
-* Relax react peer dep requirement [#31915](https://github.com/facebook/react/pull/31915) by [@poteto](https://github.com/poteto)
-* Allow type cast expressions with refs [#31871](https://github.com/facebook/react/pull/31871) by [@josephsavona](https://github.com/josephsavona)
-* Add shape for global Object.keys [#31583](https://github.com/facebook/react/pull/31583) by [@mofeiZ](https://github.com/mofeiZ)
-* Optimize method calls w props receiver [#31775](https://github.com/facebook/react/pull/31775) by [@josephsavona](https://github.com/josephsavona)
-* Fix dropped ref with spread props in InlineJsxTransform [#31726](https://github.com/facebook/react/pull/31726) by [@jackpope](https://github.com/jackpope)
-* Support for non-declatation for in/of iterators [#31710](https://github.com/facebook/react/pull/31710) by [@mvitousek](https://github.com/mvitousek)
-* Support for context variable loop iterators [#31709](https://github.com/facebook/react/pull/31709) by [@mvitousek](https://github.com/mvitousek)
-* Replace deprecated dependency in `eslint-plugin-react-compiler` [#31629](https://github.com/facebook/react/pull/31629) by [@rakleed](https://github.com/rakleed)
-* Support enableRefAsProp in jsx transform [#31558](https://github.com/facebook/react/pull/31558) by [@jackpope](https://github.com/jackpope)
-* Fix: ref.current now correctly reactive [#31521](https://github.com/facebook/react/pull/31521) by [@mofeiZ](https://github.com/mofeiZ)
-* Outline JSX with non-jsx children [#31442](https://github.com/facebook/react/pull/31442) by [@gsathya](https://github.com/gsathya)
-* Outline jsx with duplicate attributes [#31441](https://github.com/facebook/react/pull/31441) by [@gsathya](https://github.com/gsathya)
-* Store original and new prop names [#31440](https://github.com/facebook/react/pull/31440) by [@gsathya](https://github.com/gsathya)
-* Stabilize compiler output: sort deps and decls by name [#31362](https://github.com/facebook/react/pull/31362) by [@mofeiZ](https://github.com/mofeiZ)
-* Bugfix for hoistable deps for nested functions [#31345](https://github.com/facebook/react/pull/31345) by [@mofeiZ](https://github.com/mofeiZ)
-* Remove compiler runtime-compat fixture library [#31430](https://github.com/facebook/react/pull/31430) by [@poteto](https://github.com/poteto)
-* Wrap inline jsx transform codegen in conditional [#31267](https://github.com/facebook/react/pull/31267) by [@jackpope](https://github.com/jackpope)
-* Check if local identifier is a hook when resolving globals [#31384](https://github.com/facebook/react/pull/31384) by [@poteto](https://github.com/poteto)
-* Handle member expr as computed property [#31344](https://github.com/facebook/react/pull/31344) by [@gsathya](https://github.com/gsathya)
-* Fix to ref access check to ban ref?.current [#31360](https://github.com/facebook/react/pull/31360) by [@mvitousek](https://github.com/mvitousek)
-* InlineJSXTransform transforms jsx inside function expressions [#31282](https://github.com/facebook/react/pull/31282) by [@josephsavona](https://github.com/josephsavona)
-
-## Other
-* Add shebang to banner [#32225](https://github.com/facebook/react/pull/32225) by [@Jeremy-Hibiki](https://github.com/Jeremy-Hibiki)
-* remove terser from react-compiler-runtime build [#31326](https://github.com/facebook/react/pull/31326) by [@henryqdineen](https://github.com/henryqdineen)

compiler/CLAUDE.md

@@ -1,248 +0,0 @@
-# React Compiler Knowledge Base
-
-This document contains knowledge about the React Compiler gathered during development sessions. It serves as a reference for understanding the codebase architecture and key concepts.
-
-## Project Structure
-
-When modifying the compiler, you MUST read the documentation about that pass in `compiler/packages/babel-plugin-react-compiler/docs/passes/` to learn more about the role of that pass within the compiler.
-
-- `packages/babel-plugin-react-compiler/` - Main compiler package
-  - `src/HIR/` - High-level Intermediate Representation types and utilities
-  - `src/Inference/` - Effect inference passes (aliasing, mutation, etc.)
-  - `src/Validation/` - Validation passes that check for errors
-  - `src/Entrypoint/Pipeline.ts` - Main compilation pipeline with pass ordering
-  - `src/__tests__/fixtures/compiler/` - Test fixtures
-    - `error.todo-*.js` - Unsupported feature, correctly throws Todo error (graceful bailout)
-    - `error.bug-*.js` - Known bug, throws wrong error type or incorrect behavior
-    - `*.expect.md` - Expected output for each fixture
-
-## Running Tests
-
-```bash
-# Run all tests
-yarn snap
-
-# Run tests matching a pattern
-# Example: yarn snap -p 'error.*'
-yarn snap -p <pattern>
-
-# Run a single fixture in debug mode. Use the path relative to the __tests__/fixtures/compiler directory
-# For each step of compilation, outputs the step name and state of the compiled program
-# Example: yarn snap -p simple.js -d
-yarn snap -p <file-basename> -d
-
-# Update fixture outputs (also works with -p)
-yarn snap -u
-```
-
-## Compiling Arbitrary Files
-
-Use `yarn snap compile` to compile any file (not just fixtures) with the React Compiler:
-
-```bash
-# Compile a file and see the output
-yarn snap compile <path>
-
-# Compile with debug logging to see the state after each compiler pass
-# This is an alternative to `yarn snap -d -p <pattern>` when you don't have a fixture file yet
-yarn snap compile --debug <path>
-```
-
-## Minimizing Test Cases
-
-Use `yarn snap minimize` to automatically reduce a failing test case to its minimal reproduction:
-
-```bash
-# Minimize a file that causes a compiler error
-yarn snap minimize <path>
-
-# Minimize and update the file in-place with the minimized version
-yarn snap minimize --update <path>
-```
-
-## Version Control
-
-This repository uses Sapling (`sl`) for version control. Sapling is similar to Mercurial: there is not staging area, but new/deleted files must be explicitlyu added/removed.
-
-```bash
-# Check status
-sl status
-
-# Add new files, remove deleted files
-sl addremove
-
-# Commit all changes
-sl commit -m "Your commit message"
-
-# Commit with multi-line message using heredoc
-sl commit -m "$(cat <<'EOF'
-Summary line
-
-Detailed description here
-EOF
-)"
-```
-
-## Key Concepts
-
-### HIR (High-level Intermediate Representation)
-
-The compiler converts source code to HIR for analysis. Key types in `src/HIR/HIR.ts`:
-
-- **HIRFunction** - A function being compiled
-  - `body.blocks` - Map of BasicBlocks
-  - `context` - Captured variables from outer scope
-  - `params` - Function parameters
-  - `returns` - The function's return place
-  - `aliasingEffects` - Effects that describe the function's behavior when called
-
-- **Instruction** - A single operation
-  - `lvalue` - The place being assigned to
-  - `value` - The instruction kind (CallExpression, FunctionExpression, LoadLocal, etc.)
-  - `effects` - Array of AliasingEffects for this instruction
-
-- **Terminal** - Block terminators (return, branch, etc.)
-  - `effects` - Array of AliasingEffects
-
-- **Place** - A reference to a value
-  - `identifier.id` - Unique IdentifierId
-
-- **Phi nodes** - Join points for values from different control flow paths
-  - Located at `block.phis`
-  - `phi.place` - The result place
-  - `phi.operands` - Map of predecessor block to source place
-
-### AliasingEffects System
-
-Effects describe data flow and operations. Defined in `src/Inference/AliasingEffects.ts`:
-
-**Data Flow Effects:**
-- `Impure` - Marks a place as containing an impure value (e.g., Date.now() result, ref.current)
-- `Capture a -> b` - Value from `a` is captured into `b` (mutable capture)
-- `Alias a -> b` - `b` aliases `a`
-- `ImmutableCapture a -> b` - Immutable capture (like Capture but read-only)
-- `Assign a -> b` - Direct assignment
-- `MaybeAlias a -> b` - Possible aliasing
-- `CreateFrom a -> b` - Created from source
-
-**Mutation Effects:**
-- `Mutate value` - Value is mutated
-- `MutateTransitive value` - Value and transitive captures are mutated
-- `MutateConditionally value` - May mutate
-- `MutateTransitiveConditionally value` - May mutate transitively
-
-**Other Effects:**
-- `Render place` - Place is used in render context (JSX props, component return)
-- `Freeze place` - Place is frozen (made immutable)
-- `Create place` - New value created
-- `CreateFunction` - Function expression created, includes `captures` array
-- `Apply` - Function application with receiver, function, args, and result
-
-### Hook Aliasing Signatures
-
-Located in `src/HIR/Globals.ts`, hooks can define custom aliasing signatures to control how data flows through them.
-
-**Structure:**
-```typescript
-aliasing: {
-  receiver: '@receiver',    // The hook function itself
-  params: ['@param0'],      // Named positional parameters
-  rest: '@rest',            // Rest parameters (or null)
-  returns: '@returns',      // Return value
-  temporaries: [],          // Temporary values during execution
-  effects: [                // Array of effects to apply when hook is called
-    {kind: 'Freeze', value: '@param0', reason: ValueReason.HookCaptured},
-    {kind: 'Assign', from: '@param0', into: '@returns'},
-  ],
-}
-```
-
-**Common patterns:**
-
-1. **RenderHookAliasing** (useState, useContext, useMemo, useCallback):
-   - Freezes arguments (`Freeze @rest`)
-   - Marks arguments as render-time (`Render @rest`)
-   - Creates frozen return value
-   - Aliases arguments to return
-
-2. **EffectHookAliasing** (useEffect, useLayoutEffect, useInsertionEffect):
-   - Freezes function and deps
-   - Creates internal effect object
-   - Captures function and deps into effect
-   - Returns undefined
-
-3. **Event handler hooks** (useEffectEvent):
-   - Freezes callback (`Freeze @fn`)
-   - Aliases input to return (`Assign @fn -> @returns`)
-   - NO Render effect (callback not called during render)
-
-**Example: useEffectEvent**
-```typescript
-const UseEffectEventHook = addHook(
-  DEFAULT_SHAPES,
-  {
-    positionalParams: [Effect.Freeze],  // Takes one positional param
-    restParam: null,
-    returnType: {kind: 'Function', ...},
-    calleeEffect: Effect.Read,
-    hookKind: 'useEffectEvent',
-    returnValueKind: ValueKind.Frozen,
-    aliasing: {
-      receiver: '@receiver',
-      params: ['@fn'],              // Name for the callback parameter
-      rest: null,
-      returns: '@returns',
-      temporaries: [],
-      effects: [
-        {kind: 'Freeze', value: '@fn', reason: ValueReason.HookCaptured},
-        {kind: 'Assign', from: '@fn', into: '@returns'},
-        // Note: NO Render effect - callback is not called during render
-      ],
-    },
-  },
-  BuiltInUseEffectEventId,
-);
-
-// Add as both names for compatibility
-['useEffectEvent', UseEffectEventHook],
-['experimental_useEffectEvent', UseEffectEventHook],
-```
-
-**Key insight:** If a hook is missing an `aliasing` config, it falls back to `DefaultNonmutatingHook` which includes a `Render` effect on all arguments. This can cause false positives for hooks like `useEffectEvent` whose callbacks are not called during render.
-
-## Feature Flags
-
-Feature flags are configured in `src/HIR/Environment.ts`, for example `enableJsxOutlining`. Test fixtures can override the active feature flags used for that fixture via a comment pragma on the first line of the fixture input, for example:
-
-```javascript
-// enableJsxOutlining @enableNameAnonymousFunctions:false
-
-...code...
-```
-
-Would enable the `enableJsxOutlining` feature and disable the `enableNameAnonymousFunctions` feature.
-
-## Debugging Tips
-
-1. Run `yarn snap -p <fixture>` to see full HIR output with effects
-2. Look for `@aliasingEffects=` on FunctionExpressions
-3. Look for `Impure`, `Render`, `Capture` effects on instructions
-4. Check the pass ordering in Pipeline.ts to understand when effects are populated vs validated
-
-## Error Handling for Unsupported Features
-
-When the compiler encounters an unsupported but known pattern, use `CompilerError.throwTodo()` instead of `CompilerError.invariant()`. Todo errors cause graceful bailouts in production; Invariant errors are hard failures indicating unexpected/invalid states.
-
-```typescript
-// Unsupported but expected pattern - graceful bailout
-CompilerError.throwTodo({
-  reason: `Support [description of unsupported feature]`,
-  loc: terminal.loc,
-});
-
-// Invariant is for truly unexpected/invalid states - hard failure
-CompilerError.invariant(false, {
-  reason: `Unexpected [thing]`,
-  loc: terminal.loc,
-});
-```

compiler/apps/playground/.gitignore

@@ -12,7 +12,6 @@
 # next.js
 /.next/
 /out/
-/next-env.d.ts
 
 # production
 /build

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/compilationMode-all-output.txt

@@ -1,4 +1,5 @@
-import { c as _c } from "react/compiler-runtime"; // @compilationMode:"all"
+import { c as _c } from "react/compiler-runtime"; // 
+        @compilationMode(all)
 function nonReactFn() {
   const $ = _c(1);
   let t0;

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/compilationMode-infer-output.txt

@@ -1,4 +1,4 @@
-// @compilationMode:"infer"
+// @compilationMode(infer)
 function nonReactFn() {
   return {};
 }

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/default-config.txt

@@ -1,5 +0,0 @@
-import type { PluginOptions } from 
-'babel-plugin-react-compiler/dist';
-({
-  //compilationMode: "all"
-} satisfies PluginOptions);

compiler/apps/playground/__tests__/e2e/page.spec.ts

@@ -5,9 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {expect, test, type Page} from '@playwright/test';
+import {expect, test} from '@playwright/test';
 import {encodeStore, type Store} from '../../lib/stores';
-import {defaultConfig} from '../../lib/defaultStore';
 import {format} from 'prettier';
 
 function isMonacoLoaded(): boolean {
@@ -21,16 +20,6 @@ function formatPrint(data: Array<string>): Promise<string> {
   return format(data.join(''), {parser: 'babel'});
 }
 
-async function expandConfigs(page: Page): Promise<void> {
-  const expandButton = page.locator('[title="Expand config editor"]');
-  await expandButton.click();
-  await page.waitForSelector('.monaco-editor-config', {state: 'visible'});
-}
-
-const TEST_SOURCE = `export default function TestComponent({ x }) {
-  return <Button>{x}</Button>;
-}`;
-
 const TEST_CASE_INPUTS = [
   {
     name: 'module-scope-use-memo',
@@ -103,7 +92,7 @@ function useFoo(propVal: {+baz: number}) {
   },
   {
     name: 'compilationMode-infer',
-    input: `// @compilationMode:"infer"
+    input: `// @compilationMode(infer)
 function nonReactFn() {
   return {};
 }
@@ -112,7 +101,7 @@ function nonReactFn() {
   },
   {
     name: 'compilationMode-all',
-    input: `// @compilationMode:"all"
+    input: `// @compilationMode(all)
 function nonReactFn() {
   return {};
 }
@@ -132,9 +121,10 @@ test('editor should open successfully', async ({page}) => {
 
 test('editor should compile from hash successfully', async ({page}) => {
   const store: Store = {
-    source: TEST_SOURCE,
-    config: defaultConfig,
-    showInternals: false,
+    source: `export default function TestComponent({ x }) {
+      return <Button>{x}</Button>;
+    }
+    `,
   };
   const hash = encodeStore(store);
   await page.goto(`/#${hash}`, {waitUntil: 'networkidle'});
@@ -146,7 +136,7 @@ test('editor should compile from hash successfully', async ({page}) => {
     path: 'test-results/01-compiles-from-hash.png',
   });
   const text =
-    (await page.locator('.monaco-editor-output').allInnerTexts()) ?? [];
+    (await page.locator('.monaco-editor').nth(1).allInnerTexts()) ?? [];
   const output = await formatPrint(text);
 
   expect(output).not.toEqual('');
@@ -155,9 +145,10 @@ test('editor should compile from hash successfully', async ({page}) => {
 
 test('reset button works', async ({page}) => {
   const store: Store = {
-    source: TEST_SOURCE,
-    config: defaultConfig,
-    showInternals: false,
+    source: `export default function TestComponent({ x }) {
+      return <Button>{x}</Button>;
+    }
+    `,
   };
   const hash = encodeStore(store);
   await page.goto(`/#${hash}`, {waitUntil: 'networkidle'});
@@ -166,170 +157,33 @@ test('reset button works', async ({page}) => {
   // Reset button works
   page.on('dialog', dialog => dialog.accept());
   await page.getByRole('button', {name: 'Reset'}).click();
-  await expandConfigs(page);
-
   await page.screenshot({
     fullPage: true,
     path: 'test-results/02-reset-button-works.png',
   });
   const text =
-    (await page.locator('.monaco-editor-output').allInnerTexts()) ?? [];
+    (await page.locator('.monaco-editor').nth(1).allInnerTexts()) ?? [];
   const output = await formatPrint(text);
 
-  const configText =
-    (await page.locator('.monaco-editor-config').allInnerTexts()) ?? [];
-  const configOutput = configText.join('');
-
   expect(output).not.toEqual('');
   expect(output).toMatchSnapshot('02-default-output.txt');
-  expect(configOutput).not.toEqual('');
-  expect(configOutput).toMatchSnapshot('default-config.txt');
-});
-
-test('defaults load when only source is in Store', async ({page}) => {
-  // Test for backwards compatibility
-  const partial = {
-    source: TEST_SOURCE,
-  };
-  const hash = encodeStore(partial as Store);
-  await page.goto(`/#${hash}`, {waitUntil: 'networkidle'});
-  await page.waitForFunction(isMonacoLoaded);
-  await expandConfigs(page);
-
-  await page.screenshot({
-    fullPage: true,
-    path: 'test-results/03-missing-defaults.png',
-  });
-
-  // Config editor has default config
-  const configText =
-    (await page.locator('.monaco-editor-config').allInnerTexts()) ?? [];
-  const configOutput = configText.join('');
-
-  expect(configOutput).not.toEqual('');
-  expect(configOutput).toMatchSnapshot('default-config.txt');
-
-  const checkbox = page.locator('label.show-internals');
-  await expect(checkbox).not.toBeChecked();
-  const ssaTab = page.locator('text=SSA');
-  await expect(ssaTab).not.toBeVisible();
-});
-
-test('show internals button toggles correctly', async ({page}) => {
-  await page.goto(`/`, {waitUntil: 'networkidle'});
-  await page.waitForFunction(isMonacoLoaded);
-
-  // show internals should be off
-  const checkbox = page.locator('label.show-internals');
-  await checkbox.click();
-
-  await page.screenshot({
-    fullPage: true,
-    path: 'test-results/04-show-internals-on.png',
-  });
-
-  await expect(checkbox).toBeChecked();
-
-  const ssaTab = page.locator('text=SSA');
-  await expect(ssaTab).toBeVisible();
-});
-
-test('error is displayed when config has syntax error', async ({page}) => {
-  const store: Store = {
-    source: TEST_SOURCE,
-    config: `compilationMode: `,
-    showInternals: false,
-  };
-  const hash = encodeStore(store);
-  await page.goto(`/#${hash}`, {waitUntil: 'networkidle'});
-  await page.waitForFunction(isMonacoLoaded);
-  await expandConfigs(page);
-  await page.screenshot({
-    fullPage: true,
-    path: 'test-results/05-config-syntax-error.png',
-  });
-
-  const text =
-    (await page.locator('.monaco-editor-output').allInnerTexts()) ?? [];
-  const output = text.join('');
-
-  // Remove hidden chars
-  expect(output.replace(/\s+/g, ' ')).toContain('Invalid override format');
-});
-
-test('error is displayed when config has validation error', async ({page}) => {
-  const store: Store = {
-    source: TEST_SOURCE,
-    config: `import type { PluginOptions } from 'babel-plugin-react-compiler/dist';
-
-({
-  compilationMode: "123"
-} satisfies PluginOptions);`,
-    showInternals: false,
-  };
-  const hash = encodeStore(store);
-  await page.goto(`/#${hash}`, {waitUntil: 'networkidle'});
-  await page.waitForFunction(isMonacoLoaded);
-  await expandConfigs(page);
-  await page.screenshot({
-    fullPage: true,
-    path: 'test-results/06-config-validation-error.png',
-  });
-
-  const text =
-    (await page.locator('.monaco-editor-output').allInnerTexts()) ?? [];
-  const output = text.join('');
-
-  expect(output.replace(/\s+/g, ' ')).toContain('Unexpected compilationMode');
-});
-
-test('error is displayed when source has syntax error', async ({page}) => {
-  const syntaxErrorSource = `function TestComponent(props) {
-  const oops = props.
-  return (
-    <>{oops}</>
-  );
-}`;
-  const store: Store = {
-    source: syntaxErrorSource,
-    config: defaultConfig,
-    showInternals: false,
-  };
-  const hash = encodeStore(store);
-  await page.goto(`/#${hash}`);
-  await page.waitForFunction(isMonacoLoaded);
-  await expandConfigs(page);
-  await page.screenshot({
-    fullPage: true,
-    path: 'test-results/08-source-syntax-error.png',
-  });
-
-  const text =
-    (await page.locator('.monaco-editor-output').allInnerTexts()) ?? [];
-  const output = text.join('');
-
-  expect(output.replace(/\s+/g, ' ')).toContain(
-    'Expected identifier to be defined before being used',
-  );
 });
 
 TEST_CASE_INPUTS.forEach((t, idx) =>
   test(`playground compiles: ${t.name}`, async ({page}) => {
     const store: Store = {
       source: t.input,
-      config: defaultConfig,
-      showInternals: false,
     };
     const hash = encodeStore(store);
     await page.goto(`/#${hash}`, {waitUntil: 'networkidle'});
     await page.waitForFunction(isMonacoLoaded);
     await page.screenshot({
       fullPage: true,
-      path: `test-results/08-0${idx}-${t.name}.png`,
+      path: `test-results/03-0${idx}-${t.name}.png`,
     });
 
     const text =
-      (await page.locator('.monaco-editor-output').allInnerTexts()) ?? [];
+      (await page.locator('.monaco-editor').nth(1).allInnerTexts()) ?? [];
     let output: string;
     if (t.noFormat) {
       output = text.join('');

compiler/apps/playground/app/index.tsx

@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type {NextPage} from 'next';
+import Head from 'next/head';
+import {SnackbarProvider} from 'notistack';
+import {Editor, Header, StoreProvider} from '../components';
+import MessageSnackbar from '../components/Message';
+
+const Home: NextPage = () => {
+  return (
+    <div className="flex flex-col w-screen h-screen font-light">
+      <Head>
+        <title>
+          {process.env.NODE_ENV === 'development'
+            ? '[DEV] React Compiler Playground'
+            : 'React Compiler Playground'}
+        </title>
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"></meta>
+        <link rel="icon" href="/favicon.ico" />
+        <link rel="manifest" href="/site.webmanifest" />
+        <link
+          rel="preload"
+          href="/fonts/Source-Code-Pro-Regular.woff2"
+          as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
+        />
+        <link
+          rel="preload"
+          href="/fonts/Optimistic_Display_W_Lt.woff2"
+          as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
+        />
+      </Head>
+      <StoreProvider>
+        <SnackbarProvider
+          preventDuplicate
+          maxSnack={10}
+          Components={{message: MessageSnackbar}}>
+          <Header />
+          <Editor />
+        </SnackbarProvider>
+      </StoreProvider>
+    </div>
+  );
+};
+
+export default Home;

compiler/apps/playground/components/AccordionWindow.tsx

@@ -1,126 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import {Resizable} from 're-resizable';
-import React, {
-  useId,
-  unstable_ViewTransition as ViewTransition,
-  unstable_addTransitionType as addTransitionType,
-  startTransition,
-} from 'react';
-import {EXPAND_ACCORDION_TRANSITION} from '../lib/transitionTypes';
-
-type TabsRecord = Map<string, React.ReactNode>;
-
-export default function AccordionWindow(props: {
-  defaultTab: string | null;
-  tabs: TabsRecord;
-  tabsOpen: Set<string>;
-  setTabsOpen: (newTab: Set<string>) => void;
-  changedPasses: Set<string>;
-}): React.ReactElement {
-  return (
-    <div className="flex-1 min-w-[550px] sm:min-w-0">
-      <div className="flex flex-row h-full">
-        {Array.from(props.tabs.keys()).map(name => {
-          return (
-            <AccordionWindowItem
-              name={name}
-              key={name}
-              tabs={props.tabs}
-              tabsOpen={props.tabsOpen}
-              setTabsOpen={props.setTabsOpen}
-              hasChanged={props.changedPasses.has(name)}
-            />
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-function AccordionWindowItem({
-  name,
-  tabs,
-  tabsOpen,
-  setTabsOpen,
-  hasChanged,
-}: {
-  name: string;
-  tabs: TabsRecord;
-  tabsOpen: Set<string>;
-  setTabsOpen: (newTab: Set<string>) => void;
-  hasChanged: boolean;
-  isFailure: boolean;
-}): React.ReactElement {
-  const id = useId();
-  const isShow = tabsOpen.has(name);
-
-  const transitionName = `accordion-window-item-${id}`;
-
-  const toggleTabs = (): void => {
-    startTransition(() => {
-      addTransitionType(EXPAND_ACCORDION_TRANSITION);
-      const nextState = new Set(tabsOpen);
-      if (nextState.has(name)) {
-        nextState.delete(name);
-      } else {
-        nextState.add(name);
-      }
-      setTabsOpen(nextState);
-    });
-  };
-
-  // Replace spaces with non-breaking spaces
-  const displayName = name.replace(/ /g, '\u00A0');
-
-  return (
-    <div key={name} className="flex flex-row">
-      {isShow ? (
-        <ViewTransition
-          name={transitionName}
-          update={{
-            [EXPAND_ACCORDION_TRANSITION]: 'expand-accordion',
-            default: 'none',
-          }}>
-          <Resizable className="border-r" minWidth={550} enable={{right: true}}>
-            <h2
-              title="Minimize tab"
-              aria-label="Minimize tab"
-              onClick={toggleTabs}
-              className={`p-4 duration-150 ease-in border-b cursor-pointer border-grey-200 ${
-                hasChanged ? 'font-bold' : 'font-light'
-              } text-secondary hover:text-link`}>
-              - {displayName}
-            </h2>
-            {tabs.get(name) ?? <div>No output for {name}</div>}
-          </Resizable>
-        </ViewTransition>
-      ) : (
-        <ViewTransition
-          name={transitionName}
-          update={{
-            [EXPAND_ACCORDION_TRANSITION]: 'expand-accordion',
-            default: 'none',
-          }}>
-          <div className="relative items-center h-full px-1 py-6 align-middle border-r border-grey-200">
-            <button
-              title={`Expand compiler tab: ${name}`}
-              aria-label={`Expand compiler tab: ${name}`}
-              style={{transform: 'rotate(90deg) translate(-50%)'}}
-              onClick={toggleTabs}
-              className={`flex-grow-0 w-5 transition-colors duration-150 ease-in ${
-                hasChanged ? 'font-bold' : 'font-light'
-              } text-secondary hover:text-link`}>
-              {displayName}
-            </button>
-          </div>
-        </ViewTransition>
-      )}
-    </div>
-  );
-}

compiler/apps/playground/components/Editor/ConfigEditor.tsx

@@ -1,221 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import MonacoEditor, {loader, type Monaco} from '@monaco-editor/react';
-import type {editor} from 'monaco-editor';
-import * as monaco from 'monaco-editor';
-import React, {
-  useState,
-  useRef,
-  unstable_ViewTransition as ViewTransition,
-  unstable_addTransitionType as addTransitionType,
-  startTransition,
-} from 'react';
-import {Resizable} from 're-resizable';
-import {useStore, useStoreDispatch} from '../StoreContext';
-import {monacoConfigOptions} from './monacoOptions';
-import {IconChevron} from '../Icons/IconChevron';
-import {CONFIG_PANEL_TRANSITION} from '../../lib/transitionTypes';
-
-// @ts-expect-error - webpack asset/source loader handles .d.ts files as strings
-import compilerTypeDefs from 'babel-plugin-react-compiler/dist/index.d.ts';
-
-loader.config({monaco});
-
-export default function ConfigEditor({
-  formattedAppliedConfig,
-}: {
-  formattedAppliedConfig: string;
-}): React.ReactElement {
-  const [isExpanded, setIsExpanded] = useState(false);
-
-  // TODO: Add back <Activity> after upgrading next.js
-  return (
-    <>
-      <div
-        style={{
-          display: isExpanded ? 'block' : 'none',
-        }}>
-        {/* <Activity mode={isExpanded ? 'visible' : 'hidden'}> */}
-        <ExpandedEditor
-          onToggle={() => {
-            startTransition(() => {
-              addTransitionType(CONFIG_PANEL_TRANSITION);
-              setIsExpanded(false);
-            });
-          }}
-          formattedAppliedConfig={formattedAppliedConfig}
-        />
-      </div>
-      <div
-        style={{
-          display: !isExpanded ? 'block' : 'none',
-        }}>
-        {/* </Activity>
-        <Activity mode={isExpanded ? 'hidden' : 'visible'}></Activity> */}
-        <CollapsedEditor
-          onToggle={() => {
-            startTransition(() => {
-              addTransitionType(CONFIG_PANEL_TRANSITION);
-              setIsExpanded(true);
-            });
-          }}
-        />
-      </div>
-      {/* </Activity> */}
-    </>
-  );
-}
-
-function ExpandedEditor({
-  onToggle,
-  formattedAppliedConfig,
-}: {
-  onToggle: (expanded: boolean) => void;
-  formattedAppliedConfig: string;
-}): React.ReactElement {
-  const store = useStore();
-  const dispatchStore = useStoreDispatch();
-  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
-
-  const handleChange: (value: string | undefined) => void = (
-    value: string | undefined,
-  ) => {
-    if (value === undefined) return;
-
-    if (debounceTimerRef.current) {
-      clearTimeout(debounceTimerRef.current);
-    }
-
-    debounceTimerRef.current = setTimeout(() => {
-      dispatchStore({
-        type: 'updateConfig',
-        payload: {
-          config: value,
-        },
-      });
-    }, 500); // 500ms debounce delay
-  };
-
-  const handleMount: (
-    _: editor.IStandaloneCodeEditor,
-    monaco: Monaco,
-  ) => void = (_, monaco) => {
-    // Add the babel-plugin-react-compiler type definitions to Monaco
-    monaco.languages.typescript.typescriptDefaults.addExtraLib(
-      //@ts-expect-error - compilerTypeDefs is a string
-      compilerTypeDefs,
-      'file:///node_modules/babel-plugin-react-compiler/dist/index.d.ts',
-    );
-    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
-      target: monaco.languages.typescript.ScriptTarget.Latest,
-      allowNonTsExtensions: true,
-      moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
-      module: monaco.languages.typescript.ModuleKind.ESNext,
-      noEmit: true,
-      strict: false,
-      esModuleInterop: true,
-      allowSyntheticDefaultImports: true,
-      jsx: monaco.languages.typescript.JsxEmit.React,
-    });
-  };
-
-  return (
-    <ViewTransition
-      update={{[CONFIG_PANEL_TRANSITION]: 'slide-in', default: 'none'}}>
-      {/* enter={{[CONFIG_PANEL_TRANSITION]: 'slide-in', default: 'none'}}
-      exit={{[CONFIG_PANEL_TRANSITION]: 'slide-out', default: 'none'}}> */}
-      <Resizable
-        minWidth={300}
-        maxWidth={600}
-        defaultSize={{width: 350}}
-        enable={{right: true, bottom: false}}>
-        <div className="bg-blue-10 relative h-full flex flex-col !h-[calc(100vh_-_3.5rem)] border border-gray-300">
-          <div
-            className="absolute w-8 h-16 bg-blue-10 rounded-r-full flex items-center justify-center z-[2] cursor-pointer border border-l-0 border-gray-300"
-            title="Minimize config editor"
-            onClick={onToggle}
-            style={{
-              top: '50%',
-              marginTop: '-32px',
-              right: '-32px',
-              borderTopLeftRadius: 0,
-              borderBottomLeftRadius: 0,
-            }}>
-            <IconChevron displayDirection="left" className="text-blue-50" />
-          </div>
-
-          <div className="flex-1 flex flex-col m-2 mb-2">
-            <div className="pb-2">
-              <h2 className="inline-block text-blue-50 py-1.5 px-1.5 xs:px-3 sm:px-4 text-sm">
-                Config Overrides
-              </h2>
-            </div>
-            <div className="flex-1 border border-gray-300">
-              <MonacoEditor
-                path={'config.ts'}
-                language={'typescript'}
-                value={store.config}
-                onMount={handleMount}
-                onChange={handleChange}
-                loading={''}
-                className="monaco-editor-config"
-                options={monacoConfigOptions}
-              />
-            </div>
-          </div>
-          <div className="flex-1 flex flex-col m-2">
-            <div className="pb-2">
-              <h2 className="inline-block text-blue-50 py-1.5 px-1.5 xs:px-3 sm:px-4 text-sm">
-                Applied Configs
-              </h2>
-            </div>
-            <div className="flex-1 border border-gray-300">
-              <MonacoEditor
-                path={'applied-config.js'}
-                language={'javascript'}
-                value={formattedAppliedConfig}
-                loading={''}
-                className="monaco-editor-applied-config"
-                options={{
-                  ...monacoConfigOptions,
-                  readOnly: true,
-                }}
-              />
-            </div>
-          </div>
-        </div>
-      </Resizable>
-    </ViewTransition>
-  );
-}
-
-function CollapsedEditor({
-  onToggle,
-}: {
-  onToggle: () => void;
-}): React.ReactElement {
-  return (
-    <div
-      className="w-4 !h-[calc(100vh_-_3.5rem)]"
-      style={{position: 'relative'}}>
-      <div
-        className="absolute w-10 h-16 bg-blue-10 hover:translate-x-2 transition-transform rounded-r-full flex items-center justify-center z-[2] cursor-pointer border border-gray-300"
-        title="Expand config editor"
-        onClick={onToggle}
-        style={{
-          top: '50%',
-          marginTop: '-32px',
-          left: '-8px',
-          borderTopLeftRadius: 0,
-          borderBottomLeftRadius: 0,
-        }}>
-        <IconChevron displayDirection="right" className="text-blue-50" />
-      </div>
-    </div>
-  );
-}

compiler/apps/playground/components/Editor/EditorImpl.tsx

@@ -5,63 +5,289 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {
+import {parse as babelParse, ParseResult} from '@babel/parser';
+import * as HermesParser from 'hermes-parser';
+import * as t from '@babel/types';
+import BabelPluginReactCompiler, {
+  CompilerError,
   CompilerErrorDetail,
-  CompilerDiagnostic,
-} from 'babel-plugin-react-compiler';
-import {useDeferredValue, useMemo, useState} from 'react';
-import {useStore} from '../StoreContext';
-import ConfigEditor from './ConfigEditor';
+  Effect,
+  ErrorSeverity,
+  parseConfigPragmaForTests,
+  ValueKind,
+  type Hook,
+  PluginOptions,
+  CompilerPipelineValue,
+  parsePluginOptions,
+} from 'babel-plugin-react-compiler/src';
+import clsx from 'clsx';
+import invariant from 'invariant';
+import {useSnackbar} from 'notistack';
+import {useDeferredValue, useMemo} from 'react';
+import {useMountEffect} from '../../hooks';
+import {defaultStore} from '../../lib/defaultStore';
+import {
+  createMessage,
+  initStoreFromUrlOrLocalStorage,
+  MessageLevel,
+  MessageSource,
+  type Store,
+} from '../../lib/stores';
+import {useStore, useStoreDispatch} from '../StoreContext';
 import Input from './Input';
-import {CompilerOutput, default as Output} from './Output';
-import {compile} from '../../lib/compilation';
-import prettyFormat from 'pretty-format';
+import {
+  CompilerOutput,
+  CompilerTransformOutput,
+  default as Output,
+  PrintedCompilerPipelineValue,
+} from './Output';
+import {printFunctionWithOutlined} from 'babel-plugin-react-compiler/src/HIR/PrintHIR';
+import {printReactiveFunctionWithOutlined} from 'babel-plugin-react-compiler/src/ReactiveScopes/PrintReactiveFunction';
+import {transformFromAstSync} from '@babel/core';
+
+function parseInput(
+  input: string,
+  language: 'flow' | 'typescript',
+): ParseResult<t.File> {
+  // Extract the first line to quickly check for custom test directives
+  if (language === 'flow') {
+    return HermesParser.parse(input, {
+      babel: true,
+      flow: 'all',
+      sourceType: 'module',
+      enableExperimentalComponentSyntax: true,
+    });
+  } else {
+    return babelParse(input, {
+      plugins: ['typescript', 'jsx'],
+      sourceType: 'module',
+    }) as ParseResult<t.File>;
+  }
+}
+
+function invokeCompiler(
+  source: string,
+  language: 'flow' | 'typescript',
+  options: PluginOptions,
+): CompilerTransformOutput {
+  const ast = parseInput(source, language);
+  let result = transformFromAstSync(ast, source, {
+    filename: '_playgroundFile.js',
+    highlightCode: false,
+    retainLines: true,
+    plugins: [[BabelPluginReactCompiler, options]],
+    ast: true,
+    sourceType: 'module',
+    configFile: false,
+    sourceMaps: true,
+    babelrc: false,
+  });
+  if (result?.ast == null || result?.code == null || result?.map == null) {
+    throw new Error('Expected successful compilation');
+  }
+  return {
+    code: result.code,
+    sourceMaps: result.map,
+    language,
+  };
+}
+
+const COMMON_HOOKS: Array<[string, Hook]> = [
+  [
+    'useFragment',
+    {
+      valueKind: ValueKind.Frozen,
+      effectKind: Effect.Freeze,
+      noAlias: true,
+      transitiveMixedData: true,
+    },
+  ],
+  [
+    'usePaginationFragment',
+    {
+      valueKind: ValueKind.Frozen,
+      effectKind: Effect.Freeze,
+      noAlias: true,
+      transitiveMixedData: true,
+    },
+  ],
+  [
+    'useRefetchableFragment',
+    {
+      valueKind: ValueKind.Frozen,
+      effectKind: Effect.Freeze,
+      noAlias: true,
+      transitiveMixedData: true,
+    },
+  ],
+  [
+    'useLazyLoadQuery',
+    {
+      valueKind: ValueKind.Frozen,
+      effectKind: Effect.Freeze,
+      noAlias: true,
+      transitiveMixedData: true,
+    },
+  ],
+  [
+    'usePreloadedQuery',
+    {
+      valueKind: ValueKind.Frozen,
+      effectKind: Effect.Freeze,
+      noAlias: true,
+      transitiveMixedData: true,
+    },
+  ],
+];
+
+function compile(source: string): [CompilerOutput, 'flow' | 'typescript'] {
+  const results = new Map<string, Array<PrintedCompilerPipelineValue>>();
+  const error = new CompilerError();
+  const upsert: (result: PrintedCompilerPipelineValue) => void = result => {
+    const entry = results.get(result.name);
+    if (Array.isArray(entry)) {
+      entry.push(result);
+    } else {
+      results.set(result.name, [result]);
+    }
+  };
+  let language: 'flow' | 'typescript';
+  if (source.match(/\@flow/)) {
+    language = 'flow';
+  } else {
+    language = 'typescript';
+  }
+  let transformOutput;
+  try {
+    // Extract the first line to quickly check for custom test directives
+    const pragma = source.substring(0, source.indexOf('\n'));
+    const logIR = (result: CompilerPipelineValue): void => {
+      switch (result.kind) {
+        case 'ast': {
+          break;
+        }
+        case 'hir': {
+          upsert({
+            kind: 'hir',
+            fnName: result.value.id,
+            name: result.name,
+            value: printFunctionWithOutlined(result.value),
+          });
+          break;
+        }
+        case 'reactive': {
+          upsert({
+            kind: 'reactive',
+            fnName: result.value.id,
+            name: result.name,
+            value: printReactiveFunctionWithOutlined(result.value),
+          });
+          break;
+        }
+        case 'debug': {
+          upsert({
+            kind: 'debug',
+            fnName: null,
+            name: result.name,
+            value: result.value,
+          });
+          break;
+        }
+        default: {
+          const _: never = result;
+          throw new Error(`Unhandled result ${result}`);
+        }
+      }
+    };
+    const parsedOptions = parseConfigPragmaForTests(pragma, {
+      compilationMode: 'infer',
+    });
+    const opts: PluginOptions = parsePluginOptions({
+      ...parsedOptions,
+      environment: {
+        ...parsedOptions.environment,
+        customHooks: new Map([...COMMON_HOOKS]),
+      },
+      logger: {
+        debugLogIRs: logIR,
+        logEvent: () => {},
+      },
+    });
+    transformOutput = invokeCompiler(source, language, opts);
+  } catch (err) {
+    /**
+     * error might be an invariant violation or other runtime error
+     * (i.e. object shape that is not CompilerError)
+     */
+    if (err instanceof CompilerError && err.details.length > 0) {
+      error.details.push(...err.details);
+    } else {
+      /**
+       * Handle unexpected failures by logging (to get a stack trace)
+       * and reporting
+       */
+      console.error(err);
+      error.details.push(
+        new CompilerErrorDetail({
+          severity: ErrorSeverity.Invariant,
+          reason: `Unexpected failure when transforming input! ${err}`,
+          loc: null,
+          suggestions: null,
+        }),
+      );
+    }
+  }
+  if (error.hasErrors()) {
+    return [{kind: 'err', results, error: error}, language];
+  }
+  return [{kind: 'ok', results, transformOutput}, language];
+}
 
 export default function Editor(): JSX.Element {
   const store = useStore();
   const deferredStore = useDeferredValue(store);
-  const [compilerOutput, language, appliedOptions] = useMemo(
-    () => compile(deferredStore.source, 'compiler', deferredStore.config),
-    [deferredStore.source, deferredStore.config],
+  const dispatchStore = useStoreDispatch();
+  const {enqueueSnackbar} = useSnackbar();
+  const [compilerOutput, language] = useMemo(
+    () => compile(deferredStore.source),
+    [deferredStore.source],
   );
-  const [linterOutput] = useMemo(
-    () => compile(deferredStore.source, 'linter', deferredStore.config),
-    [deferredStore.source, deferredStore.config],
-  );
-  const [formattedAppliedConfig, setFormattedAppliedConfig] = useState('');
 
-  let mergedOutput: CompilerOutput;
-  let errors: Array<CompilerErrorDetail | CompilerDiagnostic>;
-  if (compilerOutput.kind === 'ok') {
-    errors = linterOutput.kind === 'ok' ? [] : linterOutput.error.details;
-    mergedOutput = {
-      ...compilerOutput,
-      errors,
-    };
-  } else {
-    mergedOutput = compilerOutput;
-    errors = compilerOutput.error.details;
-  }
-
-  if (appliedOptions) {
-    const formatted = prettyFormat(appliedOptions, {
-      printFunctionName: false,
-      printBasicPrototype: false,
-    });
-    if (formatted !== formattedAppliedConfig) {
-      setFormattedAppliedConfig(formatted);
+  useMountEffect(() => {
+    let mountStore: Store;
+    try {
+      mountStore = initStoreFromUrlOrLocalStorage();
+    } catch (e) {
+      invariant(e instanceof Error, 'Only Error may be caught.');
+      enqueueSnackbar(e.message, {
+        variant: 'warning',
+        ...createMessage(
+          'Bad URL - fell back to the default Playground.',
+          MessageLevel.Info,
+          MessageSource.Playground,
+        ),
+      });
+      mountStore = defaultStore;
     }
-  }
+    dispatchStore({
+      type: 'setStore',
+      payload: {store: mountStore},
+    });
+  });
 
   return (
     <>
-      <div className="relative flex top-14">
-        <div className="flex-shrink-0">
-          <ConfigEditor formattedAppliedConfig={formattedAppliedConfig} />
+      <div className="relative flex basis top-14">
+        <div className={clsx('relative sm:basis-1/4')}>
+          <Input
+            language={language}
+            errors={
+              compilerOutput.kind === 'err' ? compilerOutput.error.details : []
+            }
+          />
         </div>
-        <div className="flex flex-1 min-w-0">
-          <Input language={language} errors={errors} />
-          <Output store={deferredStore} compilerOutput={mergedOutput} />
+        <div className={clsx('flex sm:flex flex-wrap')}>
+          <Output store={deferredStore} compilerOutput={compilerOutput} />
         </div>
       </div>
     </>

compiler/apps/playground/components/Editor/Input.tsx

@@ -6,31 +6,22 @@
  */
 
 import MonacoEditor, {loader, type Monaco} from '@monaco-editor/react';
-import {
-  CompilerErrorDetail,
-  CompilerDiagnostic,
-} from 'babel-plugin-react-compiler';
+import {CompilerErrorDetail} from 'babel-plugin-react-compiler/src';
 import invariant from 'invariant';
 import type {editor} from 'monaco-editor';
 import * as monaco from 'monaco-editor';
-import {
-  useEffect,
-  useState,
-  unstable_ViewTransition as ViewTransition,
-} from 'react';
+import {Resizable} from 're-resizable';
+import {useEffect, useState} from 'react';
 import {renderReactCompilerMarkers} from '../../lib/reactCompilerMonacoDiagnostics';
 import {useStore, useStoreDispatch} from '../StoreContext';
-import TabbedWindow from '../TabbedWindow';
 import {monacoOptions} from './monacoOptions';
-import {CONFIG_PANEL_TRANSITION} from '../../lib/transitionTypes';
-
 // @ts-expect-error TODO: Make TS recognize .d.ts files, in addition to loading them with webpack.
 import React$Types from '../../node_modules/@types/react/index.d.ts';
 
 loader.config({monaco});
 
 type Props = {
-  errors: Array<CompilerErrorDetail | CompilerDiagnostic>;
+  errors: Array<CompilerErrorDetail>;
   language: 'flow' | 'typescript';
 };
 
@@ -45,13 +36,13 @@ export default function Input({errors, language}: Props): JSX.Element {
     const uri = monaco.Uri.parse(`file:///index.js`);
     const model = monaco.editor.getModel(uri);
     invariant(model, 'Model must exist for the selected input file.');
-    renderReactCompilerMarkers({
-      monaco,
-      model,
-      details: errors,
-      source: store.source,
-    });
-  }, [monaco, errors, store.source]);
+    renderReactCompilerMarkers({monaco, model, details: errors});
+    /**
+     * N.B. that `tabSize` is a model property, not an editor property.
+     * So, the tab size has to be set per model.
+     */
+    model.updateOptions({tabSize: 2});
+  }, [monaco, errors]);
 
   useEffect(() => {
     /**
@@ -83,11 +74,11 @@ export default function Input({errors, language}: Props): JSX.Element {
     });
   }, [monaco, language]);
 
-  const handleChange: (value: string | undefined) => void = async value => {
+  const handleChange: (value: string | undefined) => void = value => {
     if (!value) return;
 
     dispatchStore({
-      type: 'updateSource',
+      type: 'updateFile',
       payload: {
         source: value,
       },
@@ -139,42 +130,30 @@ export default function Input({errors, language}: Props): JSX.Element {
     });
   };
 
-  const editorContent = (
-    <MonacoEditor
-      path={'index.js'}
-      /**
-       * .js and .jsx files are specified to be TS so that Monaco can actually
-       * check their syntax using its TS language service. They are still JS files
-       * due to their extensions, so TS language features don't work.
-       */
-      language={'javascript'}
-      value={store.source}
-      onMount={handleMount}
-      onChange={handleChange}
-      className="monaco-editor-input"
-      options={monacoOptions}
-      loading={''}
-    />
-  );
-
-  const tabs = new Map([['Input', editorContent]]);
-  const [activeTab, setActiveTab] = useState('Input');
-
   return (
-    <ViewTransition
-      update={{
-        [CONFIG_PANEL_TRANSITION]: 'container',
-        default: 'none',
-      }}>
-      <div className="flex-1 min-w-[550px] sm:min-w-0">
-        <div className="flex flex-col h-full !h-[calc(100vh_-_3.5rem)] border-r border-gray-200">
-          <TabbedWindow
-            tabs={tabs}
-            activeTab={activeTab}
-            onTabChange={setActiveTab}
-          />
-        </div>
-      </div>
-    </ViewTransition>
+    <div className="relative flex flex-col flex-none border-r border-gray-200">
+      <Resizable
+        minWidth={650}
+        enable={{right: true}}
+        /**
+         * Restrict MonacoEditor's height, since the config autoLayout:true
+         * will grow the editor to fit within parent element
+         */
+        className="!h-[calc(100vh_-_3.5rem)]">
+        <MonacoEditor
+          path={'index.js'}
+          /**
+           * .js and .jsx files are specified to be TS so that Monaco can actually
+           * check their syntax using its TS language service. They are still JS files
+           * due to their extensions, so TS language features don't work.
+           */
+          language={'javascript'}
+          value={store.source}
+          onMount={handleMount}
+          onChange={handleChange}
+          options={monacoOptions}
+        />
+      </Resizable>
+    </div>
   );
 }

compiler/apps/playground/components/Editor/Output.tsx

@@ -11,46 +11,19 @@ import {
   InformationCircleIcon,
 } from '@heroicons/react/outline';
 import MonacoEditor, {DiffEditor} from '@monaco-editor/react';
-import {
-  CompilerErrorDetail,
-  CompilerDiagnostic,
-  type CompilerError,
-} from 'babel-plugin-react-compiler';
+import {type CompilerError} from 'babel-plugin-react-compiler/src';
 import parserBabel from 'prettier/plugins/babel';
 import * as prettierPluginEstree from 'prettier/plugins/estree';
 import * as prettier from 'prettier/standalone';
+import {memo, ReactNode, useEffect, useState} from 'react';
 import {type Store} from '../../lib/stores';
-import {
-  memo,
-  ReactNode,
-  use,
-  useState,
-  Suspense,
-  unstable_ViewTransition as ViewTransition,
-  unstable_addTransitionType as addTransitionType,
-  startTransition,
-} from 'react';
-import AccordionWindow from '../AccordionWindow';
 import TabbedWindow from '../TabbedWindow';
 import {monacoOptions} from './monacoOptions';
 import {BabelFileResult} from '@babel/core';
-import {
-  CONFIG_PANEL_TRANSITION,
-  TOGGLE_INTERNALS_TRANSITION,
-  EXPAND_ACCORDION_TRANSITION,
-} from '../../lib/transitionTypes';
-import {LRUCache} from 'lru-cache';
-
 const MemoizedOutput = memo(Output);
 
 export default MemoizedOutput;
 
-export const BASIC_OUTPUT_TAB_NAMES = ['Output', 'SourceMap'];
-
-const tabifyCache = new LRUCache<Store, Promise<Map<string, ReactNode>>>({
-  max: 5,
-});
-
 export type PrintedCompilerPipelineValue =
   | {
       kind: 'hir';
@@ -71,7 +44,6 @@ export type CompilerOutput =
       kind: 'ok';
       transformOutput: CompilerTransformOutput;
       results: Map<string, Array<PrintedCompilerPipelineValue>>;
-      errors: Array<CompilerErrorDetail | CompilerDiagnostic>;
     }
   | {
       kind: 'err';
@@ -87,16 +59,12 @@ type Props = {
 async function tabify(
   source: string,
   compilerOutput: CompilerOutput,
-  showInternals: boolean,
 ): Promise<Map<string, ReactNode>> {
   const tabs = new Map<string, React.ReactNode>();
   const reorderedTabs = new Map<string, React.ReactNode>();
   const concattedResults = new Map<string, string>();
   // Concat all top level function declaration results into a single tab for each pass
   for (const [passName, results] of compilerOutput.results) {
-    if (!showInternals && !BASIC_OUTPUT_TAB_NAMES.includes(passName)) {
-      continue;
-    }
     for (const result of results) {
       switch (result.kind) {
         case 'hir': {
@@ -155,36 +123,10 @@ async function tabify(
       parser: transformOutput.language === 'flow' ? 'babel-flow' : 'babel-ts',
       plugins: [parserBabel, prettierPluginEstree],
     });
-
-    let output: string;
-    let language: string;
-    if (compilerOutput.errors.length === 0) {
-      output = code;
-      language = 'javascript';
-    } else {
-      language = 'markdown';
-      output = `
-# Summary
-
-React Compiler compiled this function successfully, but there are lint errors that indicate potential issues with the original code.
-
-## ${compilerOutput.errors.length} Lint Errors
-
-${compilerOutput.errors.map(e => e.printErrorMessage(source, {eslint: false})).join('\n\n')}
-
-## Output
-
-\`\`\`js
-${code}
-\`\`\`
-`.trim();
-    }
-
     reorderedTabs.set(
-      'Output',
+      'JS',
       <TextTabContent
-        output={output}
-        language={language}
+        output={code}
         diff={null}
         showInfoPanel={false}></TextTabContent>,
     );
@@ -200,18 +142,6 @@ ${code}
         </>,
       );
     }
-  } else if (compilerOutput.kind === 'err') {
-    const errors = compilerOutput.error.printErrorMessage(source, {
-      eslint: false,
-    });
-    reorderedTabs.set(
-      'Output',
-      <TextTabContent
-        output={errors}
-        language="markdown"
-        diff={null}
-        showInfoPanel={false}></TextTabContent>,
-    );
   }
   tabs.forEach((tab, name) => {
     reorderedTabs.set(name, tab);
@@ -219,25 +149,6 @@ ${code}
   return reorderedTabs;
 }
 
-function tabifyCached(
-  store: Store,
-  compilerOutput: CompilerOutput,
-): Promise<Map<string, ReactNode>> {
-  const cached = tabifyCache.get(store);
-  if (cached) return cached;
-  const result = tabify(store.source, compilerOutput, store.showInternals);
-  tabifyCache.set(store, result);
-  return result;
-}
-
-function Fallback(): JSX.Element {
-  return (
-    <div className="w-full h-monaco_small sm:h-monaco flex items-center justify-center">
-      Loading...
-    </div>
-  );
-}
-
 function utf16ToUTF8(s: string): string {
   return unescape(encodeURIComponent(s));
 }
@@ -251,40 +162,17 @@ function getSourceMapUrl(code: string, map: string): string | null {
 }
 
 function Output({store, compilerOutput}: Props): JSX.Element {
-  return (
-    <Suspense fallback={<Fallback />}>
-      <OutputContent store={store} compilerOutput={compilerOutput} />
-    </Suspense>
+  const [tabsOpen, setTabsOpen] = useState<Set<string>>(() => new Set(['JS']));
+  const [tabs, setTabs] = useState<Map<string, React.ReactNode>>(
+    () => new Map(),
   );
-}
+  useEffect(() => {
+    tabify(store.source, compilerOutput).then(tabs => {
+      setTabs(tabs);
+    });
+  }, [store.source, compilerOutput]);
 
-function OutputContent({store, compilerOutput}: Props): JSX.Element {
-  const [tabsOpen, setTabsOpen] = useState<Set<string>>(
-    () => new Set(['Output']),
-  );
-  const [activeTab, setActiveTab] = useState<string>('Output');
-
-  /*
-   * Update the active tab back to the output or errors tab when the compilation state
-   * changes between success/failure.
-   */
-  const [previousOutputKind, setPreviousOutputKind] = useState(
-    compilerOutput.kind,
-  );
-  const isFailure = compilerOutput.kind !== 'ok';
-
-  if (compilerOutput.kind !== previousOutputKind) {
-    setPreviousOutputKind(compilerOutput.kind);
-    if (isFailure) {
-      startTransition(() => {
-        addTransitionType(EXPAND_ACCORDION_TRANSITION);
-        setTabsOpen(prev => new Set(prev).add('Output'));
-        setActiveTab('Output');
-      });
-    }
-  }
-
-  const changedPasses: Set<string> = new Set(['Output', 'HIR']); // Initial and final passes should always be bold
+  const changedPasses: Set<string> = new Set(['JS', 'HIR']); // Initial and final passes should always be bold
   let lastResult: string = '';
   for (const [passName, results] of compilerOutput.results) {
     for (const result of results) {
@@ -298,40 +186,31 @@ function OutputContent({store, compilerOutput}: Props): JSX.Element {
       lastResult = currResult;
     }
   }
-  const tabs = use(tabifyCached(store, compilerOutput));
-
-  if (!store.showInternals) {
-    return (
-      <ViewTransition
-        update={{
-          [CONFIG_PANEL_TRANSITION]: 'container',
-          [TOGGLE_INTERNALS_TRANSITION]: '',
-          default: 'none',
-        }}>
-        <TabbedWindow
-          tabs={tabs}
-          activeTab={activeTab}
-          onTabChange={setActiveTab}
-        />
-      </ViewTransition>
-    );
-  }
 
   return (
-    <ViewTransition
-      update={{
-        [CONFIG_PANEL_TRANSITION]: 'accordion-container',
-        [TOGGLE_INTERNALS_TRANSITION]: '',
-        default: 'none',
-      }}>
-      <AccordionWindow
-        defaultTab={store.showInternals ? 'HIR' : 'Output'}
+    <>
+      <TabbedWindow
+        defaultTab="HIR"
         setTabsOpen={setTabsOpen}
         tabsOpen={tabsOpen}
         tabs={tabs}
         changedPasses={changedPasses}
       />
-    </ViewTransition>
+      {compilerOutput.kind === 'err' ? (
+        <div
+          className="flex flex-wrap absolute bottom-0 bg-white grow border-y border-grey-200 transition-all ease-in"
+          style={{width: 'calc(100vw - 650px)'}}>
+          <div className="w-full p-4 basis-full border-b">
+            <h2>COMPILER ERRORS</h2>
+          </div>
+          <pre
+            className="p-4 basis-full text-red-600 overflow-y-scroll whitespace-pre-wrap"
+            style={{width: 'calc(100vw - 650px)', height: '150px'}}>
+            <code>{compilerOutput.error.toString()}</code>
+          </pre>
+        </div>
+      ) : null}
+    </>
   );
 }
 
@@ -339,12 +218,10 @@ function TextTabContent({
   output,
   diff,
   showInfoPanel,
-  language,
 }: {
   output: string;
   diff: string | null;
   showInfoPanel: boolean;
-  language: string;
 }): JSX.Element {
   const [diffMode, setDiffMode] = useState(false);
   return (
@@ -383,29 +260,20 @@ function TextTabContent({
         <DiffEditor
           original={diff}
           modified={output}
-          loading={''}
           options={{
             ...monacoOptions,
-            scrollbar: {
-              vertical: 'hidden',
-            },
-            dimension: {
-              width: 0,
-              height: 0,
-            },
             readOnly: true,
             lineNumbers: 'off',
             glyphMargin: false,
             // Undocumented see https://github.com/Microsoft/vscode/issues/30795#issuecomment-410998882
-            overviewRulerLanes: 0,
+            lineDecorationsWidth: 0,
+            lineNumbersMinChars: 0,
           }}
         />
       ) : (
         <MonacoEditor
-          language={language ?? 'javascript'}
+          defaultLanguage="javascript"
           value={output}
-          loading={''}
-          className="monaco-editor-output"
           options={{
             ...monacoOptions,
             readOnly: true,

compiler/apps/playground/components/Editor/monacoOptions.ts

@@ -28,18 +28,5 @@ export const monacoOptions: Partial<EditorProps['options']> = {
 
   automaticLayout: true,
   wordWrap: 'on',
-  wrappingIndent: 'same',
-
-  tabSize: 2,
-};
-
-export const monacoConfigOptions: Partial<EditorProps['options']> = {
-  ...monacoOptions,
-  lineNumbers: 'off',
-  renderLineHighlight: 'none',
-  overviewRulerBorder: false,
-  overviewRulerLanes: 0,
-  fontSize: 12,
-  scrollBeyondLastLine: false,
-  glyphMargin: false,
+  wrappingIndent: 'deepIndent',
 };

compiler/apps/playground/components/Header.tsx

@@ -10,20 +10,14 @@ import {CheckIcon} from '@heroicons/react/solid';
 import clsx from 'clsx';
 import Link from 'next/link';
 import {useSnackbar} from 'notistack';
-import {
-  useState,
-  startTransition,
-  unstable_addTransitionType as addTransitionType,
-} from 'react';
+import {useState} from 'react';
 import {defaultStore} from '../lib/defaultStore';
 import {IconGitHub} from './Icons/IconGitHub';
 import Logo from './Logo';
-import {useStore, useStoreDispatch} from './StoreContext';
-import {TOGGLE_INTERNALS_TRANSITION} from '../lib/transitionTypes';
+import {useStoreDispatch} from './StoreContext';
 
 export default function Header(): JSX.Element {
   const [showCheck, setShowCheck] = useState(false);
-  const store = useStore();
   const dispatchStore = useStoreDispatch();
   const {enqueueSnackbar, closeSnackbar} = useSnackbar();
 
@@ -62,32 +56,6 @@ export default function Header(): JSX.Element {
         <p className="hidden select-none sm:block">React Compiler Playground</p>
       </div>
       <div className="flex items-center text-[15px] gap-4">
-        <div className="flex items-center gap-2">
-          <label className="show-internals relative inline-block w-[34px] h-5">
-            <input
-              type="checkbox"
-              checked={store.showInternals}
-              onChange={() =>
-                startTransition(() => {
-                  addTransitionType(TOGGLE_INTERNALS_TRANSITION);
-                  dispatchStore({type: 'toggleInternals'});
-                })
-              }
-              className="absolute opacity-0 cursor-pointer h-full w-full m-0"
-            />
-            <span
-              className={clsx(
-                'absolute inset-0 rounded-full cursor-pointer transition-all duration-250',
-                "before:content-[''] before:absolute before:w-4 before:h-4 before:left-0.5 before:bottom-0.5",
-                'before:bg-white before:rounded-full before:transition-transform before:duration-250',
-                'focus-within:shadow-[0_0_1px_#2196F3]',
-                store.showInternals
-                  ? 'bg-link before:translate-x-3.5'
-                  : 'bg-gray-300',
-              )}></span>
-          </label>
-          <span className="text-secondary">Show Internals</span>
-        </div>
         <button
           title="Reset Playground"
           aria-label="Reset Playground"

compiler/apps/playground/components/Icons/IconChevron.tsx

@@ -1,41 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import {memo} from 'react';
-
-export const IconChevron = memo<
-  JSX.IntrinsicElements['svg'] & {
-    /**
-     * The direction the arrow should point.
-     */
-    displayDirection: 'right' | 'left';
-  }
->(function IconChevron({className, displayDirection, ...props}) {
-  const rotationClass =
-    displayDirection === 'left' ? 'rotate-90' : '-rotate-90';
-  const classes = className ? `${rotationClass} ${className}` : rotationClass;
-
-  return (
-    <svg
-      className={classes}
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      {...props}>
-      <g fill="none" fillRule="evenodd" transform="translate(-446 -398)">
-        <path
-          fill="currentColor"
-          fillRule="nonzero"
-          d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z"
-          transform="translate(356.5 164.5)"
-        />
-        <polygon points="446 418 466 418 466 398 446 398" />
-      </g>
-    </svg>
-  );
-});

compiler/apps/playground/components/StoreContext.tsx

@@ -6,14 +6,10 @@
  */
 
 import type {Dispatch, ReactNode} from 'react';
-import {useState, useEffect, useReducer} from 'react';
+import {useEffect, useReducer} from 'react';
 import createContext from '../lib/createContext';
-import {emptyStore, defaultStore} from '../lib/defaultStore';
-import {
-  saveStore,
-  initStoreFromUrlOrLocalStorage,
-  type Store,
-} from '../lib/stores';
+import {emptyStore} from '../lib/defaultStore';
+import {saveStore, type Store} from '../lib/stores';
 
 const StoreContext = createContext<Store>();
 
@@ -34,20 +30,6 @@ export const useStoreDispatch = StoreDispatchContext.useContext;
  */
 export function StoreProvider({children}: {children: ReactNode}): JSX.Element {
   const [store, dispatch] = useReducer(storeReducer, emptyStore);
-  const [isPageReady, setIsPageReady] = useState<boolean>(false);
-
-  useEffect(() => {
-    let mountStore: Store;
-    try {
-      mountStore = initStoreFromUrlOrLocalStorage();
-    } catch (e) {
-      console.error('Failed to initialize store from URL or local storage', e);
-      mountStore = defaultStore;
-    }
-    dispatch({type: 'setStore', payload: {store: mountStore}});
-    setIsPageReady(true);
-  }, []);
-
   useEffect(() => {
     if (store !== emptyStore) {
       saveStore(store);
@@ -57,7 +39,7 @@ export function StoreProvider({children}: {children: ReactNode}): JSX.Element {
   return (
     <StoreContext.Provider value={store}>
       <StoreDispatchContext.Provider value={dispatch}>
-        {isPageReady ? children : null}
+        {children}
       </StoreDispatchContext.Provider>
     </StoreContext.Provider>
   );
@@ -71,19 +53,10 @@ type ReducerAction =
       };
     }
   | {
-      type: 'updateSource';
+      type: 'updateFile';
       payload: {
         source: string;
       };
-    }
-  | {
-      type: 'updateConfig';
-      payload: {
-        config: string;
-      };
-    }
-  | {
-      type: 'toggleInternals';
     };
 
 function storeReducer(store: Store, action: ReducerAction): Store {
@@ -92,28 +65,13 @@ function storeReducer(store: Store, action: ReducerAction): Store {
       const newStore = action.payload.store;
       return newStore;
     }
-    case 'updateSource': {
-      const source = action.payload.source;
+    case 'updateFile': {
+      const {source} = action.payload;
       const newStore = {
         ...store,
         source,
       };
       return newStore;
     }
-    case 'updateConfig': {
-      const config = action.payload.config;
-      const newStore = {
-        ...store,
-        config,
-      };
-      return newStore;
-    }
-    case 'toggleInternals': {
-      const newStore = {
-        ...store,
-        showInternals: !store.showInternals,
-      };
-      return newStore;
-    }
   }
 }

compiler/apps/playground/components/TabbedWindow.tsx

@@ -4,78 +4,103 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, {
-  startTransition,
-  useId,
-  unstable_ViewTransition as ViewTransition,
-  unstable_addTransitionType as addTransitionType,
-} from 'react';
-import clsx from 'clsx';
-import {TOGGLE_TAB_TRANSITION} from '../lib/transitionTypes';
 
-export default function TabbedWindow({
-  tabs,
-  activeTab,
-  onTabChange,
-}: {
-  tabs: Map<string, React.ReactNode>;
-  activeTab: string;
-  onTabChange: (tab: string) => void;
+import {Resizable} from 're-resizable';
+import React, {useCallback} from 'react';
+
+type TabsRecord = Map<string, React.ReactNode>;
+
+export default function TabbedWindow(props: {
+  defaultTab: string | null;
+  tabs: TabsRecord;
+  tabsOpen: Set<string>;
+  setTabsOpen: (newTab: Set<string>) => void;
+  changedPasses: Set<string>;
 }): React.ReactElement {
-  const id = useId();
-  const transitionName = `tab-highlight-${id}`;
-
-  const handleTabChange = (tab: string): void => {
-    startTransition(() => {
-      addTransitionType(TOGGLE_TAB_TRANSITION);
-      onTabChange(tab);
-    });
-  };
-
-  return (
-    <div className="flex-1 min-w-[550px] sm:min-w-0">
-      <div className="flex flex-col h-full max-w-full">
-        <div className="flex p-2 flex-shrink-0">
-          {Array.from(tabs.keys()).map(tab => {
-            const isActive = activeTab === tab;
-            return (
-              <button
-                key={tab}
-                onClick={() => handleTabChange(tab)}
-                className={clsx(
-                  'transition-transform py-1.5 px-1.5 xs:px-3 sm:px-4 rounded-full text-sm relative',
-                  isActive ? 'text-link' : 'hover:bg-primary/5',
-                )}>
-                {isActive && (
-                  <ViewTransition
-                    name={transitionName}
-                    enter={{default: 'none'}}
-                    exit={{default: 'none'}}
-                    share={{
-                      [TOGGLE_TAB_TRANSITION]: 'tab-highlight',
-                      default: 'none',
-                    }}
-                    update={{default: 'none'}}>
-                    <div className="absolute inset-0 bg-highlight rounded-full" />
-                  </ViewTransition>
-                )}
-                <ViewTransition
-                  enter={{default: 'none'}}
-                  exit={{default: 'none'}}
-                  update={{
-                    [TOGGLE_TAB_TRANSITION]: 'tab-text',
-                    default: 'none',
-                  }}>
-                  <span className="relative z-1">{tab}</span>
-                </ViewTransition>
-              </button>
-            );
-          })}
-        </div>
-        <div className="flex-1 overflow-hidden w-full h-full">
-          {tabs.get(activeTab)}
-        </div>
+  if (props.tabs.size === 0) {
+    return (
+      <div
+        className="flex items-center justify-center"
+        style={{width: 'calc(100vw - 650px)'}}>
+        No compiler output detected, see errors below
       </div>
+    );
+  }
+  return (
+    <div className="flex flex-row">
+      {Array.from(props.tabs.keys()).map(name => {
+        return (
+          <TabbedWindowItem
+            name={name}
+            key={name}
+            tabs={props.tabs}
+            tabsOpen={props.tabsOpen}
+            setTabsOpen={props.setTabsOpen}
+            hasChanged={props.changedPasses.has(name)}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+function TabbedWindowItem({
+  name,
+  tabs,
+  tabsOpen,
+  setTabsOpen,
+  hasChanged,
+}: {
+  name: string;
+  tabs: TabsRecord;
+  tabsOpen: Set<string>;
+  setTabsOpen: (newTab: Set<string>) => void;
+  hasChanged: boolean;
+}): React.ReactElement {
+  const isShow = tabsOpen.has(name);
+
+  const toggleTabs = useCallback(() => {
+    const nextState = new Set(tabsOpen);
+    if (nextState.has(name)) {
+      nextState.delete(name);
+    } else {
+      nextState.add(name);
+    }
+    setTabsOpen(nextState);
+  }, [tabsOpen, name, setTabsOpen]);
+
+  // Replace spaces with non-breaking spaces
+  const displayName = name.replace(/ /g, '\u00A0');
+
+  return (
+    <div key={name} className="flex flex-row">
+      {isShow ? (
+        <Resizable className="border-r" minWidth={550} enable={{right: true}}>
+          <h2
+            title="Minimize tab"
+            aria-label="Minimize tab"
+            onClick={toggleTabs}
+            className={`p-4 duration-150 ease-in border-b cursor-pointer border-grey-200 ${
+              hasChanged ? 'font-bold' : 'font-light'
+            } text-secondary hover:text-link`}>
+            - {displayName}
+          </h2>
+          {tabs.get(name) ?? <div>No output for {name}</div>}
+        </Resizable>
+      ) : (
+        <div className="relative items-center h-full px-1 py-6 align-middle border-r border-grey-200">
+          <button
+            title={`Expand compiler tab: ${name}`}
+            aria-label={`Expand compiler tab: ${name}`}
+            style={{transform: 'rotate(90deg) translate(-50%)'}}
+            onClick={toggleTabs}
+            className={`flex-grow-0 w-5 transition-colors duration-150 ease-in ${
+              hasChanged ? 'font-bold' : 'font-light'
+            } text-secondary hover:text-link`}>
+            {displayName}
+          </button>
+        </div>
+      )}
     </div>
   );
 }

compiler/apps/playground/lib/compilation.ts

@@ -1,308 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import {parse as babelParse, ParseResult} from '@babel/parser';
-import * as HermesParser from 'hermes-parser';
-import * as t from '@babel/types';
-import BabelPluginReactCompiler, {
-  CompilerError,
-  CompilerErrorDetail,
-  CompilerDiagnostic,
-  Effect,
-  ErrorCategory,
-  parseConfigPragmaForTests,
-  ValueKind,
-  type Hook,
-  PluginOptions,
-  CompilerPipelineValue,
-  parsePluginOptions,
-  printReactiveFunctionWithOutlined,
-  printFunctionWithOutlined,
-  type LoggerEvent,
-} from 'babel-plugin-react-compiler';
-import {transformFromAstSync} from '@babel/core';
-import type {
-  CompilerOutput,
-  CompilerTransformOutput,
-  PrintedCompilerPipelineValue,
-} from '../components/Editor/Output';
-
-function parseInput(
-  input: string,
-  language: 'flow' | 'typescript',
-): ParseResult<t.File> {
-  // Extract the first line to quickly check for custom test directives
-  if (language === 'flow') {
-    return HermesParser.parse(input, {
-      babel: true,
-      flow: 'all',
-      sourceType: 'module',
-      enableExperimentalComponentSyntax: true,
-    });
-  } else {
-    return babelParse(input, {
-      plugins: ['typescript', 'jsx'],
-      sourceType: 'module',
-    }) as ParseResult<t.File>;
-  }
-}
-
-function invokeCompiler(
-  source: string,
-  language: 'flow' | 'typescript',
-  options: PluginOptions,
-): CompilerTransformOutput {
-  const ast = parseInput(source, language);
-  let result = transformFromAstSync(ast, source, {
-    filename: '_playgroundFile.js',
-    highlightCode: false,
-    retainLines: true,
-    plugins: [[BabelPluginReactCompiler, options]],
-    ast: true,
-    sourceType: 'module',
-    configFile: false,
-    sourceMaps: true,
-    babelrc: false,
-  });
-  if (result?.ast == null || result?.code == null || result?.map == null) {
-    throw new Error('Expected successful compilation');
-  }
-  return {
-    code: result.code,
-    sourceMaps: result.map,
-    language,
-  };
-}
-
-const COMMON_HOOKS: Array<[string, Hook]> = [
-  [
-    'useFragment',
-    {
-      valueKind: ValueKind.Frozen,
-      effectKind: Effect.Freeze,
-      noAlias: true,
-      transitiveMixedData: true,
-    },
-  ],
-  [
-    'usePaginationFragment',
-    {
-      valueKind: ValueKind.Frozen,
-      effectKind: Effect.Freeze,
-      noAlias: true,
-      transitiveMixedData: true,
-    },
-  ],
-  [
-    'useRefetchableFragment',
-    {
-      valueKind: ValueKind.Frozen,
-      effectKind: Effect.Freeze,
-      noAlias: true,
-      transitiveMixedData: true,
-    },
-  ],
-  [
-    'useLazyLoadQuery',
-    {
-      valueKind: ValueKind.Frozen,
-      effectKind: Effect.Freeze,
-      noAlias: true,
-      transitiveMixedData: true,
-    },
-  ],
-  [
-    'usePreloadedQuery',
-    {
-      valueKind: ValueKind.Frozen,
-      effectKind: Effect.Freeze,
-      noAlias: true,
-      transitiveMixedData: true,
-    },
-  ],
-];
-
-function parseOptions(
-  source: string,
-  mode: 'compiler' | 'linter',
-  configOverrides: string,
-): PluginOptions {
-  // Extract the first line to quickly check for custom test directives
-  const pragma = source.substring(0, source.indexOf('\n'));
-
-  const parsedPragmaOptions = parseConfigPragmaForTests(pragma, {
-    compilationMode: 'infer',
-    environment:
-      mode === 'linter'
-        ? {
-            // enabled in compiler
-            validateRefAccessDuringRender: false,
-            // enabled in linter
-            validateNoSetStateInRender: true,
-            validateNoSetStateInEffects: true,
-            validateNoJSXInTryStatements: true,
-            validateNoImpureFunctionsInRender: true,
-            validateStaticComponents: true,
-            validateNoFreezingKnownMutableFunctions: true,
-            validateNoVoidUseMemo: true,
-          }
-        : {
-            /* use defaults for compiler mode */
-          },
-  });
-
-  // Parse config overrides from config editor
-  let configOverrideOptions: any = {};
-  const configMatch = configOverrides.match(/^\s*import.*?\n\n\((.*)\)/s);
-  if (configOverrides.trim()) {
-    if (configMatch && configMatch[1]) {
-      const configString = configMatch[1].replace(/satisfies.*$/, '').trim();
-      configOverrideOptions = new Function(`return (${configString})`)();
-    } else {
-      throw new Error('Invalid override format');
-    }
-  }
-
-  const opts: PluginOptions = parsePluginOptions({
-    ...parsedPragmaOptions,
-    ...configOverrideOptions,
-    environment: {
-      ...parsedPragmaOptions.environment,
-      ...configOverrideOptions.environment,
-      customHooks: new Map([...COMMON_HOOKS]),
-    },
-  });
-
-  return opts;
-}
-
-export function compile(
-  source: string,
-  mode: 'compiler' | 'linter',
-  configOverrides: string,
-): [CompilerOutput, 'flow' | 'typescript', PluginOptions | null] {
-  const results = new Map<string, Array<PrintedCompilerPipelineValue>>();
-  const error = new CompilerError();
-  const otherErrors: Array<CompilerErrorDetail | CompilerDiagnostic> = [];
-  const upsert: (result: PrintedCompilerPipelineValue) => void = result => {
-    const entry = results.get(result.name);
-    if (Array.isArray(entry)) {
-      entry.push(result);
-    } else {
-      results.set(result.name, [result]);
-    }
-  };
-  let language: 'flow' | 'typescript';
-  if (source.match(/\@flow/)) {
-    language = 'flow';
-  } else {
-    language = 'typescript';
-  }
-  let transformOutput;
-
-  let baseOpts: PluginOptions | null = null;
-  try {
-    baseOpts = parseOptions(source, mode, configOverrides);
-  } catch (err) {
-    error.details.push(
-      new CompilerErrorDetail({
-        category: ErrorCategory.Config,
-        reason: `Unexpected failure when transforming configs! \n${err}`,
-        loc: null,
-        suggestions: null,
-      }),
-    );
-  }
-  if (baseOpts) {
-    try {
-      const logIR = (result: CompilerPipelineValue): void => {
-        switch (result.kind) {
-          case 'ast': {
-            break;
-          }
-          case 'hir': {
-            upsert({
-              kind: 'hir',
-              fnName: result.value.id,
-              name: result.name,
-              value: printFunctionWithOutlined(result.value),
-            });
-            break;
-          }
-          case 'reactive': {
-            upsert({
-              kind: 'reactive',
-              fnName: result.value.id,
-              name: result.name,
-              value: printReactiveFunctionWithOutlined(result.value),
-            });
-            break;
-          }
-          case 'debug': {
-            upsert({
-              kind: 'debug',
-              fnName: null,
-              name: result.name,
-              value: result.value,
-            });
-            break;
-          }
-          default: {
-            const _: never = result;
-            throw new Error(`Unhandled result ${result}`);
-          }
-        }
-      };
-      // Add logger options to the parsed options
-      const opts = {
-        ...baseOpts,
-        logger: {
-          debugLogIRs: logIR,
-          logEvent: (_filename: string | null, event: LoggerEvent): void => {
-            if (event.kind === 'CompileError') {
-              otherErrors.push(event.detail);
-            }
-          },
-        },
-      };
-      transformOutput = invokeCompiler(source, language, opts);
-    } catch (err) {
-      /**
-       * error might be an invariant violation or other runtime error
-       * (i.e. object shape that is not CompilerError)
-       */
-      if (err instanceof CompilerError && err.details.length > 0) {
-        error.merge(err);
-      } else {
-        /**
-         * Handle unexpected failures by logging (to get a stack trace)
-         * and reporting
-         */
-        error.details.push(
-          new CompilerErrorDetail({
-            category: ErrorCategory.Invariant,
-            reason: `Unexpected failure when transforming input! \n${err}`,
-            loc: null,
-            suggestions: null,
-          }),
-        );
-      }
-    }
-  }
-  // Only include logger errors if there weren't other errors
-  if (!error.hasErrors() && otherErrors.length !== 0) {
-    otherErrors.forEach(e => error.details.push(e));
-  }
-  if (error.hasErrors() || !transformOutput) {
-    return [{kind: 'err', results, error}, language, baseOpts];
-  }
-  return [
-    {kind: 'ok', results, transformOutput, errors: error.details},
-    language,
-    baseOpts,
-  ];
-}

compiler/apps/playground/lib/defaultStore.ts

@@ -13,21 +13,10 @@ export default function MyApp() {
 }
 `;
 
-export const defaultConfig = `\
-import type { PluginOptions } from 'babel-plugin-react-compiler/dist';
-
-({
-  //compilationMode: "all"
-} satisfies PluginOptions);`;
-
 export const defaultStore: Store = {
   source: index,
-  config: defaultConfig,
-  showInternals: false,
 };
 
 export const emptyStore: Store = {
   source: '',
-  config: '',
-  showInternals: false,
 };

compiler/apps/playground/lib/reactCompilerMonacoDiagnostics.ts

@@ -7,10 +7,9 @@
 
 import {Monaco} from '@monaco-editor/react';
 import {
-  CompilerDiagnostic,
   CompilerErrorDetail,
   ErrorSeverity,
-} from 'babel-plugin-react-compiler';
+} from 'babel-plugin-react-compiler/src';
 import {MarkerSeverity, type editor} from 'monaco-editor';
 
 function mapReactCompilerSeverityToMonaco(
@@ -26,46 +25,38 @@ function mapReactCompilerSeverityToMonaco(
 }
 
 function mapReactCompilerDiagnosticToMonacoMarker(
-  detail: CompilerErrorDetail | CompilerDiagnostic,
+  detail: CompilerErrorDetail,
   monaco: Monaco,
-  source: string,
 ): editor.IMarkerData | null {
-  const loc = detail.primaryLocation();
-  if (loc == null || typeof loc === 'symbol') {
+  if (detail.loc == null || typeof detail.loc === 'symbol') {
     return null;
   }
   const severity = mapReactCompilerSeverityToMonaco(detail.severity, monaco);
-  let message = detail.printErrorMessage(source, {eslint: true});
+  let message = detail.printErrorMessage();
   return {
     severity,
     message,
-    startLineNumber: loc.start.line,
-    startColumn: loc.start.column + 1,
-    endLineNumber: loc.end.line,
-    endColumn: loc.end.column + 1,
+    startLineNumber: detail.loc.start.line,
+    startColumn: detail.loc.start.column + 1,
+    endLineNumber: detail.loc.end.line,
+    endColumn: detail.loc.end.column + 1,
   };
 }
 
 type ReactCompilerMarkerConfig = {
   monaco: Monaco;
   model: editor.ITextModel;
-  details: Array<CompilerErrorDetail | CompilerDiagnostic>;
-  source: string;
+  details: Array<CompilerErrorDetail>;
 };
 let decorations: Array<string> = [];
 export function renderReactCompilerMarkers({
   monaco,
   model,
   details,
-  source,
 }: ReactCompilerMarkerConfig): void {
-  const markers: Array<editor.IMarkerData> = [];
+  let markers = [];
   for (const detail of details) {
-    const marker = mapReactCompilerDiagnosticToMonacoMarker(
-      detail,
-      monaco,
-      source,
-    );
+    const marker = mapReactCompilerDiagnosticToMonacoMarker(detail, monaco);
     if (marker == null) {
       continue;
     }

compiler/apps/playground/lib/stores/store.ts

@@ -10,20 +10,18 @@ import {
   compressToEncodedURIComponent,
   decompressFromEncodedURIComponent,
 } from 'lz-string';
-import {defaultStore, defaultConfig} from '../defaultStore';
+import {defaultStore} from '../defaultStore';
 
 /**
  * Global Store for Playground
  */
 export interface Store {
   source: string;
-  config: string;
-  showInternals: boolean;
 }
 export function encodeStore(store: Store): string {
   return compressToEncodedURIComponent(JSON.stringify(store));
 }
-export function decodeStore(hash: string): any {
+export function decodeStore(hash: string): Store {
   return JSON.parse(decompressFromEncodedURIComponent(hash));
 }
 
@@ -64,14 +62,8 @@ export function initStoreFromUrlOrLocalStorage(): Store {
    */
   if (!encodedSource) return defaultStore;
 
-  const raw: any = decodeStore(encodedSource);
+  const raw = decodeStore(encodedSource);
 
   invariant(isValidStore(raw), 'Invalid Store');
-
-  // Make sure all properties are populated
-  return {
-    source: raw.source,
-    config: 'config' in raw && raw['config'] ? raw.config : defaultConfig,
-    showInternals: 'showInternals' in raw ? raw.showInternals : false,
-  };
+  return raw;
 }

compiler/apps/playground/lib/transitionTypes.ts

@@ -1,11 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-export const CONFIG_PANEL_TRANSITION = 'config-panel';
-export const TOGGLE_TAB_TRANSITION = 'toggle-tab';
-export const TOGGLE_INTERNALS_TRANSITION = 'toggle-internals';
-export const EXPAND_ACCORDION_TRANSITION = 'open-accordion';

compiler/apps/playground/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

compiler/apps/playground/next.config.js

@@ -11,7 +11,6 @@ const path = require('path');
 const nextConfig = {
   experimental: {
     reactCompiler: true,
-    viewTransition: true,
   },
   reactStrictMode: true,
   webpack: (config, options) => {

compiler/apps/playground/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "cd ../.. && concurrently --kill-others -n compiler,runtime,playground \"yarn workspace babel-plugin-react-compiler run watch\" \"yarn workspace react-compiler-runtime run watch\" \"wait-on packages/babel-plugin-react-compiler/dist/index.js && cd apps/playground && NODE_ENV=development next dev\"",
-    "build:compiler": "cd ../.. && concurrently -n compiler,runtime \"yarn workspace babel-plugin-react-compiler run build --dts\" \"yarn workspace react-compiler-runtime run build\"",
+    "build:compiler": "cd ../.. && concurrently -n compiler,runtime \"yarn workspace babel-plugin-react-compiler run build\" \"yarn workspace react-compiler-runtime run build\"",
     "build": "yarn build:compiler && next build",
     "postbuild": "node ./scripts/downloadFonts.js",
     "preinstall": "cd ../.. && yarn install --frozen-lockfile",
@@ -26,39 +26,34 @@
     "@babel/traverse": "^7.18.9",
     "@babel/types": "7.26.3",
     "@heroicons/react": "^1.0.6",
-    "@monaco-editor/react": "^4.8.0-rc.2",
-    "@playwright/test": "^1.56.1",
+    "@monaco-editor/react": "^4.4.6",
+    "@playwright/test": "^1.42.1",
     "@use-gesture/react": "^10.2.22",
     "hermes-eslint": "^0.25.0",
     "hermes-parser": "^0.25.0",
     "invariant": "^2.2.4",
-    "lru-cache": "^11.2.2",
     "lz-string": "^1.5.0",
     "monaco-editor": "^0.52.0",
-    "next": "15.5.9",
+    "next": "^15.2.0-canary.64",
     "notistack": "^3.0.0-alpha.7",
     "prettier": "^3.3.3",
     "pretty-format": "^29.3.1",
     "re-resizable": "^6.9.16",
-    "react": "19.2.3",
-    "react-dom": "19.2.3"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@types/node": "18.11.9",
-    "@types/react": "19.2",
-    "@types/react-dom": "19.2",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "autoprefixer": "^10.4.13",
     "clsx": "^1.2.1",
     "concurrently": "^7.4.0",
     "eslint": "^8.28.0",
-    "eslint-config-next": "15.5.2",
+    "eslint-config-next": "^15.0.1",
     "monaco-editor-webpack-plugin": "^7.1.0",
     "postcss": "^8.4.31",
     "tailwindcss": "^3.2.4",
     "wait-on": "^7.2.0"
-  },
-  "resolutions": {
-    "@types/react": "19.2",
-    "@types/react-dom": "19.2"
   }
 }

compiler/apps/playground/playwright.config.js

@@ -55,16 +55,12 @@ export default defineConfig({
     // contextOptions: {
     //   ignoreHTTPSErrors: true,
     // },
-    viewport: {width: 1920, height: 1080},
   },
 
   projects: [
     {
       name: 'chromium',
-      use: {
-        ...devices['Desktop Chrome'],
-        viewport: {width: 1920, height: 1080},
-      },
+      use: {...devices['Desktop Chrome']},
     },
     // {
     //   name: 'Desktop Firefox',

compiler/apps/playground/scripts/link-compiler.sh

@@ -8,8 +8,8 @@ set -eo pipefail
 
 HERE=$(pwd)
 
-cd ../../packages/react-compiler-runtime && yarn --silent link && cd "$HERE"
-cd ../../packages/babel-plugin-react-compiler && yarn --silent link && cd "$HERE"
+cd ../../packages/react-compiler-runtime && yarn --silent link && cd $HERE
+cd ../../packages/babel-plugin-react-compiler && yarn --silent link && cd $HERE
 
 yarn --silent link babel-plugin-react-compiler
 yarn --silent link react-compiler-runtime

compiler/apps/playground/styles/globals.css

@@ -69,75 +69,3 @@
     scrollbar-width: none; /* Firefox */
   }
 }
-
-::view-transition-old(.slide-in) {
-  animation-name: slideOutLeft;
-}
-::view-transition-new(.slide-in) {
-  animation-name: slideInLeft;
-}
-::view-transition-group(.slide-in) {
-  z-index: 1;
-}
-::view-transition-old(.slide-out) {
-  animation-name: slideOutLeft;
-}
-::view-transition-new(.slide-out) {
-  animation-name: slideInLeft;
-}
-::view-transition-group(.slide-out) {
-  z-index: 1;
-}
-
-@keyframes slideOutLeft {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(-100%);
-  }
-}
-@keyframes slideInLeft {
-  from {
-    transform: translateX(-100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-::view-transition-old(.container),
-::view-transition-new(.container) {
-  height: 100%;
-}
-
-::view-transition-old(.accordion-container),
-::view-transition-new(.accordion-container) {
-  height: 100%;
-  object-fit: none;
-  object-position: left;
-}
-
-::view-transition-old(.tab-highlight),
-::view-transition-new(.tab-highlight) {
-  height: 100%;
-}
-::view-transition-group(.tab-text) {
-	z-index: 1;
-}
-
-::view-transition-old(.expand-accordion),
-::view-transition-new(.expand-accordion) {
-  width: auto;
-}
-::view-transition-group(.expand-accordion) {
-  overflow: clip;
-}
-
-/**
- * For some reason, the original Monaco editor is still visible to the
- * left of the DiffEditor. This is a workaround for better visual clarity.
- */
-.monaco-diff-editor .editor.original{
-  visibility: hidden !important;
-}

compiler/apps/playground/tsconfig.json

@@ -6,9 +6,6 @@
       "dom.iterable",
       "esnext"
     ],
-    "types": [
-      "react/experimental"
-    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,

compiler/docs/DEVELOPMENT_GUIDE.md

@@ -17,32 +17,7 @@ yarn snap:build
 yarn snap --watch
 ```
 
-`snap` is our custom test runner, which creates "golden" test files that have the expected output for each input fixture, as well as the results of executing a specific input (or sequence of inputs) in both the uncompiled and compiler versions of the input.
-
-### Compiling Arbitrary Files
-
-You can compile any file (not just fixtures) using:
-
-```sh
-# Compile a file and see the output
-yarn snap compile <path>
-
-# Compile with debug output to see the state after each compiler pass
-# This is an alternative to `yarn snap -d -p <pattern>` when you don't have a fixture file yet
-yarn snap compile --debug <path>
-```
-
-### Minimizing Test Cases
-
-To reduce a failing test case to its minimal reproduction:
-
-```sh
-# Minimize a file that causes a compiler error
-yarn snap minimize <path>
-
-# Minimize and update the file in-place
-yarn snap minimize --update <path>
-```
+`snap` is our custom test runner, which creates "golden" test files that have the expected output for each input fixture, as well as the results of executing a specific input (or sequence of inputs) in both the uncompiled and compiler versions of the input. 
 
 When contributing changes, we prefer to:
 * Add one or more fixtures that demonstrate the current compiled output for a particular combination of input and configuration. Send this as a first PR.

compiler/fault-tolerance-overview.md

@@ -1,333 +0,0 @@
-## React Compiler Fault Tolerance
-
-Update React Compiler (@compiler/ directory) to always run all passes and return either the transformed code (if no error) or a list of one or more compilation errors. 
-
-## Background
-
-Currently React Compiler runs through a series of passes in Pipeline.ts. If an error occurs in a pass the compiler will generally either throw the error in the pass where it occurs, or return a Result<_, CompilerError> which is then unwrapped in Pipeline.ts, throwing there. This means that a single error that triggers early can prevent later validation from running, meaning the user has to first fix one error in order to see another.
-
-## New Approach
-
-The compiler should always run all passes in the pipeline, up to and including CodegenReactiveFunction. During this process it should accumulate errors. If at the end of compilation there were no accumulated errors, return `Ok(generatedfunction)`. Else, return `Err(CompilerError)` with *all* the accumulated errors.
-
-Note that some errors may continue to cause an eager bailout:
-* If an error is not an instanceof CompilerError, throw it as it occurs
-* If an error is a CompilerError invariant, throw it as it occurs since this represents a truly exceptional, unexpected case
-
-## Detailed Design
-
-* The Environment needs a way to record errors as compilation proceeds. This should generally store the error (and log, if a logger is configured), but should immediately throw if the error is an invariant (see above).
-* BuildHIR should always produce an HIR without error. For syntax forms that are unsupported (currently throwing a Todo error), we should instead construct record the todo error on the environment, and construct a partial HIR. The exact form of the partial HIR can be situation specific:
-  * `var` is currently unsupported, but we could pretend it was `let`
-  * `finally` blocks are unsupported, we could just prune them, or move the code after the try/catch (put the finally logic in the consequent)
-  * This may mean updating the HIR to allow representing partial code
-  * `eval()` can just be an Unsupported InstructionValue variant
-* All of the passes need to be updated to stop returning Result or CompilerError, and instead record their errors on the environment. They should always be able to proceed even in the presence of errors. For example, in InferMutationAliasingEffects if we discover that the code mutates a frozen value, we can record this as an error and then just pretend the mutation didn't happen - ie construct a scope as if the mutating code was not a mutation after all.
-* Finally, the end of the pipeline should check for errors and either turn `Ok(GeneratedFunction)` or `Err(aggregatedErrors)`. The code calling into the pipeline then needs to handle this appropriately.
-
-## Detailed Plan
-
-### Phase 1: Environment Error Accumulation Infrastructure
-
-Add error accumulation to the `Environment` class so that any pass can record errors during compilation without halting.
-
-- [x] **1.1 Add error accumulator to Environment** (`src/HIR/Environment.ts`)
-  - Add a `#errors: CompilerError` field, initialized in the constructor
-  - Add a `recordError(error: CompilerDiagnostic | CompilerErrorDetail)` method that:
-    - If an Invariant-category detail, immediately throw it
-    - Otherwise, push the diagnostic/detail onto `#errors` (and log via `this.logger` if configured)
-  - Add a `recordErrors(error: CompilerError)` method that calls `recordError()` for each of the details on the given error.
-  - Add a `hasErrors(): boolean` getter
-  - Add a `aggregateErrors(): CompilerError` method that returns the accumulated error object
-  - Consider whether `recordError` should accept the same options as `CompilerError.push()` for convenience (reason, description, severity, loc, etc.)
-
-- [x] **1.2 Add a `tryRecord` helper on Environment** (`src/HIR/Environment.ts`)
-  - Add a `tryRecord(fn: () => void): void` method that wraps a callback in try/catch:
-    - If `fn` throws a `CompilerError` that is NOT an invariant, record it via `recordError`
-    - If `fn` throws a non-CompilerError or a CompilerError invariant, re-throw
-  - This helper is the migration path for passes that currently throw: wrap their call in `env.tryRecord(() => pass(hir))` so exceptions become recorded errors
-
-### Phase 2: Update Pipeline.ts to Accumulate Errors
-
-Change `runWithEnvironment` to run all passes and check for errors at the end instead of letting exceptions propagate.
-
-- [x] **2.1 Change `runWithEnvironment` return type** (`src/Entrypoint/Pipeline.ts`)
-  - Change return type from `CodegenFunction` to `Result<CodegenFunction, CompilerError>`
-  - At the end of the pipeline, check `env.hasErrors()`:
-    - If no errors: return `Ok(ast)`
-    - If errors: return `Err(env.aggregateErrors())`
-
-- [x] **2.2 Update `compileFn` to propagate the Result** (`src/Entrypoint/Pipeline.ts`)
-  - Change `compileFn` return type from `CodegenFunction` to `Result<CodegenFunction, CompilerError>`
-  - Propagate the Result from `runWithEnvironment`
-
-- [x] **2.3 Update `run` to propagate the Result** (`src/Entrypoint/Pipeline.ts`)
-  - Same change for the internal `run` function
-
-- [x] **2.4 Update callers in Program.ts** (`src/Entrypoint/Program.ts`)
-  - In `tryCompileFunction`, change from try/catch around `compileFn` to handling the `Result`:
-    - If `Ok(codegenFn)`: return the compiled function
-    - If `Err(compilerError)`: return `{kind: 'error', error: compilerError}`
-    - Keep the try/catch only for truly unexpected (non-CompilerError) exceptions and invariants
-  - The existing `handleError`/`logError`/`panicThreshold` logic in `processFn` should continue to work unchanged since it already handles `CompilerError` instances
-
-### Phase 3: Update BuildHIR (lower) to Always Produce HIR
-
-Currently `lower()` returns `Result<HIRFunction, CompilerError>`. It already accumulates errors internally via `builder.errors`, but returns `Err` when errors exist. Change it to always return `Ok(hir)` while recording errors on the environment.
-
-- [x] **3.1 Change `lower` to always return HIRFunction** (`src/HIR/BuildHIR.ts`)
-  - Change return type from `Result<HIRFunction, CompilerError>` to `HIRFunction`
-  - Instead of returning `Err(builder.errors)` at line 227-229, record errors on `env` via `env.recordErrors(builder.errors)` and return the (partial) HIR
-  - Update the pipeline to call `lower(func, env)` directly instead of `lower(func, env).unwrap()`
-  - Added try/catch around body lowering to catch thrown CompilerErrors (e.g., from `resolveBinding`) and record them
-
-- [x] **3.2 Handle `var` declarations as `let`** (`src/HIR/BuildHIR.ts`, line ~855)
-  - Record the Todo error, then treat `var` as `let` and continue lowering (instead of skipping the declaration)
-
-- [x] **3.3 Handle `try/finally` by pruning `finally`** (`src/HIR/BuildHIR.ts`, lines ~1281-1296)
-  - Already handled: `try` without `catch` pushes error and returns; `try` with `finally` pushes error and continues with `try/catch` portion only
-
-- [x] **3.4 Handle `eval()` via UnsupportedNode** (`src/HIR/BuildHIR.ts`, line ~3568)
-  - Already handled: records error via `builder.errors.push()` and continues
-
-- [x] **3.5 Handle `with` statement via UnsupportedNode** (`src/HIR/BuildHIR.ts`, line ~1382)
-  - Already handled: records error and emits `UnsupportedNode`
-
-- [x] **3.6 Handle inline `class` declarations** (`src/HIR/BuildHIR.ts`, line ~1402)
-  - Already handled: records error and emits `UnsupportedNode`
-
-- [x] **3.7 Handle remaining Todo errors in expression lowering** (`src/HIR/BuildHIR.ts`)
-  - Already handled: all ~60 error sites use `builder.errors.push()` to accumulate errors. The try/catch around body lowering provides a safety net for any that still throw.
-
-- [x] **3.8 Handle `throw` inside `try/catch`** (`src/HIR/BuildHIR.ts`, line ~284)
-  - Already handled: records error via `builder.errors.push()` and continues
-
-- [x] **3.9 Handle `for` loops with missing test or expression init** (`src/HIR/BuildHIR.ts`, lines ~559, ~632)
-  - For `for(;;)` (missing test): emit `true` as the test expression and add a branch terminal
-  - For empty init (`for (; ...)`): add a placeholder instruction to avoid invariant about empty blocks
-  - For expression init (`for (expr; ...)`): record error and lower the expression as best-effort
-  - Changed `'unsupported'` terminal to `'goto'` terminal for non-variable init to maintain valid CFG structure
-
-- [x] **3.10 Handle nested function lowering failures** (`src/HIR/BuildHIR.ts`, `lowerFunction` at line ~3504)
-  - `lowerFunction()` now always returns `LoweredFunction` since `lower()` always returns `HIRFunction`
-  - Errors from nested functions are recorded on the shared environment
-  - Removed the `null` return case and the corresponding `UnsupportedNode` fallback in callers
-
-- [x] **3.11 Handle unreachable functions in `build()`** (`src/HIR/HIRBuilder.ts`, `build()`)
-  - Changed `CompilerError.throwTodo()` for unreachable code with hoisted declarations to `this.errors.push()` to allow HIR construction to complete
-
-- [x] **3.12 Handle duplicate fbt tags** (`src/HIR/BuildHIR.ts`, line ~2279)
-  - Changed `CompilerError.throwDiagnostic()` to `builder.errors.pushDiagnostic()` to record instead of throw
-
-### Phase 4: Update Validation Passes
-
-All validation passes need to record errors on the environment instead of returning `Result` or throwing. They should still detect the same problems, but the pipeline should continue after each one.
-
-#### Pattern A passes (currently return `Result`, called with `.unwrap()`)
-
-These passes already accumulate errors internally and return `Result<void, CompilerError>`. The change is: instead of returning the Result, record errors on `env` and return void. Remove the `.unwrap()` call in Pipeline.ts.
-
-- [x] **4.1 `validateHooksUsage`** (`src/Validation/ValidateHooksUsage.ts`)
-  - Change signature from `(fn: HIRFunction): Result<void, CompilerError>` to `(fn: HIRFunction): void`
-  - Record errors on `fn.env` instead of returning `errors.asResult()`
-  - Update Pipeline.ts call site (line 211): remove `.unwrap()`
-
-- [x] **4.2 `validateNoCapitalizedCalls`** (`src/Validation/ValidateNoCapitalizedCalls.ts`)
-  - Change signature to return void
-  - Fix the hybrid pattern: the direct `CallExpression` path currently throws via `CompilerError.throwInvalidReact()` — change to record on env
-  - The `MethodCall` path already accumulates — change to record on env
-  - Update Pipeline.ts call site (line 214): remove `.unwrap()`
-
-- [x] **4.3 `validateUseMemo`** (`src/Validation/ValidateUseMemo.ts`)
-  - Change signature to return void
-  - Record hard errors on env instead of returning `errors.asResult()`
-  - The soft `voidMemoErrors` path already uses `env.logErrors()` — keep as-is or also record
-  - Update Pipeline.ts call site (line 170): remove `.unwrap()`
-
-- [x] **4.4 `dropManualMemoization`** (`src/Inference/DropManualMemoization.ts`)
-  - Change signature to return void
-  - Record errors on env instead of returning `errors.asResult()`
-  - Update Pipeline.ts call site (line 178): remove `.unwrap()`
-
-- [x] **4.5 `validateNoRefAccessInRender`** (`src/Validation/ValidateNoRefAccessInRender.ts`)
-  - Change signature to return void
-  - Record errors on env instead of returning Result
-  - Update Pipeline.ts call site (line 275): remove `.unwrap()`
-
-- [x] **4.6 `validateNoSetStateInRender`** (`src/Validation/ValidateNoSetStateInRender.ts`)
-  - Change signature to return void
-  - Record errors on env
-  - Update Pipeline.ts call site (line 279): remove `.unwrap()`
-
-- [x] **4.7 `validateNoImpureFunctionsInRender`** (`src/Validation/ValidateNoImpureFunctionsInRender.ts`)
-  - Change signature to return void
-  - Record errors on env
-  - Update Pipeline.ts call site (line 300): remove `.unwrap()`
-
-- [x] **4.8 `validateNoFreezingKnownMutableFunctions`** (`src/Validation/ValidateNoFreezingKnownMutableFunctions.ts`)
-  - Change signature to return void
-  - Record errors on env
-  - Update Pipeline.ts call site (line 303): remove `.unwrap()`
-
-- [x] **4.9 `validateExhaustiveDependencies`** (`src/Validation/ValidateExhaustiveDependencies.ts`)
-  - Change signature to return void
-  - Record errors on env
-  - Update Pipeline.ts call site (line 315): remove `.unwrap()`
-
-- [x] **4.10 `validateMemoizedEffectDependencies`** (`src/Validation/ValidateMemoizedEffectDependencies.ts`)
-  - Change signature to return void (note: operates on `ReactiveFunction`)
-  - Record errors on the function's env
-  - Update Pipeline.ts call site (line 565): remove `.unwrap()`
-
-- [x] **4.11 `validatePreservedManualMemoization`** (`src/Validation/ValidatePreservedManualMemoization.ts`)
-  - Change signature to return void (note: operates on `ReactiveFunction`)
-  - Record errors on the function's env
-  - Update Pipeline.ts call site (line 572): remove `.unwrap()`
-
-- [x] **4.12 `validateSourceLocations`** (`src/Validation/ValidateSourceLocations.ts`)
-  - Change signature to return void
-  - Record errors on env
-  - Update Pipeline.ts call site (line 585): remove `.unwrap()`
-
-#### Pattern B passes (currently use `env.logErrors()`)
-
-These already use a soft-logging pattern and don't block compilation. They can be migrated to `env.recordError()` so all errors are aggregated in one place.
-
-- [ ] **4.13 `validateNoDerivedComputationsInEffects_exp`** — change to record on env directly
-- [ ] **4.14 `validateNoSetStateInEffects`** — change to record on env directly
-- [ ] **4.15 `validateNoJSXInTryStatement`** — change to record on env directly
-- [ ] **4.16 `validateStaticComponents`** — change to record on env directly
-
-#### Pattern D passes (currently throw directly, no Result)
-
-These throw `CompilerError` directly (not via Result). They need the most work.
-
-- [x] **4.17 `validateContextVariableLValues`** (`src/Validation/ValidateContextVariableLValues.ts`)
-  - Currently throws via `CompilerError.throwTodo()` and `CompilerError.invariant()`
-  - Change to record Todo errors on env and continue
-  - Keep invariant throws (those indicate internal bugs)
-
-- [x] **4.18 `validateLocalsNotReassignedAfterRender`** (`src/Validation/ValidateLocalsNotReassignedAfterRender.ts`)
-  - Currently constructs a `CompilerError` and `throw`s it directly
-  - Change to record errors on env
-
-- [x] **4.19 `validateNoDerivedComputationsInEffects`** (`src/Validation/ValidateNoDerivedComputationsInEffects.ts`)
-  - Currently throws directly
-  - Change to record errors on env
-
-### Phase 5: Update Inference Passes
-
-The inference passes are the most critical to handle correctly because they produce side effects (populating effects on instructions, computing mutable ranges) that downstream passes depend on. They must continue producing valid (even if imprecise) output when errors are encountered.
-
-- [x] **5.1 `inferMutationAliasingEffects`** (`src/Inference/InferMutationAliasingEffects.ts`)
-  - Currently returns `Result<void, CompilerError>` — errors are about mutation of frozen/global values
-  - Change to record errors on `fn.env` instead of accumulating internally
-  - **Key recovery strategy**: When a mutation of a frozen value is detected, record the error but treat the operation as a non-mutating read. This way downstream passes see a consistent (if conservative) view
-  - When a mutation of a global is detected, record the error but continue with the global unchanged
-  - Update Pipeline.ts (lines 233-239): remove the conditional `.isErr()` / throw pattern
-
-- [x] **5.2 `inferMutationAliasingRanges`** (`src/Inference/InferMutationAliasingRanges.ts`)
-  - Currently returns `Result<Array<AliasingEffect>, CompilerError>`
-  - This pass has a meaningful success value (the function's external aliasing effects)
-  - Change to: always produce a best-effort effects array, record errors on env
-  - When errors are encountered, produce conservative effects (e.g., assume no external mutation)
-  - Update Pipeline.ts (lines 258-267): remove the conditional throw pattern, call directly
-
-### Phase 6: Update Codegen
-
-- [x] **6.1 `codegenFunction`** (`src/ReactiveScopes/CodegenReactiveFunction.ts`)
-  - Currently returns `Result<CodegenFunction, CompilerError>`
-  - Change to: always produce a `CodegenFunction`, record errors on env
-  - If codegen encounters an error (e.g., an instruction it can't generate code for), it should:
-    - Record the error
-    - For `UnsupportedNode` values: pass through the original AST node (already works this way)
-    - For other error cases: emit a placeholder or the original AST where possible
-  - Update Pipeline.ts (line 575-578): remove `.unwrap()`
-
-### Phase 7: Pipeline.ts Pass-by-Pass Migration
-
-Walk through `runWithEnvironment` and wrap each pass call site. This is the integration work tying Phases 3-6 together.
-
-- [x] **7.1 Wrap `lower()` call** (line 163)
-  - Change from `lower(func, env).unwrap()` to `lower(func, env)` (direct return after Phase 3.1)
-
-- [x] **7.2 Wrap validation calls that use `.unwrap()`** (lines 169-303)
-  - Remove `.unwrap()` from all validation calls after they're updated in Phase 4
-  - For validations guarded by `env.enableValidations`, keep the guard but remove the `.unwrap()`
-
-- [x] **7.3 Wrap inference calls** (lines 233-267)
-  - After Phase 5, `inferMutationAliasingEffects` and `inferMutationAliasingRanges` record errors directly
-  - Remove the `mutabilityAliasingErrors` / `mutabilityAliasingRangeErrors` variables and their conditional throw logic
-
-- [x] **7.4 Wrap `env.logErrors()` calls** (lines 286-331)
-  - After Phase 4.13-4.16, these passes record on env directly
-  - Remove the `env.logErrors()` wrapper calls
-
-- [x] **7.5 Wrap codegen** (lines 575-578)
-  - After Phase 6.1, `codegenFunction` returns directly
-  - Remove the `.unwrap()`
-
-- [x] **7.6 Add final error check** (end of `runWithEnvironment`)
-  - After all passes complete, check `env.hasErrors()`
-  - If no errors: return `Ok(ast)`
-  - If errors: return `Err(env.aggregateErrors())`
-
-- [x] **7.7 Consider wrapping each pass in `env.tryRecord()`** as a safety net
-  - Even after individual passes are updated, wrapping each pass call in `env.tryRecord()` provides defense-in-depth
-  - If a pass unexpectedly throws a CompilerError (e.g., from a code path we missed), it gets caught and recorded rather than aborting the pipeline
-  - Non-CompilerError exceptions and invariants still propagate immediately
-
-### Phase 8: Testing
-
-- [x] **8.1 Update existing `error.todo-*` fixture expectations**
-  - Currently, fixtures with `error.todo-` prefix expect a single error and bailout
-  - After fault tolerance, some of these may now produce multiple errors
-  - Update the `.expect.md` files to reflect the new aggregated error output
-
-- [x] **8.2 Add multi-error test fixtures**
-  - Create test fixtures that contain multiple independent errors (e.g., both a `var` declaration and a mutation of a frozen value)
-  - Verify that all errors are reported, not just the first one
-
-- [x] **8.3 Add test for invariant-still-throws behavior**
-  - Verify that `CompilerError.invariant()` failures still cause immediate abort
-  - Verify that non-CompilerError exceptions still cause immediate abort
-
-- [x] **8.4 Add test for partial HIR codegen**
-  - Verify that when BuildHIR produces partial HIR (with `UnsupportedNode` values), later passes handle it gracefully and codegen produces the original AST for unsupported portions
-
-- [x] **8.5 Verify error severity in aggregated output**
-  - Test that the aggregated `CompilerError` correctly reports `hasErrors()` vs `hasWarning()` vs `hasHints()` based on the mix of accumulated diagnostics
-  - Verify that `panicThreshold` behavior in Program.ts is correct for aggregated errors
-
-- [x] **8.6 Run full test suite**
-  - Run `yarn snap` and `yarn snap -u` to update all fixture expectations
-  - Ensure no regressions in passing tests
-
-### Implementation Notes
-
-**Ordering**: Phases 1 → 2 → 3 → 4/5/6 (parallel) → 7 → 8. Phase 1 (Environment infrastructure) is the foundation. Phase 2 (Pipeline return type) sets up the contract. Phases 3-6 can be done incrementally — each pass can be migrated independently using `env.tryRecord()` as a transitional wrapper. Phase 7 is the integration. Phase 8 validates everything.
-
-**Incremental migration path**: Rather than updating all passes at once, each pass can be individually migrated. During the transition:
-1. First add `env.tryRecord()` in Phase 7.7 around all pass calls in the pipeline — this immediately provides fault tolerance by catching any thrown CompilerError
-2. Then individually update passes (Phases 3-6) to record errors directly on env, which is cleaner but not required for the basic behavior
-3. This means the feature can be landed incrementally: Phase 1 + 2 + 7.7 gives basic fault tolerance, then individual passes can be refined over time
-
-**What NOT to change**:
-- `CompilerError.invariant()` must continue to throw immediately — these represent internal bugs
-- Non-CompilerError exceptions must continue to throw — these are unexpected JS errors
-- The `assertConsistentIdentifiers`, `assertTerminalSuccessorsExist`, `assertTerminalPredsExist`, `assertValidBlockNesting`, `assertValidMutableRanges`, `assertWellFormedBreakTargets`, `assertScopeInstructionsWithinScopes` assertion functions should continue to throw — they are invariant checks on internal data structure consistency
-- The `panicThreshold` mechanism in Program.ts should continue to work — it now operates on the aggregated error from the Result rather than a caught exception, but the behavior is the same
-
-## Key Learnings
-
-* **Phase 2+7 (Pipeline tryRecord wrapping) was sufficient for basic fault tolerance.** Wrapping all passes in `env.tryRecord()` immediately enabled the compiler to continue past errors that previously threw. This caused 52 test fixtures to produce additional errors that were previously masked by the first error bailing out. For example, `error.todo-reassign-const` previously reported only "Support destructuring of context variables" but now also reports the immutability violation.
-* **Lint-only passes (Pattern B: `env.logErrors()`) should not use `tryRecord()`/`recordError()`** because those errors are intentionally non-blocking. They are reported via the logger only and should not cause the pipeline to return `Err`. The `logErrors` pattern was kept for `validateNoDerivedComputationsInEffects_exp`, `validateNoSetStateInEffects`, `validateNoJSXInTryStatement`, and `validateStaticComponents`.
-* **Inference passes that return `Result` with validation errors** (`inferMutationAliasingEffects`, `inferMutationAliasingRanges`) were changed to record errors via `env.recordErrors()` instead of throwing, allowing subsequent passes to proceed.
-* **Value-producing passes** (`memoizeFbtAndMacroOperandsInSameScope`, `renameVariables`, `buildReactiveFunction`) need safe default values when wrapped in `tryRecord()` since the callback can't return values. We initialize with empty defaults (e.g., `new Set()`) before the `tryRecord()` call.
-* **Phase 3 (BuildHIR) revealed that most error sites already used `builder.errors.push()` for accumulation.** The existing lowering code was designed to accumulate errors rather than throw. The main changes were: (1) changing `lower()` return type from `Result` to `HIRFunction`, (2) recording builder errors on env, (3) adding a try/catch around body lowering to catch thrown CompilerErrors from sub-calls like `resolveBinding()`, (4) treating `var` as `let` instead of skipping declarations, and (5) fixing ForStatement init/test handling to produce valid CFG structure.
-* **Partial HIR can trigger downstream invariants.** When lowering skips or partially handles constructs (e.g., unreachable hoisted functions, `var` declarations before the fix), downstream passes like `InferMutationAliasingEffects` may encounter uninitialized identifiers and throw invariants. This is acceptable since the function still correctly bails out of compilation, but error messages may be less specific. The fix for `var` (treating as `let`) demonstrates how to avoid this: continue lowering with a best-effort representation rather than skipping entirely.
-* **Errors accumulated on `env` are lost when an invariant propagates out of the pipeline.** Since invariant CompilerErrors always re-throw through `tryRecord()`, they exit the pipeline as exceptions. The caller only sees the invariant error, not any errors previously recorded on `env`. This is a design limitation that could be addressed by aggregating env errors with caught exceptions in `tryCompileFunction()`.
-* **Dedicated fault tolerance test fixtures** were added in `__tests__/fixtures/compiler/fault-tolerance/`. Each fixture combines two or more errors from different passes to verify the compiler reports all of them rather than short-circuiting on the first. Coverage includes: `var`+props mutation (BuildHIR→InferMutationAliasingEffects), `var`+ref access (BuildHIR→ValidateNoRefAccessInRender), `try/finally`+props mutation (BuildHIR→InferMutationAliasingEffects), `try/finally`+ref access (BuildHIR→ValidateNoRefAccessInRender), and a 3-error test combining try/finally+ref access+props mutation.
-* **Cleanup: consistent `tryRecord()` wrapping in Pipeline.ts.** All validation passes and inference passes are now wrapped in `env.tryRecord()` for defense-in-depth, consistent with the approach used for transform passes. Previously only transform passes were wrapped. Merged duplicate `env.enableValidations` guard blocks. Pattern B lint-only passes (`env.logErrors()`) were intentionally not wrapped since they use a different error recording strategy.
-* **Cleanup: normalized validation error recording pattern.** Four validation passes (`ValidateNoDerivedComputationsInEffects`, `ValidateMemoizedEffectDependencies`, `ValidatePreservedManualMemoization`, `ValidateSourceLocations`) were using `for (const detail of errors.details) { env.recordError(detail); }` instead of the simpler `env.recordErrors(errors)`. Normalized to use the batch method.
-

compiler/package.json

@@ -19,8 +19,7 @@
     "test": "yarn workspaces run test",
     "snap": "yarn workspace babel-plugin-react-compiler run snap",
     "snap:build": "yarn workspace snap run build",
-    "npm:publish": "node scripts/release/publish",
-    "eslint-docs": "yarn workspace babel-plugin-react-compiler build && node scripts/build-eslint-docs.js"
+    "npm:publish": "node scripts/release/publish"
   },
   "dependencies": {
     "fs-extra": "^4.0.2",
@@ -38,7 +37,7 @@
     "prettier": "^3.3.3",
     "prettier-plugin-hermes-parser": "^0.26.0",
     "prompt-promise": "^1.0.3",
-    "rimraf": "^6.0.1",
+    "rimraf": "^5.0.10",
     "to-fast-properties": "^2.0.0",
     "tsup": "^8.4.0",
     "typescript": "^5.4.3",
@@ -46,6 +45,7 @@
     "yargs": "^17.7.2"
   },
   "resolutions": {
+    "rimraf": "5.0.10",
     "@babel/types": "7.26.3"
   },
   "packageManager": "yarn@1.22.22"

compiler/packages/babel-plugin-react-compiler/docs/passes/01-lower.md

@@ -1,157 +0,0 @@
-# lower (BuildHIR)
-
-## File
-`src/HIR/BuildHIR.ts`
-
-## Purpose
-Converts a Babel AST function node into a High-level Intermediate Representation (HIR), which represents code as a control-flow graph (CFG) with basic blocks, instructions, and terminals. This is the first major transformation pass in the React Compiler pipeline, enabling precise expression-level memoization analysis.
-
-## Input Invariants
-- Input must be a valid Babel `NodePath<t.Function>` (FunctionDeclaration, FunctionExpression, or ArrowFunctionExpression)
-- The function must be a component or hook (determined by the environment)
-- Babel scope analysis must be available for binding resolution
-- An `Environment` instance must be provided with compiler configuration
-- Optional `bindings` map for nested function lowering (recursive calls)
-- Optional `capturedRefs` map for context variables captured from outer scope
-
-## Output Guarantees
-- Returns `Result<HIRFunction, CompilerError>` - either a successfully lowered function or compilation errors
-- The HIR function contains:
-  - A complete CFG with basic blocks (`body.blocks: Map<BlockId, BasicBlock>`)
-  - Each block has an array of instructions and exactly one terminal
-  - All control flow is explicit (if/else, loops, switch, logical operators, ternary)
-  - Parameters are converted to `Place` or `SpreadPattern`
-  - Context captures are tracked in `context` array
-  - Function metadata (id, async, generator, directives)
-- All identifiers get unique `IdentifierId` values
-- Instructions have placeholder instruction IDs (set to 0, assigned later)
-- Effects are null (populated by later inference passes)
-
-## Algorithm
-The lowering algorithm uses a recursive descent pattern with a `HIRBuilder` helper class:
-
-1. **Initialization**: Create an `HIRBuilder` with environment and optional bindings. Process captured context variables.
-
-2. **Parameter Processing**: For each function parameter:
-   - Simple identifiers: resolve binding and create Place
-   - Patterns (object/array): create temporary Place, then emit destructuring assignments
-   - Rest elements: wrap in SpreadPattern
-   - Unsupported: emit Todo error
-
-3. **Body Processing**:
-   - Arrow function expressions: lower body expression to temporary, emit implicit return
-   - Block statements: recursively lower each statement
-
-4. **Statement Lowering** (`lowerStatement`): Handle each statement type:
-   - **Control flow**: Create separate basic blocks for branches, loops connect back to conditional blocks
-   - **Variable declarations**: Create `DeclareLocal`/`DeclareContext` or `StoreLocal`/`StoreContext` instructions
-   - **Expressions**: Lower to temporary and discard result
-   - **Hoisting**: Detect forward references and emit `DeclareContext` for hoisted identifiers
-
-5. **Expression Lowering** (`lowerExpression`): Convert expressions to `InstructionValue`:
-   - **Identifiers**: Create `LoadLocal`, `LoadContext`, or `LoadGlobal` based on binding
-   - **Literals**: Create `Primitive` values
-   - **Operators**: Create `BinaryExpression`, `UnaryExpression` etc.
-   - **Calls**: Distinguish `CallExpression` vs `MethodCall` (member expression callee)
-   - **Control flow expressions**: Create separate value blocks for branches (ternary, logical, optional chaining)
-   - **JSX**: Lower to `JsxExpression` with lowered tag, props, and children
-
-6. **Block Management**: The builder maintains:
-   - A current work-in-progress block accumulating instructions
-   - Completed blocks map
-   - Scope stack for break/continue resolution
-   - Exception handler stack for try/catch
-
-7. **Termination**: Add implicit void return at end if no explicit return
-
-## Key Data Structures
-
-### HIRBuilder (from HIRBuilder.ts)
-- `#current: WipBlock` - Work-in-progress block being populated
-- `#completed: Map<BlockId, BasicBlock>` - Finished blocks
-- `#scopes: Array<Scope>` - Stack for break/continue target resolution (LoopScope, LabelScope, SwitchScope)
-- `#exceptionHandlerStack: Array<BlockId>` - Stack of catch handlers for try/catch
-- `#bindings: Bindings` - Map of variable names to their identifiers
-- `#context: Map<t.Identifier, SourceLocation>` - Captured context variables
-- Methods: `push()`, `reserve()`, `enter()`, `terminate()`, `terminateWithContinuation()`
-
-### Core HIR Types
-- **BasicBlock**: Contains `instructions: Array<Instruction>`, `terminal: Terminal`, `preds: Set<BlockId>`, `phis: Set<Phi>`, `kind: BlockKind`
-- **Instruction**: Contains `id`, `lvalue` (Place), `value` (InstructionValue), `effects` (null initially), `loc`
-- **Terminal**: Block terminator - `if`, `branch`, `goto`, `return`, `throw`, `for`, `while`, `switch`, `ternary`, `logical`, etc.
-- **Place**: Reference to a value - `{kind: 'Identifier', identifier, effect, reactive, loc}`
-- **InstructionValue**: The operation - `LoadLocal`, `StoreLocal`, `CallExpression`, `BinaryExpression`, `FunctionExpression`, etc.
-
-### Block Kinds
-- `block` - Regular sequential block
-- `loop` - Loop header/test block
-- `value` - Block that produces a value (ternary/logical branches)
-- `sequence` - Sequence expression block
-- `catch` - Exception handler block
-
-## Edge Cases
-
-1. **Hoisting**: Forward references to `let`/`const`/`function` declarations emit `DeclareContext` before the reference, enabling correct temporal dead zone handling
-
-2. **Context Variables**: Variables captured by nested functions use `LoadContext`/`StoreContext` instead of `LoadLocal`/`StoreLocal`
-
-3. **For-of/For-in Loops**: Synthesize iterator instructions (`GetIterator`, `IteratorNext`, `NextPropertyOf`)
-
-4. **Optional Chaining**: Creates nested `OptionalTerminal` structures with short-circuit branches
-
-5. **Logical Expressions**: Create branching structures where left side stores to temporary, right side only evaluated if needed
-
-6. **Try/Catch**: Adds `MaybeThrowTerminal` after each instruction in try block, modeling potential control flow to handler
-
-7. **JSX in fbt**: Tracks `fbtDepth` counter to handle whitespace differently in fbt/fbs tags
-
-8. **Unsupported Syntax**: `var` declarations, `with` statements, inline `class` declarations, `eval` - emit appropriate errors
-
-## TODOs
-- `returnTypeAnnotation: null, // TODO: extract the actual return type node if present`
-- `TODO(gsn): In the future, we could only pass in the context identifiers that are actually used by this function and its nested functions`
-- Multiple `// TODO remove type cast` in destructuring pattern handling
-- `// TODO: should JSX namespaced names be handled here as well?`
-
-## Example
-Input JavaScript:
-```javascript
-export default function foo(x, y) {
-  if (x) {
-    return foo(false, y);
-  }
-  return [y * 10];
-}
-```
-
-Output HIR (simplified):
-```
-foo(<unknown> x$0, <unknown> y$1): <unknown> $12
-bb0 (block):
-  [1] <unknown> $6 = LoadLocal <unknown> x$0
-  [2] If (<unknown> $6) then:bb2 else:bb1 fallthrough=bb1
-
-bb2 (block):
-  predecessor blocks: bb0
-  [3] <unknown> $2 = LoadGlobal(module) foo
-  [4] <unknown> $3 = false
-  [5] <unknown> $4 = LoadLocal <unknown> y$1
-  [6] <unknown> $5 = Call <unknown> $2(<unknown> $3, <unknown> $4)
-  [7] Return Explicit <unknown> $5
-
-bb1 (block):
-  predecessor blocks: bb0
-  [8] <unknown> $7 = LoadLocal <unknown> y$1
-  [9] <unknown> $8 = 10
-  [10] <unknown> $9 = Binary <unknown> $7 * <unknown> $8
-  [11] <unknown> $10 = Array [<unknown> $9]
-  [12] Return Explicit <unknown> $10
-```
-
-Key observations:
-- The function has 3 basic blocks: entry (bb0), consequent (bb2), alternate/fallthrough (bb1)
-- The if statement creates an `IfTerminal` at the end of bb0
-- Each branch ends with its own `ReturnTerminal`
-- All values are stored in temporaries (`$N`) or named identifiers (`x$0`, `y$1`)
-- Instructions have sequential IDs within blocks
-- Types and effects are `<unknown>` at this stage (populated by later passes)

compiler/packages/babel-plugin-react-compiler/docs/passes/02-enterSSA.md

@@ -1,182 +0,0 @@
-# enterSSA
-
-## File
-`src/SSA/EnterSSA.ts`
-
-## Purpose
-Converts the HIR from a non-SSA form (where variables can be reassigned) into Static Single Assignment (SSA) form, where each variable is defined exactly once and phi nodes are inserted at control flow join points to merge values from different paths.
-
-## Input Invariants
-- The HIR must have blocks in reverse postorder (predecessors visited before successors, except for back-edges)
-- Block predecessor information (`block.preds`) must be populated correctly
-- The function's `context` array must be empty for the root function (outer function declarations)
-- Identifiers may be reused across multiple definitions/assignments (non-SSA form)
-
-## Output Guarantees
-- Each identifier has a unique `IdentifierId` - no identifier is defined more than once
-- All operand references use the SSA-renamed identifiers
-- Phi nodes are inserted at join points where values from different control flow paths converge
-- Function parameters are SSA-renamed
-- Nested functions (FunctionExpression, ObjectMethod) are recursively converted to SSA form
-- Context variables (captured from outer scopes) are handled specially and not redefined
-
-## Algorithm
-The pass uses the Braun et al. algorithm ("Simple and Efficient Construction of Static Single Assignment Form") with adaptations for handling loops and nested functions.
-
-### Key Steps:
-1. **Block Traversal**: Iterate through blocks in order (assumed reverse postorder from previous passes)
-2. **Definition Tracking**: Maintain a per-block `defs` map from original identifiers to their SSA-renamed versions
-3. **Renaming**:
-   - When a value is **defined** (lvalue), create a new SSA identifier with fresh `IdentifierId`
-   - When a value is **used** (operand), look up the current SSA identifier via `getIdAt`
-4. **Phi Node Insertion**: When looking up an identifier at a block with multiple predecessors:
-   - If all predecessors have been visited, create a phi node collecting values from each predecessor
-   - If some predecessors are unvisited (back-edge/loop), create an "incomplete phi" that will be fixed later
-5. **Incomplete Phi Resolution**: When all predecessors of a block are finally visited, fix any incomplete phi nodes by populating their operands
-6. **Nested Function Handling**: Recursively apply SSA transformation to nested functions, temporarily adding a fake predecessor edge to enable identifier lookup from the enclosing scope
-
-### Phi Node Placement Logic (`getIdAt`):
-- If the identifier is defined locally in the current block, return it
-- If at entry block with no predecessors and not found, mark as unknown (global)
-- If some predecessors are unvisited (loop), create incomplete phi
-- If exactly one predecessor, recursively look up in that predecessor
-- If multiple predecessors, create phi node with operands from all predecessors
-
-## Key Data Structures
-- **SSABuilder**: Main class managing the transformation
-  - `#states: Map<BasicBlock, State>` - Per-block state (defs map and incomplete phis)
-  - `unsealedPreds: Map<BasicBlock, number>` - Count of unvisited predecessors per block
-  - `#unknown: Set<Identifier>` - Identifiers assumed to be globals
-  - `#context: Set<Identifier>` - Context variables that should not be redefined
-- **State**: Per-block state containing:
-  - `defs: Map<Identifier, Identifier>` - Maps original identifiers to SSA-renamed versions
-  - `incompletePhis: Array<IncompletePhi>` - Phi nodes waiting for predecessor values
-- **IncompletePhi**: Tracks a phi node created before all predecessors were visited
-  - `oldPlace: Place` - Original place being phi'd
-  - `newPlace: Place` - SSA-renamed phi result place
-- **Phi**: The actual phi node in the HIR
-  - `place: Place` - The result of the phi
-  - `operands: Map<BlockId, Place>` - Maps predecessor block to the place providing the value
-
-## Edge Cases
-- **Loops (back-edges)**: When a variable is used in a loop header before the loop body assigns it, an incomplete phi is created and later fixed when the loop body block is visited
-- **Globals**: If an identifier is used but never defined (reaching the entry block without a definition), it's assumed to be a global and not renamed
-- **Context variables**: Variables captured from an outer function scope are tracked specially and not redefined when reassigned
-- **Nested functions**: Function expressions and object methods are processed recursively with a temporary predecessor edge linking them to the enclosing block
-
-## TODOs
-- `[hoisting] EnterSSA: Expected identifier to be defined before being used` - Handles cases where hoisting causes an identifier to be used before definition (throws a Todo error for graceful bailout)
-
-## Example
-
-### Input (simple reassignment with control flow):
-```javascript
-function foo() {
-  let y = 2;
-  if (y > 1) {
-    y = 1;
-  } else {
-    y = 2;
-  }
-  let x = y;
-}
-```
-
-### Before SSA (HIR):
-```
-bb0 (block):
-  [1] $0 = 2
-  [2] $2 = StoreLocal Let y$1 = $0
-  [3] $7 = LoadLocal y$1
-  [4] $8 = 1
-  [5] $9 = Binary $7 > $8
-  [6] If ($9) then:bb2 else:bb3 fallthrough=bb1
-
-bb2 (block):
-  predecessor blocks: bb0
-  [7] $3 = 1
-  [8] $4 = StoreLocal Reassign y$1 = $3  // Same y$1 reassigned
-  [9] Goto bb1
-
-bb3 (block):
-  predecessor blocks: bb0
-  [10] $5 = 2
-  [11] $6 = StoreLocal Reassign y$1 = $5  // Same y$1 reassigned
-  [12] Goto bb1
-
-bb1 (block):
-  predecessor blocks: bb2 bb3
-  [13] $10 = LoadLocal y$1                // Which y$1?
-  [14] $12 = StoreLocal Let x$11 = $10
-```
-
-### After SSA:
-```
-bb0 (block):
-  [1] $15 = 2
-  [2] $17 = StoreLocal Let y$16 = $15    // y$16: initial definition
-  [3] $18 = LoadLocal y$16
-  [4] $19 = 1
-  [5] $20 = Binary $18 > $19
-  [6] If ($20) then:bb2 else:bb3 fallthrough=bb1
-
-bb2 (block):
-  predecessor blocks: bb0
-  [7] $21 = 1
-  [8] $23 = StoreLocal Reassign y$22 = $21  // y$22: new SSA name
-  [9] Goto bb1
-
-bb3 (block):
-  predecessor blocks: bb0
-  [10] $24 = 2
-  [11] $26 = StoreLocal Reassign y$25 = $24  // y$25: new SSA name
-  [12] Goto bb1
-
-bb1 (block):
-  predecessor blocks: bb2 bb3
-  y$27: phi(bb2: y$22, bb3: y$25)           // PHI NODE: merges y$22 and y$25
-  [13] $28 = LoadLocal y$27                  // Uses phi result
-  [14] $30 = StoreLocal Let x$29 = $28
-```
-
-### Loop Example (while loop with back-edge):
-```javascript
-function foo() {
-  let x = 1;
-  while (x < 10) {
-    x = x + 1;
-  }
-  return x;
-}
-```
-
-### After SSA:
-```
-bb0 (block):
-  [1] $13 = 1
-  [2] $15 = StoreLocal Let x$14 = $13    // x$14: initial definition
-  [3] While test=bb1 loop=bb3 fallthrough=bb2
-
-bb1 (loop):
-  predecessor blocks: bb0 bb3
-  x$16: phi(bb0: x$14, bb3: x$23)        // PHI merges initial and loop-updated values
-  [4] $17 = LoadLocal x$16
-  [5] $18 = 10
-  [6] $19 = Binary $17 < $18
-  [7] Branch ($19) then:bb3 else:bb2
-
-bb3 (block):
-  predecessor blocks: bb1
-  [8] $20 = LoadLocal x$16               // Uses phi result
-  [9] $21 = 1
-  [10] $22 = Binary $20 + $21
-  [11] $24 = StoreLocal Reassign x$23 = $22  // x$23: new SSA name in loop body
-  [12] Goto(Continue) bb1
-
-bb2 (block):
-  predecessor blocks: bb1
-  [13] $25 = LoadLocal x$16              // Uses phi result
-  [14] Return Explicit $25
-```
-
-The phi node at `bb1` (the loop header) is initially created as an "incomplete phi" when first visited because `bb3` (the loop body) hasn't been visited yet. Once `bb3` is processed and its terminal is handled, the incomplete phi is fixed by calling `fixIncompletePhis` to populate the operand from `bb3`.

compiler/packages/babel-plugin-react-compiler/docs/passes/03-eliminateRedundantPhi.md

@@ -1,90 +0,0 @@
-# eliminateRedundantPhi
-
-## File
-`src/SSA/EliminateRedundantPhi.ts`
-
-## Purpose
-Eliminates phi nodes whose operands are trivially the same, replacing all usages of the phi's output identifier with the single source identifier. This simplifies the HIR by removing unnecessary join points that do not actually merge distinct values.
-
-## Input Invariants
-- The function must be in SSA form (i.e., `enterSSA` has already run)
-- Blocks are in reverse postorder (guaranteed by the HIR structure)
-- Phi nodes exist at the start of blocks where control flow merges
-
-## Output Guarantees
-- All redundant phi nodes are removed from the HIR
-- All references to eliminated phi identifiers are rewritten to the source identifier
-- Non-redundant phi nodes (those merging two or more distinct values) are preserved
-- Nested function expressions (FunctionExpression, ObjectMethod) also have their redundant phis eliminated and contexts rewritten
-
-## Algorithm
-A phi node is considered redundant when:
-1. **All operands are the same identifier**: e.g., `x2 = phi(x1, x1, x1)` - the phi is replaced with `x1`
-2. **All operands are either the same identifier OR the phi's output**: e.g., `x2 = phi(x1, x2, x1, x2)` - this handles loop back-edges where the phi references itself
-
-The algorithm works as follows:
-1. Visit blocks in reverse postorder, building a rewrite table (`Map<Identifier, Identifier>`)
-2. For each phi node in a block:
-   - First rewrite operands using any existing rewrites (to handle cascading eliminations)
-   - Check if all operands (excluding self-references) point to the same identifier
-   - If so, add a mapping from the phi's output to that identifier and delete the phi
-3. After processing phis, rewrite all instruction lvalues, operands, and terminal operands
-4. For nested functions, recursively call `eliminateRedundantPhi` with shared rewrites
-5. If the CFG has back-edges (loops) and new rewrites were added, repeat the entire process
-
-The loop termination condition `rewrites.size > size && hasBackEdge` ensures:
-- Without loops: completes in a single pass (reverse postorder guarantees forward propagation)
-- With loops: repeats until no new rewrites are found (fixpoint)
-
-## Key Data Structures
-- **`Phi`** (from `src/HIR/HIR.ts`): Represents a phi node with:
-  - `place: Place` - the output identifier
-  - `operands: Map<BlockId, Place>` - maps predecessor block IDs to source places
-- **`rewrites: Map<Identifier, Identifier>`**: Maps eliminated phi outputs to their replacement identifier
-- **`visited: Set<BlockId>`**: Tracks visited blocks to detect back-edges (loops)
-
-## Edge Cases
-- **Loop back-edges**: When a block has a predecessor that hasn't been visited yet (in reverse postorder), that predecessor is a back-edge. The algorithm handles self-referential phis like `x2 = phi(x1, x2)` by ignoring operands equal to the phi's output.
-- **Cascading eliminations**: When one phi's output is used in another phi's operands, the algorithm rewrites operands before checking redundancy, enabling transitive elimination in a single pass (for non-loop cases).
-- **Nested functions**: FunctionExpression and ObjectMethod values contain nested HIR that may have their own phis. The algorithm recursively processes these with a shared rewrite table, ensuring context captures are also rewritten.
-- **Empty phi check**: The algorithm includes an invariant check that phi operands are never empty (which would be invalid HIR).
-
-## TODOs
-(None found in the source code)
-
-## Example
-
-Consider this fixture from `rewrite-phis-in-lambda-capture-context.js`:
-
-```javascript
-function Component() {
-  const x = 4;
-  const get4 = () => {
-    while (bar()) {
-      if (baz) { bar(); }
-    }
-    return () => x;
-  };
-  return get4;
-}
-```
-
-**After SSA pass**, the inner function has redundant phis due to the loop:
-
-```
-bb2 (loop):
-  predecessor blocks: bb1 bb5
-  x$29: phi(bb1: x$21, bb5: x$30)  // Loop header phi
-  ...
-bb5 (block):
-  predecessor blocks: bb6 bb4
-  x$30: phi(bb6: x$29, bb4: x$29)  // Redundant: both operands are x$29
-  ...
-```
-
-**After EliminateRedundantPhi**:
-- `x$30 = phi(x$29, x$29)` is eliminated because both operands are `x$29`
-- `x$29 = phi(x$21, x$30)` becomes `x$29 = phi(x$21, x$29)` after rewriting, which is also redundant (one operand is the phi itself, the other is `x$21`)
-- Both phis are eliminated, and all uses of `x$29` and `x$30` are rewritten to `x$21`
-
-The result: the context capture `@context[x$29]` becomes `@context[x$21]`, correctly propagating that `x` is never modified inside the loop.

compiler/packages/babel-plugin-react-compiler/docs/passes/04-constantPropagation.md

@@ -1,110 +0,0 @@
-# constantPropagation
-
-## File
-`src/Optimization/ConstantPropagation.ts`
-
-## Purpose
-Applies Sparse Conditional Constant Propagation (SCCP) to fold compile-time evaluable expressions to constant values, propagate those constants through the program, and eliminate unreachable branches when conditionals have known constant values.
-
-## Input Invariants
-- HIR must be in SSA form (runs after `enterSSA`)
-- Redundant phi nodes should be eliminated (runs after `eliminateRedundantPhi`)
-- Consistent identifiers must be ensured (`assertConsistentIdentifiers`)
-- Terminal successors must exist (`assertTerminalSuccessorsExist`)
-
-## Output Guarantees
-- Instructions with compile-time evaluable operands are replaced with `Primitive` constants
-- `ComputedLoad`/`ComputedStore` with constant string/number properties are converted to `PropertyLoad`/`PropertyStore`
-- `LoadLocal` and `StoreLocal` propagate known constant values
-- `IfTerminal` with constant boolean test values are replaced with `goto` terminals
-- Unreachable blocks are removed and the CFG is minimized
-- Phi nodes with unreachable predecessor operands are pruned
-- Nested functions (`FunctionExpression`, `ObjectMethod`) are recursively processed
-
-## Algorithm
-The pass uses Sparse Conditional Constant Propagation (SCCP) with fixpoint iteration:
-
-1. **Data Structure**: A `Constants` map (`Map<IdentifierId, Constant>`) tracks known constant values (either `Primitive` or `LoadGlobal`)
-
-2. **Single Pass per Iteration**: Visits all blocks in order:
-   - Evaluates phi nodes - if all operands have the same constant value, the phi result is constant
-   - Evaluates instructions - replaces evaluable expressions with constants
-   - Evaluates terminals - if an `IfTerminal` test is a constant, replaces it with a `goto`
-
-3. **Fixpoint Loop**: If any terminals changed (branch elimination):
-   - Recomputes block ordering (`reversePostorderBlocks`)
-   - Removes unreachable code (`removeUnreachableForUpdates`, `removeDeadDoWhileStatements`, `removeUnnecessaryTryCatch`)
-   - Renumbers instructions (`markInstructionIds`)
-   - Updates predecessors (`markPredecessors`)
-   - Prunes phi operands from unreachable predecessors
-   - Eliminates newly-redundant phis (`eliminateRedundantPhi`)
-   - Merges consecutive blocks (`mergeConsecutiveBlocks`)
-   - Repeats until no more changes
-
-4. **Instruction Evaluation**: Handles various instruction types:
-   - **Primitives/LoadGlobal**: Directly constant
-   - **BinaryExpression**: Folds arithmetic (`+`, `-`, `*`, `/`, `%`, `**`), bitwise (`|`, `&`, `^`, `<<`, `>>`, `>>>`), and comparison (`<`, `<=`, `>`, `>=`, `==`, `===`, `!=`, `!==`) operators
-   - **UnaryExpression**: Folds `!` (boolean negation) and `-` (numeric negation)
-   - **PostfixUpdate/PrefixUpdate**: Folds `++`/`--` on constant numbers
-   - **PropertyLoad**: Folds `.length` on constant strings
-   - **TemplateLiteral**: Folds template strings with constant interpolations
-   - **ComputedLoad/ComputedStore**: Converts to property access when property is constant string/number
-
-## Key Data Structures
-- `Constant = Primitive | LoadGlobal` - The lattice values (no top/bottom, absence means unknown)
-- `Constants = Map<IdentifierId, Constant>` - Maps identifier IDs to their known constant values
-- Uses HIR types: `Instruction`, `Phi`, `Place`, `Primitive`, `LoadGlobal`, `InstructionValue`
-
-## Edge Cases
-- **Last instruction of sequence blocks**: Skipped to preserve evaluation order
-- **Phi nodes with back-edges**: Single-pass analysis means loop back-edges won't have constant values propagated
-- **Template literals with Symbol**: Not folded (would throw at runtime)
-- **Template literals with objects/arrays**: Not folded (custom toString behavior)
-- **Division results**: Computed at compile time (may produce `NaN`, `Infinity`, etc.)
-- **LoadGlobal in phis**: Only propagated if all operands reference the same global name
-- **Nested functions**: Constants from outer scope are propagated into nested function expressions
-
-## TODOs
-- `// TODO: handle more cases` - The default case in `evaluateInstruction` has room for additional instruction types
-
-## Example
-
-**Input:**
-```javascript
-function Component() {
-  let a = 1;
-
-  let b;
-  if (a === 1) {
-    b = true;
-  } else {
-    b = false;
-  }
-
-  let c;
-  if (b) {
-    c = 'hello';
-  } else {
-    c = null;
-  }
-
-  return c;
-}
-```
-
-**After ConstantPropagation:**
-- `a === 1` evaluates to `true`
-- The `if (a === 1)` branch is eliminated, only consequent remains
-- `b` is known to be `true`
-- `if (b)` branch is eliminated, only consequent remains
-- `c` is known to be `'hello'`
-- All intermediate blocks are merged
-
-**Output:**
-```javascript
-function Component() {
-  return "hello";
-}
-```
-
-The pass performs iterative simplification: first iteration determines `a === 1` is `true` and eliminates that branch. The CFG is updated, phi for `b` is pruned to single operand making `b = true`. Second iteration uses `b = true` to eliminate the next branch. This continues until no more branches can be eliminated.

compiler/packages/babel-plugin-react-compiler/docs/passes/05-deadCodeElimination.md

@@ -1,109 +0,0 @@
-# deadCodeElimination
-
-## File
-`src/Optimization/DeadCodeElimination.ts`
-
-## Purpose
-Eliminates instructions whose values are unused, reducing generated code size. The pass performs mark-and-sweep analysis to identify and remove dead code while preserving side effects and program semantics.
-
-## Input Invariants
-- Must run after `InferMutationAliasingEffects` because "dead" code may still affect effect inference
-- HIR is in SSA form with phi nodes
-- Unreachable blocks are already pruned during HIR construction
-
-## Output Guarantees
-- All instructions with unused lvalues (that are safe to prune) are removed
-- Unused phi nodes are deleted
-- Unused context variables are removed from `fn.context`
-- Destructuring patterns are rewritten to remove unused bindings
-- `StoreLocal` instructions with unused initializers are converted to `DeclareLocal`
-
-## Algorithm
-Two-phase mark-and-sweep with fixed-point iteration for loops:
-
-**Phase 1: Mark (findReferencedIdentifiers)**
-1. Detect if function has back-edges (loops)
-2. Iterate blocks in reverse postorder (successors before predecessors) to visit usages before declarations
-3. For each block:
-   - Mark all terminal operands as referenced
-   - Process instructions in reverse order:
-     - If lvalue is used OR instruction is not pruneable, mark the lvalue and all operands as referenced
-     - Special case for `StoreLocal`: only mark initializer if the SSA lvalue is actually read
-   - Mark phi operands if the phi result is used
-4. If loops exist and new identifiers were marked, repeat until fixed point
-
-**Phase 2: Sweep**
-1. Remove unused phi nodes from each block
-2. Remove instructions with unused lvalues using `retainWhere`
-3. Rewrite retained instructions:
-   - **Array destructuring**: Replace unused elements with holes, truncate trailing holes
-   - **Object destructuring**: Remove unused properties (only if rest element is unused or absent)
-   - **StoreLocal**: Convert to `DeclareLocal` if initializer value is never read
-4. Remove unused context variables
-
-## Key Data Structures
-- **State class**: Tracks referenced identifiers
-  - `identifiers: Set<IdentifierId>` - SSA-specific usages
-  - `named: Set<string>` - Named variable usages (any version)
-  - `isIdOrNameUsed()` - Checks if identifier or any version of named variable is used
-  - `isIdUsed()` - Checks if specific SSA id is used
-- **hasBackEdge/findBlocksWithBackEdges**: Detect loops requiring fixed-point iteration
-
-## Edge Cases
-- **Preserved even if unused:**
-  - `debugger` statements (to not break debugging workflows)
-  - Call expressions and method calls (may have side effects)
-  - Await expressions
-  - Store operations (ComputedStore, PropertyStore, StoreGlobal)
-  - Delete operations (ComputedDelete, PropertyDelete)
-  - Iterator operations (GetIterator, IteratorNext, NextPropertyOf)
-  - Context operations (LoadContext, DeclareContext, StoreContext)
-  - Memoization markers (StartMemoize, FinishMemoize)
-
-- **SSR mode special case:**
-  - In SSR mode, unused `useState`, `useReducer`, and `useRef` hooks can be removed
-
-- **Object destructuring with rest:**
-  - Cannot remove unused properties if rest element is used (would change rest's value)
-
-- **Block value instructions:**
-  - Last instruction of value blocks (not 'block' kind) is never pruned as it's the block's value
-
-## TODOs
-- "TODO: we could be more precise and make this conditional on whether any arguments are actually modified" (for mutating instructions)
-
-## Example
-
-**Input:**
-```javascript
-function Component(props) {
-  const _ = 42;
-  return props.value;
-}
-```
-
-**After DeadCodeElimination:**
-The `const _ = 42` assignment is removed since `_` is never used:
-```javascript
-function Component(props) {
-  return props.value;
-}
-```
-
-**Array destructuring example:**
-
-Input:
-```javascript
-function foo(props) {
-  const [x, unused, y] = props.a;
-  return x + y;
-}
-```
-
-Output (middle element becomes a hole):
-```javascript
-function foo(props) {
-  const [x, , y] = props.a;
-  return x + y;
-}
-```

compiler/packages/babel-plugin-react-compiler/docs/passes/06-inferTypes.md

@@ -1,124 +0,0 @@
-# inferTypes
-
-## File
-`src/TypeInference/InferTypes.ts`
-
-## Purpose
-Infers types for all identifiers in the HIR by generating type equations and solving them using unification. This pass annotates identifiers with concrete types (Primitive, Object, Function) based on the operations performed on them and the types of globals/hooks they interact with.
-
-## Input Invariants
-- The HIR must be in SSA form (the pass runs after `enterSSA` and `eliminateRedundantPhi`)
-- Constant propagation has already run
-- Global declarations and hook shapes are available via the Environment
-
-## Output Guarantees
-- All identifier types are resolved from type variables (`Type`) to concrete types where possible
-- Phi nodes have their operand types unified to produce a single result type
-- Function return types are inferred from the unified types of all return statements
-- Property accesses on known objects/hooks resolve to the declared property types
-- Component props parameters are typed as `TObject<BuiltInProps>`
-- Component ref parameters are typed as `TObject<BuiltInUseRefId>`
-
-## Algorithm
-The pass uses a classic constraint-based type inference approach with three phases:
-
-1. **Constraint Generation (`generate`)**: Traverses all instructions and generates type equations:
-   - Primitives, literals, unary/binary operations -> `Primitive` type
-   - Hook/function calls -> Function type with fresh return type variable
-   - Property loads -> `Property` type that defers to object shape lookup
-   - Destructuring -> Property types for each extracted element
-   - Phi nodes -> `Phi` type with all operand types as candidates
-   - JSX -> `Object<BuiltInJsx>`
-   - Arrays -> `Object<BuiltInArray>`
-   - Objects -> `Object<BuiltInObject>`
-
-2. **Unification (`Unifier.unify`)**: Solves constraints by unifying type equations:
-   - Type variables are bound to concrete types via substitution
-   - Property types are resolved by looking up the object's shape
-   - Phi types are resolved by finding a common type among operands (or falling back to `Phi` if incompatible)
-   - Function types are unified by unifying their return types
-   - Occurs check prevents infinite types (cycles in type references)
-
-3. **Application (`apply`)**: Applies the computed substitutions to all identifiers in the HIR, replacing type variables with their resolved types.
-
-## Key Data Structures
-- **TypeVar** (`kind: 'Type'`): A type variable with a unique TypeId, used for unknowns
-- **Unifier**: Maintains a substitution map from TypeId to Type, with methods for unification and cycle detection
-- **TypeEquation**: A pair of types that should be equal, used as constraints
-- **PhiType** (`kind: 'Phi'`): Represents the join of multiple types from control flow merge points
-- **PropType** (`kind: 'Property'`): Deferred property lookup that resolves based on object shape
-- **FunctionType** (`kind: 'Function'`): Callable type with optional shapeId and return type
-- **ObjectType** (`kind: 'Object'`): Object with optional shapeId for shape lookup
-
-## Edge Cases
-
-### Phi Type Resolution
-When phi operands have incompatible types, the pass attempts to find a union:
-- `Union(Primitive | MixedReadonly) = MixedReadonly`
-- `Union(Array | MixedReadonly) = Array`
-- If no union is possible, the type remains as `Phi`
-
-### Ref-like Name Inference
-When `enableTreatRefLikeIdentifiersAsRefs` is enabled, property access on variables matching the pattern `/^(?:[a-zA-Z$_][a-zA-Z$_0-9]*)Ref$|^ref$/` with property name `current` infers:
-- Object type as `TObject<BuiltInUseRefId>`
-- Property type as `TObject<BuiltInRefValue>`
-
-### Cycle Detection
-The `occursCheck` method prevents infinite types by detecting when a type variable appears in its own substitution. When a cycle is detected, `tryResolveType` removes the cyclic reference from Phi operands.
-
-### Context Variables
-- `DeclareContext` and `LoadContext` generate no type equations (intentionally untyped)
-- `StoreContext` with `Const` kind does propagate the rvalue type to enable ref inference through context variables
-
-## TODOs
-1. **Hook vs Function type ambiguity**:
-   > "TODO: callee could be a hook or a function, so this type equation isn't correct. We should change Hook to a subtype of Function or change unifier logic."
-
-2. **PropertyStore rvalue inference**:
-   > "TODO: consider using the rvalue type here" - Currently uses a dummy type for PropertyStore to avoid inferring rvalue types from lvalue assignments.
-
-## Example
-
-**Input (infer-phi-primitive.js):**
-```javascript
-function foo(a, b) {
-  let x;
-  if (a) {
-    x = 1;
-  } else {
-    x = 2;
-  }
-  let y = x;
-  return y;
-}
-```
-
-**Before InferTypes (SSA form):**
-```
-<unknown> x$26: phi(bb2: <unknown> x$21, bb3: <unknown> x$24)
-[10] <unknown> $27 = LoadLocal <unknown> x$26
-[11] <unknown> $29 = StoreLocal Let <unknown> y$28 = <unknown> $27
-```
-
-**After InferTypes:**
-```
-<unknown> x$26:TPrimitive: phi(bb2: <unknown> x$21:TPrimitive, bb3: <unknown> x$24:TPrimitive)
-[10] <unknown> $27:TPrimitive = LoadLocal <unknown> x$26:TPrimitive
-[11] <unknown> $29:TPrimitive = StoreLocal Let <unknown> y$28:TPrimitive = <unknown> $27:TPrimitive
-```
-
-The pass infers that:
-- Literals `1` and `2` are `TPrimitive`
-- The phi of two primitives is `TPrimitive`
-- Variables `x` and `y` are `TPrimitive`
-- The function return type is `TPrimitive`
-
-**Hook type inference example (useState):**
-```javascript
-const [x, setX] = useState(initialValue);
-```
-
-After InferTypes:
-- `useState` -> `TFunction<BuiltInUseState>:TObject<BuiltInUseState>`
-- Return value `$27` -> `TObject<BuiltInUseState>`
-- Destructured `setX` -> `TFunction<BuiltInSetState>:TPrimitive`

compiler/packages/babel-plugin-react-compiler/docs/passes/07-analyseFunctions.md

@@ -1,84 +0,0 @@
-# analyseFunctions
-
-## File
-`src/Inference/AnalyseFunctions.ts`
-
-## Purpose
-Recursively analyzes all nested function expressions and object methods in a function to infer their aliasing effect signatures, which describe how the function affects its captured variables when invoked.
-
-## Input Invariants
-- The HIR has been through SSA conversion and type inference
-- FunctionExpression and ObjectMethod instructions have an empty `aliasingEffects` array (`@aliasingEffects=[]`)
-- Context variables (captured variables from outer scope) exist on `fn.context` but do not have their effect populated
-
-## Output Guarantees
-- Every FunctionExpression and ObjectMethod has its `aliasingEffects` array populated with the effects the function performs when called (mutations, captures, aliasing to return value, etc.)
-- Each context variable's `effect` property is set to either `Effect.Capture` (if the variable is captured or mutated by the inner function) or `Effect.Read` (if only read)
-- Context variable mutable ranges are reset to `{start: 0, end: 0}` and scopes are set to `null` to prepare for the outer function's subsequent `inferMutationAliasingRanges` pass
-
-## Algorithm
-1. **Recursive traversal**: Iterates through all blocks and instructions looking for `FunctionExpression` or `ObjectMethod` instructions
-2. **Depth-first processing**: For each function expression found, calls `lowerWithMutationAliasing()` which:
-   - Recursively calls `analyseFunctions()` on the inner function (handles nested functions)
-   - Runs `inferMutationAliasingEffects()` on the inner function to determine effects
-   - Runs `deadCodeElimination()` to clean up
-   - Runs `inferMutationAliasingRanges()` to compute mutable ranges and extract externally-visible effects
-   - Runs `rewriteInstructionKindsBasedOnReassignment()` and `inferReactiveScopeVariables()`
-   - Stores the computed effects in `fn.aliasingEffects`
-3. **Context variable effect classification**: Scans the computed effects to determine which context variables are captured/mutated vs only read:
-   - Effects like `Capture`, `Alias`, `Assign`, `MaybeAlias`, `CreateFrom` mark the source as captured
-   - Mutation effects (`Mutate`, `MutateTransitive`, etc.) mark the target as captured
-   - Sets `operand.effect = Effect.Capture` or `Effect.Read` accordingly
-4. **Range reset**: Resets mutable ranges and scopes on context variables to prepare for outer function analysis
-
-## Key Data Structures
-- **HIRFunction.aliasingEffects**: Array of `AliasingEffect` storing the externally-visible behavior of a function when called
-- **Place.effect**: Effect enum value (`Capture` or `Read`) describing how a context variable is used
-- **AliasingEffect**: Union type describing data flow (Capture, Alias, Assign, etc.) and mutations (Mutate, MutateTransitive, etc.)
-- **FunctionExpression/ObjectMethod.loweredFunc.func**: The inner HIRFunction to analyze
-
-## Edge Cases
-- **Nested functions**: Handled via recursive call to `analyseFunctions()` before processing the current function - innermost functions are analyzed first
-- **ObjectMethod**: Treated identically to FunctionExpression
-- **Apply effects invariant**: The pass asserts that no `Apply` effects remain in the function's signature - these should have been resolved to more precise effects by `inferMutationAliasingRanges()`
-- **Conditional mutations**: Effects like `MutateTransitiveConditionally` are tracked - a function that conditionally mutates a captured variable will have that effect in its signature
-- **Immutable captures**: `ImmutableCapture`, `Freeze`, `Create`, `Impure`, `Render` effects do not contribute to marking context variables as `Capture`
-
-## TODOs
-- No TODO comments in the pass itself
-
-## Example
-Consider a function that captures and conditionally mutates a variable:
-
-```javascript
-function useHook(a, b) {
-  let z = {a};
-  let y = b;
-  let x = function () {
-    if (y) {
-      maybeMutate(z);  // Unknown function, may mutate z
-    }
-  };
-  return x;
-}
-```
-
-**Before AnalyseFunctions:**
-```
-Function @context[y$28, z$25] @aliasingEffects=[]
-```
-
-**After AnalyseFunctions:**
-```
-Function @context[read y$28, capture z$25] @aliasingEffects=[
-  MutateTransitiveConditionally z$25,
-  Create $14 = primitive
-]
-```
-
-The pass infers:
-- `y` is only read (used in the condition)
-- `z` is captured into the function and conditionally mutated transitively (because `maybeMutate()` is unknown)
-- The inner function's signature includes `MutateTransitiveConditionally z$25` to indicate this potential mutation
-
-This signature is then used by `InferMutationAliasingEffects` on the outer function to understand that creating this function captures `z`, and calling the function may mutate `z`.

compiler/packages/babel-plugin-react-compiler/docs/passes/08-inferMutationAliasingEffects.md

@@ -1,144 +0,0 @@
-# inferMutationAliasingEffects
-
-## File
-`src/Inference/InferMutationAliasingEffects.ts`
-
-## Purpose
-Infers the mutation and aliasing effects for all instructions and terminals in the HIR, making the effects of built-in instructions/functions as well as user-defined functions explicit. These effects form the basis for subsequent analysis to determine the mutable range of each value in the program and for validation against invalid code patterns like mutating frozen values.
-
-## Input Invariants
-- HIR must be in SSA form (run after SSA pass)
-- Types must be inferred (run after InferTypes pass)
-- Functions must be analyzed (run after AnalyseFunctions pass) - this provides `aliasingEffects` on FunctionExpressions
-- Each instruction must have an lvalue (destination place)
-
-## Output Guarantees
-- Every instruction has an `effects` array (or null if no effects) containing `AliasingEffect` objects
-- Terminals that affect data flow (return, try/catch) have their `effects` populated
-- Each instruction's lvalue is guaranteed to be defined in the inference state after visiting
-- Effects describe: creation of values, data flow (Assign, Alias, Capture), mutations (Mutate, MutateTransitive), freezing, and errors (MutateFrozen, MutateGlobal, Impure)
-
-## Algorithm
-The pass uses abstract interpretation with the following key phases:
-
-1. **Initialization**:
-   - Create initial `InferenceState` mapping identifiers to abstract values
-   - Initialize context variables as `ValueKind.Context`
-   - Initialize parameters as `ValueKind.Frozen` (for top-level components/hooks) or `ValueKind.Mutable` (for function expressions)
-
-2. **Two-Phase Effect Processing**:
-   - **Phase 1 - Signature Computation**: For each instruction, compute a "candidate signature" based purely on instruction semantics and types (cached per instruction via `computeSignatureForInstruction`)
-   - **Phase 2 - Effect Application**: Apply the signature to the current abstract state via `applySignature`, which refines effects based on the actual runtime kinds of values
-
-3. **Fixed-Point Iteration**:
-   - Process blocks in a worklist, queuing successors after each block
-   - Merge states at control flow join points using lattice operations
-   - Iterate until no changes occur (max 100 iterations as safety limit)
-   - Phi nodes are handled by unioning the abstract values from all predecessors
-
-4. **Effect Refinement** (in `applyEffect`):
-   - `MutateConditionally` effects are dropped if value is not mutable
-   - `Capture` effects are downgraded to `ImmutableCapture` if source is frozen
-   - `Mutate` on frozen values becomes `MutateFrozen` error
-   - `Assign` from primitives/globals creates new values rather than aliasing
-
-## Key Data Structures
-
-### InferenceState
-Maintains two maps:
-- `#values: Map<InstructionValue, AbstractValue>` - Maps allocation sites to their abstract kind
-- `#variables: Map<IdentifierId, Set<InstructionValue>>` - Maps identifiers to the set of values they may point to (set to handle phi joins)
-
-### AbstractValue
-```typescript
-type AbstractValue = {
-  kind: ValueKind;
-  reason: ReadonlySet<ValueReason>;
-};
-```
-
-### ValueKind (lattice)
-```
-MaybeFrozen    <- top (unknown if frozen or mutable)
-    |
-  Frozen       <- immutable, cannot be mutated
-  Mutable      <- can be mutated locally
-  Context      <- mutable box (context variables)
-    |
-  Global       <- global value
-  Primitive    <- copy-on-write semantics
-```
-
-The `mergeValueKinds` function implements the lattice join:
-- `Frozen | Mutable -> MaybeFrozen`
-- `Context | Mutable -> Context`
-- `Context | Frozen -> MaybeFrozen`
-
-### AliasingEffect Types
-Key effect kinds handled:
-- **Create**: Creates a new value at a place
-- **Assign**: Direct assignment (pointer copy)
-- **Alias**: Mutation of destination implies mutation of source
-- **Capture**: Information flow (MutateTransitive propagates through)
-- **MaybeAlias**: Possible aliasing for unknown function returns
-- **Mutate/MutateTransitive**: Direct/transitive mutation
-- **MutateConditionally/MutateTransitiveConditionally**: Conditional versions
-- **Freeze**: Marks value as immutable
-- **Apply**: Function call with complex data flow
-
-## Edge Cases
-
-1. **Spread Destructuring from Props**: The `findNonMutatedDestructureSpreads` pre-pass identifies spread patterns from frozen values that are never mutated, allowing them to be treated as frozen.
-
-2. **Hoisted Context Declarations**: Special handling for variables declared with hoisting (`HoistedConst`, `HoistedFunction`, `HoistedLet`) to detect access before declaration.
-
-3. **Try-Catch Aliasing**: When a `maybe-throw` terminal is reached, call return values are aliased into the catch binding since exceptions can throw return values.
-
-4. **Function Expressions**: Functions are considered mutable only if they have mutable captures or tracked side effects (MutateFrozen, MutateGlobal, Impure).
-
-5. **Iterator Mutation**: Non-builtin iterators may alias their collection and mutation of the iterator is conditional.
-
-6. **Array.push and Similar**: Uses legacy signature system with `Store` effect on receiver and `Capture` of arguments.
-
-## TODOs
-- `// TODO: using InstructionValue as a bit of a hack, but it's pragmatic` - context variable initialization
-- `// TODO: call applyEffect() instead` - try-catch aliasing
-- `// TODO: make sure we're also validating against global mutations somewhere` - global mutation validation for effects/event handlers
-- `// TODO; include "render" here?` - whether to track Render effects in function hasTrackedSideEffects
-- `// TODO: consider using persistent data structures to make clone cheaper` - performance optimization for state cloning
-- `// TODO check this` and `// TODO: what kind here???` - DeclareLocal value kinds
-
-## Example
-
-For the code:
-```javascript
-const arr = [];
-arr.push({});
-arr.push(x, y);
-```
-
-After `InferMutationAliasingEffects`, the effects are:
-
-```
-[10] $39 = Array []
-    Create $39 = mutable           // Array literal creates mutable value
-
-[11] $41 = StoreLocal arr$40 = $39
-    Assign arr$40 = $39            // arr points to the array value
-    Assign $41 = $39
-
-[15] $45 = MethodCall $42.push($44)
-    Apply $45 = $42.$43($44)       // Records the call
-    Mutate $42                      // push mutates the array
-    Capture $42 <- $44             // {} is captured into array
-    Create $45 = primitive         // push returns number (length)
-
-[20] $50 = MethodCall $46.push($48, $49)
-    Apply $50 = $46.$47($48, $49)
-    Mutate $46                      // push mutates the array
-    Capture $46 <- $48             // x captured into array
-    Capture $46 <- $49             // y captured into array
-    Create $50 = primitive
-```
-
-The key insight is that `Mutate` effects extend the mutable range of the array, and `Capture` effects record data flow so that if the array is later frozen (e.g., returned from a component), the captured values are also considered frozen for validation purposes.

compiler/packages/babel-plugin-react-compiler/docs/passes/09-inferMutationAliasingRanges.md

@@ -1,149 +0,0 @@
-# inferMutationAliasingRanges
-
-## File
-`src/Inference/InferMutationAliasingRanges.ts`
-
-## Purpose
-This pass builds an abstract model of the heap and interprets the effects of the given function to determine: (1) the mutable ranges of all identifiers, (2) the externally-visible effects of the function (mutations of params/context-vars, aliasing relationships), and (3) the legacy `Effect` annotation for each Place.
-
-## Input Invariants
-- InferMutationAliasingEffects must have already run, populating `instr.effects` on each instruction with aliasing/mutation effects
-- SSA form must be established (identifiers are in SSA)
-- Type inference has been run (InferTypes)
-- Functions have been analyzed (AnalyseFunctions)
-- Dead code elimination has been performed
-
-## Output Guarantees
-- Every identifier has a populated `mutableRange` (start:end instruction IDs)
-- Every Place has a legacy `Effect` annotation (Read, Capture, Store, Freeze, etc.)
-- The function's `aliasingEffects` array is populated with externally-visible effects (mutations of params/context-vars, aliasing between params/context-vars/return)
-- Validation errors are collected for invalid effects like `MutateFrozen` or `MutateGlobal`
-
-## Algorithm
-The pass operates in three main phases:
-
-**Part 1: Build Data Flow Graph and Infer Mutable Ranges**
-1. Creates an `AliasingState` which maintains a `Node` for each identifier
-2. Iterates through all blocks and instructions, processing effects in program order
-3. For each effect:
-   - `Create`/`CreateFunction`: Creates a new node in the graph
-   - `CreateFrom`/`Assign`/`Alias`: Adds alias edges between nodes (with ordering index)
-   - `MaybeAlias`: Adds conditional alias edges
-   - `Capture`: Adds capture edges (for transitive mutations)
-   - `Mutate*`: Queues mutations for later processing
-   - `Render`: Queues render effects for later processing
-4. Phi node operands are connected once their predecessor blocks have been visited
-5. After the graph is built, mutations are processed:
-   - Mutations propagate both forward (via edges) and backward (via aliases/captures)
-   - Each mutation extends the `mutableRange.end` of affected identifiers
-   - Transitive mutations also traverse capture edges backward
-   - `MaybeAlias` edges downgrade mutations to `Conditional`
-6. Render effects are processed to mark values as rendered
-
-**Part 2: Populate Legacy Per-Place Effects**
-- Sets legacy effects on lvalues and operands based on instruction effects and mutable ranges
-- Fixes up mutable range start values for identifiers that are mutated after creation
-
-**Part 3: Infer Externally-Visible Function Effects**
-- Creates a `Create` effect for the return value
-- Simulates transitive mutations of each param/context-var/return to detect capture relationships
-- Produces `Alias`/`Capture` effects showing data flow between params/context-vars/return
-
-## Key Data Structures
-
-### `AliasingState`
-The main state class maintaining the data flow graph:
-- `nodes: Map<Identifier, Node>` - Maps identifiers to their graph nodes
-
-### `Node`
-Represents an identifier in the data flow graph:
-```typescript
-type Node = {
-  id: Identifier;
-  createdFrom: Map<Identifier, number>;   // CreateFrom edges (source -> index)
-  captures: Map<Identifier, number>;       // Capture edges (source -> index)
-  aliases: Map<Identifier, number>;        // Alias/Assign edges (source -> index)
-  maybeAliases: Map<Identifier, number>;   // MaybeAlias edges (source -> index)
-  edges: Array<{index, node, kind}>;       // Forward edges to other nodes
-  transitive: {kind: MutationKind; loc} | null;  // Transitive mutation info
-  local: {kind: MutationKind; loc} | null;       // Local mutation info
-  lastMutated: number;                     // Index of last mutation affecting this node
-  mutationReason: MutationReason | null;   // Reason for mutation
-  value: {kind: 'Object'} | {kind: 'Phi'} | {kind: 'Function'; function: HIRFunction};
-  render: Place | null;                    // Render context if used in JSX
-};
-```
-
-### `MutationKind`
-Enum describing mutation certainty:
-```typescript
-enum MutationKind {
-  None = 0,
-  Conditional = 1,  // May mutate (e.g., via MaybeAlias or MutateConditionally)
-  Definite = 2,     // Definitely mutates
-}
-```
-
-## Edge Cases
-
-### Phi Nodes
-- Phi nodes are created as special `{kind: 'Phi'}` nodes
-- Phi operands from predecessor blocks are processed with pending edges until the predecessor is visited
-- When traversing "forwards" through edges and encountering a phi, backward traversal is stopped (prevents mutation from one phi input affecting other inputs)
-
-### Transitive vs Local Mutations
-- Local mutations (`Mutate`) only affect alias/assign edges backward
-- Transitive mutations (`MutateTransitive`) also affect capture edges backward
-- Both affect all forward edges
-
-### MaybeAlias
-- Mutations through MaybeAlias edges are downgraded to `Conditional`
-- This prevents false positive errors when we cannot be certain about aliasing
-
-### Function Values
-- Functions are tracked specially as `{kind: 'Function'}` nodes
-- When a function is mutated (transitively), errors from the function body are propagated
-- This handles cases where mutating a captured value in a function affects render safety
-
-### Render Effect Propagation
-- Render effects traverse backward through alias/capture/createFrom edges
-- Functions that have not been mutated are skipped during render traversal (except for JSX-returning functions)
-- Ref types (`isUseRefType`) stop render traversal
-
-## TODOs
-1. Assign effects should have an invariant that the node is not initialized yet. Currently `InferFunctionExpressionAliasingEffectSignatures` infers Assign effects that should be Alias, causing reinitialization.
-
-2. Phi place effects are not properly set today.
-
-3. Phi mutable range start calculation is imprecise - currently just sets it to the instruction before the block rather than computing the exact start.
-
-## Example
-
-Consider the following code:
-```javascript
-function foo() {
-  let a = {};   // Create a (instruction 1)
-  let b = {};   // Create b (instruction 3)
-  a = b;        // Assign a <- b (instruction 8)
-  mutate(a, b); // MutateTransitiveConditionally a, b (instruction 16)
-  return a;
-}
-```
-
-The pass builds a graph:
-1. Creates node for `{}` at instruction 1 (initially assigned to `a`)
-2. Creates node for `{}` at instruction 3 (initially assigned to `b`)
-3. At instruction 8, creates alias edge: `b -> a` with index 8
-4. At instruction 16, mutations are queued for `a` and `b`
-
-When processing the mutation of `a` at instruction 16:
-- Extends `a`'s mutableRange.end to 17
-- Traverses backward through alias edge to `b`, extends `b`'s mutableRange.end to 17
-- Since `a = b`, both objects must be considered mutable until instruction 17
-
-The output shows identifiers with range annotations like `$25[3:17]` meaning:
-- `$25` is the identifier
-- `3` is the instruction where it was created
-- `17` is the instruction after which it is no longer mutated
-
-For aliased values, the ranges are unified - all values that could be affected by a mutation have their ranges extended to include that mutation point.

compiler/packages/babel-plugin-react-compiler/docs/passes/10-inferReactivePlaces.md

@@ -1,169 +0,0 @@
-# inferReactivePlaces
-
-## File
-`src/Inference/InferReactivePlaces.ts`
-
-## Purpose
-Determines which `Place`s (identifiers and temporaries) in the HIR are **reactive** - meaning they may *semantically* change over the course of the component or hook's lifetime. This information is critical for memoization: reactive places form the dependencies that, when changed, should invalidate cached values.
-
-A place is reactive if it derives from any source of reactivity:
-1. **Props** - Component parameters may change between renders
-2. **Hooks** - Hooks can access state or context which can change
-3. **`use` operator** - Can access context which may change
-4. **Mutation with reactive operands** - Values mutated in instructions that have reactive operands become reactive themselves
-5. **Conditional assignment based on reactive control flow** - Values assigned in branches controlled by reactive conditions become reactive
-
-## Input Invariants
-- HIR is in SSA form with phi nodes at join points
-- `inferMutationAliasingEffects` and `inferMutationAliasingRanges` have run, establishing:
-  - Effect annotations on operands (Effect.Capture, Effect.Store, Effect.Mutate, etc.)
-  - Mutable ranges on identifiers
-  - Aliasing relationships captured by `findDisjointMutableValues`
-- All operands have known effects (asserts on `Effect.Unknown`)
-
-## Output Guarantees
-- Every reactive Place has `place.reactive = true`
-- Reactivity is transitively complete (derived from reactive → reactive)
-- All identifiers in a mutable alias group share reactivity
-- Reactivity is propagated to operands used within nested function expressions
-
-## Algorithm
-The algorithm uses **fixpoint iteration** to propagate reactivity forward through the control-flow graph:
-
-### Initialization
-1. Create a `ReactivityMap` backed by disjoint sets of mutably-aliased identifiers
-2. Mark all function parameters as reactive (props are reactive by definition)
-3. Create a `ControlDominators` helper to identify blocks controlled by reactive conditions
-
-### Fixpoint Loop
-Iterate until no changes occur:
-
-For each block:
-1. **Phi Nodes**: Mark phi nodes reactive if:
-   - Any operand is reactive, OR
-   - Any predecessor block is controlled by a reactive condition (control-flow dependency)
-
-2. **Instructions**: For each instruction:
-   - Track stable identifier sources (for hooks like `useRef`, `useState` dispatch)
-   - Check if any operand is reactive
-   - Hook calls and `use` operator are sources of reactivity
-   - If instruction has reactive input:
-     - Mark lvalues reactive (unless they are known-stable like `setState` functions)
-   - If instruction has reactive input OR is in reactive-controlled block:
-     - Mark mutable operands (Capture, Store, Mutate effects) as reactive
-
-3. **Terminals**: Check terminal operands for reactivity
-
-### Post-processing
-Propagate reactivity to inner functions (nested `FunctionExpression` and `ObjectMethod`).
-
-## Key Data Structures
-
-### ReactivityMap
-```typescript
-class ReactivityMap {
-  hasChanges: boolean = false;           // Tracks if fixpoint changed
-  reactive: Set<IdentifierId> = new Set(); // Set of reactive identifiers
-  aliasedIdentifiers: DisjointSet<Identifier>; // Mutable alias groups
-}
-```
-- Uses disjoint sets so that when one identifier in an alias group becomes reactive, they all are effectively reactive
-- `isReactive(place)` checks and marks `place.reactive = true` as a side effect
-- `snapshot()` resets change tracking and returns whether changes occurred
-
-### StableSidemap
-```typescript
-class StableSidemap {
-  map: Map<IdentifierId, {isStable: boolean}> = new Map();
-}
-```
-Tracks sources of stability (e.g., `useState()[1]` dispatch function). Forward data-flow analysis that:
-- Records hook calls that return stable types
-- Propagates stability through PropertyLoad and Destructure from stable containers
-- Propagates through LoadLocal and StoreLocal
-
-### ControlDominators
-Uses post-dominator frontier analysis to determine which blocks are controlled by reactive branch conditions.
-
-## Edge Cases
-
-### Backward Reactivity Propagation via Mutable Aliasing
-```javascript
-const x = [];
-const z = [x];
-x.push(props.input);
-return <div>{z}</div>;
-```
-Here `z` aliases `x` which is later mutated with reactive data. The disjoint set ensures `z` becomes reactive even though the mutation happens after its creation.
-
-### Stable Types Are Not Reactive
-```javascript
-const [state, setState] = useState();
-// setState is stable - not marked reactive despite coming from reactive hook
-```
-The `StableSidemap` tracks these and skips marking them reactive.
-
-### Ternary with Stable Values Still Reactive
-```javascript
-props.cond ? setState1 : setState2
-```
-Even though both branches are stable types, the result depends on reactive control flow, so it cannot be marked non-reactive just based on type.
-
-### Phi Nodes with Reactive Predecessors
-When a phi's predecessor block is controlled by a reactive condition, the phi becomes reactive even if its operands are all non-reactive constants.
-
-## TODOs
-No explicit TODO comments are present in the source file. However, comments note:
-
-- **ComputedLoads not handled for stability**: Only PropertyLoad propagates stability from containers, not ComputedLoad. The comment notes this is safe because stable containers have differently-typed elements, but ComputedLoad handling could be added.
-
-## Example
-
-### Fixture: `reactive-dependency-fixpoint.js`
-
-**Input:**
-```javascript
-function Component(props) {
-  let x = 0;
-  let y = 0;
-  while (x === 0) {
-    x = y;
-    y = props.value;
-  }
-  return [x];
-}
-```
-
-**Before InferReactivePlaces:**
-```
-bb1 (loop):
-  store x$26:TPhi:TPhi: phi(bb0: read x$21:TPrimitive, bb3: read x$32:TPhi)
-  store y$30:TPhi:TPhi: phi(bb0: read y$24:TPrimitive, bb3: read y$37)
-  ...
-bb3 (block):
-  [12] mutate? $35 = LoadLocal read props$19
-  [13] mutate? $36 = PropertyLoad read $35.value
-  [14] mutate? $38 = StoreLocal Reassign mutate? y$37 = read $36
-```
-
-**After InferReactivePlaces:**
-```
-bb1 (loop):
-  store x$26:TPhi{reactive}:TPhi: phi(bb0: read x$21:TPrimitive, bb3: read x$32:TPhi{reactive})
-  store y$30:TPhi{reactive}:TPhi: phi(bb0: read y$24:TPrimitive, bb3: read y$37{reactive})
-  [6] mutate? $27:TPhi{reactive} = LoadLocal read x$26:TPhi{reactive}
-  ...
-bb3 (block):
-  [12] mutate? $35{reactive} = LoadLocal read props$19{reactive}
-  [13] mutate? $36{reactive} = PropertyLoad read $35{reactive}.value
-  [14] mutate? $38{reactive} = StoreLocal Reassign mutate? y$37{reactive} = read $36{reactive}
-```
-
-**Key observations:**
-- `props$19` is marked `{reactive}` as a function parameter
-- The reactivity propagates through the loop:
-  - First iteration: `y$37` becomes reactive from `props.value`
-  - Second iteration: `x$32` becomes reactive from `y$30` (which is reactive via the phi from `y$37`)
-  - The phi nodes `x$26` and `y$30` become reactive because their bb3 operands are reactive
-- The fixpoint algorithm handles this backward propagation through the loop correctly
-- The final output `$40` is reactive, so the array `[x]` will be memoized with `x` as a dependency

compiler/packages/babel-plugin-react-compiler/docs/passes/11-inferReactiveScopeVariables.md

@@ -1,176 +0,0 @@
-# inferReactiveScopeVariables
-
-## File
-`src/ReactiveScopes/InferReactiveScopeVariables.ts`
-
-## Purpose
-This is the **1st of 4 passes** that determine how to break a React function into discrete reactive scopes (independently memoizable units of code). Its specific responsibilities are:
-
-1. **Identify operands that mutate together** - Variables that are mutated in the same instruction must be placed in the same reactive scope
-2. **Assign a unique ReactiveScope to each group** - Each disjoint set of co-mutating identifiers gets assigned a unique ScopeId
-3. **Compute the mutable range** - The scope's range is computed as the union of all member identifiers' mutable ranges
-
-The pass does NOT determine which instructions compute each scope, only which variables belong together.
-
-## Input Invariants
-- `InferMutationAliasingEffects` has run - Effects describe mutations, captures, and aliasing
-- `InferMutationAliasingRanges` has run - Each identifier has a valid `mutableRange` property
-- `InferReactivePlaces` has run - Places are marked as reactive or not
-- `RewriteInstructionKindsBasedOnReassignment` has run - Let/Const properly determined
-- All instructions have been numbered with valid `InstructionId` values
-- Phi nodes are properly constructed at block join points
-
-## Output Guarantees
-- Each identifier that is part of a mutable group has its `identifier.scope` property set to a `ReactiveScope` object
-- All identifiers in the same scope share the same `ReactiveScope` reference
-- The scope's `range` is the union (min start, max end) of all member mutable ranges
-- The scope's `range` is validated to be within [1, maxInstruction+1]
-- Identifiers that only have single-instruction lifetimes (read once) may not be assigned to a scope unless they allocate
-
-## Algorithm
-
-### Phase 1: Find Disjoint Mutable Values (`findDisjointMutableValues`)
-
-Uses a Union-Find (Disjoint Set) data structure to group identifiers that mutate together:
-
-1. **Handle Phi Nodes**: For each phi in each block:
-   - If the phi's result is mutated after creation (mutableRange.end > first instruction in block), union the phi with all its operands
-   - This ensures values that flow through control flow and are later mutated are grouped together
-
-2. **Handle Instructions**: For each instruction:
-   - Collect mutable operands based on instruction type:
-     - If lvalue has extended mutable range OR instruction may allocate, include lvalue
-     - For StoreLocal/StoreContext: Include lvalue if it has extended mutable range, include value if mutable
-     - For Destructure: Include each pattern operand with extended range, include source if mutable
-     - For MethodCall: Include all mutable operands plus the computed property (to keep method resolution in same scope)
-     - For other instructions: Include all mutable operands
-   - Exclude global variables (mutableRange.start === 0) since they cannot be recreated
-   - Union all collected operands together
-
-### Phase 2: Assign Scopes
-
-1. Iterate over all identifiers in the disjoint set using `forEach(item, groupIdentifier)`
-2. For each unique group, create a new ReactiveScope:
-   - Generate a unique ScopeId from the environment
-   - Initialize range from the first member's mutableRange
-   - Set up empty dependencies, declarations, reassignments sets
-3. For subsequent members of the same group:
-   - Expand the scope's range to encompass the member's mutableRange
-   - Merge source locations
-4. Assign the scope to each identifier: `identifier.scope = scope`
-5. Update each identifier's mutableRange to match the scope's range
-
-**Validation**: After scope assignment, validate that all scopes have valid ranges within [1, maxInstruction+1].
-
-## Key Data Structures
-
-### DisjointSet<Identifier>
-A Union-Find data structure optimized for grouping items into disjoint sets:
-
-```typescript
-class DisjointSet<T> {
-  #entries: Map<T, T>;  // Maps each item to its parent (root points to self)
-
-  union(items: Array<T>): void;     // Merge items into one set
-  find(item: T): T | null;          // Find the root of item's set (with path compression)
-  forEach(fn: (item, group) => void): void;  // Iterate all items with their group root
-}
-```
-
-Path compression is used during `find()` to flatten the tree structure, improving subsequent lookup performance.
-
-### ReactiveScope
-```typescript
-type ReactiveScope = {
-  id: ScopeId;
-  range: MutableRange;              // [start, end) instruction range
-  dependencies: Set<ReactiveScopeDependency>;  // Inputs (populated later)
-  declarations: Map<IdentifierId, ReactiveScopeDeclaration>;  // Outputs (populated later)
-  reassignments: Set<Identifier>;   // Reassigned variables (populated later)
-  earlyReturnValue: {...} | null;   // For scopes with early returns
-  merged: Set<ScopeId>;             // IDs of scopes merged into this one
-  loc: SourceLocation;
-};
-```
-
-## Edge Cases
-
-### Global Variables
-Excluded from scopes (mutableRange.start === 0) since they cannot be recreated during memoization.
-
-### Phi Nodes After Mutation
-When a phi's result is mutated after the join point, all phi operands must be in the same scope to ensure the mutation can be recomputed correctly.
-
-### MethodCall Property Resolution
-The computed property load for a method call is explicitly added to the same scope as the call itself.
-
-### Allocating Instructions
-Instructions that allocate (Array, Object, JSX, etc.) add their lvalue to the scope even if the lvalue has a single-instruction range.
-
-### Single-Instruction Ranges
-Values with range `[n, n+1)` (used exactly once) are only included if they allocate, otherwise they're just read.
-
-### enableForest Config
-When enabled, phi operands are unconditionally unioned with the phi result (even without mutation after the phi).
-
-## TODOs
-1. `// TODO: improve handling of module-scoped variables and globals` - The current approach excludes globals entirely, but a more nuanced handling could be beneficial.
-
-2. Known issue with aliasing and mutable lifetimes (from header comments):
-```javascript
-let x = {};
-let y = [];
-x.y = y; // RHS is not considered mutable here bc not further mutation
-mutate(x); // bc y is aliased here, it should still be considered mutable above
-```
-This suggests the pass may miss some co-mutation relationships when aliasing is involved.
-
-## Example
-
-### Fixture: `reactive-scope-grouping.js`
-
-**Input:**
-```javascript
-function foo() {
-  let x = {};
-  let y = [];
-  let z = {};
-  y.push(z);  // y and z co-mutate (z captured into y)
-  x.y = y;    // x and y co-mutate (y captured into x)
-  return x;
-}
-```
-
-**After InferReactiveScopeVariables:**
-```
-[1] mutate? $19_@0[1:14] = Object { }     // x's initial object, scope @0
-[2] store $21_@0[1:14] = StoreLocal x     // x in scope @0
-[3] mutate? $22_@1[3:11] = Array []       // y's array, scope @1
-[4] store $24_@1[3:11] = StoreLocal y     // y in scope @1
-[5] mutate? $25_@2 = Object { }           // z's object, scope @2
-[10] MethodCall y.push(z)                 // Mutates y, captures z
-[13] PropertyStore x.y = y                // Mutates x, captures y
-```
-
-The `y.push(z)` joins y and z into scope @1, and `x.y = y` joins x and y into scope @0. Because y is now in @0, and z was captured into y, ultimately x, y, and z all end up in the same scope @0.
-
-**Compiled Output:**
-```javascript
-function foo() {
-  const $ = _c(1);
-  let x;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    x = {};
-    const y = [];
-    const z = {};
-    y.push(z);
-    x.y = y;
-    $[0] = x;
-  } else {
-    x = $[0];
-  }
-  return x;
-}
-```
-
-All three objects (x, y, z) are created within the same memoization block because they co-mutate and could potentially alias each other.

compiler/packages/babel-plugin-react-compiler/docs/passes/12-rewriteInstructionKindsBasedOnReassignment.md

@@ -1,151 +0,0 @@
-# rewriteInstructionKindsBasedOnReassignment
-
-## File
-`src/SSA/RewriteInstructionKindsBasedOnReassignment.ts`
-
-## Purpose
-Rewrites the `InstructionKind` of variable declaration and assignment instructions to correctly reflect whether variables should be declared as `const` or `let` in the final output. It determines this based on whether a variable is subsequently reassigned after its initial declaration.
-
-The key insight is that this pass runs **after dead code elimination (DCE)**, so a variable that was originally declared with `let` in the source (because it was reassigned) may be converted to `const` if the reassignment was removed by DCE. However, variables originally declared as `const` cannot become `let`.
-
-## Input Invariants
-- SSA form: Each identifier has a unique `IdentifierId` and `DeclarationId`
-- Dead code elimination has run: Unused assignments have been removed
-- Mutation/aliasing inference complete: Runs after `InferMutationAliasingRanges` and `InferReactivePlaces` in the main pipeline
-- All instruction kinds are initially set (typically `Let` for variables that may be reassigned)
-
-## Output Guarantees
-- **First declaration gets `Const` or `Let`**: The first `StoreLocal` for a named variable is marked as:
-  - `InstructionKind.Const` if the variable is never reassigned after
-  - `InstructionKind.Let` if the variable has subsequent reassignments
-- **Reassignments marked as `Reassign`**: Any subsequent `StoreLocal` to the same `DeclarationId` is marked as `InstructionKind.Reassign`
-- **Destructure consistency**: All places in a destructuring pattern must have consistent kinds (all Const or all Reassign)
-- **Update operations trigger Let**: `PrefixUpdate` and `PostfixUpdate` operations (like `++x` or `x--`) mark the original declaration as `Let`
-
-## Algorithm
-
-1. **Initialize declarations map**: Create a `Map<DeclarationId, LValue | LValuePattern>` to track declared variables.
-
-2. **Seed with parameters and context**: Add all named function parameters and captured context variables to the map with kind `Let` (since they're already "declared" outside the function body).
-
-3. **Process blocks in order**: Iterate through all blocks and instructions:
-
-   - **DeclareLocal**: Record the declaration in the map (invariant: must not already exist)
-
-   - **StoreLocal**:
-     - If not in map: This is the first store, add to map with `kind = Const`
-     - If already in map: This is a reassignment. Update original declaration to `Let`, set current instruction to `Reassign`
-
-   - **Destructure**:
-     - For each operand in the pattern, check if it's already declared
-     - All operands must be consistent (all new declarations OR all reassignments)
-     - Set pattern kind to `Const` for new declarations, `Reassign` for existing ones
-
-   - **PrefixUpdate / PostfixUpdate**: Look up the declaration and mark it as `Let` (these always imply reassignment)
-
-## Key Data Structures
-
-```typescript
-// Main tracking structure
-const declarations = new Map<DeclarationId, LValue | LValuePattern>();
-
-// InstructionKind enum (from HIR.ts)
-enum InstructionKind {
-  Const = 'Const',      // const declaration
-  Let = 'Let',          // let declaration
-  Reassign = 'Reassign', // reassignment to existing binding
-  Catch = 'Catch',      // catch clause binding
-  HoistedLet = 'HoistedLet',     // hoisted let
-  HoistedConst = 'HoistedConst', // hoisted const
-  HoistedFunction = 'HoistedFunction', // hoisted function
-  Function = 'Function', // function declaration
-}
-```
-
-## Edge Cases
-
-### DCE Removes Reassignment
-A `let x = 0; x = 1;` where `x = 1` is unused becomes `const x = 0;` after DCE.
-
-### Destructuring with Mixed Operands
-The invariant checks ensure all operands in a destructure pattern are either all new declarations or all reassignments. Mixed cases cause a compiler error.
-
-### Value Blocks with DCE
-There's a TODO for handling reassignment in value blocks where the original declaration was removed by DCE.
-
-### Parameters and Context Variables
-These are pre-seeded as `Let` in the declarations map since they're conceptually "declared" at function entry.
-
-### Update Expressions
-`++x` and `x--` always mark the variable as `Let`, even if used inline.
-
-## TODOs
-```typescript
-CompilerError.invariant(block.kind !== 'value', {
-  reason: `TODO: Handle reassignment in a value block where the original
-           declaration was removed by dead code elimination (DCE)`,
-  ...
-});
-```
-
-This indicates an edge case where a destructuring reassignment occurs in a value block but the original declaration was eliminated by DCE. This is currently an invariant violation rather than handled gracefully.
-
-## Example
-
-### Fixture: `reassignment.js`
-
-**Input Source:**
-```javascript
-function Component(props) {
-  let x = [];
-  x.push(props.p0);
-  let y = x;
-
-  x = [];
-  let _ = <Component x={x} />;
-
-  y.push(props.p1);
-
-  return <Component x={x} y={y} />;
-}
-```
-
-**Before Pass (InferReactivePlaces output):**
-```
-[2] StoreLocal Let x$32 = $31      // x is initially marked Let
-[9] StoreLocal Let y$40 = $39      // y is initially marked Let
-[11] StoreLocal Reassign x$43 = $42  // reassignment already marked
-```
-
-**After Pass:**
-```
-[2] StoreLocal Let x$32 = $31      // x stays Let (has reassignment at line 11)
-[9] StoreLocal Const y$40 = $39    // y becomes Const (never reassigned)
-[11] StoreLocal Reassign x$43 = $42  // stays Reassign
-```
-
-**Final Generated Code:**
-```javascript
-function Component(props) {
-  const $ = _c(4);
-  let t0;
-  if ($[0] !== props.p0 || $[1] !== props.p1) {
-    let x = [];              // let because reassigned
-    x.push(props.p0);
-    const y = x;             // const because never reassigned
-    // ... x = t1; (reassignment)
-    y.push(props.p1);
-    t0 = <Component x={x} y={y} />;
-    // ...
-  }
-  return t0;
-}
-```
-
-The pass correctly identified that `x` needs `let` (since it's reassigned on line 6 of the source) while `y` can use `const` (it's never reassigned after initialization).
-
-## Where This Pass is Called
-
-1. **Main Pipeline** (`src/Entrypoint/Pipeline.ts:322`): Called after `InferReactivePlaces` and before `InferReactiveScopeVariables`.
-
-2. **AnalyseFunctions** (`src/Inference/AnalyseFunctions.ts:58`): Called when lowering inner function expressions as part of the function analysis phase.

compiler/packages/babel-plugin-react-compiler/docs/passes/13-alignMethodCallScopes.md

@@ -1,131 +0,0 @@
-# alignMethodCallScopes
-
-## File
-`src/ReactiveScopes/AlignMethodCallScopes.ts`
-
-## Purpose
-Ensures that `MethodCall` instructions and their associated `PropertyLoad` instructions (which load the method being called) have consistent scope assignments. The pass enforces one of two invariants:
-1. Both the MethodCall lvalue and the property have the **same** reactive scope
-2. **Neither** has a reactive scope
-
-This alignment is critical because the PropertyLoad and MethodCall are semantically a single operation (`receiver.method(args)`) and must be memoized together as a unit. If they had different scopes, the generated code would incorrectly try to memoize the property load separately from the method call, which could break correctness.
-
-## Input Invariants
-- The function has been converted to HIR form
-- `inferReactiveScopeVariables` has already run, assigning initial reactive scopes to identifiers based on mutation analysis
-- Each instruction's lvalue has an `identifier.scope` that is either a `ReactiveScope` or `null`
-- For `MethodCall` instructions, the `value.property` field contains a `Place` referencing the loaded method
-
-## Output Guarantees
-After this pass runs:
-- For every `MethodCall` instruction in the function:
-  - If the lvalue has a scope AND the property has a scope, they point to the **same merged scope**
-  - If only the lvalue has a scope, the property's scope is set to match the lvalue's scope
-  - If only the property has a scope, the property's scope is set to `null` (so neither has a scope)
-- Merged scopes have their `range` extended to cover the union of the original scopes' ranges
-- Nested functions (FunctionExpression, ObjectMethod) are recursively processed
-
-## Algorithm
-
-### Phase 1: Collect Scope Relationships
-```
-For each instruction in all blocks:
-  If instruction is a MethodCall:
-    lvalueScope = instruction.lvalue.identifier.scope
-    propertyScope = instruction.value.property.identifier.scope
-
-    If both have scopes:
-      Record that these scopes should be merged (using DisjointSet.union)
-    Else if only lvalue has scope:
-      Record that property should be assigned to lvalueScope
-    Else if only property has scope:
-      Record that property should be assigned to null (no scope)
-
-  If instruction is FunctionExpression or ObjectMethod:
-    Recursively process the nested function
-```
-
-### Phase 2: Merge Scopes
-```
-For each merged scope group:
-  Pick a "root" scope
-  Extend root's range to cover all merged scopes:
-    root.range.start = min(all scope start points)
-    root.range.end = max(all scope end points)
-```
-
-### Phase 3: Apply Changes
-```
-For each instruction:
-  If lvalue was recorded for remapping:
-    Set identifier.scope to the mapped value
-  Else if identifier has a scope that was merged:
-    Set identifier.scope to the merged root scope
-```
-
-## Key Data Structures
-
-1. **`scopeMapping: Map<IdentifierId, ReactiveScope | null>`**
-   - Maps property identifier IDs to their new scope assignment
-   - Value of `null` means the scope should be removed
-
-2. **`mergedScopes: DisjointSet<ReactiveScope>`**
-   - Union-find data structure tracking scopes that need to be merged
-   - Used when both MethodCall and property have different scopes
-
-3. **`ReactiveScope`** (from HIR)
-   - Contains `range: { start: InstructionId, end: InstructionId }`
-   - The range defines which instructions are part of the scope
-
-## Edge Cases
-
-### Both Have the Same Scope Already
-No action needed (implicit in the logic).
-
-### Nested Functions
-The pass recursively processes `FunctionExpression` and `ObjectMethod` instructions to handle closures.
-
-### Multiple MethodCalls Sharing Scopes
-The DisjointSet handles transitive merging - if A merges with B, and B merges with C, all three end up in the same scope.
-
-### Property Without Scope, MethodCall Without Scope
-No action needed (both already aligned at `null`).
-
-## TODOs
-There are no explicit TODO comments in the source code.
-
-## Example
-
-### Fixture: `alias-capture-in-method-receiver.js`
-
-**Source code:**
-```javascript
-function Component() {
-  let a = someObj();
-  let x = [];
-  x.push(a);
-  return [x, a];
-}
-```
-
-**Before AlignMethodCallScopes:**
-```
-[7] store $24_@1[4:10]:TFunction = PropertyLoad capture $23_@1.push
-[9] mutate? $26:TPrimitive = MethodCall store $23_@1.read $24_@1(capture $25)
-```
-- PropertyLoad result `$24_@1` has scope `@1`
-- MethodCall result `$26` has no scope (`null`)
-
-**After AlignMethodCallScopes:**
-```
-[7] store $24[4:10]:TFunction = PropertyLoad capture $23_@1.push
-[9] mutate? $26:TPrimitive = MethodCall store $23_@1.read $24(capture $25)
-```
-- PropertyLoad result `$24` now has **no scope** (the `_@1` suffix removed)
-- MethodCall result `$26` still has no scope
-
-**Why this matters:**
-Without this alignment, later passes might try to memoize the `.push` property load separately from the actual `push()` call. This would be incorrect because:
-1. Reading a method from an object and calling it are semantically one operation
-2. The property load's value (the bound method) is only valid immediately when called on the same receiver
-3. Separate memoization could lead to stale method references or incorrect this-binding

compiler/packages/babel-plugin-react-compiler/docs/passes/14-alignObjectMethodScopes.md

@@ -1,128 +0,0 @@
-# alignObjectMethodScopes
-
-## File
-`src/ReactiveScopes/AlignObjectMethodScopes.ts`
-
-## Purpose
-Ensures that object method values and their enclosing object expressions share the same reactive scope. This is critical for code generation because JavaScript requires object method definitions to be inlined within their containing object literals. If the object method and object expression were in different reactive scopes (which map to different memoization blocks), the generated code would be invalid since you cannot reference an object method defined in one block from an object literal in a different block.
-
-From the file's documentation:
-> "To produce a well-formed JS program in Codegen, object methods and object expressions must be in the same ReactiveBlock as object method definitions must be inlined."
-
-## Input Invariants
-- Reactive scopes have been inferred: This pass runs after `InferReactiveScopeVariables`
-- ObjectMethod and ObjectExpression have non-null scopes: The pass asserts this with an invariant check
-- Scopes are disjoint across functions: The pass assumes that scopes do not overlap between parent and nested functions
-
-## Output Guarantees
-- ObjectMethod and ObjectExpression share the same scope: Any ObjectMethod used as a property in an ObjectExpression will have its scope merged with the ObjectExpression's scope
-- Merged scope covers both ranges: The resulting merged scope's range is expanded to cover the minimum start and maximum end of all merged scopes
-- All identifiers are repointed: All identifiers whose scopes were merged are updated to point to the canonical root scope
-- Inner functions are also processed: The pass recursively handles nested ObjectMethod and FunctionExpression values
-
-## Algorithm
-
-### Phase 1: Find Scopes to Merge (`findScopesToMerge`)
-1. Iterate through all blocks and instructions in the function
-2. Track all ObjectMethod declarations in a set by their lvalue identifier
-3. When encountering an ObjectExpression, check each operand:
-   - If an operand's identifier was previously recorded as an ObjectMethod declaration
-   - Get the scope of both the ObjectMethod operand and the ObjectExpression lvalue
-   - Assert both scopes are non-null
-   - Union these two scopes together in a DisjointSet data structure
-
-### Phase 2: Merge and Repoint Scopes (`alignObjectMethodScopes`)
-1. Recursively process inner functions first (ObjectMethod and FunctionExpression values)
-2. Canonicalize the DisjointSet to get a mapping from each scope to its root
-3. **Step 1 - Merge ranges**: For each scope that maps to a different root:
-   - Expand the root's range to encompass both the original range and the merged scope's range
-   - `root.range.start = min(scope.range.start, root.range.start)`
-   - `root.range.end = max(scope.range.end, root.range.end)`
-4. **Step 2 - Repoint identifiers**: For each instruction's lvalue:
-   - If the identifier has a scope that was merged
-   - Update the identifier's scope reference to point to the canonical root
-
-## Key Data Structures
-
-1. **DisjointSet<ReactiveScope>** - A union-find data structure that tracks which scopes should be merged together. Uses path compression for efficient `find()` operations.
-
-2. **Set<Identifier>** - Tracks which identifiers are ObjectMethod declarations, used to identify when an ObjectExpression operand is an object method.
-
-3. **ReactiveScope** - Contains:
-   - `id: ScopeId` - Unique identifier
-   - `range: MutableRange` - Start and end instruction IDs
-   - `dependencies` - Inputs to the scope
-   - `declarations` - Values produced by the scope
-
-4. **MutableRange** - Has `start` and `end` InstructionId fields that define the scope's extent.
-
-## Edge Cases
-
-### Nested Object Methods
-When an object method itself contains another object with methods, the pass recursively processes inner functions first before handling the outer function's scopes.
-
-### Multiple Object Methods in Same Object
-If an object has multiple method properties, all their scopes will be merged with the object's scope through the DisjointSet.
-
-### Object Methods in Conditional Expressions
-Object methods inside ternary expressions still need scope alignment to ensure the method and its containing object are in the same reactive block.
-
-### Method Call After Object Creation
-The pass works in conjunction with `AlignMethodCallScopes` (which runs immediately before) to ensure that method calls on objects with object methods are also properly scoped.
-
-## TODOs
-None explicitly marked in the source file.
-
-## Example
-
-### Fixture: `object-method-shorthand.js`
-
-**Input:**
-```javascript
-function Component() {
-  let obj = {
-    method() {
-      return 1;
-    },
-  };
-  return obj.method();
-}
-```
-
-**Before AlignObjectMethodScopes:**
-```
-InferReactiveScopeVariables:
-  [1] mutate? $12_@0:TObjectMethod = ObjectMethod ...    // scope @0
-  [2] mutate? $14_@1[2:7]:TObject = Object { method: ... } // scope @1 (range 2:7)
-```
-The ObjectMethod `$12` is in scope `@0` while the ObjectExpression `$14` is in scope `@1` with range `[2:7]`.
-
-**After AlignObjectMethodScopes:**
-```
-AlignObjectMethodScopes:
-  [1] mutate? $12_@0[1:7]:TObjectMethod = ObjectMethod ... // scope @0, range now 1:7
-  [2] mutate? $14_@0[1:7]:TObject = Object { method: ... } // also scope @0, range 1:7
-```
-Both identifiers are in the same scope `@0`, and the scope's range has been expanded to `[1:7]` to cover both instructions.
-
-**Final Generated Code:**
-```javascript
-function Component() {
-  const $ = _c(1);
-  let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    const obj = {
-      method() {
-        return 1;
-      },
-    };
-    t0 = obj.method();
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  return t0;
-}
-```
-
-The object literal with its method and the subsequent method call are all inside the same memoization block, producing valid JavaScript where the method definition is inlined within the object literal.

compiler/packages/babel-plugin-react-compiler/docs/passes/15-alignReactiveScopesToBlockScopesHIR.md

@@ -1,177 +0,0 @@
-# alignReactiveScopesToBlockScopesHIR
-
-## File
-`src/ReactiveScopes/AlignReactiveScopesToBlockScopesHIR.ts`
-
-## Purpose
-This is the **2nd of 4 passes** that determine how to break a function into discrete reactive scopes (independently memoizable units of code). The pass aligns reactive scope boundaries to control flow (block scope) boundaries.
-
-The problem it solves: Prior inference passes assign reactive scopes to operands based on mutation ranges at arbitrary instruction points in the control-flow graph. However, to generate memoization blocks around instructions, scopes must be aligned to block-scope boundaries -- you cannot memoize half of a loop or half of an if-block.
-
-**Example from the source code comments:**
-```javascript
-function foo(cond, a) {
-                    // original scope end
-                         // expanded scope end
-   const x = [];    |    |
-   if (cond) {      |    |
-     ...            |    |
-     x.push(a);     <--- original scope ended here
-     ...                 |
-   }                     <--- scope must extend to here
-}
-```
-
-## Input Invariants
-- `InferReactiveScopeVariables` has run: Each identifier has been assigned a `ReactiveScope` with a `range` (start/end instruction IDs) based on mutation analysis
-- The HIR is in SSA form: Blocks have unique IDs, instructions have unique IDs, and control flow is represented with basic blocks
-- Each block has a terminal with possible successors and fallthroughs
-- Each scope has a mutable range `{start: InstructionId, end: InstructionId}` indicating when the scope is active
-
-## Output Guarantees
-- **Scopes end at valid block boundaries**: A reactive scope may only end at the same block scope level as it began. The scope's `range.end` is updated to the first instruction of the fallthrough block after any control flow structure that the scope overlaps
-- **Scopes start at valid block boundaries**: For labeled breaks (gotos to a label), scopes that extend beyond the goto have their `range.start` extended back to include the label
-- **Value blocks (ternary, logical, optional) are handled specially**: Scopes inside value blocks are extended to align with the outer block scope's instruction range
-
-## Algorithm
-
-The pass performs a single forward traversal over all blocks:
-
-### 1. Tracking Active Scopes
-- Maintains `activeScopes: Set<ReactiveScope>` - scopes whose range overlaps the current block
-- Maintains `activeBlockFallthroughRanges: Array<{range, fallthrough}>` - stack of pending block-fallthrough ranges
-
-### 2. Per-Block Processing
-For each block:
-- Prune `activeScopes` to only those that extend past the current block's start
-- If this block is a fallthrough target, pop the range from the stack and extend all active scopes' start to the range start
-
-### 3. Recording Places
-For each instruction lvalue and operand:
-- If the place has a scope, add it to `activeScopes`
-- If inside a value block, extend the scope's range to match the value block's outer range
-
-### 4. Handling Block Fallthroughs
-When a terminal has a fallthrough (not a simple branch):
-- Extend all active scopes whose `range.end > terminal.id` to at least the first instruction of the fallthrough block
-- Push the fallthrough range onto the stack for future scopes
-
-### 5. Handling Labeled Breaks (Goto)
-When encountering a goto to a label (not the natural fallthrough):
-- Find the corresponding fallthrough range on the stack
-- Extend all active scopes to span from the label start to its fallthrough end
-
-### 6. Value Block Handling
-For ternary, logical, and optional terminals:
-- Create `ValueBlockNode` to track the outer block's instruction range
-- Scopes inside value blocks inherit this range, ensuring they align to the outer block scope
-
-## Key Data Structures
-
-```typescript
-type ValueBlockNode = {
-  kind: 'node';
-  id: InstructionId;
-  valueRange: MutableRange;  // Range of outer block scope
-  children: Array<ValueBlockNode | ReactiveScopeNode>;
-};
-
-type ReactiveScopeNode = {
-  kind: 'scope';
-  id: InstructionId;
-  scope: ReactiveScope;
-};
-
-// Tracked during traversal:
-activeBlockFallthroughRanges: Array<{
-  range: InstructionRange;
-  fallthrough: BlockId;
-}>;
-activeScopes: Set<ReactiveScope>;
-valueBlockNodes: Map<BlockId, ValueBlockNode>;
-```
-
-## Edge Cases
-
-### Labeled Breaks
-When a `goto` jumps to a label (not the natural fallthrough), scopes must be extended to include the entire labeled block range, preventing the break from jumping out of the scope.
-
-### Value Blocks (Ternary/Logical/Optional)
-These create nested "value" contexts. Scopes inside must be aligned to the outer block scope's boundaries, not the value block's boundaries.
-
-### Nested Control Flow
-Deeply nested if-statements require the scope to be extended through all levels back to the outermost block where the scope started.
-
-### do-while and try/catch
-The terminal's successor might be a block (not value block), which is handled specially.
-
-## TODOs
-1. `// TODO: consider pruning activeScopes per instruction` - Currently, `activeScopes` is only pruned at block start points. Some scopes may no longer be active by the time a goto is encountered.
-
-2. `// TODO: add a variant of eachTerminalSuccessor() that visits _all_ successors, not just those that are direct successors for normal control-flow ordering.` - The current implementation uses `mapTerminalSuccessors` which may not visit all successors in all cases.
-
-## Example
-
-### Fixture: `extend-scopes-if.js`
-
-**Input:**
-```javascript
-function foo(a, b, c) {
-  let x = [];
-  if (a) {
-    if (b) {
-      if (c) {
-        x.push(0);  // Mutation of x ends here (instruction 12-13)
-      }
-    }
-  }
-  if (x.length) {  // instruction 16
-    return x;
-  }
-  return null;
-}
-```
-
-**Before AlignReactiveScopesToBlockScopesHIR:**
-```
-x$23_@0[1:13]  // Scope range 1-13
-```
-The scope for `x` ends at instruction 13 (inside the innermost if block).
-
-**After AlignReactiveScopesToBlockScopesHIR:**
-```
-x$23_@0[1:16]  // Scope range extended to 1-16
-```
-The scope is extended to instruction 16 (the first instruction after all the nested if-blocks), aligning to the block scope boundary.
-
-**Generated Code:**
-```javascript
-function foo(a, b, c) {
-  const $ = _c(4);
-  let x;
-  if ($[0] !== a || $[1] !== b || $[2] !== c) {
-    x = [];
-    if (a) {
-      if (b) {
-        if (c) {
-          x.push(0);
-        }
-      }
-    }
-    // Scope ends here, after ALL the if-blocks
-    $[0] = a;
-    $[1] = b;
-    $[2] = c;
-    $[3] = x;
-  } else {
-    x = $[3];
-  }
-  // Code outside the scope
-  if (x.length) {
-    return x;
-  }
-  return null;
-}
-```
-
-The memoization block correctly wraps the entire nested if-structure, not just part of it.

compiler/packages/babel-plugin-react-compiler/docs/passes/16-mergeOverlappingReactiveScopesHIR.md

@@ -1,134 +0,0 @@
-# mergeOverlappingReactiveScopesHIR
-
-## File
-`src/HIR/MergeOverlappingReactiveScopesHIR.ts`
-
-## Purpose
-This pass ensures that reactive scope ranges form valid, non-overlapping blocks in the output JavaScript program. It merges reactive scopes that would otherwise be inconsistent with each other due to:
-
-1. **Overlapping ranges**: Scopes whose instruction ranges partially overlap (not disjoint and not nested) must be merged because the compiler cannot produce valid `if-else` memo blocks for overlapping scopes.
-
-2. **Cross-scope mutations**: When an instruction within one scope mutates a value belonging to a different (outer) scope, those scopes must be merged to maintain correctness.
-
-The pass guarantees that after execution, any two reactive scopes are either:
-- Entirely disjoint (no common instructions)
-- Properly nested (one scope is completely contained within the other)
-
-## Input Invariants
-- Reactive scope variables have been inferred (`InferReactiveScopeVariables` pass has run)
-- Scopes have been aligned to block scopes (`AlignReactiveScopesToBlockScopesHIR` pass has run)
-- Each `Place` may have an associated `ReactiveScope` with a `range` (start/end instruction IDs)
-- Scopes may still have overlapping ranges or contain instructions that mutate outer scopes
-
-## Output Guarantees
-- **No overlapping scopes**: All reactive scopes either are disjoint or properly nested
-- **Consistent mutation boundaries**: Instructions only mutate their "active" scope (the innermost containing scope)
-- **Merged scope ranges**: Merged scopes have their ranges extended to cover the union of all constituent scopes
-- **Updated references**: All `Place` references have their `identifier.scope` updated to point to the merged scope
-
-## Algorithm
-
-### Phase 1: Collect Scope Information (`collectScopeInfo`)
-- Iterates through all instructions and terminals in the function
-- Records for each `Place`:
-  - The scope it belongs to (`placeScopes` map)
-  - When scopes start and end (`scopeStarts` and `scopeEnds` arrays, sorted in descending order by ID)
-- Only records scopes with non-empty ranges (`range.start !== range.end`)
-
-### Phase 2: Detect Overlapping Scopes (`getOverlappingReactiveScopes`)
-Uses a stack-based traversal to track "active" scopes at each instruction:
-
-1. **For each instruction/terminal**:
-   - **Handle scope endings**: Pop completed scopes from the active stack. If a scope ends while other scopes that started later are still active (detected by finding the scope is not at the top of the stack), those scopes overlap and must be merged via `DisjointSet.union()`.
-
-   - **Handle scope starts**: Push new scopes onto the active stack (sorted by end time descending so earlier-ending scopes are at the top). Merge any scopes that have identical start/end ranges.
-
-   - **Handle mutations**: For each operand/lvalue, if it:
-     - Has an associated scope
-     - Is mutable at the current instruction
-     - The scope is active but not at the top of the stack (i.e., an outer scope)
-
-     Then merge all scopes from the mutated outer scope to the top of the stack.
-
-2. **Special case**: Primitive operands in `FunctionExpression` and `ObjectMethod` are skipped.
-
-### Phase 3: Merge Scopes and Rewrite References
-1. For each scope in the disjoint set, compute the merged range as the union (min start, max end)
-2. Update all `Place.identifier.scope` references to point to the merged "group" scope
-
-## Key Data Structures
-
-### ScopeInfo
-```typescript
-type ScopeInfo = {
-  scopeStarts: Array<{id: InstructionId; scopes: Set<ReactiveScope>}>;
-  scopeEnds: Array<{id: InstructionId; scopes: Set<ReactiveScope>}>;
-  placeScopes: Map<Place, ReactiveScope>;
-};
-```
-
-### TraversalState
-```typescript
-type TraversalState = {
-  joined: DisjointSet<ReactiveScope>;  // Union-find for merged scopes
-  activeScopes: Array<ReactiveScope>;   // Stack of currently active scopes
-};
-```
-
-### DisjointSet<ReactiveScope>
-A union-find data structure that tracks which scopes should be merged into the same group.
-
-## Edge Cases
-
-### Identical Scope Ranges
-When multiple scopes have the exact same start and end, they are automatically merged since they would produce the same reactive block.
-
-### Empty Scopes
-Scopes where `range.start === range.end` are skipped entirely.
-
-### Primitive Captures in Functions
-When a `FunctionExpression` or `ObjectMethod` captures a primitive operand, it's excluded from scope merging analysis.
-
-### JSX Single-Instruction Scopes
-The comment in the code notes this isn't perfect - mutating scopes may get merged with JSX single-instruction scopes.
-
-### Non-Mutating Captures
-The pass records both mutating and non-mutating scopes to handle cases where still-mutating values are aliased by inner scopes.
-
-## TODOs
-From the comments in the source file, the design constraints arise from the current compiler output design:
-- **Instruction ordering is preserved**: If reordering were allowed, disjoint ranges could be produced by reordering mutating instructions
-- **One if-else block per scope**: The current design doesn't allow composing a reactive scope from disconnected instruction ranges
-
-## Example
-
-### Fixture: `overlapping-scopes-interleaved.js`
-
-**Input Code:**
-```javascript
-function foo(a, b) {
-  let x = [];
-  let y = [];
-  x.push(a);
-  y.push(b);
-}
-```
-
-**Before MergeOverlappingReactiveScopesHIR:**
-```
-[1] $20_@0[1:9] = Array []        // x belongs to scope @0, range [1:9]
-[2] x$21_@0[1:9] = StoreLocal...
-[3] $23_@1[3:13] = Array []       // y belongs to scope @1, range [3:13]
-[4] y$24_@1[3:13] = StoreLocal...
-```
-Scopes @0 [1:9] and @1 [3:13] overlap: @0 starts at 1, @1 starts at 3, @0 ends at 9, @1 ends at 13. This is invalid.
-
-**After MergeOverlappingReactiveScopesHIR:**
-```
-[1] $20_@0[1:13] = Array []       // Merged scope @0, range [1:13]
-[2] x$21_@0[1:13] = StoreLocal...
-[3] $23_@0[1:13] = Array []       // Now also scope @0
-[4] y$24_@0[1:13] = StoreLocal...
-```
-
-Both `x` and `y` now belong to the same merged scope @0 with range [1:13], producing a single `if-else` memo block in the output.

compiler/packages/babel-plugin-react-compiler/docs/passes/17-buildReactiveScopeTerminalsHIR.md

@@ -1,161 +0,0 @@
-# buildReactiveScopeTerminalsHIR
-
-## File
-`src/HIR/BuildReactiveScopeTerminalsHIR.ts`
-
-## Purpose
-This pass transforms the HIR by inserting `ReactiveScopeTerminal` nodes to explicitly demarcate the boundaries of reactive scopes within the control flow graph. It converts the implicit scope ranges (stored on identifiers as `identifier.scope.range`) into explicit control flow structure by:
-
-1. Inserting a `scope` terminal at the **start** of each reactive scope
-2. Inserting a `goto` terminal at the **end** of each reactive scope
-3. Creating fallthrough blocks to properly connect the scopes to the rest of the CFG
-
-This transformation makes scope boundaries first-class elements in the CFG, which is essential for later passes that generate the memoization code (the `if ($[n] !== dep)` checks).
-
-## Input Invariants
-- **Properly nested scopes and blocks**: The pass assumes `assertValidBlockNesting` has passed, meaning all program blocks and reactive scopes form a proper tree hierarchy
-- **Aligned scope ranges**: Reactive scope ranges have been correctly aligned and merged by previous passes
-- **Valid instruction IDs**: All instructions have sequential IDs that define the scope boundaries
-- **Scopes attached to identifiers**: Reactive scopes are found by traversing all `Place` operands and collecting unique non-empty scopes
-
-## Output Guarantees
-- **Explicit scope terminals**: Each reactive scope is represented in the CFG as a `ReactiveScopeTerminal` with:
-  - `block` - The BlockId containing the scope's instructions
-  - `fallthrough` - The BlockId that executes after the scope
-- **Proper block structure**: Original blocks are split at scope boundaries
-- **Restored HIR invariants**: The pass restores RPO ordering, predecessor sets, instruction IDs, and scope/identifier ranges
-- **Updated phi nodes**: Phi operands are repointed when their source blocks are split
-
-## Algorithm
-
-### Step 1: Collect Scope Rewrites
-```
-for each reactive scope (in range pre-order):
-  push StartScope rewrite at scope.range.start
-  push EndScope rewrite at scope.range.end
-```
-The `recursivelyTraverseItems` helper traverses scopes in pre-order (outer scopes before inner scopes).
-
-### Step 2: Apply Rewrites by Splitting Blocks
-```
-reverse queuedRewrites (to pop in ascending instruction order)
-for each block:
-  for each instruction (or terminal):
-    while there are rewrites <= current instruction ID:
-      split block at current index
-      insert scope terminal (for start) or goto terminal (for end)
-  emit final block segment with original terminal
-```
-
-### Step 3: Repoint Phi Nodes
-When a block is split, its final segment gets a new BlockId. Phi operands that referenced the original block are updated to reference the new final block.
-
-### Step 4: Restore HIR Invariants
-- Recompute RPO (reverse post-order) block traversal
-- Recalculate predecessor sets
-- Renumber instruction IDs
-- Fix scope and identifier ranges to match new instruction IDs
-
-## Key Data Structures
-
-### TerminalRewriteInfo
-```typescript
-type TerminalRewriteInfo =
-  | {
-      kind: 'StartScope';
-      blockId: BlockId;        // New block for scope content
-      fallthroughId: BlockId;  // Block after scope ends
-      instrId: InstructionId;  // Where to insert
-      scope: ReactiveScope;    // The scope being created
-    }
-  | {
-      kind: 'EndScope';
-      instrId: InstructionId;  // Where to insert
-      fallthroughId: BlockId;  // Same as corresponding StartScope
-    };
-```
-
-### RewriteContext
-```typescript
-type RewriteContext = {
-  source: BasicBlock;        // Original block being split
-  instrSliceIdx: number;     // Current slice start index
-  nextPreds: Set<BlockId>;   // Predecessors for next emitted block
-  nextBlockId: BlockId;      // BlockId for next emitted block
-  rewrites: Array<BasicBlock>; // Accumulated split blocks
-};
-```
-
-### ScopeTraversalContext
-```typescript
-type ScopeTraversalContext = {
-  fallthroughs: Map<ScopeId, BlockId>; // Cache: scope -> its fallthrough block
-  rewrites: Array<TerminalRewriteInfo>;
-  env: Environment;
-};
-```
-
-## Edge Cases
-
-### Multiple Rewrites at Same Instruction ID
-The while loop in Step 2 handles multiple scope start/ends at the same instruction ID.
-
-### Nested Scopes
-The pre-order traversal ensures outer scopes are processed before inner scopes, creating proper nesting in the CFG.
-
-### Empty Blocks After Split
-When a scope boundary falls at the start of a block, the split may create a block with no instructions (only a terminal).
-
-### Control Flow Within Scopes
-The pass preserves existing control flow (if/else, loops) within scopes; it only adds scope entry/exit points.
-
-### Early Returns
-When a return occurs within a scope, the scope terminal still has a fallthrough block, but that block may contain `Unreachable` terminal.
-
-## TODOs
-Line 283-284:
-```typescript
-// TODO make consistent instruction IDs instead of reusing
-```
-
-## Example
-
-### Fixture: `reactive-scopes-if.js`
-
-**Before BuildReactiveScopeTerminalsHIR:**
-```
-bb0 (block):
-  [1] $29_@0[1:22] = Array []           // x with scope @0 range [1:22]
-  [2] StoreLocal x$30_@0 = $29_@0
-  [3] $32 = LoadLocal a$26
-  [4] If ($32) then:bb2 else:bb3 fallthrough=bb1
-bb2:
-  [5] $33_@1[5:11] = Array []           // y with scope @1 range [5:11]
-  ...
-```
-
-**After BuildReactiveScopeTerminalsHIR:**
-```
-bb0 (block):
-  [1] Scope @0 [1:28] block=bb9 fallthrough=bb10   // <-- scope terminal inserted
-bb9:
-  [2] $29_@0 = Array []
-  [3] StoreLocal x$30_@0 = $29_@0
-  [4] $32 = LoadLocal a$26
-  [5] If ($32) then:bb2 else:bb3 fallthrough=bb1
-bb2:
-  [6] Scope @1 [6:14] block=bb11 fallthrough=bb12  // <-- nested scope terminal
-bb11:
-  [7] $33_@1 = Array []
-  ...
-  [13] Goto bb12                                    // <-- scope end goto
-bb12:
-  ...
-bb1:
-  [27] Goto bb10                                    // <-- scope @0 end goto
-bb10:
-  [28] $50 = LoadLocal x$30_@0
-  [29] Return $50
-```
-
-The key transformation is that scope boundaries become explicit control flow: a `Scope` terminal enters the scope content block, and a `Goto` terminal exits to the fallthrough block. This structure is later used to generate the memoization checks.