Update on "[compiler][repro] Test fixture for fbt whitespace bug"

[ghstack-poisoned]

.circleci/config.yml

@@ -0,0 +1,395 @@
+version: 2.1
+
+aliases:
+  - &docker
+    - image: cimg/node:18.20.1-browsers
+
+  - &environment
+    TZ: /usr/share/zoneinfo/America/Los_Angeles
+
+  - &TEST_PARALLELISM 20
+
+  - &attach_workspace
+    at: build
+
+commands:
+  setup_node_modules:
+    description: "Restore node_modules"
+    steps:
+      - restore_cache:
+          name: Restore yarn cache
+          keys:
+            - v2-yarn_cache-{{ arch }}-{{ checksum "yarn.lock" }}
+      - run:
+          name: Install dependencies
+          command: |
+            yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
+            if [ $? -ne 0 ]; then
+              yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
+            fi
+          environment:
+          # If we start needing the Electron binary, please ensure the binary is cached in CI following https://www.electronjs.org/docs/latest/tutorial/installation
+            ELECTRON_SKIP_BINARY_DOWNLOAD: 1
+      - save_cache:
+          name: Save yarn cache
+          key: v2-yarn_cache-{{ arch }}-{{ checksum "yarn.lock" }}
+          paths:
+            - ~/.cache/yarn
+
+# The CircleCI API doesn't yet support triggering a specific workflow, but it
+# does support triggering a pipeline. So as a workaround you can triggger the
+# entire pipeline and use parameters to disable everything except the workflow
+# you want. CircleCI recommends this workaround here:
+# https://support.circleci.com/hc/en-us/articles/360050351292-How-to-trigger-a-workflow-via-CircleCI-API-v2-
+parameters:
+  # This is only set when triggering the CI pipeline via an API request.
+  prerelease_commit_sha:
+    type: string
+    default: ''
+
+jobs:
+  scrape_warning_messages:
+    docker: *docker
+    environment: *environment
+
+    steps:
+      - checkout
+      - setup_node_modules
+      - run:
+          command: |
+            mkdir -p ./build/__test_utils__
+            node ./scripts/print-warnings/print-warnings.js > build/__test_utils__/ReactAllWarnings.js
+      - persist_to_workspace:
+          root: .
+          paths:
+            - build
+
+  yarn_build:
+    docker: *docker
+    environment: *environment
+    parallelism: 40
+    steps:
+      - checkout
+      - setup_node_modules
+      - run: yarn build --ci=circleci
+      - persist_to_workspace:
+          root: .
+          paths:
+            - build
+
+  download_build:
+    docker: *docker
+    environment: *environment
+    parameters:
+      revision:
+        type: string
+    steps:
+      - checkout
+      - setup_node_modules
+      - run:
+          name: Download artifacts for revision
+          command: |
+              git fetch origin main
+              cd ./scripts/release && yarn && cd ../../
+              scripts/release/download-experimental-build.js --commit=<< parameters.revision >> --allowBrokenCI
+      - persist_to_workspace:
+          root: .
+          paths:
+            - build
+
+  download_base_build_for_sizebot:
+    docker: *docker
+    environment: *environment
+    steps:
+      - checkout
+      - setup_node_modules
+      - run:
+          name: Download artifacts for base revision
+          command: |
+            git fetch origin main
+            cd ./scripts/release && yarn && cd ../../
+            scripts/release/download-experimental-build.js --commit=$(git merge-base HEAD origin/main) --allowBrokenCI
+            mv ./build ./base-build
+
+      - run:
+          # 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
+          command: rm -rf ./base-build/node_modules
+
+      - persist_to_workspace:
+          root: .
+          paths:
+            - base-build
+
+  process_artifacts_combined:
+    docker: *docker
+    environment: *environment
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - setup_node_modules
+      - run: echo "<< pipeline.git.revision	>>" >> build/COMMIT_SHA
+        # Compress build directory into a single tarball for easy download
+      - run: tar -zcvf ./build.tgz ./build
+        # TODO: Migrate scripts to use `build` directory instead of `build2`
+      - run: cp ./build.tgz ./build2.tgz
+      - store_artifacts:
+          path: ./build2.tgz
+      - store_artifacts:
+          path: ./build.tgz
+
+  sizebot:
+    docker: *docker
+    environment: *environment
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - run: echo "<< pipeline.git.revision	>>" >> build/COMMIT_SHA
+      - setup_node_modules
+      - run:
+          command: node ./scripts/tasks/danger
+      - store_artifacts:
+          path: sizebot-message.md
+
+  build_devtools_and_process_artifacts:
+    docker: *docker
+    environment: *environment
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - setup_node_modules
+      - run:
+          environment:
+            RELEASE_CHANNEL: experimental
+          command: ./scripts/circleci/pack_and_store_devtools_artifacts.sh
+      - store_artifacts:
+          path: ./build/devtools.tgz
+      # Simplifies getting the extension for local testing
+      - store_artifacts:
+          path: ./build/devtools/chrome-extension.zip
+          destination: react-devtools-chrome-extension.zip
+      - store_artifacts:
+          path: ./build/devtools/firefox-extension.zip
+          destination: react-devtools-firefox-extension.zip
+
+  run_devtools_e2e_tests:
+    docker: *docker
+    environment: *environment
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - setup_node_modules
+      - run:
+          name: Playwright install deps
+          command: |
+            npx playwright install
+            sudo npx playwright install-deps
+      - run:
+          environment:
+            RELEASE_CHANNEL: experimental
+          command: ./scripts/circleci/run_devtools_e2e_tests.js
+
+  run_devtools_tests_for_versions:
+    docker: *docker
+    environment: *environment
+    parallelism: *TEST_PARALLELISM
+    parameters:
+      version:
+        type: string
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - setup_node_modules
+      - run: ./scripts/circleci/download_devtools_regression_build.js << parameters.version >> --replaceBuild
+      - run: node ./scripts/jest/jest-cli.js --build --project devtools --release-channel=experimental --reactVersion << parameters.version >> --ci=circleci
+
+  run_devtools_e2e_tests_for_versions:
+    docker: *docker
+    environment: *environment
+    parallelism: *TEST_PARALLELISM
+    parameters:
+      version:
+        type: string
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - setup_node_modules
+      - run:
+          name: Playwright install deps
+          command: |
+            npx playwright install
+            sudo npx playwright install-deps
+      - run: ./scripts/circleci/download_devtools_regression_build.js << parameters.version >>
+      - run:
+          environment:
+            RELEASE_CHANNEL: experimental
+          command: ./scripts/circleci/run_devtools_e2e_tests.js << parameters.version >>
+      - run:
+          name: Cleanup build regression folder
+          command: rm -r ./build-regression
+      - store_artifacts:
+          path: ./tmp/screenshots
+
+  publish_prerelease:
+    parameters:
+      commit_sha:
+        type: string
+      release_channel:
+        type: string
+      dist_tag:
+        type: string
+    docker: *docker
+    environment: *environment
+    steps:
+      - checkout
+      - setup_node_modules
+      - run:
+          name: Run publish script
+          command: |
+            git fetch origin main
+            cd ./scripts/release && yarn && cd ../../
+            scripts/release/prepare-release-from-ci.js --skipTests -r << parameters.release_channel >> --commit=<< parameters.commit_sha >>
+            cp ./scripts/release/ci-npmrc ~/.npmrc
+            scripts/release/publish.js --ci --tags << parameters.dist_tag >>
+
+workflows:
+
+  build_and_test:
+    unless: << pipeline.parameters.prerelease_commit_sha >>
+    jobs:
+      - yarn_build:
+          filters:
+            branches:
+              ignore:
+                - builds/facebook-www
+      - scrape_warning_messages:
+          filters:
+            branches:
+              ignore:
+                - builds/facebook-www
+      - process_artifacts_combined:
+          requires:
+            - scrape_warning_messages
+            - yarn_build
+      - download_base_build_for_sizebot:
+          filters:
+            branches:
+              ignore:
+                - main
+                - builds/facebook-www
+      - sizebot:
+          filters:
+            branches:
+              ignore:
+                - main
+          requires:
+            - download_base_build_for_sizebot
+            - yarn_build
+
+  devtools_regression_tests:
+    unless: << pipeline.parameters.prerelease_commit_sha >>
+    triggers:
+      - schedule:
+          # DevTools regression tests run once a day
+          cron: "0 0 * * *"
+          filters:
+            branches:
+              only:
+                - main
+    jobs:
+      - download_build:
+          revision: << pipeline.git.revision >>
+      - build_devtools_and_process_artifacts:
+          requires:
+            - download_build
+      - run_devtools_tests_for_versions:
+          requires:
+            - build_devtools_and_process_artifacts
+          matrix:
+            parameters:
+              version:
+                - "16.0"
+                - "16.5" # schedule package
+                - "16.8" # hooks
+                - "17.0"
+                - "18.0"
+      - run_devtools_e2e_tests_for_versions:
+          requires:
+            - build_devtools_and_process_artifacts
+          matrix:
+            parameters:
+              version:
+                - "16.0"
+                - "16.5" # schedule package
+                - "16.8" # hooks
+                - "17.0"
+                - "18.0"
+
+  # Used to publish a prerelease manually via the command line
+  publish_preleases:
+    when: << pipeline.parameters.prerelease_commit_sha >>
+    jobs:
+      - publish_prerelease:
+          name: Publish to Canary channel
+          commit_sha: << pipeline.parameters.prerelease_commit_sha >>
+          release_channel: stable
+          # The tags to use when publishing canaries. The main one we should
+          # always include is "canary" but we can use multiple (e.g. alpha,
+          # beta, rc). To declare multiple, use a comma-separated string, like
+          # this:
+          #   dist_tag: "canary,alpha,beta,rc"
+          #
+          # TODO: We currently tag canaries with "next" in addition to "canary"
+          # because this used to be called the "next" channel and some
+          # 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,rc"
+      - publish_prerelease:
+          name: Publish to Experimental channel
+          requires:
+            # 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.
+            - Publish to Canary channel
+          commit_sha: << pipeline.parameters.prerelease_commit_sha >>
+          release_channel: experimental
+          dist_tag: experimental
+
+  # Publishes on a cron schedule
+  publish_preleases_nightly:
+    unless: << pipeline.parameters.prerelease_commit_sha >>
+    triggers:
+      - schedule:
+          # At 10 minutes past 16:00 on Mon, Tue, Wed, Thu, and Fri
+          cron: "10 16 * * 1,2,3,4,5"
+          filters:
+            branches:
+              only:
+                - main
+    jobs:
+      - publish_prerelease:
+          name: Publish to Canary channel
+          commit_sha: << pipeline.git.revision >>
+          release_channel: stable
+          dist_tag: "canary,next,rc"
+      - publish_prerelease:
+          name: Publish to Experimental channel
+          requires:
+            # 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.
+            - Publish to Canary channel
+          commit_sha: << pipeline.git.revision >>
+          release_channel: experimental
+          dist_tag: experimental

.editorconfig

@@ -8,9 +8,11 @@ indent_size = 2
 indent_style = space
 insert_final_newline = true
 max_line_length = 80
+trim_trailing_whitespace = true
 
 [*.md]
 max_line_length = 0
+trim_trailing_whitespace = false
 
 [COMMIT_EDITMSG]
 max_line_length = 0

.eslintrc.js

@@ -23,7 +23,6 @@ module.exports = {
     'babel',
     'ft-flow',
     'jest',
-    'es',
     'no-for-of-loops',
     'no-function-declare-after-return',
     'react',
@@ -48,7 +47,7 @@ module.exports = {
     'ft-flow/no-unused-expressions': ERROR,
     // 'ft-flow/no-weak-types': WARNING,
     // 'ft-flow/require-valid-file-annotation': ERROR,
-    'es/no-optional-chaining': ERROR,
+
     'no-cond-assign': OFF,
     'no-constant-condition': OFF,
     'no-control-regex': OFF,
@@ -303,6 +302,7 @@ module.exports = {
       ERROR,
       {isProductionUserAppCode: true},
     ],
+    'react-internal/no-to-warn-dev-within-to-throw': ERROR,
     'react-internal/warning-args': ERROR,
     'react-internal/no-production-logging': ERROR,
   },
@@ -329,7 +329,6 @@ module.exports = {
         'packages/react-server-dom-esm/**/*.js',
         'packages/react-server-dom-webpack/**/*.js',
         'packages/react-server-dom-turbopack/**/*.js',
-        'packages/react-server-dom-parcel/**/*.js',
         'packages/react-server-dom-fb/**/*.js',
         'packages/react-test-renderer/**/*.js',
         'packages/react-debug-tools/**/*.js',
@@ -436,7 +435,6 @@ module.exports = {
         'packages/react-dom/src/test-utils/*.js',
       ],
       rules: {
-        'es/no-optional-chaining': OFF,
         'react-internal/no-production-logging': OFF,
         'react-internal/warning-args': OFF,
         'react-internal/safe-string-coercion': [
@@ -446,7 +444,10 @@ module.exports = {
       },
     },
     {
-      files: ['scripts/eslint-rules/*.js'],
+      files: [
+        'scripts/eslint-rules/*.js',
+        'packages/eslint-plugin-react-hooks/src/*.js',
+      ],
       plugins: ['eslint-plugin'],
       rules: {
         'eslint-plugin/prefer-object-rule': ERROR,
@@ -478,12 +479,6 @@ module.exports = {
         __turbopack_require__: 'readonly',
       },
     },
-    {
-      files: ['packages/react-server-dom-parcel/**/*.js'],
-      globals: {
-        parcelRequire: 'readonly',
-      },
-    },
     {
       files: ['packages/scheduler/**/*.js'],
       globals: {
@@ -493,19 +488,15 @@ module.exports = {
     {
       files: [
         'packages/react-devtools-extensions/**/*.js',
-        '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/shared/DevToolsComponentStackFrame.js',
-        'packages/react-devtools-shared/src/frontend/utils/withPermissionsCheck.js',
+        'packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js',
       ],
       globals: {
         __IS_CHROME__: 'readonly',
         __IS_FIREFOX__: 'readonly',
         __IS_EDGE__: 'readonly',
-        __IS_NATIVE__: 'readonly',
         __IS_INTERNAL_VERSION__: 'readonly',
-        chrome: 'readonly',
       },
     },
     {
@@ -514,26 +505,6 @@ module.exports = {
         __IS_INTERNAL_VERSION__: 'readonly',
       },
     },
-    {
-      files: ['packages/eslint-plugin-react-hooks/src/**/*'],
-      extends: ['plugin:@typescript-eslint/recommended'],
-      parser: '@typescript-eslint/parser',
-      plugins: ['@typescript-eslint', 'eslint-plugin'],
-      rules: {
-        '@typescript-eslint/no-explicit-any': OFF,
-        '@typescript-eslint/no-non-null-assertion': OFF,
-        '@typescript-eslint/array-type': [ERROR, {default: 'generic'}],
-
-        'es/no-optional-chaining': OFF,
-
-        'eslint-plugin/prefer-object-rule': ERROR,
-        'eslint-plugin/require-meta-fixable': [
-          ERROR,
-          {catchNoFixerButFixableProperty: true},
-        ],
-        'eslint-plugin/require-meta-has-suggestions': ERROR,
-      },
-    },
   ],
 
   env: {
@@ -595,7 +566,6 @@ module.exports = {
     React$Node: 'readonly',
     React$Portal: 'readonly',
     React$Ref: 'readonly',
-    React$RefSetter: 'readonly',
     ReadableStreamController: 'readonly',
     ReadableStreamReader: 'readonly',
     RequestInfo: 'readonly',
@@ -609,12 +579,6 @@ module.exports = {
     WheelEventHandler: 'readonly',
     FinalizationRegistry: 'readonly',
     Omit: 'readonly',
-    Keyframe: 'readonly',
-    PropertyIndexedKeyframes: 'readonly',
-    KeyframeAnimationOptions: 'readonly',
-    GetAnimationsOptions: 'readonly',
-    Animatable: 'readonly',
-    ScrollTimeline: 'readonly',
 
     spyOnDev: 'readonly',
     spyOnDevAndProd: 'readonly',

.git-blame-ignore-revs

@@ -1,2 +1 @@
 c998bb1ed4b3285398c9c7797135d3f060243c6a
-fd2b3e13d330a4559f5aa21462e1cb2cbbcf144b

.github/ISSUE_TEMPLATE/compiler_bug_report.yml

@@ -55,10 +55,3 @@ body:
       Please provide your React version in the app where this issue occurred.
   validations:
     required: true
-- type: input
-  attributes:
-    label: What version of React Compiler are you using?
-    description: |
-      Please provide the exact React Compiler version in the app where this issue occurred.
-  validations:
-    required: true

.github/dependabot.yml

@@ -1,10 +1,107 @@
 version: 2
 updates:
   - package-ecosystem: "npm"
-    directories:
-      - "/fixtures/*"
+    directory: "/fixtures/art"
     schedule:
-      interval: "monthly"
+      interval: "weekly"
+    open-pull-requests-limit: 0
+  - package-ecosystem: "npm"
+    directory: "/fixtures/attribute-behavior"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 0
+  - package-ecosystem: "npm"
+    directory: "/fixtures/concurrent"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 0
+  - package-ecosystem: "npm"
+    directory: "/fixtures/devtools"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 0
+  - package-ecosystem: "npm"
+    directory: "/fixtures/dom"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 0
+  - package-ecosystem: "npm"
+    directory: "/fixtures/eslint"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 0
+  - package-ecosystem: "npm"
+    directory: "/fixtures/expiration"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 0
+  - package-ecosystem: "npm"
+    directory: "/fixtures/fiber-debugger"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 0
+  - package-ecosystem: "npm"
+    directory: "/fixtures/fiber-triangle"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 0
+  - package-ecosystem: "npm"
+    directory: "/fixtures/fizz"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 0
+  - package-ecosystem: "npm"
+    directory: "/fixtures/fizz-ssr-browser"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 0
+  - package-ecosystem: "npm"
+    directory: "/fixtures/flight"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 0
+  - package-ecosystem: "npm"
+    directory: "/fixtures/flight-browser"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 0
+  - package-ecosystem: "npm"
+    directory: "/fixtures/flight-esm"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 0
+  - package-ecosystem: "npm"
+    directory: "/fixtures/legacy-jsx-runtimes"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 0
+  - package-ecosystem: "npm"
+    directory: "/fixtures/nesting"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 0
+  - package-ecosystem: "npm"
+    directory: "/fixtures/packaging"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 0
+  - package-ecosystem: "npm"
+    directory: "/fixtures/scheduler"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 0
+  - package-ecosystem: "npm"
+    directory: "/fixtures/ssr"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 0
+  - package-ecosystem: "npm"
+    directory: "/fixtures/ssr-2"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 0
+  - package-ecosystem: "npm"
+    directory: "/fixtures/stacks"
+    schedule:
+      interval: "weekly"
     open-pull-requests-limit: 0
-    ignore:
-      - dependency-name: "*"

.github/workflows/compiler_discord_notify.yml

@@ -1,30 +0,0 @@
-name: (Compiler) Discord Notify
-
-on:
-  pull_request_target:
-    types: [opened, ready_for_review]
-    paths:
-      - compiler/**
-      - .github/workflows/compiler_**.yml
-
-jobs:
-  check_maintainer:
-    uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main
-    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@v6.0.0
-        with:
-          webhook-url: ${{ secrets.COMPILER_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/compiler_playground.yml

@@ -6,20 +6,14 @@ on:
   pull_request:
     paths:
       - compiler/**
-      - .github/workflows/compiler_playground.yml
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref_name }}-${{ github.event.pull_request.number || github.run_id }}
-  cancel-in-progress: true
+      - .github/workflows/compiler-playground.yml
 
 env:
   TZ: /usr/share/zoneinfo/America/Los_Angeles
-  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
-  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
 
 defaults:
   run:
-    working-directory: compiler/apps/playground
+    working-directory: compiler
 
 jobs:
   playground:
@@ -29,23 +23,15 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version: 18.20.1
           cache: yarn
-          cache-dependency-path: compiler/**/yarn.lock
+          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-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('compiler/**/yarn.lock') }}
+          key: ${{ runner.arch }}-${{ runner.os }}-modules-${{ hashFiles('compiler/**/yarn.lock') }}
       - run: yarn install --frozen-lockfile
       - run: npx playwright install --with-deps chromium
-      - run: CI=true yarn test
-      - run: ls -R test-results
-        if: '!cancelled()'
-      - name: Archive test results
-        if: '!cancelled()'
-        uses: actions/upload-artifact@v4
-        with:
-          name: test-results
-          path: compiler/apps/playground/test-results
+      - run: yarn workspace playground test

.github/workflows/compiler_prereleases.yml

@@ -1,55 +0,0 @@
-name: (Compiler) Publish Prereleases
-
-on:
-  workflow_call:
-    inputs:
-      commit_sha:
-        required: true
-        default: ''
-        type: string
-      release_channel:
-        required: true
-        type: string
-      dist_tag:
-        required: true
-        type: string
-      version_name:
-        required: true
-        type: string
-    secrets:
-      NPM_TOKEN:
-        required: true
-
-env:
-  TZ: /usr/share/zoneinfo/America/Los_Angeles
-  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
-  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
-  GH_TOKEN: ${{ github.token }}
-  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-defaults:
-  run:
-    working-directory: compiler
-
-jobs:
-  publish_prerelease:
-    name: Publish prelease (${{ inputs.release_channel }}) ${{ inputs.commit_sha }} @${{ inputs.dist_tag }}
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version-file: '.nvmrc'
-          cache: yarn
-          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-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('compiler/**/yarn.lock') }}
-      - run: yarn install --frozen-lockfile
-      - 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 }}

.github/workflows/compiler_prereleases_manual.yml

@@ -1,31 +0,0 @@
-name: (Compiler) Publish Prereleases Manual
-
-on:
-  workflow_dispatch:
-    inputs:
-      prerelease_commit_sha:
-        required: false
-      release_channel:
-        required: true
-        type: string
-      dist_tag:
-        required: true
-        type: string
-      version_name:
-        required: true
-        type: string
-
-env:
-  TZ: /usr/share/zoneinfo/America/Los_Angeles
-
-jobs:
-  publish_prerelease_experimental:
-    name: Publish to Experimental channel
-    uses: facebook/react/.github/workflows/compiler_prereleases.yml@main
-    with:
-      commit_sha: ${{ inputs.prerelease_commit_sha || github.sha }}
-      release_channel: ${{ inputs.release_channel }}
-      dist_tag: ${{ inputs.dist_tag }}
-      version_name: ${{ inputs.version_name }}
-    secrets:
-      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/compiler_prereleases_nightly.yml

@@ -1,21 +0,0 @@
-name: (Compiler) Publish Prereleases Nightly
-
-on:
-  schedule:
-    # At 10 minutes past 16:00 on Mon, Tue, Wed, Thu, and Fri
-    - cron: 10 16 * * 1,2,3,4,5
-
-env:
-  TZ: /usr/share/zoneinfo/America/Los_Angeles
-
-jobs:
-  publish_prerelease_experimental:
-    name: Publish to Experimental channel
-    uses: facebook/react/.github/workflows/compiler_prereleases.yml@main
-    with:
-      commit_sha: ${{ github.sha }}
-      release_channel: experimental
-      dist_tag: experimental
-      version_name: '0.0.0'
-    secrets:
-      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/compiler_prereleases_weekly.yml

@@ -1,21 +0,0 @@
-name: (Compiler) Publish Prereleases Weekly
-
-on:
-  schedule:
-    # At 10 minutes past 9:00 on Mon
-    - cron: 10 9 * * 1
-
-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_rust.yml

@@ -0,0 +1,73 @@
+name: (Compiler) Rust
+
+on:
+  push:
+    branches: ["main"]
+    paths:
+      - .github/workflows/**
+      - compiler/crates/**
+      - compiler/Cargo.*
+      - compiler/*.toml
+  pull_request:
+    paths:
+      - .github/workflows/**
+      - compiler/crates/**
+      - compiler/Cargo.*
+      - compiler/*.toml
+
+env:
+  CARGO_TERM_COLOR: always
+  RUSTFLAGS: -Dwarnings
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+
+defaults:
+  run:
+    working-directory: compiler
+
+jobs:
+  test:
+    name: Rust Test (${{ matrix.target.os }})
+    strategy:
+      matrix:
+        target:
+          - target: ubuntu-latest
+            os: ubuntu-latest
+          # TODO: run on more platforms
+          # - target: macos-latest
+          #   os: macos-latest
+          # - target: windows-latest
+          #   os: windows-latest
+    runs-on: ${{ matrix.target.os }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: Swatinem/rust-cache@v2
+      - name: cargo test
+        run: cargo test --manifest-path=Cargo.toml --locked ${{ matrix.target.features && '--features' }} ${{ matrix.target.features }}
+
+  lint:
+    name: Rust Lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions-rs/toolchain@v1
+        with:
+          # NOTE: use `rustup run <toolchain> <command>` in commands below
+          # with this exact same toolchain value
+          toolchain: nightly-2023-08-01
+          override: true
+          components: rustfmt, clippy
+      - uses: Swatinem/rust-cache@v2
+      - name: rustfmt
+        run: grep -r --include "*.rs" --files-without-match "@generated" crates | xargs rustup run nightly-2023-08-01 rustfmt --check --config="skip_children=true"
+      # - name: cargo clippy
+      #   run: rustup run nightly-2023-08-01 cargo clippy -- -Dclippy::correctness
+
+  build:
+    name: Rust Build
+    runs-on: ubuntu-latest
+    # TODO: build on more platforms, deploy, etc
+    steps:
+      - uses: actions/checkout@v4
+      - uses: Swatinem/rust-cache@v2
+      - name: cargo build
+        run: cargo build --release

.github/workflows/compiler_typescript.yml

@@ -6,16 +6,10 @@ on:
   pull_request:
     paths:
       - compiler/**
-      - .github/workflows/compiler_typescript.yml
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref_name }}-${{ github.event.pull_request.number || github.run_id }}
-  cancel-in-progress: true
+      - .github/workflows/compiler-typescript.yml
 
 env:
   TZ: /usr/share/zoneinfo/America/Los_Angeles
-  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
-  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
 
 defaults:
   run:
@@ -40,14 +34,14 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version: 18.20.1
           cache: yarn
           cache-dependency-path: compiler/yarn.lock
       - name: Restore cached node_modules
         uses: actions/cache@v4
         with:
           path: "**/node_modules"
-          key: compiler-node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('compiler/**/yarn.lock') }}
+          key: ${{ runner.arch }}-${{ runner.os }}-modules-${{ hashFiles('compiler/**/yarn.lock') }}
       - run: yarn install --frozen-lockfile
       - run: yarn workspace babel-plugin-react-compiler lint
 
@@ -59,7 +53,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version: 18.20.1
           cache: yarn
           cache-dependency-path: compiler/yarn.lock
       - name: Restore cached node_modules
@@ -67,7 +61,7 @@ jobs:
         id: node_modules
         with:
           path: "**/node_modules"
-          key: compiler-node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('compiler/**/yarn.lock') }}
+          key: ${{ runner.arch }}-${{ runner.os }}-modules-${{ hashFiles('compiler/**/yarn.lock') }}
       - run: yarn install --frozen-lockfile
       - run: yarn workspace babel-plugin-react-compiler jest
 
@@ -83,7 +77,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version: 18.20.1
           cache: yarn
           cache-dependency-path: compiler/yarn.lock
       - name: Restore cached node_modules
@@ -91,9 +85,6 @@ jobs:
         id: node_modules
         with:
           path: "**/node_modules"
-          key: compiler-node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('compiler/**/yarn.lock') }}
+          key: ${{ runner.arch }}-${{ runner.os }}-modules-${{ hashFiles('compiler/**/yarn.lock') }}
       - run: yarn install --frozen-lockfile
-      - 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
-        if: runner.os != 'Linux' && matrix.workspace_name != 'react-forgive'

.github/workflows/devtools_check_repro.yml

@@ -0,0 +1,208 @@
+name: (DevTools) Check for bug repro
+on:
+  issues:
+    types: [opened, edited]
+  issue_comment:
+    types: [created, edited]
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+
+jobs:
+  check-repro:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/github-script@v3
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const URL_REGEXP = /### Website or app[\r\n]+([^#]+)###/m;
+            const REPRO_STEPS_REGEXP = /### Repro steps[\r\n]+([^#]+)###/m;
+            const LABEL_NEEDS_MORE_INFORMATION = "Resolution: Needs More Information";
+            const LABEL_UNCONFIRMED = "Status: Unconfirmed";
+
+            function debug(...args) {
+              core.info(args.map(JSON.stringify).join(' '));
+            }
+
+            if (context.payload.comment) {
+              debug('Ignoring comment update.');
+              return;
+            }
+
+            const user = context.payload.sender.login;
+            const issue = context.payload.issue;
+            const body = issue.body;
+
+            const urlMatch = body.match(URL_REGEXP);
+            const reproStepsMatch = body.match(REPRO_STEPS_REGEXP);
+
+            const url = urlMatch !== null ? urlMatch[1].trim() : null;
+            const reproSteps = reproStepsMatch !== null ? reproStepsMatch[1].trim() : null;
+
+            if (!url || !reproSteps) {
+              debug('This issue is not a DevTools bug report.');
+              return;
+            }
+
+            debug(`found URL "${url}"`);
+            debug(`found repro steps "${reproSteps}"`);
+
+            async function createComment(comment) {
+              // Format
+              comment = comment
+                .split("\n")
+                .map((line) => line.trim())
+                .join("\n")
+                .trim();
+
+              await github.issues.createComment({
+                issue_number: context.issue.number,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                body: comment,
+              });
+            }
+
+            async function getGitHubActionComments() {
+              debug(`Loading existing comments...`);
+
+              const comments = await github.issues.listComments({
+                issue_number: context.issue.number,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+              });
+
+              return comments.data.filter(comment => {
+                debug(`comment by user: "${comment.user.login}"`);
+                return comment.user.login === 'github-actions[bot]';
+              });
+            }
+
+            async function getIssueLabels() {
+              const issues = await github.issues.listLabelsOnIssue({
+                issue_number: context.issue.number,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+              });
+
+              return issues.data;
+            }
+
+            async function updateIssue(state, assignees = []) {
+              await github.issues.update({
+                issue_number: context.issue.number,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                state,
+                assignees,
+              });
+            }
+
+            async function closeWithComment(comment) {
+              if (issue.state !== 'open') {
+                debug(`Issue is not open`);
+                return;
+              }
+
+              const labels = await getIssueLabels();
+              const label = labels.find(label => label.name === LABEL_UNCONFIRMED);
+              if (!label) {
+                debug(`Issue was not opened via DevTools bug report template`);
+                return;
+              }
+
+              const comments = await getGitHubActionComments();
+              if (comments.length > 0) {
+                debug(`Already commented on issue; won't comment again`);
+                return;
+              }
+
+              debug(`Missing required information`);
+
+              await github.issues.addLabels({
+                issue_number: context.issue.number,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                labels: [LABEL_NEEDS_MORE_INFORMATION],
+              });
+
+              await createComment(comment);
+              await updateIssue('closed', [user]);
+            }
+
+            async function openWithComment(comment) {
+              if (issue.state !== 'closed') {
+                debug(`Issue is already open`);
+                return;
+              }
+
+              const labels = await getIssueLabels();
+              const label = labels.find(label => label.name === LABEL_NEEDS_MORE_INFORMATION);
+              if (!label) {
+                debug(`Issue was not tagged as needs information`);
+                return;
+              }
+
+              const comments = await getGitHubActionComments();
+              if (comments.length === 0) {
+                debug(`Issue was closed by someone else; won't reopen`);
+                return;
+              }
+
+              debug(`Re-opening closed issue`);
+
+              await github.issues.removeLabel({
+                issue_number: context.issue.number,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                name: LABEL_NEEDS_MORE_INFORMATION,
+              });
+
+              await createComment(comment);
+              await updateIssue('open');
+            }
+
+            const PROBABLY_NOT_A_URL_REGEX = /(^Chrome$|^Firefox$| Website)/i;
+
+            const COMMENT_HEADER = `
+              @${user}: We're sorry you've seen this error. ❤️
+            `.trim();
+
+            const COMMENT_FOOTER = `
+              Please help us by providing a link to a CodeSandbox (https://codesandbox.io/s/new), a repository on GitHub, or a minimal code example that reproduces the problem. (Screenshots or videos can also be helpful if they help provide context on how to repro the bug.)
+
+              Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve
+
+              Issues without repros are automatically closed but we will re-open if you update with repro info.
+            `.trim();
+
+            if (url.includes("localhost")) {
+              closeWithComment(`
+                ${COMMENT_HEADER}
+
+                Unfortunately the URL you provided ("localhost") is not publicly accessible. (This means that we will not be able to reproduce the problem you're reporting.)
+
+                ${COMMENT_FOOTER}
+              `);
+            } else if (url.length < 10 || url.match(PROBABLY_NOT_A_URL_REGEX)) {
+              closeWithComment(`
+                ${COMMENT_HEADER}
+
+                It looks like you forgot to specify a valid URL. (This means that we will not be able to reproduce the problem you're reporting.)
+
+                ${COMMENT_FOOTER}
+              `);
+            } else if (reproSteps.length < 25) {
+              closeWithComment(`
+                ${COMMENT_HEADER}
+
+                Unfortunately, it doesn't look like this issue has enough info for one of us to reproduce and fix it though.
+
+                ${COMMENT_FOOTER}
+              `);
+            } else {
+              openWithComment(`
+                Thank you for providing repro steps! Re-opening issue now for triage.
+              `);
+            }

