Mirror of upstream PR #33305

.eslintrc.js

@@ -579,6 +579,7 @@ module.exports = {
     JSONValue: 'readonly',
     JSResourceReference: 'readonly',
     MouseEventHandler: 'readonly',
+    NavigateEvent: 'readonly',
     PropagationPhases: 'readonly',
     PropertyDescriptor: 'readonly',
     React$AbstractComponent: 'readonly',
@@ -634,5 +635,6 @@ module.exports = {
     AsyncLocalStorage: 'readonly',
     async_hooks: 'readonly',
     globalThis: 'readonly',
+    navigation: 'readonly',
   },
 };

.github/workflows/compiler_discord_notify.yml

@@ -15,6 +15,7 @@ jobs:
     outputs:
       is_member_or_collaborator: ${{ steps.check_is_member_or_collaborator.outputs.is_member_or_collaborator }}
     steps:
+      - run: echo ${{ github.event.pull_request.author_association }}
       - name: Check is member or collaborator
         id: check_is_member_or_collaborator
         if: ${{ github.event.pull_request.author_association == 'MEMBER' || github.event.pull_request.author_association == 'COLLABORATOR' }}

.github/workflows/runtime_commit_artifacts.yml

@@ -332,10 +332,10 @@ jobs:
           git --no-pager diff -U0 --cached | grep '^[+-]' | head -n 100
           echo "===================="
           # Ignore REVISION or lines removing @generated headers.
-          if git diff --cached ':(exclude)*REVISION' | grep -vE "^(@@|diff|index|\-\-\-|\+\+\+|\- \* @generated SignedSource)" | grep "^[+-]" > /dev/null; then
+          if git diff --cached ':(exclude)*REVISION' ':(exclude)*/eslint-plugin-react-hooks/package.json' | grep -vE "^(@@|diff|index|\-\-\-|\+\+\+|\- \* @generated SignedSource)" | grep "^[+-]" > /dev/null; then
             echo "Changes detected"
             echo "===== Changes ====="
-            git --no-pager diff --cached ':(exclude)*REVISION' | grep -vE "^(@@|diff|index|\-\-\-|\+\+\+|\- \* @generated SignedSource)" | grep "^[+-]" | head -n 50
+            git --no-pager diff --cached ':(exclude)*REVISION' ':(exclude)*/eslint-plugin-react-hooks/package.json' | grep -vE "^(@@|diff|index|\-\-\-|\+\+\+|\- \* @generated SignedSource)" | grep "^[+-]" | head -n 50
             echo "==================="
             echo "should_commit=true" >> "$GITHUB_OUTPUT"
           else

.github/workflows/runtime_discord_notify.yml

@@ -15,6 +15,7 @@ jobs:
     outputs:
       is_member_or_collaborator: ${{ steps.check_is_member_or_collaborator.outputs.is_member_or_collaborator }}
     steps:
+      - run: echo ${{ github.event.pull_request.author_association }}
       - name: Check is member or collaborator
         id: check_is_member_or_collaborator
         if: ${{ github.event.pull_request.author_association == 'MEMBER' || github.event.pull_request.author_association == 'COLLABORATOR' }}

.github/workflows/shared_label_core_team_prs.yml

@@ -17,6 +17,7 @@ jobs:
     outputs:
       is_member_or_collaborator: ${{ steps.check_is_member_or_collaborator.outputs.is_member_or_collaborator }}
     steps:
+      - run: echo ${{ github.event.pull_request.author_association }}
       - name: Check is member or collaborator
         id: check_is_member_or_collaborator
         if: ${{ github.event.pull_request.author_association == 'MEMBER' || github.event.pull_request.author_association == 'COLLABORATOR' }}

