Update base for Update on "compiler: super early exploration of instruction reordering"

See comments in InstructionReordering.ts. This needs substantial iteration before landing in some form, just putting up to share for discussion.

[ghstack-poisoned]

Author: josephsavona

.circleci/config.yml

@@ -507,6 +507,10 @@ workflows:
                 - "-r=www-modern --env=production --variant=false"
                 - "-r=www-modern --env=development --variant=true"
                 - "-r=www-modern --env=production --variant=true"
+                - "-r=xplat --env=development --variant=false"
+                - "-r=xplat --env=development --variant=true"
+                - "-r=xplat --env=production --variant=false"
+                - "-r=xplat --env=production --variant=true"
 
                 # TODO: Test more persistent configurations?
                 - '-r=stable --env=development --persistent'
@@ -552,6 +556,12 @@ workflows:
                 # - "-r=www-modern --env=development --variant=true"
                 # - "-r=www-modern --env=production --variant=true"
 
+                # TODO: Update test config to support xplat build tests
+                # - "-r=xplat --env=development --variant=false"
+                # - "-r=xplat --env=development --variant=true"
+                # - "-r=xplat --env=production --variant=false"
+                # - "-r=xplat --env=production --variant=true"
+
                 # TODO: Test more persistent configurations?
       - download_base_build_for_sizebot:
           filters:

.eslintrc.js

