[pull] main from facebook:main

compiler/packages/babel-plugin-react-compiler/src/Optimization/InlineJsxTransform.ts

@@ -546,16 +546,14 @@ function createPropsProperties(
   let refProperty: ObjectProperty | undefined;
   let keyProperty: ObjectProperty | undefined;
   const props: Array<ObjectProperty | SpreadPattern> = [];
-  const jsxAttributesWithoutKeyAndRef = propAttributes.filter(
-    p => p.kind === 'JsxAttribute' && p.name !== 'key' && p.name !== 'ref',
+  const jsxAttributesWithoutKey = propAttributes.filter(
+    p => p.kind === 'JsxAttribute' && p.name !== 'key',
   );
   const jsxSpreadAttributes = propAttributes.filter(
     p => p.kind === 'JsxSpreadAttribute',
   );
   const spreadPropsOnly =
-    jsxAttributesWithoutKeyAndRef.length === 0 &&
-    jsxSpreadAttributes.length === 1;
-
+    jsxAttributesWithoutKey.length === 0 && jsxSpreadAttributes.length === 1;
   propAttributes.forEach(prop => {
     switch (prop.kind) {
       case 'JsxAttribute': {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inline-jsx-transform.expect.md

@@ -60,6 +60,10 @@ function ConditionalJsx({shouldWrap}) {
   return content;
 }
 
+function ComponentWithSpreadPropsAndRef({ref, ...other}) {
+  return <Foo ref={ref} {...other} />;
+}
+
 // TODO: Support value blocks
 function TernaryJsx({cond}) {
   return cond ? <div /> : null;
@@ -409,6 +413,41 @@ function ConditionalJsx(t0) {
   return content;
 }
 
+function ComponentWithSpreadPropsAndRef(t0) {
+  const $ = _c2(6);
+  let other;
+  let ref;
+  if ($[0] !== t0) {
+    ({ ref, ...other } = t0);
+    $[0] = t0;
+    $[1] = other;
+    $[2] = ref;
+  } else {
+    other = $[1];
+    ref = $[2];
+  }
+  let t1;
+  if ($[3] !== other || $[4] !== ref) {
+    if (DEV) {
+      t1 = <Foo ref={ref} {...other} />;
+    } else {
+      t1 = {
+        $$typeof: Symbol.for("react.transitional.element"),
+        type: Foo,
+        ref: ref,
+        key: null,
+        props: { ref: ref, ...other },
+      };
+    }
+    $[3] = other;
+    $[4] = ref;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  return t1;
+}
+
 // TODO: Support value blocks
 function TernaryJsx(t0) {
   const $ = _c2(2);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inline-jsx-transform.js

@@ -56,6 +56,10 @@ function ConditionalJsx({shouldWrap}) {
   return content;
 }
 
+function ComponentWithSpreadPropsAndRef({ref, ...other}) {
+  return <Foo ref={ref} {...other} />;
+}
+
 // TODO: Support value blocks
 function TernaryJsx({cond}) {
   return cond ? <div /> : null;

fixtures/flight/server/region.js

@@ -106,7 +106,7 @@ async function renderApp(res, returnValue, formState) {
 }
 
 async function prerenderApp(res, returnValue, formState) {
-  const {prerenderToNodeStream} = await import(
+  const {unstable_prerenderToNodeStream: prerenderToNodeStream} = await import(
     'react-server-dom-webpack/static'
   );
   // const m = require('../src/App.js');

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

@@ -550,6 +550,18 @@ const tests = {
       // TODO: this should error but doesn't.
       // errors: [genericError('useState')],
     },
+    {
+      code: normalizeIndent`
+        // Valid because the hook is outside of the loop
+        const Component = () => {
+          const [state, setState] = useState(0);
+          for (let i = 0; i < 10; i++) {
+            console.log(i);
+          }
+          return <div></div>;
+        };
+      `,
+    },
   ],
   invalid: [
     {

packages/eslint-plugin-react-hooks/src/RulesOfHooks.js

@@ -100,6 +100,16 @@ function isInsideComponentOrHook(node) {
   return false;
 }
 
+function isInsideDoWhileLoop(node) {
+  while (node) {
+    if (node.type === 'DoWhileStatement') {
+      return true;
+    }
+    node = node.parent;
+  }
+  return false;
+}
+
 function isUseEffectEventIdentifier(node) {
   if (__EXPERIMENTAL__) {
     return node.type === 'Identifier' && node.name === 'useEffectEvent';
@@ -295,7 +305,7 @@ export default {
           if (pathList.has(segment.id)) {
             const pathArray = Array.from(pathList);
             const cyclicSegments = pathArray.slice(
-              pathArray.indexOf(segment.id) - 1,
+              pathArray.indexOf(segment.id) + 1,
             );
             for (const cyclicSegment of cyclicSegments) {
               cyclic.add(cyclicSegment);
@@ -485,7 +495,10 @@ export default {
           for (const hook of reactHooks) {
             // Report an error if a hook may be called more then once.
             // `use(...)` can be called in loops.
-            if (cycled && !isUseIdentifier(hook)) {
+            if (
+              (cycled || isInsideDoWhileLoop(hook)) &&
+              !isUseIdentifier(hook)
+            ) {
               context.report({
                 node: hook,
                 message:
@@ -520,7 +533,8 @@ export default {
               if (
                 !cycled &&
                 pathsFromStartToEnd !== allPathsFromStartToEnd &&
-                !isUseIdentifier(hook) // `use(...)` can be called conditionally.
+                !isUseIdentifier(hook) && // `use(...)` can be called conditionally.
+                !isInsideDoWhileLoop(hook) // wrapping do/while loops are checked separately.
               ) {
                 const message =
                   `React Hook "${getSource(hook)}" is called ` +

packages/react-server-dom-esm/npm/static.node.js

@@ -7,6 +7,6 @@ if (process.env.NODE_ENV === 'production') {
   s = require('./cjs/react-server-dom-esm-server.node.development.js');
 }
 
-if (s.prerenderToNodeStream) {
-  exports.prerenderToNodeStream = s.prerenderToNodeStream;
+if (s.unstable_prerenderToNodeStream) {
+  exports.unstable_prerenderToNodeStream = s.unstable_prerenderToNodeStream;
 }

packages/react-server-dom-esm/src/server/react-flight-dom-server.node.js

@@ -9,7 +9,7 @@
 
 export {
   renderToPipeableStream,
-  prerenderToNodeStream,
+  prerenderToNodeStream as unstable_prerenderToNodeStream,
   decodeReplyFromBusboy,
   decodeReply,
   decodeAction,

packages/react-server-dom-esm/src/server/react-flight-dom-server.node.stable.js

@@ -9,6 +9,7 @@
 
 export {
   renderToPipeableStream,
+  prerenderToNodeStream as unstable_prerenderToNodeStream,
   decodeReplyFromBusboy,
   decodeReply,
   decodeAction,

packages/react-server-dom-esm/static.node.js

@@ -7,4 +7,4 @@
  * @flow
  */
 
-export {prerenderToNodeStream} from './src/server/react-flight-dom-server.node';
+export {unstable_prerenderToNodeStream} from './src/server/react-flight-dom-server.node';

packages/react-server-dom-turbopack/npm/static.browser.js

@@ -7,6 +7,6 @@ if (process.env.NODE_ENV === 'production') {
   s = require('./cjs/react-server-dom-turbopack-server.browser.development.js');
 }
 
-if (s.prerender) {
-  exports.prerender = s.prerender;
+if (s.unstable_prerender) {
+  exports.unstable_prerender = s.unstable_prerender;
 }

packages/react-server-dom-turbopack/npm/static.edge.js

@@ -7,6 +7,6 @@ if (process.env.NODE_ENV === 'production') {
   s = require('./cjs/react-server-dom-turbopack-server.edge.development.js');
 }
 
-if (s.prerender) {
-  exports.prerender = s.prerender;
+if (s.unstable_prerender) {
+  exports.unstable_prerender = s.unstable_prerender;
 }

packages/react-server-dom-turbopack/npm/static.node.js

@@ -7,6 +7,6 @@ if (process.env.NODE_ENV === 'production') {
   s = require('./cjs/react-server-dom-turbopack-server.node.development.js');
 }
 
-if (s.prerenderToNodeStream) {
-  exports.prerenderToNodeStream = s.prerenderToNodeStream;
+if (s.unstable_prerenderToNodeStream) {
+  exports.unstable_prerenderToNodeStream = s.unstable_prerenderToNodeStream;
 }

packages/react-server-dom-turbopack/src/server/react-flight-dom-server.browser.js

@@ -9,7 +9,7 @@
 
 export {
   renderToReadableStream,
-  prerender,
+  prerender as unstable_prerender,
   decodeReply,
   decodeAction,
   decodeFormState,

packages/react-server-dom-turbopack/src/server/react-flight-dom-server.browser.stable.js

@@ -9,6 +9,7 @@
 
 export {
   renderToReadableStream,
+  prerender as unstable_prerender,
   decodeReply,
   decodeAction,
   decodeFormState,

packages/react-server-dom-turbopack/src/server/react-flight-dom-server.edge.js

@@ -9,7 +9,7 @@
 
 export {
   renderToReadableStream,
-  prerender,
+  prerender as unstable_prerender,
   decodeReply,
   decodeAction,
   decodeFormState,

packages/react-server-dom-turbopack/src/server/react-flight-dom-server.edge.stable.js

@@ -9,6 +9,7 @@
 
 export {
   renderToReadableStream,
+  prerender as unstable_prerender,
   decodeReply,
   decodeAction,
   decodeFormState,

packages/react-server-dom-turbopack/src/server/react-flight-dom-server.node.js

@@ -9,7 +9,7 @@
 
 export {
   renderToPipeableStream,
-  prerenderToNodeStream,
+  prerenderToNodeStream as unstable_prerenderToNodeStream,
   decodeReplyFromBusboy,
   decodeReply,
   decodeAction,

packages/react-server-dom-turbopack/src/server/react-flight-dom-server.node.stable.js

@@ -9,6 +9,7 @@
 
 export {
   renderToPipeableStream,
+  prerenderToNodeStream as unstable_prerenderToNodeStream,
   decodeReplyFromBusboy,
   decodeReply,
   decodeAction,

packages/react-server-dom-turbopack/static.browser.js

@@ -7,4 +7,4 @@
  * @flow
  */
 
-export {prerender} from './src/server/react-flight-dom-server.browser';
+export {unstable_prerender} from './src/server/react-flight-dom-server.browser';

packages/react-server-dom-turbopack/static.edge.js

@@ -7,4 +7,4 @@
  * @flow
  */
 
-export {prerender} from './src/server/react-flight-dom-server.edge';
+export {unstable_prerender} from './src/server/react-flight-dom-server.edge';

packages/react-server-dom-turbopack/static.node.js

@@ -7,4 +7,4 @@
  * @flow
  */
 
-export {prerenderToNodeStream} from './src/server/react-flight-dom-server.node';
+export {unstable_prerenderToNodeStream} from './src/server/react-flight-dom-server.node';

packages/react-server-dom-webpack/npm/static.browser.js

@@ -7,6 +7,6 @@ if (process.env.NODE_ENV === 'production') {
   s = require('./cjs/react-server-dom-webpack-server.browser.development.js');
 }
 
-if (s.prerender) {
-  exports.prerender = s.prerender;
+if (s.unstable_prerender) {
+  exports.unstable_prerender = s.unstable_prerender;
 }

packages/react-server-dom-webpack/npm/static.edge.js

@@ -7,6 +7,6 @@ if (process.env.NODE_ENV === 'production') {
   s = require('./cjs/react-server-dom-webpack-server.edge.development.js');
 }
 
-if (s.prerender) {
-  exports.prerender = s.prerender;
+if (s.unstable_prerender) {
+  exports.unstable_prerender = s.unstable_prerender;
 }

packages/react-server-dom-webpack/npm/static.node.js

@@ -7,6 +7,6 @@ if (process.env.NODE_ENV === 'production') {
   s = require('./cjs/react-server-dom-webpack-server.node.development.js');
 }
 
-if (s.prerenderToNodeStream) {
-  exports.prerenderToNodeStream = s.prerenderToNodeStream;
+if (s.unstable_prerenderToNodeStream) {
+  exports.unstable_prerenderToNodeStream = s.unstable_prerenderToNodeStream;
 }

packages/react-server-dom-webpack/npm/static.node.unbundled.js

@@ -7,6 +7,6 @@ if (process.env.NODE_ENV === 'production') {
   s = require('./cjs/react-server-dom-webpack-server.node.unbundled.development.js');
 }
 
-if (s.prerenderToNodeStream) {
-  exports.prerenderToNodeStream = s.prerenderToNodeStream;
+if (s.unstable_prerenderToNodeStream) {
+  exports.unstable_prerenderToNodeStream = s.unstable_prerenderToNodeStream;
 }