From acca79dd0dbbde601eda83342ba3ff5762f68106 Mon Sep 17 00:00:00 2001 From: acdlite Date: Wed, 21 Feb 2024 16:46:45 +0000 Subject: [PATCH] Convert string ref props to callback props (#28398) When enableRefAsProp is on, we should always use the props as the source of truth for refs. Not a field on the fiber. In the case of string refs, this presents a problem, because string refs are not passed around internally as strings; they are converted to callback refs. The ref used by the reconciler is not the same as the one the user provided. But since this is a deprecated feature anyway, what we can do is clone the props object and replace it with the internal callback ref. Then we can continue to use the props object as the source of truth. This means the internal callback ref will leak into userspace. The receiving component will receive a callback ref even though the parent passed a string. Which is weird, but again, this is a deprecated feature, and we're only leaving it around behind a flag so that Meta can keep using string refs temporarily while they finish migrating their codebase. DiffTrain build for [dc30644ca77e52a2760e81fbdbcfbd2f2fd4979c](https://github.com/facebook/react/commit/dc30644ca77e52a2760e81fbdbcfbd2f2fd4979c) --- compiled/facebook-www/REVISION | 2 +- compiled/facebook-www/React-prod.classic.js | 2 +- .../facebook-www/React-profiling.classic.js | 2 +- compiled/facebook-www/ReactART-dev.classic.js | 239 +++++++++--------- compiled/facebook-www/ReactART-dev.modern.js | 239 +++++++++--------- .../facebook-www/ReactART-prod.classic.js | 93 ++++--- compiled/facebook-www/ReactART-prod.modern.js | 93 ++++--- compiled/facebook-www/ReactDOM-dev.classic.js | 239 +++++++++--------- compiled/facebook-www/ReactDOM-dev.modern.js | 239 +++++++++--------- .../facebook-www/ReactDOM-prod.classic.js | 95 ++++--- compiled/facebook-www/ReactDOM-prod.modern.js | 95 ++++--- .../ReactDOM-profiling.classic.js | 95 ++++--- .../facebook-www/ReactDOM-profiling.modern.js | 95 ++++--- .../ReactDOMTesting-dev.classic.js | 239 +++++++++--------- .../ReactDOMTesting-dev.modern.js | 239 +++++++++--------- .../ReactDOMTesting-prod.classic.js | 95 ++++--- .../ReactDOMTesting-prod.modern.js | 95 ++++--- .../ReactTestRenderer-dev.classic.js | 239 +++++++++--------- .../ReactTestRenderer-dev.modern.js | 239 +++++++++--------- 19 files changed, 1361 insertions(+), 1313 deletions(-) diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION index 73cd7c4dc9..ffc3a20dbd 100644 --- a/compiled/facebook-www/REVISION +++ b/compiled/facebook-www/REVISION @@ -1 +1 @@ -353ecd05160a318a3f75260ee7906fd12e05cb9d +dc30644ca77e52a2760e81fbdbcfbd2f2fd4979c diff --git a/compiled/facebook-www/React-prod.classic.js b/compiled/facebook-www/React-prod.classic.js index fd62fb7bd0..750c2b12d9 100644 --- a/compiled/facebook-www/React-prod.classic.js +++ b/compiled/facebook-www/React-prod.classic.js @@ -628,4 +628,4 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "18.3.0-www-classic-a3d0776b"; +exports.version = "18.3.0-www-classic-9dbcb358"; diff --git a/compiled/facebook-www/React-profiling.classic.js b/compiled/facebook-www/React-profiling.classic.js index 2878b0bba8..c4e3e24c47 100644 --- a/compiled/facebook-www/React-profiling.classic.js +++ b/compiled/facebook-www/React-profiling.classic.js @@ -632,7 +632,7 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "18.3.0-www-classic-3d32b702"; +exports.version = "18.3.0-www-classic-1cd2cf0b"; "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && diff --git a/compiled/facebook-www/ReactART-dev.classic.js b/compiled/facebook-www/ReactART-dev.classic.js index 9e4283f4e9..af733f64a4 100644 --- a/compiled/facebook-www/ReactART-dev.classic.js +++ b/compiled/facebook-www/ReactART-dev.classic.js @@ -66,7 +66,7 @@ if (__DEV__) { return self; } - var ReactVersion = "18.3.0-www-classic-cd924c55"; + var ReactVersion = "18.3.0-www-classic-cbef9601"; var LegacyRoot = 0; var ConcurrentRoot = 1; @@ -6352,7 +6352,110 @@ if (__DEV__) { return trackUsedThenable(thenableState$1, thenable, index); } - function coerceRef(returnFiber, current, element) { + function convertStringRefToCallbackRef( + returnFiber, + current, + element, + mixedRef + ) { + var owner = element._owner; + + if (!owner) { + if (typeof mixedRef !== "string") { + throw new Error( + "Expected ref to be a function, a string, an object returned by React.createRef(), or null." + ); + } + + throw new Error( + "Element ref was specified as a string (" + + mixedRef + + ") but no owner was set. This could happen for one of" + + " the following reasons:\n" + + "1. You may be adding a ref to a function component\n" + + "2. You may be adding a ref to a component that was not created inside a component's render method\n" + + "3. You have multiple copies of React loaded\n" + + "See https://reactjs.org/link/refs-must-have-owner for more information." + ); + } + + if (owner.tag !== ClassComponent) { + throw new Error( + "Function components cannot have string refs. " + + "We recommend using useRef() instead. " + + "Learn more about using refs safely here: " + + "https://reactjs.org/link/strict-mode-string-ref" + ); + } // At this point, we know the ref isn't an object or function but it could + // be a number. Coerce it to a string. + + { + checkPropStringCoercion(mixedRef, "ref"); + } + + var stringRef = "" + mixedRef; + + { + if ( + // Will already warn with "Function components cannot be given refs" + !(typeof element.type === "function" && !isReactClass(element.type)) + ) { + var componentName = + getComponentNameFromFiber(returnFiber) || "Component"; + + if (!didWarnAboutStringRefs[componentName]) { + error( + 'Component "%s" contains the string ref "%s". Support for string refs ' + + "will be removed in a future major release. We recommend using " + + "useRef() or createRef() instead. " + + "Learn more about using refs safely here: " + + "https://reactjs.org/link/strict-mode-string-ref", + componentName, + stringRef + ); + + didWarnAboutStringRefs[componentName] = true; + } + } + } + + var inst = owner.stateNode; + + if (!inst) { + throw new Error( + "Missing owner for string ref " + + stringRef + + ". This error is likely caused by a " + + "bug in React. Please file an issue." + ); + } // Check if previous string ref matches new string ref + + if ( + current !== null && + current.ref !== null && + typeof current.ref === "function" && + current.ref._stringRef === stringRef + ) { + // Reuse the existing string ref + var currentRef = current.ref; + return currentRef; + } // Create a new string ref + + var ref = function (value) { + var refs = inst.refs; + + if (value === null) { + delete refs[stringRef]; + } else { + refs[stringRef] = value; + } + }; + + ref._stringRef = stringRef; + return ref; + } + + function coerceRef(returnFiber, current, workInProgress, element) { var mixedRef; { @@ -6360,119 +6463,27 @@ if (__DEV__) { mixedRef = element.ref; } + var coercedRef; + if ( mixedRef !== null && typeof mixedRef !== "function" && typeof mixedRef !== "object" ) { - { - if ( - // Will already throw with "Function components cannot have string refs" - !(element._owner && element._owner.tag !== ClassComponent) && // Will already warn with "Function components cannot be given refs" - !( - typeof element.type === "function" && !isReactClass(element.type) - ) && // Will already throw with "Element ref was specified as a string (someStringRef) but no owner was set" - element._owner - ) { - var componentName = - getComponentNameFromFiber(returnFiber) || "Component"; + // Assume this is a string ref. If it's not, then this will throw an error + // to the user. + coercedRef = convertStringRefToCallbackRef( + returnFiber, + current, + element, + mixedRef + ); + } else { + coercedRef = mixedRef; + } // TODO: If enableRefAsProp is on, we shouldn't use the `ref` field. We + // should always read the ref from the prop. - if (!didWarnAboutStringRefs[componentName]) { - error( - 'Component "%s" contains the string ref "%s". Support for string refs ' + - "will be removed in a future major release. We recommend using " + - "useRef() or createRef() instead. " + - "Learn more about using refs safely here: " + - "https://reactjs.org/link/strict-mode-string-ref", - componentName, - mixedRef - ); - - didWarnAboutStringRefs[componentName] = true; - } - } - } - - if (element._owner) { - var owner = element._owner; - var inst; - - if (owner) { - var ownerFiber = owner; - - if (ownerFiber.tag !== ClassComponent) { - throw new Error( - "Function components cannot have string refs. " + - "We recommend using useRef() instead. " + - "Learn more about using refs safely here: " + - "https://reactjs.org/link/strict-mode-string-ref" - ); - } - - inst = ownerFiber.stateNode; - } - - if (!inst) { - throw new Error( - "Missing owner for string ref " + - mixedRef + - ". This error is likely caused by a " + - "bug in React. Please file an issue." - ); - } // Assigning this to a const so Flow knows it won't change in the closure - - var resolvedInst = inst; - - { - checkPropStringCoercion(mixedRef, "ref"); - } - - var stringRef = "" + mixedRef; // Check if previous string ref matches new string ref - - if ( - current !== null && - current.ref !== null && - typeof current.ref === "function" && - current.ref._stringRef === stringRef - ) { - return current.ref; - } - - var ref = function (value) { - var refs = resolvedInst.refs; - - if (value === null) { - delete refs[stringRef]; - } else { - refs[stringRef] = value; - } - }; - - ref._stringRef = stringRef; - return ref; - } else { - if (typeof mixedRef !== "string") { - throw new Error( - "Expected ref to be a function, a string, an object returned by React.createRef(), or null." - ); - } - - if (!element._owner) { - throw new Error( - "Element ref was specified as a string (" + - mixedRef + - ") but no owner was set. This could happen for one of" + - " the following reasons:\n" + - "1. You may be adding a ref to a function component\n" + - "2. You may be adding a ref to a component that was not created inside a component's render method\n" + - "3. You have multiple copies of React loaded\n" + - "See https://reactjs.org/link/refs-must-have-owner for more information." - ); - } - } - } - - return mixedRef; + workInProgress.ref = coercedRef; } function throwOnInvalidObjectType(returnFiber, newChild) { @@ -6728,7 +6739,7 @@ if (__DEV__) { ) { // Move based on index var existing = useFiber(current, element.props); - existing.ref = coerceRef(returnFiber, current, element); + coerceRef(returnFiber, current, existing, element); existing.return = returnFiber; { @@ -6741,7 +6752,7 @@ if (__DEV__) { } // Insert var created = createFiberFromElement(element, returnFiber.mode, lanes); - created.ref = coerceRef(returnFiber, current, element); + coerceRef(returnFiber, current, created, element); created.return = returnFiber; { @@ -6847,7 +6858,7 @@ if (__DEV__) { lanes ); - _created.ref = coerceRef(returnFiber, null, newChild); + coerceRef(returnFiber, null, _created, newChild); _created.return = returnFiber; { @@ -7710,7 +7721,7 @@ if (__DEV__) { var _existing = useFiber(child, element.props); - _existing.ref = coerceRef(returnFiber, child, element); + coerceRef(returnFiber, child, _existing, element); _existing.return = returnFiber; { @@ -7752,7 +7763,7 @@ if (__DEV__) { lanes ); - _created4.ref = coerceRef(returnFiber, currentFirstChild, element); + coerceRef(returnFiber, currentFirstChild, _created4, element); _created4.return = returnFiber; { diff --git a/compiled/facebook-www/ReactART-dev.modern.js b/compiled/facebook-www/ReactART-dev.modern.js index 8de8845953..ba02bf1740 100644 --- a/compiled/facebook-www/ReactART-dev.modern.js +++ b/compiled/facebook-www/ReactART-dev.modern.js @@ -66,7 +66,7 @@ if (__DEV__) { return self; } - var ReactVersion = "18.3.0-www-modern-c07cb883"; + var ReactVersion = "18.3.0-www-modern-40531e1c"; var LegacyRoot = 0; var ConcurrentRoot = 1; @@ -6117,7 +6117,110 @@ if (__DEV__) { return trackUsedThenable(thenableState$1, thenable, index); } - function coerceRef(returnFiber, current, element) { + function convertStringRefToCallbackRef( + returnFiber, + current, + element, + mixedRef + ) { + var owner = element._owner; + + if (!owner) { + if (typeof mixedRef !== "string") { + throw new Error( + "Expected ref to be a function, a string, an object returned by React.createRef(), or null." + ); + } + + throw new Error( + "Element ref was specified as a string (" + + mixedRef + + ") but no owner was set. This could happen for one of" + + " the following reasons:\n" + + "1. You may be adding a ref to a function component\n" + + "2. You may be adding a ref to a component that was not created inside a component's render method\n" + + "3. You have multiple copies of React loaded\n" + + "See https://reactjs.org/link/refs-must-have-owner for more information." + ); + } + + if (owner.tag !== ClassComponent) { + throw new Error( + "Function components cannot have string refs. " + + "We recommend using useRef() instead. " + + "Learn more about using refs safely here: " + + "https://reactjs.org/link/strict-mode-string-ref" + ); + } // At this point, we know the ref isn't an object or function but it could + // be a number. Coerce it to a string. + + { + checkPropStringCoercion(mixedRef, "ref"); + } + + var stringRef = "" + mixedRef; + + { + if ( + // Will already warn with "Function components cannot be given refs" + !(typeof element.type === "function" && !isReactClass(element.type)) + ) { + var componentName = + getComponentNameFromFiber(returnFiber) || "Component"; + + if (!didWarnAboutStringRefs[componentName]) { + error( + 'Component "%s" contains the string ref "%s". Support for string refs ' + + "will be removed in a future major release. We recommend using " + + "useRef() or createRef() instead. " + + "Learn more about using refs safely here: " + + "https://reactjs.org/link/strict-mode-string-ref", + componentName, + stringRef + ); + + didWarnAboutStringRefs[componentName] = true; + } + } + } + + var inst = owner.stateNode; + + if (!inst) { + throw new Error( + "Missing owner for string ref " + + stringRef + + ". This error is likely caused by a " + + "bug in React. Please file an issue." + ); + } // Check if previous string ref matches new string ref + + if ( + current !== null && + current.ref !== null && + typeof current.ref === "function" && + current.ref._stringRef === stringRef + ) { + // Reuse the existing string ref + var currentRef = current.ref; + return currentRef; + } // Create a new string ref + + var ref = function (value) { + var refs = inst.refs; + + if (value === null) { + delete refs[stringRef]; + } else { + refs[stringRef] = value; + } + }; + + ref._stringRef = stringRef; + return ref; + } + + function coerceRef(returnFiber, current, workInProgress, element) { var mixedRef; { @@ -6125,119 +6228,27 @@ if (__DEV__) { mixedRef = element.ref; } + var coercedRef; + if ( mixedRef !== null && typeof mixedRef !== "function" && typeof mixedRef !== "object" ) { - { - if ( - // Will already throw with "Function components cannot have string refs" - !(element._owner && element._owner.tag !== ClassComponent) && // Will already warn with "Function components cannot be given refs" - !( - typeof element.type === "function" && !isReactClass(element.type) - ) && // Will already throw with "Element ref was specified as a string (someStringRef) but no owner was set" - element._owner - ) { - var componentName = - getComponentNameFromFiber(returnFiber) || "Component"; + // Assume this is a string ref. If it's not, then this will throw an error + // to the user. + coercedRef = convertStringRefToCallbackRef( + returnFiber, + current, + element, + mixedRef + ); + } else { + coercedRef = mixedRef; + } // TODO: If enableRefAsProp is on, we shouldn't use the `ref` field. We + // should always read the ref from the prop. - if (!didWarnAboutStringRefs[componentName]) { - error( - 'Component "%s" contains the string ref "%s". Support for string refs ' + - "will be removed in a future major release. We recommend using " + - "useRef() or createRef() instead. " + - "Learn more about using refs safely here: " + - "https://reactjs.org/link/strict-mode-string-ref", - componentName, - mixedRef - ); - - didWarnAboutStringRefs[componentName] = true; - } - } - } - - if (element._owner) { - var owner = element._owner; - var inst; - - if (owner) { - var ownerFiber = owner; - - if (ownerFiber.tag !== ClassComponent) { - throw new Error( - "Function components cannot have string refs. " + - "We recommend using useRef() instead. " + - "Learn more about using refs safely here: " + - "https://reactjs.org/link/strict-mode-string-ref" - ); - } - - inst = ownerFiber.stateNode; - } - - if (!inst) { - throw new Error( - "Missing owner for string ref " + - mixedRef + - ". This error is likely caused by a " + - "bug in React. Please file an issue." - ); - } // Assigning this to a const so Flow knows it won't change in the closure - - var resolvedInst = inst; - - { - checkPropStringCoercion(mixedRef, "ref"); - } - - var stringRef = "" + mixedRef; // Check if previous string ref matches new string ref - - if ( - current !== null && - current.ref !== null && - typeof current.ref === "function" && - current.ref._stringRef === stringRef - ) { - return current.ref; - } - - var ref = function (value) { - var refs = resolvedInst.refs; - - if (value === null) { - delete refs[stringRef]; - } else { - refs[stringRef] = value; - } - }; - - ref._stringRef = stringRef; - return ref; - } else { - if (typeof mixedRef !== "string") { - throw new Error( - "Expected ref to be a function, a string, an object returned by React.createRef(), or null." - ); - } - - if (!element._owner) { - throw new Error( - "Element ref was specified as a string (" + - mixedRef + - ") but no owner was set. This could happen for one of" + - " the following reasons:\n" + - "1. You may be adding a ref to a function component\n" + - "2. You may be adding a ref to a component that was not created inside a component's render method\n" + - "3. You have multiple copies of React loaded\n" + - "See https://reactjs.org/link/refs-must-have-owner for more information." - ); - } - } - } - - return mixedRef; + workInProgress.ref = coercedRef; } function throwOnInvalidObjectType(returnFiber, newChild) { @@ -6493,7 +6504,7 @@ if (__DEV__) { ) { // Move based on index var existing = useFiber(current, element.props); - existing.ref = coerceRef(returnFiber, current, element); + coerceRef(returnFiber, current, existing, element); existing.return = returnFiber; { @@ -6506,7 +6517,7 @@ if (__DEV__) { } // Insert var created = createFiberFromElement(element, returnFiber.mode, lanes); - created.ref = coerceRef(returnFiber, current, element); + coerceRef(returnFiber, current, created, element); created.return = returnFiber; { @@ -6612,7 +6623,7 @@ if (__DEV__) { lanes ); - _created.ref = coerceRef(returnFiber, null, newChild); + coerceRef(returnFiber, null, _created, newChild); _created.return = returnFiber; { @@ -7475,7 +7486,7 @@ if (__DEV__) { var _existing = useFiber(child, element.props); - _existing.ref = coerceRef(returnFiber, child, element); + coerceRef(returnFiber, child, _existing, element); _existing.return = returnFiber; { @@ -7517,7 +7528,7 @@ if (__DEV__) { lanes ); - _created4.ref = coerceRef(returnFiber, currentFirstChild, element); + coerceRef(returnFiber, currentFirstChild, _created4, element); _created4.return = returnFiber; { diff --git a/compiled/facebook-www/ReactART-prod.classic.js b/compiled/facebook-www/ReactART-prod.classic.js index 074272c46d..aa6d947060 100644 --- a/compiled/facebook-www/ReactART-prod.classic.js +++ b/compiled/facebook-www/ReactART-prod.classic.js @@ -1834,41 +1834,44 @@ function unwrapThenable(thenable) { null === thenableState$1 && (thenableState$1 = []); return trackUsedThenable(thenableState$1, thenable, index); } -function coerceRef(returnFiber, current, element) { - returnFiber = element.ref; - if ( - null !== returnFiber && - "function" !== typeof returnFiber && - "object" !== typeof returnFiber - ) { - if (element._owner) { - element = element._owner; - if (element) { - if (1 !== element.tag) throw Error(formatProdErrorMessage(309)); - var inst = element.stateNode; - } - if (!inst) throw Error(formatProdErrorMessage(147, returnFiber)); - var resolvedInst = inst, - stringRef = "" + returnFiber; - if ( - null !== current && - null !== current.ref && - "function" === typeof current.ref && - current.ref._stringRef === stringRef - ) - return current.ref; - current = function (value) { - var refs = resolvedInst.refs; - null === value ? delete refs[stringRef] : (refs[stringRef] = value); - }; - current._stringRef = stringRef; - return current; - } - if ("string" !== typeof returnFiber) - throw Error(formatProdErrorMessage(284)); - if (!element._owner) throw Error(formatProdErrorMessage(290, returnFiber)); +function convertStringRefToCallbackRef( + returnFiber, + current, + element, + mixedRef +) { + function ref(value) { + var refs = inst.refs; + null === value ? delete refs[stringRef] : (refs[stringRef] = value); } - return returnFiber; + returnFiber = element._owner; + if (!returnFiber) { + if ("string" !== typeof mixedRef) throw Error(formatProdErrorMessage(284)); + throw Error(formatProdErrorMessage(290, mixedRef)); + } + if (1 !== returnFiber.tag) throw Error(formatProdErrorMessage(309)); + var stringRef = "" + mixedRef, + inst = returnFiber.stateNode; + if (!inst) throw Error(formatProdErrorMessage(147, stringRef)); + if ( + null !== current && + null !== current.ref && + "function" === typeof current.ref && + current.ref._stringRef === stringRef + ) + return current.ref; + ref._stringRef = stringRef; + return ref; +} +function coerceRef(returnFiber, current, workInProgress, element) { + var mixedRef = element.ref; + returnFiber = + null !== mixedRef && + "function" !== typeof mixedRef && + "object" !== typeof mixedRef + ? convertStringRefToCallbackRef(returnFiber, current, element, mixedRef) + : mixedRef; + workInProgress.ref = returnFiber; } function throwOnInvalidObjectType(returnFiber, newChild) { returnFiber = Object.prototype.toString.call(newChild); @@ -1967,7 +1970,7 @@ function createChildReconciler(shouldTrackSideEffects) { ) return ( (lanes = useFiber(current, element.props)), - (lanes.ref = coerceRef(returnFiber, current, element)), + coerceRef(returnFiber, current, lanes, element), (lanes.return = returnFiber), lanes ); @@ -1979,7 +1982,7 @@ function createChildReconciler(shouldTrackSideEffects) { returnFiber.mode, lanes ); - lanes.ref = coerceRef(returnFiber, current, element); + coerceRef(returnFiber, current, lanes, element); lanes.return = returnFiber; return lanes; } @@ -2041,7 +2044,7 @@ function createChildReconciler(shouldTrackSideEffects) { returnFiber.mode, lanes )), - (lanes.ref = coerceRef(returnFiber, null, newChild)), + coerceRef(returnFiber, null, lanes, newChild), (lanes.return = returnFiber), lanes ); @@ -2403,11 +2406,7 @@ function createChildReconciler(shouldTrackSideEffects) { ) { deleteRemainingChildren(returnFiber, child.sibling); currentFirstChild = useFiber(child, newChild.props); - currentFirstChild.ref = coerceRef( - returnFiber, - child, - newChild - ); + coerceRef(returnFiber, child, currentFirstChild, newChild); currentFirstChild.return = returnFiber; returnFiber = currentFirstChild; break a; @@ -2434,11 +2433,7 @@ function createChildReconciler(shouldTrackSideEffects) { returnFiber.mode, lanes )), - (lanes.ref = coerceRef( - returnFiber, - currentFirstChild, - newChild - )), + coerceRef(returnFiber, currentFirstChild, lanes, newChild), (lanes.return = returnFiber), (returnFiber = lanes)); } @@ -10582,7 +10577,7 @@ var slice = Array.prototype.slice, return null; }, bundleType: 0, - version: "18.3.0-www-classic-9c4f8376", + version: "18.3.0-www-classic-ca1292bb", rendererPackageName: "react-art" }; var internals$jscomp$inline_1320 = { @@ -10613,7 +10608,7 @@ var internals$jscomp$inline_1320 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-9c4f8376" + reconcilerVersion: "18.3.0-www-classic-ca1292bb" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_1321 = __REACT_DEVTOOLS_GLOBAL_HOOK__; diff --git a/compiled/facebook-www/ReactART-prod.modern.js b/compiled/facebook-www/ReactART-prod.modern.js index 95707d3b62..e56a8c2d01 100644 --- a/compiled/facebook-www/ReactART-prod.modern.js +++ b/compiled/facebook-www/ReactART-prod.modern.js @@ -1630,41 +1630,44 @@ function unwrapThenable(thenable) { null === thenableState$1 && (thenableState$1 = []); return trackUsedThenable(thenableState$1, thenable, index); } -function coerceRef(returnFiber, current, element) { - returnFiber = element.ref; - if ( - null !== returnFiber && - "function" !== typeof returnFiber && - "object" !== typeof returnFiber - ) { - if (element._owner) { - element = element._owner; - if (element) { - if (1 !== element.tag) throw Error(formatProdErrorMessage(309)); - var inst = element.stateNode; - } - if (!inst) throw Error(formatProdErrorMessage(147, returnFiber)); - var resolvedInst = inst, - stringRef = "" + returnFiber; - if ( - null !== current && - null !== current.ref && - "function" === typeof current.ref && - current.ref._stringRef === stringRef - ) - return current.ref; - current = function (value) { - var refs = resolvedInst.refs; - null === value ? delete refs[stringRef] : (refs[stringRef] = value); - }; - current._stringRef = stringRef; - return current; - } - if ("string" !== typeof returnFiber) - throw Error(formatProdErrorMessage(284)); - if (!element._owner) throw Error(formatProdErrorMessage(290, returnFiber)); +function convertStringRefToCallbackRef( + returnFiber, + current, + element, + mixedRef +) { + function ref(value) { + var refs = inst.refs; + null === value ? delete refs[stringRef] : (refs[stringRef] = value); } - return returnFiber; + returnFiber = element._owner; + if (!returnFiber) { + if ("string" !== typeof mixedRef) throw Error(formatProdErrorMessage(284)); + throw Error(formatProdErrorMessage(290, mixedRef)); + } + if (1 !== returnFiber.tag) throw Error(formatProdErrorMessage(309)); + var stringRef = "" + mixedRef, + inst = returnFiber.stateNode; + if (!inst) throw Error(formatProdErrorMessage(147, stringRef)); + if ( + null !== current && + null !== current.ref && + "function" === typeof current.ref && + current.ref._stringRef === stringRef + ) + return current.ref; + ref._stringRef = stringRef; + return ref; +} +function coerceRef(returnFiber, current, workInProgress, element) { + var mixedRef = element.ref; + returnFiber = + null !== mixedRef && + "function" !== typeof mixedRef && + "object" !== typeof mixedRef + ? convertStringRefToCallbackRef(returnFiber, current, element, mixedRef) + : mixedRef; + workInProgress.ref = returnFiber; } function throwOnInvalidObjectType(returnFiber, newChild) { returnFiber = Object.prototype.toString.call(newChild); @@ -1763,7 +1766,7 @@ function createChildReconciler(shouldTrackSideEffects) { ) return ( (lanes = useFiber(current, element.props)), - (lanes.ref = coerceRef(returnFiber, current, element)), + coerceRef(returnFiber, current, lanes, element), (lanes.return = returnFiber), lanes ); @@ -1775,7 +1778,7 @@ function createChildReconciler(shouldTrackSideEffects) { returnFiber.mode, lanes ); - lanes.ref = coerceRef(returnFiber, current, element); + coerceRef(returnFiber, current, lanes, element); lanes.return = returnFiber; return lanes; } @@ -1837,7 +1840,7 @@ function createChildReconciler(shouldTrackSideEffects) { returnFiber.mode, lanes )), - (lanes.ref = coerceRef(returnFiber, null, newChild)), + coerceRef(returnFiber, null, lanes, newChild), (lanes.return = returnFiber), lanes ); @@ -2199,11 +2202,7 @@ function createChildReconciler(shouldTrackSideEffects) { ) { deleteRemainingChildren(returnFiber, child.sibling); currentFirstChild = useFiber(child, newChild.props); - currentFirstChild.ref = coerceRef( - returnFiber, - child, - newChild - ); + coerceRef(returnFiber, child, currentFirstChild, newChild); currentFirstChild.return = returnFiber; returnFiber = currentFirstChild; break a; @@ -2230,11 +2229,7 @@ function createChildReconciler(shouldTrackSideEffects) { returnFiber.mode, lanes )), - (lanes.ref = coerceRef( - returnFiber, - currentFirstChild, - newChild - )), + coerceRef(returnFiber, currentFirstChild, lanes, newChild), (lanes.return = returnFiber), (returnFiber = lanes)); } @@ -10237,7 +10232,7 @@ var slice = Array.prototype.slice, return null; }, bundleType: 0, - version: "18.3.0-www-modern-3921cd31", + version: "18.3.0-www-modern-0a467636", rendererPackageName: "react-art" }; var internals$jscomp$inline_1300 = { @@ -10268,7 +10263,7 @@ var internals$jscomp$inline_1300 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-3921cd31" + reconcilerVersion: "18.3.0-www-modern-0a467636" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_1301 = __REACT_DEVTOOLS_GLOBAL_HOOK__; diff --git a/compiled/facebook-www/ReactDOM-dev.classic.js b/compiled/facebook-www/ReactDOM-dev.classic.js index 32739011d1..ff11a56e3c 100644 --- a/compiled/facebook-www/ReactDOM-dev.classic.js +++ b/compiled/facebook-www/ReactDOM-dev.classic.js @@ -10999,7 +10999,110 @@ if (__DEV__) { return trackUsedThenable(thenableState$1, thenable, index); } - function coerceRef(returnFiber, current, element) { + function convertStringRefToCallbackRef( + returnFiber, + current, + element, + mixedRef + ) { + var owner = element._owner; + + if (!owner) { + if (typeof mixedRef !== "string") { + throw new Error( + "Expected ref to be a function, a string, an object returned by React.createRef(), or null." + ); + } + + throw new Error( + "Element ref was specified as a string (" + + mixedRef + + ") but no owner was set. This could happen for one of" + + " the following reasons:\n" + + "1. You may be adding a ref to a function component\n" + + "2. You may be adding a ref to a component that was not created inside a component's render method\n" + + "3. You have multiple copies of React loaded\n" + + "See https://reactjs.org/link/refs-must-have-owner for more information." + ); + } + + if (owner.tag !== ClassComponent) { + throw new Error( + "Function components cannot have string refs. " + + "We recommend using useRef() instead. " + + "Learn more about using refs safely here: " + + "https://reactjs.org/link/strict-mode-string-ref" + ); + } // At this point, we know the ref isn't an object or function but it could + // be a number. Coerce it to a string. + + { + checkPropStringCoercion(mixedRef, "ref"); + } + + var stringRef = "" + mixedRef; + + { + if ( + // Will already warn with "Function components cannot be given refs" + !(typeof element.type === "function" && !isReactClass(element.type)) + ) { + var componentName = + getComponentNameFromFiber(returnFiber) || "Component"; + + if (!didWarnAboutStringRefs[componentName]) { + error( + 'Component "%s" contains the string ref "%s". Support for string refs ' + + "will be removed in a future major release. We recommend using " + + "useRef() or createRef() instead. " + + "Learn more about using refs safely here: " + + "https://reactjs.org/link/strict-mode-string-ref", + componentName, + stringRef + ); + + didWarnAboutStringRefs[componentName] = true; + } + } + } + + var inst = owner.stateNode; + + if (!inst) { + throw new Error( + "Missing owner for string ref " + + stringRef + + ". This error is likely caused by a " + + "bug in React. Please file an issue." + ); + } // Check if previous string ref matches new string ref + + if ( + current !== null && + current.ref !== null && + typeof current.ref === "function" && + current.ref._stringRef === stringRef + ) { + // Reuse the existing string ref + var currentRef = current.ref; + return currentRef; + } // Create a new string ref + + var ref = function (value) { + var refs = inst.refs; + + if (value === null) { + delete refs[stringRef]; + } else { + refs[stringRef] = value; + } + }; + + ref._stringRef = stringRef; + return ref; + } + + function coerceRef(returnFiber, current, workInProgress, element) { var mixedRef; { @@ -11007,119 +11110,27 @@ if (__DEV__) { mixedRef = element.ref; } + var coercedRef; + if ( mixedRef !== null && typeof mixedRef !== "function" && typeof mixedRef !== "object" ) { - { - if ( - // Will already throw with "Function components cannot have string refs" - !(element._owner && element._owner.tag !== ClassComponent) && // Will already warn with "Function components cannot be given refs" - !( - typeof element.type === "function" && !isReactClass(element.type) - ) && // Will already throw with "Element ref was specified as a string (someStringRef) but no owner was set" - element._owner - ) { - var componentName = - getComponentNameFromFiber(returnFiber) || "Component"; + // Assume this is a string ref. If it's not, then this will throw an error + // to the user. + coercedRef = convertStringRefToCallbackRef( + returnFiber, + current, + element, + mixedRef + ); + } else { + coercedRef = mixedRef; + } // TODO: If enableRefAsProp is on, we shouldn't use the `ref` field. We + // should always read the ref from the prop. - if (!didWarnAboutStringRefs[componentName]) { - error( - 'Component "%s" contains the string ref "%s". Support for string refs ' + - "will be removed in a future major release. We recommend using " + - "useRef() or createRef() instead. " + - "Learn more about using refs safely here: " + - "https://reactjs.org/link/strict-mode-string-ref", - componentName, - mixedRef - ); - - didWarnAboutStringRefs[componentName] = true; - } - } - } - - if (element._owner) { - var owner = element._owner; - var inst; - - if (owner) { - var ownerFiber = owner; - - if (ownerFiber.tag !== ClassComponent) { - throw new Error( - "Function components cannot have string refs. " + - "We recommend using useRef() instead. " + - "Learn more about using refs safely here: " + - "https://reactjs.org/link/strict-mode-string-ref" - ); - } - - inst = ownerFiber.stateNode; - } - - if (!inst) { - throw new Error( - "Missing owner for string ref " + - mixedRef + - ". This error is likely caused by a " + - "bug in React. Please file an issue." - ); - } // Assigning this to a const so Flow knows it won't change in the closure - - var resolvedInst = inst; - - { - checkPropStringCoercion(mixedRef, "ref"); - } - - var stringRef = "" + mixedRef; // Check if previous string ref matches new string ref - - if ( - current !== null && - current.ref !== null && - typeof current.ref === "function" && - current.ref._stringRef === stringRef - ) { - return current.ref; - } - - var ref = function (value) { - var refs = resolvedInst.refs; - - if (value === null) { - delete refs[stringRef]; - } else { - refs[stringRef] = value; - } - }; - - ref._stringRef = stringRef; - return ref; - } else { - if (typeof mixedRef !== "string") { - throw new Error( - "Expected ref to be a function, a string, an object returned by React.createRef(), or null." - ); - } - - if (!element._owner) { - throw new Error( - "Element ref was specified as a string (" + - mixedRef + - ") but no owner was set. This could happen for one of" + - " the following reasons:\n" + - "1. You may be adding a ref to a function component\n" + - "2. You may be adding a ref to a component that was not created inside a component's render method\n" + - "3. You have multiple copies of React loaded\n" + - "See https://reactjs.org/link/refs-must-have-owner for more information." - ); - } - } - } - - return mixedRef; + workInProgress.ref = coercedRef; } function throwOnInvalidObjectType(returnFiber, newChild) { @@ -11375,7 +11386,7 @@ if (__DEV__) { ) { // Move based on index var existing = useFiber(current, element.props); - existing.ref = coerceRef(returnFiber, current, element); + coerceRef(returnFiber, current, existing, element); existing.return = returnFiber; { @@ -11388,7 +11399,7 @@ if (__DEV__) { } // Insert var created = createFiberFromElement(element, returnFiber.mode, lanes); - created.ref = coerceRef(returnFiber, current, element); + coerceRef(returnFiber, current, created, element); created.return = returnFiber; { @@ -11494,7 +11505,7 @@ if (__DEV__) { lanes ); - _created.ref = coerceRef(returnFiber, null, newChild); + coerceRef(returnFiber, null, _created, newChild); _created.return = returnFiber; { @@ -12387,7 +12398,7 @@ if (__DEV__) { var _existing = useFiber(child, element.props); - _existing.ref = coerceRef(returnFiber, child, element); + coerceRef(returnFiber, child, _existing, element); _existing.return = returnFiber; { @@ -12429,7 +12440,7 @@ if (__DEV__) { lanes ); - _created4.ref = coerceRef(returnFiber, currentFirstChild, element); + coerceRef(returnFiber, currentFirstChild, _created4, element); _created4.return = returnFiber; { @@ -35883,7 +35894,7 @@ if (__DEV__) { return root; } - var ReactVersion = "18.3.0-www-classic-980f9e96"; + var ReactVersion = "18.3.0-www-classic-034651e2"; function createPortal$1( children, diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js index fa699559b0..c7b66f90f5 100644 --- a/compiled/facebook-www/ReactDOM-dev.modern.js +++ b/compiled/facebook-www/ReactDOM-dev.modern.js @@ -10950,7 +10950,110 @@ if (__DEV__) { return trackUsedThenable(thenableState$1, thenable, index); } - function coerceRef(returnFiber, current, element) { + function convertStringRefToCallbackRef( + returnFiber, + current, + element, + mixedRef + ) { + var owner = element._owner; + + if (!owner) { + if (typeof mixedRef !== "string") { + throw new Error( + "Expected ref to be a function, a string, an object returned by React.createRef(), or null." + ); + } + + throw new Error( + "Element ref was specified as a string (" + + mixedRef + + ") but no owner was set. This could happen for one of" + + " the following reasons:\n" + + "1. You may be adding a ref to a function component\n" + + "2. You may be adding a ref to a component that was not created inside a component's render method\n" + + "3. You have multiple copies of React loaded\n" + + "See https://reactjs.org/link/refs-must-have-owner for more information." + ); + } + + if (owner.tag !== ClassComponent) { + throw new Error( + "Function components cannot have string refs. " + + "We recommend using useRef() instead. " + + "Learn more about using refs safely here: " + + "https://reactjs.org/link/strict-mode-string-ref" + ); + } // At this point, we know the ref isn't an object or function but it could + // be a number. Coerce it to a string. + + { + checkPropStringCoercion(mixedRef, "ref"); + } + + var stringRef = "" + mixedRef; + + { + if ( + // Will already warn with "Function components cannot be given refs" + !(typeof element.type === "function" && !isReactClass(element.type)) + ) { + var componentName = + getComponentNameFromFiber(returnFiber) || "Component"; + + if (!didWarnAboutStringRefs[componentName]) { + error( + 'Component "%s" contains the string ref "%s". Support for string refs ' + + "will be removed in a future major release. We recommend using " + + "useRef() or createRef() instead. " + + "Learn more about using refs safely here: " + + "https://reactjs.org/link/strict-mode-string-ref", + componentName, + stringRef + ); + + didWarnAboutStringRefs[componentName] = true; + } + } + } + + var inst = owner.stateNode; + + if (!inst) { + throw new Error( + "Missing owner for string ref " + + stringRef + + ". This error is likely caused by a " + + "bug in React. Please file an issue." + ); + } // Check if previous string ref matches new string ref + + if ( + current !== null && + current.ref !== null && + typeof current.ref === "function" && + current.ref._stringRef === stringRef + ) { + // Reuse the existing string ref + var currentRef = current.ref; + return currentRef; + } // Create a new string ref + + var ref = function (value) { + var refs = inst.refs; + + if (value === null) { + delete refs[stringRef]; + } else { + refs[stringRef] = value; + } + }; + + ref._stringRef = stringRef; + return ref; + } + + function coerceRef(returnFiber, current, workInProgress, element) { var mixedRef; { @@ -10958,119 +11061,27 @@ if (__DEV__) { mixedRef = element.ref; } + var coercedRef; + if ( mixedRef !== null && typeof mixedRef !== "function" && typeof mixedRef !== "object" ) { - { - if ( - // Will already throw with "Function components cannot have string refs" - !(element._owner && element._owner.tag !== ClassComponent) && // Will already warn with "Function components cannot be given refs" - !( - typeof element.type === "function" && !isReactClass(element.type) - ) && // Will already throw with "Element ref was specified as a string (someStringRef) but no owner was set" - element._owner - ) { - var componentName = - getComponentNameFromFiber(returnFiber) || "Component"; + // Assume this is a string ref. If it's not, then this will throw an error + // to the user. + coercedRef = convertStringRefToCallbackRef( + returnFiber, + current, + element, + mixedRef + ); + } else { + coercedRef = mixedRef; + } // TODO: If enableRefAsProp is on, we shouldn't use the `ref` field. We + // should always read the ref from the prop. - if (!didWarnAboutStringRefs[componentName]) { - error( - 'Component "%s" contains the string ref "%s". Support for string refs ' + - "will be removed in a future major release. We recommend using " + - "useRef() or createRef() instead. " + - "Learn more about using refs safely here: " + - "https://reactjs.org/link/strict-mode-string-ref", - componentName, - mixedRef - ); - - didWarnAboutStringRefs[componentName] = true; - } - } - } - - if (element._owner) { - var owner = element._owner; - var inst; - - if (owner) { - var ownerFiber = owner; - - if (ownerFiber.tag !== ClassComponent) { - throw new Error( - "Function components cannot have string refs. " + - "We recommend using useRef() instead. " + - "Learn more about using refs safely here: " + - "https://reactjs.org/link/strict-mode-string-ref" - ); - } - - inst = ownerFiber.stateNode; - } - - if (!inst) { - throw new Error( - "Missing owner for string ref " + - mixedRef + - ". This error is likely caused by a " + - "bug in React. Please file an issue." - ); - } // Assigning this to a const so Flow knows it won't change in the closure - - var resolvedInst = inst; - - { - checkPropStringCoercion(mixedRef, "ref"); - } - - var stringRef = "" + mixedRef; // Check if previous string ref matches new string ref - - if ( - current !== null && - current.ref !== null && - typeof current.ref === "function" && - current.ref._stringRef === stringRef - ) { - return current.ref; - } - - var ref = function (value) { - var refs = resolvedInst.refs; - - if (value === null) { - delete refs[stringRef]; - } else { - refs[stringRef] = value; - } - }; - - ref._stringRef = stringRef; - return ref; - } else { - if (typeof mixedRef !== "string") { - throw new Error( - "Expected ref to be a function, a string, an object returned by React.createRef(), or null." - ); - } - - if (!element._owner) { - throw new Error( - "Element ref was specified as a string (" + - mixedRef + - ") but no owner was set. This could happen for one of" + - " the following reasons:\n" + - "1. You may be adding a ref to a function component\n" + - "2. You may be adding a ref to a component that was not created inside a component's render method\n" + - "3. You have multiple copies of React loaded\n" + - "See https://reactjs.org/link/refs-must-have-owner for more information." - ); - } - } - } - - return mixedRef; + workInProgress.ref = coercedRef; } function throwOnInvalidObjectType(returnFiber, newChild) { @@ -11326,7 +11337,7 @@ if (__DEV__) { ) { // Move based on index var existing = useFiber(current, element.props); - existing.ref = coerceRef(returnFiber, current, element); + coerceRef(returnFiber, current, existing, element); existing.return = returnFiber; { @@ -11339,7 +11350,7 @@ if (__DEV__) { } // Insert var created = createFiberFromElement(element, returnFiber.mode, lanes); - created.ref = coerceRef(returnFiber, current, element); + coerceRef(returnFiber, current, created, element); created.return = returnFiber; { @@ -11445,7 +11456,7 @@ if (__DEV__) { lanes ); - _created.ref = coerceRef(returnFiber, null, newChild); + coerceRef(returnFiber, null, _created, newChild); _created.return = returnFiber; { @@ -12338,7 +12349,7 @@ if (__DEV__) { var _existing = useFiber(child, element.props); - _existing.ref = coerceRef(returnFiber, child, element); + coerceRef(returnFiber, child, _existing, element); _existing.return = returnFiber; { @@ -12380,7 +12391,7 @@ if (__DEV__) { lanes ); - _created4.ref = coerceRef(returnFiber, currentFirstChild, element); + coerceRef(returnFiber, currentFirstChild, _created4, element); _created4.return = returnFiber; { @@ -35719,7 +35730,7 @@ if (__DEV__) { return root; } - var ReactVersion = "18.3.0-www-modern-ef589452"; + var ReactVersion = "18.3.0-www-modern-2a34a48e"; function createPortal$1( children, diff --git a/compiled/facebook-www/ReactDOM-prod.classic.js b/compiled/facebook-www/ReactDOM-prod.classic.js index 17c0517ca1..84d0b0d3f0 100644 --- a/compiled/facebook-www/ReactDOM-prod.classic.js +++ b/compiled/facebook-www/ReactDOM-prod.classic.js @@ -2565,41 +2565,44 @@ function unwrapThenable(thenable) { null === thenableState$1 && (thenableState$1 = []); return trackUsedThenable(thenableState$1, thenable, index); } -function coerceRef(returnFiber, current, element) { - returnFiber = element.ref; - if ( - null !== returnFiber && - "function" !== typeof returnFiber && - "object" !== typeof returnFiber - ) { - if (element._owner) { - element = element._owner; - if (element) { - if (1 !== element.tag) throw Error(formatProdErrorMessage(309)); - var inst = element.stateNode; - } - if (!inst) throw Error(formatProdErrorMessage(147, returnFiber)); - var resolvedInst = inst, - stringRef = "" + returnFiber; - if ( - null !== current && - null !== current.ref && - "function" === typeof current.ref && - current.ref._stringRef === stringRef - ) - return current.ref; - current = function (value) { - var refs = resolvedInst.refs; - null === value ? delete refs[stringRef] : (refs[stringRef] = value); - }; - current._stringRef = stringRef; - return current; - } - if ("string" !== typeof returnFiber) - throw Error(formatProdErrorMessage(284)); - if (!element._owner) throw Error(formatProdErrorMessage(290, returnFiber)); +function convertStringRefToCallbackRef( + returnFiber, + current, + element, + mixedRef +) { + function ref(value) { + var refs = inst.refs; + null === value ? delete refs[stringRef] : (refs[stringRef] = value); } - return returnFiber; + returnFiber = element._owner; + if (!returnFiber) { + if ("string" !== typeof mixedRef) throw Error(formatProdErrorMessage(284)); + throw Error(formatProdErrorMessage(290, mixedRef)); + } + if (1 !== returnFiber.tag) throw Error(formatProdErrorMessage(309)); + var stringRef = "" + mixedRef, + inst = returnFiber.stateNode; + if (!inst) throw Error(formatProdErrorMessage(147, stringRef)); + if ( + null !== current && + null !== current.ref && + "function" === typeof current.ref && + current.ref._stringRef === stringRef + ) + return current.ref; + ref._stringRef = stringRef; + return ref; +} +function coerceRef(returnFiber, current, workInProgress, element) { + var mixedRef = element.ref; + returnFiber = + null !== mixedRef && + "function" !== typeof mixedRef && + "object" !== typeof mixedRef + ? convertStringRefToCallbackRef(returnFiber, current, element, mixedRef) + : mixedRef; + workInProgress.ref = returnFiber; } function throwOnInvalidObjectType(returnFiber, newChild) { returnFiber = Object.prototype.toString.call(newChild); @@ -2698,7 +2701,7 @@ function createChildReconciler(shouldTrackSideEffects) { ) return ( (lanes = useFiber(current, element.props)), - (lanes.ref = coerceRef(returnFiber, current, element)), + coerceRef(returnFiber, current, lanes, element), (lanes.return = returnFiber), lanes ); @@ -2710,7 +2713,7 @@ function createChildReconciler(shouldTrackSideEffects) { returnFiber.mode, lanes ); - lanes.ref = coerceRef(returnFiber, current, element); + coerceRef(returnFiber, current, lanes, element); lanes.return = returnFiber; return lanes; } @@ -2772,7 +2775,7 @@ function createChildReconciler(shouldTrackSideEffects) { returnFiber.mode, lanes )), - (lanes.ref = coerceRef(returnFiber, null, newChild)), + coerceRef(returnFiber, null, lanes, newChild), (lanes.return = returnFiber), lanes ); @@ -3144,11 +3147,7 @@ function createChildReconciler(shouldTrackSideEffects) { ) { deleteRemainingChildren(returnFiber, child.sibling); currentFirstChild = useFiber(child, newChild.props); - currentFirstChild.ref = coerceRef( - returnFiber, - child, - newChild - ); + coerceRef(returnFiber, child, currentFirstChild, newChild); currentFirstChild.return = returnFiber; returnFiber = currentFirstChild; break a; @@ -3175,11 +3174,7 @@ function createChildReconciler(shouldTrackSideEffects) { returnFiber.mode, lanes )), - (lanes.ref = coerceRef( - returnFiber, - currentFirstChild, - newChild - )), + coerceRef(returnFiber, currentFirstChild, lanes, newChild), (lanes.return = returnFiber), (returnFiber = lanes)); } @@ -17166,7 +17161,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1819 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-1a55b2ac", + version: "18.3.0-www-classic-f06ae05b", rendererPackageName: "react-dom" }; var internals$jscomp$inline_2179 = { @@ -17196,7 +17191,7 @@ var internals$jscomp$inline_2179 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-1a55b2ac" + reconcilerVersion: "18.3.0-www-classic-f06ae05b" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2180 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -17539,4 +17534,4 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); }; -exports.version = "18.3.0-www-classic-1a55b2ac"; +exports.version = "18.3.0-www-classic-f06ae05b"; diff --git a/compiled/facebook-www/ReactDOM-prod.modern.js b/compiled/facebook-www/ReactDOM-prod.modern.js index e341ee0bbd..2e64cda464 100644 --- a/compiled/facebook-www/ReactDOM-prod.modern.js +++ b/compiled/facebook-www/ReactDOM-prod.modern.js @@ -2448,41 +2448,44 @@ function unwrapThenable(thenable) { null === thenableState$1 && (thenableState$1 = []); return trackUsedThenable(thenableState$1, thenable, index); } -function coerceRef(returnFiber, current, element) { - returnFiber = element.ref; - if ( - null !== returnFiber && - "function" !== typeof returnFiber && - "object" !== typeof returnFiber - ) { - if (element._owner) { - element = element._owner; - if (element) { - if (1 !== element.tag) throw Error(formatProdErrorMessage(309)); - var inst = element.stateNode; - } - if (!inst) throw Error(formatProdErrorMessage(147, returnFiber)); - var resolvedInst = inst, - stringRef = "" + returnFiber; - if ( - null !== current && - null !== current.ref && - "function" === typeof current.ref && - current.ref._stringRef === stringRef - ) - return current.ref; - current = function (value) { - var refs = resolvedInst.refs; - null === value ? delete refs[stringRef] : (refs[stringRef] = value); - }; - current._stringRef = stringRef; - return current; - } - if ("string" !== typeof returnFiber) - throw Error(formatProdErrorMessage(284)); - if (!element._owner) throw Error(formatProdErrorMessage(290, returnFiber)); +function convertStringRefToCallbackRef( + returnFiber, + current, + element, + mixedRef +) { + function ref(value) { + var refs = inst.refs; + null === value ? delete refs[stringRef] : (refs[stringRef] = value); } - return returnFiber; + returnFiber = element._owner; + if (!returnFiber) { + if ("string" !== typeof mixedRef) throw Error(formatProdErrorMessage(284)); + throw Error(formatProdErrorMessage(290, mixedRef)); + } + if (1 !== returnFiber.tag) throw Error(formatProdErrorMessage(309)); + var stringRef = "" + mixedRef, + inst = returnFiber.stateNode; + if (!inst) throw Error(formatProdErrorMessage(147, stringRef)); + if ( + null !== current && + null !== current.ref && + "function" === typeof current.ref && + current.ref._stringRef === stringRef + ) + return current.ref; + ref._stringRef = stringRef; + return ref; +} +function coerceRef(returnFiber, current, workInProgress, element) { + var mixedRef = element.ref; + returnFiber = + null !== mixedRef && + "function" !== typeof mixedRef && + "object" !== typeof mixedRef + ? convertStringRefToCallbackRef(returnFiber, current, element, mixedRef) + : mixedRef; + workInProgress.ref = returnFiber; } function throwOnInvalidObjectType(returnFiber, newChild) { returnFiber = Object.prototype.toString.call(newChild); @@ -2581,7 +2584,7 @@ function createChildReconciler(shouldTrackSideEffects) { ) return ( (lanes = useFiber(current, element.props)), - (lanes.ref = coerceRef(returnFiber, current, element)), + coerceRef(returnFiber, current, lanes, element), (lanes.return = returnFiber), lanes ); @@ -2593,7 +2596,7 @@ function createChildReconciler(shouldTrackSideEffects) { returnFiber.mode, lanes ); - lanes.ref = coerceRef(returnFiber, current, element); + coerceRef(returnFiber, current, lanes, element); lanes.return = returnFiber; return lanes; } @@ -2655,7 +2658,7 @@ function createChildReconciler(shouldTrackSideEffects) { returnFiber.mode, lanes )), - (lanes.ref = coerceRef(returnFiber, null, newChild)), + coerceRef(returnFiber, null, lanes, newChild), (lanes.return = returnFiber), lanes ); @@ -3027,11 +3030,7 @@ function createChildReconciler(shouldTrackSideEffects) { ) { deleteRemainingChildren(returnFiber, child.sibling); currentFirstChild = useFiber(child, newChild.props); - currentFirstChild.ref = coerceRef( - returnFiber, - child, - newChild - ); + coerceRef(returnFiber, child, currentFirstChild, newChild); currentFirstChild.return = returnFiber; returnFiber = currentFirstChild; break a; @@ -3058,11 +3057,7 @@ function createChildReconciler(shouldTrackSideEffects) { returnFiber.mode, lanes )), - (lanes.ref = coerceRef( - returnFiber, - currentFirstChild, - newChild - )), + coerceRef(returnFiber, currentFirstChild, lanes, newChild), (lanes.return = returnFiber), (returnFiber = lanes)); } @@ -16682,7 +16677,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1778 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-60607a6e", + version: "18.3.0-www-modern-5cad22af", rendererPackageName: "react-dom" }; var internals$jscomp$inline_2143 = { @@ -16713,7 +16708,7 @@ var internals$jscomp$inline_2143 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-60607a6e" + reconcilerVersion: "18.3.0-www-modern-5cad22af" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2144 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -16984,4 +16979,4 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); }; -exports.version = "18.3.0-www-modern-60607a6e"; +exports.version = "18.3.0-www-modern-5cad22af"; diff --git a/compiled/facebook-www/ReactDOM-profiling.classic.js b/compiled/facebook-www/ReactDOM-profiling.classic.js index be0f81f552..993322419a 100644 --- a/compiled/facebook-www/ReactDOM-profiling.classic.js +++ b/compiled/facebook-www/ReactDOM-profiling.classic.js @@ -2705,41 +2705,44 @@ function unwrapThenable(thenable) { null === thenableState$1 && (thenableState$1 = []); return trackUsedThenable(thenableState$1, thenable, index); } -function coerceRef(returnFiber, current, element) { - returnFiber = element.ref; - if ( - null !== returnFiber && - "function" !== typeof returnFiber && - "object" !== typeof returnFiber - ) { - if (element._owner) { - element = element._owner; - if (element) { - if (1 !== element.tag) throw Error(formatProdErrorMessage(309)); - var inst = element.stateNode; - } - if (!inst) throw Error(formatProdErrorMessage(147, returnFiber)); - var resolvedInst = inst, - stringRef = "" + returnFiber; - if ( - null !== current && - null !== current.ref && - "function" === typeof current.ref && - current.ref._stringRef === stringRef - ) - return current.ref; - current = function (value) { - var refs = resolvedInst.refs; - null === value ? delete refs[stringRef] : (refs[stringRef] = value); - }; - current._stringRef = stringRef; - return current; - } - if ("string" !== typeof returnFiber) - throw Error(formatProdErrorMessage(284)); - if (!element._owner) throw Error(formatProdErrorMessage(290, returnFiber)); +function convertStringRefToCallbackRef( + returnFiber, + current, + element, + mixedRef +) { + function ref(value) { + var refs = inst.refs; + null === value ? delete refs[stringRef] : (refs[stringRef] = value); } - return returnFiber; + returnFiber = element._owner; + if (!returnFiber) { + if ("string" !== typeof mixedRef) throw Error(formatProdErrorMessage(284)); + throw Error(formatProdErrorMessage(290, mixedRef)); + } + if (1 !== returnFiber.tag) throw Error(formatProdErrorMessage(309)); + var stringRef = "" + mixedRef, + inst = returnFiber.stateNode; + if (!inst) throw Error(formatProdErrorMessage(147, stringRef)); + if ( + null !== current && + null !== current.ref && + "function" === typeof current.ref && + current.ref._stringRef === stringRef + ) + return current.ref; + ref._stringRef = stringRef; + return ref; +} +function coerceRef(returnFiber, current, workInProgress, element) { + var mixedRef = element.ref; + returnFiber = + null !== mixedRef && + "function" !== typeof mixedRef && + "object" !== typeof mixedRef + ? convertStringRefToCallbackRef(returnFiber, current, element, mixedRef) + : mixedRef; + workInProgress.ref = returnFiber; } function throwOnInvalidObjectType(returnFiber, newChild) { returnFiber = Object.prototype.toString.call(newChild); @@ -2838,7 +2841,7 @@ function createChildReconciler(shouldTrackSideEffects) { ) return ( (lanes = useFiber(current, element.props)), - (lanes.ref = coerceRef(returnFiber, current, element)), + coerceRef(returnFiber, current, lanes, element), (lanes.return = returnFiber), lanes ); @@ -2850,7 +2853,7 @@ function createChildReconciler(shouldTrackSideEffects) { returnFiber.mode, lanes ); - lanes.ref = coerceRef(returnFiber, current, element); + coerceRef(returnFiber, current, lanes, element); lanes.return = returnFiber; return lanes; } @@ -2912,7 +2915,7 @@ function createChildReconciler(shouldTrackSideEffects) { returnFiber.mode, lanes )), - (lanes.ref = coerceRef(returnFiber, null, newChild)), + coerceRef(returnFiber, null, lanes, newChild), (lanes.return = returnFiber), lanes ); @@ -3284,11 +3287,7 @@ function createChildReconciler(shouldTrackSideEffects) { ) { deleteRemainingChildren(returnFiber, child.sibling); currentFirstChild = useFiber(child, newChild.props); - currentFirstChild.ref = coerceRef( - returnFiber, - child, - newChild - ); + coerceRef(returnFiber, child, currentFirstChild, newChild); currentFirstChild.return = returnFiber; returnFiber = currentFirstChild; break a; @@ -3315,11 +3314,7 @@ function createChildReconciler(shouldTrackSideEffects) { returnFiber.mode, lanes )), - (lanes.ref = coerceRef( - returnFiber, - currentFirstChild, - newChild - )), + coerceRef(returnFiber, currentFirstChild, lanes, newChild), (lanes.return = returnFiber), (returnFiber = lanes)); } @@ -17935,7 +17930,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1904 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-677caf92", + version: "18.3.0-www-classic-5cb27e23", rendererPackageName: "react-dom" }; (function (internals) { @@ -17979,7 +17974,7 @@ var devToolsConfig$jscomp$inline_1904 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-677caf92" + reconcilerVersion: "18.3.0-www-classic-5cb27e23" }); assign(Internals, { ReactBrowserEventEmitter: { @@ -18309,7 +18304,7 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); }; -exports.version = "18.3.0-www-classic-677caf92"; +exports.version = "18.3.0-www-classic-5cb27e23"; "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && diff --git a/compiled/facebook-www/ReactDOM-profiling.modern.js b/compiled/facebook-www/ReactDOM-profiling.modern.js index 01c2d9d894..4806fafe34 100644 --- a/compiled/facebook-www/ReactDOM-profiling.modern.js +++ b/compiled/facebook-www/ReactDOM-profiling.modern.js @@ -2588,41 +2588,44 @@ function unwrapThenable(thenable) { null === thenableState$1 && (thenableState$1 = []); return trackUsedThenable(thenableState$1, thenable, index); } -function coerceRef(returnFiber, current, element) { - returnFiber = element.ref; - if ( - null !== returnFiber && - "function" !== typeof returnFiber && - "object" !== typeof returnFiber - ) { - if (element._owner) { - element = element._owner; - if (element) { - if (1 !== element.tag) throw Error(formatProdErrorMessage(309)); - var inst = element.stateNode; - } - if (!inst) throw Error(formatProdErrorMessage(147, returnFiber)); - var resolvedInst = inst, - stringRef = "" + returnFiber; - if ( - null !== current && - null !== current.ref && - "function" === typeof current.ref && - current.ref._stringRef === stringRef - ) - return current.ref; - current = function (value) { - var refs = resolvedInst.refs; - null === value ? delete refs[stringRef] : (refs[stringRef] = value); - }; - current._stringRef = stringRef; - return current; - } - if ("string" !== typeof returnFiber) - throw Error(formatProdErrorMessage(284)); - if (!element._owner) throw Error(formatProdErrorMessage(290, returnFiber)); +function convertStringRefToCallbackRef( + returnFiber, + current, + element, + mixedRef +) { + function ref(value) { + var refs = inst.refs; + null === value ? delete refs[stringRef] : (refs[stringRef] = value); } - return returnFiber; + returnFiber = element._owner; + if (!returnFiber) { + if ("string" !== typeof mixedRef) throw Error(formatProdErrorMessage(284)); + throw Error(formatProdErrorMessage(290, mixedRef)); + } + if (1 !== returnFiber.tag) throw Error(formatProdErrorMessage(309)); + var stringRef = "" + mixedRef, + inst = returnFiber.stateNode; + if (!inst) throw Error(formatProdErrorMessage(147, stringRef)); + if ( + null !== current && + null !== current.ref && + "function" === typeof current.ref && + current.ref._stringRef === stringRef + ) + return current.ref; + ref._stringRef = stringRef; + return ref; +} +function coerceRef(returnFiber, current, workInProgress, element) { + var mixedRef = element.ref; + returnFiber = + null !== mixedRef && + "function" !== typeof mixedRef && + "object" !== typeof mixedRef + ? convertStringRefToCallbackRef(returnFiber, current, element, mixedRef) + : mixedRef; + workInProgress.ref = returnFiber; } function throwOnInvalidObjectType(returnFiber, newChild) { returnFiber = Object.prototype.toString.call(newChild); @@ -2721,7 +2724,7 @@ function createChildReconciler(shouldTrackSideEffects) { ) return ( (lanes = useFiber(current, element.props)), - (lanes.ref = coerceRef(returnFiber, current, element)), + coerceRef(returnFiber, current, lanes, element), (lanes.return = returnFiber), lanes ); @@ -2733,7 +2736,7 @@ function createChildReconciler(shouldTrackSideEffects) { returnFiber.mode, lanes ); - lanes.ref = coerceRef(returnFiber, current, element); + coerceRef(returnFiber, current, lanes, element); lanes.return = returnFiber; return lanes; } @@ -2795,7 +2798,7 @@ function createChildReconciler(shouldTrackSideEffects) { returnFiber.mode, lanes )), - (lanes.ref = coerceRef(returnFiber, null, newChild)), + coerceRef(returnFiber, null, lanes, newChild), (lanes.return = returnFiber), lanes ); @@ -3167,11 +3170,7 @@ function createChildReconciler(shouldTrackSideEffects) { ) { deleteRemainingChildren(returnFiber, child.sibling); currentFirstChild = useFiber(child, newChild.props); - currentFirstChild.ref = coerceRef( - returnFiber, - child, - newChild - ); + coerceRef(returnFiber, child, currentFirstChild, newChild); currentFirstChild.return = returnFiber; returnFiber = currentFirstChild; break a; @@ -3198,11 +3197,7 @@ function createChildReconciler(shouldTrackSideEffects) { returnFiber.mode, lanes )), - (lanes.ref = coerceRef( - returnFiber, - currentFirstChild, - newChild - )), + coerceRef(returnFiber, currentFirstChild, lanes, newChild), (lanes.return = returnFiber), (returnFiber = lanes)); } @@ -17445,7 +17440,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1863 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-c07cb883", + version: "18.3.0-www-modern-40531e1c", rendererPackageName: "react-dom" }; (function (internals) { @@ -17490,7 +17485,7 @@ var devToolsConfig$jscomp$inline_1863 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-c07cb883" + reconcilerVersion: "18.3.0-www-modern-40531e1c" }); exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals; exports.createPortal = function (children, container) { @@ -17748,7 +17743,7 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); }; -exports.version = "18.3.0-www-modern-c07cb883"; +exports.version = "18.3.0-www-modern-40531e1c"; "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && diff --git a/compiled/facebook-www/ReactDOMTesting-dev.classic.js b/compiled/facebook-www/ReactDOMTesting-dev.classic.js index a4958fde7a..fbab91b047 100644 --- a/compiled/facebook-www/ReactDOMTesting-dev.classic.js +++ b/compiled/facebook-www/ReactDOMTesting-dev.classic.js @@ -11136,7 +11136,110 @@ if (__DEV__) { return trackUsedThenable(thenableState$1, thenable, index); } - function coerceRef(returnFiber, current, element) { + function convertStringRefToCallbackRef( + returnFiber, + current, + element, + mixedRef + ) { + var owner = element._owner; + + if (!owner) { + if (typeof mixedRef !== "string") { + throw new Error( + "Expected ref to be a function, a string, an object returned by React.createRef(), or null." + ); + } + + throw new Error( + "Element ref was specified as a string (" + + mixedRef + + ") but no owner was set. This could happen for one of" + + " the following reasons:\n" + + "1. You may be adding a ref to a function component\n" + + "2. You may be adding a ref to a component that was not created inside a component's render method\n" + + "3. You have multiple copies of React loaded\n" + + "See https://reactjs.org/link/refs-must-have-owner for more information." + ); + } + + if (owner.tag !== ClassComponent) { + throw new Error( + "Function components cannot have string refs. " + + "We recommend using useRef() instead. " + + "Learn more about using refs safely here: " + + "https://reactjs.org/link/strict-mode-string-ref" + ); + } // At this point, we know the ref isn't an object or function but it could + // be a number. Coerce it to a string. + + { + checkPropStringCoercion(mixedRef, "ref"); + } + + var stringRef = "" + mixedRef; + + { + if ( + // Will already warn with "Function components cannot be given refs" + !(typeof element.type === "function" && !isReactClass(element.type)) + ) { + var componentName = + getComponentNameFromFiber(returnFiber) || "Component"; + + if (!didWarnAboutStringRefs[componentName]) { + error( + 'Component "%s" contains the string ref "%s". Support for string refs ' + + "will be removed in a future major release. We recommend using " + + "useRef() or createRef() instead. " + + "Learn more about using refs safely here: " + + "https://reactjs.org/link/strict-mode-string-ref", + componentName, + stringRef + ); + + didWarnAboutStringRefs[componentName] = true; + } + } + } + + var inst = owner.stateNode; + + if (!inst) { + throw new Error( + "Missing owner for string ref " + + stringRef + + ". This error is likely caused by a " + + "bug in React. Please file an issue." + ); + } // Check if previous string ref matches new string ref + + if ( + current !== null && + current.ref !== null && + typeof current.ref === "function" && + current.ref._stringRef === stringRef + ) { + // Reuse the existing string ref + var currentRef = current.ref; + return currentRef; + } // Create a new string ref + + var ref = function (value) { + var refs = inst.refs; + + if (value === null) { + delete refs[stringRef]; + } else { + refs[stringRef] = value; + } + }; + + ref._stringRef = stringRef; + return ref; + } + + function coerceRef(returnFiber, current, workInProgress, element) { var mixedRef; { @@ -11144,119 +11247,27 @@ if (__DEV__) { mixedRef = element.ref; } + var coercedRef; + if ( mixedRef !== null && typeof mixedRef !== "function" && typeof mixedRef !== "object" ) { - { - if ( - // Will already throw with "Function components cannot have string refs" - !(element._owner && element._owner.tag !== ClassComponent) && // Will already warn with "Function components cannot be given refs" - !( - typeof element.type === "function" && !isReactClass(element.type) - ) && // Will already throw with "Element ref was specified as a string (someStringRef) but no owner was set" - element._owner - ) { - var componentName = - getComponentNameFromFiber(returnFiber) || "Component"; + // Assume this is a string ref. If it's not, then this will throw an error + // to the user. + coercedRef = convertStringRefToCallbackRef( + returnFiber, + current, + element, + mixedRef + ); + } else { + coercedRef = mixedRef; + } // TODO: If enableRefAsProp is on, we shouldn't use the `ref` field. We + // should always read the ref from the prop. - if (!didWarnAboutStringRefs[componentName]) { - error( - 'Component "%s" contains the string ref "%s". Support for string refs ' + - "will be removed in a future major release. We recommend using " + - "useRef() or createRef() instead. " + - "Learn more about using refs safely here: " + - "https://reactjs.org/link/strict-mode-string-ref", - componentName, - mixedRef - ); - - didWarnAboutStringRefs[componentName] = true; - } - } - } - - if (element._owner) { - var owner = element._owner; - var inst; - - if (owner) { - var ownerFiber = owner; - - if (ownerFiber.tag !== ClassComponent) { - throw new Error( - "Function components cannot have string refs. " + - "We recommend using useRef() instead. " + - "Learn more about using refs safely here: " + - "https://reactjs.org/link/strict-mode-string-ref" - ); - } - - inst = ownerFiber.stateNode; - } - - if (!inst) { - throw new Error( - "Missing owner for string ref " + - mixedRef + - ". This error is likely caused by a " + - "bug in React. Please file an issue." - ); - } // Assigning this to a const so Flow knows it won't change in the closure - - var resolvedInst = inst; - - { - checkPropStringCoercion(mixedRef, "ref"); - } - - var stringRef = "" + mixedRef; // Check if previous string ref matches new string ref - - if ( - current !== null && - current.ref !== null && - typeof current.ref === "function" && - current.ref._stringRef === stringRef - ) { - return current.ref; - } - - var ref = function (value) { - var refs = resolvedInst.refs; - - if (value === null) { - delete refs[stringRef]; - } else { - refs[stringRef] = value; - } - }; - - ref._stringRef = stringRef; - return ref; - } else { - if (typeof mixedRef !== "string") { - throw new Error( - "Expected ref to be a function, a string, an object returned by React.createRef(), or null." - ); - } - - if (!element._owner) { - throw new Error( - "Element ref was specified as a string (" + - mixedRef + - ") but no owner was set. This could happen for one of" + - " the following reasons:\n" + - "1. You may be adding a ref to a function component\n" + - "2. You may be adding a ref to a component that was not created inside a component's render method\n" + - "3. You have multiple copies of React loaded\n" + - "See https://reactjs.org/link/refs-must-have-owner for more information." - ); - } - } - } - - return mixedRef; + workInProgress.ref = coercedRef; } function throwOnInvalidObjectType(returnFiber, newChild) { @@ -11512,7 +11523,7 @@ if (__DEV__) { ) { // Move based on index var existing = useFiber(current, element.props); - existing.ref = coerceRef(returnFiber, current, element); + coerceRef(returnFiber, current, existing, element); existing.return = returnFiber; { @@ -11525,7 +11536,7 @@ if (__DEV__) { } // Insert var created = createFiberFromElement(element, returnFiber.mode, lanes); - created.ref = coerceRef(returnFiber, current, element); + coerceRef(returnFiber, current, created, element); created.return = returnFiber; { @@ -11631,7 +11642,7 @@ if (__DEV__) { lanes ); - _created.ref = coerceRef(returnFiber, null, newChild); + coerceRef(returnFiber, null, _created, newChild); _created.return = returnFiber; { @@ -12524,7 +12535,7 @@ if (__DEV__) { var _existing = useFiber(child, element.props); - _existing.ref = coerceRef(returnFiber, child, element); + coerceRef(returnFiber, child, _existing, element); _existing.return = returnFiber; { @@ -12566,7 +12577,7 @@ if (__DEV__) { lanes ); - _created4.ref = coerceRef(returnFiber, currentFirstChild, element); + coerceRef(returnFiber, currentFirstChild, _created4, element); _created4.return = returnFiber; { @@ -36507,7 +36518,7 @@ if (__DEV__) { return root; } - var ReactVersion = "18.3.0-www-classic-a3d0776b"; + var ReactVersion = "18.3.0-www-classic-9dbcb358"; function createPortal$1( children, diff --git a/compiled/facebook-www/ReactDOMTesting-dev.modern.js b/compiled/facebook-www/ReactDOMTesting-dev.modern.js index ffad19dca4..5fe6f918e9 100644 --- a/compiled/facebook-www/ReactDOMTesting-dev.modern.js +++ b/compiled/facebook-www/ReactDOMTesting-dev.modern.js @@ -11087,7 +11087,110 @@ if (__DEV__) { return trackUsedThenable(thenableState$1, thenable, index); } - function coerceRef(returnFiber, current, element) { + function convertStringRefToCallbackRef( + returnFiber, + current, + element, + mixedRef + ) { + var owner = element._owner; + + if (!owner) { + if (typeof mixedRef !== "string") { + throw new Error( + "Expected ref to be a function, a string, an object returned by React.createRef(), or null." + ); + } + + throw new Error( + "Element ref was specified as a string (" + + mixedRef + + ") but no owner was set. This could happen for one of" + + " the following reasons:\n" + + "1. You may be adding a ref to a function component\n" + + "2. You may be adding a ref to a component that was not created inside a component's render method\n" + + "3. You have multiple copies of React loaded\n" + + "See https://reactjs.org/link/refs-must-have-owner for more information." + ); + } + + if (owner.tag !== ClassComponent) { + throw new Error( + "Function components cannot have string refs. " + + "We recommend using useRef() instead. " + + "Learn more about using refs safely here: " + + "https://reactjs.org/link/strict-mode-string-ref" + ); + } // At this point, we know the ref isn't an object or function but it could + // be a number. Coerce it to a string. + + { + checkPropStringCoercion(mixedRef, "ref"); + } + + var stringRef = "" + mixedRef; + + { + if ( + // Will already warn with "Function components cannot be given refs" + !(typeof element.type === "function" && !isReactClass(element.type)) + ) { + var componentName = + getComponentNameFromFiber(returnFiber) || "Component"; + + if (!didWarnAboutStringRefs[componentName]) { + error( + 'Component "%s" contains the string ref "%s". Support for string refs ' + + "will be removed in a future major release. We recommend using " + + "useRef() or createRef() instead. " + + "Learn more about using refs safely here: " + + "https://reactjs.org/link/strict-mode-string-ref", + componentName, + stringRef + ); + + didWarnAboutStringRefs[componentName] = true; + } + } + } + + var inst = owner.stateNode; + + if (!inst) { + throw new Error( + "Missing owner for string ref " + + stringRef + + ". This error is likely caused by a " + + "bug in React. Please file an issue." + ); + } // Check if previous string ref matches new string ref + + if ( + current !== null && + current.ref !== null && + typeof current.ref === "function" && + current.ref._stringRef === stringRef + ) { + // Reuse the existing string ref + var currentRef = current.ref; + return currentRef; + } // Create a new string ref + + var ref = function (value) { + var refs = inst.refs; + + if (value === null) { + delete refs[stringRef]; + } else { + refs[stringRef] = value; + } + }; + + ref._stringRef = stringRef; + return ref; + } + + function coerceRef(returnFiber, current, workInProgress, element) { var mixedRef; { @@ -11095,119 +11198,27 @@ if (__DEV__) { mixedRef = element.ref; } + var coercedRef; + if ( mixedRef !== null && typeof mixedRef !== "function" && typeof mixedRef !== "object" ) { - { - if ( - // Will already throw with "Function components cannot have string refs" - !(element._owner && element._owner.tag !== ClassComponent) && // Will already warn with "Function components cannot be given refs" - !( - typeof element.type === "function" && !isReactClass(element.type) - ) && // Will already throw with "Element ref was specified as a string (someStringRef) but no owner was set" - element._owner - ) { - var componentName = - getComponentNameFromFiber(returnFiber) || "Component"; + // Assume this is a string ref. If it's not, then this will throw an error + // to the user. + coercedRef = convertStringRefToCallbackRef( + returnFiber, + current, + element, + mixedRef + ); + } else { + coercedRef = mixedRef; + } // TODO: If enableRefAsProp is on, we shouldn't use the `ref` field. We + // should always read the ref from the prop. - if (!didWarnAboutStringRefs[componentName]) { - error( - 'Component "%s" contains the string ref "%s". Support for string refs ' + - "will be removed in a future major release. We recommend using " + - "useRef() or createRef() instead. " + - "Learn more about using refs safely here: " + - "https://reactjs.org/link/strict-mode-string-ref", - componentName, - mixedRef - ); - - didWarnAboutStringRefs[componentName] = true; - } - } - } - - if (element._owner) { - var owner = element._owner; - var inst; - - if (owner) { - var ownerFiber = owner; - - if (ownerFiber.tag !== ClassComponent) { - throw new Error( - "Function components cannot have string refs. " + - "We recommend using useRef() instead. " + - "Learn more about using refs safely here: " + - "https://reactjs.org/link/strict-mode-string-ref" - ); - } - - inst = ownerFiber.stateNode; - } - - if (!inst) { - throw new Error( - "Missing owner for string ref " + - mixedRef + - ". This error is likely caused by a " + - "bug in React. Please file an issue." - ); - } // Assigning this to a const so Flow knows it won't change in the closure - - var resolvedInst = inst; - - { - checkPropStringCoercion(mixedRef, "ref"); - } - - var stringRef = "" + mixedRef; // Check if previous string ref matches new string ref - - if ( - current !== null && - current.ref !== null && - typeof current.ref === "function" && - current.ref._stringRef === stringRef - ) { - return current.ref; - } - - var ref = function (value) { - var refs = resolvedInst.refs; - - if (value === null) { - delete refs[stringRef]; - } else { - refs[stringRef] = value; - } - }; - - ref._stringRef = stringRef; - return ref; - } else { - if (typeof mixedRef !== "string") { - throw new Error( - "Expected ref to be a function, a string, an object returned by React.createRef(), or null." - ); - } - - if (!element._owner) { - throw new Error( - "Element ref was specified as a string (" + - mixedRef + - ") but no owner was set. This could happen for one of" + - " the following reasons:\n" + - "1. You may be adding a ref to a function component\n" + - "2. You may be adding a ref to a component that was not created inside a component's render method\n" + - "3. You have multiple copies of React loaded\n" + - "See https://reactjs.org/link/refs-must-have-owner for more information." - ); - } - } - } - - return mixedRef; + workInProgress.ref = coercedRef; } function throwOnInvalidObjectType(returnFiber, newChild) { @@ -11463,7 +11474,7 @@ if (__DEV__) { ) { // Move based on index var existing = useFiber(current, element.props); - existing.ref = coerceRef(returnFiber, current, element); + coerceRef(returnFiber, current, existing, element); existing.return = returnFiber; { @@ -11476,7 +11487,7 @@ if (__DEV__) { } // Insert var created = createFiberFromElement(element, returnFiber.mode, lanes); - created.ref = coerceRef(returnFiber, current, element); + coerceRef(returnFiber, current, created, element); created.return = returnFiber; { @@ -11582,7 +11593,7 @@ if (__DEV__) { lanes ); - _created.ref = coerceRef(returnFiber, null, newChild); + coerceRef(returnFiber, null, _created, newChild); _created.return = returnFiber; { @@ -12475,7 +12486,7 @@ if (__DEV__) { var _existing = useFiber(child, element.props); - _existing.ref = coerceRef(returnFiber, child, element); + coerceRef(returnFiber, child, _existing, element); _existing.return = returnFiber; { @@ -12517,7 +12528,7 @@ if (__DEV__) { lanes ); - _created4.ref = coerceRef(returnFiber, currentFirstChild, element); + coerceRef(returnFiber, currentFirstChild, _created4, element); _created4.return = returnFiber; { @@ -36343,7 +36354,7 @@ if (__DEV__) { return root; } - var ReactVersion = "18.3.0-www-modern-0d7edf87"; + var ReactVersion = "18.3.0-www-modern-fe5f7b30"; function createPortal$1( children, diff --git a/compiled/facebook-www/ReactDOMTesting-prod.classic.js b/compiled/facebook-www/ReactDOMTesting-prod.classic.js index 35d8129c05..c0dadbac97 100644 --- a/compiled/facebook-www/ReactDOMTesting-prod.classic.js +++ b/compiled/facebook-www/ReactDOMTesting-prod.classic.js @@ -2651,41 +2651,44 @@ function unwrapThenable(thenable) { null === thenableState$1 && (thenableState$1 = []); return trackUsedThenable(thenableState$1, thenable, index); } -function coerceRef(returnFiber, current, element) { - returnFiber = element.ref; - if ( - null !== returnFiber && - "function" !== typeof returnFiber && - "object" !== typeof returnFiber - ) { - if (element._owner) { - element = element._owner; - if (element) { - if (1 !== element.tag) throw Error(formatProdErrorMessage(309)); - var inst = element.stateNode; - } - if (!inst) throw Error(formatProdErrorMessage(147, returnFiber)); - var resolvedInst = inst, - stringRef = "" + returnFiber; - if ( - null !== current && - null !== current.ref && - "function" === typeof current.ref && - current.ref._stringRef === stringRef - ) - return current.ref; - current = function (value) { - var refs = resolvedInst.refs; - null === value ? delete refs[stringRef] : (refs[stringRef] = value); - }; - current._stringRef = stringRef; - return current; - } - if ("string" !== typeof returnFiber) - throw Error(formatProdErrorMessage(284)); - if (!element._owner) throw Error(formatProdErrorMessage(290, returnFiber)); +function convertStringRefToCallbackRef( + returnFiber, + current, + element, + mixedRef +) { + function ref(value) { + var refs = inst.refs; + null === value ? delete refs[stringRef] : (refs[stringRef] = value); } - return returnFiber; + returnFiber = element._owner; + if (!returnFiber) { + if ("string" !== typeof mixedRef) throw Error(formatProdErrorMessage(284)); + throw Error(formatProdErrorMessage(290, mixedRef)); + } + if (1 !== returnFiber.tag) throw Error(formatProdErrorMessage(309)); + var stringRef = "" + mixedRef, + inst = returnFiber.stateNode; + if (!inst) throw Error(formatProdErrorMessage(147, stringRef)); + if ( + null !== current && + null !== current.ref && + "function" === typeof current.ref && + current.ref._stringRef === stringRef + ) + return current.ref; + ref._stringRef = stringRef; + return ref; +} +function coerceRef(returnFiber, current, workInProgress, element) { + var mixedRef = element.ref; + returnFiber = + null !== mixedRef && + "function" !== typeof mixedRef && + "object" !== typeof mixedRef + ? convertStringRefToCallbackRef(returnFiber, current, element, mixedRef) + : mixedRef; + workInProgress.ref = returnFiber; } function throwOnInvalidObjectType(returnFiber, newChild) { returnFiber = Object.prototype.toString.call(newChild); @@ -2784,7 +2787,7 @@ function createChildReconciler(shouldTrackSideEffects) { ) return ( (lanes = useFiber(current, element.props)), - (lanes.ref = coerceRef(returnFiber, current, element)), + coerceRef(returnFiber, current, lanes, element), (lanes.return = returnFiber), lanes ); @@ -2796,7 +2799,7 @@ function createChildReconciler(shouldTrackSideEffects) { returnFiber.mode, lanes ); - lanes.ref = coerceRef(returnFiber, current, element); + coerceRef(returnFiber, current, lanes, element); lanes.return = returnFiber; return lanes; } @@ -2858,7 +2861,7 @@ function createChildReconciler(shouldTrackSideEffects) { returnFiber.mode, lanes )), - (lanes.ref = coerceRef(returnFiber, null, newChild)), + coerceRef(returnFiber, null, lanes, newChild), (lanes.return = returnFiber), lanes ); @@ -3230,11 +3233,7 @@ function createChildReconciler(shouldTrackSideEffects) { ) { deleteRemainingChildren(returnFiber, child.sibling); currentFirstChild = useFiber(child, newChild.props); - currentFirstChild.ref = coerceRef( - returnFiber, - child, - newChild - ); + coerceRef(returnFiber, child, currentFirstChild, newChild); currentFirstChild.return = returnFiber; returnFiber = currentFirstChild; break a; @@ -3261,11 +3260,7 @@ function createChildReconciler(shouldTrackSideEffects) { returnFiber.mode, lanes )), - (lanes.ref = coerceRef( - returnFiber, - currentFirstChild, - newChild - )), + coerceRef(returnFiber, currentFirstChild, lanes, newChild), (lanes.return = returnFiber), (returnFiber = lanes)); } @@ -17495,7 +17490,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1824 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-3d32b702", + version: "18.3.0-www-classic-1cd2cf0b", rendererPackageName: "react-dom" }; var internals$jscomp$inline_2191 = { @@ -17525,7 +17520,7 @@ var internals$jscomp$inline_2191 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-3d32b702" + reconcilerVersion: "18.3.0-www-classic-1cd2cf0b" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2192 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -18019,4 +18014,4 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); }; -exports.version = "18.3.0-www-classic-3d32b702"; +exports.version = "18.3.0-www-classic-1cd2cf0b"; diff --git a/compiled/facebook-www/ReactDOMTesting-prod.modern.js b/compiled/facebook-www/ReactDOMTesting-prod.modern.js index 1cb0bee3fc..db9338719e 100644 --- a/compiled/facebook-www/ReactDOMTesting-prod.modern.js +++ b/compiled/facebook-www/ReactDOMTesting-prod.modern.js @@ -2595,41 +2595,44 @@ function unwrapThenable(thenable) { null === thenableState$1 && (thenableState$1 = []); return trackUsedThenable(thenableState$1, thenable, index); } -function coerceRef(returnFiber, current, element) { - returnFiber = element.ref; - if ( - null !== returnFiber && - "function" !== typeof returnFiber && - "object" !== typeof returnFiber - ) { - if (element._owner) { - element = element._owner; - if (element) { - if (1 !== element.tag) throw Error(formatProdErrorMessage(309)); - var inst = element.stateNode; - } - if (!inst) throw Error(formatProdErrorMessage(147, returnFiber)); - var resolvedInst = inst, - stringRef = "" + returnFiber; - if ( - null !== current && - null !== current.ref && - "function" === typeof current.ref && - current.ref._stringRef === stringRef - ) - return current.ref; - current = function (value) { - var refs = resolvedInst.refs; - null === value ? delete refs[stringRef] : (refs[stringRef] = value); - }; - current._stringRef = stringRef; - return current; - } - if ("string" !== typeof returnFiber) - throw Error(formatProdErrorMessage(284)); - if (!element._owner) throw Error(formatProdErrorMessage(290, returnFiber)); +function convertStringRefToCallbackRef( + returnFiber, + current, + element, + mixedRef +) { + function ref(value) { + var refs = inst.refs; + null === value ? delete refs[stringRef] : (refs[stringRef] = value); } - return returnFiber; + returnFiber = element._owner; + if (!returnFiber) { + if ("string" !== typeof mixedRef) throw Error(formatProdErrorMessage(284)); + throw Error(formatProdErrorMessage(290, mixedRef)); + } + if (1 !== returnFiber.tag) throw Error(formatProdErrorMessage(309)); + var stringRef = "" + mixedRef, + inst = returnFiber.stateNode; + if (!inst) throw Error(formatProdErrorMessage(147, stringRef)); + if ( + null !== current && + null !== current.ref && + "function" === typeof current.ref && + current.ref._stringRef === stringRef + ) + return current.ref; + ref._stringRef = stringRef; + return ref; +} +function coerceRef(returnFiber, current, workInProgress, element) { + var mixedRef = element.ref; + returnFiber = + null !== mixedRef && + "function" !== typeof mixedRef && + "object" !== typeof mixedRef + ? convertStringRefToCallbackRef(returnFiber, current, element, mixedRef) + : mixedRef; + workInProgress.ref = returnFiber; } function throwOnInvalidObjectType(returnFiber, newChild) { returnFiber = Object.prototype.toString.call(newChild); @@ -2728,7 +2731,7 @@ function createChildReconciler(shouldTrackSideEffects) { ) return ( (lanes = useFiber(current, element.props)), - (lanes.ref = coerceRef(returnFiber, current, element)), + coerceRef(returnFiber, current, lanes, element), (lanes.return = returnFiber), lanes ); @@ -2740,7 +2743,7 @@ function createChildReconciler(shouldTrackSideEffects) { returnFiber.mode, lanes ); - lanes.ref = coerceRef(returnFiber, current, element); + coerceRef(returnFiber, current, lanes, element); lanes.return = returnFiber; return lanes; } @@ -2802,7 +2805,7 @@ function createChildReconciler(shouldTrackSideEffects) { returnFiber.mode, lanes )), - (lanes.ref = coerceRef(returnFiber, null, newChild)), + coerceRef(returnFiber, null, lanes, newChild), (lanes.return = returnFiber), lanes ); @@ -3174,11 +3177,7 @@ function createChildReconciler(shouldTrackSideEffects) { ) { deleteRemainingChildren(returnFiber, child.sibling); currentFirstChild = useFiber(child, newChild.props); - currentFirstChild.ref = coerceRef( - returnFiber, - child, - newChild - ); + coerceRef(returnFiber, child, currentFirstChild, newChild); currentFirstChild.return = returnFiber; returnFiber = currentFirstChild; break a; @@ -3205,11 +3204,7 @@ function createChildReconciler(shouldTrackSideEffects) { returnFiber.mode, lanes )), - (lanes.ref = coerceRef( - returnFiber, - currentFirstChild, - newChild - )), + coerceRef(returnFiber, currentFirstChild, lanes, newChild), (lanes.return = returnFiber), (returnFiber = lanes)); } @@ -17072,7 +17067,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1783 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-89b07437", + version: "18.3.0-www-modern-26b0c901", rendererPackageName: "react-dom" }; var internals$jscomp$inline_2154 = { @@ -17103,7 +17098,7 @@ var internals$jscomp$inline_2154 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-89b07437" + reconcilerVersion: "18.3.0-www-modern-26b0c901" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2155 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -17524,4 +17519,4 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); }; -exports.version = "18.3.0-www-modern-89b07437"; +exports.version = "18.3.0-www-modern-26b0c901"; diff --git a/compiled/facebook-www/ReactTestRenderer-dev.classic.js b/compiled/facebook-www/ReactTestRenderer-dev.classic.js index 0a5f8fdf91..c8c781975c 100644 --- a/compiled/facebook-www/ReactTestRenderer-dev.classic.js +++ b/compiled/facebook-www/ReactTestRenderer-dev.classic.js @@ -5283,7 +5283,110 @@ if (__DEV__) { return trackUsedThenable(thenableState$1, thenable, index); } - function coerceRef(returnFiber, current, element) { + function convertStringRefToCallbackRef( + returnFiber, + current, + element, + mixedRef + ) { + var owner = element._owner; + + if (!owner) { + if (typeof mixedRef !== "string") { + throw new Error( + "Expected ref to be a function, a string, an object returned by React.createRef(), or null." + ); + } + + throw new Error( + "Element ref was specified as a string (" + + mixedRef + + ") but no owner was set. This could happen for one of" + + " the following reasons:\n" + + "1. You may be adding a ref to a function component\n" + + "2. You may be adding a ref to a component that was not created inside a component's render method\n" + + "3. You have multiple copies of React loaded\n" + + "See https://reactjs.org/link/refs-must-have-owner for more information." + ); + } + + if (owner.tag !== ClassComponent) { + throw new Error( + "Function components cannot have string refs. " + + "We recommend using useRef() instead. " + + "Learn more about using refs safely here: " + + "https://reactjs.org/link/strict-mode-string-ref" + ); + } // At this point, we know the ref isn't an object or function but it could + // be a number. Coerce it to a string. + + { + checkPropStringCoercion(mixedRef, "ref"); + } + + var stringRef = "" + mixedRef; + + { + if ( + // Will already warn with "Function components cannot be given refs" + !(typeof element.type === "function" && !isReactClass(element.type)) + ) { + var componentName = + getComponentNameFromFiber(returnFiber) || "Component"; + + if (!didWarnAboutStringRefs[componentName]) { + error( + 'Component "%s" contains the string ref "%s". Support for string refs ' + + "will be removed in a future major release. We recommend using " + + "useRef() or createRef() instead. " + + "Learn more about using refs safely here: " + + "https://reactjs.org/link/strict-mode-string-ref", + componentName, + stringRef + ); + + didWarnAboutStringRefs[componentName] = true; + } + } + } + + var inst = owner.stateNode; + + if (!inst) { + throw new Error( + "Missing owner for string ref " + + stringRef + + ". This error is likely caused by a " + + "bug in React. Please file an issue." + ); + } // Check if previous string ref matches new string ref + + if ( + current !== null && + current.ref !== null && + typeof current.ref === "function" && + current.ref._stringRef === stringRef + ) { + // Reuse the existing string ref + var currentRef = current.ref; + return currentRef; + } // Create a new string ref + + var ref = function (value) { + var refs = inst.refs; + + if (value === null) { + delete refs[stringRef]; + } else { + refs[stringRef] = value; + } + }; + + ref._stringRef = stringRef; + return ref; + } + + function coerceRef(returnFiber, current, workInProgress, element) { var mixedRef; { @@ -5291,119 +5394,27 @@ if (__DEV__) { mixedRef = element.ref; } + var coercedRef; + if ( mixedRef !== null && typeof mixedRef !== "function" && typeof mixedRef !== "object" ) { - { - if ( - // Will already throw with "Function components cannot have string refs" - !(element._owner && element._owner.tag !== ClassComponent) && // Will already warn with "Function components cannot be given refs" - !( - typeof element.type === "function" && !isReactClass(element.type) - ) && // Will already throw with "Element ref was specified as a string (someStringRef) but no owner was set" - element._owner - ) { - var componentName = - getComponentNameFromFiber(returnFiber) || "Component"; + // Assume this is a string ref. If it's not, then this will throw an error + // to the user. + coercedRef = convertStringRefToCallbackRef( + returnFiber, + current, + element, + mixedRef + ); + } else { + coercedRef = mixedRef; + } // TODO: If enableRefAsProp is on, we shouldn't use the `ref` field. We + // should always read the ref from the prop. - if (!didWarnAboutStringRefs[componentName]) { - error( - 'Component "%s" contains the string ref "%s". Support for string refs ' + - "will be removed in a future major release. We recommend using " + - "useRef() or createRef() instead. " + - "Learn more about using refs safely here: " + - "https://reactjs.org/link/strict-mode-string-ref", - componentName, - mixedRef - ); - - didWarnAboutStringRefs[componentName] = true; - } - } - } - - if (element._owner) { - var owner = element._owner; - var inst; - - if (owner) { - var ownerFiber = owner; - - if (ownerFiber.tag !== ClassComponent) { - throw new Error( - "Function components cannot have string refs. " + - "We recommend using useRef() instead. " + - "Learn more about using refs safely here: " + - "https://reactjs.org/link/strict-mode-string-ref" - ); - } - - inst = ownerFiber.stateNode; - } - - if (!inst) { - throw new Error( - "Missing owner for string ref " + - mixedRef + - ". This error is likely caused by a " + - "bug in React. Please file an issue." - ); - } // Assigning this to a const so Flow knows it won't change in the closure - - var resolvedInst = inst; - - { - checkPropStringCoercion(mixedRef, "ref"); - } - - var stringRef = "" + mixedRef; // Check if previous string ref matches new string ref - - if ( - current !== null && - current.ref !== null && - typeof current.ref === "function" && - current.ref._stringRef === stringRef - ) { - return current.ref; - } - - var ref = function (value) { - var refs = resolvedInst.refs; - - if (value === null) { - delete refs[stringRef]; - } else { - refs[stringRef] = value; - } - }; - - ref._stringRef = stringRef; - return ref; - } else { - if (typeof mixedRef !== "string") { - throw new Error( - "Expected ref to be a function, a string, an object returned by React.createRef(), or null." - ); - } - - if (!element._owner) { - throw new Error( - "Element ref was specified as a string (" + - mixedRef + - ") but no owner was set. This could happen for one of" + - " the following reasons:\n" + - "1. You may be adding a ref to a function component\n" + - "2. You may be adding a ref to a component that was not created inside a component's render method\n" + - "3. You have multiple copies of React loaded\n" + - "See https://reactjs.org/link/refs-must-have-owner for more information." - ); - } - } - } - - return mixedRef; + workInProgress.ref = coercedRef; } function throwOnInvalidObjectType(returnFiber, newChild) { @@ -5659,7 +5670,7 @@ if (__DEV__) { ) { // Move based on index var existing = useFiber(current, element.props); - existing.ref = coerceRef(returnFiber, current, element); + coerceRef(returnFiber, current, existing, element); existing.return = returnFiber; { @@ -5672,7 +5683,7 @@ if (__DEV__) { } // Insert var created = createFiberFromElement(element, returnFiber.mode, lanes); - created.ref = coerceRef(returnFiber, current, element); + coerceRef(returnFiber, current, created, element); created.return = returnFiber; { @@ -5778,7 +5789,7 @@ if (__DEV__) { lanes ); - _created.ref = coerceRef(returnFiber, null, newChild); + coerceRef(returnFiber, null, _created, newChild); _created.return = returnFiber; { @@ -6641,7 +6652,7 @@ if (__DEV__) { var _existing = useFiber(child, element.props); - _existing.ref = coerceRef(returnFiber, child, element); + coerceRef(returnFiber, child, _existing, element); _existing.return = returnFiber; { @@ -6683,7 +6694,7 @@ if (__DEV__) { lanes ); - _created4.ref = coerceRef(returnFiber, currentFirstChild, element); + coerceRef(returnFiber, currentFirstChild, _created4, element); _created4.return = returnFiber; { @@ -26066,7 +26077,7 @@ if (__DEV__) { return root; } - var ReactVersion = "18.3.0-www-classic-fa92984d"; + var ReactVersion = "18.3.0-www-classic-671761c6"; // Might add PROFILE later. diff --git a/compiled/facebook-www/ReactTestRenderer-dev.modern.js b/compiled/facebook-www/ReactTestRenderer-dev.modern.js index 1600cfc75e..7ac62f8fa8 100644 --- a/compiled/facebook-www/ReactTestRenderer-dev.modern.js +++ b/compiled/facebook-www/ReactTestRenderer-dev.modern.js @@ -5283,7 +5283,110 @@ if (__DEV__) { return trackUsedThenable(thenableState$1, thenable, index); } - function coerceRef(returnFiber, current, element) { + function convertStringRefToCallbackRef( + returnFiber, + current, + element, + mixedRef + ) { + var owner = element._owner; + + if (!owner) { + if (typeof mixedRef !== "string") { + throw new Error( + "Expected ref to be a function, a string, an object returned by React.createRef(), or null." + ); + } + + throw new Error( + "Element ref was specified as a string (" + + mixedRef + + ") but no owner was set. This could happen for one of" + + " the following reasons:\n" + + "1. You may be adding a ref to a function component\n" + + "2. You may be adding a ref to a component that was not created inside a component's render method\n" + + "3. You have multiple copies of React loaded\n" + + "See https://reactjs.org/link/refs-must-have-owner for more information." + ); + } + + if (owner.tag !== ClassComponent) { + throw new Error( + "Function components cannot have string refs. " + + "We recommend using useRef() instead. " + + "Learn more about using refs safely here: " + + "https://reactjs.org/link/strict-mode-string-ref" + ); + } // At this point, we know the ref isn't an object or function but it could + // be a number. Coerce it to a string. + + { + checkPropStringCoercion(mixedRef, "ref"); + } + + var stringRef = "" + mixedRef; + + { + if ( + // Will already warn with "Function components cannot be given refs" + !(typeof element.type === "function" && !isReactClass(element.type)) + ) { + var componentName = + getComponentNameFromFiber(returnFiber) || "Component"; + + if (!didWarnAboutStringRefs[componentName]) { + error( + 'Component "%s" contains the string ref "%s". Support for string refs ' + + "will be removed in a future major release. We recommend using " + + "useRef() or createRef() instead. " + + "Learn more about using refs safely here: " + + "https://reactjs.org/link/strict-mode-string-ref", + componentName, + stringRef + ); + + didWarnAboutStringRefs[componentName] = true; + } + } + } + + var inst = owner.stateNode; + + if (!inst) { + throw new Error( + "Missing owner for string ref " + + stringRef + + ". This error is likely caused by a " + + "bug in React. Please file an issue." + ); + } // Check if previous string ref matches new string ref + + if ( + current !== null && + current.ref !== null && + typeof current.ref === "function" && + current.ref._stringRef === stringRef + ) { + // Reuse the existing string ref + var currentRef = current.ref; + return currentRef; + } // Create a new string ref + + var ref = function (value) { + var refs = inst.refs; + + if (value === null) { + delete refs[stringRef]; + } else { + refs[stringRef] = value; + } + }; + + ref._stringRef = stringRef; + return ref; + } + + function coerceRef(returnFiber, current, workInProgress, element) { var mixedRef; { @@ -5291,119 +5394,27 @@ if (__DEV__) { mixedRef = element.ref; } + var coercedRef; + if ( mixedRef !== null && typeof mixedRef !== "function" && typeof mixedRef !== "object" ) { - { - if ( - // Will already throw with "Function components cannot have string refs" - !(element._owner && element._owner.tag !== ClassComponent) && // Will already warn with "Function components cannot be given refs" - !( - typeof element.type === "function" && !isReactClass(element.type) - ) && // Will already throw with "Element ref was specified as a string (someStringRef) but no owner was set" - element._owner - ) { - var componentName = - getComponentNameFromFiber(returnFiber) || "Component"; + // Assume this is a string ref. If it's not, then this will throw an error + // to the user. + coercedRef = convertStringRefToCallbackRef( + returnFiber, + current, + element, + mixedRef + ); + } else { + coercedRef = mixedRef; + } // TODO: If enableRefAsProp is on, we shouldn't use the `ref` field. We + // should always read the ref from the prop. - if (!didWarnAboutStringRefs[componentName]) { - error( - 'Component "%s" contains the string ref "%s". Support for string refs ' + - "will be removed in a future major release. We recommend using " + - "useRef() or createRef() instead. " + - "Learn more about using refs safely here: " + - "https://reactjs.org/link/strict-mode-string-ref", - componentName, - mixedRef - ); - - didWarnAboutStringRefs[componentName] = true; - } - } - } - - if (element._owner) { - var owner = element._owner; - var inst; - - if (owner) { - var ownerFiber = owner; - - if (ownerFiber.tag !== ClassComponent) { - throw new Error( - "Function components cannot have string refs. " + - "We recommend using useRef() instead. " + - "Learn more about using refs safely here: " + - "https://reactjs.org/link/strict-mode-string-ref" - ); - } - - inst = ownerFiber.stateNode; - } - - if (!inst) { - throw new Error( - "Missing owner for string ref " + - mixedRef + - ". This error is likely caused by a " + - "bug in React. Please file an issue." - ); - } // Assigning this to a const so Flow knows it won't change in the closure - - var resolvedInst = inst; - - { - checkPropStringCoercion(mixedRef, "ref"); - } - - var stringRef = "" + mixedRef; // Check if previous string ref matches new string ref - - if ( - current !== null && - current.ref !== null && - typeof current.ref === "function" && - current.ref._stringRef === stringRef - ) { - return current.ref; - } - - var ref = function (value) { - var refs = resolvedInst.refs; - - if (value === null) { - delete refs[stringRef]; - } else { - refs[stringRef] = value; - } - }; - - ref._stringRef = stringRef; - return ref; - } else { - if (typeof mixedRef !== "string") { - throw new Error( - "Expected ref to be a function, a string, an object returned by React.createRef(), or null." - ); - } - - if (!element._owner) { - throw new Error( - "Element ref was specified as a string (" + - mixedRef + - ") but no owner was set. This could happen for one of" + - " the following reasons:\n" + - "1. You may be adding a ref to a function component\n" + - "2. You may be adding a ref to a component that was not created inside a component's render method\n" + - "3. You have multiple copies of React loaded\n" + - "See https://reactjs.org/link/refs-must-have-owner for more information." - ); - } - } - } - - return mixedRef; + workInProgress.ref = coercedRef; } function throwOnInvalidObjectType(returnFiber, newChild) { @@ -5659,7 +5670,7 @@ if (__DEV__) { ) { // Move based on index var existing = useFiber(current, element.props); - existing.ref = coerceRef(returnFiber, current, element); + coerceRef(returnFiber, current, existing, element); existing.return = returnFiber; { @@ -5672,7 +5683,7 @@ if (__DEV__) { } // Insert var created = createFiberFromElement(element, returnFiber.mode, lanes); - created.ref = coerceRef(returnFiber, current, element); + coerceRef(returnFiber, current, created, element); created.return = returnFiber; { @@ -5778,7 +5789,7 @@ if (__DEV__) { lanes ); - _created.ref = coerceRef(returnFiber, null, newChild); + coerceRef(returnFiber, null, _created, newChild); _created.return = returnFiber; { @@ -6641,7 +6652,7 @@ if (__DEV__) { var _existing = useFiber(child, element.props); - _existing.ref = coerceRef(returnFiber, child, element); + coerceRef(returnFiber, child, _existing, element); _existing.return = returnFiber; { @@ -6683,7 +6694,7 @@ if (__DEV__) { lanes ); - _created4.ref = coerceRef(returnFiber, currentFirstChild, element); + coerceRef(returnFiber, currentFirstChild, _created4, element); _created4.return = returnFiber; { @@ -26066,7 +26077,7 @@ if (__DEV__) { return root; } - var ReactVersion = "18.3.0-www-modern-27a3f72d"; + var ReactVersion = "18.3.0-www-modern-13229030"; // Might add PROFILE later.