From 3b13b94fbb1c4cdc4ee33ab22c426b5833d612df Mon Sep 17 00:00:00 2001 From: acdlite Date: Tue, 20 Feb 2024 03:19:23 +0000 Subject: [PATCH] Combine ReactJSXElementValidator with main module (#28317) There are too many layers to the JSX runtime implementation. I think basically everything should be implemented in a single file, so that's what I'm going to do. As a first step, this deletes ReactJSXElementValidator and moves all the code into ReactJSXElement. I can already see how this will help us remove more indirections in the future. Next I'm going to do start moving the `createElement` runtime into this module as well, since there's a lot of duplicated code. DiffTrain build for [ec160f32c28ccab798c73ecccbb36ce121e1640e](https://github.com/facebook/react/commit/ec160f32c28ccab798c73ecccbb36ce121e1640e) --- .../facebook-www/JSXDEVRuntime-dev.classic.js | 825 +++++++++--------- .../facebook-www/JSXDEVRuntime-dev.modern.js | 825 +++++++++--------- compiled/facebook-www/REVISION | 2 +- compiled/facebook-www/React-dev.classic.js | 593 +++++++------ compiled/facebook-www/React-dev.modern.js | 593 +++++++------ compiled/facebook-www/React-prod.classic.js | 8 +- compiled/facebook-www/React-prod.modern.js | 8 +- .../facebook-www/React-profiling.classic.js | 8 +- .../facebook-www/React-profiling.modern.js | 8 +- .../ReactDOMTesting-dev.classic.js | 2 +- .../ReactDOMTesting-prod.classic.js | 6 +- .../facebook-www/ReactServer-dev.modern.js | 593 +++++++------ .../facebook-www/ReactServer-prod.modern.js | 8 +- 13 files changed, 1700 insertions(+), 1779 deletions(-) diff --git a/compiled/facebook-www/JSXDEVRuntime-dev.classic.js b/compiled/facebook-www/JSXDEVRuntime-dev.classic.js index 491836021645f..66bf5af21f98d 100644 --- a/compiled/facebook-www/JSXDEVRuntime-dev.classic.js +++ b/compiled/facebook-www/JSXDEVRuntime-dev.classic.js @@ -112,49 +112,6 @@ if (__DEV__) { enableRenderableContext = dynamicFeatureFlags.enableRenderableContext; // On WWW, false is used for a new modern build. - var REACT_CLIENT_REFERENCE$2 = Symbol.for("react.client.reference"); - function isValidElementType(type) { - if (typeof type === "string" || typeof type === "function") { - return true; - } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill). - - if ( - type === REACT_FRAGMENT_TYPE || - type === REACT_PROFILER_TYPE || - (enableDebugTracing && type === REACT_DEBUG_TRACING_MODE_TYPE) || - type === REACT_STRICT_MODE_TYPE || - type === REACT_SUSPENSE_TYPE || - type === REACT_SUSPENSE_LIST_TYPE || - type === REACT_LEGACY_HIDDEN_TYPE || - type === REACT_OFFSCREEN_TYPE || - type === REACT_SCOPE_TYPE || - type === REACT_CACHE_TYPE || - (enableTransitionTracing && type === REACT_TRACING_MARKER_TYPE) - ) { - return true; - } - - if (typeof type === "object" && type !== null) { - if ( - type.$$typeof === REACT_LAZY_TYPE || - type.$$typeof === REACT_MEMO_TYPE || - type.$$typeof === REACT_CONTEXT_TYPE || - (!enableRenderableContext && type.$$typeof === REACT_PROVIDER_TYPE) || - (enableRenderableContext && type.$$typeof === REACT_CONSUMER_TYPE) || - type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object - // types supported by any Flight configuration anywhere since - // we don't know which Flight build this will end up being used - // with. - type.$$typeof === REACT_CLIENT_REFERENCE$2 || - type.getModuleId !== undefined - ) { - return true; - } - } - - return false; - } - function getWrappedName(outerType, innerType, wrapperName) { var displayName = outerType.displayName; @@ -172,7 +129,7 @@ if (__DEV__) { return type.displayName || "Context"; } - var REACT_CLIENT_REFERENCE$1 = Symbol.for("react.client.reference"); // Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead. + var REACT_CLIENT_REFERENCE$2 = Symbol.for("react.client.reference"); // Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead. function getComponentNameFromType(type) { if (type == null) { @@ -181,7 +138,7 @@ if (__DEV__) { } if (typeof type === "function") { - if (type.$$typeof === REACT_CLIENT_REFERENCE$1) { + if (type.$$typeof === REACT_CLIENT_REFERENCE$2) { // TODO: Create a convention for naming client references with debug info. return null; } @@ -289,6 +246,135 @@ if (__DEV__) { return null; } + var ReactSharedInternals = + React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; + + // $FlowFixMe[method-unbinding] + var hasOwnProperty = Object.prototype.hasOwnProperty; + + /* + * 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 checkKeyStringCoercion(value) { + { + if (willCoercionThrow(value)) { + error( + "The provided key is an unsupported type %s." + + " This value must be coerced to a string before using it here.", + 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) { + if (typeof type === "string" || typeof type === "function") { + return true; + } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill). + + if ( + type === REACT_FRAGMENT_TYPE || + type === REACT_PROFILER_TYPE || + (enableDebugTracing && type === REACT_DEBUG_TRACING_MODE_TYPE) || + type === REACT_STRICT_MODE_TYPE || + type === REACT_SUSPENSE_TYPE || + type === REACT_SUSPENSE_LIST_TYPE || + type === REACT_LEGACY_HIDDEN_TYPE || + type === REACT_OFFSCREEN_TYPE || + type === REACT_SCOPE_TYPE || + type === REACT_CACHE_TYPE || + (enableTransitionTracing && type === REACT_TRACING_MARKER_TYPE) + ) { + return true; + } + + if (typeof type === "object" && type !== null) { + if ( + type.$$typeof === REACT_LAZY_TYPE || + type.$$typeof === REACT_MEMO_TYPE || + type.$$typeof === REACT_CONTEXT_TYPE || + (!enableRenderableContext && type.$$typeof === REACT_PROVIDER_TYPE) || + (enableRenderableContext && type.$$typeof === REACT_CONSUMER_TYPE) || + type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object + // types supported by any Flight configuration anywhere since + // we don't know which Flight build this will end up being used + // with. + type.$$typeof === REACT_CLIENT_REFERENCE$1 || + type.getModuleId !== undefined + ) { + return true; + } + } + + return false; + } + + var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare + + function isArray(a) { + return isArrayImpl(a); + } + var assign = Object.assign; // Helpers to patch console.logs to avoid logging during side-effect free @@ -388,9 +474,6 @@ if (__DEV__) { } } - var ReactSharedInternals = - React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; - var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher; var prefix; function describeBuiltInComponentFrame(name, ownerFn) { @@ -724,9 +807,6 @@ if (__DEV__) { return ""; } - // $FlowFixMe[method-unbinding] - var hasOwnProperty = Object.prototype.hasOwnProperty; - var loggedTypeFailures = {}; var ReactDebugCurrentFrame$1 = ReactSharedInternals.ReactDebugCurrentFrame; @@ -832,133 +912,55 @@ if (__DEV__) { } } - var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare + var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; + var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; + var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"); + var specialPropKeyWarningShown; + var specialPropRefWarningShown; + var didWarnAboutStringRefs; - function isArray(a) { - return isArrayImpl(a); + { + didWarnAboutStringRefs = {}; } - /* - * 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) { + function hasValidRef(config) { { - // 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] + if (hasOwnProperty.call(config, "ref")) { + var getter = Object.getOwnPropertyDescriptor(config, "ref").get; - return type; + if (getter && getter.isReactWarning) { + return false; + } + } } - } // $FlowFixMe[incompatible-return] only called in DEV, so void return is not possible. - function willCoercionThrow(value) { + return config.ref !== undefined; + } + + function hasValidKey(config) { { - try { - testStringCoercion(value); - return false; - } catch (e) { - return true; + if (hasOwnProperty.call(config, "key")) { + var getter = Object.getOwnPropertyDescriptor(config, "key").get; + + if (getter && getter.isReactWarning) { + return false; + } } } - } - 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 checkKeyStringCoercion(value) { - { - if (willCoercionThrow(value)) { - error( - "The provided key is an unsupported type %s." + - " This value must be coerced to a string before using it here.", - typeName(value) - ); - - return testStringCoercion(value); // throw (to help callers find troubleshooting comments) - } - } - } - - var ReactCurrentOwner$1 = ReactSharedInternals.ReactCurrentOwner; - var specialPropKeyWarningShown; - var specialPropRefWarningShown; - var didWarnAboutStringRefs; - - { - didWarnAboutStringRefs = {}; - } - - function hasValidRef(config) { - { - if (hasOwnProperty.call(config, "ref")) { - var getter = Object.getOwnPropertyDescriptor(config, "ref").get; - - if (getter && getter.isReactWarning) { - return false; - } - } - } - - return config.ref !== undefined; - } - - function hasValidKey(config) { - { - if (hasOwnProperty.call(config, "key")) { - var getter = Object.getOwnPropertyDescriptor(config, "key").get; - - if (getter && getter.isReactWarning) { - return false; - } - } - } - - return config.key !== undefined; + return config.key !== undefined; } function warnIfStringRefCannotBeAutoConverted(config, self) { { if ( typeof config.ref === "string" && - ReactCurrentOwner$1.current && + ReactCurrentOwner.current && self && - ReactCurrentOwner$1.current.stateNode !== self + ReactCurrentOwner.current.stateNode !== self ) { var componentName = getComponentNameFromType( - ReactCurrentOwner$1.current.type + ReactCurrentOwner.current.type ); if (!didWarnAboutStringRefs[componentName]) { @@ -969,7 +971,7 @@ if (__DEV__) { "We ask you to manually fix this case by using useRef() or createRef() instead. " + "Learn more about using refs safely here: " + "https://reactjs.org/link/strict-mode-string-ref", - getComponentNameFromType(ReactCurrentOwner$1.current.type), + getComponentNameFromType(ReactCurrentOwner.current.type), config.ref ); @@ -1092,6 +1094,7 @@ if (__DEV__) { return element; } + var didWarnAboutKeySpread = {}; /** * https://github.com/reactjs/rfcs/pull/107 * @param {*} type @@ -1099,8 +1102,122 @@ if (__DEV__) { * @param {string} key */ - function jsxDEV$1(type, config, maybeKey, source, self) { + function jsxDEV$1(type, config, maybeKey, isStaticChildren, source, self) { { + if (!isValidElementType(type)) { + // This is an invalid element type. + // + // We warn in this case but don't throw. We expect the element creation to + // succeed and there will likely be errors in render. + var info = ""; + + if ( + type === undefined || + (typeof type === "object" && + type !== null && + Object.keys(type).length === 0) + ) { + info += + " You likely forgot to export your component from the file " + + "it's defined in, or you might have mixed up default and named imports."; + } + + var sourceInfo = getSourceInfoErrorAddendum(source); + + if (sourceInfo) { + info += sourceInfo; + } else { + info += getDeclarationErrorAddendum(); + } + + var typeString; + + if (type === null) { + typeString = "null"; + } else if (isArray(type)) { + typeString = "array"; + } else if ( + type !== undefined && + type.$$typeof === REACT_ELEMENT_TYPE + ) { + typeString = + "<" + (getComponentNameFromType(type.type) || "Unknown") + " />"; + info = + " Did you accidentally export a JSX literal instead of a component?"; + } else { + typeString = typeof type; + } + + error( + "React.jsx: type is invalid -- expected a string (for " + + "built-in components) or a class/function (for composite " + + "components) but got: %s.%s", + typeString, + info + ); + } else { + // This is a valid element type. + // Skip key warning if the type isn't valid since our key validation logic + // doesn't expect a non-string/function type and can throw confusing + // errors. We don't want exception behavior to differ between dev and + // prod. (Rendering will throw with a helpful message and as soon as the + // type is fixed, the key warnings will appear.) + var children = config.children; + + if (children !== undefined) { + if (isStaticChildren) { + if (isArray(children)) { + for (var i = 0; i < children.length; i++) { + validateChildKeys(children[i], type); + } + + if (Object.freeze) { + Object.freeze(children); + } + } else { + error( + "React.jsx: Static children should always be an array. " + + "You are likely explicitly calling React.jsxs or React.jsxDEV. " + + "Use the Babel transform instead." + ); + } + } else { + validateChildKeys(children, type); + } + } + } // Warn about key spread regardless of whether the type is valid. + + if (hasOwnProperty.call(config, "key")) { + var componentName = getComponentNameFromType(type); + var keys = Object.keys(config).filter(function (k) { + return k !== "key"; + }); + var beforeExample = + keys.length > 0 + ? "{key: someKey, " + keys.join(": ..., ") + ": ...}" + : "{key: someKey}"; + + if (!didWarnAboutKeySpread[componentName + beforeExample]) { + var afterExample = + keys.length > 0 ? "{" + keys.join(": ..., ") + ": ...}" : "{}"; + + error( + 'A props object containing a "key" prop is being spread into JSX:\n' + + " let props = %s;\n" + + " <%s {...props} />\n" + + "React keys must be passed directly to JSX without using spread:\n" + + " let props = %s;\n" + + " <%s key={someKey} {...props} />", + beforeExample, + componentName, + afterExample, + componentName + ); + + didWarnAboutKeySpread[componentName + beforeExample] = true; + } + } + var propName; // Reserved names are extracted var props = {}; @@ -1168,57 +1285,23 @@ if (__DEV__) { } } - return ReactElement( + var element = ReactElement( type, key, ref, self, source, - ReactCurrentOwner$1.current, + ReactCurrentOwner.current, props ); - } - } - - var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; - var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; - var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"); - function setCurrentlyValidatingElement(element) { - { - if (element) { - var owner = element._owner; - var stack = describeUnknownElementTypeFrameInDEV( - element.type, - owner ? owner.type : null - ); - ReactDebugCurrentFrame.setExtraStackFrame(stack); + if (type === REACT_FRAGMENT_TYPE) { + validateFragmentProps(element); } else { - ReactDebugCurrentFrame.setExtraStackFrame(null); + validatePropTypes(element); } - } - } - var propTypesMisspellWarningShown; - - { - propTypesMisspellWarningShown = false; - } - /** - * Verifies the object is a ReactElement. - * See https://reactjs.org/docs/react-api.html#isvalidelement - * @param {?object} object - * @return {boolean} True if `object` is a ReactElement. - * @final - */ - - function isValidElement(object) { - { - return ( - typeof object === "object" && - object !== null && - object.$$typeof === REACT_ELEMENT_TYPE - ); + return element; } } @@ -1248,29 +1331,73 @@ if (__DEV__) { } } /** - * 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 - * updates. + * Ensure that every element either is passed in a static location, in an + * array with an explicit keys property defined, or in an object literal + * with valid key property. + * + * @internal + * @param {ReactNode} node Statically passed child of any type. + * @param {*} parentType node's parent's type. */ - var ownerHasKeyUseWarning = {}; - - function getCurrentComponentErrorInfo(parentType) { + function validateChildKeys(node, parentType) { { - var info = getDeclarationErrorAddendum(); + if (typeof node !== "object" || !node) { + return; + } - if (!info) { - var parentName = getComponentNameFromType(parentType); + if (node.$$typeof === REACT_CLIENT_REFERENCE); + else if (isArray(node)) { + for (var i = 0; i < node.length; i++) { + var child = node[i]; - if (parentName) { - info = - "\n\nCheck the top-level render call using <" + parentName + ">."; + if (isValidElement(child)) { + validateExplicitKey(child, parentType); + } + } + } else if (isValidElement(node)) { + // This element was passed in a valid location. + if (node._store) { + node._store.validated = true; + } + } else { + var iteratorFn = getIteratorFn(node); + + if (typeof iteratorFn === "function") { + // Entry iterators used to provide implicit keys, + // but now we print a separate warning for them later. + if (iteratorFn !== node.entries) { + var iterator = iteratorFn.call(node); + var step; + + while (!(step = iterator.next()).done) { + if (isValidElement(step.value)) { + validateExplicitKey(step.value, parentType); + } + } + } } } + } + } + /** + * Verifies the object is a ReactElement. + * See https://reactjs.org/docs/react-api.html#isvalidelement + * @param {?object} object + * @return {boolean} True if `object` is a ReactElement. + * @final + */ - return info; + function isValidElement(object) { + { + return ( + typeof object === "object" && + object !== null && + object.$$typeof === REACT_ELEMENT_TYPE + ); } } + var ownerHasKeyUseWarning = {}; /** * Warn if the element doesn't have an explicit key assigned to it. * This element is in an array. The array could grow and shrink or be @@ -1331,56 +1458,75 @@ if (__DEV__) { setCurrentlyValidatingElement(null); } } - /** - * Ensure that every element either is passed in a static location, in an - * array with an explicit keys property defined, or in an object literal - * with valid key property. - * - * @internal - * @param {ReactNode} node Statically passed child of any type. - * @param {*} parentType node's parent's type. - */ - function validateChildKeys(node, parentType) { + function setCurrentlyValidatingElement(element) { { - if (typeof node !== "object" || !node) { - return; + if (element) { + var owner = element._owner; + var stack = describeUnknownElementTypeFrameInDEV( + element.type, + owner ? owner.type : null + ); + ReactDebugCurrentFrame.setExtraStackFrame(stack); + } else { + ReactDebugCurrentFrame.setExtraStackFrame(null); } + } + } - if (node.$$typeof === REACT_CLIENT_REFERENCE); - else if (isArray(node)) { - for (var i = 0; i < node.length; i++) { - var child = node[i]; + function getCurrentComponentErrorInfo(parentType) { + { + var info = getDeclarationErrorAddendum(); - if (isValidElement(child)) { - validateExplicitKey(child, parentType); - } - } - } else if (isValidElement(node)) { - // This element was passed in a valid location. - if (node._store) { - node._store.validated = true; + if (!info) { + var parentName = getComponentNameFromType(parentType); + + if (parentName) { + info = + "\n\nCheck the top-level render call using <" + parentName + ">."; } - } else { - var iteratorFn = getIteratorFn(node); + } - if (typeof iteratorFn === "function") { - // Entry iterators used to provide implicit keys, - // but now we print a separate warning for them later. - if (iteratorFn !== node.entries) { - var iterator = iteratorFn.call(node); - var step; + return info; + } + } + /** + * Given a fragment, validate that it can only be provided with fragment props + * @param {ReactElement} fragment + */ - while (!(step = iterator.next()).done) { - if (isValidElement(step.value)) { - validateExplicitKey(step.value, parentType); - } - } - } + function validateFragmentProps(fragment) { + { + var keys = Object.keys(fragment.props); + + for (var i = 0; i < keys.length; i++) { + var key = keys[i]; + + if (key !== "children" && key !== "key") { + setCurrentlyValidatingElement(fragment); + + error( + "Invalid prop `%s` supplied to `React.Fragment`. " + + "React.Fragment can only have `key` and `children` props.", + key + ); + + setCurrentlyValidatingElement(null); + break; } } + + if (fragment.ref !== null) { + setCurrentlyValidatingElement(fragment); + + error("Invalid attribute `ref` supplied to `React.Fragment`."); + + setCurrentlyValidatingElement(null); + } } } + + var propTypesMisspellWarningShown = false; /** * Given an element, validate that its props follow the propTypes definition, * provided by the type. @@ -1444,183 +1590,8 @@ if (__DEV__) { } } } - /** - * Given a fragment, validate that it can only be provided with fragment props - * @param {ReactElement} fragment - */ - - function validateFragmentProps(fragment) { - { - var keys = Object.keys(fragment.props); - - for (var i = 0; i < keys.length; i++) { - var key = keys[i]; - - if (key !== "children" && key !== "key") { - setCurrentlyValidatingElement(fragment); - - error( - "Invalid prop `%s` supplied to `React.Fragment`. " + - "React.Fragment can only have `key` and `children` props.", - key - ); - - setCurrentlyValidatingElement(null); - break; - } - } - - if (fragment.ref !== null) { - setCurrentlyValidatingElement(fragment); - - error("Invalid attribute `ref` supplied to `React.Fragment`."); - - setCurrentlyValidatingElement(null); - } - } - } - - var didWarnAboutKeySpread = {}; - function jsxWithValidation( - type, - props, - key, - isStaticChildren, - source, - self - ) { - { - var validType = isValidElementType(type); // We warn in this case but don't throw. We expect the element creation to - // succeed and there will likely be errors in render. - - if (!validType) { - var info = ""; - - if ( - type === undefined || - (typeof type === "object" && - type !== null && - Object.keys(type).length === 0) - ) { - info += - " You likely forgot to export your component from the file " + - "it's defined in, or you might have mixed up default and named imports."; - } - - var sourceInfo = getSourceInfoErrorAddendum(source); - - if (sourceInfo) { - info += sourceInfo; - } else { - info += getDeclarationErrorAddendum(); - } - - var typeString; - - if (type === null) { - typeString = "null"; - } else if (isArray(type)) { - typeString = "array"; - } else if ( - type !== undefined && - type.$$typeof === REACT_ELEMENT_TYPE - ) { - typeString = - "<" + (getComponentNameFromType(type.type) || "Unknown") + " />"; - info = - " Did you accidentally export a JSX literal instead of a component?"; - } else { - typeString = typeof type; - } - - error( - "React.jsx: type is invalid -- expected a string (for " + - "built-in components) or a class/function (for composite " + - "components) but got: %s.%s", - typeString, - info - ); - } - - var element = jsxDEV$1(type, props, key, source, self); // The result can be nullish if a mock or a custom function is used. - // TODO: Drop this when these are no longer allowed as the type argument. - - if (element == null) { - return element; - } // Skip key warning if the type isn't valid since our key validation logic - // doesn't expect a non-string/function type and can throw confusing errors. - // We don't want exception behavior to differ between dev and prod. - // (Rendering will throw with a helpful message and as soon as the type is - // fixed, the key warnings will appear.) - - if (validType) { - var children = props.children; - - if (children !== undefined) { - if (isStaticChildren) { - if (isArray(children)) { - for (var i = 0; i < children.length; i++) { - validateChildKeys(children[i], type); - } - - if (Object.freeze) { - Object.freeze(children); - } - } else { - error( - "React.jsx: Static children should always be an array. " + - "You are likely explicitly calling React.jsxs or React.jsxDEV. " + - "Use the Babel transform instead." - ); - } - } else { - validateChildKeys(children, type); - } - } - } - - if (hasOwnProperty.call(props, "key")) { - var componentName = getComponentNameFromType(type); - var keys = Object.keys(props).filter(function (k) { - return k !== "key"; - }); - var beforeExample = - keys.length > 0 - ? "{key: someKey, " + keys.join(": ..., ") + ": ...}" - : "{key: someKey}"; - - if (!didWarnAboutKeySpread[componentName + beforeExample]) { - var afterExample = - keys.length > 0 ? "{" + keys.join(": ..., ") + ": ...}" : "{}"; - - error( - 'A props object containing a "key" prop is being spread into JSX:\n' + - " let props = %s;\n" + - " <%s {...props} />\n" + - "React keys must be passed directly to JSX without using spread:\n" + - " let props = %s;\n" + - " <%s key={someKey} {...props} />", - beforeExample, - componentName, - afterExample, - componentName - ); - - didWarnAboutKeySpread[componentName + beforeExample] = true; - } - } - - if (type === REACT_FRAGMENT_TYPE) { - validateFragmentProps(element); - } else { - validatePropTypes(element); - } - - return element; - } - } // These two functions exist to still get child warnings in dev - var jsxDEV = jsxWithValidation; + var jsxDEV = jsxDEV$1; exports.Fragment = REACT_FRAGMENT_TYPE; exports.jsxDEV = jsxDEV; diff --git a/compiled/facebook-www/JSXDEVRuntime-dev.modern.js b/compiled/facebook-www/JSXDEVRuntime-dev.modern.js index 07616147ff588..dcf5cb5de27ff 100644 --- a/compiled/facebook-www/JSXDEVRuntime-dev.modern.js +++ b/compiled/facebook-www/JSXDEVRuntime-dev.modern.js @@ -112,49 +112,6 @@ if (__DEV__) { enableRenderableContext = dynamicFeatureFlags.enableRenderableContext; // On WWW, true is used for a new modern build. - var REACT_CLIENT_REFERENCE$2 = Symbol.for("react.client.reference"); - function isValidElementType(type) { - if (typeof type === "string" || typeof type === "function") { - return true; - } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill). - - if ( - type === REACT_FRAGMENT_TYPE || - type === REACT_PROFILER_TYPE || - (enableDebugTracing && type === REACT_DEBUG_TRACING_MODE_TYPE) || - type === REACT_STRICT_MODE_TYPE || - type === REACT_SUSPENSE_TYPE || - type === REACT_SUSPENSE_LIST_TYPE || - type === REACT_LEGACY_HIDDEN_TYPE || - type === REACT_OFFSCREEN_TYPE || - type === REACT_SCOPE_TYPE || - type === REACT_CACHE_TYPE || - (enableTransitionTracing && type === REACT_TRACING_MARKER_TYPE) - ) { - return true; - } - - if (typeof type === "object" && type !== null) { - if ( - type.$$typeof === REACT_LAZY_TYPE || - type.$$typeof === REACT_MEMO_TYPE || - type.$$typeof === REACT_CONTEXT_TYPE || - (!enableRenderableContext && type.$$typeof === REACT_PROVIDER_TYPE) || - (enableRenderableContext && type.$$typeof === REACT_CONSUMER_TYPE) || - type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object - // types supported by any Flight configuration anywhere since - // we don't know which Flight build this will end up being used - // with. - type.$$typeof === REACT_CLIENT_REFERENCE$2 || - type.getModuleId !== undefined - ) { - return true; - } - } - - return false; - } - function getWrappedName(outerType, innerType, wrapperName) { var displayName = outerType.displayName; @@ -172,7 +129,7 @@ if (__DEV__) { return type.displayName || "Context"; } - var REACT_CLIENT_REFERENCE$1 = Symbol.for("react.client.reference"); // Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead. + var REACT_CLIENT_REFERENCE$2 = Symbol.for("react.client.reference"); // Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead. function getComponentNameFromType(type) { if (type == null) { @@ -181,7 +138,7 @@ if (__DEV__) { } if (typeof type === "function") { - if (type.$$typeof === REACT_CLIENT_REFERENCE$1) { + if (type.$$typeof === REACT_CLIENT_REFERENCE$2) { // TODO: Create a convention for naming client references with debug info. return null; } @@ -289,6 +246,135 @@ if (__DEV__) { return null; } + var ReactSharedInternals = + React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; + + // $FlowFixMe[method-unbinding] + var hasOwnProperty = Object.prototype.hasOwnProperty; + + /* + * 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 checkKeyStringCoercion(value) { + { + if (willCoercionThrow(value)) { + error( + "The provided key is an unsupported type %s." + + " This value must be coerced to a string before using it here.", + 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) { + if (typeof type === "string" || typeof type === "function") { + return true; + } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill). + + if ( + type === REACT_FRAGMENT_TYPE || + type === REACT_PROFILER_TYPE || + (enableDebugTracing && type === REACT_DEBUG_TRACING_MODE_TYPE) || + type === REACT_STRICT_MODE_TYPE || + type === REACT_SUSPENSE_TYPE || + type === REACT_SUSPENSE_LIST_TYPE || + type === REACT_LEGACY_HIDDEN_TYPE || + type === REACT_OFFSCREEN_TYPE || + type === REACT_SCOPE_TYPE || + type === REACT_CACHE_TYPE || + (enableTransitionTracing && type === REACT_TRACING_MARKER_TYPE) + ) { + return true; + } + + if (typeof type === "object" && type !== null) { + if ( + type.$$typeof === REACT_LAZY_TYPE || + type.$$typeof === REACT_MEMO_TYPE || + type.$$typeof === REACT_CONTEXT_TYPE || + (!enableRenderableContext && type.$$typeof === REACT_PROVIDER_TYPE) || + (enableRenderableContext && type.$$typeof === REACT_CONSUMER_TYPE) || + type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object + // types supported by any Flight configuration anywhere since + // we don't know which Flight build this will end up being used + // with. + type.$$typeof === REACT_CLIENT_REFERENCE$1 || + type.getModuleId !== undefined + ) { + return true; + } + } + + return false; + } + + var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare + + function isArray(a) { + return isArrayImpl(a); + } + var assign = Object.assign; // Helpers to patch console.logs to avoid logging during side-effect free @@ -388,9 +474,6 @@ if (__DEV__) { } } - var ReactSharedInternals = - React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; - var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher; var prefix; function describeBuiltInComponentFrame(name, ownerFn) { @@ -724,9 +807,6 @@ if (__DEV__) { return ""; } - // $FlowFixMe[method-unbinding] - var hasOwnProperty = Object.prototype.hasOwnProperty; - var loggedTypeFailures = {}; var ReactDebugCurrentFrame$1 = ReactSharedInternals.ReactDebugCurrentFrame; @@ -832,133 +912,55 @@ if (__DEV__) { } } - var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare + var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; + var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; + var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"); + var specialPropKeyWarningShown; + var specialPropRefWarningShown; + var didWarnAboutStringRefs; - function isArray(a) { - return isArrayImpl(a); + { + didWarnAboutStringRefs = {}; } - /* - * 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) { + function hasValidRef(config) { { - // 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] + if (hasOwnProperty.call(config, "ref")) { + var getter = Object.getOwnPropertyDescriptor(config, "ref").get; - return type; + if (getter && getter.isReactWarning) { + return false; + } + } } - } // $FlowFixMe[incompatible-return] only called in DEV, so void return is not possible. - function willCoercionThrow(value) { + return config.ref !== undefined; + } + + function hasValidKey(config) { { - try { - testStringCoercion(value); - return false; - } catch (e) { - return true; + if (hasOwnProperty.call(config, "key")) { + var getter = Object.getOwnPropertyDescriptor(config, "key").get; + + if (getter && getter.isReactWarning) { + return false; + } } } - } - 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 checkKeyStringCoercion(value) { - { - if (willCoercionThrow(value)) { - error( - "The provided key is an unsupported type %s." + - " This value must be coerced to a string before using it here.", - typeName(value) - ); - - return testStringCoercion(value); // throw (to help callers find troubleshooting comments) - } - } - } - - var ReactCurrentOwner$1 = ReactSharedInternals.ReactCurrentOwner; - var specialPropKeyWarningShown; - var specialPropRefWarningShown; - var didWarnAboutStringRefs; - - { - didWarnAboutStringRefs = {}; - } - - function hasValidRef(config) { - { - if (hasOwnProperty.call(config, "ref")) { - var getter = Object.getOwnPropertyDescriptor(config, "ref").get; - - if (getter && getter.isReactWarning) { - return false; - } - } - } - - return config.ref !== undefined; - } - - function hasValidKey(config) { - { - if (hasOwnProperty.call(config, "key")) { - var getter = Object.getOwnPropertyDescriptor(config, "key").get; - - if (getter && getter.isReactWarning) { - return false; - } - } - } - - return config.key !== undefined; + return config.key !== undefined; } function warnIfStringRefCannotBeAutoConverted(config, self) { { if ( typeof config.ref === "string" && - ReactCurrentOwner$1.current && + ReactCurrentOwner.current && self && - ReactCurrentOwner$1.current.stateNode !== self + ReactCurrentOwner.current.stateNode !== self ) { var componentName = getComponentNameFromType( - ReactCurrentOwner$1.current.type + ReactCurrentOwner.current.type ); if (!didWarnAboutStringRefs[componentName]) { @@ -969,7 +971,7 @@ if (__DEV__) { "We ask you to manually fix this case by using useRef() or createRef() instead. " + "Learn more about using refs safely here: " + "https://reactjs.org/link/strict-mode-string-ref", - getComponentNameFromType(ReactCurrentOwner$1.current.type), + getComponentNameFromType(ReactCurrentOwner.current.type), config.ref ); @@ -1092,6 +1094,7 @@ if (__DEV__) { return element; } + var didWarnAboutKeySpread = {}; /** * https://github.com/reactjs/rfcs/pull/107 * @param {*} type @@ -1099,8 +1102,122 @@ if (__DEV__) { * @param {string} key */ - function jsxDEV$1(type, config, maybeKey, source, self) { + function jsxDEV$1(type, config, maybeKey, isStaticChildren, source, self) { { + if (!isValidElementType(type)) { + // This is an invalid element type. + // + // We warn in this case but don't throw. We expect the element creation to + // succeed and there will likely be errors in render. + var info = ""; + + if ( + type === undefined || + (typeof type === "object" && + type !== null && + Object.keys(type).length === 0) + ) { + info += + " You likely forgot to export your component from the file " + + "it's defined in, or you might have mixed up default and named imports."; + } + + var sourceInfo = getSourceInfoErrorAddendum(source); + + if (sourceInfo) { + info += sourceInfo; + } else { + info += getDeclarationErrorAddendum(); + } + + var typeString; + + if (type === null) { + typeString = "null"; + } else if (isArray(type)) { + typeString = "array"; + } else if ( + type !== undefined && + type.$$typeof === REACT_ELEMENT_TYPE + ) { + typeString = + "<" + (getComponentNameFromType(type.type) || "Unknown") + " />"; + info = + " Did you accidentally export a JSX literal instead of a component?"; + } else { + typeString = typeof type; + } + + error( + "React.jsx: type is invalid -- expected a string (for " + + "built-in components) or a class/function (for composite " + + "components) but got: %s.%s", + typeString, + info + ); + } else { + // This is a valid element type. + // Skip key warning if the type isn't valid since our key validation logic + // doesn't expect a non-string/function type and can throw confusing + // errors. We don't want exception behavior to differ between dev and + // prod. (Rendering will throw with a helpful message and as soon as the + // type is fixed, the key warnings will appear.) + var children = config.children; + + if (children !== undefined) { + if (isStaticChildren) { + if (isArray(children)) { + for (var i = 0; i < children.length; i++) { + validateChildKeys(children[i], type); + } + + if (Object.freeze) { + Object.freeze(children); + } + } else { + error( + "React.jsx: Static children should always be an array. " + + "You are likely explicitly calling React.jsxs or React.jsxDEV. " + + "Use the Babel transform instead." + ); + } + } else { + validateChildKeys(children, type); + } + } + } // Warn about key spread regardless of whether the type is valid. + + if (hasOwnProperty.call(config, "key")) { + var componentName = getComponentNameFromType(type); + var keys = Object.keys(config).filter(function (k) { + return k !== "key"; + }); + var beforeExample = + keys.length > 0 + ? "{key: someKey, " + keys.join(": ..., ") + ": ...}" + : "{key: someKey}"; + + if (!didWarnAboutKeySpread[componentName + beforeExample]) { + var afterExample = + keys.length > 0 ? "{" + keys.join(": ..., ") + ": ...}" : "{}"; + + error( + 'A props object containing a "key" prop is being spread into JSX:\n' + + " let props = %s;\n" + + " <%s {...props} />\n" + + "React keys must be passed directly to JSX without using spread:\n" + + " let props = %s;\n" + + " <%s key={someKey} {...props} />", + beforeExample, + componentName, + afterExample, + componentName + ); + + didWarnAboutKeySpread[componentName + beforeExample] = true; + } + } + var propName; // Reserved names are extracted var props = {}; @@ -1168,57 +1285,23 @@ if (__DEV__) { } } - return ReactElement( + var element = ReactElement( type, key, ref, self, source, - ReactCurrentOwner$1.current, + ReactCurrentOwner.current, props ); - } - } - - var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; - var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; - var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"); - function setCurrentlyValidatingElement(element) { - { - if (element) { - var owner = element._owner; - var stack = describeUnknownElementTypeFrameInDEV( - element.type, - owner ? owner.type : null - ); - ReactDebugCurrentFrame.setExtraStackFrame(stack); + if (type === REACT_FRAGMENT_TYPE) { + validateFragmentProps(element); } else { - ReactDebugCurrentFrame.setExtraStackFrame(null); + validatePropTypes(element); } - } - } - var propTypesMisspellWarningShown; - - { - propTypesMisspellWarningShown = false; - } - /** - * Verifies the object is a ReactElement. - * See https://reactjs.org/docs/react-api.html#isvalidelement - * @param {?object} object - * @return {boolean} True if `object` is a ReactElement. - * @final - */ - - function isValidElement(object) { - { - return ( - typeof object === "object" && - object !== null && - object.$$typeof === REACT_ELEMENT_TYPE - ); + return element; } } @@ -1248,29 +1331,73 @@ if (__DEV__) { } } /** - * 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 - * updates. + * Ensure that every element either is passed in a static location, in an + * array with an explicit keys property defined, or in an object literal + * with valid key property. + * + * @internal + * @param {ReactNode} node Statically passed child of any type. + * @param {*} parentType node's parent's type. */ - var ownerHasKeyUseWarning = {}; - - function getCurrentComponentErrorInfo(parentType) { + function validateChildKeys(node, parentType) { { - var info = getDeclarationErrorAddendum(); + if (typeof node !== "object" || !node) { + return; + } - if (!info) { - var parentName = getComponentNameFromType(parentType); + if (node.$$typeof === REACT_CLIENT_REFERENCE); + else if (isArray(node)) { + for (var i = 0; i < node.length; i++) { + var child = node[i]; - if (parentName) { - info = - "\n\nCheck the top-level render call using <" + parentName + ">."; + if (isValidElement(child)) { + validateExplicitKey(child, parentType); + } + } + } else if (isValidElement(node)) { + // This element was passed in a valid location. + if (node._store) { + node._store.validated = true; + } + } else { + var iteratorFn = getIteratorFn(node); + + if (typeof iteratorFn === "function") { + // Entry iterators used to provide implicit keys, + // but now we print a separate warning for them later. + if (iteratorFn !== node.entries) { + var iterator = iteratorFn.call(node); + var step; + + while (!(step = iterator.next()).done) { + if (isValidElement(step.value)) { + validateExplicitKey(step.value, parentType); + } + } + } } } + } + } + /** + * Verifies the object is a ReactElement. + * See https://reactjs.org/docs/react-api.html#isvalidelement + * @param {?object} object + * @return {boolean} True if `object` is a ReactElement. + * @final + */ - return info; + function isValidElement(object) { + { + return ( + typeof object === "object" && + object !== null && + object.$$typeof === REACT_ELEMENT_TYPE + ); } } + var ownerHasKeyUseWarning = {}; /** * Warn if the element doesn't have an explicit key assigned to it. * This element is in an array. The array could grow and shrink or be @@ -1331,56 +1458,75 @@ if (__DEV__) { setCurrentlyValidatingElement(null); } } - /** - * Ensure that every element either is passed in a static location, in an - * array with an explicit keys property defined, or in an object literal - * with valid key property. - * - * @internal - * @param {ReactNode} node Statically passed child of any type. - * @param {*} parentType node's parent's type. - */ - function validateChildKeys(node, parentType) { + function setCurrentlyValidatingElement(element) { { - if (typeof node !== "object" || !node) { - return; + if (element) { + var owner = element._owner; + var stack = describeUnknownElementTypeFrameInDEV( + element.type, + owner ? owner.type : null + ); + ReactDebugCurrentFrame.setExtraStackFrame(stack); + } else { + ReactDebugCurrentFrame.setExtraStackFrame(null); } + } + } - if (node.$$typeof === REACT_CLIENT_REFERENCE); - else if (isArray(node)) { - for (var i = 0; i < node.length; i++) { - var child = node[i]; + function getCurrentComponentErrorInfo(parentType) { + { + var info = getDeclarationErrorAddendum(); - if (isValidElement(child)) { - validateExplicitKey(child, parentType); - } - } - } else if (isValidElement(node)) { - // This element was passed in a valid location. - if (node._store) { - node._store.validated = true; + if (!info) { + var parentName = getComponentNameFromType(parentType); + + if (parentName) { + info = + "\n\nCheck the top-level render call using <" + parentName + ">."; } - } else { - var iteratorFn = getIteratorFn(node); + } - if (typeof iteratorFn === "function") { - // Entry iterators used to provide implicit keys, - // but now we print a separate warning for them later. - if (iteratorFn !== node.entries) { - var iterator = iteratorFn.call(node); - var step; + return info; + } + } + /** + * Given a fragment, validate that it can only be provided with fragment props + * @param {ReactElement} fragment + */ - while (!(step = iterator.next()).done) { - if (isValidElement(step.value)) { - validateExplicitKey(step.value, parentType); - } - } - } + function validateFragmentProps(fragment) { + { + var keys = Object.keys(fragment.props); + + for (var i = 0; i < keys.length; i++) { + var key = keys[i]; + + if (key !== "children" && key !== "key") { + setCurrentlyValidatingElement(fragment); + + error( + "Invalid prop `%s` supplied to `React.Fragment`. " + + "React.Fragment can only have `key` and `children` props.", + key + ); + + setCurrentlyValidatingElement(null); + break; } } + + if (fragment.ref !== null) { + setCurrentlyValidatingElement(fragment); + + error("Invalid attribute `ref` supplied to `React.Fragment`."); + + setCurrentlyValidatingElement(null); + } } } + + var propTypesMisspellWarningShown = false; /** * Given an element, validate that its props follow the propTypes definition, * provided by the type. @@ -1444,183 +1590,8 @@ if (__DEV__) { } } } - /** - * Given a fragment, validate that it can only be provided with fragment props - * @param {ReactElement} fragment - */ - - function validateFragmentProps(fragment) { - { - var keys = Object.keys(fragment.props); - - for (var i = 0; i < keys.length; i++) { - var key = keys[i]; - - if (key !== "children" && key !== "key") { - setCurrentlyValidatingElement(fragment); - - error( - "Invalid prop `%s` supplied to `React.Fragment`. " + - "React.Fragment can only have `key` and `children` props.", - key - ); - - setCurrentlyValidatingElement(null); - break; - } - } - - if (fragment.ref !== null) { - setCurrentlyValidatingElement(fragment); - - error("Invalid attribute `ref` supplied to `React.Fragment`."); - - setCurrentlyValidatingElement(null); - } - } - } - - var didWarnAboutKeySpread = {}; - function jsxWithValidation( - type, - props, - key, - isStaticChildren, - source, - self - ) { - { - var validType = isValidElementType(type); // We warn in this case but don't throw. We expect the element creation to - // succeed and there will likely be errors in render. - - if (!validType) { - var info = ""; - - if ( - type === undefined || - (typeof type === "object" && - type !== null && - Object.keys(type).length === 0) - ) { - info += - " You likely forgot to export your component from the file " + - "it's defined in, or you might have mixed up default and named imports."; - } - - var sourceInfo = getSourceInfoErrorAddendum(source); - - if (sourceInfo) { - info += sourceInfo; - } else { - info += getDeclarationErrorAddendum(); - } - - var typeString; - - if (type === null) { - typeString = "null"; - } else if (isArray(type)) { - typeString = "array"; - } else if ( - type !== undefined && - type.$$typeof === REACT_ELEMENT_TYPE - ) { - typeString = - "<" + (getComponentNameFromType(type.type) || "Unknown") + " />"; - info = - " Did you accidentally export a JSX literal instead of a component?"; - } else { - typeString = typeof type; - } - - error( - "React.jsx: type is invalid -- expected a string (for " + - "built-in components) or a class/function (for composite " + - "components) but got: %s.%s", - typeString, - info - ); - } - - var element = jsxDEV$1(type, props, key, source, self); // The result can be nullish if a mock or a custom function is used. - // TODO: Drop this when these are no longer allowed as the type argument. - - if (element == null) { - return element; - } // Skip key warning if the type isn't valid since our key validation logic - // doesn't expect a non-string/function type and can throw confusing errors. - // We don't want exception behavior to differ between dev and prod. - // (Rendering will throw with a helpful message and as soon as the type is - // fixed, the key warnings will appear.) - - if (validType) { - var children = props.children; - - if (children !== undefined) { - if (isStaticChildren) { - if (isArray(children)) { - for (var i = 0; i < children.length; i++) { - validateChildKeys(children[i], type); - } - - if (Object.freeze) { - Object.freeze(children); - } - } else { - error( - "React.jsx: Static children should always be an array. " + - "You are likely explicitly calling React.jsxs or React.jsxDEV. " + - "Use the Babel transform instead." - ); - } - } else { - validateChildKeys(children, type); - } - } - } - - if (hasOwnProperty.call(props, "key")) { - var componentName = getComponentNameFromType(type); - var keys = Object.keys(props).filter(function (k) { - return k !== "key"; - }); - var beforeExample = - keys.length > 0 - ? "{key: someKey, " + keys.join(": ..., ") + ": ...}" - : "{key: someKey}"; - - if (!didWarnAboutKeySpread[componentName + beforeExample]) { - var afterExample = - keys.length > 0 ? "{" + keys.join(": ..., ") + ": ...}" : "{}"; - - error( - 'A props object containing a "key" prop is being spread into JSX:\n' + - " let props = %s;\n" + - " <%s {...props} />\n" + - "React keys must be passed directly to JSX without using spread:\n" + - " let props = %s;\n" + - " <%s key={someKey} {...props} />", - beforeExample, - componentName, - afterExample, - componentName - ); - - didWarnAboutKeySpread[componentName + beforeExample] = true; - } - } - - if (type === REACT_FRAGMENT_TYPE) { - validateFragmentProps(element); - } else { - validatePropTypes(element); - } - - return element; - } - } // These two functions exist to still get child warnings in dev - var jsxDEV = jsxWithValidation; + var jsxDEV = jsxDEV$1; exports.Fragment = REACT_FRAGMENT_TYPE; exports.jsxDEV = jsxDEV; diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION index ff4034ca8ffeb..f8e02852335af 100644 --- a/compiled/facebook-www/REVISION +++ b/compiled/facebook-www/REVISION @@ -1 +1 @@ -c820097716c3d9765bf85bf58202a4975d99e450 +ec160f32c28ccab798c73ecccbb36ce121e1640e diff --git a/compiled/facebook-www/React-dev.classic.js b/compiled/facebook-www/React-dev.classic.js index 1973cea364b9c..0b09bfaa44a8c 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 = "18.3.0-www-classic-435f93e8"; + var ReactVersion = "18.3.0-www-classic-8e729a7a"; // ATTENTION // When adding new symbols to this file, @@ -621,7 +621,7 @@ if (__DEV__) { * The current owner is the component who should own any components that are * currently being constructed. */ - var ReactCurrentOwner$2 = { + var ReactCurrentOwner$1 = { /** * @internal * @type {ReactComponent} @@ -717,12 +717,12 @@ if (__DEV__) { { if ( typeof config.ref === "string" && - ReactCurrentOwner$2.current && + ReactCurrentOwner$1.current && config.__self && - ReactCurrentOwner$2.current.stateNode !== config.__self + ReactCurrentOwner$1.current.stateNode !== config.__self ) { var componentName = getComponentNameFromType( - ReactCurrentOwner$2.current.type + ReactCurrentOwner$1.current.type ); if (!didWarnAboutStringRefs$1[componentName]) { @@ -903,7 +903,7 @@ if (__DEV__) { } } - return ReactElement$1(type, key, ref, ReactCurrentOwner$2.current, props); + return ReactElement$1(type, key, ref, ReactCurrentOwner$1.current, props); } function cloneAndReplaceKey(oldElement, newKey) { var newElement = ReactElement$1( @@ -942,7 +942,7 @@ if (__DEV__) { if (hasValidRef$1(config)) { // Silently steal the ref from the parent. ref = config.ref; - owner = ReactCurrentOwner$2.current; + owner = ReactCurrentOwner$1.current; } if (hasValidKey$1(config)) { @@ -1226,7 +1226,7 @@ if (__DEV__) { ReactCurrentDispatcher: ReactCurrentDispatcher$1, ReactCurrentCache: ReactCurrentCache, ReactCurrentBatchConfig: ReactCurrentBatchConfig, - ReactCurrentOwner: ReactCurrentOwner$2 + ReactCurrentOwner: ReactCurrentOwner$1 }; { @@ -1696,8 +1696,8 @@ if (__DEV__) { } function getDeclarationErrorAddendum$1() { - if (ReactCurrentOwner$2.current) { - var name = getComponentNameFromType(ReactCurrentOwner$2.current.type); + if (ReactCurrentOwner$1.current) { + var name = getComponentNameFromType(ReactCurrentOwner$1.current.type); if (name) { return "\n\nCheck the render method of `" + name + "`."; @@ -1780,7 +1780,7 @@ if (__DEV__) { if ( element && element._owner && - element._owner !== ReactCurrentOwner$2.current + element._owner !== ReactCurrentOwner$1.current ) { // Give the component that originally created this child. childOwner = @@ -3440,7 +3440,9 @@ if (__DEV__) { only: onlyChild }; - var ReactCurrentOwner$1 = ReactSharedInternals.ReactCurrentOwner; + var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; + var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; + var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"); var specialPropKeyWarningShown; var specialPropRefWarningShown; var didWarnAboutStringRefs; @@ -3481,12 +3483,12 @@ if (__DEV__) { { if ( typeof config.ref === "string" && - ReactCurrentOwner$1.current && + ReactCurrentOwner.current && self && - ReactCurrentOwner$1.current.stateNode !== self + ReactCurrentOwner.current.stateNode !== self ) { var componentName = getComponentNameFromType( - ReactCurrentOwner$1.current.type + ReactCurrentOwner.current.type ); if (!didWarnAboutStringRefs[componentName]) { @@ -3497,7 +3499,7 @@ if (__DEV__) { "We ask you to manually fix this case by using useRef() or createRef() instead. " + "Learn more about using refs safely here: " + "https://reactjs.org/link/strict-mode-string-ref", - getComponentNameFromType(ReactCurrentOwner$1.current.type), + getComponentNameFromType(ReactCurrentOwner.current.type), config.ref ); @@ -3620,6 +3622,43 @@ if (__DEV__) { return element; } + // support `jsx` and `jsxs` when running in development. This supports the case + // where a third-party dependency ships code that was compiled for production; + // we want to still provide warnings in development. + // + // So these functions are the _dev_ implementations of the _production_ + // API signatures. + // + // Since these functions are dev-only, it's ok to add an indirection here. They + // only exist to provide different versions of `isStaticChildren`. (We shouldn't + // use this pattern for the prod versions, though, because it will add an call + // frame.) + + function jsxProdSignatureRunningInDevWithDynamicChildren( + type, + config, + maybeKey, + source, + self + ) { + { + var isStaticChildren = false; + return jsxDEV$1(type, config, maybeKey, isStaticChildren, source, self); + } + } + function jsxProdSignatureRunningInDevWithStaticChildren( + type, + config, + maybeKey, + source, + self + ) { + { + var isStaticChildren = true; + return jsxDEV$1(type, config, maybeKey, isStaticChildren, source, self); + } + } + var didWarnAboutKeySpread = {}; /** * https://github.com/reactjs/rfcs/pull/107 * @param {*} type @@ -3627,8 +3666,122 @@ if (__DEV__) { * @param {string} key */ - function jsxDEV$1(type, config, maybeKey, source, self) { + function jsxDEV$1(type, config, maybeKey, isStaticChildren, source, self) { { + if (!isValidElementType(type)) { + // This is an invalid element type. + // + // We warn in this case but don't throw. We expect the element creation to + // succeed and there will likely be errors in render. + var info = ""; + + if ( + type === undefined || + (typeof type === "object" && + type !== null && + Object.keys(type).length === 0) + ) { + info += + " You likely forgot to export your component from the file " + + "it's defined in, or you might have mixed up default and named imports."; + } + + var sourceInfo = getSourceInfoErrorAddendum(source); + + if (sourceInfo) { + info += sourceInfo; + } else { + info += getDeclarationErrorAddendum(); + } + + var typeString; + + if (type === null) { + typeString = "null"; + } else if (isArray(type)) { + typeString = "array"; + } else if ( + type !== undefined && + type.$$typeof === REACT_ELEMENT_TYPE + ) { + typeString = + "<" + (getComponentNameFromType(type.type) || "Unknown") + " />"; + info = + " Did you accidentally export a JSX literal instead of a component?"; + } else { + typeString = typeof type; + } + + error( + "React.jsx: type is invalid -- expected a string (for " + + "built-in components) or a class/function (for composite " + + "components) but got: %s.%s", + typeString, + info + ); + } else { + // This is a valid element type. + // Skip key warning if the type isn't valid since our key validation logic + // doesn't expect a non-string/function type and can throw confusing + // errors. We don't want exception behavior to differ between dev and + // prod. (Rendering will throw with a helpful message and as soon as the + // type is fixed, the key warnings will appear.) + var children = config.children; + + if (children !== undefined) { + if (isStaticChildren) { + if (isArray(children)) { + for (var i = 0; i < children.length; i++) { + validateChildKeys(children[i], type); + } + + if (Object.freeze) { + Object.freeze(children); + } + } else { + error( + "React.jsx: Static children should always be an array. " + + "You are likely explicitly calling React.jsxs or React.jsxDEV. " + + "Use the Babel transform instead." + ); + } + } else { + validateChildKeys(children, type); + } + } + } // Warn about key spread regardless of whether the type is valid. + + if (hasOwnProperty.call(config, "key")) { + var componentName = getComponentNameFromType(type); + var keys = Object.keys(config).filter(function (k) { + return k !== "key"; + }); + var beforeExample = + keys.length > 0 + ? "{key: someKey, " + keys.join(": ..., ") + ": ...}" + : "{key: someKey}"; + + if (!didWarnAboutKeySpread[componentName + beforeExample]) { + var afterExample = + keys.length > 0 ? "{" + keys.join(": ..., ") + ": ...}" : "{}"; + + error( + 'A props object containing a "key" prop is being spread into JSX:\n' + + " let props = %s;\n" + + " <%s {...props} />\n" + + "React keys must be passed directly to JSX without using spread:\n" + + " let props = %s;\n" + + " <%s key={someKey} {...props} />", + beforeExample, + componentName, + afterExample, + componentName + ); + + didWarnAboutKeySpread[componentName + beforeExample] = true; + } + } + var propName; // Reserved names are extracted var props = {}; @@ -3696,57 +3849,23 @@ if (__DEV__) { } } - return ReactElement( + var element = ReactElement( type, key, ref, self, source, - ReactCurrentOwner$1.current, + ReactCurrentOwner.current, props ); - } - } - - var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; - var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; - var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"); - function setCurrentlyValidatingElement(element) { - { - if (element) { - var owner = element._owner; - var stack = describeUnknownElementTypeFrameInDEV( - element.type, - owner ? owner.type : null - ); - ReactDebugCurrentFrame.setExtraStackFrame(stack); + if (type === REACT_FRAGMENT_TYPE) { + validateFragmentProps(element); } else { - ReactDebugCurrentFrame.setExtraStackFrame(null); + validatePropTypes(element); } - } - } - - var propTypesMisspellWarningShown; - - { - propTypesMisspellWarningShown = false; - } - /** - * Verifies the object is a ReactElement. - * See https://reactjs.org/docs/react-api.html#isvalidelement - * @param {?object} object - * @return {boolean} True if `object` is a ReactElement. - * @final - */ - function isValidElement(object) { - { - return ( - typeof object === "object" && - object !== null && - object.$$typeof === REACT_ELEMENT_TYPE - ); + return element; } } @@ -3776,29 +3895,73 @@ if (__DEV__) { } } /** - * 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 - * updates. + * Ensure that every element either is passed in a static location, in an + * array with an explicit keys property defined, or in an object literal + * with valid key property. + * + * @internal + * @param {ReactNode} node Statically passed child of any type. + * @param {*} parentType node's parent's type. */ - var ownerHasKeyUseWarning = {}; - - function getCurrentComponentErrorInfo(parentType) { + function validateChildKeys(node, parentType) { { - var info = getDeclarationErrorAddendum(); + if (typeof node !== "object" || !node) { + return; + } - if (!info) { - var parentName = getComponentNameFromType(parentType); + if (node.$$typeof === REACT_CLIENT_REFERENCE); + else if (isArray(node)) { + for (var i = 0; i < node.length; i++) { + var child = node[i]; - if (parentName) { - info = - "\n\nCheck the top-level render call using <" + parentName + ">."; + if (isValidElement(child)) { + validateExplicitKey(child, parentType); + } + } + } else if (isValidElement(node)) { + // This element was passed in a valid location. + if (node._store) { + node._store.validated = true; + } + } else { + var iteratorFn = getIteratorFn(node); + + if (typeof iteratorFn === "function") { + // Entry iterators used to provide implicit keys, + // but now we print a separate warning for them later. + if (iteratorFn !== node.entries) { + var iterator = iteratorFn.call(node); + var step; + + while (!(step = iterator.next()).done) { + if (isValidElement(step.value)) { + validateExplicitKey(step.value, parentType); + } + } + } } } + } + } + /** + * Verifies the object is a ReactElement. + * See https://reactjs.org/docs/react-api.html#isvalidelement + * @param {?object} object + * @return {boolean} True if `object` is a ReactElement. + * @final + */ - return info; + function isValidElement(object) { + { + return ( + typeof object === "object" && + object !== null && + object.$$typeof === REACT_ELEMENT_TYPE + ); } } + var ownerHasKeyUseWarning = {}; /** * Warn if the element doesn't have an explicit key assigned to it. * This element is in an array. The array could grow and shrink or be @@ -3859,56 +4022,75 @@ if (__DEV__) { setCurrentlyValidatingElement(null); } } - /** - * Ensure that every element either is passed in a static location, in an - * array with an explicit keys property defined, or in an object literal - * with valid key property. - * - * @internal - * @param {ReactNode} node Statically passed child of any type. - * @param {*} parentType node's parent's type. - */ - function validateChildKeys(node, parentType) { + function setCurrentlyValidatingElement(element) { { - if (typeof node !== "object" || !node) { - return; + if (element) { + var owner = element._owner; + var stack = describeUnknownElementTypeFrameInDEV( + element.type, + owner ? owner.type : null + ); + ReactDebugCurrentFrame.setExtraStackFrame(stack); + } else { + ReactDebugCurrentFrame.setExtraStackFrame(null); } + } + } - if (node.$$typeof === REACT_CLIENT_REFERENCE); - else if (isArray(node)) { - for (var i = 0; i < node.length; i++) { - var child = node[i]; + function getCurrentComponentErrorInfo(parentType) { + { + var info = getDeclarationErrorAddendum(); - if (isValidElement(child)) { - validateExplicitKey(child, parentType); - } - } - } else if (isValidElement(node)) { - // This element was passed in a valid location. - if (node._store) { - node._store.validated = true; + if (!info) { + var parentName = getComponentNameFromType(parentType); + + if (parentName) { + info = + "\n\nCheck the top-level render call using <" + parentName + ">."; } - } else { - var iteratorFn = getIteratorFn(node); + } - if (typeof iteratorFn === "function") { - // Entry iterators used to provide implicit keys, - // but now we print a separate warning for them later. - if (iteratorFn !== node.entries) { - var iterator = iteratorFn.call(node); - var step; + return info; + } + } + /** + * Given a fragment, validate that it can only be provided with fragment props + * @param {ReactElement} fragment + */ - while (!(step = iterator.next()).done) { - if (isValidElement(step.value)) { - validateExplicitKey(step.value, parentType); - } - } - } + function validateFragmentProps(fragment) { + { + var keys = Object.keys(fragment.props); + + for (var i = 0; i < keys.length; i++) { + var key = keys[i]; + + if (key !== "children" && key !== "key") { + setCurrentlyValidatingElement(fragment); + + error( + "Invalid prop `%s` supplied to `React.Fragment`. " + + "React.Fragment can only have `key` and `children` props.", + key + ); + + setCurrentlyValidatingElement(null); + break; } } + + if (fragment.ref !== null) { + setCurrentlyValidatingElement(fragment); + + error("Invalid attribute `ref` supplied to `React.Fragment`."); + + setCurrentlyValidatingElement(null); + } } } + + var propTypesMisspellWarningShown = false; /** * Given an element, validate that its props follow the propTypes definition, * provided by the type. @@ -3972,201 +4154,12 @@ if (__DEV__) { } } } - /** - * Given a fragment, validate that it can only be provided with fragment props - * @param {ReactElement} fragment - */ - - function validateFragmentProps(fragment) { - { - var keys = Object.keys(fragment.props); - - for (var i = 0; i < keys.length; i++) { - var key = keys[i]; - - if (key !== "children" && key !== "key") { - setCurrentlyValidatingElement(fragment); - - error( - "Invalid prop `%s` supplied to `React.Fragment`. " + - "React.Fragment can only have `key` and `children` props.", - key - ); - - setCurrentlyValidatingElement(null); - break; - } - } - - if (fragment.ref !== null) { - setCurrentlyValidatingElement(fragment); - - error("Invalid attribute `ref` supplied to `React.Fragment`."); - - setCurrentlyValidatingElement(null); - } - } - } - - var didWarnAboutKeySpread = {}; - function jsxWithValidation( - type, - props, - key, - isStaticChildren, - source, - self - ) { - { - var validType = isValidElementType(type); // We warn in this case but don't throw. We expect the element creation to - // succeed and there will likely be errors in render. - - if (!validType) { - var info = ""; - - if ( - type === undefined || - (typeof type === "object" && - type !== null && - Object.keys(type).length === 0) - ) { - info += - " You likely forgot to export your component from the file " + - "it's defined in, or you might have mixed up default and named imports."; - } - - var sourceInfo = getSourceInfoErrorAddendum(source); - - if (sourceInfo) { - info += sourceInfo; - } else { - info += getDeclarationErrorAddendum(); - } - - var typeString; - - if (type === null) { - typeString = "null"; - } else if (isArray(type)) { - typeString = "array"; - } else if ( - type !== undefined && - type.$$typeof === REACT_ELEMENT_TYPE - ) { - typeString = - "<" + (getComponentNameFromType(type.type) || "Unknown") + " />"; - info = - " Did you accidentally export a JSX literal instead of a component?"; - } else { - typeString = typeof type; - } - - error( - "React.jsx: type is invalid -- expected a string (for " + - "built-in components) or a class/function (for composite " + - "components) but got: %s.%s", - typeString, - info - ); - } - - var element = jsxDEV$1(type, props, key, source, self); // The result can be nullish if a mock or a custom function is used. - // TODO: Drop this when these are no longer allowed as the type argument. - - if (element == null) { - return element; - } // Skip key warning if the type isn't valid since our key validation logic - // doesn't expect a non-string/function type and can throw confusing errors. - // We don't want exception behavior to differ between dev and prod. - // (Rendering will throw with a helpful message and as soon as the type is - // fixed, the key warnings will appear.) - - if (validType) { - var children = props.children; - - if (children !== undefined) { - if (isStaticChildren) { - if (isArray(children)) { - for (var i = 0; i < children.length; i++) { - validateChildKeys(children[i], type); - } - - if (Object.freeze) { - Object.freeze(children); - } - } else { - error( - "React.jsx: Static children should always be an array. " + - "You are likely explicitly calling React.jsxs or React.jsxDEV. " + - "Use the Babel transform instead." - ); - } - } else { - validateChildKeys(children, type); - } - } - } - - if (hasOwnProperty.call(props, "key")) { - var componentName = getComponentNameFromType(type); - var keys = Object.keys(props).filter(function (k) { - return k !== "key"; - }); - var beforeExample = - keys.length > 0 - ? "{key: someKey, " + keys.join(": ..., ") + ": ...}" - : "{key: someKey}"; - - if (!didWarnAboutKeySpread[componentName + beforeExample]) { - var afterExample = - keys.length > 0 ? "{" + keys.join(": ..., ") + ": ...}" : "{}"; - - error( - 'A props object containing a "key" prop is being spread into JSX:\n' + - " let props = %s;\n" + - " <%s {...props} />\n" + - "React keys must be passed directly to JSX without using spread:\n" + - " let props = %s;\n" + - " <%s key={someKey} {...props} />", - beforeExample, - componentName, - afterExample, - componentName - ); - - didWarnAboutKeySpread[componentName + beforeExample] = true; - } - } - - if (type === REACT_FRAGMENT_TYPE) { - validateFragmentProps(element); - } else { - validatePropTypes(element); - } - - return element; - } - } // These two functions exist to still get child warnings in dev - // even with the prod transform. This means that jsxDEV is purely - // opt-in behavior for better messages but that we won't stop - // giving you warnings if you use production apis. - - function jsxWithValidationStatic(type, props, key) { - { - return jsxWithValidation(type, props, key, true); - } - } - function jsxWithValidationDynamic(type, props, key) { - { - return jsxWithValidation(type, props, key, false); - } - } - var jsx = jsxWithValidationDynamic; // we may want to special case jsxs internally to take advantage of static children. + var jsx = jsxProdSignatureRunningInDevWithDynamicChildren; // we may want to special case jsxs internally to take advantage of static children. // for now we can ship identical prod functions - var jsxs = jsxWithValidationStatic; - var jsxDEV = jsxWithValidation; + var jsxs = jsxProdSignatureRunningInDevWithStaticChildren; + var jsxDEV = jsxDEV$1; exports.Children = Children; exports.Component = Component; diff --git a/compiled/facebook-www/React-dev.modern.js b/compiled/facebook-www/React-dev.modern.js index 902f8cb2501c0..38db504bbfd08 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 = "18.3.0-www-modern-d64ea480"; + var ReactVersion = "18.3.0-www-modern-2cf5f916"; // ATTENTION // When adding new symbols to this file, @@ -621,7 +621,7 @@ if (__DEV__) { * The current owner is the component who should own any components that are * currently being constructed. */ - var ReactCurrentOwner$2 = { + var ReactCurrentOwner$1 = { /** * @internal * @type {ReactComponent} @@ -717,12 +717,12 @@ if (__DEV__) { { if ( typeof config.ref === "string" && - ReactCurrentOwner$2.current && + ReactCurrentOwner$1.current && config.__self && - ReactCurrentOwner$2.current.stateNode !== config.__self + ReactCurrentOwner$1.current.stateNode !== config.__self ) { var componentName = getComponentNameFromType( - ReactCurrentOwner$2.current.type + ReactCurrentOwner$1.current.type ); if (!didWarnAboutStringRefs$1[componentName]) { @@ -903,7 +903,7 @@ if (__DEV__) { } } - return ReactElement$1(type, key, ref, ReactCurrentOwner$2.current, props); + return ReactElement$1(type, key, ref, ReactCurrentOwner$1.current, props); } function cloneAndReplaceKey(oldElement, newKey) { var newElement = ReactElement$1( @@ -942,7 +942,7 @@ if (__DEV__) { if (hasValidRef$1(config)) { // Silently steal the ref from the parent. ref = config.ref; - owner = ReactCurrentOwner$2.current; + owner = ReactCurrentOwner$1.current; } if (hasValidKey$1(config)) { @@ -1226,7 +1226,7 @@ if (__DEV__) { ReactCurrentDispatcher: ReactCurrentDispatcher$1, ReactCurrentCache: ReactCurrentCache, ReactCurrentBatchConfig: ReactCurrentBatchConfig, - ReactCurrentOwner: ReactCurrentOwner$2 + ReactCurrentOwner: ReactCurrentOwner$1 }; { @@ -1696,8 +1696,8 @@ if (__DEV__) { } function getDeclarationErrorAddendum$1() { - if (ReactCurrentOwner$2.current) { - var name = getComponentNameFromType(ReactCurrentOwner$2.current.type); + if (ReactCurrentOwner$1.current) { + var name = getComponentNameFromType(ReactCurrentOwner$1.current.type); if (name) { return "\n\nCheck the render method of `" + name + "`."; @@ -1780,7 +1780,7 @@ if (__DEV__) { if ( element && element._owner && - element._owner !== ReactCurrentOwner$2.current + element._owner !== ReactCurrentOwner$1.current ) { // Give the component that originally created this child. childOwner = @@ -3405,7 +3405,9 @@ if (__DEV__) { only: onlyChild }; - var ReactCurrentOwner$1 = ReactSharedInternals.ReactCurrentOwner; + var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; + var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; + var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"); var specialPropKeyWarningShown; var specialPropRefWarningShown; var didWarnAboutStringRefs; @@ -3446,12 +3448,12 @@ if (__DEV__) { { if ( typeof config.ref === "string" && - ReactCurrentOwner$1.current && + ReactCurrentOwner.current && self && - ReactCurrentOwner$1.current.stateNode !== self + ReactCurrentOwner.current.stateNode !== self ) { var componentName = getComponentNameFromType( - ReactCurrentOwner$1.current.type + ReactCurrentOwner.current.type ); if (!didWarnAboutStringRefs[componentName]) { @@ -3462,7 +3464,7 @@ if (__DEV__) { "We ask you to manually fix this case by using useRef() or createRef() instead. " + "Learn more about using refs safely here: " + "https://reactjs.org/link/strict-mode-string-ref", - getComponentNameFromType(ReactCurrentOwner$1.current.type), + getComponentNameFromType(ReactCurrentOwner.current.type), config.ref ); @@ -3585,6 +3587,43 @@ if (__DEV__) { return element; } + // support `jsx` and `jsxs` when running in development. This supports the case + // where a third-party dependency ships code that was compiled for production; + // we want to still provide warnings in development. + // + // So these functions are the _dev_ implementations of the _production_ + // API signatures. + // + // Since these functions are dev-only, it's ok to add an indirection here. They + // only exist to provide different versions of `isStaticChildren`. (We shouldn't + // use this pattern for the prod versions, though, because it will add an call + // frame.) + + function jsxProdSignatureRunningInDevWithDynamicChildren( + type, + config, + maybeKey, + source, + self + ) { + { + var isStaticChildren = false; + return jsxDEV$1(type, config, maybeKey, isStaticChildren, source, self); + } + } + function jsxProdSignatureRunningInDevWithStaticChildren( + type, + config, + maybeKey, + source, + self + ) { + { + var isStaticChildren = true; + return jsxDEV$1(type, config, maybeKey, isStaticChildren, source, self); + } + } + var didWarnAboutKeySpread = {}; /** * https://github.com/reactjs/rfcs/pull/107 * @param {*} type @@ -3592,8 +3631,122 @@ if (__DEV__) { * @param {string} key */ - function jsxDEV$1(type, config, maybeKey, source, self) { + function jsxDEV$1(type, config, maybeKey, isStaticChildren, source, self) { { + if (!isValidElementType(type)) { + // This is an invalid element type. + // + // We warn in this case but don't throw. We expect the element creation to + // succeed and there will likely be errors in render. + var info = ""; + + if ( + type === undefined || + (typeof type === "object" && + type !== null && + Object.keys(type).length === 0) + ) { + info += + " You likely forgot to export your component from the file " + + "it's defined in, or you might have mixed up default and named imports."; + } + + var sourceInfo = getSourceInfoErrorAddendum(source); + + if (sourceInfo) { + info += sourceInfo; + } else { + info += getDeclarationErrorAddendum(); + } + + var typeString; + + if (type === null) { + typeString = "null"; + } else if (isArray(type)) { + typeString = "array"; + } else if ( + type !== undefined && + type.$$typeof === REACT_ELEMENT_TYPE + ) { + typeString = + "<" + (getComponentNameFromType(type.type) || "Unknown") + " />"; + info = + " Did you accidentally export a JSX literal instead of a component?"; + } else { + typeString = typeof type; + } + + error( + "React.jsx: type is invalid -- expected a string (for " + + "built-in components) or a class/function (for composite " + + "components) but got: %s.%s", + typeString, + info + ); + } else { + // This is a valid element type. + // Skip key warning if the type isn't valid since our key validation logic + // doesn't expect a non-string/function type and can throw confusing + // errors. We don't want exception behavior to differ between dev and + // prod. (Rendering will throw with a helpful message and as soon as the + // type is fixed, the key warnings will appear.) + var children = config.children; + + if (children !== undefined) { + if (isStaticChildren) { + if (isArray(children)) { + for (var i = 0; i < children.length; i++) { + validateChildKeys(children[i], type); + } + + if (Object.freeze) { + Object.freeze(children); + } + } else { + error( + "React.jsx: Static children should always be an array. " + + "You are likely explicitly calling React.jsxs or React.jsxDEV. " + + "Use the Babel transform instead." + ); + } + } else { + validateChildKeys(children, type); + } + } + } // Warn about key spread regardless of whether the type is valid. + + if (hasOwnProperty.call(config, "key")) { + var componentName = getComponentNameFromType(type); + var keys = Object.keys(config).filter(function (k) { + return k !== "key"; + }); + var beforeExample = + keys.length > 0 + ? "{key: someKey, " + keys.join(": ..., ") + ": ...}" + : "{key: someKey}"; + + if (!didWarnAboutKeySpread[componentName + beforeExample]) { + var afterExample = + keys.length > 0 ? "{" + keys.join(": ..., ") + ": ...}" : "{}"; + + error( + 'A props object containing a "key" prop is being spread into JSX:\n' + + " let props = %s;\n" + + " <%s {...props} />\n" + + "React keys must be passed directly to JSX without using spread:\n" + + " let props = %s;\n" + + " <%s key={someKey} {...props} />", + beforeExample, + componentName, + afterExample, + componentName + ); + + didWarnAboutKeySpread[componentName + beforeExample] = true; + } + } + var propName; // Reserved names are extracted var props = {}; @@ -3661,57 +3814,23 @@ if (__DEV__) { } } - return ReactElement( + var element = ReactElement( type, key, ref, self, source, - ReactCurrentOwner$1.current, + ReactCurrentOwner.current, props ); - } - } - - var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; - var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; - var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"); - function setCurrentlyValidatingElement(element) { - { - if (element) { - var owner = element._owner; - var stack = describeUnknownElementTypeFrameInDEV( - element.type, - owner ? owner.type : null - ); - ReactDebugCurrentFrame.setExtraStackFrame(stack); + if (type === REACT_FRAGMENT_TYPE) { + validateFragmentProps(element); } else { - ReactDebugCurrentFrame.setExtraStackFrame(null); + validatePropTypes(element); } - } - } - - var propTypesMisspellWarningShown; - - { - propTypesMisspellWarningShown = false; - } - /** - * Verifies the object is a ReactElement. - * See https://reactjs.org/docs/react-api.html#isvalidelement - * @param {?object} object - * @return {boolean} True if `object` is a ReactElement. - * @final - */ - function isValidElement(object) { - { - return ( - typeof object === "object" && - object !== null && - object.$$typeof === REACT_ELEMENT_TYPE - ); + return element; } } @@ -3741,29 +3860,73 @@ if (__DEV__) { } } /** - * 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 - * updates. + * Ensure that every element either is passed in a static location, in an + * array with an explicit keys property defined, or in an object literal + * with valid key property. + * + * @internal + * @param {ReactNode} node Statically passed child of any type. + * @param {*} parentType node's parent's type. */ - var ownerHasKeyUseWarning = {}; - - function getCurrentComponentErrorInfo(parentType) { + function validateChildKeys(node, parentType) { { - var info = getDeclarationErrorAddendum(); + if (typeof node !== "object" || !node) { + return; + } - if (!info) { - var parentName = getComponentNameFromType(parentType); + if (node.$$typeof === REACT_CLIENT_REFERENCE); + else if (isArray(node)) { + for (var i = 0; i < node.length; i++) { + var child = node[i]; - if (parentName) { - info = - "\n\nCheck the top-level render call using <" + parentName + ">."; + if (isValidElement(child)) { + validateExplicitKey(child, parentType); + } + } + } else if (isValidElement(node)) { + // This element was passed in a valid location. + if (node._store) { + node._store.validated = true; + } + } else { + var iteratorFn = getIteratorFn(node); + + if (typeof iteratorFn === "function") { + // Entry iterators used to provide implicit keys, + // but now we print a separate warning for them later. + if (iteratorFn !== node.entries) { + var iterator = iteratorFn.call(node); + var step; + + while (!(step = iterator.next()).done) { + if (isValidElement(step.value)) { + validateExplicitKey(step.value, parentType); + } + } + } } } + } + } + /** + * Verifies the object is a ReactElement. + * See https://reactjs.org/docs/react-api.html#isvalidelement + * @param {?object} object + * @return {boolean} True if `object` is a ReactElement. + * @final + */ - return info; + function isValidElement(object) { + { + return ( + typeof object === "object" && + object !== null && + object.$$typeof === REACT_ELEMENT_TYPE + ); } } + var ownerHasKeyUseWarning = {}; /** * Warn if the element doesn't have an explicit key assigned to it. * This element is in an array. The array could grow and shrink or be @@ -3824,56 +3987,75 @@ if (__DEV__) { setCurrentlyValidatingElement(null); } } - /** - * Ensure that every element either is passed in a static location, in an - * array with an explicit keys property defined, or in an object literal - * with valid key property. - * - * @internal - * @param {ReactNode} node Statically passed child of any type. - * @param {*} parentType node's parent's type. - */ - function validateChildKeys(node, parentType) { + function setCurrentlyValidatingElement(element) { { - if (typeof node !== "object" || !node) { - return; + if (element) { + var owner = element._owner; + var stack = describeUnknownElementTypeFrameInDEV( + element.type, + owner ? owner.type : null + ); + ReactDebugCurrentFrame.setExtraStackFrame(stack); + } else { + ReactDebugCurrentFrame.setExtraStackFrame(null); } + } + } - if (node.$$typeof === REACT_CLIENT_REFERENCE); - else if (isArray(node)) { - for (var i = 0; i < node.length; i++) { - var child = node[i]; + function getCurrentComponentErrorInfo(parentType) { + { + var info = getDeclarationErrorAddendum(); - if (isValidElement(child)) { - validateExplicitKey(child, parentType); - } - } - } else if (isValidElement(node)) { - // This element was passed in a valid location. - if (node._store) { - node._store.validated = true; + if (!info) { + var parentName = getComponentNameFromType(parentType); + + if (parentName) { + info = + "\n\nCheck the top-level render call using <" + parentName + ">."; } - } else { - var iteratorFn = getIteratorFn(node); + } - if (typeof iteratorFn === "function") { - // Entry iterators used to provide implicit keys, - // but now we print a separate warning for them later. - if (iteratorFn !== node.entries) { - var iterator = iteratorFn.call(node); - var step; + return info; + } + } + /** + * Given a fragment, validate that it can only be provided with fragment props + * @param {ReactElement} fragment + */ - while (!(step = iterator.next()).done) { - if (isValidElement(step.value)) { - validateExplicitKey(step.value, parentType); - } - } - } + function validateFragmentProps(fragment) { + { + var keys = Object.keys(fragment.props); + + for (var i = 0; i < keys.length; i++) { + var key = keys[i]; + + if (key !== "children" && key !== "key") { + setCurrentlyValidatingElement(fragment); + + error( + "Invalid prop `%s` supplied to `React.Fragment`. " + + "React.Fragment can only have `key` and `children` props.", + key + ); + + setCurrentlyValidatingElement(null); + break; } } + + if (fragment.ref !== null) { + setCurrentlyValidatingElement(fragment); + + error("Invalid attribute `ref` supplied to `React.Fragment`."); + + setCurrentlyValidatingElement(null); + } } } + + var propTypesMisspellWarningShown = false; /** * Given an element, validate that its props follow the propTypes definition, * provided by the type. @@ -3937,201 +4119,12 @@ if (__DEV__) { } } } - /** - * Given a fragment, validate that it can only be provided with fragment props - * @param {ReactElement} fragment - */ - - function validateFragmentProps(fragment) { - { - var keys = Object.keys(fragment.props); - - for (var i = 0; i < keys.length; i++) { - var key = keys[i]; - - if (key !== "children" && key !== "key") { - setCurrentlyValidatingElement(fragment); - - error( - "Invalid prop `%s` supplied to `React.Fragment`. " + - "React.Fragment can only have `key` and `children` props.", - key - ); - - setCurrentlyValidatingElement(null); - break; - } - } - - if (fragment.ref !== null) { - setCurrentlyValidatingElement(fragment); - - error("Invalid attribute `ref` supplied to `React.Fragment`."); - - setCurrentlyValidatingElement(null); - } - } - } - - var didWarnAboutKeySpread = {}; - function jsxWithValidation( - type, - props, - key, - isStaticChildren, - source, - self - ) { - { - var validType = isValidElementType(type); // We warn in this case but don't throw. We expect the element creation to - // succeed and there will likely be errors in render. - - if (!validType) { - var info = ""; - - if ( - type === undefined || - (typeof type === "object" && - type !== null && - Object.keys(type).length === 0) - ) { - info += - " You likely forgot to export your component from the file " + - "it's defined in, or you might have mixed up default and named imports."; - } - - var sourceInfo = getSourceInfoErrorAddendum(source); - - if (sourceInfo) { - info += sourceInfo; - } else { - info += getDeclarationErrorAddendum(); - } - - var typeString; - - if (type === null) { - typeString = "null"; - } else if (isArray(type)) { - typeString = "array"; - } else if ( - type !== undefined && - type.$$typeof === REACT_ELEMENT_TYPE - ) { - typeString = - "<" + (getComponentNameFromType(type.type) || "Unknown") + " />"; - info = - " Did you accidentally export a JSX literal instead of a component?"; - } else { - typeString = typeof type; - } - - error( - "React.jsx: type is invalid -- expected a string (for " + - "built-in components) or a class/function (for composite " + - "components) but got: %s.%s", - typeString, - info - ); - } - - var element = jsxDEV$1(type, props, key, source, self); // The result can be nullish if a mock or a custom function is used. - // TODO: Drop this when these are no longer allowed as the type argument. - - if (element == null) { - return element; - } // Skip key warning if the type isn't valid since our key validation logic - // doesn't expect a non-string/function type and can throw confusing errors. - // We don't want exception behavior to differ between dev and prod. - // (Rendering will throw with a helpful message and as soon as the type is - // fixed, the key warnings will appear.) - - if (validType) { - var children = props.children; - - if (children !== undefined) { - if (isStaticChildren) { - if (isArray(children)) { - for (var i = 0; i < children.length; i++) { - validateChildKeys(children[i], type); - } - - if (Object.freeze) { - Object.freeze(children); - } - } else { - error( - "React.jsx: Static children should always be an array. " + - "You are likely explicitly calling React.jsxs or React.jsxDEV. " + - "Use the Babel transform instead." - ); - } - } else { - validateChildKeys(children, type); - } - } - } - - if (hasOwnProperty.call(props, "key")) { - var componentName = getComponentNameFromType(type); - var keys = Object.keys(props).filter(function (k) { - return k !== "key"; - }); - var beforeExample = - keys.length > 0 - ? "{key: someKey, " + keys.join(": ..., ") + ": ...}" - : "{key: someKey}"; - - if (!didWarnAboutKeySpread[componentName + beforeExample]) { - var afterExample = - keys.length > 0 ? "{" + keys.join(": ..., ") + ": ...}" : "{}"; - - error( - 'A props object containing a "key" prop is being spread into JSX:\n' + - " let props = %s;\n" + - " <%s {...props} />\n" + - "React keys must be passed directly to JSX without using spread:\n" + - " let props = %s;\n" + - " <%s key={someKey} {...props} />", - beforeExample, - componentName, - afterExample, - componentName - ); - - didWarnAboutKeySpread[componentName + beforeExample] = true; - } - } - - if (type === REACT_FRAGMENT_TYPE) { - validateFragmentProps(element); - } else { - validatePropTypes(element); - } - - return element; - } - } // These two functions exist to still get child warnings in dev - // even with the prod transform. This means that jsxDEV is purely - // opt-in behavior for better messages but that we won't stop - // giving you warnings if you use production apis. - - function jsxWithValidationStatic(type, props, key) { - { - return jsxWithValidation(type, props, key, true); - } - } - function jsxWithValidationDynamic(type, props, key) { - { - return jsxWithValidation(type, props, key, false); - } - } - var jsx = jsxWithValidationDynamic; // we may want to special case jsxs internally to take advantage of static children. + var jsx = jsxProdSignatureRunningInDevWithDynamicChildren; // we may want to special case jsxs internally to take advantage of static children. // for now we can ship identical prod functions - var jsxs = jsxWithValidationStatic; - var jsxDEV = jsxWithValidation; + var jsxs = jsxProdSignatureRunningInDevWithStaticChildren; + var jsxDEV = jsxDEV$1; exports.Children = Children; exports.Component = Component; diff --git a/compiled/facebook-www/React-prod.classic.js b/compiled/facebook-www/React-prod.classic.js index afb627a6c23fb..4ccc2e2fad813 100644 --- a/compiled/facebook-www/React-prod.classic.js +++ b/compiled/facebook-www/React-prod.classic.js @@ -341,7 +341,7 @@ var onError = console.error(error); }, ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; -function jsx$1(type, config, maybeKey) { +function jsxProd(type, config, maybeKey) { var propName, props = {}, key = null, @@ -490,9 +490,9 @@ exports.forwardRef = function (render) { return { $$typeof: REACT_FORWARD_REF_TYPE, render: render }; }; exports.isValidElement = isValidElement; -exports.jsx = jsx$1; +exports.jsx = jsxProd; exports.jsxDEV = void 0; -exports.jsxs = jsx$1; +exports.jsxs = jsxProd; exports.lazy = function (ctor) { return { $$typeof: REACT_LAZY_TYPE, @@ -618,4 +618,4 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "18.3.0-www-classic-31ea3e04"; +exports.version = "18.3.0-www-classic-5f72f147"; diff --git a/compiled/facebook-www/React-prod.modern.js b/compiled/facebook-www/React-prod.modern.js index 188690a4d83f5..55bbfd64a3cb1 100644 --- a/compiled/facebook-www/React-prod.modern.js +++ b/compiled/facebook-www/React-prod.modern.js @@ -312,7 +312,7 @@ var onError = console.error(error); }, ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; -function jsx$1(type, config, maybeKey) { +function jsxProd(type, config, maybeKey) { var propName, props = {}, key = null, @@ -483,9 +483,9 @@ exports.forwardRef = function (render) { return { $$typeof: REACT_FORWARD_REF_TYPE, render: render }; }; exports.isValidElement = isValidElement; -exports.jsx = jsx$1; +exports.jsx = jsxProd; exports.jsxDEV = void 0; -exports.jsxs = jsx$1; +exports.jsxs = jsxProd; exports.lazy = function (ctor) { return { $$typeof: REACT_LAZY_TYPE, @@ -610,4 +610,4 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "18.3.0-www-modern-cf1f133e"; +exports.version = "18.3.0-www-modern-a03dc08d"; diff --git a/compiled/facebook-www/React-profiling.classic.js b/compiled/facebook-www/React-profiling.classic.js index c44365045e3db..1131a2c75969b 100644 --- a/compiled/facebook-www/React-profiling.classic.js +++ b/compiled/facebook-www/React-profiling.classic.js @@ -345,7 +345,7 @@ var onError = console.error(error); }, ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; -function jsx$1(type, config, maybeKey) { +function jsxProd(type, config, maybeKey) { var propName, props = {}, key = null, @@ -494,9 +494,9 @@ exports.forwardRef = function (render) { return { $$typeof: REACT_FORWARD_REF_TYPE, render: render }; }; exports.isValidElement = isValidElement; -exports.jsx = jsx$1; +exports.jsx = jsxProd; exports.jsxDEV = void 0; -exports.jsxs = jsx$1; +exports.jsxs = jsxProd; exports.lazy = function (ctor) { return { $$typeof: REACT_LAZY_TYPE, @@ -622,7 +622,7 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "18.3.0-www-classic-3f55cb15"; +exports.version = "18.3.0-www-classic-a37e1c3f"; "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 1bdd95f9c76cc..31b5211613f1c 100644 --- a/compiled/facebook-www/React-profiling.modern.js +++ b/compiled/facebook-www/React-profiling.modern.js @@ -316,7 +316,7 @@ var onError = console.error(error); }, ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; -function jsx$1(type, config, maybeKey) { +function jsxProd(type, config, maybeKey) { var propName, props = {}, key = null, @@ -487,9 +487,9 @@ exports.forwardRef = function (render) { return { $$typeof: REACT_FORWARD_REF_TYPE, render: render }; }; exports.isValidElement = isValidElement; -exports.jsx = jsx$1; +exports.jsx = jsxProd; exports.jsxDEV = void 0; -exports.jsxs = jsx$1; +exports.jsxs = jsxProd; exports.lazy = function (ctor) { return { $$typeof: REACT_LAZY_TYPE, @@ -614,7 +614,7 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "18.3.0-www-modern-e254c3a6"; +exports.version = "18.3.0-www-modern-19e06609"; "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 bd80ebd1727ee..c5bcee78dac28 100644 --- a/compiled/facebook-www/ReactDOMTesting-dev.classic.js +++ b/compiled/facebook-www/ReactDOMTesting-dev.classic.js @@ -36496,7 +36496,7 @@ if (__DEV__) { return root; } - var ReactVersion = "18.3.0-www-classic-31ea3e04"; + var ReactVersion = "18.3.0-www-classic-5f72f147"; function createPortal$1( children, diff --git a/compiled/facebook-www/ReactDOMTesting-prod.classic.js b/compiled/facebook-www/ReactDOMTesting-prod.classic.js index 905651437d744..6c7b90ade383b 100644 --- a/compiled/facebook-www/ReactDOMTesting-prod.classic.js +++ b/compiled/facebook-www/ReactDOMTesting-prod.classic.js @@ -17493,7 +17493,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1824 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-3f55cb15", + version: "18.3.0-www-classic-a37e1c3f", rendererPackageName: "react-dom" }; var internals$jscomp$inline_2191 = { @@ -17523,7 +17523,7 @@ var internals$jscomp$inline_2191 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-3f55cb15" + reconcilerVersion: "18.3.0-www-classic-a37e1c3f" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2192 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -18017,4 +18017,4 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); }; -exports.version = "18.3.0-www-classic-3f55cb15"; +exports.version = "18.3.0-www-classic-a37e1c3f"; diff --git a/compiled/facebook-www/ReactServer-dev.modern.js b/compiled/facebook-www/ReactServer-dev.modern.js index 7de57b52392a4..f89ed5d273723 100644 --- a/compiled/facebook-www/ReactServer-dev.modern.js +++ b/compiled/facebook-www/ReactServer-dev.modern.js @@ -107,7 +107,7 @@ if (__DEV__) { * The current owner is the component who should own any components that are * currently being constructed. */ - var ReactCurrentOwner$2 = { + var ReactCurrentOwner$1 = { /** * @internal * @type {ReactComponent} @@ -151,7 +151,7 @@ if (__DEV__) { var ReactSharedInternals = { ReactCurrentDispatcher: ReactCurrentDispatcher$1, - ReactCurrentOwner: ReactCurrentOwner$2 + ReactCurrentOwner: ReactCurrentOwner$1 }; { @@ -509,12 +509,12 @@ if (__DEV__) { { if ( typeof config.ref === "string" && - ReactCurrentOwner$2.current && + ReactCurrentOwner$1.current && config.__self && - ReactCurrentOwner$2.current.stateNode !== config.__self + ReactCurrentOwner$1.current.stateNode !== config.__self ) { var componentName = getComponentNameFromType( - ReactCurrentOwner$2.current.type + ReactCurrentOwner$1.current.type ); if (!didWarnAboutStringRefs$1[componentName]) { @@ -695,7 +695,7 @@ if (__DEV__) { } } - return ReactElement$1(type, key, ref, ReactCurrentOwner$2.current, props); + return ReactElement$1(type, key, ref, ReactCurrentOwner$1.current, props); } function cloneAndReplaceKey(oldElement, newKey) { var newElement = ReactElement$1( @@ -734,7 +734,7 @@ if (__DEV__) { if (hasValidRef$1(config)) { // Silently steal the ref from the parent. ref = config.ref; - owner = ReactCurrentOwner$2.current; + owner = ReactCurrentOwner$1.current; } if (hasValidKey$1(config)) { @@ -1409,8 +1409,8 @@ if (__DEV__) { } function getDeclarationErrorAddendum$1() { - if (ReactCurrentOwner$2.current) { - var name = getComponentNameFromType(ReactCurrentOwner$2.current.type); + if (ReactCurrentOwner$1.current) { + var name = getComponentNameFromType(ReactCurrentOwner$1.current.type); if (name) { return "\n\nCheck the render method of `" + name + "`."; @@ -1493,7 +1493,7 @@ if (__DEV__) { if ( element && element._owner && - element._owner !== ReactCurrentOwner$2.current + element._owner !== ReactCurrentOwner$1.current ) { // Give the component that originally created this child. childOwner = @@ -2663,7 +2663,7 @@ if (__DEV__) { console["error"](error); }; - var ReactVersion = "18.3.0-www-modern-a192cdd2"; + var ReactVersion = "18.3.0-www-modern-675604b7"; // Patch fetch var Children = { @@ -2674,7 +2674,9 @@ if (__DEV__) { only: onlyChild }; - var ReactCurrentOwner$1 = ReactSharedInternals.ReactCurrentOwner; + var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; + var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; + var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"); var specialPropKeyWarningShown; var specialPropRefWarningShown; var didWarnAboutStringRefs; @@ -2715,12 +2717,12 @@ if (__DEV__) { { if ( typeof config.ref === "string" && - ReactCurrentOwner$1.current && + ReactCurrentOwner.current && self && - ReactCurrentOwner$1.current.stateNode !== self + ReactCurrentOwner.current.stateNode !== self ) { var componentName = getComponentNameFromType( - ReactCurrentOwner$1.current.type + ReactCurrentOwner.current.type ); if (!didWarnAboutStringRefs[componentName]) { @@ -2731,7 +2733,7 @@ if (__DEV__) { "We ask you to manually fix this case by using useRef() or createRef() instead. " + "Learn more about using refs safely here: " + "https://reactjs.org/link/strict-mode-string-ref", - getComponentNameFromType(ReactCurrentOwner$1.current.type), + getComponentNameFromType(ReactCurrentOwner.current.type), config.ref ); @@ -2854,6 +2856,43 @@ if (__DEV__) { return element; } + // support `jsx` and `jsxs` when running in development. This supports the case + // where a third-party dependency ships code that was compiled for production; + // we want to still provide warnings in development. + // + // So these functions are the _dev_ implementations of the _production_ + // API signatures. + // + // Since these functions are dev-only, it's ok to add an indirection here. They + // only exist to provide different versions of `isStaticChildren`. (We shouldn't + // use this pattern for the prod versions, though, because it will add an call + // frame.) + + function jsxProdSignatureRunningInDevWithDynamicChildren( + type, + config, + maybeKey, + source, + self + ) { + { + var isStaticChildren = false; + return jsxDEV$1(type, config, maybeKey, isStaticChildren, source, self); + } + } + function jsxProdSignatureRunningInDevWithStaticChildren( + type, + config, + maybeKey, + source, + self + ) { + { + var isStaticChildren = true; + return jsxDEV$1(type, config, maybeKey, isStaticChildren, source, self); + } + } + var didWarnAboutKeySpread = {}; /** * https://github.com/reactjs/rfcs/pull/107 * @param {*} type @@ -2861,8 +2900,122 @@ if (__DEV__) { * @param {string} key */ - function jsxDEV$1(type, config, maybeKey, source, self) { + function jsxDEV$1(type, config, maybeKey, isStaticChildren, source, self) { { + if (!isValidElementType(type)) { + // This is an invalid element type. + // + // We warn in this case but don't throw. We expect the element creation to + // succeed and there will likely be errors in render. + var info = ""; + + if ( + type === undefined || + (typeof type === "object" && + type !== null && + Object.keys(type).length === 0) + ) { + info += + " You likely forgot to export your component from the file " + + "it's defined in, or you might have mixed up default and named imports."; + } + + var sourceInfo = getSourceInfoErrorAddendum(source); + + if (sourceInfo) { + info += sourceInfo; + } else { + info += getDeclarationErrorAddendum(); + } + + var typeString; + + if (type === null) { + typeString = "null"; + } else if (isArray(type)) { + typeString = "array"; + } else if ( + type !== undefined && + type.$$typeof === REACT_ELEMENT_TYPE + ) { + typeString = + "<" + (getComponentNameFromType(type.type) || "Unknown") + " />"; + info = + " Did you accidentally export a JSX literal instead of a component?"; + } else { + typeString = typeof type; + } + + error( + "React.jsx: type is invalid -- expected a string (for " + + "built-in components) or a class/function (for composite " + + "components) but got: %s.%s", + typeString, + info + ); + } else { + // This is a valid element type. + // Skip key warning if the type isn't valid since our key validation logic + // doesn't expect a non-string/function type and can throw confusing + // errors. We don't want exception behavior to differ between dev and + // prod. (Rendering will throw with a helpful message and as soon as the + // type is fixed, the key warnings will appear.) + var children = config.children; + + if (children !== undefined) { + if (isStaticChildren) { + if (isArray(children)) { + for (var i = 0; i < children.length; i++) { + validateChildKeys(children[i], type); + } + + if (Object.freeze) { + Object.freeze(children); + } + } else { + error( + "React.jsx: Static children should always be an array. " + + "You are likely explicitly calling React.jsxs or React.jsxDEV. " + + "Use the Babel transform instead." + ); + } + } else { + validateChildKeys(children, type); + } + } + } // Warn about key spread regardless of whether the type is valid. + + if (hasOwnProperty.call(config, "key")) { + var componentName = getComponentNameFromType(type); + var keys = Object.keys(config).filter(function (k) { + return k !== "key"; + }); + var beforeExample = + keys.length > 0 + ? "{key: someKey, " + keys.join(": ..., ") + ": ...}" + : "{key: someKey}"; + + if (!didWarnAboutKeySpread[componentName + beforeExample]) { + var afterExample = + keys.length > 0 ? "{" + keys.join(": ..., ") + ": ...}" : "{}"; + + error( + 'A props object containing a "key" prop is being spread into JSX:\n' + + " let props = %s;\n" + + " <%s {...props} />\n" + + "React keys must be passed directly to JSX without using spread:\n" + + " let props = %s;\n" + + " <%s key={someKey} {...props} />", + beforeExample, + componentName, + afterExample, + componentName + ); + + didWarnAboutKeySpread[componentName + beforeExample] = true; + } + } + var propName; // Reserved names are extracted var props = {}; @@ -2930,57 +3083,23 @@ if (__DEV__) { } } - return ReactElement( + var element = ReactElement( type, key, ref, self, source, - ReactCurrentOwner$1.current, + ReactCurrentOwner.current, props ); - } - } - - var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; - var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; - var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"); - function setCurrentlyValidatingElement(element) { - { - if (element) { - var owner = element._owner; - var stack = describeUnknownElementTypeFrameInDEV( - element.type, - owner ? owner.type : null - ); - ReactDebugCurrentFrame.setExtraStackFrame(stack); + if (type === REACT_FRAGMENT_TYPE) { + validateFragmentProps(element); } else { - ReactDebugCurrentFrame.setExtraStackFrame(null); + validatePropTypes(element); } - } - } - var propTypesMisspellWarningShown; - - { - propTypesMisspellWarningShown = false; - } - /** - * Verifies the object is a ReactElement. - * See https://reactjs.org/docs/react-api.html#isvalidelement - * @param {?object} object - * @return {boolean} True if `object` is a ReactElement. - * @final - */ - - function isValidElement(object) { - { - return ( - typeof object === "object" && - object !== null && - object.$$typeof === REACT_ELEMENT_TYPE - ); + return element; } } @@ -3010,29 +3129,73 @@ if (__DEV__) { } } /** - * 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 - * updates. + * Ensure that every element either is passed in a static location, in an + * array with an explicit keys property defined, or in an object literal + * with valid key property. + * + * @internal + * @param {ReactNode} node Statically passed child of any type. + * @param {*} parentType node's parent's type. */ - var ownerHasKeyUseWarning = {}; - - function getCurrentComponentErrorInfo(parentType) { + function validateChildKeys(node, parentType) { { - var info = getDeclarationErrorAddendum(); + if (typeof node !== "object" || !node) { + return; + } - if (!info) { - var parentName = getComponentNameFromType(parentType); + if (node.$$typeof === REACT_CLIENT_REFERENCE); + else if (isArray(node)) { + for (var i = 0; i < node.length; i++) { + var child = node[i]; - if (parentName) { - info = - "\n\nCheck the top-level render call using <" + parentName + ">."; + if (isValidElement(child)) { + validateExplicitKey(child, parentType); + } + } + } else if (isValidElement(node)) { + // This element was passed in a valid location. + if (node._store) { + node._store.validated = true; + } + } else { + var iteratorFn = getIteratorFn(node); + + if (typeof iteratorFn === "function") { + // Entry iterators used to provide implicit keys, + // but now we print a separate warning for them later. + if (iteratorFn !== node.entries) { + var iterator = iteratorFn.call(node); + var step; + + while (!(step = iterator.next()).done) { + if (isValidElement(step.value)) { + validateExplicitKey(step.value, parentType); + } + } + } } } + } + } + /** + * Verifies the object is a ReactElement. + * See https://reactjs.org/docs/react-api.html#isvalidelement + * @param {?object} object + * @return {boolean} True if `object` is a ReactElement. + * @final + */ - return info; + function isValidElement(object) { + { + return ( + typeof object === "object" && + object !== null && + object.$$typeof === REACT_ELEMENT_TYPE + ); } } + var ownerHasKeyUseWarning = {}; /** * Warn if the element doesn't have an explicit key assigned to it. * This element is in an array. The array could grow and shrink or be @@ -3093,56 +3256,75 @@ if (__DEV__) { setCurrentlyValidatingElement(null); } } - /** - * Ensure that every element either is passed in a static location, in an - * array with an explicit keys property defined, or in an object literal - * with valid key property. - * - * @internal - * @param {ReactNode} node Statically passed child of any type. - * @param {*} parentType node's parent's type. - */ - function validateChildKeys(node, parentType) { + function setCurrentlyValidatingElement(element) { { - if (typeof node !== "object" || !node) { - return; + if (element) { + var owner = element._owner; + var stack = describeUnknownElementTypeFrameInDEV( + element.type, + owner ? owner.type : null + ); + ReactDebugCurrentFrame.setExtraStackFrame(stack); + } else { + ReactDebugCurrentFrame.setExtraStackFrame(null); } + } + } - if (node.$$typeof === REACT_CLIENT_REFERENCE); - else if (isArray(node)) { - for (var i = 0; i < node.length; i++) { - var child = node[i]; + function getCurrentComponentErrorInfo(parentType) { + { + var info = getDeclarationErrorAddendum(); - if (isValidElement(child)) { - validateExplicitKey(child, parentType); - } - } - } else if (isValidElement(node)) { - // This element was passed in a valid location. - if (node._store) { - node._store.validated = true; + if (!info) { + var parentName = getComponentNameFromType(parentType); + + if (parentName) { + info = + "\n\nCheck the top-level render call using <" + parentName + ">."; } - } else { - var iteratorFn = getIteratorFn(node); + } - if (typeof iteratorFn === "function") { - // Entry iterators used to provide implicit keys, - // but now we print a separate warning for them later. - if (iteratorFn !== node.entries) { - var iterator = iteratorFn.call(node); - var step; + return info; + } + } + /** + * Given a fragment, validate that it can only be provided with fragment props + * @param {ReactElement} fragment + */ - while (!(step = iterator.next()).done) { - if (isValidElement(step.value)) { - validateExplicitKey(step.value, parentType); - } - } - } + function validateFragmentProps(fragment) { + { + var keys = Object.keys(fragment.props); + + for (var i = 0; i < keys.length; i++) { + var key = keys[i]; + + if (key !== "children" && key !== "key") { + setCurrentlyValidatingElement(fragment); + + error( + "Invalid prop `%s` supplied to `React.Fragment`. " + + "React.Fragment can only have `key` and `children` props.", + key + ); + + setCurrentlyValidatingElement(null); + break; } } + + if (fragment.ref !== null) { + setCurrentlyValidatingElement(fragment); + + error("Invalid attribute `ref` supplied to `React.Fragment`."); + + setCurrentlyValidatingElement(null); + } } } + + var propTypesMisspellWarningShown = false; /** * Given an element, validate that its props follow the propTypes definition, * provided by the type. @@ -3206,201 +3388,12 @@ if (__DEV__) { } } } - /** - * Given a fragment, validate that it can only be provided with fragment props - * @param {ReactElement} fragment - */ - - function validateFragmentProps(fragment) { - { - var keys = Object.keys(fragment.props); - - for (var i = 0; i < keys.length; i++) { - var key = keys[i]; - - if (key !== "children" && key !== "key") { - setCurrentlyValidatingElement(fragment); - - error( - "Invalid prop `%s` supplied to `React.Fragment`. " + - "React.Fragment can only have `key` and `children` props.", - key - ); - - setCurrentlyValidatingElement(null); - break; - } - } - - if (fragment.ref !== null) { - setCurrentlyValidatingElement(fragment); - - error("Invalid attribute `ref` supplied to `React.Fragment`."); - - setCurrentlyValidatingElement(null); - } - } - } - - var didWarnAboutKeySpread = {}; - function jsxWithValidation( - type, - props, - key, - isStaticChildren, - source, - self - ) { - { - var validType = isValidElementType(type); // We warn in this case but don't throw. We expect the element creation to - // succeed and there will likely be errors in render. - - if (!validType) { - var info = ""; - - if ( - type === undefined || - (typeof type === "object" && - type !== null && - Object.keys(type).length === 0) - ) { - info += - " You likely forgot to export your component from the file " + - "it's defined in, or you might have mixed up default and named imports."; - } - - var sourceInfo = getSourceInfoErrorAddendum(source); - - if (sourceInfo) { - info += sourceInfo; - } else { - info += getDeclarationErrorAddendum(); - } - - var typeString; - - if (type === null) { - typeString = "null"; - } else if (isArray(type)) { - typeString = "array"; - } else if ( - type !== undefined && - type.$$typeof === REACT_ELEMENT_TYPE - ) { - typeString = - "<" + (getComponentNameFromType(type.type) || "Unknown") + " />"; - info = - " Did you accidentally export a JSX literal instead of a component?"; - } else { - typeString = typeof type; - } - - error( - "React.jsx: type is invalid -- expected a string (for " + - "built-in components) or a class/function (for composite " + - "components) but got: %s.%s", - typeString, - info - ); - } - - var element = jsxDEV$1(type, props, key, source, self); // The result can be nullish if a mock or a custom function is used. - // TODO: Drop this when these are no longer allowed as the type argument. - - if (element == null) { - return element; - } // Skip key warning if the type isn't valid since our key validation logic - // doesn't expect a non-string/function type and can throw confusing errors. - // We don't want exception behavior to differ between dev and prod. - // (Rendering will throw with a helpful message and as soon as the type is - // fixed, the key warnings will appear.) - - if (validType) { - var children = props.children; - - if (children !== undefined) { - if (isStaticChildren) { - if (isArray(children)) { - for (var i = 0; i < children.length; i++) { - validateChildKeys(children[i], type); - } - - if (Object.freeze) { - Object.freeze(children); - } - } else { - error( - "React.jsx: Static children should always be an array. " + - "You are likely explicitly calling React.jsxs or React.jsxDEV. " + - "Use the Babel transform instead." - ); - } - } else { - validateChildKeys(children, type); - } - } - } - - if (hasOwnProperty.call(props, "key")) { - var componentName = getComponentNameFromType(type); - var keys = Object.keys(props).filter(function (k) { - return k !== "key"; - }); - var beforeExample = - keys.length > 0 - ? "{key: someKey, " + keys.join(": ..., ") + ": ...}" - : "{key: someKey}"; - - if (!didWarnAboutKeySpread[componentName + beforeExample]) { - var afterExample = - keys.length > 0 ? "{" + keys.join(": ..., ") + ": ...}" : "{}"; - - error( - 'A props object containing a "key" prop is being spread into JSX:\n' + - " let props = %s;\n" + - " <%s {...props} />\n" + - "React keys must be passed directly to JSX without using spread:\n" + - " let props = %s;\n" + - " <%s key={someKey} {...props} />", - beforeExample, - componentName, - afterExample, - componentName - ); - - didWarnAboutKeySpread[componentName + beforeExample] = true; - } - } - - if (type === REACT_FRAGMENT_TYPE) { - validateFragmentProps(element); - } else { - validatePropTypes(element); - } - - return element; - } - } // These two functions exist to still get child warnings in dev - // even with the prod transform. This means that jsxDEV is purely - // opt-in behavior for better messages but that we won't stop - // giving you warnings if you use production apis. - - function jsxWithValidationStatic(type, props, key) { - { - return jsxWithValidation(type, props, key, true); - } - } - function jsxWithValidationDynamic(type, props, key) { - { - return jsxWithValidation(type, props, key, false); - } - } - var jsx = jsxWithValidationDynamic; // we may want to special case jsxs internally to take advantage of static children. + var jsx = jsxProdSignatureRunningInDevWithDynamicChildren; // we may want to special case jsxs internally to take advantage of static children. // for now we can ship identical prod functions - var jsxs = jsxWithValidationStatic; - var jsxDEV = jsxWithValidation; + var jsxs = jsxProdSignatureRunningInDevWithStaticChildren; + var jsxDEV = jsxDEV$1; exports.Children = Children; exports.Fragment = REACT_FRAGMENT_TYPE; diff --git a/compiled/facebook-www/ReactServer-prod.modern.js b/compiled/facebook-www/ReactServer-prod.modern.js index 726383c51632b..33f8dece8d55d 100644 --- a/compiled/facebook-www/ReactServer-prod.modern.js +++ b/compiled/facebook-www/ReactServer-prod.modern.js @@ -281,7 +281,7 @@ var onError = console.error(error); }, ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; -function jsx$1(type, config, maybeKey) { +function jsxProd(type, config, maybeKey) { var propName, props = {}, key = null, @@ -452,9 +452,9 @@ exports.forwardRef = function (render) { return { $$typeof: REACT_FORWARD_REF_TYPE, render: render }; }; exports.isValidElement = isValidElement; -exports.jsx = jsx$1; +exports.jsx = jsxProd; exports.jsxDEV = void 0; -exports.jsxs = jsx$1; +exports.jsxs = jsxProd; exports.lazy = function (ctor) { return { $$typeof: REACT_LAZY_TYPE, @@ -507,4 +507,4 @@ exports.useId = function () { exports.useMemo = function (create, deps) { return ReactCurrentDispatcher.current.useMemo(create, deps); }; -exports.version = "18.3.0-www-modern-62f9c233"; +exports.version = "18.3.0-www-modern-b224d7b0";