@@ -486,6 +486,7 @@ module.exports = {
     $ReadOnlyArray: 'readonly',
     $ArrayBufferView: 'readonly',
     $Shape: 'readonly',
+    CallSite: 'readonly',
     ConsoleTask: 'readonly', // TOOD: Figure out what the official name of this will be.
     ReturnType: 'readonly',
     AnimationFrameID: 'readonly',

.github/ISSUE_TEMPLATE/config.yml

@@ -1,3 +1,4 @@
+blank_issues_enabled: false
 contact_links:
     - name: 📃 Documentation Issue
       url: https://github.com/reactjs/react.dev/issues/new/choose

.github/workflows/commit_artifacts.yml

@@ -10,7 +10,36 @@ jobs:
     outputs:
       www_branch_count: ${{ steps.check_branches.outputs.www_branch_count }}
       fbsource_branch_count: ${{ steps.check_branches.outputs.fbsource_branch_count }}
+      last_version_classic: ${{ steps.get_last_version_www.outputs.last_version_classic }}
+      last_version_modern: ${{ steps.get_last_version_www.outputs.last_version_modern }}
+      last_version_rn: ${{ steps.get_last_version_rn.outputs.last_version_rn }}
+      current_version_classic: ${{ steps.get_current_version.outputs.current_version_classic }}
+      current_version_modern: ${{ steps.get_current_version.outputs.current_version_modern }}
+      current_version_rn: ${{ steps.get_current_version.outputs.current_version_rn }}
     steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: builds/facebook-www
+      - name: "Get last version string for www"
+        id: get_last_version_www
+        run: |
+          # Empty checks only needed for backwards compatibility,can remove later.
+          VERSION_CLASSIC=$( [ -f ./compiled/facebook-www/VERSION_CLASSIC ] && cat ./compiled/facebook-www/VERSION_CLASSIC || echo '' )
+          VERSION_MODERN=$( [ -f ./compiled/facebook-www/VERSION_MODERN ] && cat ./compiled/facebook-www/VERSION_MODERN || echo '' )
+          echo "Last classic version is $VERSION_CLASSIC"
+          echo "Last modern version is $VERSION_MODERN"
+          echo "last_version_classic=$VERSION_CLASSIC" >> "$GITHUB_OUTPUT"
+          echo "last_version_modern=$VERSION_MODERN" >> "$GITHUB_OUTPUT"
+      - uses: actions/checkout@v4
+        with:
+          ref: builds/facebook-fbsource
+      - name: "Get last version string for rn"
+        id: get_last_version_rn
+        run: |
+          # Empty checks only needed for backwards compatibility,can remove later.
+          VERSION_NATIVE_FB=$( [ -f ./compiled-rn/VERSION_NATIVE_FB ] && cat ./compiled-rn/VERSION_NATIVE_FB || echo '' )
+          echo "Last rn version is $VERSION_NATIVE_FB"
+          echo "last_version_rn=$VERSION_NATIVE_FB" >> "$GITHUB_OUTPUT"
       - uses: actions/checkout@v4
       - name: "Check branches"
         id: check_branches
@@ -147,7 +176,7 @@ jobs:
           mkdir -p ${BASE_FOLDER}/react-native-github/Libraries/Renderer/
           mkdir -p ${BASE_FOLDER}/RKJSModules/vendor/react/{scheduler,react,react-is,react-test-renderer}/
 
-          # Move React Native 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/
@@ -160,11 +189,27 @@ jobs:
           rm $RENDERER_FOLDER/ReactFabric-{dev,prod,profiling}.js
           rm $RENDERER_FOLDER/ReactNativeRenderer-{dev,prod,profiling}.js
 
-          ls -R ./compiled
-      - name: Add REVISION file
+          # Move React Native version file
+          mv build/facebook-react-native/VERSION_NATIVE_FB ./compiled-rn/VERSION_NATIVE_FB
+
+          ls -R ./compiled-rn
+      - name: Add REVISION files
         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
+      - name: "Get current version string"
+        id: get_current_version
+        run: |
+          VERSION_CLASSIC=$(cat ./compiled/facebook-www/VERSION_CLASSIC)
+          VERSION_MODERN=$(cat ./compiled/facebook-www/VERSION_MODERN)
+          VERSION_NATIVE_FB=$(cat ./compiled-rn/VERSION_NATIVE_FB)
+          echo "Current classic version is $VERSION_CLASSIC"
+          echo "Current modern version is $VERSION_MODERN"
+          echo "Current rn version is $VERSION_NATIVE_FB"
+          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@v3
         with:
           name: compiled
@@ -188,15 +233,58 @@ jobs:
         with:
           name: compiled
           path: compiled/
-      - run: git status -u
+      - name: Revert version changes
+        if: 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 }}
+          LAST_VERSION_CLASSIC: ${{ needs.download_artifacts.outputs.last_version_classic }}
+          LAST_VERSION_MODERN: ${{ needs.download_artifacts.outputs.last_version_modern }}
+        run: |
+          echo "Reverting $CURRENT_VERSION_CLASSIC to $LAST_VERSION_CLASSIC"
+          grep -rl "$CURRENT_VERSION_CLASSIC" ./compiled || echo "No files found with $CURRENT_VERSION_CLASSIC"
+          grep -rl "$CURRENT_VERSION_CLASSIC" ./compiled | xargs -r sed -i -e "s/$CURRENT_VERSION_CLASSIC/$LAST_VERSION_CLASSIC/g"
+          grep -rl "$CURRENT_VERSION_CLASSIC" ./compiled || echo "Classic version reverted"
+          echo "===================="
+          echo "Reverting $CURRENT_VERSION_MODERN to $LAST_VERSION_MODERN"
+          grep -rl "$CURRENT_VERSION_MODERN" ./compiled || echo "No files found with $CURRENT_VERSION_MODERN"
+          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 if only the REVISION file has changed
         id: check_should_commit
         run: |
-          if git status --porcelain | grep -qv '/REVISION$'; then
+          echo "Full git status"
+          git status
+          echo "===================="
+          if git status --porcelain | grep -qv '/REVISION'; then
+            echo "Changes detected"
             echo "should_commit=true" >> "$GITHUB_OUTPUT"
           else
+            echo "No Changes detected"
             echo "should_commit=false" >> "$GITHUB_OUTPUT"
           fi
+      - name: Re-apply version changes
+        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 }}
+          LAST_VERSION_CLASSIC: ${{ needs.download_artifacts.outputs.last_version_classic }}
+          LAST_VERSION_MODERN: ${{ needs.download_artifacts.outputs.last_version_modern }}
+        run: |
+          echo "Re-applying $LAST_VERSION_CLASSIC to $CURRENT_VERSION_CLASSIC"
+          grep -rl "$LAST_VERSION_CLASSIC" ./compiled || echo "No files found with $LAST_VERSION_CLASSIC"
+          grep -rl "$LAST_VERSION_CLASSIC" ./compiled | xargs -r sed -i -e "s/$LAST_VERSION_CLASSIC/$CURRENT_VERSION_CLASSIC/g"
+          grep -rl "$LAST_VERSION_CLASSIC" ./compiled || echo "Classic version re-applied"
+          echo "===================="
+          echo "Re-applying $LAST_VERSION_MODERN to $CURRENT_VERSION_MODERN"
+          grep -rl "$LAST_VERSION_MODERN" ./compiled || echo "No files found with $LAST_VERSION_MODERN"
+          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: steps.check_should_commit.outputs.should_commit == 'true'
+        run: |
+          echo ":"
+          git status -u
       - name: Commit changes to branch
         if: steps.check_should_commit.outputs.should_commit == 'true'
         uses: stefanzweifel/git-auto-commit-action@v4