compiler/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 19.1.0-rc.2 (May 14, 2025)
+
+## babel-plugin-react-compiler
+
+* Fix for string attribute values with emoji [#33096](https://github.com/facebook/react/pull/33096) by [@josephsavona](https://github.com/josephsavona)
+
 ## 19.1.0-rc.1 (April 21, 2025)
 
 ## eslint-plugin-react-hooks

compiler/packages/react-mcp-server/src/index.ts

@@ -21,6 +21,7 @@ import {queryAlgolia} from './utils/algolia';
 import assertExhaustive from './utils/assertExhaustive';
 import {convert} from 'html-to-text';
 import {measurePerformance} from './tools/runtimePerf';
+import {parseReactComponentTree} from './tools/componentTree';
 
 function calculateMean(values: number[]): string {
   return values.length > 0
@@ -366,6 +367,38 @@ ${calculateMean(results.renderTime)}
   },
 );
 
+server.tool(
+  'parse-react-component-tree',
+  `
+  This tool gets the component tree of a React App.
+  passing in a url will attempt to connect to the browser and get the current state of the component tree. If no url is passed in,
+  the default url will be used (http://localhost:3000).
+
+  <requirements>
+  - The url should be a full url with the protocol (http:// or https://) and the domain name (e.g. localhost:3000).
+  - Also the user should be running a Chrome browser running on debug mode on port 9222. If you receive an error message, advise the user to run
+  the following comand in the terminal:
+  MacOS: "/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome"
+  Windows: "chrome.exe --remote-debugging-port=9222 --user-data-dir=C:\temp\chrome"
+  </requirements>
+  `,
+  {
+    url: z.string().optional().default('http://localhost:3000'),
+  },
+  async ({url}) => {
+    const componentTree = await parseReactComponentTree(url);
+
+    return {
+      content: [
+        {
+          type: 'text' as const,
+          text: componentTree,
+        },
+      ],
+    };
+  },
+);
+
 server.prompt('review-react-code', () => ({
   messages: [
     {

compiler/packages/react-mcp-server/src/tools/componentTree.ts

@@ -0,0 +1,38 @@
+import puppeteer from 'puppeteer';
+
+export async function parseReactComponentTree(url: string): Promise<string> {
+  try {
+    const browser = await puppeteer.connect({
+      browserURL: 'http://127.0.0.1:9222',
+      defaultViewport: null,
+    });
+
+    const pages = await browser.pages();
+
+    let localhostPage = null;
+    for (const page of pages) {
+      const url = await page.url();
+
+      if (url.startsWith(url)) {
+        localhostPage = page;
+        break;
+      }
+    }
+
+    if (localhostPage) {
+      const componentTree = await localhostPage.evaluate(() => {
+        return (window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__.rendererInterfaces
+          .get(1)
+          .getComponentTree();
+      });
+
+      return componentTree;
+    } else {
+      throw new Error('Localhost page not found');
+    }
+  } catch (error) {
+    throw new Error(
+      'Failed to connect to browser, are you running chrome with --remote-debugging-port=9222?',
+    );
+  }
+}

fixtures/flight/src/actions.js

@@ -2,7 +2,13 @@
 
 import {setServerState} from './ServerState.js';
 
+async function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
 export async function like() {
+  // Test loading state
+  await sleep(1000);
   setServerState('Liked!');
   return new Promise((resolve, reject) => resolve('Liked'));
 }
@@ -20,5 +26,7 @@ export async function greet(formData) {
 }
 
 export async function increment(n) {
+  // Test loading state
+  await sleep(1000);
   return n + 1;
 }

fixtures/view-transition/server/render.js

@@ -23,6 +23,8 @@ export default function render(url, res) {
   const {pipe, abort} = renderToPipeableStream(
     <App assets={assets} initialURL={url} />,
     {
+      // TODO: Temporary hack. Detect from attributes instead.
+      bootstrapScriptContent: 'window._useVT = true;',
       bootstrapScripts: [assets['main.js']],
       onShellReady() {
         // If something errored before we started streaming, we set the error code appropriately.

fixtures/view-transition/src/components/Page.js

@@ -8,6 +8,7 @@ import React, {
   useId,
   useOptimistic,
   startTransition,
+  Suspense,
 } from 'react';
 
 import {createPortal} from 'react-dom';
@@ -18,6 +19,10 @@ import './Page.css';
 
 import transitions from './Transitions.module.css';
 
+async function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
 const a = (
   <div key="a">
     <ViewTransition>
@@ -56,6 +61,12 @@ function Id() {
   return <span id={useId()} />;
 }
 
+let wait;
+function Suspend() {
+  if (!wait) wait = sleep(500);
+  return React.use(wait);
+}
+
 export default function Page({url, navigate}) {
   const [renderedUrl, optimisticNavigate] = useOptimistic(
     url,
@@ -89,7 +100,7 @@ export default function Page({url, navigate}) {
     // a flushSync will.
     // Promise.resolve().then(() => {
     //   flushSync(() => {
-    setCounter(c => c + 10);
+    // setCounter(c => c + 10);
     //  });
     // });
   }, [show]);
@@ -106,7 +117,13 @@ export default function Page({url, navigate}) {
       document.body
     )
   ) : (
-    <button onClick={() => startTransition(() => setShowModal(true))}>
+    <button
+      onClick={() =>
+        startTransition(async () => {
+          await sleep(2000);
+          setShowModal(true);
+        })
+      }>
       Show Modal
     </button>
   );
@@ -183,18 +200,23 @@ export default function Page({url, navigate}) {
                 <div>!!</div>
               </ViewTransition>
             </Activity>
-            <p>these</p>
-            <p>rows</p>
-            <p>exist</p>
-            <p>to</p>
-            <p>test</p>
-            <p>scrolling</p>
-            <p>content</p>
-            <p>out</p>
-            <p>of</p>
-            {portal}
-            <p>the</p>
-            <p>viewport</p>
+            <Suspense fallback="Loading">
+              <ViewTransition>
+                <p>these</p>
+                <p>rows</p>
+                <p>exist</p>
+                <p>to</p>
+                <p>test</p>
+                <p>scrolling</p>
+                <p>content</p>
+                <p>out</p>
+                <p>of</p>
+                {portal}
+                <p>the</p>
+                <p>viewport</p>
+                <Suspend />
+              </ViewTransition>
+            </Suspense>
             {show ? <Component /> : null}
           </div>
         </ViewTransition>

packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js

@@ -7746,6 +7746,34 @@ const testsFlow = {
     },
   ],
   invalid: [
+    {
+      code: normalizeIndent`
+        hook useExample(a) {
+          useEffect(() => {
+            console.log(a);
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'a'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [a]',
+              output: normalizeIndent`
+                hook useExample(a) {
+                  useEffect(() => {
+                    console.log(a);
+                  }, [a]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
     {
       code: normalizeIndent`
       function Foo() {
@@ -8311,7 +8339,9 @@ describe('rules-of-hooks/exhaustive-deps', () => {
     },
   };
 
-  const testsBabelEslint = {
+  const testsBabelEslint = tests;
+
+  const testsHermesParser = {
     valid: [...testsFlow.valid, ...tests.valid],
     invalid: [...testsFlow.invalid, ...tests.invalid],
   };
@@ -8336,6 +8366,33 @@ describe('rules-of-hooks/exhaustive-deps', () => {
     testsBabelEslint
   );
 
+  new ESLintTesterV7({
+    parser: require.resolve('hermes-eslint'),
+    parserOptions: {
+      sourceType: 'module',
+      enableExperimentalComponentSyntax: true,
+    },
+  }).run(
+    'eslint: v7, parser: hermes-eslint',
+    ReactHooksESLintRule,
+    testsHermesParser
+  );
+
+  new ESLintTesterV9({
+    languageOptions: {
+      ...languageOptionsV9,
+      parser: require('hermes-eslint'),
+      parserOptions: {
+        sourceType: 'module',
+        enableExperimentalComponentSyntax: true,
+      },
+    },
+  }).run(
+    'eslint: v9, parser: hermes-eslint',
+    ReactHooksESLintRule,
+    testsHermesParser
+  );
+
   const testsTypescriptEslintParser = {
     valid: [...testsTypescript.valid, ...tests.valid],
     invalid: [...testsTypescript.invalid, ...tests.invalid],