.github/workflows/devtools_regression_tests.yml

@@ -1,178 +0,0 @@
-name: (DevTools) Regression Tests
-
-on:
-  schedule:
-    - cron: 0 0 * * *
-  workflow_dispatch:
-    inputs:
-      commit_sha:
-        required: false
-        type: string
-
-env:
-  TZ: /usr/share/zoneinfo/America/Los_Angeles
-  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
-  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
-
-jobs:
-  download_build:
-    name: Download base build
-    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
-      - name: Restore cached node_modules
-        uses: actions/cache@v4
-        id: node_modules
-        with:
-          path: "**/node_modules"
-          key: runtime-release-node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'scripts/release/yarn.lock') }}
-      - name: Ensure clean build directory
-        run: rm -rf build
-      - run: yarn install --frozen-lockfile
-      - run: yarn install --frozen-lockfile
-        working-directory: scripts/release
-      - name: Download react-devtools artifacts for base revision
-        run: |
-          git fetch origin main
-          GH_TOKEN=${{ github.token }} scripts/release/download-experimental-build.js --commit=${{ inputs.commit_sha || '$(git rev-parse origin/main)' }}
-      - name: Display structure of build
-        run: ls -R build
-      - name: Archive build
-        uses: actions/upload-artifact@v4
-        with:
-          name: build
-          path: build
-
-  build_devtools_and_process_artifacts:
-    name: Build DevTools and process artifacts
-    needs: download_build
-    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
-      - name: Restore cached node_modules
-        uses: actions/cache@v4
-        id: node_modules
-        with:
-          path: "**/node_modules"
-          key: runtime-node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
-      - name: Ensure clean build directory
-        run: rm -rf build
-      - run: yarn install --frozen-lockfile
-      - name: Restore archived build
-        uses: actions/download-artifact@v4
-        with:
-          name: build
-          path: build
-      - run: ./scripts/ci/pack_and_store_devtools_artifacts.sh
-        env:
-          RELEASE_CHANNEL: experimental
-      - name: Display structure of build
-        run: ls -R build
-      - name: Archive devtools build
-        uses: actions/upload-artifact@v4
-        with:
-          name: react-devtools
-          path: build/devtools.tgz
-      # Simplifies getting the extension for local testing
-      - name: Archive chrome extension
-        uses: actions/upload-artifact@v4
-        with:
-          name: react-devtools-chrome-extension
-          path: build/devtools/chrome-extension.zip
-      - name: Archive firefox extension
-        uses: actions/upload-artifact@v4
-        with:
-          name: react-devtools-firefox-extension
-          path: build/devtools/firefox-extension.zip
-
-  run_devtools_tests_for_versions:
-    name: Run DevTools tests for versions
-    needs: build_devtools_and_process_artifacts
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        version:
-          - "16.0"
-          - "16.5" # schedule package
-          - "16.8" # hooks
-          - "17.0"
-          - "18.0"
-          - "18.2" # compiler polyfill
-    continue-on-error: true
-    steps:
-      - uses: actions/checkout@v4
-      - 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@v4
-        id: node_modules
-        with:
-          path: "**/node_modules"
-          key: runtime-node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
-      - run: yarn install --frozen-lockfile
-      - name: Restore all archived build artifacts
-        uses: actions/download-artifact@v4
-      - name: Display structure of build
-        run: ls -R build
-      - run: ./scripts/ci/download_devtools_regression_build.js ${{ matrix.version }} --replaceBuild
-      - run: node ./scripts/jest/jest-cli.js --build --project devtools --release-channel=experimental --reactVersion ${{ matrix.version }} --ci
-
-  run_devtools_e2e_tests_for_versions:
-    name: Run DevTools e2e tests for versions
-    needs: build_devtools_and_process_artifacts
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        version:
-          - "16.0"
-          - "16.5" # schedule package
-          - "16.8" # hooks
-          - "17.0"
-          - "18.0"
-    continue-on-error: true
-    steps:
-      - uses: actions/checkout@v4
-      - 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@v4
-        id: node_modules
-        with:
-          path: "**/node_modules"
-          key: runtime-node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
-      - run: yarn install --frozen-lockfile
-      - name: Restore all archived build artifacts
-        uses: actions/download-artifact@v4
-      - name: Display structure of build
-        run: ls -R build
-      - 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 }}
-        env:
-          RELEASE_CHANNEL: experimental
-      - name: Cleanup build regression folder
-        run: rm -r ./build-regression
-      - uses: actions/upload-artifact@v4
-        with:
-          name: screenshots
-          path: ./tmp/screenshots

.github/workflows/runtime_build_and_test.yml

@@ -7,14 +7,8 @@ on:
     paths-ignore:
       - compiler/**
 
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref_name }}-${{ github.event.pull_request.number || github.run_id }}
-  cancel-in-progress: true
-
 env:
   TZ: /usr/share/zoneinfo/America/Los_Angeles
-  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
-  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
 
 jobs:
   # ----- FLOW -----
@@ -25,8 +19,6 @@ jobs:
       matrix: ${{ steps.set-matrix.outputs.result }}
     steps:
       - uses: actions/checkout@v4
-        with:
-          ref: ${{ github.event.pull_request.head.sha || github.sha }}
       - uses: actions/github-script@v7
         id: set-matrix
         with:
@@ -44,11 +36,9 @@ jobs:
         flow_inline_config_shortname: ${{ fromJSON(needs.discover_flow_inline_configs.outputs.matrix) }}
     steps:
       - uses: actions/checkout@v4
-        with:
-          ref: ${{ github.event.pull_request.head.sha || github.sha }}
       - uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version: 18.20.1
           cache: yarn
           cache-dependency-path: yarn.lock
       - name: Restore cached node_modules
@@ -56,9 +46,7 @@ jobs:
         id: node_modules
         with:
           path: "**/node_modules"
-          key: runtime-node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
-      - name: Ensure clean build directory
-        run: rm -rf build
+          key: ${{ runner.arch }}-${{ runner.os }}-modules-${{ hashFiles('yarn.lock') }}
       - run: yarn install --frozen-lockfile
       - run: node ./scripts/tasks/flow-ci ${{ matrix.flow_inline_config_shortname }}
 
@@ -68,11 +56,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-        with:
-          ref: ${{ github.event.pull_request.head.sha || github.sha }}
       - uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version: 18.20.1
           cache: yarn
           cache-dependency-path: yarn.lock
       - name: Restore cached node_modules
@@ -80,9 +66,7 @@ jobs:
         id: node_modules
         with:
           path: "**/node_modules"
-          key: runtime-node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
-      - name: Ensure clean build directory
-        run: rm -rf build
+          key: ${{ runner.arch }}-${{ runner.os }}-modules-${{ hashFiles('yarn.lock') }}
       - run: yarn install --frozen-lockfile
       - run: |
           yarn generate-inline-fizz-runtime
@@ -94,11 +78,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-        with:
-          ref: ${{ github.event.pull_request.head.sha || github.sha }}
       - uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version: 18.20.1
           cache: yarn
           cache-dependency-path: yarn.lock
       - name: Restore cached node_modules
@@ -106,9 +88,7 @@ jobs:
         id: node_modules
         with:
           path: "**/node_modules"
-          key: runtime-node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
-      - name: Ensure clean build directory
-        run: rm -rf build
+          key: ${{ runner.arch }}-${{ runner.os }}-modules-${{ hashFiles('yarn.lock') }}
       - run: yarn install --frozen-lockfile
       - run: yarn flags
 
@@ -147,11 +127,9 @@ jobs:
     continue-on-error: true
     steps:
       - uses: actions/checkout@v4
-        with:
-          ref: ${{ github.event.pull_request.head.sha || github.sha }}
       - uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version: 18.20.1
           cache: yarn
           cache-dependency-path: yarn.lock
       - name: Restore cached node_modules
@@ -159,11 +137,9 @@ jobs:
         id: node_modules
         with:
           path: "**/node_modules"
-          key: runtime-node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
-      - name: Ensure clean build directory
-        run: rm -rf build
+          key: ${{ runner.arch }}-${{ runner.os }}-modules-${{ hashFiles('yarn.lock') }}
       - run: yarn install --frozen-lockfile
-      - run: yarn test ${{ matrix.params }} --ci --shard=${{ matrix.shard }}
+      - run: yarn test ${{ matrix.params }} --ci=github --shard=${{ matrix.shard }}
 
   # ----- BUILD -----
   build_and_lint:
@@ -176,11 +152,9 @@ jobs:
         release_channel: [stable, experimental]
     steps:
       - uses: actions/checkout@v4
-        with:
-          ref: ${{ github.event.pull_request.head.sha || github.sha }}
       - uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version: 18.20.1
           cache: yarn
           cache-dependency-path: yarn.lock
       - uses: actions/setup-java@v4
@@ -192,11 +166,9 @@ jobs:
         id: node_modules
         with:
           path: "**/node_modules"
-          key: runtime-node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
-      - name: Ensure clean build directory
-        run: rm -rf build
+          key: ${{ runner.arch }}-${{ runner.os }}-modules-${{ hashFiles('yarn.lock') }}
       - run: yarn install --frozen-lockfile
-      - run: yarn build --index=${{ matrix.worker_id }} --total=20 --r=${{ matrix.release_channel }} --ci
+      - run: yarn build --index=${{ matrix.worker_id }} --total=20 --r=${{ matrix.release_channel }} --ci=github
         env:
           CI: github
           RELEASE_CHANNEL: ${{ matrix.release_channel }}
@@ -208,8 +180,9 @@ jobs:
       - name: Archive build
         uses: actions/upload-artifact@v4
         with:
-          name: _build_${{ matrix.worker_id }}_${{ matrix.release_channel }}
-          path: build
+          name: build_${{ matrix.worker_id }}_${{ matrix.release_channel }}
+          path: |
+            build
 
   test_build:
     name: yarn test-build
@@ -254,11 +227,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-        with:
-          ref: ${{ github.event.pull_request.head.sha || github.sha }}
       - uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version: 18.20.1
           cache: yarn
           cache-dependency-path: yarn.lock
       - name: Restore cached node_modules
@@ -266,19 +237,16 @@ jobs:
         id: node_modules
         with:
           path: "**/node_modules"
-          key: runtime-node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
-      - name: Ensure clean build directory
-        run: rm -rf build
+          key: ${{ runner.arch }}-${{ runner.os }}-modules-${{ hashFiles('yarn.lock') }}
       - run: yarn install --frozen-lockfile
       - 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: yarn test --build ${{ matrix.test_params }} --shard=${{ matrix.shard }} --ci
+      - run: yarn test --build ${{ matrix.test_params }} --shard=${{ matrix.shard }} --ci=github
 
   process_artifacts_combined:
     name: Process artifacts combined
@@ -286,11 +254,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-        with:
-          ref: ${{ github.event.pull_request.head.sha || github.sha }}
       - uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version: 18.20.1
           cache: yarn
           cache-dependency-path: yarn.lock
       - name: Restore cached node_modules
@@ -298,14 +264,11 @@ jobs:
         id: node_modules
         with:
           path: "**/node_modules"
-          key: runtime-node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
-      - name: Ensure clean build directory
-        run: rm -rf build
+          key: ${{ runner.arch }}-${{ runner.os }}-modules-${{ hashFiles('yarn.lock') }}
       - run: yarn install --frozen-lockfile
       - name: Restore archived build
         uses: actions/download-artifact@v4
         with:
-          pattern: _build_*
           path: build
           merge-multiple: true
       - name: Display structure of build
@@ -333,11 +296,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-        with:
-          ref: ${{ github.event.pull_request.head.sha || github.sha }}
       - uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version: 18.20.1
           cache: yarn
           cache-dependency-path: yarn.lock
       - name: Restore cached node_modules
@@ -345,14 +306,11 @@ jobs:
         id: node_modules
         with:
           path: "**/node_modules"
-          key: runtime-node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
-      - name: Ensure clean build directory
-        run: rm -rf build
+          key: ${{ runner.arch }}-${{ runner.os }}-modules-${{ hashFiles('yarn.lock') }}
       - run: yarn install --frozen-lockfile
       - name: Restore archived build
         uses: actions/download-artifact@v4
         with:
-          pattern: _build_*
           path: build
           merge-multiple: true
       - name: Display structure of build
@@ -368,11 +326,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-        with:
-          ref: ${{ github.event.pull_request.head.sha || github.sha }}
       - uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version: 18.20.1
           cache: yarn
           cache-dependency-path: yarn.lock
       - name: Restore cached node_modules
@@ -380,14 +336,11 @@ jobs:
         id: node_modules
         with:
           path: "**/node_modules"
-          key: runtime-node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
-      - name: Ensure clean build directory
-        run: rm -rf build
+          key: ${{ runner.arch }}-${{ runner.os }}-modules-${{ hashFiles('yarn.lock') }}
       - run: yarn install --frozen-lockfile
       - name: Restore archived build
         uses: actions/download-artifact@v4
         with:
-          pattern: _build_*
           path: build
           merge-multiple: true
       - name: Display structure of build
@@ -400,11 +353,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-        with:
-          ref: ${{ github.event.pull_request.head.sha || github.sha }}
       - uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version: 18.20.1
           cache: yarn
           cache-dependency-path: yarn.lock
       - name: Restore cached node_modules
@@ -412,15 +363,13 @@ jobs:
         id: node_modules
         with:
           path: "**/node_modules"
-          key: fixtures_dom-node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
-      - name: Ensure clean build directory
-        run: rm -rf build
+          key: v2-yarn_cache_fixtures_dom-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
       - run: yarn install --frozen-lockfile
+      - run: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
         working-directory: fixtures/dom
       - name: Restore archived build
         uses: actions/download-artifact@v4
         with:
-          pattern: _build_*
           path: build
           merge-multiple: true
       - name: Display structure of build
@@ -440,11 +389,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-        with:
-          ref: ${{ github.event.pull_request.head.sha || github.sha }}
       - uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version: 18.20.1
           cache: yarn
           cache-dependency-path: yarn.lock
       # Fixture copies some built packages from the workroot after install.
@@ -455,14 +402,11 @@ jobs:
         id: node_modules
         with:
           path: "**/node_modules"
-          key: fixtures_flight-node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
-      - name: Ensure clean build directory
-        run: rm -rf build
+          key: v2-yarn_cache_fixtures_flight-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
       - run: yarn install --frozen-lockfile
       - name: Restore archived build
         uses: actions/download-artifact@v4
         with:
-          pattern: _build_*
           path: build
           merge-multiple: true
       - name: Display structure of build
@@ -476,7 +420,9 @@ jobs:
           fi
       - name: Playwright install deps
         working-directory: fixtures/flight
-        run: npx playwright install --with-deps chromium
+        run: |
+          npx playwright install
+          sudo npx playwright install-deps
       - name: Run tests
         working-directory: fixtures/flight
         run: yarn test
@@ -499,16 +445,11 @@ jobs:
     name: Build DevTools and process artifacts
     needs: build_and_lint
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        browser: [chrome, firefox, edge]
     steps:
       - uses: actions/checkout@v4
-        with:
-          ref: ${{ github.event.pull_request.head.sha || github.sha }}
       - uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version: 18.20.1
           cache: yarn
           cache-dependency-path: yarn.lock
       - name: Restore cached node_modules
@@ -516,50 +457,44 @@ jobs:
         id: node_modules
         with:
           path: "**/node_modules"
-          key: runtime-node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
-      - name: Ensure clean build directory
-        run: rm -rf build
+          key: ${{ runner.arch }}-${{ runner.os }}-modules-${{ hashFiles('yarn.lock') }}
       - run: yarn install --frozen-lockfile
       - name: Restore archived build
         uses: actions/download-artifact@v4
         with:
-          pattern: _build_*
           path: build
           merge-multiple: true
-      - run: ./scripts/ci/pack_and_store_devtools_artifacts.sh ${{ matrix.browser }}
+      - run: ./scripts/circleci/pack_and_store_devtools_artifacts.sh
         env:
           RELEASE_CHANNEL: experimental
       - name: Display structure of build
         run: ls -R build
-      # Simplifies getting the extension for local testing
-      - name: Archive ${{ matrix.browser }} extension
+      - name: Archive devtools build
         uses: actions/upload-artifact@v4
-        with:
-          name: react-devtools-${{ matrix.browser }}-extension
-          path: build/devtools/${{ matrix.browser }}-extension.zip
-
-  merge_devtools_artifacts:
-    name: Merge DevTools artifacts
-    needs: build_devtools_and_process_artifacts
-    runs-on: ubuntu-latest
-    steps:
-      - name: Merge artifacts
-        uses: actions/upload-artifact/merge@v4
         with:
           name: react-devtools
-          pattern: react-devtools-*-extension
+          path: build/devtools.tgz
+      # Simplifies getting the extension for local testing
+      - name: Archive chrome extension
+        uses: actions/upload-artifact@v4
+        with:
+          name: react-devtools-chrome-extension
+          path: build/devtools/chrome-extension.zip
+      - name: Archive firefox extension
+        uses: actions/upload-artifact@v4
+        with:
+          name: react-devtools-firefox-extension
+          path: build/devtools/firefox-extension.zip
 
   run_devtools_e2e_tests:
     name: Run DevTools e2e tests
-    needs: build_and_lint
+    needs: build_devtools_and_process_artifacts
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-        with:
-          ref: ${{ github.event.pull_request.head.sha || github.sha }}
       - uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version: 18.20.1
           cache: yarn
           cache-dependency-path: yarn.lock
       - name: Restore cached node_modules
@@ -567,79 +502,16 @@ jobs:
         id: node_modules
         with:
           path: "**/node_modules"
-          key: runtime-node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
-      - name: Ensure clean build directory
-        run: rm -rf build
+          key: ${{ runner.arch }}-${{ runner.os }}-modules-${{ hashFiles('yarn.lock') }}
       - run: yarn install --frozen-lockfile
       - name: Restore archived build
         uses: actions/download-artifact@v4
         with:
-          pattern: _build_*
           path: build
           merge-multiple: true
       - run: |
           npx playwright install
           sudo npx playwright install-deps
-      - run: ./scripts/ci/run_devtools_e2e_tests.js
+      - run: ./scripts/circleci/run_devtools_e2e_tests.js
         env:
           RELEASE_CHANNEL: experimental
-
-  # ----- SIZEBOT -----
-  sizebot:
-    if: ${{ github.event_name == 'pull_request' && github.ref_name != 'main' && github.event.pull_request.base.ref == 'main' }}
-    name: Run sizebot
-    needs: [build_and_lint]
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          ref: ${{ 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@v4
-        id: node_modules
-        with:
-          path: "**/node_modules"
-          key: runtime-node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
-      - name: Ensure clean build directory
-        run: rm -rf build
-      - run: yarn install --frozen-lockfile
-        working-directory: scripts/release
-      - name: Download artifacts for base revision
-        run: |
-          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
-        run: rm -rf ./base-build/node_modules
-      - name: Display structure of base-build from origin/main
-        run: ls -R base-build
-      - name: Ensure clean build directory
-        run: rm -rf build
-      - run: yarn install --frozen-lockfile
-      - name: Restore archived build for PR
-        uses: actions/download-artifact@v4
-        with:
-          pattern: _build_*
-          path: build
-          merge-multiple: true
-      - name: Scrape warning messages
-        run: |
-          mkdir -p ./build/__test_utils__
-          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.sha }} >> build/COMMIT_SHA
-      - run: node ./scripts/tasks/danger
-      - name: Archive sizebot results
-        uses: actions/upload-artifact@v4
-        with:
-          name: sizebot-message
-          path: sizebot-message.md

.github/workflows/runtime_commit_artifacts.yml

@@ -1,26 +1,11 @@
-name: (Runtime) Commit Artifacts for Meta WWW and fbsource V2
+name: (Runtime) Commit Artifacts for Meta WWW and fbsource
 
 on:
-  workflow_run:
-    workflows: ["(Runtime) Build and Test"]
-    types: [completed]
-    branches:
-      - main
-  workflow_dispatch:
-    inputs:
-      commit_sha:
-        required: false
-        type: string
-      force:
-        description: 'Force a commit to the builds/... branches'
-        required: true
-        default: false
-        type: boolean
+  push:
+    branches: [main, meta-www, meta-fbsource]
 
 env:
   TZ: /usr/share/zoneinfo/America/Los_Angeles
-  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
-  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
 
 jobs:
   download_artifacts:
@@ -64,39 +49,107 @@ jobs:
         run: |
           echo "www_branch_count=$(git ls-remote --heads origin "refs/heads/meta-www" | wc -l)" >> "$GITHUB_OUTPUT"
           echo "fbsource_branch_count=$(git ls-remote --heads origin "refs/heads/meta-fbsource" | wc -l)" >> "$GITHUB_OUTPUT"
-      - uses: actions/setup-node@v4
+      - name: Download and unzip artifacts
+        uses: actions/github-script@v6
+        env:
+          CIRCLECI_TOKEN: ${{secrets.CIRCLECI_TOKEN_DIFFTRAIN}}
         with:
-          node-version-file: '.nvmrc'
-          cache: yarn
-          cache-dependency-path: yarn.lock
-      - name: Restore cached node_modules
-        uses: actions/cache@v4
-        id: node_modules
-        with:
-          path: "**/node_modules"
-          key: runtime-release-node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'scripts/release/yarn.lock') }}
-      - name: Ensure clean build directory
-        run: rm -rf build
-      - run: yarn install --frozen-lockfile
-        name: yarn install (react)
-      - run: yarn install --frozen-lockfile
-        name: yarn install (scripts/release)
-        working-directory: scripts/release
-      - name: Download artifacts for base revision
-        run: |
-          GH_TOKEN=${{ github.token }} scripts/release/download-experimental-build.js --commit=${{ inputs.commit_sha || github.event.workflow_run.head_sha || github.sha }}
-      - name: Display structure of build
-        run: ls -R build
+          script: |
+            // TODO: Move this to a script file.
+            const cp = require('child_process');
+
+            function sleep(ms) {
+              return new Promise(resolve => setTimeout(resolve, ms));
+            }
+
+            function execHelper(command, options, streamStdout = false) {
+              return new Promise((resolve, reject) => {
+                const proc = cp.exec(
+                  command,
+                  options,
+                  (error, stdout) => (error ? reject(error) : resolve(stdout.trim())),
+                );
+                if (streamStdout) {
+                  proc.stdout.pipe(process.stdout);
+                }
+              });
+            }
+
+            let artifactsUrl = null;
+            // This is a temporary, dirty hack to avoid needing a GitHub auth token in the circleci
+            // workflow to notify this GitHub action. Sorry!
+            let iter = 0;
+            spinloop: while (iter < 15) {
+              const res = await github.rest.repos.listCommitStatusesForRef({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                ref: context.sha
+              });
+              for (const status of res.data) {
+                if (/process_artifacts_combined/.test(status.context)) {
+                  switch (status.state) {
+                    case 'pending': {
+                      console.log(`${status.context} is still pending`);
+                      break;
+                    }
+                    case 'failure':
+                    case 'error': {
+                      throw new Error(`${status.context} has failed or errored`);
+                    }
+                    case 'success': {
+                      // The status does not include a build ID, but we can extract it
+                      // from the URL. I couldn't find a better way to do this.
+                      const ciBuildId = /\/facebook\/react\/([0-9]+)/.exec(
+                        status.target_url,
+                      )[1];
+                      if (Number.parseInt(ciBuildId, 10) + '' === ciBuildId) {
+                        artifactsUrl =
+                          `https://circleci.com/api/v1.1/project/github/facebook/react/${ciBuildId}/artifacts`;
+                        console.log(`Found artifactsUrl: ${artifactsUrl}`);
+                        break spinloop;
+                      } else {
+                        throw new Error(`${ciBuildId} isn't a number`);
+                      }
+                      break;
+                    }
+                    default: {
+                      throw new Error(`Unhandled status state: ${status.state}`);
+                      break;
+                    }
+                  }
+                }
+              }
+              iter++;
+              console.log("Sleeping for 60s...");
+              await sleep(60_000);
+            }
+            if (artifactsUrl != null) {
+              const {CIRCLECI_TOKEN} = process.env;
+              const res = await fetch(artifactsUrl, {
+                headers: {
+                  'Circle-Token': CIRCLECI_TOKEN
+                }
+              });
+              const data = await res.json();
+              if (!Array.isArray(data) && data.message != null) {
+                throw `CircleCI returned: ${data.message}`;
+              }
+              for (const artifact of data) {
+                if (artifact.path === 'build.tgz') {
+                  console.log(`Downloading and unzipping ${artifact.url}`);
+                  await execHelper(
+                    `curl -L ${artifact.url} -H "Circle-Token: ${CIRCLECI_TOKEN}" | tar -xvz`
+                  );
+                }
+              }
+            } else {
+              process.exitCode = 1;
+            }
       - name: Strip @license from eslint plugin and react-refresh
         run: |
           sed -i -e 's/ @license React*//' \
             build/oss-experimental/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js \
             build/oss-experimental/react-refresh/cjs/react-refresh-babel.development.js
-      - name: Insert @headers into eslint plugin and react-refresh
-        run: |
-          sed -i -e 's/ LICENSE file in the root directory of this source tree./ LICENSE file in the root directory of this source tree.\n *\n * @noformat\n * @nolint\n * @lightSyntaxTransform\n * @preventMunge\n * @oncall react_core/' \
-            build/oss-experimental/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js \
-            build/oss-experimental/react-refresh/cjs/react-refresh-babel.development.js
       - name: Move relevant files for React in www into compiled
         run: |
           # Move the facebook-www folder into compiled
@@ -125,14 +178,13 @@ jobs:
         run: |
           BASE_FOLDER='compiled-rn/facebook-fbsource/xplat/js'
           mkdir -p ${BASE_FOLDER}/react-native-github/Libraries/Renderer/
-          mkdir -p ${BASE_FOLDER}/RKJSModules/vendor/react/{scheduler,react,react-dom,react-is,react-test-renderer}/
+          mkdir -p ${BASE_FOLDER}/RKJSModules/vendor/react/{scheduler,react,react-is,react-test-renderer}/
 
           # Move React Native renderer
           mv build/react-native/implementations/ $BASE_FOLDER/react-native-github/Libraries/Renderer/
           mv build/react-native/shims/ $BASE_FOLDER/react-native-github/Libraries/Renderer/
           mv build/facebook-react-native/scheduler/cjs/ $BASE_FOLDER/RKJSModules/vendor/react/scheduler/
           mv build/facebook-react-native/react/cjs/ $BASE_FOLDER/RKJSModules/vendor/react/react/
-          mv build/facebook-react-native/react-dom/cjs/ $BASE_FOLDER/RKJSModules/vendor/react/react-dom/
           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/
 
@@ -149,7 +201,7 @@ jobs:
         run: |
           echo ${{ github.sha }} >> ./compiled/facebook-www/REVISION
           cp ./compiled/facebook-www/REVISION ./compiled/facebook-www/REVISION_TRANSFORMS
-          echo ${{ github.sha}} >> ./compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION
+          echo ${{ github.sha }} >> ./compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION
       - name: "Get current version string"
         id: get_current_version
         run: |
@@ -162,18 +214,18 @@ jobs:
           echo "current_version_classic=$VERSION_CLASSIC" >> "$GITHUB_OUTPUT"
           echo "current_version_modern=$VERSION_MODERN" >> "$GITHUB_OUTPUT"
           echo "current_version_rn=$VERSION_NATIVE_FB" >> "$GITHUB_OUTPUT"
-      - uses: actions/upload-artifact@v4
+      - uses: actions/upload-artifact@v3
         with:
           name: compiled
           path: compiled/
-      - uses: actions/upload-artifact@v4
+      - uses: actions/upload-artifact@v3
         with:
           name: compiled-rn
           path: compiled-rn/
 
   commit_www_artifacts:
     needs: download_artifacts
-    if: inputs.force == true || (github.ref == 'refs/heads/main' && needs.download_artifacts.outputs.www_branch_count == '0')
+    if: ${{ (github.ref == 'refs/heads/main' && needs.download_artifacts.outputs.www_branch_count == '0') || github.ref == 'refs/heads/meta-www' }}
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -181,7 +233,7 @@ jobs:
           ref: builds/facebook-www
       - name: Ensure clean directory
         run: rm -rf compiled
-      - uses: actions/download-artifact@v4
+      - uses: actions/download-artifact@v3
         with:
           name: compiled
           path: compiled/
@@ -203,7 +255,6 @@ jobs:
           grep -rl "$CURRENT_VERSION_MODERN" ./compiled | xargs -r sed -i -e "s/$CURRENT_VERSION_MODERN/$LAST_VERSION_MODERN/g"
           grep -rl "$CURRENT_VERSION_MODERN" ./compiled || echo "Modern version reverted"
       - name: Check for changes
-        if: inputs.force != true
         id: check_should_commit
         run: |
           echo "Full git status"
@@ -221,7 +272,7 @@ jobs:
             echo "should_commit=false" >> "$GITHUB_OUTPUT"
           fi
       - name: Re-apply version changes
-        if: inputs.force == true || (steps.check_should_commit.outputs.should_commit == 'true' && needs.download_artifacts.outputs.last_version_classic != '' && needs.download_artifacts.outputs.last_version_modern != '')
+        if: steps.check_should_commit.outputs.should_commit == 'true' && needs.download_artifacts.outputs.last_version_classic != '' && needs.download_artifacts.outputs.last_version_modern != ''
         env:
           CURRENT_VERSION_CLASSIC: ${{ needs.download_artifacts.outputs.current_version_classic }}
           CURRENT_VERSION_MODERN: ${{ needs.download_artifacts.outputs.current_version_modern }}