@@ -219,20 +307,52 @@ jobs:
         with:
           ref: builds/facebook-fbsource
       - name: Ensure clean directory
-        run: rm -rf compiled
+        run: rm -rf compiled-rn
       - uses: actions/download-artifact@v3
         with:
           name: compiled-rn
           path: compiled-rn/
-      - run: git status -u
+      - name: Revert version changes
+        if: 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 }}
+        run: |
+          echo "Reverting $CURRENT_VERSION to $LAST_VERSION"
+          grep -rl "$CURRENT_VERSION" ./compiled-rn || echo "No files found with $CURRENT_VERSION"
+          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 if only the REVISION file has changed
         id: check_should_commit
         run: |
-          if git status --porcelain | grep -qv '/REVISION$'; then
+          echo "Full git status"
+          git status
+          echo "===================="
+          echo "Checking for changes"
+          # Check if there are changes in the files other than REVISION or @generated headers
+          # We also filter out the file name lines with "---" and "+++".
+          if git diff -- . ':(exclude)*REVISION' | grep -vE "^(@@|diff|index|\-\-\-|\+\+\+|@generated SignedSource)" | grep "^[+-]" > /dev/null; then
+            echo "Changes detected"
             echo "should_commit=true" >> "$GITHUB_OUTPUT"
           else
+            echo "No Changes detected"
             echo "should_commit=false" >> "$GITHUB_OUTPUT"
           fi
+      - name: Re-apply version changes
+        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 }}
+        run: |
+          echo "Re-applying $LAST_VERSION to $CURRENT_VERSION"
+          grep -rl "$LAST_VERSION" ./compiled-rn || echo "No files found with $LAST_VERSION"
+          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: Will commit these changes
+        if: steps.check_should_commit.outputs.should_commit == 'true'
+        run: |
+          echo ":"
+          git status -u
       - name: Commit changes to branch
         if: steps.check_should_commit.outputs.should_commit == 'true'
         uses: stefanzweifel/git-auto-commit-action@v4

ReactVersions.js

@@ -28,6 +28,10 @@ const ReactVersion = '19.0.0';
 // 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.1.0',
   'jest-react': '0.16.0',
@@ -53,6 +57,7 @@ const experimentalPackages = [];
 module.exports = {
   ReactVersion,
   canaryChannelLabel,
+  rcNumber,
   stablePackages,
   experimentalPackages,
 };

compiler/packages/babel-plugin-react-compiler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "babel-plugin-react-compiler",
-  "version": "0.0.0-experimental-487cb0e-20240529",
+  "version": "0.0.0-experimental-938cd9a-20240601",
   "description": "Babel plugin for React Compiler.",
   "main": "dist/index.js",
   "license": "MIT",

compiler/packages/babel-plugin-react-compiler/src/Babel/BabelPlugin.ts

