From e6ea24b07b769c929a8ba9bb41a7b381e8dc2ce4 Mon Sep 17 00:00:00 2001 From: acdlite Date: Fri, 5 Apr 2024 14:58:03 +0000 Subject: [PATCH] Move string ref coercion to JSX runtime (#28473) Based on: - #28464 --- This moves the entire string ref implementation out Fiber and into the JSX runtime. The string is converted to a callback ref during element creation. This is a subtle change in behavior, because it will have already been converted to a callback ref if you access element.prop.ref or element.ref. But this is only for Meta, because string refs are disabled entirely in open source. And if it leads to an issue in practice, the solution is to switch to a different ref type, which Meta is going to do regardless. DiffTrain build for [e3ebcd54b98a4f8f5a9f7e63982fa75578b648ed](https://github.com/facebook/react/commit/e3ebcd54b98a4f8f5a9f7e63982fa75578b648ed) --- .../facebook-www/JSXDEVRuntime-dev.classic.js | 287 +++++++++++++++- .../facebook-www/JSXDEVRuntime-dev.modern.js | 289 +++++++++++++++- compiled/facebook-www/REVISION | 2 +- compiled/facebook-www/React-dev.classic.js | 317 ++++++++++++++++- compiled/facebook-www/React-dev.modern.js | 319 +++++++++++++++++- compiled/facebook-www/React-prod.classic.js | 74 +++- compiled/facebook-www/React-prod.modern.js | 74 +++- .../facebook-www/React-profiling.classic.js | 74 +++- .../facebook-www/React-profiling.modern.js | 74 +++- compiled/facebook-www/ReactART-dev.classic.js | 228 +------------ compiled/facebook-www/ReactART-dev.modern.js | 228 +------------ .../facebook-www/ReactART-prod.classic.js | 52 +-- compiled/facebook-www/ReactART-prod.modern.js | 52 +-- compiled/facebook-www/ReactDOM-dev.classic.js | 167 +-------- compiled/facebook-www/ReactDOM-dev.modern.js | 167 +-------- .../facebook-www/ReactDOM-prod.classic.js | 54 +-- compiled/facebook-www/ReactDOM-prod.modern.js | 54 +-- .../ReactDOM-profiling.classic.js | 54 +-- .../facebook-www/ReactDOM-profiling.modern.js | 54 +-- .../ReactDOMTesting-dev.classic.js | 167 +-------- .../ReactDOMTesting-dev.modern.js | 167 +-------- .../ReactDOMTesting-prod.classic.js | 54 +-- .../ReactDOMTesting-prod.modern.js | 54 +-- .../facebook-www/ReactServer-dev.modern.js | 319 +++++++++++++++++- .../facebook-www/ReactServer-prod.modern.js | 61 +++- .../ReactTestRenderer-dev.classic.js | 276 +++++---------- .../ReactTestRenderer-dev.modern.js | 276 +++++---------- 27 files changed, 2022 insertions(+), 1972 deletions(-) diff --git a/compiled/facebook-www/JSXDEVRuntime-dev.classic.js b/compiled/facebook-www/JSXDEVRuntime-dev.classic.js index 6c0ef234f55c3..0648fb1575b73 100644 --- a/compiled/facebook-www/JSXDEVRuntime-dev.classic.js +++ b/compiled/facebook-www/JSXDEVRuntime-dev.classic.js @@ -112,8 +112,11 @@ if (__DEV__) { enableRefAsProp = dynamicFeatureFlags.enableRefAsProp, disableDefaultPropsExceptForClasses = dynamicFeatureFlags.disableDefaultPropsExceptForClasses; // On WWW, false is used for a new modern build. + // because JSX is an extremely hot path. - function getWrappedName(outerType, innerType, wrapperName) { + var disableStringRefs = false; + + function getWrappedName$1(outerType, innerType, wrapperName) { var displayName = outerType.displayName; if (displayName) { @@ -126,7 +129,7 @@ if (__DEV__) { : wrapperName; } // Keep in sync with react-reconciler/getComponentNameFromFiber - function getContextName(type) { + function getContextName$1(type) { return type.displayName || "Context"; } @@ -193,28 +196,28 @@ if (__DEV__) { return null; } else { var provider = type; - return getContextName(provider._context) + ".Provider"; + return getContextName$1(provider._context) + ".Provider"; } case REACT_CONTEXT_TYPE: var context = type; if (enableRenderableContext) { - return getContextName(context) + ".Provider"; + return getContextName$1(context) + ".Provider"; } else { - return getContextName(context) + ".Consumer"; + return getContextName$1(context) + ".Consumer"; } case REACT_CONSUMER_TYPE: if (enableRenderableContext) { var consumer = type; - return getContextName(consumer._context) + ".Consumer"; + return getContextName$1(consumer._context) + ".Consumer"; } else { return null; } case REACT_FORWARD_REF_TYPE: - return getWrappedName(type, type.render, "ForwardRef"); + return getWrappedName$1(type, type.render, "ForwardRef"); case REACT_MEMO_TYPE: var outerName = type.displayName || null; @@ -323,6 +326,20 @@ if (__DEV__) { } } } + function checkPropStringCoercion(value, propName) { + { + if (willCoercionThrow(value)) { + error( + "The provided `%s` prop is an unsupported type %s." + + " This value must be coerced to a string before using it here.", + propName, + typeName(value) + ); + + return testStringCoercion(value); // throw (to help callers find troubleshooting comments) + } + } + } var REACT_CLIENT_REFERENCE$1 = Symbol.for("react.client.reference"); function isValidElementType(type) { @@ -802,6 +819,158 @@ if (__DEV__) { return ""; } + var FunctionComponent = 0; + var ClassComponent = 1; + var HostRoot = 3; // Root of a host tree. Could be nested inside another node. + + var HostPortal = 4; // A subtree. Could be an entry point to a different renderer. + + var HostComponent = 5; + var HostText = 6; + var Fragment = 7; + var Mode = 8; + var ContextConsumer = 9; + var ContextProvider = 10; + var ForwardRef = 11; + var Profiler = 12; + var SuspenseComponent = 13; + var MemoComponent = 14; + var SimpleMemoComponent = 15; + var LazyComponent = 16; + var IncompleteClassComponent = 17; + var DehydratedFragment = 18; + var SuspenseListComponent = 19; + var ScopeComponent = 21; + var OffscreenComponent = 22; + var LegacyHiddenComponent = 23; + var CacheComponent = 24; + var TracingMarkerComponent = 25; + var HostHoistable = 26; + var HostSingleton = 27; + var IncompleteFunctionComponent = 28; + + function getWrappedName(outerType, innerType, wrapperName) { + var functionName = innerType.displayName || innerType.name || ""; + return ( + outerType.displayName || + (functionName !== "" + ? wrapperName + "(" + functionName + ")" + : wrapperName) + ); + } // Keep in sync with shared/getComponentNameFromType + + function getContextName(type) { + return type.displayName || "Context"; + } + + function getComponentNameFromFiber(fiber) { + var tag = fiber.tag, + type = fiber.type; + + switch (tag) { + case CacheComponent: + return "Cache"; + + case ContextConsumer: + if (enableRenderableContext) { + var consumer = type; + return getContextName(consumer._context) + ".Consumer"; + } else { + var context = type; + return getContextName(context) + ".Consumer"; + } + + case ContextProvider: + if (enableRenderableContext) { + var _context = type; + return getContextName(_context) + ".Provider"; + } else { + var provider = type; + return getContextName(provider._context) + ".Provider"; + } + + case DehydratedFragment: + return "DehydratedFragment"; + + case ForwardRef: + return getWrappedName(type, type.render, "ForwardRef"); + + case Fragment: + return "Fragment"; + + case HostHoistable: + case HostSingleton: + case HostComponent: + // Host component type is the display name (e.g. "div", "View") + return type; + + case HostPortal: + return "Portal"; + + case HostRoot: + return "Root"; + + case HostText: + return "Text"; + + case LazyComponent: + // Name comes from the type in this case; we don't have a tag. + return getComponentNameFromType(type); + + case Mode: + if (type === REACT_STRICT_MODE_TYPE) { + // Don't be less specific than shared/getComponentNameFromType + return "StrictMode"; + } + + return "Mode"; + + case OffscreenComponent: + return "Offscreen"; + + case Profiler: + return "Profiler"; + + case ScopeComponent: + return "Scope"; + + case SuspenseComponent: + return "Suspense"; + + case SuspenseListComponent: + return "SuspenseList"; + + case TracingMarkerComponent: + return "TracingMarker"; + // The display name for these tags come from the user-provided type: + + case IncompleteClassComponent: + case IncompleteFunctionComponent: + + // Fallthrough + + case ClassComponent: + case FunctionComponent: + case MemoComponent: + case SimpleMemoComponent: + if (typeof type === "function") { + return type.displayName || type.name || null; + } + + if (typeof type === "string") { + return type; + } + + break; + + case LegacyHiddenComponent: { + return "LegacyHidden"; + } + } + + return null; + } + var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"); @@ -1217,6 +1386,10 @@ if (__DEV__) { if (hasValidRef(config)) { if (!enableRefAsProp) { ref = config.ref; + + { + ref = coerceStringRef(ref, ReactCurrentOwner.current, type); + } } { @@ -1230,7 +1403,15 @@ if (__DEV__) { propName !== "key" && (enableRefAsProp || propName !== "ref") ) { - props[propName] = config[propName]; + if (enableRefAsProp && !disableStringRefs && propName === "ref") { + props.ref = coerceStringRef( + config[propName], + ReactCurrentOwner.current, + type + ); + } else { + props[propName] = config[propName]; + } } } @@ -1488,6 +1669,96 @@ if (__DEV__) { } } + function coerceStringRef(mixedRef, owner, type) { + var stringRef; + + if (typeof mixedRef === "string") { + stringRef = mixedRef; + } else { + if (typeof mixedRef === "number" || typeof mixedRef === "boolean") { + { + checkPropStringCoercion(mixedRef, "ref"); + } + + stringRef = "" + mixedRef; + } else { + return mixedRef; + } + } + + return stringRefAsCallbackRef.bind(null, stringRef, type, owner); + } + + function stringRefAsCallbackRef(stringRef, type, owner, value) { + if (!owner) { + throw new Error( + "Element ref was specified as a string (" + + stringRef + + ") 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://react.dev/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://react.dev/link/strict-mode-string-ref" + ); + } + + { + if ( + // Will already warn with "Function components cannot be given refs" + !(typeof type === "function" && !isReactClass(type)) + ) { + var componentName = getComponentNameFromFiber(owner) || "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://react.dev/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." + ); + } + + var refs = inst.refs; + + if (value === null) { + delete refs[stringRef]; + } else { + refs[stringRef] = value; + } + } + + function isReactClass(type) { + return type.prototype && type.prototype.isReactComponent; + } + var jsxDEV = jsxDEV$1; exports.Fragment = REACT_FRAGMENT_TYPE; diff --git a/compiled/facebook-www/JSXDEVRuntime-dev.modern.js b/compiled/facebook-www/JSXDEVRuntime-dev.modern.js index fed4994b374a2..7cafeee6b6023 100644 --- a/compiled/facebook-www/JSXDEVRuntime-dev.modern.js +++ b/compiled/facebook-www/JSXDEVRuntime-dev.modern.js @@ -112,8 +112,11 @@ if (__DEV__) { enableRefAsProp = dynamicFeatureFlags.enableRefAsProp, disableDefaultPropsExceptForClasses = dynamicFeatureFlags.disableDefaultPropsExceptForClasses; // On WWW, true is used for a new modern build. + // because JSX is an extremely hot path. - function getWrappedName(outerType, innerType, wrapperName) { + var disableStringRefs = false; + + function getWrappedName$1(outerType, innerType, wrapperName) { var displayName = outerType.displayName; if (displayName) { @@ -126,7 +129,7 @@ if (__DEV__) { : wrapperName; } // Keep in sync with react-reconciler/getComponentNameFromFiber - function getContextName(type) { + function getContextName$1(type) { return type.displayName || "Context"; } @@ -193,28 +196,28 @@ if (__DEV__) { return null; } else { var provider = type; - return getContextName(provider._context) + ".Provider"; + return getContextName$1(provider._context) + ".Provider"; } case REACT_CONTEXT_TYPE: var context = type; if (enableRenderableContext) { - return getContextName(context) + ".Provider"; + return getContextName$1(context) + ".Provider"; } else { - return getContextName(context) + ".Consumer"; + return getContextName$1(context) + ".Consumer"; } case REACT_CONSUMER_TYPE: if (enableRenderableContext) { var consumer = type; - return getContextName(consumer._context) + ".Consumer"; + return getContextName$1(consumer._context) + ".Consumer"; } else { return null; } case REACT_FORWARD_REF_TYPE: - return getWrappedName(type, type.render, "ForwardRef"); + return getWrappedName$1(type, type.render, "ForwardRef"); case REACT_MEMO_TYPE: var outerName = type.displayName || null; @@ -323,6 +326,20 @@ if (__DEV__) { } } } + function checkPropStringCoercion(value, propName) { + { + if (willCoercionThrow(value)) { + error( + "The provided `%s` prop is an unsupported type %s." + + " This value must be coerced to a string before using it here.", + propName, + typeName(value) + ); + + return testStringCoercion(value); // throw (to help callers find troubleshooting comments) + } + } + } var REACT_CLIENT_REFERENCE$1 = Symbol.for("react.client.reference"); function isValidElementType(type) { @@ -802,6 +819,160 @@ if (__DEV__) { return ""; } + var FunctionComponent = 0; + var ClassComponent = 1; + var HostRoot = 3; // Root of a host tree. Could be nested inside another node. + + var HostPortal = 4; // A subtree. Could be an entry point to a different renderer. + + var HostComponent = 5; + var HostText = 6; + var Fragment = 7; + var Mode = 8; + var ContextConsumer = 9; + var ContextProvider = 10; + var ForwardRef = 11; + var Profiler = 12; + var SuspenseComponent = 13; + var MemoComponent = 14; + var SimpleMemoComponent = 15; + var LazyComponent = 16; + var IncompleteClassComponent = 17; + var DehydratedFragment = 18; + var SuspenseListComponent = 19; + var ScopeComponent = 21; + var OffscreenComponent = 22; + var LegacyHiddenComponent = 23; + var CacheComponent = 24; + var TracingMarkerComponent = 25; + var HostHoistable = 26; + var HostSingleton = 27; + var IncompleteFunctionComponent = 28; + + function getWrappedName(outerType, innerType, wrapperName) { + var functionName = innerType.displayName || innerType.name || ""; + return ( + outerType.displayName || + (functionName !== "" + ? wrapperName + "(" + functionName + ")" + : wrapperName) + ); + } // Keep in sync with shared/getComponentNameFromType + + function getContextName(type) { + return type.displayName || "Context"; + } + + function getComponentNameFromFiber(fiber) { + var tag = fiber.tag, + type = fiber.type; + + switch (tag) { + case CacheComponent: + return "Cache"; + + case ContextConsumer: + if (enableRenderableContext) { + var consumer = type; + return getContextName(consumer._context) + ".Consumer"; + } else { + var context = type; + return getContextName(context) + ".Consumer"; + } + + case ContextProvider: + if (enableRenderableContext) { + var _context = type; + return getContextName(_context) + ".Provider"; + } else { + var provider = type; + return getContextName(provider._context) + ".Provider"; + } + + case DehydratedFragment: + return "DehydratedFragment"; + + case ForwardRef: + return getWrappedName(type, type.render, "ForwardRef"); + + case Fragment: + return "Fragment"; + + case HostHoistable: + case HostSingleton: + case HostComponent: + // Host component type is the display name (e.g. "div", "View") + return type; + + case HostPortal: + return "Portal"; + + case HostRoot: + return "Root"; + + case HostText: + return "Text"; + + case LazyComponent: + // Name comes from the type in this case; we don't have a tag. + return getComponentNameFromType(type); + + case Mode: + if (type === REACT_STRICT_MODE_TYPE) { + // Don't be less specific than shared/getComponentNameFromType + return "StrictMode"; + } + + return "Mode"; + + case OffscreenComponent: + return "Offscreen"; + + case Profiler: + return "Profiler"; + + case ScopeComponent: + return "Scope"; + + case SuspenseComponent: + return "Suspense"; + + case SuspenseListComponent: + return "SuspenseList"; + + case TracingMarkerComponent: + return "TracingMarker"; + // The display name for these tags come from the user-provided type: + + case IncompleteClassComponent: + case IncompleteFunctionComponent: { + break; + } + + // Fallthrough + + case ClassComponent: + case FunctionComponent: + case MemoComponent: + case SimpleMemoComponent: + if (typeof type === "function") { + return type.displayName || type.name || null; + } + + if (typeof type === "string") { + return type; + } + + break; + + case LegacyHiddenComponent: { + return "LegacyHidden"; + } + } + + return null; + } + var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"); @@ -1217,6 +1388,10 @@ if (__DEV__) { if (hasValidRef(config)) { if (!enableRefAsProp) { ref = config.ref; + + { + ref = coerceStringRef(ref, ReactCurrentOwner.current, type); + } } { @@ -1230,7 +1405,15 @@ if (__DEV__) { propName !== "key" && (enableRefAsProp || propName !== "ref") ) { - props[propName] = config[propName]; + if (enableRefAsProp && !disableStringRefs && propName === "ref") { + props.ref = coerceStringRef( + config[propName], + ReactCurrentOwner.current, + type + ); + } else { + props[propName] = config[propName]; + } } } @@ -1488,6 +1671,96 @@ if (__DEV__) { } } + function coerceStringRef(mixedRef, owner, type) { + var stringRef; + + if (typeof mixedRef === "string") { + stringRef = mixedRef; + } else { + if (typeof mixedRef === "number" || typeof mixedRef === "boolean") { + { + checkPropStringCoercion(mixedRef, "ref"); + } + + stringRef = "" + mixedRef; + } else { + return mixedRef; + } + } + + return stringRefAsCallbackRef.bind(null, stringRef, type, owner); + } + + function stringRefAsCallbackRef(stringRef, type, owner, value) { + if (!owner) { + throw new Error( + "Element ref was specified as a string (" + + stringRef + + ") 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://react.dev/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://react.dev/link/strict-mode-string-ref" + ); + } + + { + if ( + // Will already warn with "Function components cannot be given refs" + !(typeof type === "function" && !isReactClass(type)) + ) { + var componentName = getComponentNameFromFiber(owner) || "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://react.dev/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." + ); + } + + var refs = inst.refs; + + if (value === null) { + delete refs[stringRef]; + } else { + refs[stringRef] = value; + } + } + + function isReactClass(type) { + return type.prototype && type.prototype.isReactComponent; + } + var jsxDEV = jsxDEV$1; exports.Fragment = REACT_FRAGMENT_TYPE; diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION index efcac2c6f957e..c5ec26ad631b8 100644 --- a/compiled/facebook-www/REVISION +++ b/compiled/facebook-www/REVISION @@ -1 +1 @@ -48b4ecc9012638ed51b275aad24b2086b8215e32 +e3ebcd54b98a4f8f5a9f7e63982fa75578b648ed diff --git a/compiled/facebook-www/React-dev.classic.js b/compiled/facebook-www/React-dev.classic.js index 2afafcfb99169..344a4b66b25a8 100644 --- a/compiled/facebook-www/React-dev.classic.js +++ b/compiled/facebook-www/React-dev.classic.js @@ -24,7 +24,7 @@ if (__DEV__) { ) { __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error()); } - var ReactVersion = "19.0.0-www-classic-b9e0eea7"; + var ReactVersion = "19.0.0-www-classic-943a0b57"; // ATTENTION // When adding new symbols to this file, @@ -468,6 +468,20 @@ if (__DEV__) { } } } + function checkPropStringCoercion(value, propName) { + { + if (willCoercionThrow(value)) { + error( + "The provided `%s` prop is an unsupported type %s." + + " This value must be coerced to a string before using it here.", + propName, + typeName(value) + ); + + return testStringCoercion(value); // throw (to help callers find troubleshooting comments) + } + } + } // Re-export dynamic flags from the www version. var dynamicFeatureFlags = require("ReactFeatureFlags"); @@ -478,9 +492,12 @@ if (__DEV__) { enableRefAsProp = dynamicFeatureFlags.enableRefAsProp, disableDefaultPropsExceptForClasses = dynamicFeatureFlags.disableDefaultPropsExceptForClasses; // On WWW, false is used for a new modern build. + // because JSX is an extremely hot path. + + var disableStringRefs = false; var disableLegacyMode = false; - function getWrappedName(outerType, innerType, wrapperName) { + function getWrappedName$1(outerType, innerType, wrapperName) { var displayName = outerType.displayName; if (displayName) { @@ -493,7 +510,7 @@ if (__DEV__) { : wrapperName; } // Keep in sync with react-reconciler/getComponentNameFromFiber - function getContextName(type) { + function getContextName$1(type) { return type.displayName || "Context"; } @@ -560,28 +577,28 @@ if (__DEV__) { return null; } else { var provider = type; - return getContextName(provider._context) + ".Provider"; + return getContextName$1(provider._context) + ".Provider"; } case REACT_CONTEXT_TYPE: var context = type; if (enableRenderableContext) { - return getContextName(context) + ".Provider"; + return getContextName$1(context) + ".Provider"; } else { - return getContextName(context) + ".Consumer"; + return getContextName$1(context) + ".Consumer"; } case REACT_CONSUMER_TYPE: if (enableRenderableContext) { var consumer = type; - return getContextName(consumer._context) + ".Consumer"; + return getContextName$1(consumer._context) + ".Consumer"; } else { return null; } case REACT_FORWARD_REF_TYPE: - return getWrappedName(type, type.render, "ForwardRef"); + return getWrappedName$1(type, type.render, "ForwardRef"); case REACT_MEMO_TYPE: var outerName = type.displayName || null; @@ -1174,6 +1191,158 @@ if (__DEV__) { return ""; } + var FunctionComponent = 0; + var ClassComponent = 1; + var HostRoot = 3; // Root of a host tree. Could be nested inside another node. + + var HostPortal = 4; // A subtree. Could be an entry point to a different renderer. + + var HostComponent = 5; + var HostText = 6; + var Fragment = 7; + var Mode = 8; + var ContextConsumer = 9; + var ContextProvider = 10; + var ForwardRef = 11; + var Profiler = 12; + var SuspenseComponent = 13; + var MemoComponent = 14; + var SimpleMemoComponent = 15; + var LazyComponent = 16; + var IncompleteClassComponent = 17; + var DehydratedFragment = 18; + var SuspenseListComponent = 19; + var ScopeComponent = 21; + var OffscreenComponent = 22; + var LegacyHiddenComponent = 23; + var CacheComponent = 24; + var TracingMarkerComponent = 25; + var HostHoistable = 26; + var HostSingleton = 27; + var IncompleteFunctionComponent = 28; + + function getWrappedName(outerType, innerType, wrapperName) { + var functionName = innerType.displayName || innerType.name || ""; + return ( + outerType.displayName || + (functionName !== "" + ? wrapperName + "(" + functionName + ")" + : wrapperName) + ); + } // Keep in sync with shared/getComponentNameFromType + + function getContextName(type) { + return type.displayName || "Context"; + } + + function getComponentNameFromFiber(fiber) { + var tag = fiber.tag, + type = fiber.type; + + switch (tag) { + case CacheComponent: + return "Cache"; + + case ContextConsumer: + if (enableRenderableContext) { + var consumer = type; + return getContextName(consumer._context) + ".Consumer"; + } else { + var context = type; + return getContextName(context) + ".Consumer"; + } + + case ContextProvider: + if (enableRenderableContext) { + var _context = type; + return getContextName(_context) + ".Provider"; + } else { + var provider = type; + return getContextName(provider._context) + ".Provider"; + } + + case DehydratedFragment: + return "DehydratedFragment"; + + case ForwardRef: + return getWrappedName(type, type.render, "ForwardRef"); + + case Fragment: + return "Fragment"; + + case HostHoistable: + case HostSingleton: + case HostComponent: + // Host component type is the display name (e.g. "div", "View") + return type; + + case HostPortal: + return "Portal"; + + case HostRoot: + return "Root"; + + case HostText: + return "Text"; + + case LazyComponent: + // Name comes from the type in this case; we don't have a tag. + return getComponentNameFromType(type); + + case Mode: + if (type === REACT_STRICT_MODE_TYPE) { + // Don't be less specific than shared/getComponentNameFromType + return "StrictMode"; + } + + return "Mode"; + + case OffscreenComponent: + return "Offscreen"; + + case Profiler: + return "Profiler"; + + case ScopeComponent: + return "Scope"; + + case SuspenseComponent: + return "Suspense"; + + case SuspenseListComponent: + return "SuspenseList"; + + case TracingMarkerComponent: + return "TracingMarker"; + // The display name for these tags come from the user-provided type: + + case IncompleteClassComponent: + case IncompleteFunctionComponent: + + // Fallthrough + + case ClassComponent: + case FunctionComponent: + case MemoComponent: + case SimpleMemoComponent: + if (typeof type === "function") { + return type.displayName || type.name || null; + } + + if (typeof type === "string") { + return type; + } + + break; + + case LegacyHiddenComponent: { + return "LegacyHidden"; + } + } + + return null; + } + var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"); @@ -1625,6 +1794,10 @@ if (__DEV__) { if (hasValidRef(config)) { if (!enableRefAsProp) { ref = config.ref; + + { + ref = coerceStringRef(ref, ReactCurrentOwner.current, type); + } } { @@ -1638,7 +1811,15 @@ if (__DEV__) { propName !== "key" && (enableRefAsProp || propName !== "ref") ) { - props[propName] = config[propName]; + if (enableRefAsProp && !disableStringRefs && propName === "ref") { + props.ref = coerceStringRef( + config[propName], + ReactCurrentOwner.current, + type + ); + } else { + props[propName] = config[propName]; + } } } @@ -1760,6 +1941,10 @@ if (__DEV__) { if (hasValidRef(config)) { if (!enableRefAsProp) { ref = config.ref; + + { + ref = coerceStringRef(ref, ReactCurrentOwner.current, type); + } } { @@ -1786,7 +1971,15 @@ if (__DEV__) { propName !== "__self" && propName !== "__source" ) { - props[propName] = config[propName]; + if (enableRefAsProp && !disableStringRefs && propName === "ref") { + props.ref = coerceStringRef( + config[propName], + ReactCurrentOwner.current, + type + ); + } else { + props[propName] = config[propName]; + } } } } // Children can be more than one argument, and those are transferred onto @@ -1895,6 +2088,10 @@ if (__DEV__) { if (!enableRefAsProp) { // Silently steal the ref from the parent. ref = config.ref; + + { + ref = coerceStringRef(ref, owner, element.type); + } } owner = ReactCurrentOwner.current; @@ -1942,7 +2139,15 @@ if (__DEV__) { // Resolve default props props[propName] = defaultProps[propName]; } else { - props[propName] = config[propName]; + if (enableRefAsProp && !disableStringRefs && propName === "ref") { + props.ref = coerceStringRef( + config[propName], + owner, + element.type + ); + } else { + props[propName] = config[propName]; + } } } } @@ -2188,6 +2393,96 @@ if (__DEV__) { } } + function coerceStringRef(mixedRef, owner, type) { + var stringRef; + + if (typeof mixedRef === "string") { + stringRef = mixedRef; + } else { + if (typeof mixedRef === "number" || typeof mixedRef === "boolean") { + { + checkPropStringCoercion(mixedRef, "ref"); + } + + stringRef = "" + mixedRef; + } else { + return mixedRef; + } + } + + return stringRefAsCallbackRef.bind(null, stringRef, type, owner); + } + + function stringRefAsCallbackRef(stringRef, type, owner, value) { + if (!owner) { + throw new Error( + "Element ref was specified as a string (" + + stringRef + + ") 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://react.dev/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://react.dev/link/strict-mode-string-ref" + ); + } + + { + if ( + // Will already warn with "Function components cannot be given refs" + !(typeof type === "function" && !isReactClass(type)) + ) { + var componentName = getComponentNameFromFiber(owner) || "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://react.dev/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." + ); + } + + var refs = inst.refs; + + if (value === null) { + delete refs[stringRef]; + } else { + refs[stringRef] = value; + } + } + + function isReactClass(type) { + return type.prototype && type.prototype.isReactComponent; + } + var SEPARATOR = "."; var SUBSEPARATOR = ":"; /** diff --git a/compiled/facebook-www/React-dev.modern.js b/compiled/facebook-www/React-dev.modern.js index e81bca2033842..b871a086f0eea 100644 --- a/compiled/facebook-www/React-dev.modern.js +++ b/compiled/facebook-www/React-dev.modern.js @@ -24,7 +24,7 @@ if (__DEV__) { ) { __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error()); } - var ReactVersion = "19.0.0-www-modern-3a8173ed"; + var ReactVersion = "19.0.0-www-modern-77bd3ad6"; // ATTENTION // When adding new symbols to this file, @@ -468,6 +468,20 @@ if (__DEV__) { } } } + function checkPropStringCoercion(value, propName) { + { + if (willCoercionThrow(value)) { + error( + "The provided `%s` prop is an unsupported type %s." + + " This value must be coerced to a string before using it here.", + propName, + typeName(value) + ); + + return testStringCoercion(value); // throw (to help callers find troubleshooting comments) + } + } + } // Re-export dynamic flags from the www version. var dynamicFeatureFlags = require("ReactFeatureFlags"); @@ -478,9 +492,12 @@ if (__DEV__) { enableRefAsProp = dynamicFeatureFlags.enableRefAsProp, disableDefaultPropsExceptForClasses = dynamicFeatureFlags.disableDefaultPropsExceptForClasses; // On WWW, true is used for a new modern build. + // because JSX is an extremely hot path. + + var disableStringRefs = false; var disableLegacyMode = true; - function getWrappedName(outerType, innerType, wrapperName) { + function getWrappedName$1(outerType, innerType, wrapperName) { var displayName = outerType.displayName; if (displayName) { @@ -493,7 +510,7 @@ if (__DEV__) { : wrapperName; } // Keep in sync with react-reconciler/getComponentNameFromFiber - function getContextName(type) { + function getContextName$1(type) { return type.displayName || "Context"; } @@ -560,28 +577,28 @@ if (__DEV__) { return null; } else { var provider = type; - return getContextName(provider._context) + ".Provider"; + return getContextName$1(provider._context) + ".Provider"; } case REACT_CONTEXT_TYPE: var context = type; if (enableRenderableContext) { - return getContextName(context) + ".Provider"; + return getContextName$1(context) + ".Provider"; } else { - return getContextName(context) + ".Consumer"; + return getContextName$1(context) + ".Consumer"; } case REACT_CONSUMER_TYPE: if (enableRenderableContext) { var consumer = type; - return getContextName(consumer._context) + ".Consumer"; + return getContextName$1(consumer._context) + ".Consumer"; } else { return null; } case REACT_FORWARD_REF_TYPE: - return getWrappedName(type, type.render, "ForwardRef"); + return getWrappedName$1(type, type.render, "ForwardRef"); case REACT_MEMO_TYPE: var outerName = type.displayName || null; @@ -1174,6 +1191,160 @@ if (__DEV__) { return ""; } + var FunctionComponent = 0; + var ClassComponent = 1; + var HostRoot = 3; // Root of a host tree. Could be nested inside another node. + + var HostPortal = 4; // A subtree. Could be an entry point to a different renderer. + + var HostComponent = 5; + var HostText = 6; + var Fragment = 7; + var Mode = 8; + var ContextConsumer = 9; + var ContextProvider = 10; + var ForwardRef = 11; + var Profiler = 12; + var SuspenseComponent = 13; + var MemoComponent = 14; + var SimpleMemoComponent = 15; + var LazyComponent = 16; + var IncompleteClassComponent = 17; + var DehydratedFragment = 18; + var SuspenseListComponent = 19; + var ScopeComponent = 21; + var OffscreenComponent = 22; + var LegacyHiddenComponent = 23; + var CacheComponent = 24; + var TracingMarkerComponent = 25; + var HostHoistable = 26; + var HostSingleton = 27; + var IncompleteFunctionComponent = 28; + + function getWrappedName(outerType, innerType, wrapperName) { + var functionName = innerType.displayName || innerType.name || ""; + return ( + outerType.displayName || + (functionName !== "" + ? wrapperName + "(" + functionName + ")" + : wrapperName) + ); + } // Keep in sync with shared/getComponentNameFromType + + function getContextName(type) { + return type.displayName || "Context"; + } + + function getComponentNameFromFiber(fiber) { + var tag = fiber.tag, + type = fiber.type; + + switch (tag) { + case CacheComponent: + return "Cache"; + + case ContextConsumer: + if (enableRenderableContext) { + var consumer = type; + return getContextName(consumer._context) + ".Consumer"; + } else { + var context = type; + return getContextName(context) + ".Consumer"; + } + + case ContextProvider: + if (enableRenderableContext) { + var _context = type; + return getContextName(_context) + ".Provider"; + } else { + var provider = type; + return getContextName(provider._context) + ".Provider"; + } + + case DehydratedFragment: + return "DehydratedFragment"; + + case ForwardRef: + return getWrappedName(type, type.render, "ForwardRef"); + + case Fragment: + return "Fragment"; + + case HostHoistable: + case HostSingleton: + case HostComponent: + // Host component type is the display name (e.g. "div", "View") + return type; + + case HostPortal: + return "Portal"; + + case HostRoot: + return "Root"; + + case HostText: + return "Text"; + + case LazyComponent: + // Name comes from the type in this case; we don't have a tag. + return getComponentNameFromType(type); + + case Mode: + if (type === REACT_STRICT_MODE_TYPE) { + // Don't be less specific than shared/getComponentNameFromType + return "StrictMode"; + } + + return "Mode"; + + case OffscreenComponent: + return "Offscreen"; + + case Profiler: + return "Profiler"; + + case ScopeComponent: + return "Scope"; + + case SuspenseComponent: + return "Suspense"; + + case SuspenseListComponent: + return "SuspenseList"; + + case TracingMarkerComponent: + return "TracingMarker"; + // The display name for these tags come from the user-provided type: + + case IncompleteClassComponent: + case IncompleteFunctionComponent: { + break; + } + + // Fallthrough + + case ClassComponent: + case FunctionComponent: + case MemoComponent: + case SimpleMemoComponent: + if (typeof type === "function") { + return type.displayName || type.name || null; + } + + if (typeof type === "string") { + return type; + } + + break; + + case LegacyHiddenComponent: { + return "LegacyHidden"; + } + } + + return null; + } + var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"); @@ -1625,6 +1796,10 @@ if (__DEV__) { if (hasValidRef(config)) { if (!enableRefAsProp) { ref = config.ref; + + { + ref = coerceStringRef(ref, ReactCurrentOwner.current, type); + } } { @@ -1638,7 +1813,15 @@ if (__DEV__) { propName !== "key" && (enableRefAsProp || propName !== "ref") ) { - props[propName] = config[propName]; + if (enableRefAsProp && !disableStringRefs && propName === "ref") { + props.ref = coerceStringRef( + config[propName], + ReactCurrentOwner.current, + type + ); + } else { + props[propName] = config[propName]; + } } } @@ -1760,6 +1943,10 @@ if (__DEV__) { if (hasValidRef(config)) { if (!enableRefAsProp) { ref = config.ref; + + { + ref = coerceStringRef(ref, ReactCurrentOwner.current, type); + } } { @@ -1786,7 +1973,15 @@ if (__DEV__) { propName !== "__self" && propName !== "__source" ) { - props[propName] = config[propName]; + if (enableRefAsProp && !disableStringRefs && propName === "ref") { + props.ref = coerceStringRef( + config[propName], + ReactCurrentOwner.current, + type + ); + } else { + props[propName] = config[propName]; + } } } } // Children can be more than one argument, and those are transferred onto @@ -1895,6 +2090,10 @@ if (__DEV__) { if (!enableRefAsProp) { // Silently steal the ref from the parent. ref = config.ref; + + { + ref = coerceStringRef(ref, owner, element.type); + } } owner = ReactCurrentOwner.current; @@ -1942,7 +2141,15 @@ if (__DEV__) { // Resolve default props props[propName] = defaultProps[propName]; } else { - props[propName] = config[propName]; + if (enableRefAsProp && !disableStringRefs && propName === "ref") { + props.ref = coerceStringRef( + config[propName], + owner, + element.type + ); + } else { + props[propName] = config[propName]; + } } } } @@ -2188,6 +2395,96 @@ if (__DEV__) { } } + function coerceStringRef(mixedRef, owner, type) { + var stringRef; + + if (typeof mixedRef === "string") { + stringRef = mixedRef; + } else { + if (typeof mixedRef === "number" || typeof mixedRef === "boolean") { + { + checkPropStringCoercion(mixedRef, "ref"); + } + + stringRef = "" + mixedRef; + } else { + return mixedRef; + } + } + + return stringRefAsCallbackRef.bind(null, stringRef, type, owner); + } + + function stringRefAsCallbackRef(stringRef, type, owner, value) { + if (!owner) { + throw new Error( + "Element ref was specified as a string (" + + stringRef + + ") 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://react.dev/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://react.dev/link/strict-mode-string-ref" + ); + } + + { + if ( + // Will already warn with "Function components cannot be given refs" + !(typeof type === "function" && !isReactClass(type)) + ) { + var componentName = getComponentNameFromFiber(owner) || "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://react.dev/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." + ); + } + + var refs = inst.refs; + + if (value === null) { + delete refs[stringRef]; + } else { + refs[stringRef] = value; + } + } + + function isReactClass(type) { + return type.prototype && type.prototype.isReactComponent; + } + var SEPARATOR = "."; var SUBSEPARATOR = ":"; /** diff --git a/compiled/facebook-www/React-prod.classic.js b/compiled/facebook-www/React-prod.classic.js index 1321fa9560ef4..706968843e67a 100644 --- a/compiled/facebook-www/React-prod.classic.js +++ b/compiled/facebook-www/React-prod.classic.js @@ -117,12 +117,21 @@ function jsxProd(type, config, maybeKey) { ref = null; void 0 !== maybeKey && (key = "" + maybeKey); void 0 !== config.key && (key = "" + config.key); - void 0 === config.ref || enableRefAsProp || (ref = config.ref); + void 0 === config.ref || + enableRefAsProp || + ((ref = config.ref), + (ref = coerceStringRef(ref, ReactCurrentOwner.current, type))); for (propName in config) hasOwnProperty.call(config, propName) && "key" !== propName && (enableRefAsProp || "ref" !== propName) && - (props[propName] = config[propName]); + (enableRefAsProp && "ref" === propName + ? (props.ref = coerceStringRef( + config[propName], + ReactCurrentOwner.current, + type + )) + : (props[propName] = config[propName])); if (!disableDefaultPropsExceptForClasses && type && type.defaultProps) for (propName in ((config = type.defaultProps), config)) void 0 === props[propName] && (props[propName] = config[propName]); @@ -154,6 +163,34 @@ function isValidElement(object) { object.$$typeof === REACT_ELEMENT_TYPE ); } +function coerceStringRef(mixedRef, owner, type) { + if ("string" !== typeof mixedRef) + if ("number" === typeof mixedRef || "boolean" === typeof mixedRef) + mixedRef = "" + mixedRef; + else return mixedRef; + return stringRefAsCallbackRef.bind(null, mixedRef, type, owner); +} +function stringRefAsCallbackRef(stringRef, type, owner, value) { + if (!owner) + throw Error( + "Element ref was specified as a string (" + + stringRef + + ") but no owner was set. This could happen for one of the following reasons:\n1. You may be adding a ref to a function component\n2. You may be adding a ref to a component that was not created inside a component's render method\n3. You have multiple copies of React loaded\nSee https://react.dev/link/refs-must-have-owner for more information." + ); + if (1 !== owner.tag) + throw Error( + "Function components cannot have string refs. We recommend using useRef() instead. Learn more about using refs safely here: https://react.dev/link/strict-mode-string-ref" + ); + type = owner.stateNode; + if (!type) + throw Error( + "Missing owner for string ref " + + stringRef + + ". This error is likely caused by a bug in React. Please file an issue." + ); + type = type.refs; + null === value ? delete type[stringRef] : (type[stringRef] = value); +} function escape(key) { var escaperLookup = { "=": "=0", ":": "=2" }; return ( @@ -428,7 +465,8 @@ exports.cloneElement = function (element, config, children) { owner = element._owner; if (null != config) { void 0 !== config.ref && - (enableRefAsProp || (ref = config.ref), + (enableRefAsProp || + ((ref = config.ref), (ref = coerceStringRef(ref, owner, element.type))), (owner = ReactCurrentOwner.current)); void 0 !== config.key && (key = "" + config.key); if ( @@ -444,12 +482,17 @@ exports.cloneElement = function (element, config, children) { "__self" === propName || "__source" === propName || (enableRefAsProp && "ref" === propName && void 0 === config.ref) || - (props[propName] = - disableDefaultPropsExceptForClasses || - void 0 !== config[propName] || - void 0 === defaultProps - ? config[propName] - : defaultProps[propName]); + (disableDefaultPropsExceptForClasses || + void 0 !== config[propName] || + void 0 === defaultProps + ? enableRefAsProp && "ref" === propName + ? (props.ref = coerceStringRef( + config[propName], + owner, + element.type + )) + : (props[propName] = config[propName]) + : (props[propName] = defaultProps[propName])); } var propName = arguments.length - 2; if (1 === propName) props.children = children; @@ -490,7 +533,8 @@ exports.createElement = function (type, config, children) { if (null != config) for (propName in (void 0 === config.ref || enableRefAsProp || - (ref = config.ref), + ((ref = config.ref), + (ref = coerceStringRef(ref, ReactCurrentOwner.current, type))), void 0 !== config.key && (key = "" + config.key), config)) hasOwnProperty.call(config, propName) && @@ -498,7 +542,13 @@ exports.createElement = function (type, config, children) { (enableRefAsProp || "ref" !== propName) && "__self" !== propName && "__source" !== propName && - (props[propName] = config[propName]); + (enableRefAsProp && "ref" === propName + ? (props.ref = coerceStringRef( + config[propName], + ReactCurrentOwner.current, + type + )) + : (props[propName] = config[propName])); var childrenLength = arguments.length - 2; if (1 === childrenLength) props.children = children; else if (1 < childrenLength) { @@ -652,4 +702,4 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "19.0.0-www-classic-6f7d270a"; +exports.version = "19.0.0-www-classic-9242ce67"; diff --git a/compiled/facebook-www/React-prod.modern.js b/compiled/facebook-www/React-prod.modern.js index 992e6e690015d..f2c1284b5b8a4 100644 --- a/compiled/facebook-www/React-prod.modern.js +++ b/compiled/facebook-www/React-prod.modern.js @@ -117,12 +117,21 @@ function jsxProd(type, config, maybeKey) { ref = null; void 0 !== maybeKey && (key = "" + maybeKey); void 0 !== config.key && (key = "" + config.key); - void 0 === config.ref || enableRefAsProp || (ref = config.ref); + void 0 === config.ref || + enableRefAsProp || + ((ref = config.ref), + (ref = coerceStringRef(ref, ReactCurrentOwner.current, type))); for (propName in config) hasOwnProperty.call(config, propName) && "key" !== propName && (enableRefAsProp || "ref" !== propName) && - (props[propName] = config[propName]); + (enableRefAsProp && "ref" === propName + ? (props.ref = coerceStringRef( + config[propName], + ReactCurrentOwner.current, + type + )) + : (props[propName] = config[propName])); if (!disableDefaultPropsExceptForClasses && type && type.defaultProps) for (propName in ((config = type.defaultProps), config)) void 0 === props[propName] && (props[propName] = config[propName]); @@ -154,6 +163,34 @@ function isValidElement(object) { object.$$typeof === REACT_ELEMENT_TYPE ); } +function coerceStringRef(mixedRef, owner, type) { + if ("string" !== typeof mixedRef) + if ("number" === typeof mixedRef || "boolean" === typeof mixedRef) + mixedRef = "" + mixedRef; + else return mixedRef; + return stringRefAsCallbackRef.bind(null, mixedRef, type, owner); +} +function stringRefAsCallbackRef(stringRef, type, owner, value) { + if (!owner) + throw Error( + "Element ref was specified as a string (" + + stringRef + + ") but no owner was set. This could happen for one of the following reasons:\n1. You may be adding a ref to a function component\n2. You may be adding a ref to a component that was not created inside a component's render method\n3. You have multiple copies of React loaded\nSee https://react.dev/link/refs-must-have-owner for more information." + ); + if (1 !== owner.tag) + throw Error( + "Function components cannot have string refs. We recommend using useRef() instead. Learn more about using refs safely here: https://react.dev/link/strict-mode-string-ref" + ); + type = owner.stateNode; + if (!type) + throw Error( + "Missing owner for string ref " + + stringRef + + ". This error is likely caused by a bug in React. Please file an issue." + ); + type = type.refs; + null === value ? delete type[stringRef] : (type[stringRef] = value); +} function escape(key) { var escaperLookup = { "=": "=0", ":": "=2" }; return ( @@ -428,7 +465,8 @@ exports.cloneElement = function (element, config, children) { owner = element._owner; if (null != config) { void 0 !== config.ref && - (enableRefAsProp || (ref = config.ref), + (enableRefAsProp || + ((ref = config.ref), (ref = coerceStringRef(ref, owner, element.type))), (owner = ReactCurrentOwner.current)); void 0 !== config.key && (key = "" + config.key); if ( @@ -444,12 +482,17 @@ exports.cloneElement = function (element, config, children) { "__self" === propName || "__source" === propName || (enableRefAsProp && "ref" === propName && void 0 === config.ref) || - (props[propName] = - disableDefaultPropsExceptForClasses || - void 0 !== config[propName] || - void 0 === defaultProps - ? config[propName] - : defaultProps[propName]); + (disableDefaultPropsExceptForClasses || + void 0 !== config[propName] || + void 0 === defaultProps + ? enableRefAsProp && "ref" === propName + ? (props.ref = coerceStringRef( + config[propName], + owner, + element.type + )) + : (props[propName] = config[propName]) + : (props[propName] = defaultProps[propName])); } var propName = arguments.length - 2; if (1 === propName) props.children = children; @@ -490,7 +533,8 @@ exports.createElement = function (type, config, children) { if (null != config) for (propName in (void 0 === config.ref || enableRefAsProp || - (ref = config.ref), + ((ref = config.ref), + (ref = coerceStringRef(ref, ReactCurrentOwner.current, type))), void 0 !== config.key && (key = "" + config.key), config)) hasOwnProperty.call(config, propName) && @@ -498,7 +542,13 @@ exports.createElement = function (type, config, children) { (enableRefAsProp || "ref" !== propName) && "__self" !== propName && "__source" !== propName && - (props[propName] = config[propName]); + (enableRefAsProp && "ref" === propName + ? (props.ref = coerceStringRef( + config[propName], + ReactCurrentOwner.current, + type + )) + : (props[propName] = config[propName])); var childrenLength = arguments.length - 2; if (1 === childrenLength) props.children = children; else if (1 < childrenLength) { @@ -652,4 +702,4 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "19.0.0-www-modern-6f7d270a"; +exports.version = "19.0.0-www-modern-9242ce67"; diff --git a/compiled/facebook-www/React-profiling.classic.js b/compiled/facebook-www/React-profiling.classic.js index 45d8fb65fe3c1..dde3c2f5471df 100644 --- a/compiled/facebook-www/React-profiling.classic.js +++ b/compiled/facebook-www/React-profiling.classic.js @@ -121,12 +121,21 @@ function jsxProd(type, config, maybeKey) { ref = null; void 0 !== maybeKey && (key = "" + maybeKey); void 0 !== config.key && (key = "" + config.key); - void 0 === config.ref || enableRefAsProp || (ref = config.ref); + void 0 === config.ref || + enableRefAsProp || + ((ref = config.ref), + (ref = coerceStringRef(ref, ReactCurrentOwner.current, type))); for (propName in config) hasOwnProperty.call(config, propName) && "key" !== propName && (enableRefAsProp || "ref" !== propName) && - (props[propName] = config[propName]); + (enableRefAsProp && "ref" === propName + ? (props.ref = coerceStringRef( + config[propName], + ReactCurrentOwner.current, + type + )) + : (props[propName] = config[propName])); if (!disableDefaultPropsExceptForClasses && type && type.defaultProps) for (propName in ((config = type.defaultProps), config)) void 0 === props[propName] && (props[propName] = config[propName]); @@ -158,6 +167,34 @@ function isValidElement(object) { object.$$typeof === REACT_ELEMENT_TYPE ); } +function coerceStringRef(mixedRef, owner, type) { + if ("string" !== typeof mixedRef) + if ("number" === typeof mixedRef || "boolean" === typeof mixedRef) + mixedRef = "" + mixedRef; + else return mixedRef; + return stringRefAsCallbackRef.bind(null, mixedRef, type, owner); +} +function stringRefAsCallbackRef(stringRef, type, owner, value) { + if (!owner) + throw Error( + "Element ref was specified as a string (" + + stringRef + + ") but no owner was set. This could happen for one of the following reasons:\n1. You may be adding a ref to a function component\n2. You may be adding a ref to a component that was not created inside a component's render method\n3. You have multiple copies of React loaded\nSee https://react.dev/link/refs-must-have-owner for more information." + ); + if (1 !== owner.tag) + throw Error( + "Function components cannot have string refs. We recommend using useRef() instead. Learn more about using refs safely here: https://react.dev/link/strict-mode-string-ref" + ); + type = owner.stateNode; + if (!type) + throw Error( + "Missing owner for string ref " + + stringRef + + ". This error is likely caused by a bug in React. Please file an issue." + ); + type = type.refs; + null === value ? delete type[stringRef] : (type[stringRef] = value); +} function escape(key) { var escaperLookup = { "=": "=0", ":": "=2" }; return ( @@ -432,7 +469,8 @@ exports.cloneElement = function (element, config, children) { owner = element._owner; if (null != config) { void 0 !== config.ref && - (enableRefAsProp || (ref = config.ref), + (enableRefAsProp || + ((ref = config.ref), (ref = coerceStringRef(ref, owner, element.type))), (owner = ReactCurrentOwner.current)); void 0 !== config.key && (key = "" + config.key); if ( @@ -448,12 +486,17 @@ exports.cloneElement = function (element, config, children) { "__self" === propName || "__source" === propName || (enableRefAsProp && "ref" === propName && void 0 === config.ref) || - (props[propName] = - disableDefaultPropsExceptForClasses || - void 0 !== config[propName] || - void 0 === defaultProps - ? config[propName] - : defaultProps[propName]); + (disableDefaultPropsExceptForClasses || + void 0 !== config[propName] || + void 0 === defaultProps + ? enableRefAsProp && "ref" === propName + ? (props.ref = coerceStringRef( + config[propName], + owner, + element.type + )) + : (props[propName] = config[propName]) + : (props[propName] = defaultProps[propName])); } var propName = arguments.length - 2; if (1 === propName) props.children = children; @@ -494,7 +537,8 @@ exports.createElement = function (type, config, children) { if (null != config) for (propName in (void 0 === config.ref || enableRefAsProp || - (ref = config.ref), + ((ref = config.ref), + (ref = coerceStringRef(ref, ReactCurrentOwner.current, type))), void 0 !== config.key && (key = "" + config.key), config)) hasOwnProperty.call(config, propName) && @@ -502,7 +546,13 @@ exports.createElement = function (type, config, children) { (enableRefAsProp || "ref" !== propName) && "__self" !== propName && "__source" !== propName && - (props[propName] = config[propName]); + (enableRefAsProp && "ref" === propName + ? (props.ref = coerceStringRef( + config[propName], + ReactCurrentOwner.current, + type + )) + : (props[propName] = config[propName])); var childrenLength = arguments.length - 2; if (1 === childrenLength) props.children = children; else if (1 < childrenLength) { @@ -656,7 +706,7 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "19.0.0-www-classic-26c19df2"; +exports.version = "19.0.0-www-classic-d6f5b788"; "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && diff --git a/compiled/facebook-www/React-profiling.modern.js b/compiled/facebook-www/React-profiling.modern.js index 4ef4a951e7351..1374d74a7bbb1 100644 --- a/compiled/facebook-www/React-profiling.modern.js +++ b/compiled/facebook-www/React-profiling.modern.js @@ -121,12 +121,21 @@ function jsxProd(type, config, maybeKey) { ref = null; void 0 !== maybeKey && (key = "" + maybeKey); void 0 !== config.key && (key = "" + config.key); - void 0 === config.ref || enableRefAsProp || (ref = config.ref); + void 0 === config.ref || + enableRefAsProp || + ((ref = config.ref), + (ref = coerceStringRef(ref, ReactCurrentOwner.current, type))); for (propName in config) hasOwnProperty.call(config, propName) && "key" !== propName && (enableRefAsProp || "ref" !== propName) && - (props[propName] = config[propName]); + (enableRefAsProp && "ref" === propName + ? (props.ref = coerceStringRef( + config[propName], + ReactCurrentOwner.current, + type + )) + : (props[propName] = config[propName])); if (!disableDefaultPropsExceptForClasses && type && type.defaultProps) for (propName in ((config = type.defaultProps), config)) void 0 === props[propName] && (props[propName] = config[propName]); @@ -158,6 +167,34 @@ function isValidElement(object) { object.$$typeof === REACT_ELEMENT_TYPE ); } +function coerceStringRef(mixedRef, owner, type) { + if ("string" !== typeof mixedRef) + if ("number" === typeof mixedRef || "boolean" === typeof mixedRef) + mixedRef = "" + mixedRef; + else return mixedRef; + return stringRefAsCallbackRef.bind(null, mixedRef, type, owner); +} +function stringRefAsCallbackRef(stringRef, type, owner, value) { + if (!owner) + throw Error( + "Element ref was specified as a string (" + + stringRef + + ") but no owner was set. This could happen for one of the following reasons:\n1. You may be adding a ref to a function component\n2. You may be adding a ref to a component that was not created inside a component's render method\n3. You have multiple copies of React loaded\nSee https://react.dev/link/refs-must-have-owner for more information." + ); + if (1 !== owner.tag) + throw Error( + "Function components cannot have string refs. We recommend using useRef() instead. Learn more about using refs safely here: https://react.dev/link/strict-mode-string-ref" + ); + type = owner.stateNode; + if (!type) + throw Error( + "Missing owner for string ref " + + stringRef + + ". This error is likely caused by a bug in React. Please file an issue." + ); + type = type.refs; + null === value ? delete type[stringRef] : (type[stringRef] = value); +} function escape(key) { var escaperLookup = { "=": "=0", ":": "=2" }; return ( @@ -432,7 +469,8 @@ exports.cloneElement = function (element, config, children) { owner = element._owner; if (null != config) { void 0 !== config.ref && - (enableRefAsProp || (ref = config.ref), + (enableRefAsProp || + ((ref = config.ref), (ref = coerceStringRef(ref, owner, element.type))), (owner = ReactCurrentOwner.current)); void 0 !== config.key && (key = "" + config.key); if ( @@ -448,12 +486,17 @@ exports.cloneElement = function (element, config, children) { "__self" === propName || "__source" === propName || (enableRefAsProp && "ref" === propName && void 0 === config.ref) || - (props[propName] = - disableDefaultPropsExceptForClasses || - void 0 !== config[propName] || - void 0 === defaultProps - ? config[propName] - : defaultProps[propName]); + (disableDefaultPropsExceptForClasses || + void 0 !== config[propName] || + void 0 === defaultProps + ? enableRefAsProp && "ref" === propName + ? (props.ref = coerceStringRef( + config[propName], + owner, + element.type + )) + : (props[propName] = config[propName]) + : (props[propName] = defaultProps[propName])); } var propName = arguments.length - 2; if (1 === propName) props.children = children; @@ -494,7 +537,8 @@ exports.createElement = function (type, config, children) { if (null != config) for (propName in (void 0 === config.ref || enableRefAsProp || - (ref = config.ref), + ((ref = config.ref), + (ref = coerceStringRef(ref, ReactCurrentOwner.current, type))), void 0 !== config.key && (key = "" + config.key), config)) hasOwnProperty.call(config, propName) && @@ -502,7 +546,13 @@ exports.createElement = function (type, config, children) { (enableRefAsProp || "ref" !== propName) && "__self" !== propName && "__source" !== propName && - (props[propName] = config[propName]); + (enableRefAsProp && "ref" === propName + ? (props.ref = coerceStringRef( + config[propName], + ReactCurrentOwner.current, + type + )) + : (props[propName] = config[propName])); var childrenLength = arguments.length - 2; if (1 === childrenLength) props.children = children; else if (1 < childrenLength) { @@ -656,7 +706,7 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "19.0.0-www-modern-26c19df2"; +exports.version = "19.0.0-www-modern-d6f5b788"; "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 e2a97177ee887..f5713dc3a4846 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 = "19.0.0-www-classic-e11823db"; + var ReactVersion = "19.0.0-www-classic-9e7fc0a7"; var LegacyRoot = 0; var ConcurrentRoot = 1; @@ -6619,81 +6619,6 @@ if (__DEV__) { }; } - /* - * The `'' + value` pattern (used in perf-sensitive code) throws for Symbol - * and Temporal.* types. See https://github.com/facebook/react/pull/22064. - * - * The functions in this module will throw an easier-to-understand, - * easier-to-debug exception with a clear errors message message explaining the - * problem. (Instead of a confusing exception thrown inside the implementation - * of the `value` object). - */ - // $FlowFixMe[incompatible-return] only called in DEV, so void return is not possible. - function typeName(value) { - { - // toStringTag is needed for namespaced types like Temporal.Instant - var hasToStringTag = typeof Symbol === "function" && Symbol.toStringTag; - var type = - (hasToStringTag && value[Symbol.toStringTag]) || - value.constructor.name || - "Object"; // $FlowFixMe[incompatible-return] - - return type; - } - } // $FlowFixMe[incompatible-return] only called in DEV, so void return is not possible. - - function willCoercionThrow(value) { - { - try { - testStringCoercion(value); - return false; - } catch (e) { - return true; - } - } - } - - function testStringCoercion(value) { - // If you ended up here by following an exception call stack, here's what's - // happened: you supplied an object or symbol value to React (as a prop, key, - // DOM attribute, CSS property, string ref, etc.) and when React tried to - // coerce it to a string using `'' + value`, an exception was thrown. - // - // The most common types that will cause this exception are `Symbol` instances - // and Temporal objects like `Temporal.Instant`. But any object that has a - // `valueOf` or `[Symbol.toPrimitive]` method that throws will also cause this - // exception. (Library authors do this to prevent users from using built-in - // numeric operators like `+` or comparison operators like `>=` because custom - // methods are needed to perform accurate arithmetic or comparison.) - // - // To fix the problem, coerce this object or symbol value to a string before - // passing it to React. The most reliable way is usually `String(value)`. - // - // To find which value is throwing, check the browser or debugger console. - // Before this exception was thrown, there should be `console.error` output - // that shows the type (Symbol, Temporal.PlainDate, etc.) that caused the - // problem and how that type was used: key, atrribute, input value prop, etc. - // In most cases, this console output also shows the component and its - // ancestor components where the exception happened. - // - // eslint-disable-next-line react-internal/safe-string-coercion - return "" + value; - } - function checkPropStringCoercion(value, propName) { - { - if (willCoercionThrow(value)) { - error( - "The provided `%s` prop is an unsupported type %s." + - " This value must be coerced to a string before using it here.", - propName, - typeName(value) - ); - - return testStringCoercion(value); // throw (to help callers find troubleshooting comments) - } - } - } - var ReactCurrentActQueue$3 = ReactSharedInternals.ReactCurrentActQueue; function getThenablesFromState(state) { @@ -6973,7 +6898,6 @@ if (__DEV__) { var didWarnAboutMaps; var didWarnAboutGenerators; - var didWarnAboutStringRefs; var ownerHasKeyUseWarning; var ownerHasFunctionTypeWarning; var ownerHasSymbolTypeWarning; @@ -6983,7 +6907,6 @@ if (__DEV__) { { didWarnAboutMaps = false; didWarnAboutGenerators = false; - didWarnAboutStringRefs = {}; /** * Warn if there's no key explicitly set on dynamic arrays of children or * object keys are not valid. This allows us to keep track of children between @@ -7028,10 +6951,6 @@ if (__DEV__) { }; } - function isReactClass(type) { - return type.prototype && type.prototype.isReactComponent; - } - function unwrapThenable(thenable) { var index = thenableIndexCounter$1; thenableIndexCounter$1 += 1; @@ -7043,159 +6962,22 @@ if (__DEV__) { return trackUsedThenable(thenableState$1, thenable, index); } - function convertStringRefToCallbackRef( - returnFiber, - current, - element, - mixedRef - ) { - { - checkPropStringCoercion(mixedRef, "ref"); - } - - var stringRef = "" + mixedRef; - var owner = element._owner; - - if (!owner) { - throw new Error( - "Element ref was specified as a string (" + - stringRef + - ") 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://react.dev/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://react.dev/link/strict-mode-string-ref" - ); - } - - { - 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://react.dev/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; + var ref; if (enableRefAsProp) { // TODO: This is a temporary, intermediate step. When enableRefAsProp is on, // we should resolve the `ref` prop during the begin phase of the component // it's attached to (HostComponent, ClassComponent, etc). var refProp = element.props.ref; - mixedRef = refProp !== undefined ? refProp : null; + ref = refProp !== undefined ? refProp : null; } else { // Old behavior. - mixedRef = element.ref; - } - - var coercedRef; - - if ( - typeof mixedRef === "string" || - typeof mixedRef === "number" || - typeof mixedRef === "boolean" - ) { - coercedRef = convertStringRefToCallbackRef( - returnFiber, - current, - element, - mixedRef - ); - - if (enableRefAsProp) { - // 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. - var userProvidedProps = workInProgress.pendingProps; - var propsWithInternalCallbackRef = assign({}, userProvidedProps); - propsWithInternalCallbackRef.ref = coercedRef; - workInProgress.pendingProps = propsWithInternalCallbackRef; - } - } else { - coercedRef = mixedRef; + ref = element.ref; } // TODO: If enableRefAsProp is on, we shouldn't use the `ref` field. We // should always read the ref from the prop. - workInProgress.ref = coercedRef; + workInProgress.ref = ref; } function throwOnInvalidObjectType(returnFiber, newChild) { diff --git a/compiled/facebook-www/ReactART-dev.modern.js b/compiled/facebook-www/ReactART-dev.modern.js index 231de1c158879..f7ccbd9d3183c 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 = "19.0.0-www-modern-ab20b5da"; + var ReactVersion = "19.0.0-www-modern-00004fce"; var LegacyRoot = 0; var ConcurrentRoot = 1; @@ -6370,81 +6370,6 @@ if (__DEV__) { }; } - /* - * The `'' + value` pattern (used in perf-sensitive code) throws for Symbol - * and Temporal.* types. See https://github.com/facebook/react/pull/22064. - * - * The functions in this module will throw an easier-to-understand, - * easier-to-debug exception with a clear errors message message explaining the - * problem. (Instead of a confusing exception thrown inside the implementation - * of the `value` object). - */ - // $FlowFixMe[incompatible-return] only called in DEV, so void return is not possible. - function typeName(value) { - { - // toStringTag is needed for namespaced types like Temporal.Instant - var hasToStringTag = typeof Symbol === "function" && Symbol.toStringTag; - var type = - (hasToStringTag && value[Symbol.toStringTag]) || - value.constructor.name || - "Object"; // $FlowFixMe[incompatible-return] - - return type; - } - } // $FlowFixMe[incompatible-return] only called in DEV, so void return is not possible. - - function willCoercionThrow(value) { - { - try { - testStringCoercion(value); - return false; - } catch (e) { - return true; - } - } - } - - function testStringCoercion(value) { - // If you ended up here by following an exception call stack, here's what's - // happened: you supplied an object or symbol value to React (as a prop, key, - // DOM attribute, CSS property, string ref, etc.) and when React tried to - // coerce it to a string using `'' + value`, an exception was thrown. - // - // The most common types that will cause this exception are `Symbol` instances - // and Temporal objects like `Temporal.Instant`. But any object that has a - // `valueOf` or `[Symbol.toPrimitive]` method that throws will also cause this - // exception. (Library authors do this to prevent users from using built-in - // numeric operators like `+` or comparison operators like `>=` because custom - // methods are needed to perform accurate arithmetic or comparison.) - // - // To fix the problem, coerce this object or symbol value to a string before - // passing it to React. The most reliable way is usually `String(value)`. - // - // To find which value is throwing, check the browser or debugger console. - // Before this exception was thrown, there should be `console.error` output - // that shows the type (Symbol, Temporal.PlainDate, etc.) that caused the - // problem and how that type was used: key, atrribute, input value prop, etc. - // In most cases, this console output also shows the component and its - // ancestor components where the exception happened. - // - // eslint-disable-next-line react-internal/safe-string-coercion - return "" + value; - } - function checkPropStringCoercion(value, propName) { - { - if (willCoercionThrow(value)) { - error( - "The provided `%s` prop is an unsupported type %s." + - " This value must be coerced to a string before using it here.", - propName, - typeName(value) - ); - - return testStringCoercion(value); // throw (to help callers find troubleshooting comments) - } - } - } - var ReactCurrentActQueue$3 = ReactSharedInternals.ReactCurrentActQueue; function getThenablesFromState(state) { @@ -6724,7 +6649,6 @@ if (__DEV__) { var didWarnAboutMaps; var didWarnAboutGenerators; - var didWarnAboutStringRefs; var ownerHasKeyUseWarning; var ownerHasFunctionTypeWarning; var ownerHasSymbolTypeWarning; @@ -6734,7 +6658,6 @@ if (__DEV__) { { didWarnAboutMaps = false; didWarnAboutGenerators = false; - didWarnAboutStringRefs = {}; /** * Warn if there's no key explicitly set on dynamic arrays of children or * object keys are not valid. This allows us to keep track of children between @@ -6779,10 +6702,6 @@ if (__DEV__) { }; } - function isReactClass(type) { - return type.prototype && type.prototype.isReactComponent; - } - function unwrapThenable(thenable) { var index = thenableIndexCounter$1; thenableIndexCounter$1 += 1; @@ -6794,159 +6713,22 @@ if (__DEV__) { return trackUsedThenable(thenableState$1, thenable, index); } - function convertStringRefToCallbackRef( - returnFiber, - current, - element, - mixedRef - ) { - { - checkPropStringCoercion(mixedRef, "ref"); - } - - var stringRef = "" + mixedRef; - var owner = element._owner; - - if (!owner) { - throw new Error( - "Element ref was specified as a string (" + - stringRef + - ") 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://react.dev/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://react.dev/link/strict-mode-string-ref" - ); - } - - { - 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://react.dev/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; + var ref; if (enableRefAsProp) { // TODO: This is a temporary, intermediate step. When enableRefAsProp is on, // we should resolve the `ref` prop during the begin phase of the component // it's attached to (HostComponent, ClassComponent, etc). var refProp = element.props.ref; - mixedRef = refProp !== undefined ? refProp : null; + ref = refProp !== undefined ? refProp : null; } else { // Old behavior. - mixedRef = element.ref; - } - - var coercedRef; - - if ( - typeof mixedRef === "string" || - typeof mixedRef === "number" || - typeof mixedRef === "boolean" - ) { - coercedRef = convertStringRefToCallbackRef( - returnFiber, - current, - element, - mixedRef - ); - - if (enableRefAsProp) { - // 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. - var userProvidedProps = workInProgress.pendingProps; - var propsWithInternalCallbackRef = assign({}, userProvidedProps); - propsWithInternalCallbackRef.ref = coercedRef; - workInProgress.pendingProps = propsWithInternalCallbackRef; - } - } else { - coercedRef = mixedRef; + ref = element.ref; } // TODO: If enableRefAsProp is on, we shouldn't use the `ref` field. We // should always read the ref from the prop. - workInProgress.ref = coercedRef; + workInProgress.ref = ref; } function throwOnInvalidObjectType(returnFiber, newChild) { diff --git a/compiled/facebook-www/ReactART-prod.classic.js b/compiled/facebook-www/ReactART-prod.classic.js index 13dbf26912917..7f9f688875ca1 100644 --- a/compiled/facebook-www/ReactART-prod.classic.js +++ b/compiled/facebook-www/ReactART-prod.classic.js @@ -1770,51 +1770,11 @@ function unwrapThenable(thenable) { null === thenableState$1 && (thenableState$1 = []); return trackUsedThenable(thenableState$1, thenable, index); } -function convertStringRefToCallbackRef( - returnFiber, - current, - element, - mixedRef -) { - function ref(value) { - var refs = inst.refs; - null === value ? delete refs[stringRef] : (refs[stringRef] = value); - } - var stringRef = "" + mixedRef; - returnFiber = element._owner; - if (!returnFiber) throw Error(formatProdErrorMessage(290, stringRef)); - if (1 !== returnFiber.tag) throw Error(formatProdErrorMessage(309)); - var 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) { - if (enableRefAsProp) { - var mixedRef = element.props.ref; - mixedRef = void 0 !== mixedRef ? mixedRef : null; - } else mixedRef = element.ref; - "string" === typeof mixedRef || - "number" === typeof mixedRef || - "boolean" === typeof mixedRef - ? ((returnFiber = convertStringRefToCallbackRef( - returnFiber, - current, - element, - mixedRef - )), - enableRefAsProp && - ((current = assign({}, workInProgress.pendingProps)), - (current.ref = returnFiber), - (workInProgress.pendingProps = current))) - : (returnFiber = mixedRef); + enableRefAsProp + ? ((returnFiber = element.props.ref), + (returnFiber = void 0 !== returnFiber ? returnFiber : null)) + : (returnFiber = element.ref); workInProgress.ref = returnFiber; } function throwOnInvalidObjectType(returnFiber, newChild) { @@ -10696,7 +10656,7 @@ var slice = Array.prototype.slice, return null; }, bundleType: 0, - version: "19.0.0-www-classic-442df77a", + version: "19.0.0-www-classic-af06bc84", rendererPackageName: "react-art" }; var internals$jscomp$inline_1317 = { @@ -10727,7 +10687,7 @@ var internals$jscomp$inline_1317 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "19.0.0-www-classic-442df77a" + reconcilerVersion: "19.0.0-www-classic-af06bc84" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_1318 = __REACT_DEVTOOLS_GLOBAL_HOOK__; diff --git a/compiled/facebook-www/ReactART-prod.modern.js b/compiled/facebook-www/ReactART-prod.modern.js index ffe1fd3530f2d..fea8bcc1278bf 100644 --- a/compiled/facebook-www/ReactART-prod.modern.js +++ b/compiled/facebook-www/ReactART-prod.modern.js @@ -1568,51 +1568,11 @@ function unwrapThenable(thenable) { null === thenableState$1 && (thenableState$1 = []); return trackUsedThenable(thenableState$1, thenable, index); } -function convertStringRefToCallbackRef( - returnFiber, - current, - element, - mixedRef -) { - function ref(value) { - var refs = inst.refs; - null === value ? delete refs[stringRef] : (refs[stringRef] = value); - } - var stringRef = "" + mixedRef; - returnFiber = element._owner; - if (!returnFiber) throw Error(formatProdErrorMessage(290, stringRef)); - if (1 !== returnFiber.tag) throw Error(formatProdErrorMessage(309)); - var 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) { - if (enableRefAsProp) { - var mixedRef = element.props.ref; - mixedRef = void 0 !== mixedRef ? mixedRef : null; - } else mixedRef = element.ref; - "string" === typeof mixedRef || - "number" === typeof mixedRef || - "boolean" === typeof mixedRef - ? ((returnFiber = convertStringRefToCallbackRef( - returnFiber, - current, - element, - mixedRef - )), - enableRefAsProp && - ((current = assign({}, workInProgress.pendingProps)), - (current.ref = returnFiber), - (workInProgress.pendingProps = current))) - : (returnFiber = mixedRef); + enableRefAsProp + ? ((returnFiber = element.props.ref), + (returnFiber = void 0 !== returnFiber ? returnFiber : null)) + : (returnFiber = element.ref); workInProgress.ref = returnFiber; } function throwOnInvalidObjectType(returnFiber, newChild) { @@ -10168,7 +10128,7 @@ var slice = Array.prototype.slice, return null; }, bundleType: 0, - version: "19.0.0-www-modern-292e1686", + version: "19.0.0-www-modern-c966ba03", rendererPackageName: "react-art" }; var internals$jscomp$inline_1298 = { @@ -10199,7 +10159,7 @@ var internals$jscomp$inline_1298 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "19.0.0-www-modern-292e1686" + reconcilerVersion: "19.0.0-www-modern-c966ba03" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_1299 = __REACT_DEVTOOLS_GLOBAL_HOOK__; diff --git a/compiled/facebook-www/ReactDOM-dev.classic.js b/compiled/facebook-www/ReactDOM-dev.classic.js index 2da877e887987..7b4d4351645cd 100644 --- a/compiled/facebook-www/ReactDOM-dev.classic.js +++ b/compiled/facebook-www/ReactDOM-dev.classic.js @@ -2981,20 +2981,6 @@ if (__DEV__) { } } } - function checkPropStringCoercion(value, propName) { - { - if (willCoercionThrow(value)) { - error( - "The provided `%s` prop is an unsupported type %s." + - " This value must be coerced to a string before using it here.", - propName, - typeName(value) - ); - - return testStringCoercion(value); // throw (to help callers find troubleshooting comments) - } - } - } function checkCSSPropertyStringCoercion(value, propName) { { if (willCoercionThrow(value)) { @@ -11432,7 +11418,6 @@ if (__DEV__) { var didWarnAboutMaps; var didWarnAboutGenerators; - var didWarnAboutStringRefs; var ownerHasKeyUseWarning; var ownerHasFunctionTypeWarning; var ownerHasSymbolTypeWarning; @@ -11442,7 +11427,6 @@ if (__DEV__) { { didWarnAboutMaps = false; didWarnAboutGenerators = false; - didWarnAboutStringRefs = {}; /** * Warn if there's no key explicitly set on dynamic arrays of children or * object keys are not valid. This allows us to keep track of children between @@ -11487,10 +11471,6 @@ if (__DEV__) { }; } - function isReactClass(type) { - return type.prototype && type.prototype.isReactComponent; - } - function unwrapThenable(thenable) { var index = thenableIndexCounter$1; thenableIndexCounter$1 += 1; @@ -11502,159 +11482,22 @@ if (__DEV__) { return trackUsedThenable(thenableState$1, thenable, index); } - function convertStringRefToCallbackRef( - returnFiber, - current, - element, - mixedRef - ) { - { - checkPropStringCoercion(mixedRef, "ref"); - } - - var stringRef = "" + mixedRef; - var owner = element._owner; - - if (!owner) { - throw new Error( - "Element ref was specified as a string (" + - stringRef + - ") 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://react.dev/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://react.dev/link/strict-mode-string-ref" - ); - } - - { - 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://react.dev/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; + var ref; if (enableRefAsProp) { // TODO: This is a temporary, intermediate step. When enableRefAsProp is on, // we should resolve the `ref` prop during the begin phase of the component // it's attached to (HostComponent, ClassComponent, etc). var refProp = element.props.ref; - mixedRef = refProp !== undefined ? refProp : null; + ref = refProp !== undefined ? refProp : null; } else { // Old behavior. - mixedRef = element.ref; - } - - var coercedRef; - - if ( - typeof mixedRef === "string" || - typeof mixedRef === "number" || - typeof mixedRef === "boolean" - ) { - coercedRef = convertStringRefToCallbackRef( - returnFiber, - current, - element, - mixedRef - ); - - if (enableRefAsProp) { - // 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. - var userProvidedProps = workInProgress.pendingProps; - var propsWithInternalCallbackRef = assign({}, userProvidedProps); - propsWithInternalCallbackRef.ref = coercedRef; - workInProgress.pendingProps = propsWithInternalCallbackRef; - } - } else { - coercedRef = mixedRef; + ref = element.ref; } // TODO: If enableRefAsProp is on, we shouldn't use the `ref` field. We // should always read the ref from the prop. - workInProgress.ref = coercedRef; + workInProgress.ref = ref; } function throwOnInvalidObjectType(returnFiber, newChild) { @@ -36260,7 +36103,7 @@ if (__DEV__) { return root; } - var ReactVersion = "19.0.0-www-classic-82184e0e"; + var ReactVersion = "19.0.0-www-classic-0c1cc9db"; function createPortal$1( children, diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js index e2aca2db89dc5..14b96b90074f9 100644 --- a/compiled/facebook-www/ReactDOM-dev.modern.js +++ b/compiled/facebook-www/ReactDOM-dev.modern.js @@ -2933,20 +2933,6 @@ if (__DEV__) { } } } - function checkPropStringCoercion(value, propName) { - { - if (willCoercionThrow(value)) { - error( - "The provided `%s` prop is an unsupported type %s." + - " This value must be coerced to a string before using it here.", - propName, - typeName(value) - ); - - return testStringCoercion(value); // throw (to help callers find troubleshooting comments) - } - } - } function checkCSSPropertyStringCoercion(value, propName) { { if (willCoercionThrow(value)) { @@ -21633,7 +21619,6 @@ if (__DEV__) { var didWarnAboutMaps; var didWarnAboutGenerators; - var didWarnAboutStringRefs; var ownerHasKeyUseWarning; var ownerHasFunctionTypeWarning; var ownerHasSymbolTypeWarning; @@ -21643,7 +21628,6 @@ if (__DEV__) { { didWarnAboutMaps = false; didWarnAboutGenerators = false; - didWarnAboutStringRefs = {}; /** * Warn if there's no key explicitly set on dynamic arrays of children or * object keys are not valid. This allows us to keep track of children between @@ -21688,10 +21672,6 @@ if (__DEV__) { }; } - function isReactClass(type) { - return type.prototype && type.prototype.isReactComponent; - } - function unwrapThenable(thenable) { var index = thenableIndexCounter$1; thenableIndexCounter$1 += 1; @@ -21703,159 +21683,22 @@ if (__DEV__) { return trackUsedThenable(thenableState$1, thenable, index); } - function convertStringRefToCallbackRef( - returnFiber, - current, - element, - mixedRef - ) { - { - checkPropStringCoercion(mixedRef, "ref"); - } - - var stringRef = "" + mixedRef; - var owner = element._owner; - - if (!owner) { - throw new Error( - "Element ref was specified as a string (" + - stringRef + - ") 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://react.dev/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://react.dev/link/strict-mode-string-ref" - ); - } - - { - 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://react.dev/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; + var ref; if (enableRefAsProp) { // TODO: This is a temporary, intermediate step. When enableRefAsProp is on, // we should resolve the `ref` prop during the begin phase of the component // it's attached to (HostComponent, ClassComponent, etc). var refProp = element.props.ref; - mixedRef = refProp !== undefined ? refProp : null; + ref = refProp !== undefined ? refProp : null; } else { // Old behavior. - mixedRef = element.ref; - } - - var coercedRef; - - if ( - typeof mixedRef === "string" || - typeof mixedRef === "number" || - typeof mixedRef === "boolean" - ) { - coercedRef = convertStringRefToCallbackRef( - returnFiber, - current, - element, - mixedRef - ); - - if (enableRefAsProp) { - // 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. - var userProvidedProps = workInProgress.pendingProps; - var propsWithInternalCallbackRef = assign({}, userProvidedProps); - propsWithInternalCallbackRef.ref = coercedRef; - workInProgress.pendingProps = propsWithInternalCallbackRef; - } - } else { - coercedRef = mixedRef; + ref = element.ref; } // TODO: If enableRefAsProp is on, we shouldn't use the `ref` field. We // should always read the ref from the prop. - workInProgress.ref = coercedRef; + workInProgress.ref = ref; } function throwOnInvalidObjectType(returnFiber, newChild) { @@ -45754,7 +45597,7 @@ if (__DEV__) { return root; } - var ReactVersion = "19.0.0-www-modern-bedb0a17"; + var ReactVersion = "19.0.0-www-modern-db49be34"; function createPortal$1( children, diff --git a/compiled/facebook-www/ReactDOM-prod.classic.js b/compiled/facebook-www/ReactDOM-prod.classic.js index 1ab5ec53f56a8..3afe6d319140e 100644 --- a/compiled/facebook-www/ReactDOM-prod.classic.js +++ b/compiled/facebook-www/ReactDOM-prod.classic.js @@ -2470,51 +2470,11 @@ function unwrapThenable(thenable) { null === thenableState$1 && (thenableState$1 = []); return trackUsedThenable(thenableState$1, thenable, index); } -function convertStringRefToCallbackRef( - returnFiber, - current, - element, - mixedRef -) { - function ref(value) { - var refs = inst.refs; - null === value ? delete refs[stringRef] : (refs[stringRef] = value); - } - var stringRef = "" + mixedRef; - returnFiber = element._owner; - if (!returnFiber) throw Error(formatProdErrorMessage(290, stringRef)); - if (1 !== returnFiber.tag) throw Error(formatProdErrorMessage(309)); - var 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) { - if (enableRefAsProp) { - var mixedRef = element.props.ref; - mixedRef = void 0 !== mixedRef ? mixedRef : null; - } else mixedRef = element.ref; - "string" === typeof mixedRef || - "number" === typeof mixedRef || - "boolean" === typeof mixedRef - ? ((returnFiber = convertStringRefToCallbackRef( - returnFiber, - current, - element, - mixedRef - )), - enableRefAsProp && - ((current = assign({}, workInProgress.pendingProps)), - (current.ref = returnFiber), - (workInProgress.pendingProps = current))) - : (returnFiber = mixedRef); + enableRefAsProp + ? ((returnFiber = element.props.ref), + (returnFiber = void 0 !== returnFiber ? returnFiber : null)) + : (returnFiber = element.ref); workInProgress.ref = returnFiber; } function throwOnInvalidObjectType(returnFiber, newChild) { @@ -17016,7 +16976,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1704 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "19.0.0-www-classic-6a77288c", + version: "19.0.0-www-classic-eb76aae4", rendererPackageName: "react-dom" }; var internals$jscomp$inline_2134 = { @@ -17046,7 +17006,7 @@ var internals$jscomp$inline_2134 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "19.0.0-www-classic-6a77288c" + reconcilerVersion: "19.0.0-www-classic-eb76aae4" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2135 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -17502,4 +17462,4 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); }; -exports.version = "19.0.0-www-classic-6a77288c"; +exports.version = "19.0.0-www-classic-eb76aae4"; diff --git a/compiled/facebook-www/ReactDOM-prod.modern.js b/compiled/facebook-www/ReactDOM-prod.modern.js index b5aa706558181..76ae796c6c4f7 100644 --- a/compiled/facebook-www/ReactDOM-prod.modern.js +++ b/compiled/facebook-www/ReactDOM-prod.modern.js @@ -6085,51 +6085,11 @@ function unwrapThenable(thenable) { null === thenableState$1 && (thenableState$1 = []); return trackUsedThenable(thenableState$1, thenable, index); } -function convertStringRefToCallbackRef( - returnFiber, - current, - element, - mixedRef -) { - function ref(value) { - var refs = inst.refs; - null === value ? delete refs[stringRef] : (refs[stringRef] = value); - } - var stringRef = "" + mixedRef; - returnFiber = element._owner; - if (!returnFiber) throw Error(formatProdErrorMessage(290, stringRef)); - if (1 !== returnFiber.tag) throw Error(formatProdErrorMessage(309)); - var 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) { - if (enableRefAsProp) { - var mixedRef = element.props.ref; - mixedRef = void 0 !== mixedRef ? mixedRef : null; - } else mixedRef = element.ref; - "string" === typeof mixedRef || - "number" === typeof mixedRef || - "boolean" === typeof mixedRef - ? ((returnFiber = convertStringRefToCallbackRef( - returnFiber, - current, - element, - mixedRef - )), - enableRefAsProp && - ((current = assign({}, workInProgress.pendingProps)), - (current.ref = returnFiber), - (workInProgress.pendingProps = current))) - : (returnFiber = mixedRef); + enableRefAsProp + ? ((returnFiber = element.props.ref), + (returnFiber = void 0 !== returnFiber ? returnFiber : null)) + : (returnFiber = element.ref); workInProgress.ref = returnFiber; } function throwOnInvalidObjectType(returnFiber, newChild) { @@ -16391,7 +16351,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1687 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "19.0.0-www-modern-182c8cda", + version: "19.0.0-www-modern-752edf1c", rendererPackageName: "react-dom" }; var internals$jscomp$inline_2114 = { @@ -16421,7 +16381,7 @@ var internals$jscomp$inline_2114 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "19.0.0-www-modern-182c8cda" + reconcilerVersion: "19.0.0-www-modern-752edf1c" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2115 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -16724,4 +16684,4 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); }; -exports.version = "19.0.0-www-modern-182c8cda"; +exports.version = "19.0.0-www-modern-752edf1c"; diff --git a/compiled/facebook-www/ReactDOM-profiling.classic.js b/compiled/facebook-www/ReactDOM-profiling.classic.js index 26b40e0491dc3..1fb7ee78a516e 100644 --- a/compiled/facebook-www/ReactDOM-profiling.classic.js +++ b/compiled/facebook-www/ReactDOM-profiling.classic.js @@ -2606,51 +2606,11 @@ function unwrapThenable(thenable) { null === thenableState$1 && (thenableState$1 = []); return trackUsedThenable(thenableState$1, thenable, index); } -function convertStringRefToCallbackRef( - returnFiber, - current, - element, - mixedRef -) { - function ref(value) { - var refs = inst.refs; - null === value ? delete refs[stringRef] : (refs[stringRef] = value); - } - var stringRef = "" + mixedRef; - returnFiber = element._owner; - if (!returnFiber) throw Error(formatProdErrorMessage(290, stringRef)); - if (1 !== returnFiber.tag) throw Error(formatProdErrorMessage(309)); - var 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) { - if (enableRefAsProp) { - var mixedRef = element.props.ref; - mixedRef = void 0 !== mixedRef ? mixedRef : null; - } else mixedRef = element.ref; - "string" === typeof mixedRef || - "number" === typeof mixedRef || - "boolean" === typeof mixedRef - ? ((returnFiber = convertStringRefToCallbackRef( - returnFiber, - current, - element, - mixedRef - )), - enableRefAsProp && - ((current = assign({}, workInProgress.pendingProps)), - (current.ref = returnFiber), - (workInProgress.pendingProps = current))) - : (returnFiber = mixedRef); + enableRefAsProp + ? ((returnFiber = element.props.ref), + (returnFiber = void 0 !== returnFiber ? returnFiber : null)) + : (returnFiber = element.ref); workInProgress.ref = returnFiber; } function throwOnInvalidObjectType(returnFiber, newChild) { @@ -17764,7 +17724,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1790 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "19.0.0-www-classic-1006227c", + version: "19.0.0-www-classic-f764c3af", rendererPackageName: "react-dom" }; (function (internals) { @@ -17808,7 +17768,7 @@ var devToolsConfig$jscomp$inline_1790 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "19.0.0-www-classic-1006227c" + reconcilerVersion: "19.0.0-www-classic-f764c3af" }); var ReactFiberErrorDialogWWW = require("ReactFiberErrorDialog"); if ("function" !== typeof ReactFiberErrorDialogWWW.showErrorDialog) @@ -18251,7 +18211,7 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); }; -exports.version = "19.0.0-www-classic-1006227c"; +exports.version = "19.0.0-www-classic-f764c3af"; "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 b5b56a7a11adf..8c0f9c62d9d8a 100644 --- a/compiled/facebook-www/ReactDOM-profiling.modern.js +++ b/compiled/facebook-www/ReactDOM-profiling.modern.js @@ -6221,51 +6221,11 @@ function unwrapThenable(thenable) { null === thenableState$1 && (thenableState$1 = []); return trackUsedThenable(thenableState$1, thenable, index); } -function convertStringRefToCallbackRef( - returnFiber, - current, - element, - mixedRef -) { - function ref(value) { - var refs = inst.refs; - null === value ? delete refs[stringRef] : (refs[stringRef] = value); - } - var stringRef = "" + mixedRef; - returnFiber = element._owner; - if (!returnFiber) throw Error(formatProdErrorMessage(290, stringRef)); - if (1 !== returnFiber.tag) throw Error(formatProdErrorMessage(309)); - var 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) { - if (enableRefAsProp) { - var mixedRef = element.props.ref; - mixedRef = void 0 !== mixedRef ? mixedRef : null; - } else mixedRef = element.ref; - "string" === typeof mixedRef || - "number" === typeof mixedRef || - "boolean" === typeof mixedRef - ? ((returnFiber = convertStringRefToCallbackRef( - returnFiber, - current, - element, - mixedRef - )), - enableRefAsProp && - ((current = assign({}, workInProgress.pendingProps)), - (current.ref = returnFiber), - (workInProgress.pendingProps = current))) - : (returnFiber = mixedRef); + enableRefAsProp + ? ((returnFiber = element.props.ref), + (returnFiber = void 0 !== returnFiber ? returnFiber : null)) + : (returnFiber = element.ref); workInProgress.ref = returnFiber; } function throwOnInvalidObjectType(returnFiber, newChild) { @@ -17122,7 +17082,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1773 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "19.0.0-www-modern-89fa1e2e", + version: "19.0.0-www-modern-6026fa17", rendererPackageName: "react-dom" }; (function (internals) { @@ -17166,7 +17126,7 @@ var devToolsConfig$jscomp$inline_1773 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "19.0.0-www-modern-89fa1e2e" + reconcilerVersion: "19.0.0-www-modern-6026fa17" }); var ReactFiberErrorDialogWWW = require("ReactFiberErrorDialog"); if ("function" !== typeof ReactFiberErrorDialogWWW.showErrorDialog) @@ -17456,7 +17416,7 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); }; -exports.version = "19.0.0-www-modern-89fa1e2e"; +exports.version = "19.0.0-www-modern-6026fa17"; "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 bd00fa765399b..82b342c0b5f1c 100644 --- a/compiled/facebook-www/ReactDOMTesting-dev.classic.js +++ b/compiled/facebook-www/ReactDOMTesting-dev.classic.js @@ -2973,20 +2973,6 @@ if (__DEV__) { } } } - function checkPropStringCoercion(value, propName) { - { - if (willCoercionThrow(value)) { - error( - "The provided `%s` prop is an unsupported type %s." + - " This value must be coerced to a string before using it here.", - propName, - typeName(value) - ); - - return testStringCoercion(value); // throw (to help callers find troubleshooting comments) - } - } - } function checkCSSPropertyStringCoercion(value, propName) { { if (willCoercionThrow(value)) { @@ -11569,7 +11555,6 @@ if (__DEV__) { var didWarnAboutMaps; var didWarnAboutGenerators; - var didWarnAboutStringRefs; var ownerHasKeyUseWarning; var ownerHasFunctionTypeWarning; var ownerHasSymbolTypeWarning; @@ -11579,7 +11564,6 @@ if (__DEV__) { { didWarnAboutMaps = false; didWarnAboutGenerators = false; - didWarnAboutStringRefs = {}; /** * Warn if there's no key explicitly set on dynamic arrays of children or * object keys are not valid. This allows us to keep track of children between @@ -11624,10 +11608,6 @@ if (__DEV__) { }; } - function isReactClass(type) { - return type.prototype && type.prototype.isReactComponent; - } - function unwrapThenable(thenable) { var index = thenableIndexCounter$1; thenableIndexCounter$1 += 1; @@ -11639,159 +11619,22 @@ if (__DEV__) { return trackUsedThenable(thenableState$1, thenable, index); } - function convertStringRefToCallbackRef( - returnFiber, - current, - element, - mixedRef - ) { - { - checkPropStringCoercion(mixedRef, "ref"); - } - - var stringRef = "" + mixedRef; - var owner = element._owner; - - if (!owner) { - throw new Error( - "Element ref was specified as a string (" + - stringRef + - ") 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://react.dev/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://react.dev/link/strict-mode-string-ref" - ); - } - - { - 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://react.dev/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; + var ref; if (enableRefAsProp) { // TODO: This is a temporary, intermediate step. When enableRefAsProp is on, // we should resolve the `ref` prop during the begin phase of the component // it's attached to (HostComponent, ClassComponent, etc). var refProp = element.props.ref; - mixedRef = refProp !== undefined ? refProp : null; + ref = refProp !== undefined ? refProp : null; } else { // Old behavior. - mixedRef = element.ref; - } - - var coercedRef; - - if ( - typeof mixedRef === "string" || - typeof mixedRef === "number" || - typeof mixedRef === "boolean" - ) { - coercedRef = convertStringRefToCallbackRef( - returnFiber, - current, - element, - mixedRef - ); - - if (enableRefAsProp) { - // 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. - var userProvidedProps = workInProgress.pendingProps; - var propsWithInternalCallbackRef = assign({}, userProvidedProps); - propsWithInternalCallbackRef.ref = coercedRef; - workInProgress.pendingProps = propsWithInternalCallbackRef; - } - } else { - coercedRef = mixedRef; + ref = element.ref; } // TODO: If enableRefAsProp is on, we shouldn't use the `ref` field. We // should always read the ref from the prop. - workInProgress.ref = coercedRef; + workInProgress.ref = ref; } function throwOnInvalidObjectType(returnFiber, newChild) { @@ -36884,7 +36727,7 @@ if (__DEV__) { return root; } - var ReactVersion = "19.0.0-www-classic-67c522ab"; + var ReactVersion = "19.0.0-www-classic-ba5f20be"; function createPortal$1( children, diff --git a/compiled/facebook-www/ReactDOMTesting-dev.modern.js b/compiled/facebook-www/ReactDOMTesting-dev.modern.js index 6c2ad202a5bb0..24b8f6df39e96 100644 --- a/compiled/facebook-www/ReactDOMTesting-dev.modern.js +++ b/compiled/facebook-www/ReactDOMTesting-dev.modern.js @@ -2925,20 +2925,6 @@ if (__DEV__) { } } } - function checkPropStringCoercion(value, propName) { - { - if (willCoercionThrow(value)) { - error( - "The provided `%s` prop is an unsupported type %s." + - " This value must be coerced to a string before using it here.", - propName, - typeName(value) - ); - - return testStringCoercion(value); // throw (to help callers find troubleshooting comments) - } - } - } function checkCSSPropertyStringCoercion(value, propName) { { if (willCoercionThrow(value)) { @@ -21902,7 +21888,6 @@ if (__DEV__) { var didWarnAboutMaps; var didWarnAboutGenerators; - var didWarnAboutStringRefs; var ownerHasKeyUseWarning; var ownerHasFunctionTypeWarning; var ownerHasSymbolTypeWarning; @@ -21912,7 +21897,6 @@ if (__DEV__) { { didWarnAboutMaps = false; didWarnAboutGenerators = false; - didWarnAboutStringRefs = {}; /** * Warn if there's no key explicitly set on dynamic arrays of children or * object keys are not valid. This allows us to keep track of children between @@ -21957,10 +21941,6 @@ if (__DEV__) { }; } - function isReactClass(type) { - return type.prototype && type.prototype.isReactComponent; - } - function unwrapThenable(thenable) { var index = thenableIndexCounter$1; thenableIndexCounter$1 += 1; @@ -21972,159 +21952,22 @@ if (__DEV__) { return trackUsedThenable(thenableState$1, thenable, index); } - function convertStringRefToCallbackRef( - returnFiber, - current, - element, - mixedRef - ) { - { - checkPropStringCoercion(mixedRef, "ref"); - } - - var stringRef = "" + mixedRef; - var owner = element._owner; - - if (!owner) { - throw new Error( - "Element ref was specified as a string (" + - stringRef + - ") 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://react.dev/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://react.dev/link/strict-mode-string-ref" - ); - } - - { - 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://react.dev/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; + var ref; if (enableRefAsProp) { // TODO: This is a temporary, intermediate step. When enableRefAsProp is on, // we should resolve the `ref` prop during the begin phase of the component // it's attached to (HostComponent, ClassComponent, etc). var refProp = element.props.ref; - mixedRef = refProp !== undefined ? refProp : null; + ref = refProp !== undefined ? refProp : null; } else { // Old behavior. - mixedRef = element.ref; - } - - var coercedRef; - - if ( - typeof mixedRef === "string" || - typeof mixedRef === "number" || - typeof mixedRef === "boolean" - ) { - coercedRef = convertStringRefToCallbackRef( - returnFiber, - current, - element, - mixedRef - ); - - if (enableRefAsProp) { - // 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. - var userProvidedProps = workInProgress.pendingProps; - var propsWithInternalCallbackRef = assign({}, userProvidedProps); - propsWithInternalCallbackRef.ref = coercedRef; - workInProgress.pendingProps = propsWithInternalCallbackRef; - } - } else { - coercedRef = mixedRef; + ref = element.ref; } // TODO: If enableRefAsProp is on, we shouldn't use the `ref` field. We // should always read the ref from the prop. - workInProgress.ref = coercedRef; + workInProgress.ref = ref; } function throwOnInvalidObjectType(returnFiber, newChild) { @@ -46510,7 +46353,7 @@ if (__DEV__) { return root; } - var ReactVersion = "19.0.0-www-modern-77631c63"; + var ReactVersion = "19.0.0-www-modern-cbc6b1b3"; function createPortal$1( children, diff --git a/compiled/facebook-www/ReactDOMTesting-prod.classic.js b/compiled/facebook-www/ReactDOMTesting-prod.classic.js index f94eef3e3c3c0..a083a5df201a5 100644 --- a/compiled/facebook-www/ReactDOMTesting-prod.classic.js +++ b/compiled/facebook-www/ReactDOMTesting-prod.classic.js @@ -2556,51 +2556,11 @@ function unwrapThenable(thenable) { null === thenableState$1 && (thenableState$1 = []); return trackUsedThenable(thenableState$1, thenable, index); } -function convertStringRefToCallbackRef( - returnFiber, - current, - element, - mixedRef -) { - function ref(value) { - var refs = inst.refs; - null === value ? delete refs[stringRef] : (refs[stringRef] = value); - } - var stringRef = "" + mixedRef; - returnFiber = element._owner; - if (!returnFiber) throw Error(formatProdErrorMessage(290, stringRef)); - if (1 !== returnFiber.tag) throw Error(formatProdErrorMessage(309)); - var 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) { - if (enableRefAsProp) { - var mixedRef = element.props.ref; - mixedRef = void 0 !== mixedRef ? mixedRef : null; - } else mixedRef = element.ref; - "string" === typeof mixedRef || - "number" === typeof mixedRef || - "boolean" === typeof mixedRef - ? ((returnFiber = convertStringRefToCallbackRef( - returnFiber, - current, - element, - mixedRef - )), - enableRefAsProp && - ((current = assign({}, workInProgress.pendingProps)), - (current.ref = returnFiber), - (workInProgress.pendingProps = current))) - : (returnFiber = mixedRef); + enableRefAsProp + ? ((returnFiber = element.props.ref), + (returnFiber = void 0 !== returnFiber ? returnFiber : null)) + : (returnFiber = element.ref); workInProgress.ref = returnFiber; } function throwOnInvalidObjectType(returnFiber, newChild) { @@ -17345,7 +17305,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1731 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "19.0.0-www-classic-5ab1fc58", + version: "19.0.0-www-classic-692e39ea", rendererPackageName: "react-dom" }; var internals$jscomp$inline_2142 = { @@ -17375,7 +17335,7 @@ var internals$jscomp$inline_2142 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "19.0.0-www-classic-5ab1fc58" + reconcilerVersion: "19.0.0-www-classic-692e39ea" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2143 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -17974,4 +17934,4 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); }; -exports.version = "19.0.0-www-classic-5ab1fc58"; +exports.version = "19.0.0-www-classic-692e39ea"; diff --git a/compiled/facebook-www/ReactDOMTesting-prod.modern.js b/compiled/facebook-www/ReactDOMTesting-prod.modern.js index 72ca10c0b7b75..98915b91b5624 100644 --- a/compiled/facebook-www/ReactDOMTesting-prod.modern.js +++ b/compiled/facebook-www/ReactDOMTesting-prod.modern.js @@ -6287,51 +6287,11 @@ function unwrapThenable(thenable) { null === thenableState$1 && (thenableState$1 = []); return trackUsedThenable(thenableState$1, thenable, index); } -function convertStringRefToCallbackRef( - returnFiber, - current, - element, - mixedRef -) { - function ref(value) { - var refs = inst.refs; - null === value ? delete refs[stringRef] : (refs[stringRef] = value); - } - var stringRef = "" + mixedRef; - returnFiber = element._owner; - if (!returnFiber) throw Error(formatProdErrorMessage(290, stringRef)); - if (1 !== returnFiber.tag) throw Error(formatProdErrorMessage(309)); - var 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) { - if (enableRefAsProp) { - var mixedRef = element.props.ref; - mixedRef = void 0 !== mixedRef ? mixedRef : null; - } else mixedRef = element.ref; - "string" === typeof mixedRef || - "number" === typeof mixedRef || - "boolean" === typeof mixedRef - ? ((returnFiber = convertStringRefToCallbackRef( - returnFiber, - current, - element, - mixedRef - )), - enableRefAsProp && - ((current = assign({}, workInProgress.pendingProps)), - (current.ref = returnFiber), - (workInProgress.pendingProps = current))) - : (returnFiber = mixedRef); + enableRefAsProp + ? ((returnFiber = element.props.ref), + (returnFiber = void 0 !== returnFiber ? returnFiber : null)) + : (returnFiber = element.ref); workInProgress.ref = returnFiber; } function throwOnInvalidObjectType(returnFiber, newChild) { @@ -16779,7 +16739,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1714 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "19.0.0-www-modern-9e5a00ad", + version: "19.0.0-www-modern-be51a8d8", rendererPackageName: "react-dom" }; var internals$jscomp$inline_2118 = { @@ -16809,7 +16769,7 @@ var internals$jscomp$inline_2118 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "19.0.0-www-modern-9e5a00ad" + reconcilerVersion: "19.0.0-www-modern-be51a8d8" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2119 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -17235,4 +17195,4 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); }; -exports.version = "19.0.0-www-modern-9e5a00ad"; +exports.version = "19.0.0-www-modern-be51a8d8"; diff --git a/compiled/facebook-www/ReactServer-dev.modern.js b/compiled/facebook-www/ReactServer-dev.modern.js index 7abccdb69f6f5..07ec1ca4448ec 100644 --- a/compiled/facebook-www/ReactServer-dev.modern.js +++ b/compiled/facebook-www/ReactServer-dev.modern.js @@ -88,6 +88,9 @@ if (__DEV__) { enableRefAsProp = dynamicFeatureFlags.enableRefAsProp, disableDefaultPropsExceptForClasses = dynamicFeatureFlags.disableDefaultPropsExceptForClasses; // On WWW, true is used for a new modern build. + // because JSX is an extremely hot path. + + var disableStringRefs = false; /** * Keeps track of the current Cache dispatcher. @@ -279,8 +282,22 @@ if (__DEV__) { } } } + function checkPropStringCoercion(value, propName) { + { + if (willCoercionThrow(value)) { + error( + "The provided `%s` prop is an unsupported type %s." + + " This value must be coerced to a string before using it here.", + propName, + typeName(value) + ); - function getWrappedName(outerType, innerType, wrapperName) { + return testStringCoercion(value); // throw (to help callers find troubleshooting comments) + } + } + } + + function getWrappedName$1(outerType, innerType, wrapperName) { var displayName = outerType.displayName; if (displayName) { @@ -293,7 +310,7 @@ if (__DEV__) { : wrapperName; } // Keep in sync with react-reconciler/getComponentNameFromFiber - function getContextName(type) { + function getContextName$1(type) { return type.displayName || "Context"; } @@ -360,28 +377,28 @@ if (__DEV__) { return null; } else { var provider = type; - return getContextName(provider._context) + ".Provider"; + return getContextName$1(provider._context) + ".Provider"; } case REACT_CONTEXT_TYPE: var context = type; if (enableRenderableContext) { - return getContextName(context) + ".Provider"; + return getContextName$1(context) + ".Provider"; } else { - return getContextName(context) + ".Consumer"; + return getContextName$1(context) + ".Consumer"; } case REACT_CONSUMER_TYPE: if (enableRenderableContext) { var consumer = type; - return getContextName(consumer._context) + ".Consumer"; + return getContextName$1(consumer._context) + ".Consumer"; } else { return null; } case REACT_FORWARD_REF_TYPE: - return getWrappedName(type, type.render, "ForwardRef"); + return getWrappedName$1(type, type.render, "ForwardRef"); case REACT_MEMO_TYPE: var outerName = type.displayName || null; @@ -884,6 +901,160 @@ if (__DEV__) { return ""; } + var FunctionComponent = 0; + var ClassComponent = 1; + var HostRoot = 3; // Root of a host tree. Could be nested inside another node. + + var HostPortal = 4; // A subtree. Could be an entry point to a different renderer. + + var HostComponent = 5; + var HostText = 6; + var Fragment = 7; + var Mode = 8; + var ContextConsumer = 9; + var ContextProvider = 10; + var ForwardRef = 11; + var Profiler = 12; + var SuspenseComponent = 13; + var MemoComponent = 14; + var SimpleMemoComponent = 15; + var LazyComponent = 16; + var IncompleteClassComponent = 17; + var DehydratedFragment = 18; + var SuspenseListComponent = 19; + var ScopeComponent = 21; + var OffscreenComponent = 22; + var LegacyHiddenComponent = 23; + var CacheComponent = 24; + var TracingMarkerComponent = 25; + var HostHoistable = 26; + var HostSingleton = 27; + var IncompleteFunctionComponent = 28; + + function getWrappedName(outerType, innerType, wrapperName) { + var functionName = innerType.displayName || innerType.name || ""; + return ( + outerType.displayName || + (functionName !== "" + ? wrapperName + "(" + functionName + ")" + : wrapperName) + ); + } // Keep in sync with shared/getComponentNameFromType + + function getContextName(type) { + return type.displayName || "Context"; + } + + function getComponentNameFromFiber(fiber) { + var tag = fiber.tag, + type = fiber.type; + + switch (tag) { + case CacheComponent: + return "Cache"; + + case ContextConsumer: + if (enableRenderableContext) { + var consumer = type; + return getContextName(consumer._context) + ".Consumer"; + } else { + var context = type; + return getContextName(context) + ".Consumer"; + } + + case ContextProvider: + if (enableRenderableContext) { + var _context = type; + return getContextName(_context) + ".Provider"; + } else { + var provider = type; + return getContextName(provider._context) + ".Provider"; + } + + case DehydratedFragment: + return "DehydratedFragment"; + + case ForwardRef: + return getWrappedName(type, type.render, "ForwardRef"); + + case Fragment: + return "Fragment"; + + case HostHoistable: + case HostSingleton: + case HostComponent: + // Host component type is the display name (e.g. "div", "View") + return type; + + case HostPortal: + return "Portal"; + + case HostRoot: + return "Root"; + + case HostText: + return "Text"; + + case LazyComponent: + // Name comes from the type in this case; we don't have a tag. + return getComponentNameFromType(type); + + case Mode: + if (type === REACT_STRICT_MODE_TYPE) { + // Don't be less specific than shared/getComponentNameFromType + return "StrictMode"; + } + + return "Mode"; + + case OffscreenComponent: + return "Offscreen"; + + case Profiler: + return "Profiler"; + + case ScopeComponent: + return "Scope"; + + case SuspenseComponent: + return "Suspense"; + + case SuspenseListComponent: + return "SuspenseList"; + + case TracingMarkerComponent: + return "TracingMarker"; + // The display name for these tags come from the user-provided type: + + case IncompleteClassComponent: + case IncompleteFunctionComponent: { + break; + } + + // Fallthrough + + case ClassComponent: + case FunctionComponent: + case MemoComponent: + case SimpleMemoComponent: + if (typeof type === "function") { + return type.displayName || type.name || null; + } + + if (typeof type === "string") { + return type; + } + + break; + + case LegacyHiddenComponent: { + return "LegacyHidden"; + } + } + + return null; + } + var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"); @@ -1335,6 +1506,10 @@ if (__DEV__) { if (hasValidRef(config)) { if (!enableRefAsProp) { ref = config.ref; + + { + ref = coerceStringRef(ref, ReactCurrentOwner.current, type); + } } { @@ -1348,7 +1523,15 @@ if (__DEV__) { propName !== "key" && (enableRefAsProp || propName !== "ref") ) { - props[propName] = config[propName]; + if (enableRefAsProp && !disableStringRefs && propName === "ref") { + props.ref = coerceStringRef( + config[propName], + ReactCurrentOwner.current, + type + ); + } else { + props[propName] = config[propName]; + } } } @@ -1470,6 +1653,10 @@ if (__DEV__) { if (hasValidRef(config)) { if (!enableRefAsProp) { ref = config.ref; + + { + ref = coerceStringRef(ref, ReactCurrentOwner.current, type); + } } { @@ -1496,7 +1683,15 @@ if (__DEV__) { propName !== "__self" && propName !== "__source" ) { - props[propName] = config[propName]; + if (enableRefAsProp && !disableStringRefs && propName === "ref") { + props.ref = coerceStringRef( + config[propName], + ReactCurrentOwner.current, + type + ); + } else { + props[propName] = config[propName]; + } } } } // Children can be more than one argument, and those are transferred onto @@ -1605,6 +1800,10 @@ if (__DEV__) { if (!enableRefAsProp) { // Silently steal the ref from the parent. ref = config.ref; + + { + ref = coerceStringRef(ref, owner, element.type); + } } owner = ReactCurrentOwner.current; @@ -1652,7 +1851,15 @@ if (__DEV__) { // Resolve default props props[propName] = defaultProps[propName]; } else { - props[propName] = config[propName]; + if (enableRefAsProp && !disableStringRefs && propName === "ref") { + props.ref = coerceStringRef( + config[propName], + owner, + element.type + ); + } else { + props[propName] = config[propName]; + } } } } @@ -1898,6 +2105,96 @@ if (__DEV__) { } } + function coerceStringRef(mixedRef, owner, type) { + var stringRef; + + if (typeof mixedRef === "string") { + stringRef = mixedRef; + } else { + if (typeof mixedRef === "number" || typeof mixedRef === "boolean") { + { + checkPropStringCoercion(mixedRef, "ref"); + } + + stringRef = "" + mixedRef; + } else { + return mixedRef; + } + } + + return stringRefAsCallbackRef.bind(null, stringRef, type, owner); + } + + function stringRefAsCallbackRef(stringRef, type, owner, value) { + if (!owner) { + throw new Error( + "Element ref was specified as a string (" + + stringRef + + ") 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://react.dev/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://react.dev/link/strict-mode-string-ref" + ); + } + + { + if ( + // Will already warn with "Function components cannot be given refs" + !(typeof type === "function" && !isReactClass(type)) + ) { + var componentName = getComponentNameFromFiber(owner) || "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://react.dev/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." + ); + } + + var refs = inst.refs; + + if (value === null) { + delete refs[stringRef]; + } else { + refs[stringRef] = value; + } + } + + function isReactClass(type) { + return type.prototype && type.prototype.isReactComponent; + } + var SEPARATOR = "."; var SUBSEPARATOR = ":"; /** @@ -2824,7 +3121,7 @@ if (__DEV__) { function noop() {} - var ReactVersion = "19.0.0-www-modern-1ec419e8"; + var ReactVersion = "19.0.0-www-modern-242817a6"; // Patch fetch var Children = { diff --git a/compiled/facebook-www/ReactServer-prod.modern.js b/compiled/facebook-www/ReactServer-prod.modern.js index c371c8b74e311..8405e85cf76e0 100644 --- a/compiled/facebook-www/ReactServer-prod.modern.js +++ b/compiled/facebook-www/ReactServer-prod.modern.js @@ -78,12 +78,21 @@ function jsxProd(type, config, maybeKey) { ref = null; void 0 !== maybeKey && (key = "" + maybeKey); void 0 !== config.key && (key = "" + config.key); - void 0 === config.ref || enableRefAsProp || (ref = config.ref); + void 0 === config.ref || + enableRefAsProp || + ((ref = config.ref), + (ref = coerceStringRef(ref, ReactCurrentOwner.current, type))); for (propName in config) hasOwnProperty.call(config, propName) && "key" !== propName && (enableRefAsProp || "ref" !== propName) && - (props[propName] = config[propName]); + (enableRefAsProp && "ref" === propName + ? (props.ref = coerceStringRef( + config[propName], + ReactCurrentOwner.current, + type + )) + : (props[propName] = config[propName])); if (!disableDefaultPropsExceptForClasses && type && type.defaultProps) for (propName in ((config = type.defaultProps), config)) void 0 === props[propName] && (props[propName] = config[propName]); @@ -115,6 +124,21 @@ function isValidElement(object) { object.$$typeof === REACT_ELEMENT_TYPE ); } +function coerceStringRef(mixedRef, owner, type) { + if ("string" !== typeof mixedRef) + if ("number" === typeof mixedRef || "boolean" === typeof mixedRef) + mixedRef = "" + mixedRef; + else return mixedRef; + return stringRefAsCallbackRef.bind(null, mixedRef, type, owner); +} +function stringRefAsCallbackRef(stringRef, type, owner, value) { + if (!owner) throw Error(formatProdErrorMessage(290, stringRef)); + if (1 !== owner.tag) throw Error(formatProdErrorMessage(309)); + type = owner.stateNode; + if (!type) throw Error(formatProdErrorMessage(147, stringRef)); + type = type.refs; + null === value ? delete type[stringRef] : (type[stringRef] = value); +} function escape(key) { var escaperLookup = { "=": "=0", ":": "=2" }; return ( @@ -424,7 +448,8 @@ exports.cloneElement = function (element, config, children) { owner = element._owner; if (null != config) { void 0 !== config.ref && - (enableRefAsProp || (ref = config.ref), + (enableRefAsProp || + ((ref = config.ref), (ref = coerceStringRef(ref, owner, element.type))), (owner = ReactCurrentOwner.current)); void 0 !== config.key && (key = "" + config.key); if ( @@ -440,12 +465,17 @@ exports.cloneElement = function (element, config, children) { "__self" === propName || "__source" === propName || (enableRefAsProp && "ref" === propName && void 0 === config.ref) || - (props[propName] = - disableDefaultPropsExceptForClasses || - void 0 !== config[propName] || - void 0 === defaultProps - ? config[propName] - : defaultProps[propName]); + (disableDefaultPropsExceptForClasses || + void 0 !== config[propName] || + void 0 === defaultProps + ? enableRefAsProp && "ref" === propName + ? (props.ref = coerceStringRef( + config[propName], + owner, + element.type + )) + : (props[propName] = config[propName]) + : (props[propName] = defaultProps[propName])); } var propName = arguments.length - 2; if (1 === propName) props.children = children; @@ -464,7 +494,8 @@ exports.createElement = function (type, config, children) { if (null != config) for (propName in (void 0 === config.ref || enableRefAsProp || - (ref = config.ref), + ((ref = config.ref), + (ref = coerceStringRef(ref, ReactCurrentOwner.current, type))), void 0 !== config.key && (key = "" + config.key), config)) hasOwnProperty.call(config, propName) && @@ -472,7 +503,13 @@ exports.createElement = function (type, config, children) { (enableRefAsProp || "ref" !== propName) && "__self" !== propName && "__source" !== propName && - (props[propName] = config[propName]); + (enableRefAsProp && "ref" === propName + ? (props.ref = coerceStringRef( + config[propName], + ReactCurrentOwner.current, + type + )) + : (props[propName] = config[propName])); var childrenLength = arguments.length - 2; if (1 === childrenLength) props.children = children; else if (1 < childrenLength) { @@ -563,4 +600,4 @@ exports.useId = function () { exports.useMemo = function (create, deps) { return ReactCurrentDispatcher.current.useMemo(create, deps); }; -exports.version = "19.0.0-www-modern-53e0c063"; +exports.version = "19.0.0-www-modern-d4f4a106"; diff --git a/compiled/facebook-www/ReactTestRenderer-dev.classic.js b/compiled/facebook-www/ReactTestRenderer-dev.classic.js index 05db70fc3409e..4c53c3961285f 100644 --- a/compiled/facebook-www/ReactTestRenderer-dev.classic.js +++ b/compiled/facebook-www/ReactTestRenderer-dev.classic.js @@ -5562,81 +5562,6 @@ if (__DEV__) { }; } - /* - * The `'' + value` pattern (used in perf-sensitive code) throws for Symbol - * and Temporal.* types. See https://github.com/facebook/react/pull/22064. - * - * The functions in this module will throw an easier-to-understand, - * easier-to-debug exception with a clear errors message message explaining the - * problem. (Instead of a confusing exception thrown inside the implementation - * of the `value` object). - */ - // $FlowFixMe[incompatible-return] only called in DEV, so void return is not possible. - function typeName(value) { - { - // toStringTag is needed for namespaced types like Temporal.Instant - var hasToStringTag = typeof Symbol === "function" && Symbol.toStringTag; - var type = - (hasToStringTag && value[Symbol.toStringTag]) || - value.constructor.name || - "Object"; // $FlowFixMe[incompatible-return] - - return type; - } - } // $FlowFixMe[incompatible-return] only called in DEV, so void return is not possible. - - function willCoercionThrow(value) { - { - try { - testStringCoercion(value); - return false; - } catch (e) { - return true; - } - } - } - - function testStringCoercion(value) { - // If you ended up here by following an exception call stack, here's what's - // happened: you supplied an object or symbol value to React (as a prop, key, - // DOM attribute, CSS property, string ref, etc.) and when React tried to - // coerce it to a string using `'' + value`, an exception was thrown. - // - // The most common types that will cause this exception are `Symbol` instances - // and Temporal objects like `Temporal.Instant`. But any object that has a - // `valueOf` or `[Symbol.toPrimitive]` method that throws will also cause this - // exception. (Library authors do this to prevent users from using built-in - // numeric operators like `+` or comparison operators like `>=` because custom - // methods are needed to perform accurate arithmetic or comparison.) - // - // To fix the problem, coerce this object or symbol value to a string before - // passing it to React. The most reliable way is usually `String(value)`. - // - // To find which value is throwing, check the browser or debugger console. - // Before this exception was thrown, there should be `console.error` output - // that shows the type (Symbol, Temporal.PlainDate, etc.) that caused the - // problem and how that type was used: key, atrribute, input value prop, etc. - // In most cases, this console output also shows the component and its - // ancestor components where the exception happened. - // - // eslint-disable-next-line react-internal/safe-string-coercion - return "" + value; - } - function checkPropStringCoercion(value, propName) { - { - if (willCoercionThrow(value)) { - error( - "The provided `%s` prop is an unsupported type %s." + - " This value must be coerced to a string before using it here.", - propName, - typeName(value) - ); - - return testStringCoercion(value); // throw (to help callers find troubleshooting comments) - } - } - } - var ReactCurrentActQueue$3 = ReactSharedInternals.ReactCurrentActQueue; function getThenablesFromState(state) { @@ -5916,7 +5841,6 @@ if (__DEV__) { var didWarnAboutMaps; var didWarnAboutGenerators; - var didWarnAboutStringRefs; var ownerHasKeyUseWarning; var ownerHasFunctionTypeWarning; var ownerHasSymbolTypeWarning; @@ -5926,7 +5850,6 @@ if (__DEV__) { { didWarnAboutMaps = false; didWarnAboutGenerators = false; - didWarnAboutStringRefs = {}; /** * Warn if there's no key explicitly set on dynamic arrays of children or * object keys are not valid. This allows us to keep track of children between @@ -5971,10 +5894,6 @@ if (__DEV__) { }; } - function isReactClass(type) { - return type.prototype && type.prototype.isReactComponent; - } - function unwrapThenable(thenable) { var index = thenableIndexCounter$1; thenableIndexCounter$1 += 1; @@ -5986,128 +5905,16 @@ if (__DEV__) { return trackUsedThenable(thenableState$1, thenable, index); } - function convertStringRefToCallbackRef( - returnFiber, - current, - element, - mixedRef - ) { - { - checkPropStringCoercion(mixedRef, "ref"); - } - - var stringRef = "" + mixedRef; - var owner = element._owner; - - if (!owner) { - throw new Error( - "Element ref was specified as a string (" + - stringRef + - ") 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://react.dev/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://react.dev/link/strict-mode-string-ref" - ); - } - - { - 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://react.dev/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; + var ref; { // Old behavior. - mixedRef = element.ref; - } - - var coercedRef; - - if ( - typeof mixedRef === "string" || - typeof mixedRef === "number" || - typeof mixedRef === "boolean" - ) { - coercedRef = convertStringRefToCallbackRef( - returnFiber, - current, - element, - mixedRef - ); - } else { - coercedRef = mixedRef; + ref = element.ref; } // TODO: If enableRefAsProp is on, we shouldn't use the `ref` field. We // should always read the ref from the prop. - workInProgress.ref = coercedRef; + workInProgress.ref = ref; } function throwOnInvalidObjectType(returnFiber, newChild) { @@ -26858,7 +26665,82 @@ if (__DEV__) { return root; } - var ReactVersion = "19.0.0-www-classic-74b383db"; + var ReactVersion = "19.0.0-www-classic-69d440e1"; + + /* + * The `'' + value` pattern (used in perf-sensitive code) throws for Symbol + * and Temporal.* types. See https://github.com/facebook/react/pull/22064. + * + * The functions in this module will throw an easier-to-understand, + * easier-to-debug exception with a clear errors message message explaining the + * problem. (Instead of a confusing exception thrown inside the implementation + * of the `value` object). + */ + // $FlowFixMe[incompatible-return] only called in DEV, so void return is not possible. + function typeName(value) { + { + // toStringTag is needed for namespaced types like Temporal.Instant + var hasToStringTag = typeof Symbol === "function" && Symbol.toStringTag; + var type = + (hasToStringTag && value[Symbol.toStringTag]) || + value.constructor.name || + "Object"; // $FlowFixMe[incompatible-return] + + return type; + } + } // $FlowFixMe[incompatible-return] only called in DEV, so void return is not possible. + + function willCoercionThrow(value) { + { + try { + testStringCoercion(value); + return false; + } catch (e) { + return true; + } + } + } + + function testStringCoercion(value) { + // If you ended up here by following an exception call stack, here's what's + // happened: you supplied an object or symbol value to React (as a prop, key, + // DOM attribute, CSS property, string ref, etc.) and when React tried to + // coerce it to a string using `'' + value`, an exception was thrown. + // + // The most common types that will cause this exception are `Symbol` instances + // and Temporal objects like `Temporal.Instant`. But any object that has a + // `valueOf` or `[Symbol.toPrimitive]` method that throws will also cause this + // exception. (Library authors do this to prevent users from using built-in + // numeric operators like `+` or comparison operators like `>=` because custom + // methods are needed to perform accurate arithmetic or comparison.) + // + // To fix the problem, coerce this object or symbol value to a string before + // passing it to React. The most reliable way is usually `String(value)`. + // + // To find which value is throwing, check the browser or debugger console. + // Before this exception was thrown, there should be `console.error` output + // that shows the type (Symbol, Temporal.PlainDate, etc.) that caused the + // problem and how that type was used: key, atrribute, input value prop, etc. + // In most cases, this console output also shows the component and its + // ancestor components where the exception happened. + // + // eslint-disable-next-line react-internal/safe-string-coercion + return "" + value; + } + function checkPropStringCoercion(value, propName) { + { + if (willCoercionThrow(value)) { + error( + "The provided `%s` prop is an unsupported type %s." + + " This value must be coerced to a string before using it here.", + propName, + typeName(value) + ); + + return testStringCoercion(value); // throw (to help callers find troubleshooting comments) + } + } + } // Might add PROFILE later. diff --git a/compiled/facebook-www/ReactTestRenderer-dev.modern.js b/compiled/facebook-www/ReactTestRenderer-dev.modern.js index 197a64e17eb0b..a02703991c1b9 100644 --- a/compiled/facebook-www/ReactTestRenderer-dev.modern.js +++ b/compiled/facebook-www/ReactTestRenderer-dev.modern.js @@ -5562,81 +5562,6 @@ if (__DEV__) { }; } - /* - * The `'' + value` pattern (used in perf-sensitive code) throws for Symbol - * and Temporal.* types. See https://github.com/facebook/react/pull/22064. - * - * The functions in this module will throw an easier-to-understand, - * easier-to-debug exception with a clear errors message message explaining the - * problem. (Instead of a confusing exception thrown inside the implementation - * of the `value` object). - */ - // $FlowFixMe[incompatible-return] only called in DEV, so void return is not possible. - function typeName(value) { - { - // toStringTag is needed for namespaced types like Temporal.Instant - var hasToStringTag = typeof Symbol === "function" && Symbol.toStringTag; - var type = - (hasToStringTag && value[Symbol.toStringTag]) || - value.constructor.name || - "Object"; // $FlowFixMe[incompatible-return] - - return type; - } - } // $FlowFixMe[incompatible-return] only called in DEV, so void return is not possible. - - function willCoercionThrow(value) { - { - try { - testStringCoercion(value); - return false; - } catch (e) { - return true; - } - } - } - - function testStringCoercion(value) { - // If you ended up here by following an exception call stack, here's what's - // happened: you supplied an object or symbol value to React (as a prop, key, - // DOM attribute, CSS property, string ref, etc.) and when React tried to - // coerce it to a string using `'' + value`, an exception was thrown. - // - // The most common types that will cause this exception are `Symbol` instances - // and Temporal objects like `Temporal.Instant`. But any object that has a - // `valueOf` or `[Symbol.toPrimitive]` method that throws will also cause this - // exception. (Library authors do this to prevent users from using built-in - // numeric operators like `+` or comparison operators like `>=` because custom - // methods are needed to perform accurate arithmetic or comparison.) - // - // To fix the problem, coerce this object or symbol value to a string before - // passing it to React. The most reliable way is usually `String(value)`. - // - // To find which value is throwing, check the browser or debugger console. - // Before this exception was thrown, there should be `console.error` output - // that shows the type (Symbol, Temporal.PlainDate, etc.) that caused the - // problem and how that type was used: key, atrribute, input value prop, etc. - // In most cases, this console output also shows the component and its - // ancestor components where the exception happened. - // - // eslint-disable-next-line react-internal/safe-string-coercion - return "" + value; - } - function checkPropStringCoercion(value, propName) { - { - if (willCoercionThrow(value)) { - error( - "The provided `%s` prop is an unsupported type %s." + - " This value must be coerced to a string before using it here.", - propName, - typeName(value) - ); - - return testStringCoercion(value); // throw (to help callers find troubleshooting comments) - } - } - } - var ReactCurrentActQueue$3 = ReactSharedInternals.ReactCurrentActQueue; function getThenablesFromState(state) { @@ -5916,7 +5841,6 @@ if (__DEV__) { var didWarnAboutMaps; var didWarnAboutGenerators; - var didWarnAboutStringRefs; var ownerHasKeyUseWarning; var ownerHasFunctionTypeWarning; var ownerHasSymbolTypeWarning; @@ -5926,7 +5850,6 @@ if (__DEV__) { { didWarnAboutMaps = false; didWarnAboutGenerators = false; - didWarnAboutStringRefs = {}; /** * Warn if there's no key explicitly set on dynamic arrays of children or * object keys are not valid. This allows us to keep track of children between @@ -5971,10 +5894,6 @@ if (__DEV__) { }; } - function isReactClass(type) { - return type.prototype && type.prototype.isReactComponent; - } - function unwrapThenable(thenable) { var index = thenableIndexCounter$1; thenableIndexCounter$1 += 1; @@ -5986,128 +5905,16 @@ if (__DEV__) { return trackUsedThenable(thenableState$1, thenable, index); } - function convertStringRefToCallbackRef( - returnFiber, - current, - element, - mixedRef - ) { - { - checkPropStringCoercion(mixedRef, "ref"); - } - - var stringRef = "" + mixedRef; - var owner = element._owner; - - if (!owner) { - throw new Error( - "Element ref was specified as a string (" + - stringRef + - ") 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://react.dev/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://react.dev/link/strict-mode-string-ref" - ); - } - - { - 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://react.dev/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; + var ref; { // Old behavior. - mixedRef = element.ref; - } - - var coercedRef; - - if ( - typeof mixedRef === "string" || - typeof mixedRef === "number" || - typeof mixedRef === "boolean" - ) { - coercedRef = convertStringRefToCallbackRef( - returnFiber, - current, - element, - mixedRef - ); - } else { - coercedRef = mixedRef; + ref = element.ref; } // TODO: If enableRefAsProp is on, we shouldn't use the `ref` field. We // should always read the ref from the prop. - workInProgress.ref = coercedRef; + workInProgress.ref = ref; } function throwOnInvalidObjectType(returnFiber, newChild) { @@ -26858,7 +26665,82 @@ if (__DEV__) { return root; } - var ReactVersion = "19.0.0-www-modern-74b383db"; + var ReactVersion = "19.0.0-www-modern-69d440e1"; + + /* + * The `'' + value` pattern (used in perf-sensitive code) throws for Symbol + * and Temporal.* types. See https://github.com/facebook/react/pull/22064. + * + * The functions in this module will throw an easier-to-understand, + * easier-to-debug exception with a clear errors message message explaining the + * problem. (Instead of a confusing exception thrown inside the implementation + * of the `value` object). + */ + // $FlowFixMe[incompatible-return] only called in DEV, so void return is not possible. + function typeName(value) { + { + // toStringTag is needed for namespaced types like Temporal.Instant + var hasToStringTag = typeof Symbol === "function" && Symbol.toStringTag; + var type = + (hasToStringTag && value[Symbol.toStringTag]) || + value.constructor.name || + "Object"; // $FlowFixMe[incompatible-return] + + return type; + } + } // $FlowFixMe[incompatible-return] only called in DEV, so void return is not possible. + + function willCoercionThrow(value) { + { + try { + testStringCoercion(value); + return false; + } catch (e) { + return true; + } + } + } + + function testStringCoercion(value) { + // If you ended up here by following an exception call stack, here's what's + // happened: you supplied an object or symbol value to React (as a prop, key, + // DOM attribute, CSS property, string ref, etc.) and when React tried to + // coerce it to a string using `'' + value`, an exception was thrown. + // + // The most common types that will cause this exception are `Symbol` instances + // and Temporal objects like `Temporal.Instant`. But any object that has a + // `valueOf` or `[Symbol.toPrimitive]` method that throws will also cause this + // exception. (Library authors do this to prevent users from using built-in + // numeric operators like `+` or comparison operators like `>=` because custom + // methods are needed to perform accurate arithmetic or comparison.) + // + // To fix the problem, coerce this object or symbol value to a string before + // passing it to React. The most reliable way is usually `String(value)`. + // + // To find which value is throwing, check the browser or debugger console. + // Before this exception was thrown, there should be `console.error` output + // that shows the type (Symbol, Temporal.PlainDate, etc.) that caused the + // problem and how that type was used: key, atrribute, input value prop, etc. + // In most cases, this console output also shows the component and its + // ancestor components where the exception happened. + // + // eslint-disable-next-line react-internal/safe-string-coercion + return "" + value; + } + function checkPropStringCoercion(value, propName) { + { + if (willCoercionThrow(value)) { + error( + "The provided `%s` prop is an unsupported type %s." + + " This value must be coerced to a string before using it here.", + propName, + typeName(value) + ); + + return testStringCoercion(value); // throw (to help callers find troubleshooting comments) + } + } + } // Might add PROFILE later.