@@ -238,26 +289,26 @@ jobs:
           grep -rl "$LAST_VERSION_MODERN" ./compiled | xargs -r sed -i -e "s/$LAST_VERSION_MODERN/$CURRENT_VERSION_MODERN/g"
           grep -rl "$LAST_VERSION_MODERN" ./compiled || echo "Classic version re-applied"
       - name: Will commit these changes
-        if: inputs.force == true || steps.check_should_commit.outputs.should_commit == 'true'
+        if: steps.check_should_commit.outputs.should_commit == 'true'
         run: |
           echo ":"
           git status -u
       - name: Commit changes to branch
-        if: inputs.force == true || steps.check_should_commit.outputs.should_commit == 'true'
-        uses: stefanzweifel/git-auto-commit-action@v5
+        if: steps.check_should_commit.outputs.should_commit == 'true'
+        uses: stefanzweifel/git-auto-commit-action@v4
         with:
           commit_message: |
-            ${{ github.event.workflow_run.head_commit.message || format('Manual build of {0}', github.event.workflow_run.head_sha || github.sha) }}
+            ${{ github.event.head_commit.message }}
 
-            DiffTrain build for [${{ github.event.workflow_run.head_sha || github.sha }}](https://github.com/facebook/react/commit/${{ github.event.workflow_run.head_sha || github.sha }})
+            DiffTrain build for [${{ github.sha }}](https://github.com/facebook/react/commit/${{ github.sha }})
           branch: builds/facebook-www
-          commit_user_name: ${{ github.triggering_actor }}
-          commit_user_email: ${{ format('{0}@users.noreply.github.com', github.triggering_actor) }}
+          commit_user_name: ${{ github.actor }}
+          commit_user_email: ${{ github.actor }}@users.noreply.github.com
           create_branch: true
 
   commit_fbsource_artifacts:
     needs: download_artifacts
-    if: inputs.force == true || (github.ref == 'refs/heads/main' && needs.download_artifacts.outputs.fbsource_branch_count == '0')
+    if: ${{ (github.ref == 'refs/heads/main' && needs.download_artifacts.outputs.fbsource_branch_count == '0') || github.ref == 'refs/heads/meta-fbsource' }}
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -265,7 +316,7 @@ jobs:
           ref: builds/facebook-fbsource
       - name: Ensure clean directory
         run: rm -rf compiled-rn
-      - uses: actions/download-artifact@v4
+      - uses: actions/download-artifact@v3
         with:
           name: compiled-rn
           path: compiled-rn/
@@ -280,7 +331,6 @@ jobs:
           grep -rl "$CURRENT_VERSION" ./compiled-rn | xargs -r sed -i -e "s/$CURRENT_VERSION/$LAST_VERSION/g"
           grep -rl "$CURRENT_VERSION" ./compiled-rn || echo "Version reverted"
       - name: Check for changes
-        if: inputs.force != 'true'
         id: check_should_commit
         run: |
           echo "Full git status"
@@ -299,7 +349,7 @@ jobs:
             echo "should_commit=false" >> "$GITHUB_OUTPUT"
           fi
       - name: Re-apply version changes
-        if: inputs.force == true || (steps.check_should_commit.outputs.should_commit == 'true' && needs.download_artifacts.outputs.last_version_rn != '')
+        if: steps.check_should_commit.outputs.should_commit == 'true' && needs.download_artifacts.outputs.last_version_rn != ''
         env:
           CURRENT_VERSION: ${{ needs.download_artifacts.outputs.current_version_rn }}
           LAST_VERSION: ${{ needs.download_artifacts.outputs.last_version_rn }}
@@ -309,13 +359,13 @@ jobs:
           grep -rl "$LAST_VERSION" ./compiled-rn | xargs -r sed -i -e "s/$LAST_VERSION/$CURRENT_VERSION/g"
           grep -rl "$LAST_VERSION" ./compiled-rn || echo "Version re-applied"
       - name: Add files for signing
-        if: inputs.force == true || steps.check_should_commit.outputs.should_commit == 'true'
+        if: steps.check_should_commit.outputs.should_commit == 'true'
         run: |
           echo ":"
           git add .
       - name: Signing files
-        if: inputs.force == true || steps.check_should_commit.outputs.should_commit == 'true'
-        uses: actions/github-script@v7
+        if: steps.check_should_commit.outputs.should_commit == 'true'
+        uses: actions/github-script@v6
         with:
           script: |
             // TODO: Move this to a script file.
@@ -368,9 +418,8 @@ jobs:
             console.log('Signing files in directory:', directory);
             try {
               const result = execSync(`git status --porcelain ${directory}`, {encoding: 'utf8'});
-              console.log(result);
 
-              // Parse the git status output to get file paths!
+              // Parse the git status output to get file paths
               const files = result.split('\n').filter(file => file.endsWith('.js'));
 
               if (files.length === 0) {
@@ -379,14 +428,7 @@ jobs:
                 );
               } else {
                 files.forEach(line => {
-                  let file = null;
-                  if (line.startsWith('D ')) {
-                    return;
-                  } else if (line.startsWith('R ')) {
-                    file = line.slice(line.indexOf('->') + 3);
-                  } else {
-                    file = line.slice(3).trim();
-                  }
+                  const file = line.slice(3).trim();
                   if (file) {
                     console.log('  Signing file:', file);
                     const originalContents = fs.readFileSync(file, 'utf8');
@@ -405,19 +447,19 @@ jobs:
               console.error('Error signing files:', e);
             }
       - name: Will commit these changes
-        if: inputs.force == true || steps.check_should_commit.outputs.should_commit == 'true'
+        if: steps.check_should_commit.outputs.should_commit == 'true'
         run: |
           git add .
           git status
       - name: Commit changes to branch
-        if: inputs.force == true || steps.check_should_commit.outputs.should_commit == 'true'
-        uses: stefanzweifel/git-auto-commit-action@v5
+        if: steps.check_should_commit.outputs.should_commit == 'true'
+        uses: stefanzweifel/git-auto-commit-action@v4
         with:
           commit_message: |
-            ${{ github.event.workflow_run.head_commit.message || format('Manual build of {0}', github.event.workflow_run.head_sha || github.sha) }}
+            ${{ github.event.head_commit.message }}
 
-            DiffTrain build for [${{ github.event.workflow_run.head_sha || github.sha }}](https://github.com/facebook/react/commit/${{ github.event.workflow_run.head_sha || github.sha }})
+            DiffTrain build for commit https://github.com/facebook/react/commit/${{ github.sha }}.
           branch: builds/facebook-fbsource
-          commit_user_name: ${{ github.triggering_actor }}
-          commit_user_email: ${{ format('{0}@users.noreply.github.com', github.triggering_actor) }}
+          commit_user_name: ${{ github.actor }}
+          commit_user_email: ${{ github.actor }}@users.noreply.github.com
           create_branch: true

.github/workflows/runtime_discord_notify.yml

@@ -1,30 +0,0 @@
-name: (Runtime) Discord Notify
-
-on:
-  pull_request_target:
-    types: [opened, ready_for_review]
-    paths-ignore:
-      - compiler/**
-      - .github/workflows/compiler_**.yml
-
-jobs:
-  check_maintainer:
-    uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main
-    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@v6.0.0
-        with:
-          webhook-url: ${{ secrets.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/runtime_eslint_plugin_e2e.yml

@@ -1,56 +0,0 @@
-name: (Runtime) ESLint Plugin E2E
-
-on:
-  push:
-    branches: [main]
-  pull_request:
-    paths-ignore:
-      - compiler/**
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref_name }}-${{ github.event.pull_request.number || github.run_id }}
-  cancel-in-progress: true
-
-env:
-  TZ: /usr/share/zoneinfo/America/Los_Angeles
-
-jobs:
-  # ----- TESTS -----
-  test:
-    name: ESLint v${{ matrix.eslint_major }}
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        eslint_major:
-          - "6"
-          - "7"
-          - "8"
-          - "9"
-    continue-on-error: true
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          ref: ${{ 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@v4
-        id: node_modules
-        with:
-          path: "node_modules"
-          key: runtime-eslint_e2e-node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
-      - name: Ensure clean build directory
-        run: rm -rf build
-      - run: yarn install --frozen-lockfile
-      - 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_fuzz_tests.yml

@@ -1,19 +1,24 @@
 name: (Runtime) Fuzz tests
-
 on:
   schedule:
-    - cron: 0 * * * *
+  - cron: 0 * * * *
   push:
     branches:
       - main
   workflow_dispatch:
+    inputs:
+      prerelease_commit_sha:
+        required: false
 
 env:
   TZ: /usr/share/zoneinfo/America/Los_Angeles
 
 jobs:
   test_fuzz:
+    if: inputs.prerelease_commit_sha == ''
     runs-on: ubuntu-latest
+    env:
+      TZ: "/usr/share/zoneinfo/America/Los_Angeles"
     steps:
     - uses: actions/checkout@v4.1.0
     - uses: actions/setup-node@v4
@@ -27,5 +32,5 @@ jobs:
       shell: bash
     - name: Run fuzz tests
       run: |-
-        FUZZ_TEST_SEED=$RANDOM yarn test fuzz --ci
-        FUZZ_TEST_SEED=$RANDOM yarn test --prod fuzz --ci
+        FUZZ_TEST_SEED=$RANDOM yarn test fuzz --ci=github
+        FUZZ_TEST_SEED=$RANDOM yarn test --prod fuzz --ci=github

.github/workflows/runtime_prereleases.yml

@@ -1,52 +0,0 @@
-name: (Runtime) Publish Prereleases
-
-on:
-  workflow_call:
-    inputs:
-      commit_sha:
-        required: true
-        default: ''
-        type: string
-      release_channel:
-        required: true
-        type: string
-      dist_tag:
-        required: true
-        type: string
-    secrets:
-      NPM_TOKEN:
-        required: true
-
-env:
-  TZ: /usr/share/zoneinfo/America/Los_Angeles
-  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
-  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
-  GH_TOKEN: ${{ github.token }}
-  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-jobs:
-  publish_prerelease:
-    name: Publish prelease (${{ inputs.release_channel }}) ${{ inputs.commit_sha }} @${{ inputs.dist_tag }}
-    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
-      - name: Restore cached node_modules
-        uses: actions/cache@v4
-        id: node_modules
-        with:
-          path: "**/node_modules"
-          key: runtime-release-node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'scripts/release/yarn.lock') }}
-      - name: Ensure clean build directory
-        run: rm -rf build
-      - run: yarn install --frozen-lockfile
-      - run: yarn install --frozen-lockfile
-        working-directory: scripts/release
-      - run: |
-          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

@@ -1,47 +0,0 @@
-name: (Runtime) Publish Prereleases Manual
-
-on:
-  workflow_dispatch:
-    inputs:
-      prerelease_commit_sha:
-        required: true
-
-env:
-  TZ: /usr/share/zoneinfo/America/Los_Angeles
-
-jobs:
-
-  publish_prerelease_canary:
-    name: Publish to Canary channel
-    uses: facebook/react/.github/workflows/runtime_prereleases.yml@main
-    with:
-      commit_sha: ${{ inputs.prerelease_commit_sha }}
-      release_channel: stable
-      # The tags to use when publishing canaries. The main one we should
-      # always include is "canary" but we can use multiple (e.g. alpha,
-      # beta, rc). To declare multiple, use a comma-separated string, like
-      # this:
-      #   dist_tag: "canary,alpha,beta,rc"
-      #
-      # TODO: We currently tag canaries with "next" in addition to "canary"
-      # because this used to be called the "next" channel and some
-      # 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
-    secrets:
-      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-  publish_prerelease_experimental:
-    name: Publish to Experimental channel
-    uses: facebook/react/.github/workflows/runtime_prereleases.yml@main
-    # 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
-    with:
-      commit_sha: ${{ inputs.prerelease_commit_sha }}
-      release_channel: experimental
-      dist_tag: experimental
-    secrets:
-      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/runtime_prereleases_nightly.yml

@@ -1,35 +0,0 @@
-name: (Runtime) Publish Prereleases Nightly
-
-on:
-  schedule:
-    # At 10 minutes past 16:00 on Mon, Tue, Wed, Thu, and Fri
-    - cron: 10 16 * * 1,2,3,4,5
-
-env:
-  TZ: /usr/share/zoneinfo/America/Los_Angeles
-
-jobs:
-  publish_prerelease_canary:
-    name: Publish to Canary channel
-    uses: facebook/react/.github/workflows/runtime_prereleases.yml@main
-    with:
-      commit_sha: ${{ github.sha }}
-      release_channel: stable
-      dist_tag: canary,next
-    secrets:
-      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-  publish_prerelease_experimental:
-    name: Publish to Experimental channel
-    uses: facebook/react/.github/workflows/runtime_prereleases.yml@main
-    # 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
-    with:
-      commit_sha: ${{ github.sha }}
-      release_channel: experimental
-      dist_tag: experimental
-    secrets:
-      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/runtime_releases_from_npm_manual.yml

@@ -1,119 +0,0 @@
-name: (Runtime) Publish Releases from NPM Manual
-
-on:
-  workflow_dispatch:
-    inputs:
-      version_to_promote:
-        required: true
-        description: Current npm version (non-experimental) to promote
-        type: string
-      version_to_publish:
-        required: true
-        description: Version to publish for the specified packages
-        type: string
-      only_packages:
-        description: Packages to publish (space separated)
-        type: string
-      skip_packages:
-        description: Packages to NOT publish (space separated)
-        type: string
-      tags:
-        description: NPM tags (space separated)
-        type: string
-        default: untagged
-      dry:
-        required: true
-        description: Dry run instead of publish?
-        type: boolean
-        default: true
-      force_notify:
-        description: Force a Discord notification?
-        type: boolean
-        default: false
-
-env:
-  TZ: /usr/share/zoneinfo/America/Los_Angeles
-  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
-  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
-  GH_TOKEN: ${{ github.token }}
-  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-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@v6.0.0
-        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 release from NPM${{ inputs.dry && ' (dry run)' }}"
-          embed-description: |
-            ```json
-            ${{ toJson(inputs) }}
-            ```
-          embed-url: https://github.com/facebook/react/actions/runs/${{ github.run_id }}
-
-  publish:
-    name: Publish releases
-    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
-      - name: Restore cached node_modules
-        uses: actions/cache@v4
-        id: node_modules
-        with:
-          path: "**/node_modules"
-          key: runtime-release-node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'scripts/release/yarn.lock') }}
-      - name: Ensure clean build directory
-        run: rm -rf build
-      - run: yarn install --frozen-lockfile
-      - run: yarn install --frozen-lockfile
-        working-directory: scripts/release
-      - run: cp ./scripts/release/ci-npmrc ~/.npmrc
-      - if: '${{ inputs.only_packages }}'
-        name: 'Prepare ${{ inputs.only_packages }} from NPM'
-        run: |
-          scripts/release/prepare-release-from-npm.js \
-            --ci \
-            --skipTests \
-            --version=${{ inputs.version_to_promote }} \
-            --publishVersion=${{ inputs.version_to_publish }} \
-            --onlyPackages=${{ inputs.only_packages }}
-      - if: '${{ inputs.skip_packages }}'
-        name: 'Prepare all packages EXCEPT ${{ inputs.skip_packages }} from NPM'
-        run: |
-          scripts/release/prepare-release-from-npm.js \
-            --ci \
-            --skipTests \
-            --version=${{ inputs.version_to_promote }} \
-            --publishVersion=${{ inputs.version_to_publish }} \
-            --skipPackages=${{ inputs.skip_packages }}
-      - 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.tags }} \
-            --publishVersion=${{ inputs.version_to_publish }} \
-            --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.tags }} \
-            --publishVersion=${{ inputs.version_to_publish }} \
-            --skipPackages=${{ inputs.skip_packages }} ${{ (inputs.dry && '') || '\'}}
-            ${{ inputs.dry && '--dry'}}

.github/workflows/shared_check_maintainer.yml

@@ -1,71 +0,0 @@
-name: (Shared) Check maintainer
-
-on:
-  workflow_call:
-    inputs:
-      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 }}
-
-env:
-  TZ: /usr/share/zoneinfo/America/Los_Angeles
-  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
-  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
-
-jobs:
-  check_maintainer:
-    runs-on: ubuntu-latest
-    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
-        with:
-          script: |
-            const fs = require('fs');
-            const actor = '${{ inputs.actor }}';
-            let isRemote = ${{ inputs.is_remote }};
-            if (typeof isRemote === 'string') {
-              isRemote = isRemote === 'true';
-            }
-            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'));
-            if (maintainers.has(actor)) {
-              console.log(`🟢 ${actor} is a maintainer`);
-              return true;
-            }
-            console.log(`🔴 ${actor} is NOT a maintainer`);
-            return null;

.github/workflows/shared_close_direct_sync_branch_prs.yml

@@ -1,37 +0,0 @@
-name: (Shared) Close Direct Sync Branch PRs
-
-on:
-  pull_request:
-    branches:
-      - 'builds/facebook-**'
-
-env:
-  TZ: /usr/share/zoneinfo/America/Los_Angeles
-  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
-  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
-
-jobs:
-  close_pr:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Close PR
-        uses: actions/github-script@v7
-        with:
-          script: |
-            const owner = context.repo.owner;
-            const repo = context.repo.repo;
-            const pullNumber = ${{ github.event.number }};
-
-            await github.rest.pulls.createReview({
-              owner,
-              repo,
-              pull_number: pullNumber,
-              body: 'Do not land changes to `${{ github.event.pull_request.base.ref }}`. Please re-open your PR targeting `main` instead.',
-              event: 'REQUEST_CHANGES'
-            });
-            await github.rest.pulls.update({
-              owner,
-              repo,
-              pull_number: pullNumber,
-              state: 'closed'
-            });

.github/workflows/shared_label_core_team_prs.yml

@@ -1,31 +0,0 @@
-name: (Shared) Label Core Team PRs
-
-on:
-  pull_request_target:
-
-env:
-  TZ: /usr/share/zoneinfo/America/Los_Angeles
-  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
-  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
-
-jobs:
-  check_maintainer:
-    uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main
-    with:
-      actor: ${{ github.event.pull_request.user.login }}
-
-  label:
-    if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }}
-    runs-on: ubuntu-latest
-    needs: check_maintainer
-    steps:
-      - name: Label PR as React Core Team
-        uses: actions/github-script@v7
-        with:
-          script: |
-            github.rest.issues.addLabels({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              issue_number: ${{ github.event.number }},
-              labels: ['React Core Team']
-            });

.github/workflows/shared_lint.yml

@@ -5,14 +5,8 @@ on:
     branches: [main]
   pull_request:
 
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref_name }}-${{ github.event.pull_request.number || github.run_id }}
-  cancel-in-progress: true
-
 env:
   TZ: /usr/share/zoneinfo/America/Los_Angeles
-  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
-  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
 
 jobs:
   prettier:
@@ -22,16 +16,14 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version: 18.20.1
           cache: yarn
           cache-dependency-path: yarn.lock
       - name: Restore cached node_modules
         uses: actions/cache@v4
         with:
           path: "**/node_modules"
