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.