Make enableRefAsProp www dynamic (#28423)

Going to start rolling this out DiffTrain build for [aaf85f3](aaf85f3)
facebook · Feb 22, 2024 · ec5b61a · ec5b61a
1 parent 52c966b
commit ec5b61a
Show file tree

Hide file tree

Showing 35 changed files with 1,454 additions and 520 deletions.
diff --git a/compiled/facebook-www/JSXDEVRuntime-dev.classic.js b/compiled/facebook-www/JSXDEVRuntime-dev.classic.js
@@ -109,8 +109,8 @@ if (__DEV__) {
 
     var enableDebugTracing = dynamicFeatureFlags.enableDebugTracing,
       enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing,
-      enableRenderableContext = dynamicFeatureFlags.enableRenderableContext;
-    // On WWW, false is used for a new modern build.
+      enableRenderableContext = dynamicFeatureFlags.enableRenderableContext,
+      enableRefAsProp = dynamicFeatureFlags.enableRefAsProp; // On WWW, false is used for a new modern build.
 
     function getWrappedName(outerType, innerType, wrapperName) {
       var displayName = outerType.displayName;
@@ -813,9 +813,11 @@ if (__DEV__) {
     var specialPropKeyWarningShown;
     var specialPropRefWarningShown;
     var didWarnAboutStringRefs;
+    var didWarnAboutElementRef;
 
     {
       didWarnAboutStringRefs = {};
+      didWarnAboutElementRef = {};
     }
 
     function hasValidRef(config) {
@@ -901,7 +903,7 @@ if (__DEV__) {
     }
 
     function defineRefPropWarningGetter(props, displayName) {
-      {
+      if (!enableRefAsProp) {
         {
           var warnAboutAccessingRef = function () {
             if (!specialPropRefWarningShown) {
@@ -925,6 +927,26 @@ if (__DEV__) {
         }
       }
     }
+
+    function elementRefGetterWithDeprecationWarning() {
+      {
+        var componentName = getComponentNameFromType(this.type);
+
+        if (!didWarnAboutElementRef[componentName]) {
+          didWarnAboutElementRef[componentName] = true;
+
+          error(
+            "Accessing element.ref is no longer supported. ref is now a " +
+              "regular prop. It will be removed from the JSX Element " +
+              "type in a future release."
+          );
+        } // An undefined `element.ref` is coerced to `null` for
+        // backwards compatibility.
+
+        var refProp = this.props.ref;
+        return refProp !== undefined ? refProp : null;
+      }
+    }
     /**
      * Factory method to create a new React element. This no longer adheres to
      * the class pattern, so do not use new to call it. Also, instanceof check
@@ -949,13 +971,64 @@ if (__DEV__) {
     function ReactElement(type, key, _ref, self, source, owner, props) {
       var ref;
 
-      {
+      if (enableRefAsProp) {
+        // When enableRefAsProp is on, ignore whatever was passed as the ref
+        // argument and treat `props.ref` as the source of truth. The only thing we
+        // use this for is `element.ref`, which will log a deprecation warning on
+        // access. In the next release, we can remove `element.ref` as well as the
+        // `ref` argument.
+        var refProp = props.ref; // An undefined `element.ref` is coerced to `null` for
+        // backwards compatibility.
+
+        ref = refProp !== undefined ? refProp : null;
+      } else {
         ref = _ref;
       }
 
       var element;
 
-      {
+      if (enableRefAsProp) {
+        // In dev, make `ref` a non-enumerable property with a warning. It's non-
+        // enumerable so that test matchers and serializers don't access it and
+        // trigger the warning.
+        //
+        // `ref` will be removed from the element completely in a future release.
+        element = {
+          // 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,
+          props: props,
+          // Record the component responsible for creating this element.
+          _owner: owner
+        };
+
+        if (ref !== null) {
+          Object.defineProperty(element, "ref", {
+            enumerable: false,
+            get: elementRefGetterWithDeprecationWarning
+          });
+        } else {
+          // Don't warn on access if a ref is not given. This reduces false
+          // positives in cases where a test serializer uses
+          // getOwnPropertyDescriptors to compare objects, like Jest does, which is
+          // a problem because it bypasses non-enumerability.
+          //
+          // So unfortunately this will trigger a false positive warning in Jest
+          // when the diff is printed:
+          //
+          //   expect(<div ref={ref} />).toEqual(<span ref={ref} />);
+          //
+          // A bit sketchy, but this is what we've done for the `props.key` and
+          // `props.ref` accessors for years, which implies it will be good enough
+          // for `element.ref`, too. Let's see if anyone complains.
+          Object.defineProperty(element, "ref", {
+            enumerable: false,
+            value: null
+          });
+        }
+      } else {
         // In prod, `ref` is a regular property. It will be removed in a
         // future release.
         element = {
@@ -1155,7 +1228,7 @@ if (__DEV__) {
         }
 
         if (hasValidRef(config)) {
-          {
+          if (!enableRefAsProp) {
             ref = config.ref;
           }
 
@@ -1166,7 +1239,7 @@ if (__DEV__) {
           if (
             hasOwnProperty.call(config, propName) && // Skip over reserved prop names
             propName !== "key" &&
-            propName !== "ref"
+            (enableRefAsProp || propName !== "ref")
           ) {
             props[propName] = config[propName];
           }
@@ -1182,7 +1255,7 @@ if (__DEV__) {
           }
         }
 
-        if (key || ref) {
+        if (key || (!enableRefAsProp && ref)) {
           var displayName =
             typeof type === "function"
               ? type.displayName || type.name || "Unknown"
@@ -1192,7 +1265,7 @@ if (__DEV__) {
             defineKeyPropWarningGetter(props, displayName);
           }
 
-          if (ref) {
+          if (!enableRefAsProp && ref) {
             defineRefPropWarningGetter(props, displayName);
           }
         }
@@ -1425,7 +1498,7 @@ if (__DEV__) {
           }
         }
 
-        if (fragment.ref !== null) {
+        if (!enableRefAsProp && fragment.ref !== null) {
           setCurrentlyValidatingElement(fragment);
 
           error("Invalid attribute `ref` supplied to `React.Fragment`.");

diff --git a/compiled/facebook-www/JSXDEVRuntime-dev.modern.js b/compiled/facebook-www/JSXDEVRuntime-dev.modern.js
@@ -109,8 +109,8 @@ if (__DEV__) {
 
     var enableDebugTracing = dynamicFeatureFlags.enableDebugTracing,
       enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing,
-      enableRenderableContext = dynamicFeatureFlags.enableRenderableContext;
-    // On WWW, true is used for a new modern build.
+      enableRenderableContext = dynamicFeatureFlags.enableRenderableContext,
+      enableRefAsProp = dynamicFeatureFlags.enableRefAsProp; // On WWW, true is used for a new modern build.
 
     function getWrappedName(outerType, innerType, wrapperName) {
       var displayName = outerType.displayName;
@@ -813,9 +813,11 @@ if (__DEV__) {
     var specialPropKeyWarningShown;
     var specialPropRefWarningShown;
     var didWarnAboutStringRefs;
+    var didWarnAboutElementRef;
 
     {
       didWarnAboutStringRefs = {};
+      didWarnAboutElementRef = {};
     }
 
     function hasValidRef(config) {
@@ -901,7 +903,7 @@ if (__DEV__) {
     }
 
     function defineRefPropWarningGetter(props, displayName) {
-      {
+      if (!enableRefAsProp) {
         {
           var warnAboutAccessingRef = function () {
             if (!specialPropRefWarningShown) {
@@ -925,6 +927,26 @@ if (__DEV__) {
         }
       }
     }
+
+    function elementRefGetterWithDeprecationWarning() {
+      {
+        var componentName = getComponentNameFromType(this.type);
+
+        if (!didWarnAboutElementRef[componentName]) {
+          didWarnAboutElementRef[componentName] = true;
+
+          error(
+            "Accessing element.ref is no longer supported. ref is now a " +
+              "regular prop. It will be removed from the JSX Element " +
+              "type in a future release."
+          );
+        } // An undefined `element.ref` is coerced to `null` for
+        // backwards compatibility.
+
+        var refProp = this.props.ref;
+        return refProp !== undefined ? refProp : null;
+      }
+    }
     /**
      * Factory method to create a new React element. This no longer adheres to
      * the class pattern, so do not use new to call it. Also, instanceof check
@@ -949,13 +971,64 @@ if (__DEV__) {
     function ReactElement(type, key, _ref, self, source, owner, props) {
       var ref;
 
-      {
+      if (enableRefAsProp) {
+        // When enableRefAsProp is on, ignore whatever was passed as the ref
+        // argument and treat `props.ref` as the source of truth. The only thing we
+        // use this for is `element.ref`, which will log a deprecation warning on
+        // access. In the next release, we can remove `element.ref` as well as the
+        // `ref` argument.
+        var refProp = props.ref; // An undefined `element.ref` is coerced to `null` for
+        // backwards compatibility.
+
+        ref = refProp !== undefined ? refProp : null;
+      } else {
         ref = _ref;
       }
 
       var element;
 
-      {
+      if (enableRefAsProp) {
+        // In dev, make `ref` a non-enumerable property with a warning. It's non-
+        // enumerable so that test matchers and serializers don't access it and
+        // trigger the warning.
+        //
+        // `ref` will be removed from the element completely in a future release.
+        element = {
+          // 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,
+          props: props,
+          // Record the component responsible for creating this element.
+          _owner: owner
+        };
+
+        if (ref !== null) {
+          Object.defineProperty(element, "ref", {
+            enumerable: false,
+            get: elementRefGetterWithDeprecationWarning
+          });
+        } else {
+          // Don't warn on access if a ref is not given. This reduces false
+          // positives in cases where a test serializer uses
+          // getOwnPropertyDescriptors to compare objects, like Jest does, which is
+          // a problem because it bypasses non-enumerability.
+          //
+          // So unfortunately this will trigger a false positive warning in Jest
+          // when the diff is printed:
+          //
+          //   expect(<div ref={ref} />).toEqual(<span ref={ref} />);
+          //
+          // A bit sketchy, but this is what we've done for the `props.key` and
+          // `props.ref` accessors for years, which implies it will be good enough
+          // for `element.ref`, too. Let's see if anyone complains.
+          Object.defineProperty(element, "ref", {
+            enumerable: false,
+            value: null
+          });
+        }
+      } else {
         // In prod, `ref` is a regular property. It will be removed in a
         // future release.
         element = {
@@ -1155,7 +1228,7 @@ if (__DEV__) {
         }
 
         if (hasValidRef(config)) {
-          {
+          if (!enableRefAsProp) {
             ref = config.ref;
           }
 
@@ -1166,7 +1239,7 @@ if (__DEV__) {
           if (
             hasOwnProperty.call(config, propName) && // Skip over reserved prop names
             propName !== "key" &&
-            propName !== "ref"
+            (enableRefAsProp || propName !== "ref")
           ) {
             props[propName] = config[propName];
           }
@@ -1182,7 +1255,7 @@ if (__DEV__) {
           }
         }
 
-        if (key || ref) {
+        if (key || (!enableRefAsProp && ref)) {
           var displayName =
             typeof type === "function"
               ? type.displayName || type.name || "Unknown"
@@ -1192,7 +1265,7 @@ if (__DEV__) {
             defineKeyPropWarningGetter(props, displayName);
           }
 
-          if (ref) {
+          if (!enableRefAsProp && ref) {
             defineRefPropWarningGetter(props, displayName);
           }
         }
@@ -1425,7 +1498,7 @@ if (__DEV__) {
           }
         }
 
-        if (fragment.ref !== null) {
+        if (!enableRefAsProp && fragment.ref !== null) {
           setCurrentlyValidatingElement(fragment);
 
           error("Invalid attribute `ref` supplied to `React.Fragment`.");

diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION
@@ -1 +1 @@
-e4b816ba1a1ea7c1874cf3f82dd841830b71341a
+aaf85f3af8c30252edaab5c24975cd086937b2a4
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		e4b816ba1a1ea7c1874cf3f82dd841830b71341a
		aaf85f3af8c30252edaab5c24975cd086937b2a4