-          key: shared-lint-node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
-      - name: Ensure clean build directory
-        run: rm -rf build
+          key: ${{ runner.arch }}-${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
       - run: yarn install --frozen-lockfile
       - run: yarn prettier-check
 
@@ -42,16 +34,14 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version: 18.20.1
           cache: yarn
           cache-dependency-path: yarn.lock
       - name: Restore cached node_modules
         uses: actions/cache@v4
         with:
           path: "**/node_modules"
-          key: shared-lint-node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
-      - name: Ensure clean build directory
-        run: rm -rf build
+          key: ${{ runner.arch }}-${{ runner.os }}-modules-${{ hashFiles('yarn.lock') }}
       - run: yarn install --frozen-lockfile
       - run: node ./scripts/tasks/eslint
 
@@ -62,18 +52,16 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version: 18.20.1
           cache: yarn
           cache-dependency-path: yarn.lock
       - name: Restore cached node_modules
         uses: actions/cache@v4
         with:
           path: "**/node_modules"
-          key: shared-lint-node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
-      - name: Ensure clean build directory
-        run: rm -rf build
+          key: ${{ runner.arch }}-${{ runner.os }}-modules-${{ hashFiles('yarn.lock') }}
       - run: yarn install --frozen-lockfile
-      - run: ./scripts/ci/check_license.sh
+      - run: ./scripts/circleci/check_license.sh
 
   test_print_warnings:
     name: Test print warnings
@@ -82,15 +70,13 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version: 18.20.1
           cache: yarn
           cache-dependency-path: yarn.lock
       - name: Restore cached node_modules
         uses: actions/cache@v4
         with:
           path: "**/node_modules"
-          key: shared-lint-node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
-      - name: Ensure clean build directory
-        run: rm -rf build
+          key: ${{ runner.arch }}-${{ runner.os }}-modules-${{ hashFiles('yarn.lock') }}
       - run: yarn install --frozen-lockfile
-      - run: ./scripts/ci/test_print_warnings.sh
+      - run: ./scripts/circleci/test_print_warnings.sh

.github/workflows/shared_stale.yml

@@ -4,7 +4,6 @@ on:
   schedule:
     # Run hourly
     - cron: '0 * * * *'
-  workflow_dispatch:
 
 env:
   TZ: /usr/share/zoneinfo/America/Los_Angeles

.gitignore

@@ -37,4 +37,3 @@ packages/react-devtools-fusebox/dist
 packages/react-devtools-inline/dist
 packages/react-devtools-shell/dist
 packages/react-devtools-timeline/dist
-

.prettierignore

@@ -18,16 +18,14 @@ packages/react-devtools-timeline/static
 # react compiler
 compiler/**/dist
 compiler/**/__tests__/fixtures/**/*.expect.md
+compiler/**/__tests__/fixtures/**/*.flow.js
 compiler/**/.next
 
-# contains invalid graphql`...` which results in a promise rejection error from `yarn prettier-all`.
-compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-kitchensink.js
-
 compiler/crates
-compiler/target
 compiler/apps/playground/public
 
 compiler/**/LICENSE
+compiler/.*
 compiler/*.md*
 compiler/*.json
 compiler/*.css

.prettierrc.js

@@ -1,15 +1,18 @@
 'use strict';
 
-const {esNextPaths} = require('./scripts/shared/pathsByLanguageVersion');
+const {
+  compilerPaths,
+  esNextPaths,
+  typescriptPaths,
+} = require('./scripts/shared/pathsByLanguageVersion');
 
 module.exports = {
-  plugins: ['prettier-plugin-hermes-parser'],
   bracketSpacing: false,
   singleQuote: true,
   bracketSameLine: true,
   trailingComma: 'es5',
   printWidth: 80,
-  parser: 'hermes',
+  parser: 'flow',
   arrowParens: 'avoid',
   overrides: [
     {
@@ -25,11 +28,25 @@ module.exports = {
       },
     },
     {
-      files: ['*.ts', '*.tsx'],
+      files: typescriptPaths,
       options: {
         trailingComma: 'all',
         parser: 'typescript',
       },
     },
+    {
+      files: compilerPaths,
+      options: {
+        requirePragma: false,
+        parser: 'babel-ts',
+        semi: true,
+        singleQuote: false,
+        trailingComma: 'es5',
+        bracketSpacing: true,
+        bracketSameLine: false,
+        printWidth: 80,
+        arrowParens: 'always',
+      },
+    },
   ],
 };

CHANGELOG.md

@@ -1,275 +1,3 @@
-## 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.
-
-> Note: To help make the upgrade to React 19 easier, we’ve published a react@18.3 release that is identical to 18.2 but adds warnings for deprecated APIs and other changes that are needed for React 19. We recommend upgrading to React 18.3.1 first to help identify any issues before upgrading to React 19.
-
-### New Features
-
-#### React
-
-* Actions: `startTransition` can now accept async functions. Functions passed to `startTransition` are called “Actions”. A given Transition can include one or more Actions which update state in the background and update the UI with one commit. In addition to updating state, Actions can now perform side effects including async requests, and the Action will wait for the work to finish before finishing the Transition. This feature allows Transitions to include side effects like `fetch()` in the pending state, and provides support for error handling, and optimistic updates.  
-* `useActionState`: is a new hook to order Actions inside of a Transition with access to the state of the action, and the pending state. It accepts a reducer that can call Actions, and the initial state used for first render. It also accepts an optional string that is used if the action is passed to a form `action` prop to support progressive enhancement in forms.  
-* `useOptimistic`: is a new hook to update state while a Transition is in progress. It returns the state, and a set function that can be called inside a transition to “optimistically” update the state to expected final value immediately while the Transition completes in the background. When the transition finishes, the state is updated to the new value.  
-* `use`: is a new API that allows reading resources in render. In React 19, `use` accepts a promise or Context. If provided a promise, `use` will suspend until a value is resolved. `use` can only be used in render but can be called conditionally.  
-* `ref` as a prop: Refs can now be used as props, removing the need for `forwardRef`.  
-* **Suspense sibling pre-warming**: When a component suspends, React will immediately commit the fallback of the nearest Suspense boundary, without waiting for the entire sibling tree to render. After the fallback commits, React will schedule another render for the suspended siblings to “pre-warm” lazy requests.
-
-#### React DOM Client
-
-* `<form> action` prop: Form Actions allow you to manage forms automatically and integrate with `useFormStatus`. When a `<form> action` succeeds, React will automatically reset the form for uncontrolled components. The form can be reset manually with the new `requestFormReset` API.  
-* `<button> and <input> formAction` prop: Actions can be passed to the `formAction` prop to configure form submission behavior. This allows using different Actions depending on the input.  
-* `useFormStatus`: is a new hook that provides the status of the parent `<form> action`, as if the form was a Context provider. The hook returns the values: `pending`, `data`, `method`, and `action`.  
-* Support for Document Metadata: We’ve added support for rendering document metadata tags in components natively. React will automatically hoist them into the `<head>` section of the document.  
-* Support for Stylesheets: React 19 will ensure stylesheets are inserted into the `<head>` on the client before revealing the content of a Suspense boundary that depends on that stylesheet.  
-* Support for async scripts: Async scripts can be rendered anywhere in the component tree and React will handle ordering and deduplication.  
-* Support for preloading resources: React 19 ships with `preinit`, `preload`, `prefetchDNS`, and `preconnect` APIs to optimize initial page loads by moving discovery of additional resources like fonts out of stylesheet loading. They can also be used to prefetch resources used by an anticipated navigation.
-
-#### React DOM Server
-
-* Added `prerender` and `prerenderToNodeStream` APIs for static site generation. They are designed to work with streaming environments like Node.js Streams and Web Streams. Unlike `renderToString`, they wait for data to load for HTML generation.
-
-#### React Server Components
-
-* RSC features such as directives, server components, and server functions are now stable. This means libraries that ship with Server Components can now target React 19 as a peer dependency with a react-server export condition for use in frameworks that support the Full-stack React Architecture. The underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x. See [docs](https://19.react.dev/reference/rsc/server-components) for how to support React Server Components.
-
-### Deprecations
-
-* Deprecated: `element.ref` access: React 19 supports ref as a prop, so we’re deprecating `element.ref` in favor of `element.props.ref`. Accessing will result in a warning.  
-* `react-test-renderer`: In React 19, react-test-renderer logs a deprecation warning and has switched to concurrent rendering for web usage. We recommend migrating your tests to  [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://testing-library.com/docs/react-native-testing-library/intro)
-
-### Breaking Changes
-
-React 19 brings in a number of breaking changes, including the removals of long-deprecated APIs. We recommend first upgrading to `18.3.1`, where we've added additional deprecation warnings. Check out the [upgrade guide](https://19.react.dev/blog/2024/04/25/react-19-upgrade-guide) for more details and guidance on codemodding.
-
-### React
-
-* New JSX Transform is now required: We introduced [a new JSX transform](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) in 2020 to improve bundle size and use JSX without importing React. In React 19, we’re adding additional improvements like using ref as a prop and JSX speed improvements that require the new transform.  
-* Errors in render are not re-thrown: Errors that are not caught by an Error Boundary are now reported to window.reportError. Errors that are caught by an Error Boundary are reported to console.error. We’ve introduced `onUncaughtError` and `onCaughtError` methods to `createRoot` and `hydrateRoot` to customize this error handling.  
-* Removed: `propTypes`: Using `propTypes` will now be silently ignored. If required, we recommend migrating to TypeScript or another type-checking solution.  
-* Removed: `defaultProps` for functions: ES6 default parameters can be used in place. Class components continue to support `defaultProps` since there is no ES6 alternative.  
-* Removed: `contextTypes` and `getChildContext`: Legacy Context for class components has been removed in favor of the `contextType` API.  
-* Removed: string refs: Any usage of string refs need to be migrated to ref callbacks.   
-* Removed: Module pattern factories: A rarely used pattern that can be migrated to regular functions.  
-* Removed: `React.createFactory`: Now that JSX is broadly supported, all `createFactory` usage can be migrated to JSX components.  
-* Removed: `react-test-renderer/shallow`: This has been a re-export of [react-shallow-renderer](https://github.com/enzymejs/react-shallow-renderer) since React 18\. If needed, you can continue to use the third-party package directly. We recommend using [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://testing-library.com/docs/react-native-testing-library/intro) instead.
-
-#### React DOM
-
-* Removed: `react-dom/test-utils`: We’ve moved `act` from `react-dom/test-utils` to react. All other utilities have been removed.   
-* Removed: `ReactDOM`.`render`, `ReactDOM`.`hydrate`: These have been removed in favor of the concurrent equivalents: `ReactDOM`.`createRoot` and `ReactDOM.hydrateRoot`.  
-* Removed: `unmountComponentAtNode`: Removed in favor of `root.unmount()`.  
-* Removed: `ReactDOM`.`findDOMNode`: You can replace `ReactDOM`.`findDOMNode` with DOM Refs.
-
-### Notable Changes
-
-#### React
-
-* `<Context>` as a provider: You can now render `<Context>` as a provider instead of `<Context.Provider>`.  
-* Cleanup functions for refs: When the component unmounts, React will call the cleanup function returned from the ref callback.  
-* `useDeferredValue` initial value argument: When provided, `useDeferredValue` will return the initial value for the initial render of a component, then schedule a re-render in the background with the `deferredValue` returned.  
-* Support for Custom Elements: React 19 now passes all tests on [Custom Elements Everywhere](https://custom-elements-everywhere.com/).  
-* StrictMode changes: `useMemo` and `useCallback` will now reuse the memoized results from the first render, during the second render. Additionally, StrictMode will now double-invoke ref callback functions on initial mount.  
-* UMD builds removed: To load React 19 with a script tag, we recommend using an ESM-based CDN such as [esm.sh](http://esm.sh).
-
-#### React DOM
-
-* Diffs for hydration errors: In the case of a mismatch, React 19 logs a single error with a diff of the mismatched content.  
-* Compatibility with third-party scripts and extensions: React will now force a client re-render to fix up any mismatched content caused by elements inserted by third-party JS. 
-
-### TypeScript Changes
-
-The most common changes can be codemodded with `npx types-react-codemod@latest preset-19 ./path-to-your-react-ts-files`.
-
-* Removed deprecated TypeScript types:   
-  * `ReactChild` (replacement: `React.ReactElement | number | string)`  
-  * `ReactFragment` (replacement: `Iterable<React.ReactNode>`)  
-  * `ReactNodeArray` (replacement: `ReadonlyArray<React.ReactNode>`)  
-  * `ReactText` (replacement: `number | string`)  
-  * `VoidFunctionComponent` (replacement: `FunctionComponent`)  
-  * `VFC` (replacement: `FC`)  
-  * Moved to `prop-types`: `Requireable`, `ValidationMap`, `Validator`, `WeakValidationMap`  
-  * Moved to `create-react-class`: `ClassicComponentClass`, `ClassicComponent`, `ClassicElement`, `ComponentSpec`, `Mixin`, `ReactChildren`, `ReactHTML`, `ReactSVG`, `SFCFactory`  
-* Disallow implicit return in refs: refs can now accept cleanup functions. When you return something else, we can’t tell if you intentionally returned something not meant to clean up or returned the wrong value. Implicit returns of anything but functions will now error.   
-* Require initial argument to `useRef`: The initial argument is now required to match `useState`, `createContext` etc  
-* Refs are mutable by default: Ref objects returned from `useRef()` are now always mutable instead of sometimes being immutable. This feature was too confusing for users and conflicted with legit cases where refs were managed by React and manually written to.  
-* Strict `ReactElement` typing: The props of React elements now default to `unknown` instead of `any` if the element is typed as `ReactElement`  
-* JSX namespace in TypeScript: The global `JSX` namespace is removed to improve interoperability with other libraries using JSX. Instead, the JSX namespace is available from the React package: `import { JSX } from 'react'`  
-* Better `useReducer` typings: Most `useReducer` usage should not require explicit type arguments.  
-  For example,  
-  ```diff
-  -useReducer<React.Reducer<State, Action>>(reducer)
-  +useReducer(reducer)
-  ```
-  or
-  ```diff
-  -useReducer<React.Reducer<State, Action>>(reducer)
-  +useReducer<State, Action>(reducer)
-  ```
-
-### All Changes
-
-#### React
-
-* Add support for async Actions ([\#26621](https://github.com/facebook/react/pull/26621), [\#26726](https://github.com/facebook/react/pull/26726), [\#28078](https://github.com/facebook/react/pull/28078), [\#28097](https://github.com/facebook/react/pull/28097), [\#29226](https://github.com/facebook/react/pull/29226), [\#29618](https://github.com/facebook/react/pull/29618), [\#29670](https://github.com/facebook/react/pull/29670), [\#26716](https://github.com/facebook/react/pull/26716) by [@acdlite](https://github.com/acdlite) and [@sebmarkbage](https://github.com/sebmarkbage))  
-* Add `useActionState()` hook to update state based on the result of a Form Action ([\#27270](https://github.com/facebook/react/pull/27270), [\#27278](https://github.com/facebook/react/pull/27278), [\#27309](https://github.com/facebook/react/pull/27309), [\#27302](https://github.com/facebook/react/pull/27302), [\#27307](https://github.com/facebook/react/pull/27307), [\#27366](https://github.com/facebook/react/pull/27366), [\#27370](https://github.com/facebook/react/pull/27370), [\#27321](https://github.com/facebook/react/pull/27321), [\#27374](https://github.com/facebook/react/pull/27374), [\#27372](https://github.com/facebook/react/pull/27372), [\#27397](https://github.com/facebook/react/pull/27397), [\#27399](https://github.com/facebook/react/pull/27399), [\#27460](https://github.com/facebook/react/pull/27460), [\#28557](https://github.com/facebook/react/pull/28557), [\#27570](https://github.com/facebook/react/pull/27570), [\#27571](https://github.com/facebook/react/pull/27571), [\#28631](https://github.com/facebook/react/pull/28631), [\#28788](https://github.com/facebook/react/pull/28788), [\#29694](https://github.com/facebook/react/pull/29694), [\#29695](https://github.com/facebook/react/pull/29695), [\#29694](https://github.com/facebook/react/pull/29694), [\#29665](https://github.com/facebook/react/pull/29665), [\#28232](https://github.com/facebook/react/pull/28232), [\#28319](https://github.com/facebook/react/pull/28319) by [@acdlite](https://github.com/acdlite), [@eps1lon](https://github.com/eps1lon), and [@rickhanlonii](https://github.com/rickhanlonii))  
-* Add `use()` API to read resources in render ([\#25084](https://github.com/facebook/react/pull/25084), [\#25202](https://github.com/facebook/react/pull/25202), [\#25207](https://github.com/facebook/react/pull/25207), [\#25214](https://github.com/facebook/react/pull/25214), [\#25226](https://github.com/facebook/react/pull/25226), [\#25247](https://github.com/facebook/react/pull/25247), [\#25539](https://github.com/facebook/react/pull/25539), [\#25538](https://github.com/facebook/react/pull/25538), [\#25537](https://github.com/facebook/react/pull/25537), [\#25543](https://github.com/facebook/react/pull/25543), [\#25561](https://github.com/facebook/react/pull/25561), [\#25620](https://github.com/facebook/react/pull/25620), [\#25615](https://github.com/facebook/react/pull/25615), [\#25922](https://github.com/facebook/react/pull/25922), [\#25641](https://github.com/facebook/react/pull/25641), [\#25634](https://github.com/facebook/react/pull/25634), [\#26232](https://github.com/facebook/react/pull/26232), [\#26536](https://github.com/facebook/react/pull/26535), [\#26739](https://github.com/facebook/react/pull/26739), [\#28233](https://github.com/facebook/react/pull/28233) by [@acdlite](https://github.com/acdlite), [@MofeiZ](https://github.com/mofeiZ), [@sebmarkbage](https://github.com/sebmarkbage), [@sophiebits](https://github.com/sophiebits), [@eps1lon](https://github.com/eps1lon), and [@hansottowirtz](https://github.com/hansottowirtz))  
-* Add `useOptimistic()` hook to display mutated state optimistically during an async mutation ([\#26740](https://github.com/facebook/react/pull/26740), [\#26772](https://github.com/facebook/react/pull/26772), [\#27277](https://github.com/facebook/react/pull/27277), [\#27453](https://github.com/facebook/react/pull/27453), [\#27454](https://github.com/facebook/react/pull/27454), [\#27936](https://github.com/facebook/react/pull/27936) by [@acdlite](https://github.com/acdlite))  
-* Added an `initialValue` argument to `useDeferredValue()` hook ([\#27500](https://github.com/facebook/react/pull/27500), [\#27509](https://github.com/facebook/react/pull/27509), [\#27512](https://github.com/facebook/react/pull/27512), [\#27888](https://github.com/facebook/react/pull/27888), [\#27550](https://github.com/facebook/react/pull/27550) by [@acdlite](https://github.com/acdlite))  
-* Support refs as props, warn on `element.ref` access ([\#28348](https://github.com/facebook/react/pull/28348), [\#28464](https://github.com/facebook/react/pull/28464), [\#28731](https://github.com/facebook/react/pull/28731) by [@acdlite](https://github.com/acdlite))  
-* Support Custom Elements ([\#22184](https://github.com/facebook/react/pull/22184), [\#26524](https://github.com/facebook/react/pull/26524), [\#26523](https://github.com/facebook/react/pull/26523), [\#27511](https://github.com/facebook/react/pull/27511), [\#24541](https://github.com/facebook/react/pull/24541) by [@josepharhar](https://github.com/josepharhar), [@sebmarkbage](https://github.com/sebmarkbage), [@gnoff](https://github.com/gnoff) and [@eps1lon](https://github.com/eps1lon))  
-* Add ref cleanup function ([\#25686](https://github.com/facebook/react/pull/25686), [\#28883](https://github.com/facebook/react/pull/28883), [\#28910](https://github.com/facebook/react/pull/28910)  by [@sammy-SC](https://github.com/sammy-SC), [@jackpope](https://github.com/jackpope), and [@kassens](https://github.com/kassens))  
-* Sibling pre-rendering replaced by sibling pre-warming ([\#26380](https://github.com/facebook/react/pull/26380), [\#26549](https://github.com/facebook/react/pull/26549), [\#30761](https://github.com/facebook/react/pull/30761), [\#30800](https://github.com/facebook/react/pull/30800), [\#30762](https://github.com/facebook/react/pull/30762), [\#30879](https://github.com/facebook/react/pull/30879), [\#30934](https://github.com/facebook/react/pull/30934), [\#30952](https://github.com/facebook/react/pull/30952), [\#31056](https://github.com/facebook/react/pull/31056), [\#31452](https://github.com/facebook/react/pull/31452) by [@sammy-SC](https://github.com/sammy-SC), [@acdlite](https://github.com/acdlite), [@gnoff](https://github.com/gnoff), [@jackpope](https://github.com/jackpope), [@rickhanlonii](https://github.com/rickhanlonii))  
-* Don’t rethrow errors at the root ([\#28627](https://github.com/facebook/react/pull/28627), [\#28641](https://github.com/facebook/react/pull/28641) by [@sebmarkbage](https://github.com/sebmarkbage))  
-* Batch sync discrete, continuous, and default lanes ([\#25700](https://github.com/facebook/react/pull/25700) by [@tyao1](https://github.com/tyao1))  
-* Switch `<Context>` to mean `<Context.Provider>` ([\#28226](https://github.com/facebook/react/pull/28226) by [@gaearon](https://github.com/gaearon))  
-* Changes to *StrictMode*  
-  * Handle `info`, `group`, and `groupCollapsed` in *StrictMode* logging ([\#25172](https://github.com/facebook/react/pull/25172) by [@timneutkens](https://github.com/timneutkens))  
-  * Refs are now attached/detached/attached in *StrictMode* ([\#25049](https://github.com/facebook/react/pull/25049) by [@sammy-SC](https://github.com/sammy-SC))  
-  * Fix `useSyncExternalStore()` hydration in *StrictMode* ([\#26791](https://github.com/facebook/react/pull/26791) by [@sophiebits](https://github.com/sophiebits))  
-  * Always trigger `componentWillUnmount()` in *StrictMode* ([\#26842](https://github.com/facebook/react/pull/26842) by [@tyao1](https://github.com/tyao1))  
-  * Restore double invoking `useState()` and `useReducer()` initializer functions in *StrictMode* ([\#28248](https://github.com/facebook/react/pull/28248) by [@eps1lon](https://github.com/eps1lon))  
-  * Reuse memoized result from first pass ([\#25583](https://github.com/facebook/react/pull/25583) by [@acdlite](https://github.com/acdlite))  
-  * Fix `useId()` in *StrictMode* ([\#25713](https://github.com/facebook/react/pull/25713) by [@gnoff](https://github.com/gnoff))  
-  * Add component name to *StrictMode* error messages ([\#25718](https://github.com/facebook/react/pull/25718) by [@sammy-SC](https://github.com/sammy-SC))  
-* Add support for rendering BigInt ([\#24580](https://github.com/facebook/react/pull/24580) by [@eps1lon](https://github.com/eps1lon))  
-* `act()` no longer checks `shouldYield` which can be inaccurate in test environments ([\#26317](https://github.com/facebook/react/pull/26317) by [@acdlite](https://github.com/acdlite))  
-* Warn when keys are spread with props ([\#25697](https://github.com/facebook/react/pull/25697), [\#26080](https://github.com/facebook/react/pull/26080) by [@sebmarkbage](https://github.com/sebmarkbage) and [@kassens](https://github.com/kassens))  
-* Generate sourcemaps for production build artifacts ([\#26446](https://github.com/facebook/react/pull/26446) by [@markerikson](https://github.com/markerikson))  
-* Improve stack diffing algorithm ([\#27132](https://github.com/facebook/react/pull/27132) by [@KarimP](https://github.com/KarimP))  
-* Suspense throttling lowered from 500ms to 300ms ([\#26803](https://github.com/facebook/react/pull/26803) by [@acdlite](https://github.com/acdlite))  
-* Lazily propagate context changes ([\#20890](https://github.com/facebook/react/pull/20890) by [@acdlite](https://github.com/acdlite) and [@gnoff](https://github.com/gnoff))  
-* Immediately rerender pinged fiber ([\#25074](https://github.com/facebook/react/pull/25074) by [@acdlite](https://github.com/acdlite))  
-* Move update scheduling to microtask ([\#26512](https://github.com/facebook/react/pull/26512) by [@acdlite](https://github.com/acdlite))  
-* Consistently apply throttled retries ([\#26611](https://github.com/facebook/react/pull/26611), [\#26802](https://github.com/facebook/react/pull/26802) by [@acdlite](https://github.com/acdlite))  
-* Suspend Thenable/Lazy if it's used in React.Children ([\#28284](https://github.com/facebook/react/pull/28284) by [@sebmarkbage](https://github.com/sebmarkbage))  
-* Detect infinite update loops caused by render phase updates ([\#26625](https://github.com/facebook/react/pull/26625) by [@acdlite](https://github.com/acdlite))  
-* Update conditional hooks warning ([\#29626](https://github.com/facebook/react/pull/29626) by [@sophiebits](https://github.com/sophiebits))  
-* Update error URLs to go to new docs ([\#27240](https://github.com/facebook/react/pull/27240) by [@rickhanlonii](https://github.com/rickhanlonii))  
-* Rename the `react.element` symbol to `react.transitional.element` ([\#28813](https://github.com/facebook/react/pull/28813) by [@sebmarkbage](https://github.com/sebmarkbage))  
-* Fix crash when suspending in shell during `useSyncExternalStore()` re-render ([\#27199](https://github.com/facebook/react/pull/27199) by [@acdlite](https://github.com/acdlite))  
-* Fix incorrect “detected multiple renderers" error in tests ([\#22797](https://github.com/facebook/react/pull/22797) by [@eps1lon](https://github.com/eps1lon))  
-* Fix bug where effect cleanup may be called twice after bailout ([\#26561](https://github.com/facebook/react/pull/26561) by [@acdlite](https://github.com/acdlite))  
-* Fix suspending in shell during discrete update ([\#25495](https://github.com/facebook/react/pull/25495) by [@acdlite](https://github.com/acdlite))  
-* Fix memory leak after repeated setState bailouts ([\#25309](https://github.com/facebook/react/pull/25309) by [@acdlite](https://github.com/acdlite))  
-* Fix `useSyncExternalStore()` dropped update when state is dispatched in render phase ([\#25578](https://github.com/facebook/react/pull/25578) by [@pandaiolo](https://github.com/pandaiolo))  
-* Fix logging when rendering a lazy fragment ([\#30372](https://github.com/facebook/react/pull/30372) by [@tom-sherman](https://github.com/tom-sherman))  
-* Remove string refs ([\#25383](https://github.com/facebook/react/pull/25383), [\#28322](https://github.com/facebook/react/pull/28322) by [@eps1lon](https://github.com/eps1lon) and [@acdlite](https://github.com/acdlite))  
-* Remove Legacy Context (\#30319 by [@kassens](https://github.com/kassens))  
-* Remove `RefreshRuntime.findAffectedHostInstances` ([\#30538](https://github.com/facebook/react/pull/30538) by [@gaearon](https://github.com/gaearon))  
-* Remove client caching from `cache()` API ([\#27977](https://github.com/facebook/react/pull/27977), [\#28250](https://github.com/facebook/react/pull/28250) by [@acdlite](https://github.com/acdlite) and [@gnoff](https://github.com/gnoff))  
-* Remove `propTypes` ([\#28324](https://github.com/facebook/react/pull/28324), [\#28326](https://github.com/facebook/react/pull/28326) by [@gaearon](https://github.com/gaearon))  
-* Remove `defaultProps` support, except for classes ([\#28733](https://github.com/facebook/react/pull/28733) by [@acdlite](https://github.com/acdlite))  
-* Remove UMD builds ([\#28735](https://github.com/facebook/react/pull/28735) by [@gnoff](https://github.com/gnoff))  
-* Remove delay for non-transition updates ([\#26597](https://github.com/facebook/react/pull/26597) by [@acdlite](https://github.com/acdlite))  
-* Remove `createFactory` ([\#27798](https://github.com/facebook/react/pull/27798) by [@kassens](https://github.com/kassens))
-
-#### React DOM
-
-* Adds Form Actions to handle form submission ([\#26379](https://github.com/facebook/react/pull/26379), [\#26674](https://github.com/facebook/react/pull/26674), [\#26689](https://github.com/facebook/react/pull/26689), [\#26708](https://github.com/facebook/react/pull/26708), [\#26714](https://github.com/facebook/react/pull/26714),  [\#26735](https://github.com/facebook/react/pull/26735), [\#26846](https://github.com/facebook/react/pull/26846), [\#27358](https://github.com/facebook/react/pull/27358),  [\#28056](https://github.com/facebook/react/pull/28056) by [@sebmarkbage](https://github.com/sebmarkbage), [@acdlite](https://github.com/acdlite), and [@jupapios](https://github.com/jupapios))  
-* Add `useFormStatus()` hook to provide status information of the last form submission ([\#26719](https://github.com/facebook/react/pull/26719), [\#26722](https://github.com/facebook/react/pull/26722), [\#26788](https://github.com/facebook/react/pull/26788),  [\#29019](https://github.com/facebook/react/pull/29019), [\#28728](https://github.com/facebook/react/pull/28728), [\#28413](https://github.com/facebook/react/pull/28413) by [@acdlite](https://github.com/acdlite) and [@eps1lon](https://github.com/eps1lon))  
-* Support for Document Metadata. Adds `preinit`, `preinitModule`, `preconnect`, `prefetchDNS`, `preload`, and `preloadModule` APIs.  
-  * [\#25060](https://github.com/facebook/react/pull/25060), [\#25243](https://github.com/facebook/react/pull/25243), [\#25388](https://github.com/facebook/react/pull/25388), [\#25432](https://github.com/facebook/react/pull/25432), [\#25436](https://github.com/facebook/react/pull/25436), [\#25426](https://github.com/facebook/react/pull/25426), [\#25500](https://github.com/facebook/react/pull/25500), [\#25480](https://github.com/facebook/react/pull/25480), [\#25508](https://github.com/facebook/react/pull/25508), [\#25515](https://github.com/facebook/react/pull/25515), [\#25514](https://github.com/facebook/react/pull/25514), [\#25532](https://github.com/facebook/react/pull/25532), [\#25536](https://github.com/facebook/react/pull/25536), [\#25534](https://github.com/facebook/react/pull/25534), [\#25546](https://github.com/facebook/react/pull/25546), [\#25559](https://github.com/facebook/react/pull/25559), [\#25569](https://github.com/facebook/react/pull/25569), [\#25599](https://github.com/facebook/react/pull/25599), [\#25689](https://github.com/facebook/react/pull/25689), [\#26106](https://github.com/facebook/react/pull/26106), [\#26152](https://github.com/facebook/react/pull/26152), [\#26239](https://github.com/facebook/react/pull/26239), [\#26237](https://github.com/facebook/react/pull/26237), [\#26280](https://github.com/facebook/react/pull/26280), [\#26154](https://github.com/facebook/react/pull/26154), [\#26256](https://github.com/facebook/react/pull/26256), [\#26353](https://github.com/facebook/react/pull/26353), [\#26427](https://github.com/facebook/react/pull/26427), [\#26450](https://github.com/facebook/react/pull/26450), [\#26502](https://github.com/facebook/react/pull/26502),  [\#26514](https://github.com/facebook/react/pull/26514), [\#26531](https://github.com/facebook/react/pull/26531), [\#26532](https://github.com/facebook/react/pull/26532), [\#26557](https://github.com/facebook/react/pull/26557), [\#26871](https://github.com/facebook/react/pull/26871), [\#26881](https://github.com/facebook/react/pull/26881), [\#26877](https://github.com/facebook/react/pull/26877), [\#26873](https://github.com/facebook/react/pull/26873), [\#26880](https://github.com/facebook/react/pull/26880), [\#26942](https://github.com/facebook/react/pull/26942), [\#26938](https://github.com/facebook/react/pull/26938), [\#26940](https://github.com/facebook/react/pull/26940), [\#26939](https://github.com/facebook/react/pull/26939), [\#27030](https://github.com/facebook/react/pull/27030), [\#27201](https://github.com/facebook/react/pull/27201), [\#27212](https://github.com/facebook/react/pull/27212), [\#27217](https://github.com/facebook/react/pull/27217), [\#27218](https://github.com/facebook/react/pull/27218), [\#27220](https://github.com/facebook/react/pull/27220), [\#27224](https://github.com/facebook/react/pull/27224), [\#27223](https://github.com/facebook/react/pull/27223), [\#27269](https://github.com/facebook/react/pull/27269), [\#27260](https://github.com/facebook/react/pull/27260), [\#27347](https://github.com/facebook/react/pull/27347), [\#27346](https://github.com/facebook/react/pull/27346), [\#27361](https://github.com/facebook/react/pull/27361), [\#27400](https://github.com/facebook/react/pull/27400), [\#27541](https://github.com/facebook/react/pull/27541), [\#27610](https://github.com/facebook/react/pull/27610), [\#28110](https://github.com/facebook/react/pull/28110), [\#29693](https://github.com/facebook/react/pull/29693), [\#29732](https://github.com/facebook/react/pull/29732), [\#29811](https://github.com/facebook/react/pull/29811), [\#27586](https://github.com/facebook/react/pull/27586), [\#28069](https://github.com/facebook/react/pull/28069) by [@gnoff](https://github.com/gnoff), [@sebmarkbage](https://github.com/sebmarkbage), [@acdlite](https://github.com/acdlite), [@kassens](https://github.com/kassens), [@sokra](https://github.com/sokra), [@sweetliquid](https://github.com/sweetliquid)  
-* Add `fetchPriority` to `<img>` and `<link>` ([\#25927](https://github.com/facebook/react/pull/25927) by [@styfle](https://github.com/styfle))  
-* Add support for SVG `transformOrigin` prop ([\#26130](https://github.com/facebook/react/pull/26130) by [@arav-ind](https://github.com/arav-ind))  
-* Add support for `onScrollEnd` event ([\#26789](https://github.com/facebook/react/pull/26789) by [@devongovett](https://github.com/devongovett))  
-* Allow `<hr>` as child of `<select>` ([\#27632](https://github.com/facebook/react/pull/27632) by [@SouSingh](https://github.com/SouSingh))  
-* Add support for Popover API ([\#27981](https://github.com/facebook/react/pull/27981) by [@eps1lon](https://github.com/eps1lon))  
-* Add support for `inert` ([\#24730](https://github.com/facebook/react/pull/24730) by [@eps1lon](https://github.com/eps1lon))  
-* Add support for `imageSizes` and `imageSrcSet` ([\#22550](https://github.com/facebook/react/pull/22550) by [@eps1lon](https://github.com/eps1lon))  
-* Synchronously flush transitions in popstate events ([\#26025](https://github.com/facebook/react/pull/26025), [\#27559](https://github.com/facebook/react/pull/27559), [\#27505](https://github.com/facebook/react/pull/27505), [\#30759](https://github.com/facebook/react/pull/30759) by [@tyao1](https://github.com/tyao1) and [@acdlite](https://github.com/acdlite))  
-* `flushSync` exhausts queue even if something throws ([\#26366](https://github.com/facebook/react/pull/26366) by [@acdlite](https://github.com/acdlite))  
-* Throw error if `react` and `react-dom` versions don’t match ([\#29236](https://github.com/facebook/react/pull/29236) by [@acdlite](https://github.com/acdlite))  
-* Ensure `srcset` and `src` are assigned last on `<img>` instances ([\#30340](https://github.com/facebook/react/pull/30340) by [@gnoff](https://github.com/gnoff))  
-* Javascript URLs are replaced with functions that throw errors ([\#26507](https://github.com/facebook/react/pull/26507), [\#29808](https://github.com/facebook/react/pull/29808) by [@sebmarkbage](https://github.com/sebmarkbage) and [@kassens](https://github.com/kassens))  
-* Treat toggle and beforetoggle as discrete events ([\#29176](https://github.com/facebook/react/pull/29176) by [@eps1lon](https://github.com/eps1lon))  
-* Filter out empty `src` and `href` attributes (unless for `<a href=”” />`) ([\#18513](https://github.com/facebook/react/pull/18513), [\#28124](https://github.com/facebook/react/pull/28124) by [@bvaughn](https://github.com/bvaughn) and [@eps1lon](https://github.com/eps1lon))  
-* Fix unitless `scale` style property ([\#25601](https://github.com/facebook/react/pull/25601) by [@JonnyBurger](https://github.com/JonnyBurger))  
-* Fix `onChange` error message for controlled `<select>` ([\#27740](https://github.com/facebook/react/pull/27740) by [@Biki-das](https://github.com/Biki-das))  
-* Fix focus restore in child windows after element reorder ([\#30951](https://github.com/facebook/react/pull/30951) by [@ling1726](https://github.com/ling1726))  
-* Remove `render`, `hydrate`, `findDOMNode`, `unmountComponentAtNode`, `unstable_createEventHandle`, `unstable_renderSubtreeIntoContainer`, and `unstable_runWithPriority`. Move `createRoot` and `hydrateRoot` to `react-dom/client`. ([\#28271](https://github.com/facebook/react/pull/28271) by [@gnoff](https://github.com/gnoff))  
-* Remove `test-utils` ([\#28541](https://github.com/facebook/react/pull/28541) by [@eps1lon](https://github.com/eps1lon))  
-* Remove `unstable_flushControlled` ([\#26397](https://github.com/facebook/react/pull/26397) by [@kassens](https://github.com/kassens))  
-* Remove legacy mode ([\#28468](https://github.com/facebook/react/pull/28468) by [@gnoff](https://github.com/gnoff))  
-* Remove `renderToStaticNodeStream()` ([\#28873](https://github.com/facebook/react/pull/28873) by @gnoff)  
-* Remove `unstable_renderSubtreeIntoContainer` ([\#29771](https://github.com/facebook/react/pull/29771) by [@kassens](https://github.com/kassens))
-
-#### React DOM Server
-
-* Stable release of React Server Components ([Many, many PRs](https://github.com/facebook/react/pulls?q=is%3Apr+is%3Aclosed+%5BFlight%5D+in%3Atitle+created%3A%3C2024-12-01+) by [@sebmarkbage](https://github.com/sebmarkbage), [@acdlite](https://github.com/acdlite), [@gnoff](https://github.com/gnoff), [@sammy-SC](https://github.com/sammy-SC), [@gaearon](https://github.com/gaearon), [@sophiebits](https://github.com/sophiebits), [@unstubbable](https://github.com/unstubbable), [@lubieowoce](https://github.com/lubieowoce))
-* Support Server Actions ([\#26124](https://github.com/facebook/react/pull/26124), [\#26632](https://github.com/facebook/react/pull/26632), [\#27459](https://github.com/facebook/react/pull/27459) by [@sebmarkbage](https://github.com/sebmarkbage) and [@acdlite](https://github.com/acdlite))  
-* Changes to SSR  
-  * Add external runtime which bootstraps hydration on the client for binary transparency ([\#25437](https://github.com/facebook/react/pull/25437), [\#26169](https://github.com/facebook/react/pull/26169), [\#25499](https://github.com/facebook/react/pull/25499) by [@MofeiZ](https://github.com/mofeiZ) and [@acdlite](https://github.com/acdlite))  
-  * Support subresource integrity for `bootstrapScripts` and `bootstrapModules` ([\#25104](https://github.com/facebook/react/pull/25104) by [@gnoff](https://github.com/gnoff))  
-  * Fix null bytes written at text chunk boundaries ([\#26228](https://github.com/facebook/react/pull/26228) by [@sophiebits](https://github.com/sophiebits))  
-  * Fix logic around attribute serialization ([\#26526](https://github.com/facebook/react/pull/26526) by [@gnoff](https://github.com/gnoff))  
-  * Fix precomputed chunk cleared on Node 18 ([\#25645](https://github.com/facebook/react/pull/25645) by [@feedthejim](https://github.com/feedthejim))  
-  * Optimize end tag chunks ([\#27522](https://github.com/facebook/react/pull/27522) by [@yujunjung](https://github.com/yujunjung))  
-  * Gracefully handle suspending in DOM configs ([\#26768](https://github.com/facebook/react/pull/26768) by [@sebmarkbage](https://github.com/sebmarkbage))  
-  * Check for nullish values on ReactCustomFormAction ([\#26770](https://github.com/facebook/react/pull/26770) by [@sebmarkbage](https://github.com/sebmarkbage))  
-  * Preload `bootstrapModules`, `bootstrapScripts`, and update priority queue ([\#26754](https://github.com/facebook/react/pull/26754), [\#26753](https://github.com/facebook/react/pull/26753), [\#27190](https://github.com/facebook/react/pull/27190), [\#27189](https://github.com/facebook/react/pull/27189) by [@gnoff](https://github.com/gnoff))  
-  * Client render the nearest child or parent suspense boundary if replay errors or is aborted ([\#27386](https://github.com/facebook/react/pull/27386) by [@sebmarkbage](https://github.com/sebmarkbage))  
-  * Don't bail out of flushing if we still have pending root tasks ([\#27385](https://github.com/facebook/react/pull/27385) by [@sebmarkbage](https://github.com/sebmarkbage))  
-  * Ensure Resumable State is Serializable ([\#27388](https://github.com/facebook/react/pull/27388) by [@sebmarkbage](https://github.com/sebmarkbage))  
-  * Remove extra render pass when reverting to client render ([\#26445](https://github.com/facebook/react/pull/26445) by [@acdlite](https://github.com/acdlite))  
-  * Fix unwinding context during selective hydration ([\#25876](https://github.com/facebook/react/pull/25876) by [@tyao1](https://github.com/tyao1))  
-  * Stop flowing and then abort if a stream is cancelled ([\#27405](https://github.com/facebook/react/pull/27405) by [@sebmarkbage](https://github.com/sebmarkbage))  
-  * Pass cancellation reason to abort ([\#27536](https://github.com/facebook/react/pull/27536) by [@sebmarkbage](https://github.com/sebmarkbage))  
-  * Add `onHeaders` entrypoint option ([\#27641](https://github.com/facebook/react/pull/27641), [\#27712](https://github.com/facebook/react/pull/27712) by [@gnoff](https://github.com/gnoff))  
-  * Escape `<style>` and `<script>` textContent to enable rendering inner content without dangerouslySetInnerHTML ([\#28870](https://github.com/facebook/react/pull/28870), [\#28871](https://github.com/facebook/react/pull/28871) by [@gnoff](https://github.com/gnoff))  
-  * Fallback to client replaying actions for Blob serialization ([\#28987](https://github.com/facebook/react/pull/28987) by [@sebmarkbage](https://github.com/sebmarkbage))  
-  * Render Suspense fallback if boundary contains new stylesheet during sync update ([\#28965](https://github.com/facebook/react/pull/28965) by [@gnoff](https://github.com/gnoff))  
-  * Fix header length tracking (\#30327 by [@gnoff](https://github.com/gnoff))  
-  * Use `srcset` to trigger load event on mount (\#30351 by [@gnoff](https://github.com/gnoff))  
-  * Don't perform work when closing stream (\#30497 by [@gnoff](https://github.com/gnoff))  
-  * Allow aborting during render (\#30488, [\#30730](https://github.com/facebook/react/pull/30730) by [@gnoff](https://github.com/gnoff))  
-  * Start initial work immediately (\#31079 by [@gnoff](https://github.com/gnoff))  
-  * A transition flowing into a dehydrated boundary no longer suspends when showing fallback ([\#27230](https://github.com/facebook/react/pull/27230) by [@acdlite](https://github.com/acdlite))  
-  * Fix selective hydration triggers false update loop error ([\#27439](https://github.com/facebook/react/pull/27439) by [@acdlite](https://github.com/acdlite))  
-  * Warn for Child Iterator of all types but allow Generator Components ([\#28853](https://github.com/facebook/react/pull/28853) by [@sebmarkbage](https://github.com/sebmarkbage))  
-  * Include regular stack trace in serialized errors ([\#28684](https://github.com/facebook/react/pull/28684), [\#28738](https://github.com/facebook/react/pull/28738) by [@sebmarkbage](https://github.com/sebmarkbage))  
-  * Aborting early no longer infinitely suspends ([\#24751](https://github.com/facebook/react/pull/24751) by [@sebmarkbage](https://github.com/sebmarkbage))  
-  * Fix hydration warning suppression in text comparisons ([\#24784](https://github.com/facebook/react/pull/24784) by [@gnoff](https://github.com/gnoff))  
-  * Changes to error handling in SSR
-    * Add diffs to hydration warnings ([\#28502](https://github.com/facebook/react/pull/28502), [\#28512](https://github.com/facebook/react/pull/28512) by [@sebmarkbage](https://github.com/sebmarkbage))  
-    * Make Error creation lazy ([\#24728](https://github.com/facebook/react/pull/24728) by [@sebmarkbage](https://github.com/sebmarkbage))  
-    * Remove recoverable error when a sync update flows into a dehydrated boundary ([\#25692](https://github.com/facebook/react/pull/25692) by [@sebmarkbage](https://github.com/sebmarkbage))  
-    * Don't "fix up" mismatched text content with suppressedHydrationWarning ([\#26391](https://github.com/facebook/react/pull/26391) by [@sebmarkbage](https://github.com/sebmarkbage))  
-    * Fix component stacks in errors ([\#27456](https://github.com/facebook/react/pull/27456) by [@sebmarkbage](https://github.com/sebmarkbage))  
-    * Add component stacks to `onError` ([\#27761](https://github.com/facebook/react/pull/27761), [\#27850](https://github.com/facebook/react/pull/27850) by [@gnoff](https://github.com/gnoff) and [@sebmarkbage](https://github.com/sebmarkbage))  
-    * Throw hydration mismatch errors once ([\#28502](https://github.com/facebook/react/pull/28502) by [@sebmarkbage](https://github.com/sebmarkbage))  
-* Add Bun streaming server renderer ([\#25597](https://github.com/facebook/react/pull/25597) by [@colinhacks](https://github.com/colinhacks))  
-* Add nonce support to bootstrap scripts ([\#26738](https://github.com/facebook/react/pull/26738) by [@danieltott](https://github.com/danieltott))  
-* Add `crossorigin` support to bootstrap scripts ([\#26844](https://github.com/facebook/react/pull/26844) by [@HenriqueLimas](https://github.com/HenriqueLimas))  
-* Support `nonce` and `fetchpriority` in preload links ([\#26826](https://github.com/facebook/react/pull/26826) by [@liuyenwei](https://github.com/liuyenwei))  
-* Add `referrerPolicy` to `ReactDOM.preload()` ([\#27096](https://github.com/facebook/react/pull/27096) by [@styfle](https://github.com/styfle))  
-* Add server condition for `react/jsx-dev-runtime` ([\#28921](https://github.com/facebook/react/pull/28921) by [@himself65](https://github.com/himself65))   
-* Export version ([\#29596](https://github.com/facebook/react/pull/29596) by [@unstubbable](https://github.com/unstubbable))  
-* Rename the secret export of Client and Server internals ([\#28786](https://github.com/facebook/react/pull/28786), [\#28789](https://github.com/facebook/react/pull/28789) by [@sebmarkbage](https://github.com/sebmarkbage))  
-* Remove layout effect warning on server ([\#26395](https://github.com/facebook/react/pull/26395) by [@rickhanlonii](https://github.com/rickhanlonii))  
-* Remove `errorInfo.digest` from `onRecoverableError` ([\#28222](https://github.com/facebook/react/pull/28222) by [@gnoff](https://github.com/gnoff))
-
-#### ReactTestRenderer
-
-* Add deprecation error to `react-test-renderer` on web ([\#27903](https://github.com/facebook/react/pull/27903), [\#28904](https://github.com/facebook/react/pull/28904) by [@jackpope](https://github.com/jackpope) and [@acdlite](https://github.com/acdlite))  
-* Render with ConcurrentRoot on web ([\#28498](https://github.com/facebook/react/pull/28498) by [@jackpope](https://github.com/jackpope))  
-* Remove `react-test-renderer/shallow` export ([\#25475](https://github.com/facebook/react/pull/25475), [\#28497](https://github.com/facebook/react/pull/28497) by [@sebmarkbage](https://github.com/sebmarkbage) and [@jackpope](https://github.com/jackpope))
-
-#### React Reconciler
-
-* Enable suspending commits without blocking render ([\#26398](https://github.com/facebook/react/pull/26398), [\#26427](https://github.com/facebook/react/pull/26427) by [@acdlite](https://github.com/acdlite))  
-* Remove `prepareUpdate` ([\#26583](https://github.com/facebook/react/pull/26583), [\#27409](http://github.com/facebook/react/pull/27409) by [@sebmarkbage](https://github.com/sebmarkbage) and [@sophiebits](https://github.com/sophiebits))
-
-#### React-Is
-
-* Enable tree shaking ([\#27701](https://github.com/facebook/react/pull/27701) by [@markerikson](https://github.com/markerikson))  
-* Remove `isConcurrentMode` and `isAsyncMode` methods ([\#28224](https://github.com/facebook/react/pull/28224) by @gaearon)
-
-#### useSyncExternalStore
-
-* Remove React internals access ([\#29868](https://github.com/facebook/react/pull/29868) by [@phryneas](https://github.com/phryneas))  
-* Fix stale selectors keeping previous store references ([\#25969](https://github.com/facebook/react/pull/25968) by [@jellevoost](https://github.com/jellevoost))
-
 ## 18.3.1 (April 26, 2024)
 
 - Export `act` from `react` [f1338f](https://github.com/facebook/react/commit/f1338f8080abd1386454a10bbf93d67bfe37ce85)

MAINTAINERS

@@ -1,22 +0,0 @@
-acdlite
-eps1lon
-gaearon
-gnoff
-unstubbable
-hoxyq
-jackpope
-jbonta
-jbrown215
-josephsavona
-kassens
-mattcarrollcode
-mofeiZ
-mvitousek
-pieterv
-poteto
-rickhanlonii
-sebmarkbage
-sethwebster
-sophiebits
-elicwhite
-yuzhi

README.md

@@ -1,4 +1,4 @@
-# [React](https://react.dev/) · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/facebook/react/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/react.svg?style=flat)](https://www.npmjs.com/package/react) [![(Runtime) Build and Test](https://github.com/facebook/react/actions/workflows/runtime_build_and_test.yml/badge.svg)](https://github.com/facebook/react/actions/workflows/runtime_build_and_test.yml) [![(Compiler) TypeScript](https://github.com/facebook/react/actions/workflows/compiler_typescript.yml/badge.svg?branch=main)](https://github.com/facebook/react/actions/workflows/compiler_typescript.yml) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://legacy.reactjs.org/docs/how-to-contribute.html#your-first-pull-request)
+# [React](https://react.dev/) · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/facebook/react/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/react.svg?style=flat)](https://www.npmjs.com/package/react) [![CircleCI Status](https://circleci.com/gh/facebook/react.svg?style=shield)](https://circleci.com/gh/facebook/react) [![(Runtime) Build and Test](https://github.com/facebook/react/actions/workflows/runtime_build_and_test.yml/badge.svg)](https://github.com/facebook/react/actions/workflows/runtime_build_and_test.yml) [![(Compiler) TypeScript](https://github.com/facebook/react/actions/workflows/compiler_typescript.yml/badge.svg?branch=main)](https://github.com/facebook/react/actions/workflows/compiler_typescript.yml) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://legacy.reactjs.org/docs/how-to-contribute.html#your-first-pull-request)
 
 React is a JavaScript library for building user interfaces.
 

ReactVersions.js

@@ -7,53 +7,52 @@
 //
 // The @latest channel uses the version as-is, e.g.:
 //
-//   19.1.0
+//   19.0.0
 //
 // The @canary channel appends additional information, with the scheme
 // <version>-<label>-<commit_sha>, e.g.:
 //
-//   19.1.0-canary-a1c2d3e4
+//   19.0.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.1.0';
+const ReactVersion = '19.0.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
 // choose to change it to "alpha", "beta", "rc", etc.
 //
 // It only affects the label used in the version string. To customize the
-// npm dist tags used during publish, refer to .github/workflows/runtime_prereleases_*.yml.
-const canaryChannelLabel = 'canary';
+// npm dist tags used during publish, refer to .circleci/config.yml.
+const canaryChannelLabel = 'rc';
 
 // If the canaryChannelLabel is "rc", the build pipeline will use this to build
 // an RC version of the packages.
 const rcNumber = 0;
 
 const stablePackages = {
-  'eslint-plugin-react-hooks': '5.2.0',
-  'jest-react': '0.17.0',
+  'eslint-plugin-react-hooks': '5.1.0',
+  'jest-react': '0.16.0',
   react: ReactVersion,
   'react-art': ReactVersion,
   'react-dom': ReactVersion,
   'react-server-dom-webpack': ReactVersion,
   'react-server-dom-turbopack': ReactVersion,
-  'react-server-dom-parcel': ReactVersion,
   'react-is': ReactVersion,
-  'react-reconciler': '0.32.0',
-  'react-refresh': '0.17.0',
+  'react-reconciler': '0.31.0',
+  'react-refresh': '0.16.0',
   'react-test-renderer': ReactVersion,
-  'use-subscription': '1.11.0',
-  'use-sync-external-store': '1.5.0',
-  scheduler: '0.26.0',
+  'use-subscription': '1.10.0',
+  'use-sync-external-store': '1.4.0',
+  scheduler: '0.25.0',
 };
 
 // These packages do not exist in the @canary or @latest channel, only
 // @experimental. We don't use semver, just the commit sha, so this is just a
 // list of package names instead of a map.
-const experimentalPackages = ['react-markup'];
+const experimentalPackages = [];
 
 module.exports = {
   ReactVersion,

babel.config-ts.js

@@ -1,15 +0,0 @@
-/**
- * This file is purely being used for local jest runs, and doesn't participate in the build process.
- */
-'use strict';
-
-module.exports = {
-  plugins: [
-    '@babel/plugin-syntax-jsx',
-    '@babel/plugin-transform-flow-strip-types',
-  ],
-  presets: [
-    ['@babel/preset-env', {targets: {node: 'current'}}],
-    '@babel/preset-typescript',
-  ],
-};

compiler/.gitignore

@@ -21,8 +21,4 @@ dist
 .spr.yml
 testfilter.txt
 
-bundle-oss.sh
-
-# forgive
-*.vsix
-.vscode-test
+bundle-oss.sh

compiler/.watchmanconfig

@@ -0,0 +1 @@
+{}

compiler/CODE_OF_CONDUCT.md

@@ -0,0 +1,80 @@
+# Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to make participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+  advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies within all project spaces, and it also applies when
+an individual is representing the project or its community in public spaces.
+Examples of representing a project or community include using an official
+project e-mail address, posting via an official social media account, or acting
+as an appointed representative at an online or offline event. Representation of
+a project may be further defined and clarified by project maintainers.
+
+This Code of Conduct also applies outside the project spaces when there is a
+reasonable belief that an individual's behavior may have a negative impact on
+the project or its community.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at <opensource-conduct@fb.com>. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq

compiler/CONTRIBUTING.md

@@ -0,0 +1,31 @@
+# Contributing to react-forget
+We want to make contributing to this project as easy and transparent as
+possible.
+
+## Pull Requests
+We actively welcome your pull requests.
+
+1. Fork the repo and create your branch from `main`.
+2. If you've added code that should be tested, add tests.
+3. If you've changed APIs, update the documentation.
+4. Ensure the test suite passes.
+5. Make sure your code lints.
+6. If you haven't already, complete the Contributor License Agreement ("CLA").
+
+## Contributor License Agreement ("CLA")
+In order to accept your pull request, we need you to submit a CLA. You only need
+to do this once to work on any of Facebook's open source projects.
+
+Complete your CLA here: <https://code.facebook.com/cla>
+
+## Issues
+We use GitHub issues to track public bugs. Please ensure your description is
+clear and has sufficient instructions to be able to reproduce the issue.
+
+Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe
+disclosure of security bugs. In those cases, please go through the process
+outlined on that page and do not file a public issue.
+
+## License
+By contributing to react-forget, you agree that your contributions will be licensed
+under the LICENSE file in the root directory of this source tree.

compiler/Cargo.toml

@@ -0,0 +1,61 @@
+[workspace]
+resolver = "2"
+members = ["crates/*"]
+
+[workspace.package]
+authors     = ["The React Team https://react.dev/community/team"]
+description = "React Compiler"
+edition     = "2021"
+homepage    = "https://github.com/facebook/react"
+keywords    = ["JavaScript", "TypeScript", "React", "React Compiler", "Compiler"]
+license     = "MIT"
+repository  = "https://github.com/facebook/react"
+
+[workspace.dependencies]
+# workspace crates
+react_build_hir = { path = "crates/react_build_hir" }
+react_diagnostics = { path = "crates/react_diagnostics" }
+react_estree = { path = "crates/react_estree" }
+react_estree_codegen = { path = "crates/react_estree_codegen" }
+react_fixtures = { path = "crates/react_fixtures" }
+react_hermes_parser = { path = "crates/react_hermes_parser" }
+react_hir = { path = "crates/react_hir" }
+react_optimization = { path = "crates/react_optimization" }
+react_semantic_analysis = { path = "crates/react_semantic_analysis" }
+react_ssa = { path = "crates/react_ssa" }
+react_utils = { path = "crates/react_utils" }
+
+# dependencies
+indexmap = { version = "2.0.0", features = ["serde"] }
+insta = { version = "1.30.0", features = ["glob"] }
+miette = { version = "5.9.0" }
+prettyplease = "0.2.10"
+quote = "1.0.29"
+serde = { version = "1.0.167", features = ["serde_derive"] }
+serde_json = "1.0.100"
+stacker = "0.1.15"
+static_assertions = "1.1.0"
+syn = "2.0.23"
+thiserror = "1.0.41"
+hermes = { git = "https://github.com/facebook/hermes.git" }
+juno_support = { git = "https://github.com/facebook/hermes.git" }
+
+[profile.release]
+# configuration adapted from oxc
+# https://github.com/Boshen/oxc/blob/ea85ee9f2d64dd284c5b7410f491d81fb879abae/Cargo.toml#L89-L97
+opt-level     = 3
+lto           = "fat"
+codegen-units = 1
+strip         = "symbols"
+debug         = false
+panic         = "abort"   # Let it crash and force ourselves to write safe Rust.
+
+# Make insta run faster by compiling with release mode optimizations
+# https://docs.rs/insta/latest/insta/#optional-faster-runs
+[profile.dev.package.insta]
+opt-level = 3
+
+# Make insta diffing libary faster by compiling with release mode optimizations
+# https://docs.rs/insta/latest/insta/#optional-faster-runs
+[profile.dev.package.similar]
+opt-level = 3

compiler/apps/playground/README.md

@@ -26,13 +26,6 @@ $ npm run dev
 $ yarn
 ```
 
-## Testing
-```sh
-# Install playwright browser binaries
-$ npx playwright install --with-deps
-# Run tests
-$ yarn test
-```
 ## Deployment
 
 This project has been deployed using Vercel. Vercel does the exact same thing as we would

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/01-user-output.txt

@@ -1,14 +0,0 @@
-import { c as _c } from "react/compiler-runtime";
-export default function TestComponent(t0) {
-  const $ = _c(2);
-  const { x } = t0;
-  let t1;
-  if ($[0] !== x) {
-    t1 = <Button>{x}</Button>;
-    $[0] = x;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  return t1;
-}

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

@@ -1,12 +0,0 @@
-import { c as _c } from "react/compiler-runtime";
-export default function MyApp() {
-  const $ = _c(1);
-  let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = <div>Hello World</div>;
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  return t0;
-}

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

@@ -1,13 +0,0 @@
-import { c as _c } from "react/compiler-runtime"; // 
-        @compilationMode(all)
-function nonReactFn() {
-  const $ = _c(1);
-  let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = {};
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  return t0;
-}

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

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

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

@@ -0,0 +1,11 @@
+function MyApp() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <div>Hello World</div>;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/function-scope-beats-module-scope-output.txt

@@ -1,14 +0,0 @@
-function TestComponent(t0) {
-  "use memo";
-  const $ = _c(2);
-  const { x } = t0;
-  let t1;
-  if ($[0] !== x) {
-    t1 = <Button>{x}</Button>;
-    $[0] = x;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  return t1;
-}

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/module-scope-use-memo-output.txt

@@ -1,15 +0,0 @@
-"use memo";
-import { c as _c } from "react/compiler-runtime";
-export default function TestComponent(t0) {
-  const $ = _c(2);
-  const { x } = t0;
-  let t1;
-  if ($[0] !== x) {
-    t1 = <Button>{x}</Button>;
-    $[0] = x;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  return t1;
-}

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/module-scope-use-no-memo-output.txt

@@ -1,4 +0,0 @@
-"use no memo";
-export default function TestComponent({ x }) {
-  return <Button>{x}</Button>;
-}

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/parse-flow-output.txt

@@ -1,14 +0,0 @@
-import { c as _c } from "react/compiler-runtime";
-function useFoo(propVal) {
-  const $ = _c(2);
-  const t0 = (propVal.baz: number);
-  let t1;
-  if ($[0] !== t0) {
-    t1 = <div>{t0}</div>;
-    $[0] = t0;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  return t1;
-}

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/parse-typescript-output.txt

@@ -1,20 +0,0 @@
-import { c as _c } from "react/compiler-runtime";
-function Foo() {
-  const $ = _c(2);
-  let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = foo();
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  const x = t0 as number;
-  let t1;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = <div>{x}</div>;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  return t1;
-}

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/todo-function-scope-does-not-beat-module-scope-output.txt

@@ -1,5 +0,0 @@
-"use no memo";
-function TestComponent({ x }) {
-  "use memo";
-  return <Button>{x}</Button>;
-}

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/use-memo-output.txt

@@ -1,29 +0,0 @@
-import { c as _c } from "react/compiler-runtime";
-function TestComponent(t0) {
-  "use memo";
-  const $ = _c(2);
-  const { x } = t0;
-  let t1;
-  if ($[0] !== x) {
-    t1 = <Button>{x}</Button>;
-    $[0] = x;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  return t1;
-}
-const TestComponent2 = (t0) => {
-  "use memo";
-  const $ = _c(2);
-  const { x } = t0;
-  let t1;
-  if ($[0] !== x) {
-    t1 = <Button>{x}</Button>;
-    $[0] = x;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  return t1;
-};

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/use-no-memo-output.txt

@@ -1,8 +0,0 @@
-const TestComponent = function () {
-  "use no memo";
-  return <Button>{x}</Button>;
-};
-const TestComponent2 = ({ x }) => {
-  "use no memo";
-  return <Button>{x}</Button>;
-};

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/user-input.txt

@@ -0,0 +1,13 @@
+function TestComponent(t0) {
+  const $ = _c(2);
+  const { x } = t0;
+  let t1;
+  if ($[0] !== x) {
+    t1 = <Button>{x}</Button>;
+    $[0] = x;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}

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

@@ -5,182 +5,45 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {expect, test} from '@playwright/test';
-import {encodeStore, type Store} from '../../lib/stores';
-import {format} from 'prettier';
+import { expect, test } from "@playwright/test";
+import { encodeStore, type Store } from "../../lib/stores";
 
-function formatPrint(data: Array<string>): Promise<string> {
-  return format(data.join(''), {parser: 'babel'});
-}
-
-const TEST_CASE_INPUTS = [
-  {
-    name: 'module-scope-use-memo',
-    input: `
-'use memo';
-export default function TestComponent({ x }) {
+const STORE: Store = {
+  source: `export default function TestComponent({ x }) {
   return <Button>{x}</Button>;
-}`,
-  },
-  {
-    name: 'module-scope-use-no-memo',
-    input: `
-'use no memo';
-export default function TestComponent({ x }) {
-  return <Button>{x}</Button>;
-}`,
-  },
-  {
-    name: 'use-memo',
-    input: `
-function TestComponent({ x }) {
-  'use memo';
-  return <Button>{x}</Button>;
-}
-const TestComponent2 = ({ x }) => {
-  'use memo';
-  return <Button>{x}</Button>;
-};`,
-  },
-  {
-    name: 'use-no-memo',
-    input: `
-const TestComponent = function() {
-  'use no memo';
-  return <Button>{x}</Button>;
-};
-const TestComponent2 = ({ x }) => {
-  'use no memo';
-  return <Button>{x}</Button>;
-};`,
-  },
-  {
-    name: 'todo-function-scope-does-not-beat-module-scope',
-    input: `
-'use no memo';
-function TestComponent({ x }) {
-  'use memo';
-  return <Button>{x}</Button>;
-}`,
-  },
-  {
-    name: 'parse-typescript',
-    input: `
-function Foo() {
-  const x = foo() as number;
-  return <div>{x}</div>;
 }
 `,
-    noFormat: true,
-  },
-  {
-    name: 'parse-flow',
-    input: `
-// @flow
-function useFoo(propVal: {+baz: number}) {
-  return <div>{(propVal.baz as number)}</div>;
-}
-    `,
-    noFormat: true,
-  },
-  {
-    name: 'compilationMode-infer',
-    input: `// @compilationMode(infer)
-function nonReactFn() {
-  return {};
-}
-    `,
-    noFormat: true,
-  },
-  {
-    name: 'compilationMode-all',
-    input: `// @compilationMode(all)
-function nonReactFn() {
-  return {};
-}
-    `,
-    noFormat: true,
-  },
-];
+};
+const HASH = encodeStore(STORE);
 
