Merge branch 'main' into rm-proptypes

Author: gaearon

.github/workflows/commit_artifacts.yml

@@ -11,7 +11,7 @@ jobs:
       www_branch_count: ${{ steps.check_branches.outputs.www_branch_count }}
       fbsource_branch_count: ${{ steps.check_branches.outputs.fbsource_branch_count }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: "Check branches"
         id: check_branches
         run: |
@@ -179,7 +179,7 @@ jobs:
     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@v3
+      - uses: actions/checkout@v4
         with:
           ref: builds/facebook-www
       - name: Ensure clean directory
@@ -215,7 +215,7 @@ jobs:
     runs-on: ubuntu-latest
     if: ${{ (github.ref == 'refs/heads/main' && needs.download_artifacts.outputs.fbsource_branch_count == '0') || github.ref == 'refs/heads/meta-fbsource' }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           ref: main
           repository: facebook/react-fbsource-import

packages/jest-react/src/JestReact.js

@@ -6,6 +6,7 @@
  */
 
 import {REACT_ELEMENT_TYPE, REACT_FRAGMENT_TYPE} from 'shared/ReactSymbols';
+import {enableRefAsProp} from 'shared/ReactFeatureFlags';
 
 import isArray from 'shared/isArray';
 
@@ -38,6 +39,34 @@ function assertYieldsWereCleared(root) {
   }
 }
 
+function createJSXElementForTestComparison(type, props) {
+  if (__DEV__ && enableRefAsProp) {
+    const element = {
+      $$typeof: REACT_ELEMENT_TYPE,
+      type: type,
+      key: null,
+      props: props,
+      _owner: null,
+      _store: __DEV__ ? {} : undefined,
+    };
+    Object.defineProperty(element, 'ref', {
+      enumerable: false,
+      value: null,
+    });
+    return element;
+  } else {
+    return {
+      $$typeof: REACT_ELEMENT_TYPE,
+      type: type,
+      key: null,
+      ref: null,
+      props: props,
+      _owner: null,
+      _store: __DEV__ ? {} : undefined,
+    };
+  }
+}
+
 export function unstable_toMatchRenderedOutput(root, expectedJSX) {
   assertYieldsWereCleared(root);
   const actualJSON = root.toJSON();
@@ -55,17 +84,9 @@ export function unstable_toMatchRenderedOutput(root, expectedJSX) {
       if (actualJSXChildren === null || typeof actualJSXChildren === 'string') {
         actualJSX = actualJSXChildren;
       } else {
-        actualJSX = {
-          $$typeof: REACT_ELEMENT_TYPE,
-          type: REACT_FRAGMENT_TYPE,
-          key: null,
-          ref: null,
-          props: {
-            children: actualJSXChildren,
-          },
-          _owner: null,
-          _store: __DEV__ ? {} : undefined,
-        };
+        actualJSX = createJSXElementForTestComparison(REACT_FRAGMENT_TYPE, {
+          children: actualJSXChildren,
+        });
       }
     }
   } else {
@@ -82,18 +103,12 @@ function jsonChildToJSXChild(jsonChild) {
     return jsonChild;
   } else {
     const jsxChildren = jsonChildrenToJSXChildren(jsonChild.children);
-    return {
-      $$typeof: REACT_ELEMENT_TYPE,
-      type: jsonChild.type,
-      key: null,
-      ref: null,
-      props:
-        jsxChildren === null
-          ? jsonChild.props
-          : {...jsonChild.props, children: jsxChildren},
-      _owner: null,
-      _store: __DEV__ ? {} : undefined,
-    };
+    return createJSXElementForTestComparison(
+      jsonChild.type,
+      jsxChildren === null
+        ? jsonChild.props
+        : {...jsonChild.props, children: jsxChildren},
+    );
   }
 }
 

packages/react-client/src/ReactFlightClient.js

@@ -35,7 +35,11 @@ import type {
 
 import type {Postpone} from 'react/src/ReactPostpone';
 
-import {enableBinaryFlight, enablePostpone} from 'shared/ReactFeatureFlags';
+import {
+  enableBinaryFlight,
+  enablePostpone,
+  enableRefAsProp,
+} from 'shared/ReactFeatureFlags';
 
 import {
   resolveClientReference,
@@ -463,24 +467,46 @@ export function reportGlobalError(response: Response, error: Error): void {
   });
 }
 
+function nullRefGetter() {
+  if (__DEV__) {
+    return null;
+  }
+}
+
 function createElement(
   type: mixed,
   key: mixed,
   props: mixed,
 ): React$Element<any> {
-  const element: any = {
-    // This tag allows us to uniquely identify this as a React Element
-    $$typeof: REACT_ELEMENT_TYPE,
-
-    // Built-in properties that belong on the element
-    type: type,
-    key: key,
-    ref: null,
-    props: props,
-
-    // Record the component responsible for creating this element.
-    _owner: null,
-  };
+  let element: any;
+  if (__DEV__ && enableRefAsProp) {
+    // `ref` is non-enumerable in dev
+    element = ({
+      $$typeof: REACT_ELEMENT_TYPE,
+      type,
+      key,
+      props,
+      _owner: null,
+    }: any);
+    Object.defineProperty(element, 'ref', {
+      enumerable: false,
+      get: nullRefGetter,
+    });
+  } else {
+    element = ({
+      // This tag allows us to uniquely identify this as a React Element
+      $$typeof: REACT_ELEMENT_TYPE,
+
+      type,
+      key,
+      ref: null,
+      props,
+
+      // Record the component responsible for creating this element.
+      _owner: null,
+    }: any);
+  }
+
   if (__DEV__) {
     // We don't really need to add any of these but keeping them for good measure.
     // Unfortunately, _store is enumerable in jest matchers so for equality to

packages/react-client/src/ReactFlightClientConfigNode.js renamed to packages/react-client/src/ReactFlightClientStreamConfigNode.js

@@ -197,7 +197,7 @@ describe('ReactFlight', () => {
       const rootModel = await ReactNoopFlightClient.read(transport);
       const greeting = rootModel.greeting;
       expect(greeting._debugInfo).toEqual(
-        __DEV__ ? [{name: 'Greeting', env: 'server'}] : undefined,
+        __DEV__ ? [{name: 'Greeting', env: 'Server'}] : undefined,
       );
       ReactNoop.render(greeting);
     });
@@ -224,7 +224,7 @@ describe('ReactFlight', () => {
     await act(async () => {
       const promise = ReactNoopFlightClient.read(transport);
       expect(promise._debugInfo).toEqual(
-        __DEV__ ? [{name: 'Greeting', env: 'server'}] : undefined,
+        __DEV__ ? [{name: 'Greeting', env: 'Server'}] : undefined,
       );
       ReactNoop.render(await promise);
     });
@@ -1970,7 +1970,7 @@ describe('ReactFlight', () => {
     await act(async () => {
       const promise = ReactNoopFlightClient.read(transport);
       expect(promise._debugInfo).toEqual(
-        __DEV__ ? [{name: 'ServerComponent', env: 'server'}] : undefined,
+        __DEV__ ? [{name: 'ServerComponent', env: 'Server'}] : undefined,
       );
       const result = await promise;
       const thirdPartyChildren = await result.props.children[1];

packages/react-client/src/ReactFlightClientConfigBrowser.js renamed to packages/react-client/src/ReactFlightClientStreamConfigWeb.js

@@ -7,7 +7,7 @@
  * @flow
  */
 
-export * from 'react-client/src/ReactFlightClientConfigBrowser';
+export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
 export * from 'react-server-dom-esm/src/ReactFlightClientConfigBundlerESM';
 export * from 'react-server-dom-esm/src/ReactFlightClientConfigTargetESMBrowser';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -7,7 +7,7 @@
  * @flow
  */
 
-export * from 'react-client/src/ReactFlightClientConfigBrowser';
+export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
 export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopack';
 export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopackBrowser';
 export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigTargetTurbopackBrowser';

packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-esm.js

@@ -7,7 +7,7 @@
  * @flow
  */
 
-export * from 'react-client/src/ReactFlightClientConfigBrowser';
+export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
 export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpack';
 export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpackBrowser';
 export * from 'react-server-dom-webpack/src/ReactFlightClientConfigTargetWebpackBrowser';

packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-turbopack.js

@@ -7,7 +7,7 @@
  * @flow
  */
 
-export * from 'react-client/src/ReactFlightClientConfigBrowser';
+export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
 
 export type Response = any;