@@ -30,10 +30,16 @@ export default function BabelPluginReactCompiler(
        */
       Program(prog, pass): void {
         let opts = parsePluginOptions(pass.opts);
-        if (pipelineUsesReanimatedPlugin(pass.file.opts.plugins)) {
+        const isDev =
+          (typeof __DEV__ !== "undefined" && __DEV__ === true) ||
+          process.env["NODE_ENV"] === "development";
+        if (
+          opts.enableReanimatedCheck === true &&
+          pipelineUsesReanimatedPlugin(pass.file.opts.plugins)
+        ) {
           opts = injectReanimatedFlag(opts);
         }
-        if (process.env["NODE_ENV"] === "development") {
+        if (isDev) {
           opts = {
             ...opts,
             environment: {

compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts

@@ -111,6 +111,12 @@ export type PluginOptions = {
   ignoreUseNoForget: boolean;
 
   sources?: Array<string> | ((filename: string) => boolean) | null;
+
+  /**
+   * The compiler has customized support for react-native-reanimated, intended as a temporary workaround.
+   * Set this flag (on by default) to automatically check for this library and activate the support.
+   */
+  enableReanimatedCheck: boolean;
 };
 
 const CompilationModeSchema = z.enum([
@@ -188,6 +194,7 @@ export const defaultOptions: PluginOptions = {
   sources: (filename) => {
     return filename.indexOf("node_modules") === -1;
   },
+  enableReanimatedCheck: true,
 } as const;
 
 export function parsePluginOptions(obj: unknown): PluginOptions {

compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts

@@ -91,6 +91,7 @@ import {
   validatePreservedManualMemoization,
   validateUseMemo,
 } from "../Validation";
+import pruneInitializationDependencies from "../ReactiveScopes/PruneInitializationDependencies";
 
 export type CompilerPipelineValue =
   | { kind: "ast"; name: string; value: CodegenFunction }
@@ -147,8 +148,14 @@ function* runWithEnvironment(
   validateContextVariableLValues(hir);
   validateUseMemo(hir);
 
-  dropManualMemoization(hir);
-  yield log({ kind: "hir", name: "DropManualMemoization", value: hir });
+  if (
+    !env.config.enablePreserveExistingManualUseMemo &&
+    !env.config.disableMemoizationForDebugging &&
+    !env.config.enableChangeDetectionForDebugging
+  ) {
+    dropManualMemoization(hir);
+    yield log({ kind: "hir", name: "DropManualMemoization", value: hir });
+  }
 
   inlineImmediatelyInvokedFunctionExpressions(hir);
   yield log({
@@ -373,6 +380,15 @@ function* runWithEnvironment(
     value: reactiveFunction,
   });
 
+  if (env.config.enableChangeDetectionForDebugging != null) {
+    pruneInitializationDependencies(reactiveFunction);
+    yield log({
+      kind: "reactive",
+      name: "PruneInitializationDependencies",
+      value: reactiveFunction,
+    });
+  }
+
   propagateEarlyReturns(reactiveFunction);
   yield log({
     kind: "reactive",

compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts

@@ -421,6 +421,13 @@ export function compileProgram(
       );
       externalFunctions.push(enableEmitHookGuards);
     }
+
+    if (options.environment?.enableChangeDetectionForDebugging != null) {
+      const enableChangeDetectionForDebugging = tryParseExternalFunction(
+        options.environment.enableChangeDetectionForDebugging
+      );
+      externalFunctions.push(enableChangeDetectionForDebugging);
+    }
   } catch (err) {
     handleError(err, pass, null);
     return;

compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts

@@ -124,7 +124,7 @@ export function lower(
     ) {
       const place: Place = {
         kind: "Identifier",
-        identifier: builder.makeTemporary(),
+        identifier: builder.makeTemporary(param.node.loc ?? GeneratedSource),
         effect: Effect.Unknown,
         reactive: false,
         loc: param.node.loc ?? GeneratedSource,
@@ -141,7 +141,7 @@ export function lower(
     } else if (param.isRestElement()) {
       const place: Place = {
         kind: "Identifier",
-        identifier: builder.makeTemporary(),
+        identifier: builder.makeTemporary(param.node.loc ?? GeneratedSource),
         effect: Effect.Unknown,
         reactive: false,
         loc: param.node.loc ?? GeneratedSource,
@@ -1256,7 +1256,9 @@ function lowerStatement(
       if (hasNode(handlerBindingPath)) {
         const place: Place = {
           kind: "Identifier",
-          identifier: builder.makeTemporary(),
+          identifier: builder.makeTemporary(
+            handlerBindingPath.node.loc ?? GeneratedSource
+          ),
           effect: Effect.Unknown,
           reactive: false,
           loc: handlerBindingPath.node.loc ?? GeneratedSource,
@@ -3301,7 +3303,7 @@ function lowerIdentifier(
 function buildTemporaryPlace(builder: HIRBuilder, loc: SourceLocation): Place {
   const place: Place = {
     kind: "Identifier",
-    identifier: builder.makeTemporary(),
+    identifier: builder.makeTemporary(loc),
     effect: Effect.Unknown,
     reactive: false,
     loc,