-test('editor should open successfully', async ({page}) => {
-  await page.goto(`/`, {waitUntil: 'networkidle'});
+function concat(data: Array<string>): string {
+  return data.join("");
+}
+
+test("editor should compile successfully", async ({ page }) => {
+  await page.goto(`/#${HASH}`, { waitUntil: "networkidle" });
   await page.screenshot({
     fullPage: true,
-    path: 'test-results/00-fresh-page.png',
+    path: "test-results/00-on-networkidle.png",
   });
-});
-
-test('editor should compile from hash successfully', async ({page}) => {
-  const store: Store = {
-    source: `export default function TestComponent({ x }) {
-      return <Button>{x}</Button>;
-    }
-    `,
-  };
-  const hash = encodeStore(store);
-  await page.goto(`/#${hash}`, {waitUntil: 'networkidle'});
 
   // User input from hash compiles
   await page.screenshot({
     fullPage: true,
-    path: 'test-results/01-compiles-from-hash.png',
+    path: "test-results/01-show-js-before.png",
   });
-  const text =
-    (await page.locator('.monaco-editor').nth(1).allInnerTexts()) ?? [];
-  const output = await formatPrint(text);
-
-  expect(output).not.toEqual('');
-  expect(output).toMatchSnapshot('01-user-output.txt');
-});
-
-test('reset button works', async ({page}) => {
-  const store: Store = {
-    source: `export default function TestComponent({ x }) {
-      return <Button>{x}</Button>;
-    }
-    `,
-  };
-  const hash = encodeStore(store);
-  await page.goto(`/#${hash}`, {waitUntil: 'networkidle'});
+  const userInput =
+    (await page.locator(".monaco-editor").nth(2).allInnerTexts()) ?? [];
+  expect(concat(userInput)).toMatchSnapshot("user-input.txt");
 
   // Reset button works
-  page.on('dialog', dialog => dialog.accept());
-  await page.getByRole('button', {name: 'Reset'}).click();
+  page.on("dialog", (dialog) => dialog.accept());
+  await page.getByRole("button", { name: "Reset" }).click();
   await page.screenshot({
     fullPage: true,
-    path: 'test-results/02-reset-button-works.png',
+    path: "test-results/02-show-js-after.png",
   });
-  const text =
-    (await page.locator('.monaco-editor').nth(1).allInnerTexts()) ?? [];
-  const output = await formatPrint(text);
-
-  expect(output).not.toEqual('');
-  expect(output).toMatchSnapshot('02-default-output.txt');
+  const defaultInput =
+    (await page.locator(".monaco-editor").nth(2).allInnerTexts()) ?? [];
+  expect(concat(defaultInput)).toMatchSnapshot("default-input.txt");
 });
-
-TEST_CASE_INPUTS.forEach((t, idx) =>
-  test(`playground compiles: ${t.name}`, async ({page}) => {
-    const store: Store = {
-      source: t.input,
-    };
-    const hash = encodeStore(store);
-    await page.goto(`/#${hash}`, {waitUntil: 'networkidle'});
-    await page.screenshot({
-      fullPage: true,
-      path: `test-results/03-0${idx}-${t.name}.png`,
-    });
-
-    const text =
-      (await page.locator('.monaco-editor').nth(1).allInnerTexts()) ?? [];
-    let output: string;
-    if (t.noFormat) {
-      output = text.join('');
-    } else {
-      output = await formatPrint(text);
-    }
-
-    expect(output).not.toEqual('');
-    expect(output).toMatchSnapshot(`${t.name}-output.txt`);
-  }),
-);

compiler/apps/playground/app/index.tsx

@@ -5,24 +5,25 @@
  * 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';
+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'}
+          {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>
+          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
@@ -44,7 +45,8 @@ const Home: NextPage = () => {
         <SnackbarProvider
           preventDuplicate
           maxSnack={10}
-          Components={{message: MessageSnackbar}}>
+          Components={{ message: MessageSnackbar }}
+        >
           <Header />
           <Editor />
         </SnackbarProvider>

compiler/apps/playground/app/layout.tsx

@@ -5,25 +5,26 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import '../styles/globals.css';
+import "../styles/globals.css";
 
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
-}): JSX.Element {
-  'use no memo';
+}) {
+  "use no memo";
   return (
     <html lang="en">
       <head>
         <title>
-          {process.env.NODE_ENV === 'development'
-            ? '[DEV] React Compiler Playground'
-            : 'React Compiler Playground'}
+          {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>
+          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

compiler/apps/playground/app/page.tsx

@@ -5,19 +5,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-'use client';
+"use client";
 
-import {SnackbarProvider} from 'notistack';
-import {Editor, Header, StoreProvider} from '../components';
-import MessageSnackbar from '../components/Message';
+import { SnackbarProvider } from "notistack";
+import { Editor, Header, StoreProvider } from "../components";
+import MessageSnackbar from "../components/Message";
 
-export default function Page(): JSX.Element {
+export default function Hoot() {
   return (
     <StoreProvider>
       <SnackbarProvider
         preventDuplicate
         maxSnack={10}
-        Components={{message: MessageSnackbar}}>
+        Components={{ message: MessageSnackbar }}
+      >
         <Header />
         <Editor />
       </SnackbarProvider>

compiler/apps/playground/babel.config.js

@@ -0,0 +1,21 @@
+/**
+ * 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.
+ */
+
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ["next/babel"],
+    plugins: [
+      [
+        "babel-plugin-react-compiler",
+        {
+          runtimeModule: "react-compiler-runtime",
+        },
+      ],
+    ],
+  };
+};

compiler/apps/playground/colors.js

@@ -11,86 +11,86 @@
 
 module.exports = {
   // Text colors
-  primary: '#23272F', // gray-90
-  'primary-dark': '#F6F7F9', // gray-5
-  secondary: '#404756', // gray-70
-  'secondary-dark': '#EBECF0', // gray-10
-  link: '#087EA4', // blue-50
-  'link-dark': '#149ECA', // blue-40
-  syntax: '#EBECF0', // gray-10
-  wash: '#FFFFFF',
-  'wash-dark': '#23272F', // gray-90
-  card: '#F6F7F9', // gray-05
-  'card-dark': '#343A46', // gray-80
-  highlight: '#E6F7FF', // blue-10
-  'highlight-dark': 'rgba(88,175,223,.1)',
-  border: '#EBECF0', // gray-10
-  'border-dark': '#343A46', // gray-80
-  'secondary-button': '#EBECF0', // gray-10
-  'secondary-button-dark': '#404756', // gray-70
+  primary: "#23272F", // gray-90
+  "primary-dark": "#F6F7F9", // gray-5
+  secondary: "#404756", // gray-70
+  "secondary-dark": "#EBECF0", // gray-10
+  link: "#087EA4", // blue-50
+  "link-dark": "#149ECA", // blue-40
+  syntax: "#EBECF0", // gray-10
+  wash: "#FFFFFF",
+  "wash-dark": "#23272F", // gray-90
+  card: "#F6F7F9", // gray-05
+  "card-dark": "#343A46", // gray-80
+  highlight: "#E6F7FF", // blue-10
+  "highlight-dark": "rgba(88,175,223,.1)",
+  border: "#EBECF0", // gray-10
+  "border-dark": "#343A46", // gray-80
+  "secondary-button": "#EBECF0", // gray-10
+  "secondary-button-dark": "#404756", // gray-70
 
   // Gray
-  'gray-95': '#16181D',
-  'gray-90': '#23272F',
-  'gray-80': '#343A46',
-  'gray-70': '#404756',
-  'gray-60': '#4E5769',
-  'gray-50': '#5E687E', // unused
-  'gray-40': '#78839B',
-  'gray-30': '#99A1B3',
-  'gray-20': '#BCC1CD',
-  'gray-10': '#EBECF0',
-  'gray-5': '#F6F7F9',
+  "gray-95": "#16181D",
+  "gray-90": "#23272F",
+  "gray-80": "#343A46",
+  "gray-70": "#404756",
+  "gray-60": "#4E5769",
+  "gray-50": "#5E687E", // unused
+  "gray-40": "#78839B",
+  "gray-30": "#99A1B3",
+  "gray-20": "#BCC1CD",
+  "gray-10": "#EBECF0",
+  "gray-5": "#F6F7F9",
 
   // Blue
-  'blue-60': '#045975',
-  'blue-50': '#087EA4',
-  'blue-40': '#149ECA', // Brand Blue
-  'blue-30': '#58C4DC', // unused
-  'blue-20': '#ABE2ED',
-  'blue-10': '#E6F7FF', // todo: doesn't match illustrations
-  'blue-5': '#E6F6FA',
+  "blue-60": "#045975",
+  "blue-50": "#087EA4",
+  "blue-40": "#149ECA", // Brand Blue
+  "blue-30": "#58C4DC", // unused
+  "blue-20": "#ABE2ED",
+  "blue-10": "#E6F7FF", // todo: doesn't match illustrations
+  "blue-5": "#E6F6FA",
 
   // Yellow
-  'yellow-60': '#B65700',
-  'yellow-50': '#C76A15',
-  'yellow-40': '#DB7D27', // unused
-  'yellow-30': '#FABD62', // unused
-  'yellow-20': '#FCDEB0', // unused
-  'yellow-10': '#FDE7C7',
-  'yellow-5': '#FEF5E7',
+  "yellow-60": "#B65700",
+  "yellow-50": "#C76A15",
+  "yellow-40": "#DB7D27", // unused
+  "yellow-30": "#FABD62", // unused
+  "yellow-20": "#FCDEB0", // unused
+  "yellow-10": "#FDE7C7",
+  "yellow-5": "#FEF5E7",
 
   // Purple
-  'purple-60': '#2B3491', // unused
-  'purple-50': '#575FB7',
-  'purple-40': '#6B75DB',
-  'purple-30': '#8891EC',
-  'purple-20': '#C3C8F5', // unused
-  'purple-10': '#E7E9FB',
-  'purple-5': '#F3F4FD',
+  "purple-60": "#2B3491", // unused
+  "purple-50": "#575FB7",
+  "purple-40": "#6B75DB",
+  "purple-30": "#8891EC",
+  "purple-20": "#C3C8F5", // unused
+  "purple-10": "#E7E9FB",
+  "purple-5": "#F3F4FD",
 
   // Green
-  'green-60': '#2B6E62',
-  'green-50': '#388F7F',
-  'green-40': '#44AC99',
-  'green-30': '#7FCCBF',
-  'green-20': '#ABDED5',
-  'green-10': '#E5F5F2',
-  'green-5': '#F4FBF9',
+  "green-60": "#2B6E62",
+  "green-50": "#388F7F",
+  "green-40": "#44AC99",
+  "green-30": "#7FCCBF",
+  "green-20": "#ABDED5",
+  "green-10": "#E5F5F2",
+  "green-5": "#F4FBF9",
 
   // RED
-  'red-60': '#712D28',
-  'red-50': '#A6423A', // unused
-  'red-40': '#C1554D',
-  'red-30': '#D07D77',
-  'red-20': '#E5B7B3', // unused
-  'red-10': '#F2DBD9', // unused
-  'red-5': '#FAF1F0',
+  "red-60": "#712D28",
+  "red-50": "#A6423A", // unused
+  "red-40": "#C1554D",
+  "red-30": "#D07D77",
+  "red-20": "#E5B7B3", // unused
+  "red-10": "#F2DBD9", // unused
+  "red-5": "#FAF1F0",
 
   // MISC
-  'code-block': '#99a1b30f', // gray-30 @ 6%
-  'gradient-blue': '#58C4DC', // Only used for the landing gradient for now.
+  "code-block": "#99a1b30f", // gray-30 @ 6%
+  "gradient-blue": "#58C4DC", // Only used for the landing gradient for now.
   github: {
-    highlight: '#fffbdd',
+    highlight: "#fffbdd",
   },
 };

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

@@ -5,96 +5,107 @@
  * 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, {
+import { parse as babelParse, ParserPlugin } from "@babel/parser";
+import * as HermesParser from "hermes-parser";
+import traverse, { NodePath } from "@babel/traverse";
+import * as t from "@babel/types";
+import {
   CompilerError,
   CompilerErrorDetail,
   Effect,
   ErrorSeverity,
-  parseConfigPragmaForTests,
+  parseConfigPragma,
+  printHIR,
+  printReactiveFunction,
+  run,
   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';
+} from "babel-plugin-react-compiler/src";
+import { type ReactFunctionType } from "babel-plugin-react-compiler/src/HIR/Environment";
+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';
+} from "../../lib/stores";
+import { useStore, useStoreDispatch } from "../StoreContext";
+import Input from "./Input";
 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';
+} from "./Output";
+import { printFunctionWithOutlined } from "babel-plugin-react-compiler/src/HIR/PrintHIR";
+import { printReactiveFunctionWithOutlined } from "babel-plugin-react-compiler/src/ReactiveScopes/PrintReactiveFunction";
 
-function parseInput(
-  input: string,
-  language: 'flow' | 'typescript',
-): ParseResult<t.File> {
+function parseInput(input: string, language: "flow" | "typescript") {
   // Extract the first line to quickly check for custom test directives
-  if (language === 'flow') {
+  if (language === "flow") {
     return HermesParser.parse(input, {
       babel: true,
-      flow: 'all',
-      sourceType: 'module',
+      flow: "all",
+      sourceType: "module",
       enableExperimentalComponentSyntax: true,
     });
   } else {
     return babelParse(input, {
-      plugins: ['typescript', 'jsx'],
-      sourceType: 'module',
-    }) as ParseResult<t.File>;
+      plugins: ["typescript", "jsx"],
+      sourceType: "module",
+    });
   }
 }
 
-function invokeCompiler(
+function parseFunctions(
   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');
+  language: "flow" | "typescript"
+): Array<
+  NodePath<
+    t.FunctionDeclaration | t.ArrowFunctionExpression | t.FunctionExpression
+  >
+> {
+  const items: Array<
+    NodePath<
+      t.FunctionDeclaration | t.ArrowFunctionExpression | t.FunctionExpression
+    >
+  > = [];
+  try {
+    const ast = parseInput(source, language);
+    traverse(ast, {
+      FunctionDeclaration(nodePath) {
+        items.push(nodePath);
+        nodePath.skip();
+      },
+      ArrowFunctionExpression(nodePath) {
+        items.push(nodePath);
+        nodePath.skip();
+      },
+      FunctionExpression(nodePath) {
+        items.push(nodePath);
+        nodePath.skip();
+      },
+    });
+  } catch (e) {
+    console.error(e);
+    CompilerError.throwInvalidJS({
+      reason: String(e),
+      description: null,
+      loc: null,
+      suggestions: null,
+    });
   }
-  return {
-    code: result.code,
-    sourceMaps: result.map,
-    language,
-  };
+  return items;
 }
 
 const COMMON_HOOKS: Array<[string, Hook]> = [
   [
-    'useFragment',
+    "useFragment",
     {
       valueKind: ValueKind.Frozen,
       effectKind: Effect.Freeze,
@@ -103,7 +114,7 @@ const COMMON_HOOKS: Array<[string, Hook]> = [
     },
   ],
   [
-    'usePaginationFragment',
+    "usePaginationFragment",
     {
       valueKind: ValueKind.Frozen,
       effectKind: Effect.Freeze,
@@ -112,7 +123,7 @@ const COMMON_HOOKS: Array<[string, Hook]> = [
     },
   ],
   [
-    'useRefetchableFragment',
+    "useRefetchableFragment",
     {
       valueKind: ValueKind.Frozen,
       effectKind: Effect.Freeze,
@@ -121,7 +132,7 @@ const COMMON_HOOKS: Array<[string, Hook]> = [
     },
   ],
   [
-    'useLazyLoadQuery',
+    "useLazyLoadQuery",
     {
       valueKind: ValueKind.Frozen,
       effectKind: Effect.Freeze,
@@ -130,7 +141,7 @@ const COMMON_HOOKS: Array<[string, Hook]> = [
     },
   ],
   [
-    'usePreloadedQuery',
+    "usePreloadedQuery",
     {
       valueKind: ValueKind.Frozen,
       effectKind: Effect.Freeze,
@@ -140,10 +151,30 @@ const COMMON_HOOKS: Array<[string, Hook]> = [
   ],
 ];
 
-function compile(source: string): [CompilerOutput, 'flow' | 'typescript'] {
-  const results = new Map<string, Array<PrintedCompilerPipelineValue>>();
+function isHookName(s: string): boolean {
+  return /^use[A-Z0-9]/.test(s);
+}
+
+function getReactFunctionType(
+  id: NodePath<t.Identifier | null | undefined>
+): ReactFunctionType {
+  if (id && id.node && id.isIdentifier()) {
+    if (isHookName(id.node.name)) {
+      return "Hook";
+    }
+
+    const isPascalCaseNameSpace = /^[A-Z].*/;
+    if (isPascalCaseNameSpace.test(id.node.name)) {
+      return "Component";
+    }
+  }
+  return "Other";
+}
+
+function compile(source: string): [CompilerOutput, "flow" | "typescript"] {
+  const results = new Map<string, PrintedCompilerPipelineValue[]>();
   const error = new CompilerError();
-  const upsert: (result: PrintedCompilerPipelineValue) => void = result => {
+  const upsert = (result: PrintedCompilerPipelineValue) => {
     const entry = results.get(result.name);
     if (Array.isArray(entry)) {
       entry.push(result);
@@ -151,81 +182,105 @@ function compile(source: string): [CompilerOutput, 'flow' | 'typescript'] {
       results.set(result.name, [result]);
     }
   };
-  let language: 'flow' | 'typescript';
+  let language: "flow" | "typescript";
   if (source.match(/\@flow/)) {
-    language = 'flow';
+    language = "flow";
   } else {
-    language = 'typescript';
+    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 pragma = source.substring(0, source.indexOf("\n"));
+    const config = parseConfigPragma(pragma);
+
+    for (const fn of parseFunctions(source, language)) {
+      if (!fn.isFunctionDeclaration()) {
+        error.pushErrorDetail(
+          new CompilerErrorDetail({
+            reason: `Unexpected function type ${fn.node.type}`,
+            description:
+              "Playground only supports parsing function declarations",
+            severity: ErrorSeverity.Todo,
+            loc: fn.node.loc ?? null,
+            suggestions: null,
+          })
+        );
+        continue;
+      }
+
+      const id = fn.get("id");
+      for (const result of run(
+        fn,
+        {
+          ...config,
+          customHooks: new Map([...COMMON_HOOKS]),
+        },
+        getReactFunctionType(id),
+        "_c",
+        null,
+        null,
+        null
+      )) {
+        const fnName = fn.node.id?.name ?? null;
+        switch (result.kind) {
+          case "ast": {
+            upsert({
+              kind: "ast",
+              fnName,
+              name: result.name,
+              value: {
+                type: "FunctionDeclaration",
+                id: result.value.id,
+                async: result.value.async,
+                generator: result.value.generator,
+                body: result.value.body,
+                params: result.value.params,
+              },
+            });
+            break;
+          }
+          case "hir": {
+            upsert({
+              kind: "hir",
+              fnName,
+              name: result.name,
+              value: printFunctionWithOutlined(result.value),
+            });
+            break;
+          }
+          case "reactive": {
+            upsert({
+              kind: "reactive",
+              fnName,
+              name: result.name,
+              value: printReactiveFunctionWithOutlined(result.value),
+            });
+            break;
+          }
+          case "debug": {
+            upsert({
+              kind: "debug",
+              fnName,
+              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)
-     */
+    // 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
-       */
+      // Handle unexpected failures by logging (to get a stack trace)
+      // and reporting
       console.error(err);
       error.details.push(
         new CompilerErrorDetail({
@@ -233,24 +288,24 @@ function compile(source: string): [CompilerOutput, 'flow' | 'typescript'] {
           reason: `Unexpected failure when transforming input! ${err}`,
           loc: null,
           suggestions: null,
-        }),
+        })
       );
     }
   }
   if (error.hasErrors()) {
-    return [{kind: 'err', results, error: error}, language];
+    return [{ kind: "err", results, error: error }, language];
   }
-  return [{kind: 'ok', results, transformOutput}, language];
+  return [{ kind: "ok", results }, language];
 }
 
-export default function Editor(): JSX.Element {
+export default function Editor() {
   const store = useStore();
   const deferredStore = useDeferredValue(store);
   const dispatchStore = useStoreDispatch();
-  const {enqueueSnackbar} = useSnackbar();
+  const { enqueueSnackbar } = useSnackbar();
   const [compilerOutput, language] = useMemo(
     () => compile(deferredStore.source),
-    [deferredStore.source],
+    [deferredStore.source]
   );
 
   useMountEffect(() => {
@@ -258,35 +313,35 @@ export default function Editor(): JSX.Element {
     try {
       mountStore = initStoreFromUrlOrLocalStorage();
     } catch (e) {
-      invariant(e instanceof Error, 'Only Error may be caught.');
+      invariant(e instanceof Error, "Only Error may be caught.");
       enqueueSnackbar(e.message, {
-        variant: 'warning',
+        variant: "message",
         ...createMessage(
-          'Bad URL - fell back to the default Playground.',
+          "Bad URL - fell back to the default Playground.",
           MessageLevel.Info,
-          MessageSource.Playground,
+          MessageSource.Playground
         ),
       });
       mountStore = defaultStore;
     }
     dispatchStore({
-      type: 'setStore',
-      payload: {store: mountStore},
+      type: "setStore",
+      payload: { store: mountStore },
     });
   });
 
   return (
     <>
       <div className="relative flex basis top-14">
-        <div className={clsx('relative sm:basis-1/4')}>
+        <div className={clsx("relative sm:basis-1/4")}>
           <Input
             language={language}
             errors={
-              compilerOutput.kind === 'err' ? compilerOutput.error.details : []
+              compilerOutput.kind === "err" ? compilerOutput.error.details : []
             }
           />
         </div>
-        <div className={clsx('flex sm:flex flex-wrap')}>
+        <div className={clsx("flex sm:flex flex-wrap")}>
           <Output store={deferredStore} compilerOutput={compilerOutput} />
         </div>
       </div>

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

@@ -5,27 +5,28 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import MonacoEditor, {loader, type Monaco} from '@monaco-editor/react';
-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 {Resizable} from 're-resizable';
-import {useEffect, useState} from 'react';
-import {renderReactCompilerMarkers} from '../../lib/reactCompilerMonacoDiagnostics';
-import {useStore, useStoreDispatch} from '../StoreContext';
-import {monacoOptions} from './monacoOptions';
-// @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';
+import MonacoEditor, { loader, type Monaco } from "@monaco-editor/react";
+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 { Resizable } from "re-resizable";
+import { useEffect, useState } from "react";
+import { renderReactCompilerMarkers } from "../../lib/reactCompilerMonacoDiagnostics";
+import { useStore, useStoreDispatch } from "../StoreContext";
+import { monacoOptions } from "./monacoOptions";
+// TODO: Make TS recognize .d.ts files, in addition to loading them with webpack.
+// @ts-ignore
+import React$Types from "../../node_modules/@types/react/index.d.ts";
 
-loader.config({monaco});
+loader.config({ monaco });
 
 type Props = {
-  errors: Array<CompilerErrorDetail>;
-  language: 'flow' | 'typescript';
+  errors: CompilerErrorDetail[];
+  language: "flow" | "typescript";
 };
 
-export default function Input({errors, language}: Props): JSX.Element {
+export default function Input({ errors, language }: Props) {
   const [monaco, setMonaco] = useState<Monaco | null>(null);
   const store = useStore();
   const dispatchStore = useStoreDispatch();
@@ -35,21 +36,20 @@ export default function Input({errors, language}: Props): JSX.Element {
     if (!monaco) return;
     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});
-    /**
-     * 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});
+    invariant(model, "Model must exist for the selected input file.");
+    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]);
 
+  const flowDiagnosticDisable = [
+    7028 /* unused label */, 6133 /* var declared but not read */,
+  ];
   useEffect(() => {
-    /**
-     * Ignore "can only be used in TypeScript files." errors, since
-     * we want to support syntax highlighting for Flow (*.js) files
-     * and Flow is not a built-in language.
-     */
+    // Ignore "can only be used in TypeScript files." errors, since
+    // we want to support syntax highlighting for Flow (*.js) files
+    // and Flow is not a built-in language.
     if (!monaco) return;
     monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
       diagnosticCodesToIgnore: [
@@ -64,31 +64,26 @@ export default function Input({errors, language}: Props): JSX.Element {
         8011,
         8012,
         8013,
-        ...(language === 'flow'
-          ? [7028 /* unused label */, 6133 /* var declared but not read */]
-          : []),
+        ...(language === "flow" ? flowDiagnosticDisable : []),
       ],
       noSemanticValidation: true,
       // Monaco can't validate Flow component syntax
-      noSyntaxValidation: language === 'flow',
+      noSyntaxValidation: language === "flow",
     });
   }, [monaco, language]);
 
-  const handleChange: (value: string | undefined) => void = value => {
+  const handleChange = (value: string | undefined) => {
     if (!value) return;
 
     dispatchStore({
-      type: 'updateFile',
+      type: "updateFile",
       payload: {
         source: value,
       },
     });
   };
 
-  const handleMount: (
-    _: editor.IStandaloneCodeEditor,
-    monaco: Monaco,
-  ) => void = (_, monaco) => {
+  const handleMount = (_: editor.IStandaloneCodeEditor, monaco: Monaco) => {
     setMonaco(monaco);
 
     const tscOptions = {
@@ -96,11 +91,11 @@ export default function Input({errors, language}: Props): JSX.Element {
       target: monaco.languages.typescript.ScriptTarget.ES2015,
       moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
       jsx: monaco.languages.typescript.JsxEmit.Preserve,
-      typeRoots: ['node_modules/@types'],
+      typeRoots: ["node_modules/@types"],
       allowSyntheticDefaultImports: true,
     };
     monaco.languages.typescript.javascriptDefaults.setCompilerOptions(
-      tscOptions,
+      tscOptions
     );
     monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
       ...tscOptions,
@@ -111,17 +106,15 @@ export default function Input({errors, language}: Props): JSX.Element {
     // Add React type declarations to Monaco
     const reactLib = [
       React$Types,
-      'file:///node_modules/@types/react/index.d.ts',
+      "file:///node_modules/@types/react/index.d.ts",
     ] as [any, string];
     monaco.languages.typescript.javascriptDefaults.addExtraLib(...reactLib);
     monaco.languages.typescript.typescriptDefaults.addExtraLib(...reactLib);
 
-    /**
-     * Remeasure the font in case the custom font is loaded only after
-     * Monaco Editor is mounted.
-     * N.B. that this applies also to the output editor as it seems
-     * Monaco Editor instances share the same font config.
-     */
+    // Remeasure the font in case the custom font is loaded only after
+    // Monaco Editor is mounted.
+    // N.B. that this applies also to the output editor as it seems
+    // Monaco Editor instances share the same font config.
     document.fonts.ready.then(() => {
       monaco.editor.remeasureFonts();
     });
@@ -131,20 +124,17 @@ export default function Input({errors, language}: Props): JSX.Element {
     <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)]">
+        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'}
+          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}

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

@@ -5,49 +5,47 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import generate from "@babel/generator";
+import * as t from "@babel/types";
 import {
   CodeIcon,
   DocumentAddIcon,
   InformationCircleIcon,
-} from '@heroicons/react/outline';
-import MonacoEditor, {DiffEditor} from '@monaco-editor/react';
-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 TabbedWindow from '../TabbedWindow';
-import {monacoOptions} from './monacoOptions';
-import {BabelFileResult} from '@babel/core';
+} from "@heroicons/react/outline";
+import MonacoEditor, { DiffEditor } from "@monaco-editor/react";
+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, useEffect, useState } from "react";
+import { type Store } from "../../lib/stores";
+import TabbedWindow from "../TabbedWindow";
+import { monacoOptions } from "./monacoOptions";
 const MemoizedOutput = memo(Output);
 
 export default MemoizedOutput;
 
 export type PrintedCompilerPipelineValue =
   | {
-      kind: 'hir';
+      kind: "ast";
+      name: string;
+      fnName: string | null;
+      value: t.FunctionDeclaration;
+    }
+  | {
+      kind: "hir";
       name: string;
       fnName: string | null;
       value: string;
     }
-  | {kind: 'reactive'; name: string; fnName: string | null; value: string}
-  | {kind: 'debug'; name: string; fnName: string | null; value: string};
+  | { kind: "reactive"; name: string; fnName: string | null; value: string }
+  | { kind: "debug"; name: string; fnName: string | null; value: string };
 
-export type CompilerTransformOutput = {
-  code: string;
-  sourceMaps: BabelFileResult['map'];
-  language: 'flow' | 'typescript';
-};
 export type CompilerOutput =
+  | { kind: "ok"; results: Map<string, PrintedCompilerPipelineValue[]> }
   | {
-      kind: 'ok';
-      transformOutput: CompilerTransformOutput;
-      results: Map<string, Array<PrintedCompilerPipelineValue>>;
-    }
-  | {
-      kind: 'err';
-      results: Map<string, Array<PrintedCompilerPipelineValue>>;
+      kind: "err";
+      results: Map<string, PrintedCompilerPipelineValue[]>;
       error: CompilerError;
     };
 
@@ -56,18 +54,16 @@ type Props = {
   compilerOutput: CompilerOutput;
 };
 
-async function tabify(
-  source: string,
-  compilerOutput: CompilerOutput,
-): Promise<Map<string, ReactNode>> {
+async function tabify(source: string, compilerOutput: CompilerOutput) {
   const tabs = new Map<string, React.ReactNode>();
   const reorderedTabs = new Map<string, React.ReactNode>();
   const concattedResults = new Map<string, string>();
+  let topLevelFnDecls: Array<t.FunctionDeclaration> = [];
   // Concat all top level function declaration results into a single tab for each pass
   for (const [passName, results] of compilerOutput.results) {
     for (const result of results) {
       switch (result.kind) {
-        case 'hir': {
+        case "hir": {
           const prev = concattedResults.get(result.name);
           const next = result.value;
           const identName = `function ${result.fnName}`;
@@ -78,7 +74,7 @@ async function tabify(
           }
           break;
         }
-        case 'reactive': {
+        case "reactive": {
           const prev = concattedResults.get(passName);
           const next = result.value;
           if (prev != null) {
@@ -88,58 +84,57 @@ async function tabify(
           }
           break;
         }
-        case 'debug': {
+        case "ast":
+          topLevelFnDecls.push(result.value);
+          break;
+        case "debug": {
           concattedResults.set(passName, result.value);
           break;
         }
         default: {
           const _: never = result;
-          throw new Error('Unexpected result kind');
+          throw new Error("Unexpected result kind");
         }
       }
     }
   }
   let lastPassOutput: string | null = null;
-  let nonDiffPasses = ['HIR', 'BuildReactiveFunction', 'EnvironmentConfig'];
+  let nonDiffPasses = ["HIR", "BuildReactiveFunction", "EnvironmentConfig"];
   for (const [passName, text] of concattedResults) {
     tabs.set(
       passName,
       <TextTabContent
         output={text}
         diff={lastPassOutput}
-        showInfoPanel={!nonDiffPasses.includes(passName)}></TextTabContent>,
+        showInfoPanel={!nonDiffPasses.includes(passName)}
+      ></TextTabContent>
     );
     lastPassOutput = text;
   }
   // Ensure that JS and the JS source map come first
-  if (compilerOutput.kind === 'ok') {
-    const {transformOutput} = compilerOutput;
-    const sourceMapUrl = getSourceMapUrl(
-      transformOutput.code,
-      JSON.stringify(transformOutput.sourceMaps),
-    );
-    const code = await prettier.format(transformOutput.code, {
-      semi: true,
-      parser: transformOutput.language === 'flow' ? 'babel-flow' : 'babel-ts',
-      plugins: [parserBabel, prettierPluginEstree],
-    });
+  if (topLevelFnDecls.length > 0) {
+    // Make a synthetic Program so we can have a single AST with all the top level
+    // FunctionDeclarations
+    const ast = t.program(topLevelFnDecls);
+    const { code, sourceMapUrl } = await codegen(ast, source);
     reorderedTabs.set(
-      'JS',
+      "JS",
       <TextTabContent
         output={code}
         diff={null}
-        showInfoPanel={false}></TextTabContent>,
+        showInfoPanel={false}
+      ></TextTabContent>
     );
     if (sourceMapUrl) {
       reorderedTabs.set(
-        'SourceMap',
+        "SourceMap",
         <>
           <iframe
             src={sourceMapUrl}
             className="w-full h-monaco_small sm:h-monaco"
             title="Generated Code"
           />
-        </>,
+        </>
       );
     }
   }
@@ -149,6 +144,27 @@ async function tabify(
   return reorderedTabs;
 }
 
+async function codegen(
+  ast: t.Program,
+  source: string
+): Promise<{ code: any; sourceMapUrl: string | null }> {
+  const generated = generate(
+    ast,
+    { sourceMaps: true, sourceFileName: "input.js" },
+    source
+  );
+  const sourceMapUrl = getSourceMapUrl(
+    generated.code,
+    JSON.stringify(generated.map)
+  );
+  const codegenOutput = await prettier.format(generated.code, {
+    semi: true,
+    parser: "babel",
+    plugins: [parserBabel, prettierPluginEstree],
+  });
+  return { code: codegenOutput, sourceMapUrl };
+}
+
 function utf16ToUTF8(s: string): string {
   return unescape(encodeURIComponent(s));
 }
@@ -157,27 +173,27 @@ function getSourceMapUrl(code: string, map: string): string | null {
   code = utf16ToUTF8(code);
   map = utf16ToUTF8(map);
   return `https://evanw.github.io/source-map-visualization/#${btoa(
-    `${code.length}\0${code}${map.length}\0${map}`,
+    `${code.length}\0${code}${map.length}\0${map}`
   )}`;
 }
 
-function Output({store, compilerOutput}: Props): JSX.Element {
-  const [tabsOpen, setTabsOpen] = useState<Set<string>>(() => new Set(['JS']));
+function Output({ store, compilerOutput }: Props) {
+  const [tabsOpen, setTabsOpen] = useState<Set<string>>(() => new Set(["JS"]));
   const [tabs, setTabs] = useState<Map<string, React.ReactNode>>(
-    () => new Map(),
+    () => new Map()
   );
   useEffect(() => {
-    tabify(store.source, compilerOutput).then(tabs => {
+    tabify(store.source, compilerOutput).then((tabs) => {
       setTabs(tabs);
     });
   }, [store.source, compilerOutput]);
 
-  const changedPasses: Set<string> = new Set(['JS', 'HIR']); // Initial and final passes should always be bold
-  let lastResult: string = '';
+  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) {
-      let currResult = '';
-      if (result.kind === 'hir' || result.kind === 'reactive') {
+      let currResult = "";
+      if (result.kind === "hir" || result.kind === "reactive") {
         currResult += `function ${result.fnName}\n\n${result.value}`;
       }
       if (currResult !== lastResult) {
@@ -196,16 +212,18 @@ function Output({store, compilerOutput}: Props): JSX.Element {
         tabs={tabs}
         changedPasses={changedPasses}
       />
-      {compilerOutput.kind === 'err' ? (
+      {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)'}}>
+          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'}}>
+            style={{ width: "calc(100vw - 650px)", height: "150px" }}
+          >
             <code>{compilerOutput.error.toString()}</code>
           </pre>
         </div>
@@ -222,20 +240,19 @@ function TextTabContent({
   output: string;
   diff: string | null;
   showInfoPanel: boolean;
-}): JSX.Element {
+}) {
   const [diffMode, setDiffMode] = useState(false);
   return (
-    /**
-     * Restrict MonacoEditor's height, since the config autoLayout:true
-     * will grow the editor to fit within parent element
-     */
+    // Restrict MonacoEditor's height, since the config autoLayout:true
+    // will grow the editor to fit within parent element
     <div className="w-full h-monaco_small sm:h-monaco">
       {showInfoPanel ? (
         <div className="flex items-center gap-1 bg-amber-50 p-2">
           {diff != null && output !== diff ? (
             <button
               className="flex items-center gap-1 transition-colors duration-150 ease-in text-secondary hover:text-link"
-              onClick={() => setDiffMode(diffMode => !diffMode)}>
+              onClick={() => setDiffMode((diffMode) => !diffMode)}
+            >
               {!diffMode ? (
                 <>
                   <DocumentAddIcon className="w-5 h-5" /> Show Diff
@@ -263,7 +280,7 @@ function TextTabContent({
           options={{
             ...monacoOptions,
             readOnly: true,
-            lineNumbers: 'off',
+            lineNumbers: "off",
             glyphMargin: false,
             // Undocumented see https://github.com/Microsoft/vscode/issues/30795#issuecomment-410998882
             lineDecorationsWidth: 0,
@@ -277,7 +294,7 @@ function TextTabContent({
           options={{
             ...monacoOptions,
             readOnly: true,
-            lineNumbers: 'off',
+            lineNumbers: "off",
             glyphMargin: false,
             // Undocumented see https://github.com/Microsoft/vscode/issues/30795#issuecomment-410998882
             lineDecorationsWidth: 0,

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

@@ -5,13 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import dynamic from 'next/dynamic';
+import dynamic from "next/dynamic";
 
-/**
- * monaco-editor is currently not compatible with ssr
- * https://github.com/vercel/next.js/issues/31692
- */
-const Editor = dynamic(() => import('./EditorImpl'), {
+// monaco-editor is currently not compatible with ssr
+// https://github.com/vercel/next.js/issues/31692
+const Editor = dynamic(() => import("./EditorImpl"), {
   ssr: false,
 });
 

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

@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import type {EditorProps} from '@monaco-editor/react';
+import type { EditorProps } from "@monaco-editor/react";
 
-export const monacoOptions: Partial<EditorProps['options']> = {
+export const monacoOptions: Partial<EditorProps["options"]> = {
   fontSize: 14,
-  padding: {top: 8},
+  padding: { top: 8 },
   scrollbar: {
     verticalScrollbarSize: 10,
     alwaysConsumeMouseWheel: false,
@@ -22,11 +22,11 @@ export const monacoOptions: Partial<EditorProps['options']> = {
   fontFamily: '"Source Code Pro", monospace',
   glyphMargin: true,
 
-  autoClosingBrackets: 'languageDefined',
-  autoClosingDelete: 'always',
-  autoClosingOvertype: 'always',
+  autoClosingBrackets: "languageDefined",
+  autoClosingDelete: "always",
+  autoClosingOvertype: "always",
 
   automaticLayout: true,
-  wordWrap: 'on',
-  wrappingIndent: 'deepIndent',
+  wordWrap: "on",
+  wrappingIndent: "deepIndent",
 };

compiler/apps/playground/components/Header.tsx

@@ -5,39 +5,39 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {RefreshIcon, ShareIcon} from '@heroicons/react/outline';
-import {CheckIcon} from '@heroicons/react/solid';
-import clsx from 'clsx';
-import Link from 'next/link';
-import {useSnackbar} from 'notistack';
-import {useState} from 'react';
-import {defaultStore} from '../lib/defaultStore';
-import {IconGitHub} from './Icons/IconGitHub';
-import Logo from './Logo';
-import {useStoreDispatch} from './StoreContext';
+import { RefreshIcon, ShareIcon } from "@heroicons/react/outline";
+import { CheckIcon } from "@heroicons/react/solid";
+import clsx from "clsx";
+import Link from "next/link";
+import { useSnackbar } from "notistack";
+import { useState } from "react";
+import { defaultStore } from "../lib/defaultStore";
+import { IconGitHub } from "./Icons/IconGitHub";
+import Logo from "./Logo";
+import { useStoreDispatch } from "./StoreContext";
 
-export default function Header(): JSX.Element {
+export default function Header() {
   const [showCheck, setShowCheck] = useState(false);
   const dispatchStore = useStoreDispatch();
-  const {enqueueSnackbar, closeSnackbar} = useSnackbar();
+  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
 
-  const handleReset: () => void = () => {
-    if (confirm('Are you sure you want to reset the playground?')) {
-      /**
-       * Close open snackbars if any. This is necessary because when displaying
-       * outputs (Preview or not), we only close previous snackbars if we received
-       * new messages, which is needed in order to display "Bad URL" or success
-       * messages when loading Playground for the first time. Otherwise, messages
-       * such as "Bad URL" will be closed by the outputs calling `closeSnackbar`.
-       */
+  const handleReset = () => {
+    if (confirm("Are you sure you want to reset the playground?")) {
+      /*
+        Close open snackbars if any. This is necessary because when displaying
+        outputs (Preview or not), we only close previous snackbars if we received
+        new messages, which is needed in order to display "Bad URL" or success
+        messages when loading Playground for the first time. Otherwise, messages
+        such as "Bad URL" will be closed by the outputs calling `closeSnackbar`.
+      */
       closeSnackbar();
-      dispatchStore({type: 'setStore', payload: {store: defaultStore}});
+      dispatchStore({ type: "setStore", payload: { store: defaultStore } });
     }
   };
 
-  const handleShare: () => void = () => {
+  const handleShare = () => {
     navigator.clipboard.writeText(location.href).then(() => {
-      enqueueSnackbar('URL copied to clipboard');
+      enqueueSnackbar("URL copied to clipboard");
       setShowCheck(true);
       // Show the check mark icon briefly after URL is copied
       setTimeout(() => setShowCheck(false), 1000);
@@ -49,8 +49,8 @@ export default function Header(): JSX.Element {
       <div className="flex items-center flex-none h-full gap-2 text-lg">
         <Logo
           className={clsx(
-            'w-8 h-8 text-link',
-            process.env.NODE_ENV === 'development' && 'text-yellow-600',
+            "w-8 h-8 text-link",
+            process.env.NODE_ENV === "development" && "text-yellow-600"
           )}
         />
         <p className="hidden select-none sm:block">React Compiler Playground</p>
@@ -60,7 +60,8 @@ export default function Header(): JSX.Element {
           title="Reset Playground"
           aria-label="Reset Playground"
           className="flex items-center gap-1 transition-colors duration-150 ease-in text-secondary hover:text-link"
-          onClick={handleReset}>
+          onClick={handleReset}
+        >
           <RefreshIcon className="w-5 h-5" />
           <p className="hidden sm:block">Reset</p>
         </button>
@@ -69,7 +70,8 @@ export default function Header(): JSX.Element {
           aria-label="Copy sharable URL"
           className="flex items-center gap-1 transition-colors duration-150 ease-in text-secondary hover:text-link"
           onClick={handleShare}
-          disabled={showCheck}>
+          disabled={showCheck}
+        >
           {!showCheck ? (
             <ShareIcon className="w-5 h-5" />
           ) : (
@@ -82,7 +84,8 @@ export default function Header(): JSX.Element {
           target="_blank"
           rel="noreferrer noopener"
           aria-label="Open on GitHub"
-          className="flex items-center gap-1 transition-colors duration-150 ease-in text-secondary hover:text-link">
+          className="flex items-center gap-1 transition-colors duration-150 ease-in text-secondary hover:text-link"
+        >
           <IconGitHub />
         </Link>
       </div>

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

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {memo} from 'react';
+import { memo } from "react";
 
-export const IconGitHub = memo<JSX.IntrinsicElements['svg']>(
+export const IconGitHub = memo<JSX.IntrinsicElements["svg"]>(
   function IconGitHub(props) {
     return (
       <svg
@@ -16,9 +16,10 @@ export const IconGitHub = memo<JSX.IntrinsicElements['svg']>(
         height="1.5em"
         viewBox="0 -2 24 24"
         fill="currentColor"
-        {...props}>
+        {...props}
+      >
         <path d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0"></path>
       </svg>
     );
-  },
+  }
 );

compiler/apps/playground/components/Logo.tsx

@@ -7,13 +7,14 @@
 
 // https://github.com/reactjs/reactjs.org/blob/main/beta/src/components/Logo.tsx
 
-export default function Logo(props: JSX.IntrinsicElements['svg']): JSX.Element {
+export default function Logo(props: JSX.IntrinsicElements["svg"]) {
   return (
     <svg
       viewBox="0 0 410 369"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}>
+      {...props}
+    >
       <path
         d="M204.995 224.552C226.56 224.552 244.042 207.07 244.042 185.506C244.042 163.941 226.56 146.459 204.995 146.459C183.43 146.459 165.948 163.941 165.948 185.506C165.948 207.07 183.43 224.552 204.995 224.552Z"
         fill="currentColor"

compiler/apps/playground/components/Message.tsx

@@ -10,13 +10,13 @@ import {
   ExclamationIcon,
   InformationCircleIcon,
   XIcon,
-} from '@heroicons/react/solid';
-import {CustomContentProps, SnackbarContent, useSnackbar} from 'notistack';
-import {forwardRef} from 'react';
-import {MessageLevel, MessageSource} from '../lib/stores';
+} from "@heroicons/react/solid";
+import { CustomContentProps, SnackbarContent, useSnackbar } from "notistack";
+import { forwardRef } from "react";
+import { MessageLevel, MessageSource } from "../lib/stores";
 
 // https://notistack.com/examples/advanced/custom-component#custom-variant-(typescript)
-declare module 'notistack' {
+declare module "notistack" {
   interface VariantOverrides {
     message: {
       title: string;
@@ -34,14 +34,15 @@ interface MessageProps extends CustomContentProps {
 }
 
 const Message = forwardRef<HTMLDivElement, MessageProps>(
-  ({id, title, level, source, codeframe}, ref) => {
-    const {closeSnackbar} = useSnackbar();
+  ({ id, title, level, source, codeframe }, ref) => {
+    const { closeSnackbar } = useSnackbar();
     const isDismissible = source !== MessageSource.Playground;
 
     return (
       <SnackbarContent
         ref={ref}
-        className="flex items-start justify-between gap-3 px-4 py-3 text-sm bg-white border rounded-md shadow w-toast">
+        className="flex items-start justify-between gap-3 px-4 py-3 text-sm bg-white border rounded-md shadow w-toast"
+      >
         <div className="flex gap-3 w-toast-body">
           {level === MessageLevel.Warning ? (
             <div className="flex items-center justify-center flex-none rounded-md w-7 h-7 bg-amber-100">
@@ -68,15 +69,16 @@ const Message = forwardRef<HTMLDivElement, MessageProps>(
         {isDismissible ? (
           <button
             className="flex items-center justify-center flex-none transition-colors duration-150 ease-in rounded-md justify-self-end group w-7 h-7 hover:bg-gray-200"
-            onClick={() => closeSnackbar(id)}>
+            onClick={() => closeSnackbar(id)}
+          >
             <XIcon className="w-5 h-5 fill-gray-500 group-hover:fill-gray-800" />
           </button>
         ) : null}
       </SnackbarContent>
     );
-  },
+  }
 );
 
-Message.displayName = 'MessageComponent';
+Message.displayName = "MessageComponent";
 
 export default Message;

compiler/apps/playground/components/StoreContext.tsx

@@ -5,11 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import type {Dispatch, ReactNode} from 'react';
-import {useEffect, useReducer} from 'react';
-import createContext from '../lib/createContext';
-import {emptyStore} from '../lib/defaultStore';
-import {saveStore, type Store} from '../lib/stores';
+import type { Dispatch, ReactNode } from "react";
+import { useReducer } from "react";
+import createContext from "../lib/createContext";
+import { emptyStore } from "../lib/defaultStore";
+import type { Store } from "../lib/stores";
+import { saveStore } from "../lib/stores";
 
 const StoreContext = createContext<Store>();
 
@@ -28,13 +29,8 @@ export const useStoreDispatch = StoreDispatchContext.useContext;
 /**
  * Make Store and dispatch function available to all sub-components in children.
  */
-export function StoreProvider({children}: {children: ReactNode}): JSX.Element {
+export function StoreProvider({ children }: { children: ReactNode }) {
   const [store, dispatch] = useReducer(storeReducer, emptyStore);
-  useEffect(() => {
-    if (store !== emptyStore) {
-      saveStore(store);
-    }
-  }, [store]);
 
   return (
     <StoreContext.Provider value={store}>
@@ -47,13 +43,13 @@ export function StoreProvider({children}: {children: ReactNode}): JSX.Element {
 
 type ReducerAction =
   | {
-      type: 'setStore';
+      type: "setStore";
       payload: {
         store: Store;
       };
     }
   | {
-      type: 'updateFile';
+      type: "updateFile";
       payload: {
         source: string;
       };
@@ -61,16 +57,21 @@ type ReducerAction =
 
 function storeReducer(store: Store, action: ReducerAction): Store {
   switch (action.type) {
-    case 'setStore': {
+    case "setStore": {
       const newStore = action.payload.store;
+
+      saveStore(newStore);
       return newStore;
     }
-    case 'updateFile': {
-      const {source} = action.payload;
+    case "updateFile": {
+      const { source } = action.payload;
+
       const newStore = {
         ...store,
         source,
       };
+
+      saveStore(newStore);
       return newStore;
     }
   }

compiler/apps/playground/components/TabbedWindow.tsx

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {Resizable} from 're-resizable';
-import React, {useCallback} from 'react';
+import { Resizable } from "re-resizable";
+import React, { useCallback } from "react";
 
 type TabsRecord = Map<string, React.ReactNode>;
 
@@ -21,14 +21,15 @@ export default function TabbedWindow(props: {
     return (
       <div
         className="flex items-center justify-center"
-        style={{width: 'calc(100vw - 650px)'}}>
+        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 => {
+      {Array.from(props.tabs.keys()).map((name) => {
         return (
           <TabbedWindowItem
             name={name}
@@ -69,21 +70,19 @@ function TabbedWindowItem({
     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}}>
+        <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}
+              hasChanged ? "font-bold" : "font-light"
+            } text-secondary hover:text-link`}
+          >
+            - {name}
           </h2>
           {tabs.get(name) ?? <div>No output for {name}</div>}
         </Resizable>
@@ -92,12 +91,13 @@ function TabbedWindowItem({
           <button
             title={`Expand compiler tab: ${name}`}
             aria-label={`Expand compiler tab: ${name}`}
-            style={{transform: 'rotate(90deg) translate(-50%)'}}
+            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}
+              hasChanged ? "font-bold" : "font-light"
+            } text-secondary hover:text-link`}
+          >
+            {name}
           </button>
         </div>
       )}

compiler/apps/playground/components/index.ts

@@ -5,6 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export {default as Editor} from './Editor';
-export {default as Header} from './Header';
-export {StoreProvider} from './StoreContext';
+export { default as Editor } from "./Editor";
+export { default as Header } from "./Header";
+export { StoreProvider } from "./StoreContext";

compiler/apps/playground/hooks/index.ts

@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export {default as useMountEffect} from './useMountEffect';
+export { default as useMountEffect } from "./useMountEffect";

compiler/apps/playground/hooks/useMountEffect.ts

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import type {EffectCallback} from 'react';
-import {useEffect} from 'react';
+import type { EffectCallback } from "react";
+import { useEffect } from "react";
 
 export default function useMountEffect(effect: EffectCallback) {
   return useEffect(effect, []);

compiler/apps/playground/lib/createContext.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React from "react";
 
 /**
  * Replacement to React.createContext.
@@ -23,18 +23,15 @@ import React from 'react';
  * Instead, it throws an error when `useContext` is not called within a
  * Provider with a value.
  */
-export default function createContext<T>(): {
-  useContext: () => NonNullable<T>;
-  Provider: React.Provider<T | null>;
-} {
+export default function createContext<T>() {
   const context = React.createContext<T | null>(null);
 
-  function useContext(): NonNullable<T> {
+  function useContext() {
     const c = React.useContext(context);
     if (!c)
-      throw new Error('useContext must be within a Provider with a value');
+      throw new Error("useContext must be within a Provider with a value");
     return c;
   }
 
-  return {useContext, Provider: context.Provider};
+  return { useContext, Provider: context.Provider };
 }

compiler/apps/playground/lib/defaultStore.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import type {Store} from './stores';
+import type { Store } from "./stores";
 
 const index = `\
 export default function MyApp() {
@@ -18,5 +18,5 @@ export const defaultStore: Store = {
 };
 
 export const emptyStore: Store = {
-  source: '',
+  source: "",
 };

compiler/apps/playground/lib/reactCompilerMonacoDiagnostics.ts

@@ -5,16 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {Monaco} from '@monaco-editor/react';
+import { Monaco } from "@monaco-editor/react";
 import {
   CompilerErrorDetail,
   ErrorSeverity,
-} from 'babel-plugin-react-compiler/src';
-import {MarkerSeverity, type editor} from 'monaco-editor';
+} from "babel-plugin-react-compiler/src";
+import { MarkerSeverity, type editor } from "monaco-editor";
 
 function mapReactCompilerSeverityToMonaco(
   level: ErrorSeverity,
-  monaco: Monaco,
+  monaco: Monaco
 ): MarkerSeverity {
   switch (level) {
     case ErrorSeverity.Todo:
@@ -26,9 +26,9 @@ function mapReactCompilerSeverityToMonaco(
 
 function mapReactCompilerDiagnosticToMonacoMarker(
   detail: CompilerErrorDetail,
-  monaco: Monaco,
+  monaco: Monaco
 ): editor.IMarkerData | null {
-  if (detail.loc == null || typeof detail.loc === 'symbol') {
+  if (detail.loc == null || typeof detail.loc === "symbol") {
     return null;
   }
   const severity = mapReactCompilerSeverityToMonaco(detail.severity, monaco);
@@ -46,9 +46,9 @@ function mapReactCompilerDiagnosticToMonacoMarker(
 type ReactCompilerMarkerConfig = {
   monaco: Monaco;
   model: editor.ITextModel;
-  details: Array<CompilerErrorDetail>;
+  details: CompilerErrorDetail[];
 };
-let decorations: Array<string> = [];
+let decorations: string[] = [];
 export function renderReactCompilerMarkers({
   monaco,
   model,
@@ -63,27 +63,27 @@ export function renderReactCompilerMarkers({
     markers.push(marker);
   }
   if (markers.length > 0) {
-    monaco.editor.setModelMarkers(model, 'owner', markers);
-    const newDecorations = markers.map(marker => {
+    monaco.editor.setModelMarkers(model, "owner", markers);
+    const newDecorations = markers.map((marker) => {
       return {
         range: new monaco.Range(
           marker.startLineNumber,
           marker.startColumn,
           marker.endLineNumber,
-          marker.endColumn,
+          marker.endColumn
         ),
         options: {
           isWholeLine: true,
-          glyphMarginClassName: 'bg-red-300',
+          glyphMarginClassName: "bg-red-300",
         },
       };
     });
     decorations = model.deltaDecorations(decorations, newDecorations);
   } else {
-    monaco.editor.setModelMarkers(model, 'owner', []);
+    monaco.editor.setModelMarkers(model, "owner", []);
     decorations = model.deltaDecorations(
-      model.getAllDecorations().map(d => d.id),
-      [],
+      model.getAllDecorations().map((d) => d.id),
+      []
     );
   }
 }

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

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export * from './messages';
-export * from './store';
+export * from "./messages";
+export * from "./store";

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

@@ -27,10 +27,10 @@ export interface Message {
 export function createMessage(
   message: string,
   level: MessageLevel,
-  source: MessageSource,
+  source: MessageSource
 ): Message {
-  const [title, ...body] = message.split('\n');
-  const codeframe = body.length > 0 ? body.join('\n') : undefined;
+  const [title, ...body] = message.split("\n");
+  const codeframe = body.length > 0 ? body.join("\n") : undefined;
 
   return {
     source,

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

@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import invariant from 'invariant';
+import invariant from "invariant";
 import {
   compressToEncodedURIComponent,
   decompressFromEncodedURIComponent,
-} from 'lz-string';
-import {defaultStore} from '../defaultStore';
+} from "lz-string";
+import { defaultStore } from "../defaultStore";
 
 /**
  * Global Store for Playground
@@ -28,10 +28,10 @@ export function decodeStore(hash: string): Store {
 /**
  * Serialize, encode, and save @param store to localStorage and update URL.
  */
-export function saveStore(store: Store): void {
+export function saveStore(store: Store) {
   const hash = encodeStore(store);
-  localStorage.setItem('playgroundStore', hash);
-  history.replaceState({}, '', `#${hash}`);
+  localStorage.setItem("playgroundStore", hash);
+  history.replaceState({}, "", `#${hash}`);
 }
 
 /**
@@ -41,9 +41,9 @@ export function saveStore(store: Store): void {
 function isValidStore(raw: unknown): raw is Store {
   return (
     raw != null &&
-    typeof raw == 'object' &&
-    'source' in raw &&
-    typeof raw['source'] === 'string'
+    typeof raw == "object" &&
+    "source" in raw &&
+    typeof raw["source"] === "string"
   );
 }
 
@@ -53,17 +53,15 @@ function isValidStore(raw: unknown): raw is Store {
  */
 export function initStoreFromUrlOrLocalStorage(): Store {
   const encodedSourceFromUrl = location.hash.slice(1);
-  const encodedSourceFromLocal = localStorage.getItem('playgroundStore');
+  const encodedSourceFromLocal = localStorage.getItem("playgroundStore");
   const encodedSource = encodedSourceFromUrl || encodedSourceFromLocal;
 
-  /**
-   * No data in the URL and no data in the localStorage to fallback to.
-   * Initialize with the default store.
-   */
+  // No data in the URL and no data in the localStorage to fallback to.
+  // Initialize with the default store.
   if (!encodedSource) return defaultStore;
 
   const raw = decodeStore(encodedSource);
 
-  invariant(isValidStore(raw), 'Invalid Store');
+  invariant(isValidStore(raw), "Invalid Store");
   return raw;
 }

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

@@ -2,4 +2,4 @@
 /// <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.
+// see https://nextjs.org/docs/basic-features/typescript for more information.

compiler/apps/playground/next.config.js

@@ -5,36 +5,33 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
-const path = require('path');
+const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
+const path = require("path");
 
 const nextConfig = {
-  experimental: {
-    reactCompiler: true,
-  },
   reactStrictMode: true,
   webpack: (config, options) => {
     // Load *.d.ts files as strings using https://webpack.js.org/guides/asset-modules/#source-assets.
     config.module.rules.push({
       test: /\.d\.ts/,
-      type: 'asset/source',
+      type: "asset/source",
     });
 
     // Monaco Editor
     if (!options.isServer) {
       config.plugins.push(
         new MonacoWebpackPlugin({
-          languages: ['typescript', 'javascript'],
-          filename: 'static/[name].worker.js',
+          languages: ["typescript", "javascript"],
+          filename: "static/[name].worker.js",
         })
       );
     }
 
     config.resolve.alias = {
       ...config.resolve.alias,
-      'react-compiler-runtime': path.resolve(
+      "react-compiler-runtime": path.resolve(
         __dirname,
-        '../../packages/react-compiler-runtime'
+        "../../packages/react-compiler-runtime"
       ),
     };
     config.resolve.fallback = {
@@ -46,7 +43,7 @@ const nextConfig = {
     return config;
   },
 
-  transpilePackages: ['monaco-editor'],
+  transpilePackages: ["monaco-editor"],
 };
 
 module.exports = nextConfig;

compiler/apps/playground/package.json

@@ -3,61 +3,59 @@
   "version": "0.1.0",
   "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\" \"yarn workspace react-compiler-runtime run build\"",
-    "build": "yarn build:compiler && next build",
-    "postbuild": "node ./scripts/downloadFonts.js",
-    "preinstall": "cd ../.. && yarn install --frozen-lockfile",
-    "postinstall": "./scripts/link-compiler.sh",
-    "vercel-build": "yarn build",
+    "dev": "NODE_ENV=development next dev",
+    "build": "next build && node ./scripts/downloadFonts.js",
+    "vercel-build": "yarn workspaces run build",
     "start": "next start",
     "lint": "next lint",
     "test": "playwright test"
   },
   "dependencies": {
-    "@babel/core": "^7.18.9",
-    "@babel/generator": "^7.18.9",
-    "@babel/parser": "^7.18.9",
-    "@babel/plugin-syntax-typescript": "^7.18.9",
+    "@babel/core": "^7.19.1",
+    "@babel/generator": "^7.19.1",
+    "@babel/parser": "^7.19.1",
+    "@babel/plugin-syntax-typescript": "^7.18.6",
     "@babel/plugin-transform-block-scoping": "^7.18.9",
-    "@babel/plugin-transform-modules-commonjs": "^7.18.9",
-    "@babel/preset-react": "^7.18.9",
-    "@babel/preset-typescript": "^7.18.9",
-    "@babel/traverse": "^7.18.9",
-    "@babel/types": "7.18.9",
+    "@babel/plugin-transform-modules-commonjs": "^7.18.6",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@babel/traverse": "^7.19.1",
+    "@babel/types": "^7.19.0",
     "@heroicons/react": "^1.0.6",
     "@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",
+    "fs": "^0.0.1-security",
+    "hermes-eslint": "^0.14.0",
+    "hermes-parser": "^0.22.0",
     "invariant": "^2.2.4",
     "lz-string": "^1.5.0",
-    "monaco-editor": "^0.52.0",
-    "next": "^15.2.0-canary.64",
+    "monaco-editor": "^0.34.1",
+    "next": "^13.5.6",
     "notistack": "^3.0.0-alpha.7",
-    "prettier": "^3.3.3",
+    "prettier": "3.0.3",
     "pretty-format": "^29.3.1",
     "re-resizable": "^6.9.16",
-    "react": "19.0.0-rc-77b637d6-20241016",
-    "react-dom": "19.0.0-rc-77b637d6-20241016"
+    "react": "18.2.0",
+    "react-compiler-runtime": "*",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@types/node": "18.11.9",
-    "@types/react": "npm:types-react@19.0.0-rc.1",
-    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
+    "@types/prettier": "^2.7.1",
+    "@types/react": "18.0.25",
+    "@types/react-dom": "18.0.9",
     "autoprefixer": "^10.4.13",
     "clsx": "^1.2.1",
-    "concurrently": "^7.4.0",
     "eslint": "^8.28.0",
-    "eslint-config-next": "^15.0.1",
+    "eslint-config-next": "^13.5.6",
+    "hermes-parser": "^0.22.0",
     "monaco-editor-webpack-plugin": "^7.1.0",
     "postcss": "^8.4.31",
-    "tailwindcss": "^3.2.4",
-    "wait-on": "^7.2.0"
+    "tailwindcss": "^3.2.4"
   },
   "resolutions": {
-    "@types/react": "npm:types-react@19.0.0-rc.1",
-    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
+    "./**/@babel/parser": "7.7.4",
+    "./**/@babel/types": "7.7.4"
   }
 }

compiler/apps/playground/playwright.config.js

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {defineConfig, devices} from '@playwright/test';
-import path from 'path';
+import { defineConfig, devices } from "@playwright/test";
+import path from "path";
 
 // Use process.env.PORT by default and fallback to port 3000
 const PORT = process.env.PORT || 3000;
@@ -18,30 +18,25 @@ const baseURL = `http://localhost:${PORT}`;
 export default defineConfig({
   // Timeout per test
   timeout: 30 * 1000,
-  // Run all tests in parallel.
-  fullyParallel: true,
   // Test directory
-  testDir: path.join(__dirname, '__tests__/e2e'),
+  testDir: path.join(__dirname, "__tests__/e2e"),
   // If a test fails, retry it additional 2 times
   retries: 2,
   // Artifacts folder where screenshots, videos, and traces are stored.
-  outputDir: 'test-results/',
+  outputDir: "test-results/",
   // Note: we only use text snapshots, so its safe to omit the host environment name
-  snapshotPathTemplate: '{testDir}/__snapshots__/{testFilePath}/{arg}{ext}',
+  snapshotPathTemplate: "{testDir}/__snapshots__/{testFilePath}/{arg}{ext}",
 
   // Run your local dev server before starting the tests:
   // https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
   webServer: {
-    command: 'yarn dev',
+    command:
+      "yarn workspace babel-plugin-react-compiler build && yarn workspace react-compiler-runtime build && yarn dev",
     url: baseURL,
     timeout: 300 * 1000,
     reuseExistingServer: !process.env.CI,
   },
 
-  // 'github' for GitHub Actions CI to generate annotations, plus a concise 'dot'
-  // default 'list' when running locally
-  reporter: process.env.CI ? 'github' : 'list',
-
   use: {
     // Use baseURL so to make navigations relative.
     // More information: https://playwright.dev/docs/api/class-testoptions#test-options-base-url
@@ -49,7 +44,7 @@ export default defineConfig({
 
     // Retry a test if its failing with enabled tracing. This allows you to analyze the DOM, console logs, network traffic etc.
     // More information: https://playwright.dev/docs/trace-viewer
-    trace: 'retry-with-trace',
+    trace: "retry-with-trace",
 
     // All available context options: https://playwright.dev/docs/api/class-browser#browser-new-context
     // contextOptions: {
@@ -59,8 +54,8 @@ export default defineConfig({
 
   projects: [
     {
-      name: 'chromium',
-      use: {...devices['Desktop Chrome']},
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
     },
     // {
     //   name: 'Desktop Firefox',

compiler/apps/playground/scripts/downloadFonts.js

@@ -5,16 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const {execSync} = require('child_process');
+const { execSync } = require("child_process");
 
 // So that we don't need to check them into the repo.
 // See https://github.com/reactjs/reactjs.org/blob/main/beta/scripts/downloadFonts.js.
 execSync(
-  'curl https://conf.reactjs.org/fonts/Optimistic_Display_W_Lt.woff2 --output public/fonts/Optimistic_Display_W_Lt.woff2'
+  "curl https://conf.reactjs.org/fonts/Optimistic_Display_W_Lt.woff2 --output public/fonts/Optimistic_Display_W_Lt.woff2"
 );
 execSync(
-  'curl https://conf.reactjs.org/fonts/Optimistic_Display_W_Md.woff2 --output public/fonts/Optimistic_Display_W_Md.woff2'
+  "curl https://conf.reactjs.org/fonts/Optimistic_Display_W_Md.woff2 --output public/fonts/Optimistic_Display_W_Md.woff2"
 );
 execSync(
-  'curl https://conf.reactjs.org/fonts/Optimistic_Display_W_Bd.woff2 --output public/fonts/Optimistic_Display_W_Bd.woff2'
+  "curl https://conf.reactjs.org/fonts/Optimistic_Display_W_Bd.woff2 --output public/fonts/Optimistic_Display_W_Bd.woff2"
 );

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

@@ -1,15 +0,0 @@
-#!/usr/bin/env bash
-# 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.
-
-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
-
-yarn --silent link babel-plugin-react-compiler
-yarn --silent link react-compiler-runtime

compiler/apps/playground/tailwind.config.js

@@ -5,33 +5,33 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const defaultTheme = require('tailwindcss/defaultTheme');
-const colors = require('./colors');
+const defaultTheme = require("tailwindcss/defaultTheme");
+const colors = require("./colors");
 
 module.exports = {
   content: [
-    './app/**/*.{js,ts,jsx,tsx}',
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
-    './lib/forgetMonacoDiagnostics.ts',
+    "./app/**/*.{js,ts,jsx,tsx}",
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+    "./lib/forgetMonacoDiagnostics.ts",
   ],
   theme: {
     extend: {
       colors,
       width: {
-        toast: 'min(900px, 100vw - 40px)',
-        'toast-body': 'calc(100% - 60px)',
-        'toast-title': 'calc(100% - 40px)',
+        toast: "min(900px, 100vw - 40px)",
+        "toast-body": "calc(100% - 60px)",
+        "toast-title": "calc(100% - 40px)",
       },
       height: {
-        content: 'calc(100vh - 45px)',
-        monaco: 'calc(100vh - 93px)',
-        monaco_small: 'calc(100vh - 129px)',
+        content: "calc(100vh - 45px)",
+        monaco: "calc(100vh - 93px)",
+        monaco_small: "calc(100vh - 129px)",
       },
       fontFamily: {
         sans: [
-          'Optimistic Display',
-          '-apple-system',
+          "Optimistic Display",
+          "-apple-system",
           ...defaultTheme.fontFamily.sans,
         ],
       },

compiler/apps/playground/tsconfig.json

@@ -31,7 +31,6 @@
     ".next/types/**/*.ts"
   ],
   "exclude": [
-    "node_modules",
-    "../../../**"
+    "node_modules"
   ]
 }

compiler/crates/react_build_hir/Cargo.toml

@@ -0,0 +1,21 @@
+[package]
+name = "react_build_hir"
+version = "0.1.0"
+publish               = false
+authors.workspace     = true
+description.workspace = true
+edition.workspace     = true
+homepage.workspace    = true
+keywords.workspace    = true
+license.workspace     = true
+repository.workspace  = true
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+react_hir = { workspace = true }
+react_estree = { workspace = true}
+indexmap = { workspace = true }
+react_diagnostics = { workspace = true }
+react_semantic_analysis = { workspace = true }
+thiserror = { workspace = true }

compiler/crates/react_build_hir/README.md

@@ -0,0 +1,3 @@
+# Build-HIR
+
+This crate converts from `react_estree` into React Compiler's HIR format as the first phase of compilation.

compiler/crates/react_build_hir/src/build.rs

@@ -0,0 +1,746 @@
+/*
+ * 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.
+ */
+
+use std::collections::HashSet;
+
+use react_diagnostics::Diagnostic;
+use react_estree::{
+    AssignmentPropertyOrRestElement, AssignmentTarget, BlockStatement, Expression,
+    ExpressionOrSpread, ExpressionOrSuper, ForInit, Function, IntoFunction, JsValue, Pattern,
+    Statement, VariableDeclaration, VariableDeclarationKind,
+};
+use react_hir::{
+    ArrayDestructureItem, BlockKind, BranchTerminal, Destructure, DestructurePattern, Environment,
+    ForTerminal, GotoKind, Identifier, IdentifierOperand, InstructionKind, InstructionValue,
+    JSXAttribute, JSXElement, LValue, LoadGlobal, LoadLocal, ObjectDestructureItem,
+    ObjectDestructureProperty, PlaceOrSpread, TerminalValue,
+};
+
+use crate::builder::{Builder, LoopScope};
+use crate::context::get_context_identifiers;
+use crate::error::BuildHIRError;
+
+/// Converts a React function in ESTree format into HIR. Returns the HIR
+/// if it was constructed sucessfully, otherwise a list of diagnostics
+/// if the input could be not be converted to HIR.
+///
+/// Failures generally include nonsensical input (`delete 1`) or syntax
+/// that is not yet supported.
+pub fn build(env: &Environment, fun: &Function) -> Result<Box<react_hir::Function>, Diagnostic> {
+    let mut builder = Builder::new(env);
+
+    let mut params = Vec::with_capacity(fun.params.len());
+    for param in &fun.params {
+        match param {
+            Pattern::Identifier(param) => {
+                let identifier = lower_identifier_for_assignment(
+                    env,
+                    &mut builder,
+                    InstructionKind::Let,
+                    param,
+                )?;
+                params.push(identifier);
+            }
+            _ => {
+                return Err(Diagnostic::todo(
+                    "Support non-identifier params",
+                    param.range(),
+                ));
+            }
+        }
+    }
+
+    match &fun.body {
+        Some(react_estree::FunctionBody::BlockStatement(body)) => {
+            lower_block_statement(env, &mut builder, body)?
+        }
+        Some(react_estree::FunctionBody::Expression(body)) => {
+            lower_expression(env, &mut builder, body)?;
+        }
+        None => {
+            return Err(Diagnostic::invalid_syntax(
+                BuildHIRError::EmptyFunction,
+                fun.range,
+            ));
+        }
+    }
+
+    // In case the function did not explicitly return, terminate the final
+    // block with an explicit `return undefined`. If the function *did* return,
+    // this will be unreachable and get pruned later.
+    let implicit_return_value = builder.push(InstructionValue::Primitive(react_hir::Primitive {
+        value: JsValue::Undefined,
+    }));
+    builder.terminate(
+        TerminalValue::Return(react_hir::ReturnTerminal {
+            value: implicit_return_value,
+        }),
+        react_hir::BlockKind::Block,
+    );
+
+    let body = builder.build()?;
+    Ok(Box::new(react_hir::Function {
+        id: fun.id.as_ref().map(|id| id.name.clone()),
+        body,
+        params,
+        // TODO: populate context!
+        context: Default::default(),
+        is_async: fun.is_async,
+        is_generator: fun.is_generator,
+    }))
+}
+
+fn lower_block_statement(
+    env: &Environment,
+    builder: &mut Builder,
+    stmt: &BlockStatement,
+) -> Result<(), Diagnostic> {
+    for stmt in &stmt.body {
+        lower_statement(env, builder, stmt, None)?;
+    }
+    Ok(())
+}
+
+/// Convert a statement to HIR. This will often result in multiple instructions and blocks
+/// being created as statements often describe control flow.
+fn lower_statement(
+    env: &Environment,
+    builder: &mut Builder,
+    stmt: &Statement,
+    label: Option<String>,
+) -> Result<(), Diagnostic> {
+    match stmt {
+        Statement::BlockStatement(stmt) => {
+            lower_block_statement(env, builder, stmt)?;
+        }
+        Statement::BreakStatement(stmt) => {
+            let block = builder.resolve_break(stmt.label.as_ref())?;
+            builder.terminate(
+                TerminalValue::Goto(react_hir::GotoTerminal {
+                    block,
+                    kind: GotoKind::Break,
+                }),
+                BlockKind::Block,
+            );
+        }
+        Statement::ContinueStatement(stmt) => {
+            let block = builder.resolve_continue(stmt.label.as_ref())?;
+            builder.terminate(
+                TerminalValue::Goto(react_hir::GotoTerminal {
+                    block,
+                    kind: GotoKind::Continue,
+                }),
+                BlockKind::Block,
+            );
+        }
+        Statement::ReturnStatement(stmt) => {
+            let value = match &stmt.argument {
+                Some(argument) => lower_expression(env, builder, argument)?,
+                None => builder.push(InstructionValue::Primitive(react_hir::Primitive {
+                    value: JsValue::Undefined,
+                })),
+            };
+            builder.terminate(
+                TerminalValue::Return(react_hir::ReturnTerminal { value }),
+                BlockKind::Block,
+            );
+        }
+        Statement::ExpressionStatement(stmt) => {
+            lower_expression(env, builder, &stmt.expression)?;
+        }
+        Statement::EmptyStatement(_) => {
+            // no-op
+        }
+        Statement::VariableDeclaration(stmt) => {
+            lower_variable_declaration(env, builder, stmt)?;
+        }
+        Statement::IfStatement(stmt) => {
+            // block for what follows the if statement, though this may
+            // not be reachable
+            let fallthrough_block = builder.reserve(BlockKind::Block);
+
+            let consequent_block = builder.enter(BlockKind::Block, |builder| {
+                lower_statement(env, builder, &stmt.consequent, None)?;
+                Ok(TerminalValue::Goto(react_hir::GotoTerminal {
+                    block: fallthrough_block.id,
+                    kind: GotoKind::Break,
+                }))
+            })?;
+
+            let alternate_block = builder.enter(BlockKind::Block, |builder| {
+                if let Some(alternate) = &stmt.alternate {
+                    lower_statement(env, builder, alternate, None)?;
+                }
+                Ok(TerminalValue::Goto(react_hir::GotoTerminal {
+                    block: fallthrough_block.id,
+                    kind: GotoKind::Break,
+                }))
+            })?;
+
+            let test = lower_expression(env, builder, &stmt.test)?;
+            let terminal = TerminalValue::If(react_hir::IfTerminal {
+                test,
+                consequent: consequent_block,
+                alternate: alternate_block,
+                fallthrough: Some(fallthrough_block.id),
+            });
+            builder.terminate_with_fallthrough(terminal, fallthrough_block);
+        }
+        Statement::ForStatement(stmt) => {
+            // Block for the loop's test condition
+            let test_block = builder.reserve(BlockKind::Loop);
+
+            // Block for code following the loop
+            let fallthrough_block = builder.reserve(BlockKind::Block);
+
+            let init_block = builder.enter(BlockKind::Loop, |builder| {
+                if let Some(ForInit::VariableDeclaration(decl)) = &stmt.init {
+                    lower_variable_declaration(env, builder, decl)?;
+                    Ok(TerminalValue::Goto(react_hir::GotoTerminal {
+                        block: test_block.id,
+                        kind: GotoKind::Break,
+                    }))
+                } else {
+                    Err(Diagnostic::todo(
+                        BuildHIRError::ForStatementIsMissingInitializer,
+                        None,
+                    ))
+                }
+            })?;
+
+            let update_block = stmt
+                .update
+                .as_ref()
+                .map(|update| {
+                    builder.enter(BlockKind::Loop, |builder| {
+                        lower_expression(env, builder, update)?;
+                        Ok(TerminalValue::Goto(react_hir::GotoTerminal {
+                            block: test_block.id,
+                            kind: GotoKind::Break,
+                        }))
+                    })
+                })
+                .transpose()?;
+
+            let body_block = builder.enter(BlockKind::Block, |builder| {
+                let loop_ = LoopScope {
+                    label,
+                    continue_block: update_block.unwrap_or(test_block.id),
+                    break_block: fallthrough_block.id,
+                };
+                builder.enter_loop(loop_, |builder| {
+                    lower_statement(env, builder, &stmt.body, None)?;
+                    Ok(TerminalValue::Goto(react_hir::GotoTerminal {
+                        block: update_block.unwrap_or(test_block.id),
+                        kind: GotoKind::Continue,
+                    }))
+                })
+            })?;
+
+            let terminal = TerminalValue::For(ForTerminal {
+                body: body_block,
+                init: init_block,
+                test: test_block.id,
+                fallthrough: fallthrough_block.id,
+                update: update_block,
+            });
+            builder.terminate_with_fallthrough(terminal, test_block);
+
+            if let Some(test) = &stmt.test {
+                let test_value = lower_expression(env, builder, test)?;
+                let terminal = TerminalValue::Branch(BranchTerminal {
+                    test: test_value,
+                    consequent: body_block,
+                    alternate: fallthrough_block.id,
+                });
+                builder.terminate_with_fallthrough(terminal, fallthrough_block);
+            } else {
+                return Err(Diagnostic::todo(
+                    BuildHIRError::ForStatementIsMissingTest,
+                    stmt.range,
+                ));
+            }
+        }
+        _ => todo!("Lower {stmt:#?}"),
+    }
+    Ok(())
+}
+
+fn lower_variable_declaration(
+    env: &Environment,
+    builder: &mut Builder,
+    stmt: &VariableDeclaration,
+) -> Result<(), Diagnostic> {
+    let kind = match stmt.kind {
+        VariableDeclarationKind::Const => InstructionKind::Const,
+        VariableDeclarationKind::Let => InstructionKind::Let,
+        VariableDeclarationKind::Var => {
+            return Err(Diagnostic::unsupported(
+                BuildHIRError::VariableDeclarationKindIsVar,
+                stmt.range,
+            ));
+        }
+    };
+    for declaration in &stmt.declarations {
+        if let Some(init) = &declaration.init {
+            let value = lower_expression(env, builder, init)?;
+            lower_assignment_pattern(env, builder, kind, &declaration.id, value)?;
+        } else {
+            match &declaration.id {
+                Pattern::Identifier(id) => {
+                    let identifier = env.resolve_variable_declaration(id.as_ref(), &id.name);
+                    if let Some(identifier) = identifier {
+                        builder.push(InstructionValue::DeclareLocal(react_hir::DeclareLocal {
+                            lvalue: LValue {
+                                identifier: IdentifierOperand {
+                                    identifier,
+                                    effect: None,
+                                },
+                                kind,
+                            },
+                        }));
+                    } else {
+                        return Err(Diagnostic::invariant(
+                            BuildHIRError::VariableDeclarationBindingIsNonLocal,
+                            id.range,
+                        ));
+                    }
+                }
+                _ => {
+                    return Err(Diagnostic::invalid_syntax(
+                        "Expected an identifier for variable declaration without an intializer. Destructuring requires an initial value",
+                        declaration.range,
+                    ));
+                }
+            }
+        }
+    }
+    Ok(())
+}
+
+/// Converts an ESTree Expression into an HIR InstructionValue. Note that while only a single
+/// InstructionValue is returned, this function is recursive and may cause multiple instructions
+/// to be emitted, possibly across multiple basic blocks (in the case of expressions with control
+/// flow semenatics such as logical, conditional, and optional expressions).
+fn lower_expression(
+    env: &Environment,
+    builder: &mut Builder,
+    expr: &Expression,
+) -> Result<IdentifierOperand, Diagnostic> {
+    let value = match expr {
+        Expression::Identifier(expr) => {
+            let identifier = env.resolve_variable_reference(expr.as_ref());
+            if let Some(identifier) = identifier {
+                let place = IdentifierOperand {
+                    effect: None,
+                    identifier,
+                };
+                InstructionValue::LoadLocal(LoadLocal { place })
+            } else {
+                InstructionValue::LoadGlobal(LoadGlobal {
+                    name: expr.name.clone(),
+                })
+            }
+        }
+        Expression::Literal(expr) => InstructionValue::Primitive(react_hir::Primitive {
+            value: expr.value.clone(),
+        }),
+        Expression::NumericLiteral(expr) => InstructionValue::Primitive(react_hir::Primitive {
+            value: JsValue::Number(expr.value),
+        }),
+        Expression::BooleanLiteral(expr) => InstructionValue::Primitive(react_hir::Primitive {
+            value: JsValue::Boolean(expr.value),
+        }),
+        Expression::StringLiteral(expr) => InstructionValue::Primitive(react_hir::Primitive {
+            value: JsValue::String(expr.value.clone()),
+        }),
+        Expression::NullLiteral(_expr) => InstructionValue::Primitive(react_hir::Primitive {
+            value: JsValue::Null,
+        }),
+        Expression::ArrayExpression(expr) => {
+            let mut elements = Vec::with_capacity(expr.elements.len());
+            for expr in &expr.elements {
+                let element = match expr {
+                    Some(react_estree::ExpressionOrSpread::SpreadElement(expr)) => Some(
+                        PlaceOrSpread::Spread(lower_expression(env, builder, &expr.argument)?),
+                    ),
+                    Some(react_estree::ExpressionOrSpread::Expression(expr)) => {
+                        Some(PlaceOrSpread::Place(lower_expression(env, builder, expr)?))
+                    }
+                    None => None,
+                };
+                elements.push(element);
+            }
+            InstructionValue::Array(react_hir::Array { elements })
+        }
+
+        Expression::AssignmentExpression(expr) => match expr.operator {
+            react_estree::AssignmentOperator::Equals => {
+                let right = lower_expression(env, builder, &expr.right)?;
+                return lower_assignment(
+                    env,
+                    builder,
+                    InstructionKind::Reassign,
+                    &expr.left,
+                    right,
+                );
+            }
+            _ => todo!("lower assignment expr {:#?}", expr),
+        },
+
+        Expression::BinaryExpression(expr) => {
+            let left = lower_expression(env, builder, &expr.left)?;
+            let right = lower_expression(env, builder, &expr.right)?;
+            InstructionValue::Binary(react_hir::Binary {
+                left,
+                operator: expr.operator,
+                right,
+            })
+        }
+
+        Expression::FunctionExpression(expr) => {
+            InstructionValue::Function(lower_function(env, builder, expr.as_ref())?)
+        }
+
+        Expression::ArrowFunctionExpression(expr) => {
+            InstructionValue::Function(lower_function(env, builder, expr.as_ref())?)
+        }
+
+        Expression::CallExpression(expr) => {
+            let callee_expr = match &expr.callee {
+                ExpressionOrSuper::Super(callee) => {
+                    return Err(Diagnostic::unsupported(
+                        BuildHIRError::UnsupportedSuperExpression,
+                        callee.range,
+                    ));
+                }
+                ExpressionOrSuper::Expression(callee) => callee,
+            };
+
+            if matches!(&callee_expr, Expression::MemberExpression(_)) {
+                return Err(Diagnostic::todo("Support method calls", expr.range));
+            }
+
+            let callee = lower_expression(env, builder, callee_expr)?;
+            let arguments = lower_arguments(env, builder, &expr.arguments)?;
+            InstructionValue::Call(react_hir::Call { callee, arguments })
+        }
+
+        Expression::JSXElement(expr) => {
+            InstructionValue::JSXElement(lower_jsx_element(env, builder, expr)?)
+        }
+
+        _ => todo!("Lower expr {expr:#?}"),
+    };
+    Ok(builder.push(value))
+}
+
+fn lower_arguments(
+    env: &Environment,
+    builder: &mut Builder,
+    args: &[ExpressionOrSpread],
+) -> Result<Vec<PlaceOrSpread>, Diagnostic> {
+    let mut arguments = Vec::with_capacity(args.len());
+    for arg in args {
+        let element = match arg {
+            react_estree::ExpressionOrSpread::SpreadElement(arg) => {
+                PlaceOrSpread::Spread(lower_expression(env, builder, &arg.argument)?)
+            }
+            react_estree::ExpressionOrSpread::Expression(arg) => {
+                PlaceOrSpread::Place(lower_expression(env, builder, arg)?)
+            }
+        };
+        arguments.push(element);
+    }
+    Ok(arguments)
+}
+
+fn lower_function<T: IntoFunction>(
+    env: &Environment,
+    _builder: &mut Builder,
+    function: &T,
+) -> Result<react_hir::FunctionExpression, Diagnostic> {
+    let context_identifiers = get_context_identifiers(env, function);
+    let mut context = Vec::new();
+    let mut seen = HashSet::new();
+    for declaration_id in context_identifiers {
+        if let Some(identifier) = env.resolve_declaration_id(declaration_id) {
+            if !seen.insert(identifier.id) {
+                continue;
+            }
+            context.push(IdentifierOperand {
+                effect: None,
+                identifier,
+            });
+        }
+    }
+    let mut fun = build(env, function.function())?;
+    fun.context = context;
+    Ok(react_hir::FunctionExpression {
+        // TODO: collect dependencies!
+        dependencies: Default::default(),
+        lowered_function: fun,
+    })
+}
+
+fn lower_jsx_element(
+    env: &Environment,
+    builder: &mut Builder,
+    expr: &react_estree::JSXElement,
+) -> Result<JSXElement, Diagnostic> {
+    let props: Result<Vec<JSXAttribute>, Diagnostic> = expr
+        .opening_element
+        .attributes
+        .iter()
+        .map(|attr| lower_jsx_attribute(env, builder, attr))
+        .collect();
+    let _props = props?;
+    let children: Result<Vec<IdentifierOperand>, Diagnostic> = expr
+        .children
+        .iter()
+        .map(|child| {
+            let child = lower_jsx_child(env, builder, child)?;
+            Ok(child)
+        })
+        .collect();
+    let _children = children?;
+    todo!("lower jsx element");
+    // Ok(JSXElement {
+    //     tag: todo!(),
+    //     props,
+    //     children: if children.is_empty() {
+    //         None
+    //     } else {
+    //         Some(children)
+    //     },
+    // })
+}
+
+fn lower_jsx_attribute(
+    _env: &Environment,
+    _builder: &mut Builder,
+    _attr: &react_estree::JSXAttributeOrSpread,
+) -> Result<JSXAttribute, Diagnostic> {
+    todo!("lower jsx attribute")
+}
+
+fn lower_jsx_child(
+    _env: &Environment,
+    _builder: &mut Builder,
+    _child: &react_estree::JSXChildItem,
+) -> Result<IdentifierOperand, Diagnostic> {
+    todo!("lower jsx child")
+}
+
+fn lower_assignment(
+    env: &Environment,
+    builder: &mut Builder,
+    kind: InstructionKind,
+    lvalue: &AssignmentTarget,
+    value: IdentifierOperand,
+) -> Result<IdentifierOperand, Diagnostic> {
+    Ok(match lvalue {
+        AssignmentTarget::Pattern(lvalue) => {
+            lower_assignment_pattern(env, builder, kind, lvalue, value)?
+        }
+        _ => todo!("lower assignment for {:#?}", lvalue),
+    })
+}
+
+// TODO: change the success type to void, no caller uses it
+fn lower_assignment_pattern(
+    env: &Environment,
+    builder: &mut Builder,
+    kind: InstructionKind,
+    lvalue: &Pattern,
+    value: IdentifierOperand,
+) -> Result<IdentifierOperand, Diagnostic> {
+    Ok(match lvalue {
+        Pattern::Identifier(lvalue) => {
+            let identifier = lower_identifier_for_assignment(env, builder, kind, lvalue)?;
+            builder.push(InstructionValue::StoreLocal(react_hir::StoreLocal {
+                lvalue: LValue { identifier, kind },
+                value,
+            }))
+        }
+        Pattern::ArrayPattern(lvalue) => {
+            let mut items = Vec::with_capacity(lvalue.elements.len());
+            let mut followups: Vec<(Identifier, &Pattern)> = Vec::new();
+            for element in &lvalue.elements {
+                match element {
+                    None => items.push(ArrayDestructureItem::Hole),
+                    Some(Pattern::Identifier(element)) => {
+                        let identifier =
+                            lower_identifier_for_assignment(env, builder, kind, element)?;
+                        items.push(ArrayDestructureItem::Value(identifier));
+                    }
+                    Some(Pattern::RestElement(element)) => {
+                        if let Pattern::Identifier(element) = &element.argument {
+                            let identifier = lower_identifier_for_assignment(
+                                env,
+                                builder,
+                                kind,
+                                element.as_ref(),
+                            )?;
+                            items.push(ArrayDestructureItem::Spread(identifier));
+                        } else {
+                            let temporary = env.new_temporary();
+                            items.push(ArrayDestructureItem::Spread(IdentifierOperand {
+                                identifier: temporary.clone(),
+                                effect: None,
+                            }));
+                            followups.push((temporary, &element.argument));
+                        }
+                    }
+                    Some(element) => {
+                        let temporary = env.new_temporary();
+                        items.push(ArrayDestructureItem::Value(IdentifierOperand {
+                            identifier: temporary.clone(),
+                            effect: None,
+                        }));
+                        followups.push((temporary, element));
+                    }
+                }
+            }
+            let temporary = builder.push(InstructionValue::Destructure(Destructure {
+                kind,
+                pattern: DestructurePattern::Array(items),
+                value,
+            }));
+            for (temporary, pattern) in followups {
+                lower_assignment_pattern(
+                    env,
+                    builder,
+                    kind,
+                    pattern,
+                    IdentifierOperand {
+                        identifier: temporary,
+                        effect: None,
+                    },
+                )?;
+            }
+            temporary
+        }
+        Pattern::ObjectPattern(lvalue) => {
+            let mut properties = Vec::with_capacity(lvalue.properties.len());
+            let mut followups: Vec<(Identifier, &Pattern)> = Vec::new();
+
+            for property in &lvalue.properties {
+                match property {
+                    AssignmentPropertyOrRestElement::RestElement(property) => {
+                        if let Pattern::Identifier(element) = &property.argument {
+                            let identifier = lower_identifier_for_assignment(
+                                env,
+                                builder,
+                                kind,
+                                element.as_ref(),
+                            )?;
+                            properties.push(ObjectDestructureItem::Spread(identifier));
+                        } else {
+                            let temporary = env.new_temporary();
+                            properties.push(ObjectDestructureItem::Spread(IdentifierOperand {
+                                identifier: temporary.clone(),
+                                effect: None,
+                            }));
+                            followups.push((temporary, &property.argument));
+                        }
+                    }
+                    AssignmentPropertyOrRestElement::AssignmentProperty(property) => {
+                        if property.is_computed {
+                            return Err(Diagnostic::todo(
+                                "Handle computed properties in ObjectPattern",
+                                property.range,
+                            ));
+                        }
+                        let key = if let Expression::Identifier(key) = &property.key {
+                            key.name.as_str()
+                        } else {
+                            return Err(Diagnostic::todo(
+                                "Support non-identifier object keys in non-computed ObjectPattern",
+                                property.range,
+                            ));
+                        };
+                        if let Pattern::Identifier(value) = &property.value {
+                            let value = lower_identifier_for_assignment(env, builder, kind, value)?;
+                            properties.push(ObjectDestructureItem::Property(
+                                ObjectDestructureProperty {
+                                    name: key.to_string(),
+                                    value,
+                                },
+                            ));
+                        } else {
+                            let temporary = env.new_temporary();
+                            properties.push(ObjectDestructureItem::Property(
+                                ObjectDestructureProperty {
+                                    name: key.to_string(),
+                                    value: IdentifierOperand {
+                                        identifier: temporary.clone(),
+                                        effect: None,
+                                    },
+                                },
+                            ));
+                            followups.push((temporary, &property.value));
+                        }
+                    }
+                }
+            }
+
+            let temporary = builder.push(InstructionValue::Destructure(Destructure {
+                kind,
+                pattern: DestructurePattern::Object(properties),
+                value,
+            }));
+            for (temporary, pattern) in followups {
+                lower_assignment_pattern(
+                    env,
+                    builder,
+                    kind,
+                    pattern,
+                    IdentifierOperand {
+                        identifier: temporary,
+                        effect: None,
+                    },
+                )?;
+            }
+            temporary
+        }
+        _ => todo!("lower assignment pattern for {:#?}", lvalue),
+    })
+}
+
+fn lower_identifier_for_assignment(
+    env: &Environment,
+    _builder: &mut Builder,
+    kind: InstructionKind,
+    node: &react_estree::Identifier,
+) -> Result<IdentifierOperand, Diagnostic> {
+    match kind {
+        InstructionKind::Reassign => {
+            let identifier = env.resolve_variable_reference(node);
+            if let Some(identifier) = identifier {
+                Ok(IdentifierOperand {
+                    identifier,
+                    effect: None,
+                })
+            } else {
+                // Reassigning a global
+                Err(
+                    Diagnostic::invalid_react(BuildHIRError::ReassignedGlobal, node.range)
+                        .annotate(format!("Cannot reassign `{}`", &node.name), node.range),
+                )
+            }
+        }
+        _ => {
+            // Declaration
+            let identifier = env.resolve_variable_declaration(node, &node.name).unwrap();
+            Ok(IdentifierOperand {
+                identifier,
+                effect: None,
+            })
+        }
+    }
+}

compiler/crates/react_build_hir/src/builder.rs

@@ -0,0 +1,322 @@
+/*
+ * 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.
+ */
+
+use std::cell::RefCell;
+use std::rc::Rc;
+
+use react_diagnostics::Diagnostic;
+use react_hir::{
+    initialize_hir, BasicBlock, BlockId, BlockKind, Blocks, Environment, GotoKind, IdentifierData,
+    IdentifierOperand, InstrIx, Instruction, InstructionIdGenerator, InstructionValue, Terminal,
+    TerminalValue, Type, HIR,
+};
+
+use crate::BuildHIRError;
+
+/// Helper struct used when converting from ESTree to HIR. Includes:
+/// - Variable resolution
+/// - Label resolution (for labeled statements and break/continue)
+/// - Access to the environment
+///
+/// As well as representing the incomplete form of the HIR. Usage
+/// generally involves driving calls to enter/exit blocks, resolve
+/// labels and variables, and then calling `build()` when the HIR
+/// is complete.
+pub(crate) struct Builder<'e> {
+    #[allow(dead_code)]
+    environment: &'e Environment,
+
+    completed: Blocks,
+
+    instructions: Vec<Instruction>,
+
+    entry: BlockId,
+
+    wip: WipBlock,
+
+    id_gen: InstructionIdGenerator,
+
+    scopes: Vec<ControlFlowScope>,
+}
+
+pub(crate) struct WipBlock {
+    pub id: BlockId,
+    pub kind: BlockKind,
+    pub instructions: Vec<InstrIx>,
+}
+
+#[derive(Clone, PartialEq, Eq, Debug)]
+enum ControlFlowScope {
+    Loop(LoopScope),
+
+    // Switch(SwitchScope),
+    #[allow(dead_code)]
+    Label(LabelScope),
+}
+
+#[derive(Clone, PartialEq, Eq, Debug)]
+pub(crate) struct LoopScope {
+    pub label: Option<String>,
+    pub continue_block: BlockId,
+    pub break_block: BlockId,
+}
+
+#[derive(Clone, PartialEq, Eq, Debug)]
+pub(crate) struct LabelScope {
+    pub label: String,
+    pub block: BlockId,
+}
+
+impl ControlFlowScope {
+    fn label(&self) -> Option<&String> {
+        match self {
+            Self::Loop(scope) => scope.label.as_ref(),
+            Self::Label(scope) => Some(&scope.label),
+        }
+    }
+
+    fn break_block(&self) -> BlockId {
+        match self {
+            Self::Loop(scope) => scope.break_block,
+            Self::Label(scope) => scope.block,
+        }
+    }
+}
+
+impl<'e> Builder<'e> {
+    pub(crate) fn new(environment: &'e Environment) -> Self {
+        let entry = environment.next_block_id();
+        let current = WipBlock {
+            id: entry,
+            kind: BlockKind::Block,
+            instructions: Default::default(),
+        };
+        Self {
+            environment,
+            completed: Default::default(),
+            instructions: Default::default(),
+            entry,
+            wip: current,
+            id_gen: InstructionIdGenerator::new(),
+            scopes: Default::default(),
+        }
+    }
+
+    /// Completes the builder and returns the HIR if it was valid,
+    /// or a Diagnostic if a validation error occured.
+    ///
+    /// TODO: refine the type, only invariants should be possible here,
+    /// not other types of errors
+    pub(crate) fn build(self) -> Result<HIR, Diagnostic> {
+        let mut hir = HIR {
+            entry: self.entry,
+            blocks: self.completed,
+            instructions: self.instructions,
+        };
+        // Run all the initialization passes
+        initialize_hir(&mut hir)?;
+        Ok(hir)
+    }
+
+    /// Adds a new instruction to the end of the work in progress block
+    pub(crate) fn push(&mut self, value: InstructionValue) -> IdentifierOperand {
+        let lvalue = IdentifierOperand {
+            identifier: self.environment.new_temporary(),
+            effect: None,
+        };
+        let instr = Instruction {
+            id: self.id_gen.next(),
+            lvalue: lvalue.clone(),
+            value,
+        };
+        let ix = InstrIx::new(self.instructions.len() as u32);
+        self.instructions.push(instr);
+        self.wip.instructions.push(ix);
+        lvalue
+    }
+
+    /// Terminates the work in progress block with the given terminal, and starts a new
+    /// work in progress block with the given kind
+    pub(crate) fn terminate(&mut self, terminal: TerminalValue, next_kind: BlockKind) {
+        let next_wip = WipBlock {
+            id: self.environment.next_block_id(),
+            kind: next_kind,
+            instructions: Default::default(),
+        };
+        self.terminate_with_fallthrough(terminal, next_wip)
+    }
+
+    pub(crate) fn terminate_with_fallthrough(
+        &mut self,
+        terminal: TerminalValue,
+        fallthrough: WipBlock,
+    ) {
+        let prev_wip = std::mem::replace(&mut self.wip, fallthrough);
+        self.completed.insert(Box::new(BasicBlock {
+            id: prev_wip.id,
+            kind: prev_wip.kind,
+            instructions: prev_wip.instructions,
+            terminal: Terminal {
+                id: self.id_gen.next(),
+                value: terminal,
+            },
+            predecessors: Default::default(),
+            phis: Default::default(),
+        }));
+    }
+
+    pub(crate) fn reserve(&mut self, kind: BlockKind) -> WipBlock {
+        WipBlock {
+            id: self.environment.next_block_id(),
+            kind,
+            instructions: Default::default(),
+        }
+    }
+
+    pub(crate) fn enter<F>(&mut self, kind: BlockKind, f: F) -> Result<BlockId, Diagnostic>
+    where
+        F: FnOnce(&mut Self) -> Result<TerminalValue, Diagnostic>,
+    {
+        let wip = self.reserve(kind);
+        let id = wip.id;
+        self.enter_reserved(wip, f)?;
+        Ok(id)
+    }
+
+    fn enter_reserved<F>(&mut self, wip: WipBlock, f: F) -> Result<(), Diagnostic>
+    where
+        F: FnOnce(&mut Self) -> Result<TerminalValue, Diagnostic>,
+    {
+        let current = std::mem::replace(&mut self.wip, wip);
+
+        let (result, terminal) = match f(self) {
+            Ok(terminal) => (Ok(()), terminal),
+            Err(error) => (
+                Err(error),
+                // TODO: add a `Terminal::Error` variant
+                TerminalValue::Goto(react_hir::GotoTerminal {
+                    block: current.id,
+                    kind: GotoKind::Break,
+                }),
+            ),
+        };
+
+        let completed = std::mem::replace(&mut self.wip, current);
+        self.completed.insert(Box::new(BasicBlock {
+            id: completed.id,
+            kind: completed.kind,
+            instructions: completed.instructions,
+            terminal: Terminal {
+                id: self.id_gen.next(),
+                value: terminal,
+            },
+            predecessors: Default::default(),
+            phis: Default::default(),
+        }));
+        result
+    }
+
+    pub(crate) fn enter_loop<F>(
+        &mut self,
+        scope: LoopScope,
+        f: F,
+    ) -> Result<TerminalValue, Diagnostic>
+    where
+        F: FnOnce(&mut Self) -> Result<TerminalValue, Diagnostic>,
+    {
+        self.scopes.push(ControlFlowScope::Loop(scope.clone()));
+        let terminal = f(self);
+        let last = self.scopes.pop().unwrap();
+        assert_eq!(last, ControlFlowScope::Loop(scope));
+        terminal
+    }
+
+    /// Returns a new temporary identifier
+    /// This may be necessary for destructuring with default values. there
+    /// we synthesize a temporary identifier to store the possibly-missing value
+    /// into, and emit a later StoreLocal for the original identifier
+    #[allow(dead_code)]
+    pub(crate) fn make_temporary(&self) -> react_hir::Identifier {
+        react_hir::Identifier {
+            id: self.environment.next_identifier_id(),
+            name: None,
+            data: Rc::new(RefCell::new(IdentifierData {
+                mutable_range: Default::default(),
+                scope: None,
+                type_: Type::Var(self.environment.next_type_var_id()),
+            })),
+        }
+    }
+
+    /// Resolves the target for the given break label (if present), or returns the default
+    /// break target given the current context. Returns a diagnostic if the label is
+    /// provided but cannot be resolved.
+    pub(crate) fn resolve_break(
+        &self,
+        label: Option<&react_estree::Identifier>,
+    ) -> Result<BlockId, Diagnostic> {
+        for scope in self.scopes.iter().rev() {
+            match (label, scope.label()) {
+                // If this is an unlabeled break, return the most recent break target
+                (None, _) => return Ok(scope.break_block()),
+                // If the break is labeled and matches the current scope, return its break target
+                (Some(label), Some(scope_label)) if &label.name == scope_label => {
+                    return Ok(scope.break_block());
+                }
+                // Otherwise keep searching
+                _ => continue,
+            }
+        }
+        Err(Diagnostic::invalid_syntax(
+            BuildHIRError::UnresolvedBreakTarget,
+            None,
+        ))
+    }
+
+    /// Resolves the target for the given continue label (if present), or returns the default
+    /// continue target given the current context. Returns a diagnostic if the label is
+    /// provided but cannot be resolved.
+    pub(crate) fn resolve_continue(
+        &self,
+        label: Option<&react_estree::Identifier>,
+    ) -> Result<BlockId, Diagnostic> {
+        for scope in self.scopes.iter().rev() {
+            match scope {
+                ControlFlowScope::Loop(scope) => {
+                    match (label, &scope.label) {
+                        // If this is an unlabeled continue, return the first matching loop
+                        (None, _) => return Ok(scope.continue_block),
+                        // If the continue is labeled and matches the current scope, return its continue target
+                        (Some(label), Some(scope_label))
+                            if label.name.as_str() == scope_label.as_str() =>
+                        {
+                            return Ok(scope.continue_block);
+                        }
+                        // Otherwise keep searching
+                        _ => continue,
+                    }
+                }
+                _ => {
+                    match (label, scope.label()) {
+                        (Some(label), Some(scope_label)) if label.name.as_str() == scope_label => {
+                            // Error, the continue referred to a label that is not a loop
+                            return Err(Diagnostic::invalid_syntax(
+                                BuildHIRError::ContinueTargetIsNotALoop,
+                                None,
+                            ));
+                        }
+                        _ => continue,
+                    }
+                }
+            }
+        }
+        Err(Diagnostic::invalid_syntax(
+            BuildHIRError::UnresolvedContinueTarget,
+            None,
+        ))
+    }
+}