diff --git a/compiled/facebook-www/JSXDEVRuntime-dev.classic.js b/compiled/facebook-www/JSXDEVRuntime-dev.classic.js index 66bf5af21f98d..f5cc49e0b855e 100644 --- a/compiled/facebook-www/JSXDEVRuntime-dev.classic.js +++ b/compiled/facebook-www/JSXDEVRuntime-dev.classic.js @@ -252,6 +252,8 @@ if (__DEV__) { // $FlowFixMe[method-unbinding] var hasOwnProperty = Object.prototype.hasOwnProperty; + var assign = Object.assign; + /* * The `'' + value` pattern (used in perf-sensitive code) throws for Symbol * and Temporal.* types. See https://github.com/facebook/react/pull/22064. @@ -375,8 +377,6 @@ if (__DEV__) { return isArrayImpl(a); } - var assign = Object.assign; - // Helpers to patch console.logs to avoid logging during side-effect free // replaying on render function. This currently only patches the object // lazily which won't cover if the log function was extracted eagerly. @@ -1389,13 +1389,11 @@ if (__DEV__) { */ function isValidElement(object) { - { - return ( - typeof object === "object" && - object !== null && - object.$$typeof === REACT_ELEMENT_TYPE - ); - } + return ( + typeof object === "object" && + object !== null && + object.$$typeof === REACT_ELEMENT_TYPE + ); } var ownerHasKeyUseWarning = {}; /** diff --git a/compiled/facebook-www/JSXDEVRuntime-dev.modern.js b/compiled/facebook-www/JSXDEVRuntime-dev.modern.js index dcf5cb5de27ff..f1a01c2465cf4 100644 --- a/compiled/facebook-www/JSXDEVRuntime-dev.modern.js +++ b/compiled/facebook-www/JSXDEVRuntime-dev.modern.js @@ -252,6 +252,8 @@ if (__DEV__) { // $FlowFixMe[method-unbinding] var hasOwnProperty = Object.prototype.hasOwnProperty; + var assign = Object.assign; + /* * The `'' + value` pattern (used in perf-sensitive code) throws for Symbol * and Temporal.* types. See https://github.com/facebook/react/pull/22064. @@ -375,8 +377,6 @@ if (__DEV__) { return isArrayImpl(a); } - var assign = Object.assign; - // Helpers to patch console.logs to avoid logging during side-effect free // replaying on render function. This currently only patches the object // lazily which won't cover if the log function was extracted eagerly. @@ -1389,13 +1389,11 @@ if (__DEV__) { */ function isValidElement(object) { - { - return ( - typeof object === "object" && - object !== null && - object.$$typeof === REACT_ELEMENT_TYPE - ); - } + return ( + typeof object === "object" && + object !== null && + object.$$typeof === REACT_ELEMENT_TYPE + ); } var ownerHasKeyUseWarning = {}; /** diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION index f8e02852335af..f25b87b6efbd5 100644 --- a/compiled/facebook-www/REVISION +++ b/compiled/facebook-www/REVISION @@ -1 +1 @@ -ec160f32c28ccab798c73ecccbb36ce121e1640e +5fb2c93f3924ba980444da5698f60651b5ef0689 diff --git a/compiled/facebook-www/React-dev.classic.js b/compiled/facebook-www/React-dev.classic.js index 0b09bfaa44a8c..5e9f5076f20a6 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-8e729a7a"; + var ReactVersion = "18.3.0-www-classic-ef138c0a"; // ATTENTION // When adding new symbols to this file, @@ -495,7 +495,7 @@ if (__DEV__) { return type.displayName || "Context"; } - var REACT_CLIENT_REFERENCE$3 = 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) { @@ -504,7 +504,7 @@ if (__DEV__) { } if (typeof type === "function") { - if (type.$$typeof === REACT_CLIENT_REFERENCE$3) { + if (type.$$typeof === REACT_CLIENT_REFERENCE$2) { // TODO: Create a convention for naming client references with debug info. return null; } @@ -612,8 +612,38 @@ if (__DEV__) { return null; } - // $FlowFixMe[method-unbinding] - var hasOwnProperty = Object.prototype.hasOwnProperty; + /** + * Keeps track of the current dispatcher. + */ + var ReactCurrentDispatcher$1 = { + current: null + }; + + /** + * Keeps track of the current Cache dispatcher. + */ + var ReactCurrentCache = { + current: null + }; + + /** + * Keeps track of the current batch's configuration such as how long an update + * should suspend for if it needs to. + */ + var ReactCurrentBatchConfig = { + transition: null + }; + + var ReactCurrentActQueue = { + current: null, + // Used to reproduce behavior of `batchedUpdates` in legacy mode. + isBatchingLegacy: false, + didScheduleLegacyUpdate: false, + // Tracks whether something called `use` during the current batch of work. + // Determines whether we should yield to microtasks to unwrap already resolved + // promises without suspending. + didUsePromise: false + }; /** * Keeps track of the current owner. @@ -629,948 +659,527 @@ if (__DEV__) { current: null }; - var specialPropKeyWarningShown$1, - specialPropRefWarningShown$1, - didWarnAboutStringRefs$1; + var ReactDebugCurrentFrame$2 = {}; + var currentExtraStackFrame = null; { - didWarnAboutStringRefs$1 = {}; - } + ReactDebugCurrentFrame$2.setExtraStackFrame = function (stack) { + { + currentExtraStackFrame = stack; + } + }; // Stack implementation injected by the current renderer. - function hasValidRef$1(config) { - { - if (hasOwnProperty.call(config, "ref")) { - var getter = Object.getOwnPropertyDescriptor(config, "ref").get; + ReactDebugCurrentFrame$2.getCurrentStack = null; - if (getter && getter.isReactWarning) { - return false; - } - } - } + ReactDebugCurrentFrame$2.getStackAddendum = function () { + var stack = ""; // Add an extra top frame while an element is being validated - return config.ref !== undefined; - } + if (currentExtraStackFrame) { + stack += currentExtraStackFrame; + } // Delegate to the injected renderer-specific implementation - function hasValidKey$1(config) { - { - if (hasOwnProperty.call(config, "key")) { - var getter = Object.getOwnPropertyDescriptor(config, "key").get; + var impl = ReactDebugCurrentFrame$2.getCurrentStack; - if (getter && getter.isReactWarning) { - return false; - } + if (impl) { + stack += impl() || ""; } - } - return config.key !== undefined; + return stack; + }; } - function defineKeyPropWarningGetter$1(props, displayName) { - var warnAboutAccessingKey = function () { - { - if (!specialPropKeyWarningShown$1) { - specialPropKeyWarningShown$1 = true; - - error( - "%s: `key` is not a prop. Trying to access it will result " + - "in `undefined` being returned. If you need to access the same " + - "value within the child component, you should pass it as a different " + - "prop. (https://reactjs.org/link/special-props)", - displayName - ); - } - } - }; + var ReactSharedInternals = { + ReactCurrentDispatcher: ReactCurrentDispatcher$1, + ReactCurrentCache: ReactCurrentCache, + ReactCurrentBatchConfig: ReactCurrentBatchConfig, + ReactCurrentOwner: ReactCurrentOwner$1 + }; - warnAboutAccessingKey.isReactWarning = true; - Object.defineProperty(props, "key", { - get: warnAboutAccessingKey, - configurable: true - }); + { + ReactSharedInternals.ReactDebugCurrentFrame = ReactDebugCurrentFrame$2; + ReactSharedInternals.ReactCurrentActQueue = ReactCurrentActQueue; } - function defineRefPropWarningGetter$1(props, displayName) { - var warnAboutAccessingRef = function () { - { - if (!specialPropRefWarningShown$1) { - specialPropRefWarningShown$1 = true; + // $FlowFixMe[method-unbinding] + var hasOwnProperty = Object.prototype.hasOwnProperty; - error( - "%s: `ref` is not a prop. Trying to access it will result " + - "in `undefined` being returned. If you need to access the same " + - "value within the child component, you should pass it as a different " + - "prop. (https://reactjs.org/link/special-props)", - displayName - ); - } - } - }; + 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). - warnAboutAccessingRef.isReactWarning = true; - Object.defineProperty(props, "ref", { - get: warnAboutAccessingRef, - configurable: true - }); - } + 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; + } - function warnIfStringRefCannotBeAutoConverted$1(config) { - { + if (typeof type === "object" && type !== null) { if ( - typeof config.ref === "string" && - ReactCurrentOwner$1.current && - config.__self && - ReactCurrentOwner$1.current.stateNode !== config.__self + 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 ) { - var componentName = getComponentNameFromType( - ReactCurrentOwner$1.current.type - ); - - if (!didWarnAboutStringRefs$1[componentName]) { - error( - 'Component "%s" contains the string ref "%s". ' + - "Support for string refs will be removed in a future major release. " + - "This case cannot be automatically converted to an arrow function. " + - "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", - componentName, - config.ref - ); - - didWarnAboutStringRefs$1[componentName] = true; - } + return true; } } + + return false; } - /** - * Factory method to create a new React element. This no longer adheres to - * the class pattern, so do not use new to call it. Also, instanceof check - * will not work. Instead test $$typeof field against Symbol.for('react.element') to check - * if something is a React Element. - * - * @param {*} type - * @param {*} props - * @param {*} key - * @param {string|object} ref - * @param {*} owner - * @param {*} self A *temporary* helper to detect places where `this` is - * different from the `owner` when React.createElement is called, so that we - * can warn. We want to get rid of owner and replace string `ref`s with arrow - * functions, and as long as `this` and owner are the same, there will be no - * change in behavior. - * @param {*} source An annotation object (added by a transpiler or otherwise) - * indicating filename, line number, and/or other information. - * @internal - */ - function ReactElement$1(type, key, ref, owner, props) { - var element = { - // This tag allows us to uniquely identify this as a React Element - $$typeof: REACT_ELEMENT_TYPE, - // Built-in properties that belong on the element - type: type, - key: key, - ref: ref, - props: props, - // Record the component responsible for creating this element. - _owner: owner - }; + // Helpers to patch console.logs to avoid logging during side-effect free + // replaying on render function. This currently only patches the object + // lazily which won't cover if the log function was extracted eagerly. + // We could also eagerly patch the method. + var disabledDepth = 0; + var prevLog; + var prevInfo; + var prevWarn; + var prevError; + var prevGroup; + var prevGroupCollapsed; + var prevGroupEnd; - { - // The validation flag is currently mutative. We put it on - // an external backing store so that we can freeze the whole object. - // This can be replaced with a WeakMap once they are implemented in - // commonly used development environments. - element._store = {}; // To make comparing ReactElements easier for testing purposes, we make - // the validation flag non-enumerable (where possible, which should - // include every environment we run tests in), so the test framework - // ignores it. + function disabledLog() {} - Object.defineProperty(element._store, "validated", { - configurable: false, - enumerable: false, - writable: true, - value: false - }); // debugInfo contains Server Component debug information. + disabledLog.__reactDisabledLog = true; + function disableLogs() { + { + if (disabledDepth === 0) { + /* eslint-disable react-internal/no-production-logging */ + prevLog = console.log; + prevInfo = console.info; + prevWarn = console.warn; + prevError = console.error; + prevGroup = console.group; + prevGroupCollapsed = console.groupCollapsed; + prevGroupEnd = console.groupEnd; // https://github.com/facebook/react/issues/19099 - Object.defineProperty(element, "_debugInfo", { - configurable: false, - enumerable: false, - writable: true, - value: null - }); + var props = { + configurable: true, + enumerable: true, + value: disabledLog, + writable: true + }; // $FlowFixMe[cannot-write] Flow thinks console is immutable. - if (Object.freeze) { - Object.freeze(element.props); - Object.freeze(element); + Object.defineProperties(console, { + info: props, + log: props, + warn: props, + error: props, + group: props, + groupCollapsed: props, + groupEnd: props + }); + /* eslint-enable react-internal/no-production-logging */ } - } - return element; + disabledDepth++; + } } - /** - * Create and return a new ReactElement of the given type. - * See https://reactjs.org/docs/react-api.html#createelement - */ - - function createElement$1(type, config, children) { - var propName; // Reserved names are extracted - - var props = {}; - var key = null; - var ref = null; - - if (config != null) { - if (hasValidRef$1(config)) { - ref = config.ref; - - { - warnIfStringRefCannotBeAutoConverted$1(config); - } - } - - if (hasValidKey$1(config)) { - { - checkKeyStringCoercion(config.key); - } - - key = "" + config.key; - } // Remaining properties are added to a new props object - - for (propName in config) { - if ( - hasOwnProperty.call(config, propName) && // Skip over reserved prop names - propName !== "key" && // TODO: `ref` will no longer be reserved in the next major - propName !== "ref" && // ...and maybe these, too, though we currently rely on them for - // warnings and debug information in dev. Need to decide if we're OK - // with dropping them. In the jsx() runtime it's not an issue because - // the data gets passed as separate arguments instead of props, but - // it would be nice to stop relying on them entirely so we can drop - // them from the internal Fiber field. - propName !== "__self" && - propName !== "__source" - ) { - props[propName] = config[propName]; - } - } - } // Children can be more than one argument, and those are transferred onto - // the newly allocated props object. - - var childrenLength = arguments.length - 2; - - if (childrenLength === 1) { - props.children = children; - } else if (childrenLength > 1) { - var childArray = Array(childrenLength); + function reenableLogs() { + { + disabledDepth--; - for (var i = 0; i < childrenLength; i++) { - childArray[i] = arguments[i + 2]; - } + if (disabledDepth === 0) { + /* eslint-disable react-internal/no-production-logging */ + var props = { + configurable: true, + enumerable: true, + writable: true + }; // $FlowFixMe[cannot-write] Flow thinks console is immutable. - { - if (Object.freeze) { - Object.freeze(childArray); - } + Object.defineProperties(console, { + log: assign({}, props, { + value: prevLog + }), + info: assign({}, props, { + value: prevInfo + }), + warn: assign({}, props, { + value: prevWarn + }), + error: assign({}, props, { + value: prevError + }), + group: assign({}, props, { + value: prevGroup + }), + groupCollapsed: assign({}, props, { + value: prevGroupCollapsed + }), + groupEnd: assign({}, props, { + value: prevGroupEnd + }) + }); + /* eslint-enable react-internal/no-production-logging */ } - props.children = childArray; - } // Resolve default props - - if (type && type.defaultProps) { - var defaultProps = type.defaultProps; - - for (propName in defaultProps) { - if (props[propName] === undefined) { - props[propName] = defaultProps[propName]; - } + if (disabledDepth < 0) { + error( + "disabledDepth fell below zero. " + + "This is a bug in React. Please file an issue." + ); } } + } + var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher; + var prefix; + function describeBuiltInComponentFrame(name, ownerFn) { { - if (key || ref) { - var displayName = - typeof type === "function" - ? type.displayName || type.name || "Unknown" - : type; - - if (key) { - defineKeyPropWarningGetter$1(props, displayName); + if (prefix === undefined) { + // Extract the VM specific prefix used by each line. + try { + throw Error(); + } catch (x) { + var match = x.stack.trim().match(/\n( *(at )?)/); + prefix = (match && match[1]) || ""; } + } // We use the prefix to ensure our stacks line up with native stack frames. - if (ref) { - defineRefPropWarningGetter$1(props, displayName); - } - } + return "\n" + prefix + name; } - - return ReactElement$1(type, key, ref, ReactCurrentOwner$1.current, props); } - function cloneAndReplaceKey(oldElement, newKey) { - var newElement = ReactElement$1( - oldElement.type, - newKey, - oldElement.ref, - oldElement._owner, - oldElement.props - ); - return newElement; + var reentry = false; + var componentFrameCache; + + { + var PossiblyWeakMap = typeof WeakMap === "function" ? WeakMap : Map; + componentFrameCache = new PossiblyWeakMap(); } /** - * Clone and return a new ReactElement using element as the starting point. - * See https://reactjs.org/docs/react-api.html#cloneelement + * Leverages native browser/VM stack frames to get proper details (e.g. + * filename, line + col number) for a single component in a component stack. We + * do this by: + * (1) throwing and catching an error in the function - this will be our + * control error. + * (2) calling the component which will eventually throw an error that we'll + * catch - this will be our sample error. + * (3) diffing the control and sample error stacks to find the stack frame + * which represents our component. */ - function cloneElement$1(element, config, children) { - if (element === null || element === undefined) { - throw new Error( - "React.cloneElement(...): The argument must be a React element, but you passed " + - element + - "." - ); + function describeNativeComponentFrame(fn, construct) { + // If something asked for a stack inside a fake render, it should get ignored. + if (!fn || reentry) { + return ""; } - var propName; // Original props are copied - - var props = assign({}, element.props); // Reserved names are extracted - - var key = element.key; - var ref = element.ref; // Owner will be preserved, unless ref is overridden - - var owner = element._owner; + { + var frame = componentFrameCache.get(fn); - if (config != null) { - if (hasValidRef$1(config)) { - // Silently steal the ref from the parent. - ref = config.ref; - owner = ReactCurrentOwner$1.current; + if (frame !== undefined) { + return frame; } + } - if (hasValidKey$1(config)) { - { - checkKeyStringCoercion(config.key); - } - - key = "" + config.key; - } // Remaining properties override existing props - - var defaultProps; + reentry = true; + var previousPrepareStackTrace = Error.prepareStackTrace; // $FlowFixMe[incompatible-type] It does accept undefined. - if (element.type && element.type.defaultProps) { - defaultProps = element.type.defaultProps; - } + Error.prepareStackTrace = undefined; + var previousDispatcher; - for (propName in config) { - if ( - hasOwnProperty.call(config, propName) && // Skip over reserved prop names - propName !== "key" && // TODO: `ref` will no longer be reserved in the next major - propName !== "ref" && // ...and maybe these, too, though we currently rely on them for - // warnings and debug information in dev. Need to decide if we're OK - // with dropping them. In the jsx() runtime it's not an issue because - // the data gets passed as separate arguments instead of props, but - // it would be nice to stop relying on them entirely so we can drop - // them from the internal Fiber field. - propName !== "__self" && - propName !== "__source" - ) { - if (config[propName] === undefined && defaultProps !== undefined) { - // Resolve default props - props[propName] = defaultProps[propName]; - } else { - props[propName] = config[propName]; - } - } - } - } // Children can be more than one argument, and those are transferred onto - // the newly allocated props object. + { + previousDispatcher = ReactCurrentDispatcher.current; // Set the dispatcher in DEV because this might be call in the render function + // for warnings. - var childrenLength = arguments.length - 2; + ReactCurrentDispatcher.current = null; + disableLogs(); + } + /** + * Finding a common stack frame between sample and control errors can be + * tricky given the different types and levels of stack trace truncation from + * different JS VMs. So instead we'll attempt to control what that common + * frame should be through this object method: + * Having both the sample and control errors be in the function under the + * `DescribeNativeComponentFrameRoot` property, + setting the `name` and + * `displayName` properties of the function ensures that a stack + * frame exists that has the method name `DescribeNativeComponentFrameRoot` in + * it for both control and sample stacks. + */ - if (childrenLength === 1) { - props.children = children; - } else if (childrenLength > 1) { - var childArray = Array(childrenLength); + var RunInRootFrame = { + DetermineComponentFrameRoot: function () { + var control; - for (var i = 0; i < childrenLength; i++) { - childArray[i] = arguments[i + 2]; - } + try { + // This should throw. + if (construct) { + // Something should be setting the props in the constructor. + var Fake = function () { + throw Error(); + }; // $FlowFixMe[prop-missing] - props.children = childArray; - } + Object.defineProperty(Fake.prototype, "props", { + set: function () { + // We use a throwing setter instead of frozen or non-writable props + // because that won't throw in a non-strict mode function. + throw Error(); + } + }); - return ReactElement$1(element.type, key, ref, owner, props); - } - /** - * 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 - */ + if (typeof Reflect === "object" && Reflect.construct) { + // We construct a different control for this case to include any extra + // frames added by the construct call. + try { + Reflect.construct(Fake, []); + } catch (x) { + control = x; + } - function isValidElement$1(object) { - return ( - typeof object === "object" && - object !== null && - object.$$typeof === REACT_ELEMENT_TYPE - ); - } + Reflect.construct(fn, [], Fake); + } else { + try { + Fake.call(); + } catch (x) { + control = x; + } // $FlowFixMe[prop-missing] found when upgrading Flow - 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). + fn.call(Fake.prototype); + } + } else { + try { + throw Error(); + } catch (x) { + control = x; + } // TODO(luna): This will currently only throw if the function component + // tries to access React/ReactDOM/props. We should probably make this throw + // in simple components too - 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; - } + var maybePromise = fn(); // If the function component returns a promise, it's likely an async + // component, which we don't yet support. Attach a noop catch handler to + // silence the error. + // TODO: Implement component stacks for async client components? - 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; + if (maybePromise && typeof maybePromise.catch === "function") { + maybePromise.catch(function () {}); + } + } + } catch (sample) { + // This is inlined manually because closure doesn't do it for us. + if (sample && control && typeof sample.stack === "string") { + return [sample.stack, control.stack]; + } + } + + return [null, null]; } - } + }; // $FlowFixMe[prop-missing] - return false; - } + RunInRootFrame.DetermineComponentFrameRoot.displayName = + "DetermineComponentFrameRoot"; + var namePropDescriptor = Object.getOwnPropertyDescriptor( + RunInRootFrame.DetermineComponentFrameRoot, + "name" + ); // Before ES6, the `name` property was not configurable. - // Helpers to patch console.logs to avoid logging during side-effect free - // replaying on render function. This currently only patches the object - // lazily which won't cover if the log function was extracted eagerly. - // We could also eagerly patch the method. - var disabledDepth = 0; - var prevLog; - var prevInfo; - var prevWarn; - var prevError; - var prevGroup; - var prevGroupCollapsed; - var prevGroupEnd; + if (namePropDescriptor && namePropDescriptor.configurable) { + // V8 utilizes a function's `name` property when generating a stack trace. + Object.defineProperty( + RunInRootFrame.DetermineComponentFrameRoot, // Configurable properties can be updated even if its writable descriptor + // is set to `false`. + // $FlowFixMe[cannot-write] + "name", + { + value: "DetermineComponentFrameRoot" + } + ); + } - function disabledLog() {} + try { + var _RunInRootFrame$Deter = + RunInRootFrame.DetermineComponentFrameRoot(), + sampleStack = _RunInRootFrame$Deter[0], + controlStack = _RunInRootFrame$Deter[1]; - disabledLog.__reactDisabledLog = true; - function disableLogs() { - { - if (disabledDepth === 0) { - /* eslint-disable react-internal/no-production-logging */ - prevLog = console.log; - prevInfo = console.info; - prevWarn = console.warn; - prevError = console.error; - prevGroup = console.group; - prevGroupCollapsed = console.groupCollapsed; - prevGroupEnd = console.groupEnd; // https://github.com/facebook/react/issues/19099 + if (sampleStack && controlStack) { + // This extracts the first frame from the sample that isn't also in the control. + // Skipping one frame that we assume is the frame that calls the two. + var sampleLines = sampleStack.split("\n"); + var controlLines = controlStack.split("\n"); + var s = 0; + var c = 0; - var props = { - configurable: true, - enumerable: true, - value: disabledLog, - writable: true - }; // $FlowFixMe[cannot-write] Flow thinks console is immutable. + while ( + s < sampleLines.length && + !sampleLines[s].includes("DetermineComponentFrameRoot") + ) { + s++; + } - Object.defineProperties(console, { - info: props, - log: props, - warn: props, - error: props, - group: props, - groupCollapsed: props, - groupEnd: props - }); - /* eslint-enable react-internal/no-production-logging */ - } + while ( + c < controlLines.length && + !controlLines[c].includes("DetermineComponentFrameRoot") + ) { + c++; + } // We couldn't find our intentionally injected common root frame, attempt + // to find another common root frame by search from the bottom of the + // control stack... - disabledDepth++; - } - } - function reenableLogs() { - { - disabledDepth--; + if (s === sampleLines.length || c === controlLines.length) { + s = sampleLines.length - 1; + c = controlLines.length - 1; - if (disabledDepth === 0) { - /* eslint-disable react-internal/no-production-logging */ - var props = { - configurable: true, - enumerable: true, - writable: true - }; // $FlowFixMe[cannot-write] Flow thinks console is immutable. + while (s >= 1 && c >= 0 && sampleLines[s] !== controlLines[c]) { + // We expect at least one stack frame to be shared. + // Typically this will be the root most one. However, stack frames may be + // cut off due to maximum stack limits. In this case, one maybe cut off + // earlier than the other. We assume that the sample is longer or the same + // and there for cut off earlier. So we should find the root most frame in + // the sample somewhere in the control. + c--; + } + } - Object.defineProperties(console, { - log: assign({}, props, { - value: prevLog - }), - info: assign({}, props, { - value: prevInfo - }), - warn: assign({}, props, { - value: prevWarn - }), - error: assign({}, props, { - value: prevError - }), - group: assign({}, props, { - value: prevGroup - }), - groupCollapsed: assign({}, props, { - value: prevGroupCollapsed - }), - groupEnd: assign({}, props, { - value: prevGroupEnd - }) - }); - /* eslint-enable react-internal/no-production-logging */ - } + for (; s >= 1 && c >= 0; s--, c--) { + // Next we find the first one that isn't the same which should be the + // frame that called our sample function and the control. + if (sampleLines[s] !== controlLines[c]) { + // In V8, the first line is describing the message but other VMs don't. + // If we're about to return the first line, and the control is also on the same + // line, that's a pretty good indicator that our sample threw at same line as + // the control. I.e. before we entered the sample frame. So we ignore this result. + // This can happen if you passed a class to function component, or non-function. + if (s !== 1 || c !== 1) { + do { + s--; + c--; // We may still have similar intermediate frames from the construct call. + // The next one that isn't the same should be our match though. - if (disabledDepth < 0) { - error( - "disabledDepth fell below zero. " + - "This is a bug in React. Please file an issue." - ); - } - } - } - - /** - * Keeps track of the current dispatcher. - */ - var ReactCurrentDispatcher$1 = { - current: null - }; + if (c < 0 || sampleLines[s] !== controlLines[c]) { + // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier. + var _frame = + "\n" + sampleLines[s].replace(" at new ", " at "); // If our component frame is labeled "" + // but we have a user-provided "displayName" + // splice it in to make the stack more readable. - /** - * Keeps track of the current Cache dispatcher. - */ - var ReactCurrentCache = { - current: null - }; + if (fn.displayName && _frame.includes("")) { + _frame = _frame.replace("", fn.displayName); + } - /** - * Keeps track of the current batch's configuration such as how long an update - * should suspend for if it needs to. - */ - var ReactCurrentBatchConfig = { - transition: null - }; + if (true) { + if (typeof fn === "function") { + componentFrameCache.set(fn, _frame); + } + } // Return the line we found. - var ReactCurrentActQueue = { - current: null, - // Used to reproduce behavior of `batchedUpdates` in legacy mode. - isBatchingLegacy: false, - didScheduleLegacyUpdate: false, - // Tracks whether something called `use` during the current batch of work. - // Determines whether we should yield to microtasks to unwrap already resolved - // promises without suspending. - didUsePromise: false - }; + return _frame; + } + } while (s >= 1 && c >= 0); + } - var ReactDebugCurrentFrame$2 = {}; - var currentExtraStackFrame = null; - function setExtraStackFrame(stack) { - { - currentExtraStackFrame = stack; - } - } + break; + } + } + } + } finally { + reentry = false; - { - ReactDebugCurrentFrame$2.setExtraStackFrame = function (stack) { { - currentExtraStackFrame = stack; + ReactCurrentDispatcher.current = previousDispatcher; + reenableLogs(); } - }; // Stack implementation injected by the current renderer. - - ReactDebugCurrentFrame$2.getCurrentStack = null; - - ReactDebugCurrentFrame$2.getStackAddendum = function () { - var stack = ""; // Add an extra top frame while an element is being validated - if (currentExtraStackFrame) { - stack += currentExtraStackFrame; - } // Delegate to the injected renderer-specific implementation + Error.prepareStackTrace = previousPrepareStackTrace; + } // Fallback to just using the name if we couldn't make it throw. - var impl = ReactDebugCurrentFrame$2.getCurrentStack; + var name = fn ? fn.displayName || fn.name : ""; + var syntheticFrame = name ? describeBuiltInComponentFrame(name) : ""; - if (impl) { - stack += impl() || ""; + { + if (typeof fn === "function") { + componentFrameCache.set(fn, syntheticFrame); } + } - return stack; - }; - } - - var ReactSharedInternals = { - ReactCurrentDispatcher: ReactCurrentDispatcher$1, - ReactCurrentCache: ReactCurrentCache, - ReactCurrentBatchConfig: ReactCurrentBatchConfig, - ReactCurrentOwner: ReactCurrentOwner$1 - }; - - { - ReactSharedInternals.ReactDebugCurrentFrame = ReactDebugCurrentFrame$2; - ReactSharedInternals.ReactCurrentActQueue = ReactCurrentActQueue; + return syntheticFrame; } - - var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher; - var prefix; - function describeBuiltInComponentFrame(name, ownerFn) { + function describeFunctionComponentFrame(fn, ownerFn) { { - if (prefix === undefined) { - // Extract the VM specific prefix used by each line. - try { - throw Error(); - } catch (x) { - var match = x.stack.trim().match(/\n( *(at )?)/); - prefix = (match && match[1]) || ""; - } - } // We use the prefix to ensure our stacks line up with native stack frames. - - return "\n" + prefix + name; + return describeNativeComponentFrame(fn, false); } } - var reentry = false; - var componentFrameCache; - { - var PossiblyWeakMap = typeof WeakMap === "function" ? WeakMap : Map; - componentFrameCache = new PossiblyWeakMap(); + function shouldConstruct(Component) { + var prototype = Component.prototype; + return !!(prototype && prototype.isReactComponent); } - /** - * Leverages native browser/VM stack frames to get proper details (e.g. - * filename, line + col number) for a single component in a component stack. We - * do this by: - * (1) throwing and catching an error in the function - this will be our - * control error. - * (2) calling the component which will eventually throw an error that we'll - * catch - this will be our sample error. - * (3) diffing the control and sample error stacks to find the stack frame - * which represents our component. - */ - function describeNativeComponentFrame(fn, construct) { - // If something asked for a stack inside a fake render, it should get ignored. - if (!fn || reentry) { + function describeUnknownElementTypeFrameInDEV(type, ownerFn) { + if (type == null) { return ""; } - { - var frame = componentFrameCache.get(fn); - - if (frame !== undefined) { - return frame; + if (typeof type === "function") { + { + return describeNativeComponentFrame(type, shouldConstruct(type)); } } - reentry = true; - var previousPrepareStackTrace = Error.prepareStackTrace; // $FlowFixMe[incompatible-type] It does accept undefined. - - Error.prepareStackTrace = undefined; - var previousDispatcher; + if (typeof type === "string") { + return describeBuiltInComponentFrame(type); + } - { - previousDispatcher = ReactCurrentDispatcher.current; // Set the dispatcher in DEV because this might be call in the render function - // for warnings. + switch (type) { + case REACT_SUSPENSE_TYPE: + return describeBuiltInComponentFrame("Suspense"); - ReactCurrentDispatcher.current = null; - disableLogs(); + case REACT_SUSPENSE_LIST_TYPE: + return describeBuiltInComponentFrame("SuspenseList"); } - /** - * Finding a common stack frame between sample and control errors can be - * tricky given the different types and levels of stack trace truncation from - * different JS VMs. So instead we'll attempt to control what that common - * frame should be through this object method: - * Having both the sample and control errors be in the function under the - * `DescribeNativeComponentFrameRoot` property, + setting the `name` and - * `displayName` properties of the function ensures that a stack - * frame exists that has the method name `DescribeNativeComponentFrameRoot` in - * it for both control and sample stacks. - */ - - var RunInRootFrame = { - DetermineComponentFrameRoot: function () { - var control; - try { - // This should throw. - if (construct) { - // Something should be setting the props in the constructor. - var Fake = function () { - throw Error(); - }; // $FlowFixMe[prop-missing] + if (typeof type === "object") { + switch (type.$$typeof) { + case REACT_FORWARD_REF_TYPE: + return describeFunctionComponentFrame(type.render); - Object.defineProperty(Fake.prototype, "props", { - set: function () { - // We use a throwing setter instead of frozen or non-writable props - // because that won't throw in a non-strict mode function. - throw Error(); - } - }); + case REACT_MEMO_TYPE: + // Memo may contain any component type so we recursively resolve it. + return describeUnknownElementTypeFrameInDEV(type.type, ownerFn); - if (typeof Reflect === "object" && Reflect.construct) { - // We construct a different control for this case to include any extra - // frames added by the construct call. - try { - Reflect.construct(Fake, []); - } catch (x) { - control = x; - } + case REACT_LAZY_TYPE: { + var lazyComponent = type; + var payload = lazyComponent._payload; + var init = lazyComponent._init; - Reflect.construct(fn, [], Fake); - } else { - try { - Fake.call(); - } catch (x) { - control = x; - } // $FlowFixMe[prop-missing] found when upgrading Flow + try { + // Lazy may contain any component type so we recursively resolve it. + return describeUnknownElementTypeFrameInDEV( + init(payload), + ownerFn + ); + } catch (x) {} + } + } + } - fn.call(Fake.prototype); - } - } else { - try { - throw Error(); - } catch (x) { - control = x; - } // TODO(luna): This will currently only throw if the function component - // tries to access React/ReactDOM/props. We should probably make this throw - // in simple components too + return ""; + } - var maybePromise = fn(); // If the function component returns a promise, it's likely an async - // component, which we don't yet support. Attach a noop catch handler to - // silence the error. - // TODO: Implement component stacks for async client components? + var loggedTypeFailures = {}; + var ReactDebugCurrentFrame$1 = ReactSharedInternals.ReactDebugCurrentFrame; - if (maybePromise && typeof maybePromise.catch === "function") { - maybePromise.catch(function () {}); - } - } - } catch (sample) { - // This is inlined manually because closure doesn't do it for us. - if (sample && control && typeof sample.stack === "string") { - return [sample.stack, control.stack]; - } - } - - return [null, null]; - } - }; // $FlowFixMe[prop-missing] - - RunInRootFrame.DetermineComponentFrameRoot.displayName = - "DetermineComponentFrameRoot"; - var namePropDescriptor = Object.getOwnPropertyDescriptor( - RunInRootFrame.DetermineComponentFrameRoot, - "name" - ); // Before ES6, the `name` property was not configurable. - - if (namePropDescriptor && namePropDescriptor.configurable) { - // V8 utilizes a function's `name` property when generating a stack trace. - Object.defineProperty( - RunInRootFrame.DetermineComponentFrameRoot, // Configurable properties can be updated even if its writable descriptor - // is set to `false`. - // $FlowFixMe[cannot-write] - "name", - { - value: "DetermineComponentFrameRoot" - } - ); - } - - try { - var _RunInRootFrame$Deter = - RunInRootFrame.DetermineComponentFrameRoot(), - sampleStack = _RunInRootFrame$Deter[0], - controlStack = _RunInRootFrame$Deter[1]; - - if (sampleStack && controlStack) { - // This extracts the first frame from the sample that isn't also in the control. - // Skipping one frame that we assume is the frame that calls the two. - var sampleLines = sampleStack.split("\n"); - var controlLines = controlStack.split("\n"); - var s = 0; - var c = 0; - - while ( - s < sampleLines.length && - !sampleLines[s].includes("DetermineComponentFrameRoot") - ) { - s++; - } - - while ( - c < controlLines.length && - !controlLines[c].includes("DetermineComponentFrameRoot") - ) { - c++; - } // We couldn't find our intentionally injected common root frame, attempt - // to find another common root frame by search from the bottom of the - // control stack... - - if (s === sampleLines.length || c === controlLines.length) { - s = sampleLines.length - 1; - c = controlLines.length - 1; - - while (s >= 1 && c >= 0 && sampleLines[s] !== controlLines[c]) { - // We expect at least one stack frame to be shared. - // Typically this will be the root most one. However, stack frames may be - // cut off due to maximum stack limits. In this case, one maybe cut off - // earlier than the other. We assume that the sample is longer or the same - // and there for cut off earlier. So we should find the root most frame in - // the sample somewhere in the control. - c--; - } - } - - for (; s >= 1 && c >= 0; s--, c--) { - // Next we find the first one that isn't the same which should be the - // frame that called our sample function and the control. - if (sampleLines[s] !== controlLines[c]) { - // In V8, the first line is describing the message but other VMs don't. - // If we're about to return the first line, and the control is also on the same - // line, that's a pretty good indicator that our sample threw at same line as - // the control. I.e. before we entered the sample frame. So we ignore this result. - // This can happen if you passed a class to function component, or non-function. - if (s !== 1 || c !== 1) { - do { - s--; - c--; // We may still have similar intermediate frames from the construct call. - // The next one that isn't the same should be our match though. - - if (c < 0 || sampleLines[s] !== controlLines[c]) { - // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier. - var _frame = - "\n" + sampleLines[s].replace(" at new ", " at "); // If our component frame is labeled "" - // but we have a user-provided "displayName" - // splice it in to make the stack more readable. - - if (fn.displayName && _frame.includes("")) { - _frame = _frame.replace("", fn.displayName); - } - - if (true) { - if (typeof fn === "function") { - componentFrameCache.set(fn, _frame); - } - } // Return the line we found. - - return _frame; - } - } while (s >= 1 && c >= 0); - } - - break; - } - } - } - } finally { - reentry = false; - - { - ReactCurrentDispatcher.current = previousDispatcher; - reenableLogs(); - } - - Error.prepareStackTrace = previousPrepareStackTrace; - } // Fallback to just using the name if we couldn't make it throw. - - var name = fn ? fn.displayName || fn.name : ""; - var syntheticFrame = name ? describeBuiltInComponentFrame(name) : ""; - - { - if (typeof fn === "function") { - componentFrameCache.set(fn, syntheticFrame); - } - } - - return syntheticFrame; - } - function describeFunctionComponentFrame(fn, ownerFn) { - { - return describeNativeComponentFrame(fn, false); - } - } - - function shouldConstruct(Component) { - var prototype = Component.prototype; - return !!(prototype && prototype.isReactComponent); - } - - function describeUnknownElementTypeFrameInDEV(type, ownerFn) { - if (type == null) { - return ""; - } - - if (typeof type === "function") { - { - return describeNativeComponentFrame(type, shouldConstruct(type)); - } - } - - if (typeof type === "string") { - return describeBuiltInComponentFrame(type); - } - - switch (type) { - case REACT_SUSPENSE_TYPE: - return describeBuiltInComponentFrame("Suspense"); - - case REACT_SUSPENSE_LIST_TYPE: - return describeBuiltInComponentFrame("SuspenseList"); - } - - if (typeof type === "object") { - switch (type.$$typeof) { - case REACT_FORWARD_REF_TYPE: - return describeFunctionComponentFrame(type.render); - - case REACT_MEMO_TYPE: - // Memo may contain any component type so we recursively resolve it. - return describeUnknownElementTypeFrameInDEV(type.type, ownerFn); - - case REACT_LAZY_TYPE: { - var lazyComponent = type; - var payload = lazyComponent._payload; - var init = lazyComponent._init; - - try { - // Lazy may contain any component type so we recursively resolve it. - return describeUnknownElementTypeFrameInDEV( - init(payload), - ownerFn - ); - } catch (x) {} - } - } - } - - return ""; - } - - var loggedTypeFailures = {}; - var ReactDebugCurrentFrame$1 = ReactSharedInternals.ReactDebugCurrentFrame; - - function setCurrentlyValidatingElement$2(element) { + function setCurrentlyValidatingElement$1(element) { { if (element) { var owner = element._owner; @@ -1636,7 +1245,7 @@ if (__DEV__) { } if (error$1 && !(error$1 instanceof Error)) { - setCurrentlyValidatingElement$2(element); + setCurrentlyValidatingElement$1(element); error( "%s: type specification of %s" + @@ -1651,7 +1260,7 @@ if (__DEV__) { typeof error$1 ); - setCurrentlyValidatingElement$2(null); + setCurrentlyValidatingElement$1(null); } if ( @@ -1661,2499 +1270,2434 @@ if (__DEV__) { // Only monitor this failure once because there tends to be a lot of the // same error. loggedTypeFailures[error$1.message] = true; - setCurrentlyValidatingElement$2(element); + setCurrentlyValidatingElement$1(element); error("Failed %s type: %s", location, error$1.message); - setCurrentlyValidatingElement$2(null); + setCurrentlyValidatingElement$1(null); } } } } } - var REACT_CLIENT_REFERENCE$1 = Symbol.for("react.client.reference"); - - function setCurrentlyValidatingElement$1(element) { - { - if (element) { - var owner = element._owner; - var stack = describeUnknownElementTypeFrameInDEV( - element.type, - owner ? owner.type : null - ); - setExtraStackFrame(stack); - } else { - setExtraStackFrame(null); - } - } - } - - var propTypesMisspellWarningShown$1; + var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; + var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; + var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"); + var specialPropKeyWarningShown; + var specialPropRefWarningShown; + var didWarnAboutStringRefs; { - propTypesMisspellWarningShown$1 = false; + didWarnAboutStringRefs = {}; } - function getDeclarationErrorAddendum$1() { - if (ReactCurrentOwner$1.current) { - var name = getComponentNameFromType(ReactCurrentOwner$1.current.type); + function hasValidRef(config) { + { + if (hasOwnProperty.call(config, "ref")) { + var getter = Object.getOwnPropertyDescriptor(config, "ref").get; - if (name) { - return "\n\nCheck the render method of `" + name + "`."; + if (getter && getter.isReactWarning) { + return false; + } } } - return ""; + return config.ref !== undefined; } - function getSourceInfoErrorAddendum$1(source) { - if (source !== undefined) { - var fileName = source.fileName.replace(/^.*[\\\/]/, ""); - var lineNumber = source.lineNumber; - return "\n\nCheck your code at " + fileName + ":" + lineNumber + "."; - } - - return ""; - } + function hasValidKey(config) { + { + if (hasOwnProperty.call(config, "key")) { + var getter = Object.getOwnPropertyDescriptor(config, "key").get; - function getSourceInfoErrorAddendumForProps(elementProps) { - if (elementProps !== null && elementProps !== undefined) { - return getSourceInfoErrorAddendum$1(elementProps.__source); + if (getter && getter.isReactWarning) { + return false; + } + } } - return ""; + return config.key !== undefined; } - /** - * 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. - */ - - var ownerHasKeyUseWarning$1 = {}; - function getCurrentComponentErrorInfo$1(parentType) { - var info = getDeclarationErrorAddendum$1(); + function warnIfStringRefCannotBeAutoConverted(config, self) { + { + if ( + typeof config.ref === "string" && + ReactCurrentOwner.current && + self && + ReactCurrentOwner.current.stateNode !== self + ) { + var componentName = getComponentNameFromType( + ReactCurrentOwner.current.type + ); - if (!info) { - var parentName = getComponentNameFromType(parentType); + if (!didWarnAboutStringRefs[componentName]) { + error( + 'Component "%s" contains the string ref "%s". ' + + "Support for string refs will be removed in a future major release. " + + "This case cannot be automatically converted to an arrow function. " + + "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.current.type), + config.ref + ); - if (parentName) { - info = - "\n\nCheck the top-level render call using <" + parentName + ">."; + didWarnAboutStringRefs[componentName] = true; + } } } - - return info; } - /** - * 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 - * reordered. All children that haven't already been validated are required to - * have a "key" property assigned to it. Error statuses are cached so a warning - * will only be shown once. - * - * @internal - * @param {ReactElement} element Element that requires a key. - * @param {*} parentType element's parent's type. - */ - - function validateExplicitKey$1(element, parentType) { - if (!element._store || element._store.validated || element.key != null) { - return; - } - - element._store.validated = true; - var currentComponentErrorInfo = - getCurrentComponentErrorInfo$1(parentType); - - if (ownerHasKeyUseWarning$1[currentComponentErrorInfo]) { - return; - } - ownerHasKeyUseWarning$1[currentComponentErrorInfo] = true; // Usually the current owner is the offender, but if it accepts children as a - // property, it may be the creator of the child that's responsible for - // assigning it a key. + function defineKeyPropWarningGetter(props, displayName) { + { + var warnAboutAccessingKey = function () { + if (!specialPropKeyWarningShown) { + specialPropKeyWarningShown = true; - var childOwner = ""; + error( + "%s: `key` is not a prop. Trying to access it will result " + + "in `undefined` being returned. If you need to access the same " + + "value within the child component, you should pass it as a different " + + "prop. (https://reactjs.org/link/special-props)", + displayName + ); + } + }; - if ( - element && - element._owner && - element._owner !== ReactCurrentOwner$1.current - ) { - // Give the component that originally created this child. - childOwner = - " It was passed a child from " + - getComponentNameFromType(element._owner.type) + - "."; + warnAboutAccessingKey.isReactWarning = true; + Object.defineProperty(props, "key", { + get: warnAboutAccessingKey, + configurable: true + }); } + } + function defineRefPropWarningGetter(props, displayName) { { - setCurrentlyValidatingElement$1(element); + var warnAboutAccessingRef = function () { + if (!specialPropRefWarningShown) { + specialPropRefWarningShown = true; - error( - 'Each child in a list should have a unique "key" prop.' + - "%s%s See https://reactjs.org/link/warning-keys for more information.", - currentComponentErrorInfo, - childOwner - ); + error( + "%s: `ref` is not a prop. Trying to access it will result " + + "in `undefined` being returned. If you need to access the same " + + "value within the child component, you should pass it as a different " + + "prop. (https://reactjs.org/link/special-props)", + displayName + ); + } + }; - setCurrentlyValidatingElement$1(null); + warnAboutAccessingRef.isReactWarning = true; + Object.defineProperty(props, "ref", { + get: warnAboutAccessingRef, + configurable: true + }); } } /** - * 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. + * Factory method to create a new React element. This no longer adheres to + * the class pattern, so do not use new to call it. Also, instanceof check + * will not work. Instead test $$typeof field against Symbol.for('react.element') to check + * if something is a React Element. * + * @param {*} type + * @param {*} props + * @param {*} key + * @param {string|object} ref + * @param {*} owner + * @param {*} self A *temporary* helper to detect places where `this` is + * different from the `owner` when React.createElement is called, so that we + * can warn. We want to get rid of owner and replace string `ref`s with arrow + * functions, and as long as `this` and owner are the same, there will be no + * change in behavior. + * @param {*} source An annotation object (added by a transpiler or otherwise) + * indicating filename, line number, and/or other information. * @internal - * @param {ReactNode} node Statically passed child of any type. - * @param {*} parentType node's parent's type. */ - function validateChildKeys$1(node, parentType) { - if (typeof node !== "object" || !node) { - return; - } + function ReactElement(type, key, ref, self, source, owner, props) { + var element = { + // This tag allows us to uniquely identify this as a React Element + $$typeof: REACT_ELEMENT_TYPE, + // Built-in properties that belong on the element + type: type, + key: key, + ref: ref, + props: props, + // Record the component responsible for creating this element. + _owner: owner + }; + + { + // The validation flag is currently mutative. We put it on + // an external backing store so that we can freeze the whole object. + // This can be replaced with a WeakMap once they are implemented in + // commonly used development environments. + element._store = {}; // To make comparing ReactElements easier for testing purposes, we make + // the validation flag non-enumerable (where possible, which should + // include every environment we run tests in), so the test framework + // ignores it. - if (node.$$typeof === REACT_CLIENT_REFERENCE$1); - else if (isArray(node)) { - for (var i = 0; i < node.length; i++) { - var child = node[i]; + Object.defineProperty(element._store, "validated", { + configurable: false, + enumerable: false, + writable: true, + value: false + }); // debugInfo contains Server Component debug information. - if (isValidElement$1(child)) { - validateExplicitKey$1(child, parentType); - } - } - } else if (isValidElement$1(node)) { - // This element was passed in a valid location. - if (node._store) { - node._store.validated = true; - } - } else { - var iteratorFn = getIteratorFn(node); + Object.defineProperty(element, "_debugInfo", { + configurable: false, + enumerable: false, + writable: true, + value: null + }); - 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$1(step.value)) { - validateExplicitKey$1(step.value, parentType); - } - } - } + if (Object.freeze) { + Object.freeze(element.props); + Object.freeze(element); } } + + 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 = {}; /** - * Given an element, validate that its props follow the propTypes definition, - * provided by the type. - * - * @param {ReactElement} element + * https://github.com/reactjs/rfcs/pull/107 + * @param {*} type + * @param {object} props + * @param {string} key */ - function validatePropTypes$1(element) { + function jsxDEV$1(type, config, maybeKey, isStaticChildren, source, self) { { - var type = element.type; - - if (type === null || type === undefined || typeof type === "string") { - return; - } - - if (type.$$typeof === REACT_CLIENT_REFERENCE$1) { - return; - } + 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 = ""; - var propTypes; + 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."; + } - if (typeof type === "function") { - propTypes = type.propTypes; - } else if ( - typeof type === "object" && - (type.$$typeof === REACT_FORWARD_REF_TYPE || // Note: Memo only checks outer props here. - // Inner props are checked in the reconciler. - type.$$typeof === REACT_MEMO_TYPE) - ) { - propTypes = type.propTypes; - } else { - return; - } + var sourceInfo = getSourceInfoErrorAddendum(source); - if (propTypes) { - // Intentionally inside to avoid triggering lazy initializers: - var name = getComponentNameFromType(type); - checkPropTypes(propTypes, element.props, "prop", name, element); - } else if ( - type.PropTypes !== undefined && - !propTypesMisspellWarningShown$1 - ) { - propTypesMisspellWarningShown$1 = true; // Intentionally inside to avoid triggering lazy initializers: + if (sourceInfo) { + info += sourceInfo; + } else { + info += getDeclarationErrorAddendum(); + } - var _name = getComponentNameFromType(type); + var typeString; - error( - "Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", - _name || "Unknown" - ); - } + 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; + } - if ( - typeof type.getDefaultProps === "function" && - !type.getDefaultProps.isReactClassApproved - ) { error( - "getDefaultProps is only used on classic React.createClass " + - "definitions. Use a static property named `defaultProps` instead." + "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 ); - } - } - } - /** - * Given a fragment, validate that it can only be provided with fragment props - * @param {ReactElement} fragment - */ + } 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; - function validateFragmentProps$1(fragment) { - { - var keys = Object.keys(fragment.props); + if (children !== undefined) { + if (isStaticChildren) { + if (isArray(children)) { + for (var i = 0; i < children.length; i++) { + validateChildKeys(children[i], type); + } - for (var i = 0; i < keys.length; i++) { - var key = keys[i]; + 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 (key !== "children" && key !== "key") { - setCurrentlyValidatingElement$1(fragment); + 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( - "Invalid prop `%s` supplied to `React.Fragment`. " + - "React.Fragment can only have `key` and `children` props.", - key + '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 ); - setCurrentlyValidatingElement$1(null); - break; + didWarnAboutKeySpread[componentName + beforeExample] = true; } } - if (fragment.ref !== null) { - setCurrentlyValidatingElement$1(fragment); + var propName; // Reserved names are extracted - error("Invalid attribute `ref` supplied to `React.Fragment`."); + var props = {}; + var key = null; + var ref = null; // Currently, key can be spread in as a prop. This causes a potential + // issue if key is also explicitly declared (ie.
+ // or
). We want to deprecate key spread, + // but as an intermediary step, we will use jsxDEV for everything except + //
, because we aren't currently able to tell if + // key is explicitly declared to be undefined or not. - setCurrentlyValidatingElement$1(null); - } - } - } + if (maybeKey !== undefined) { + { + checkKeyStringCoercion(maybeKey); + } - function createElementWithValidation(type, props, children) { - 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. + key = "" + maybeKey; + } - if (!validType) { - var info = ""; + if (hasValidKey(config)) { + { + checkKeyStringCoercion(config.key); + } - 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."; + key = "" + config.key; } - var sourceInfo = getSourceInfoErrorAddendumForProps(props); + if (hasValidRef(config)) { + ref = config.ref; + warnIfStringRefCannotBeAutoConverted(config, self); + } // Remaining properties are added to a new props object + + for (propName in config) { + if ( + hasOwnProperty.call(config, propName) && // Skip over reserved prop names + propName !== "key" && // TODO: `ref` will no longer be reserved in the next major + propName !== "ref" + ) { + props[propName] = config[propName]; + } + } // Resolve default props - if (sourceInfo) { - info += sourceInfo; - } else { - info += getDeclarationErrorAddendum$1(); - } + if (type && type.defaultProps) { + var defaultProps = type.defaultProps; - 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; + for (propName in defaultProps) { + if (props[propName] === undefined) { + props[propName] = defaultProps[propName]; + } + } } - { - error( - "React.createElement: type is invalid -- expected a string (for " + - "built-in components) or a class/function (for composite " + - "components) but got: %s.%s", - typeString, - info - ); + if (key || ref) { + var displayName = + typeof type === "function" + ? type.displayName || type.name || "Unknown" + : type; + + if (key) { + defineKeyPropWarningGetter(props, displayName); + } + + if (ref) { + defineRefPropWarningGetter(props, displayName); + } } - } - var element = createElement$1.apply(this, arguments); // 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. + var element = ReactElement( + type, + key, + ref, + self, + source, + ReactCurrentOwner.current, + props + ); - 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) { - for (var i = 2; i < arguments.length; i++) { - validateChildKeys$1(arguments[i], type); + if (type === REACT_FRAGMENT_TYPE) { + validateFragmentProps(element); + } else { + validatePropTypes(element); } - } - if (type === REACT_FRAGMENT_TYPE) { - validateFragmentProps$1(element); - } else { - validatePropTypes$1(element); + return element; } - - return element; } - var didWarnAboutDeprecatedCreateFactory = false; - function createFactoryWithValidation(type) { - var validatedFactory = createElementWithValidation.bind(null, type); - validatedFactory.type = type; + /** + * Create and return a new ReactElement of the given type. + * See https://reactjs.org/docs/react-api.html#createelement + */ + function createElement(type, config, children) { { - if (!didWarnAboutDeprecatedCreateFactory) { - didWarnAboutDeprecatedCreateFactory = true; + 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 = ""; - warn( - "React.createFactory() is deprecated and will be removed in " + - "a future major release. Consider using JSX " + - "or use React.createElement() directly instead." - ); - } // Legacy hook: remove it + 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."; + } - Object.defineProperty(validatedFactory, "type", { - enumerable: false, - get: function () { - warn( - "Factory.type is deprecated. Access the class directly " + - "before passing it to createFactory." - ); + var sourceInfo = getSourceInfoErrorAddendumForProps(config); - Object.defineProperty(this, "type", { - value: type - }); - return type; + if (sourceInfo) { + info += sourceInfo; + } else { + info += getDeclarationErrorAddendum(); } - }); - } - return validatedFactory; - } - function cloneElementWithValidation(element, props, children) { - var newElement = cloneElement$1.apply(this, arguments); - - for (var i = 2; i < arguments.length; i++) { - validateChildKeys$1(arguments[i], newElement.type); - } + var typeString; - validatePropTypes$1(newElement); - return newElement; - } + 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; + } - var createElement = createElementWithValidation; - var cloneElement = cloneElementWithValidation; - var createFactory = createFactoryWithValidation; - - var SEPARATOR = "."; - var SUBSEPARATOR = ":"; - /** - * Escape and wrap key so it is safe to use as a reactid - * - * @param {string} key to be escaped. - * @return {string} the escaped key. - */ + error( + "React.createElement: 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.) + for (var i = 2; i < arguments.length; i++) { + validateChildKeys(arguments[i], type); + } + } // Unlike the jsx() runtime, createElement() doesn't warn about key spread. + } - function escape(key) { - var escapeRegex = /[=:]/g; - var escaperLookup = { - "=": "=0", - ":": "=2" - }; - var escapedString = key.replace(escapeRegex, function (match) { - return escaperLookup[match]; - }); - return "$" + escapedString; - } - /** - * TODO: Test that a single child and an array with one item have the same key - * pattern. - */ + var propName; // Reserved names are extracted - var didWarnAboutMaps = false; - var userProvidedKeyEscapeRegex = /\/+/g; + var props = {}; + var key = null; + var ref = null; - function escapeUserProvidedKey(text) { - return text.replace(userProvidedKeyEscapeRegex, "$&/"); - } - /** - * Generate a key string that identifies a element within a set. - * - * @param {*} element A element that could contain a manual key. - * @param {number} index Index that is used if a manual key is not provided. - * @return {string} - */ + if (config != null) { + if (hasValidRef(config)) { + ref = config.ref; - function getElementKey(element, index) { - // Do some typechecking here since we call this blindly. We want to ensure - // that we don't block potential future ES APIs. - if ( - typeof element === "object" && - element !== null && - element.key != null - ) { - // Explicit key - { - checkKeyStringCoercion(element.key); + { + warnIfStringRefCannotBeAutoConverted(config, config.__self); + } } - return escape("" + element.key); - } // Implicit key determined by the index in the set + if (hasValidKey(config)) { + { + checkKeyStringCoercion(config.key); + } - return index.toString(36); - } + key = "" + config.key; + } // Remaining properties are added to a new props object - function noop$1() {} + for (propName in config) { + if ( + hasOwnProperty.call(config, propName) && // Skip over reserved prop names + propName !== "key" && // TODO: `ref` will no longer be reserved in the next major + propName !== "ref" && // ...and maybe these, too, though we currently rely on them for + // warnings and debug information in dev. Need to decide if we're OK + // with dropping them. In the jsx() runtime it's not an issue because + // the data gets passed as separate arguments instead of props, but + // it would be nice to stop relying on them entirely so we can drop + // them from the internal Fiber field. + propName !== "__self" && + propName !== "__source" + ) { + props[propName] = config[propName]; + } + } + } // Children can be more than one argument, and those are transferred onto + // the newly allocated props object. - function resolveThenable(thenable) { - switch (thenable.status) { - case "fulfilled": { - var fulfilledValue = thenable.value; - return fulfilledValue; + var childrenLength = arguments.length - 2; + + if (childrenLength === 1) { + props.children = children; + } else if (childrenLength > 1) { + var childArray = Array(childrenLength); + + for (var _i = 0; _i < childrenLength; _i++) { + childArray[_i] = arguments[_i + 2]; } - case "rejected": { - var rejectedError = thenable.reason; - throw rejectedError; + { + if (Object.freeze) { + Object.freeze(childArray); + } } - default: { - if (typeof thenable.status === "string") { - // Only instrument the thenable if the status if not defined. If - // it's defined, but an unknown value, assume it's been instrumented by - // some custom userspace implementation. We treat it as "pending". - // Attach a dummy listener, to ensure that any lazy initialization can - // happen. Flight lazily parses JSON when the value is actually awaited. - thenable.then(noop$1, noop$1); - } else { - // This is an uncached thenable that we haven't seen before. - // TODO: Detect infinite ping loops caused by uncached promises. - var pendingThenable = thenable; - pendingThenable.status = "pending"; - pendingThenable.then( - function (fulfilledValue) { - if (thenable.status === "pending") { - var fulfilledThenable = thenable; - fulfilledThenable.status = "fulfilled"; - fulfilledThenable.value = fulfilledValue; - } - }, - function (error) { - if (thenable.status === "pending") { - var rejectedThenable = thenable; - rejectedThenable.status = "rejected"; - rejectedThenable.reason = error; - } - } - ); - } // Check one more time in case the thenable resolved synchronously. + props.children = childArray; + } // Resolve default props - switch (thenable.status) { - case "fulfilled": { - var fulfilledThenable = thenable; - return fulfilledThenable.value; - } + if (type && type.defaultProps) { + var defaultProps = type.defaultProps; - case "rejected": { - var rejectedThenable = thenable; - var _rejectedError = rejectedThenable.reason; - throw _rejectedError; - } + for (propName in defaultProps) { + if (props[propName] === undefined) { + props[propName] = defaultProps[propName]; } } } - throw thenable; - } + { + if (key || ref) { + var displayName = + typeof type === "function" + ? type.displayName || type.name || "Unknown" + : type; - function mapIntoArray(children, array, escapedPrefix, nameSoFar, callback) { - var type = typeof children; + if (key) { + defineKeyPropWarningGetter(props, displayName); + } - if (type === "undefined" || type === "boolean") { - // All of the above are perceived as null. - children = null; + if (ref) { + defineRefPropWarningGetter(props, displayName); + } + } } - var invokeCallback = false; + var element = ReactElement( + type, + key, + ref, + undefined, + undefined, + ReactCurrentOwner.current, + props + ); - if (children === null) { - invokeCallback = true; + if (type === REACT_FRAGMENT_TYPE) { + validateFragmentProps(element); } else { - switch (type) { - case "string": - case "number": - invokeCallback = true; - break; + validatePropTypes(element); + } - case "object": - switch (children.$$typeof) { - case REACT_ELEMENT_TYPE: - case REACT_PORTAL_TYPE: - invokeCallback = true; - break; + return element; + } + var didWarnAboutDeprecatedCreateFactory = false; + /** + * Return a function that produces ReactElements of a given type. + * See https://reactjs.org/docs/react-api.html#createfactory + */ - case REACT_LAZY_TYPE: - var payload = children._payload; - var init = children._init; - return mapIntoArray( - init(payload), - array, - escapedPrefix, - nameSoFar, - callback - ); - } - } - } + function createFactory(type) { + var factory = createElement.bind(null, type); // Expose the type on the factory and the prototype so that it can be + // easily accessed on elements. E.g. `.type === Foo`. + // This should not be named `constructor` since this may not be the function + // that created the element, and it may not even be a constructor. + // Legacy hook: remove it - if (invokeCallback) { - var _child = children; - var mappedChild = callback(_child); // If it's the only child, treat the name as if it was wrapped in an array - // so that it's consistent if the number of children grows: + factory.type = type; - var childKey = - nameSoFar === "" ? SEPARATOR + getElementKey(_child, 0) : nameSoFar; + { + if (!didWarnAboutDeprecatedCreateFactory) { + didWarnAboutDeprecatedCreateFactory = true; - if (isArray(mappedChild)) { - var escapedChildKey = ""; + warn( + "React.createFactory() is deprecated and will be removed in " + + "a future major release. Consider using JSX " + + "or use React.createElement() directly instead." + ); + } // Legacy hook: remove it - if (childKey != null) { - escapedChildKey = escapeUserProvidedKey(childKey) + "/"; + Object.defineProperty(factory, "type", { + enumerable: false, + get: function () { + warn( + "Factory.type is deprecated. Access the class directly " + + "before passing it to createFactory." + ); + + Object.defineProperty(this, "type", { + value: type + }); + return type; } + }); + } - mapIntoArray(mappedChild, array, escapedChildKey, "", function (c) { - return c; - }); - } else if (mappedChild != null) { - if (isValidElement$1(mappedChild)) { - { - // The `if` statement here prevents auto-disabling of the safe - // coercion ESLint rule, so we must manually disable it below. - // $FlowFixMe[incompatible-type] Flow incorrectly thinks React.Portal doesn't have a key - if ( - mappedChild.key && - (!_child || _child.key !== mappedChild.key) - ) { - checkKeyStringCoercion(mappedChild.key); - } - } + return factory; + } + function cloneAndReplaceKey(oldElement, newKey) { + return ReactElement( + oldElement.type, + newKey, + oldElement.ref, + undefined, + undefined, + oldElement._owner, + oldElement.props + ); + } + /** + * Clone and return a new ReactElement using element as the starting point. + * See https://reactjs.org/docs/react-api.html#cloneelement + */ - mappedChild = cloneAndReplaceKey( - mappedChild, // Keep both the (mapped) and old keys if they differ, just as - // traverseAllChildren used to do for objects as children - escapedPrefix + // $FlowFixMe[incompatible-type] Flow incorrectly thinks React.Portal doesn't have a key - (mappedChild.key && (!_child || _child.key !== mappedChild.key) - ? escapeUserProvidedKey( - // $FlowFixMe[unsafe-addition] - "" + mappedChild.key // eslint-disable-line react-internal/safe-string-coercion - ) + "/" - : "") + - childKey - ); - } + function cloneElement(element, config, children) { + if (element === null || element === undefined) { + throw new Error( + "React.cloneElement(...): The argument must be a React element, but you passed " + + element + + "." + ); + } - array.push(mappedChild); - } + var propName; // Original props are copied - return 1; - } + var props = assign({}, element.props); // Reserved names are extracted - var child; - var nextName; - var subtreeCount = 0; // Count of children found in the current subtree. + var key = element.key; + var ref = element.ref; // Owner will be preserved, unless ref is overridden - var nextNamePrefix = - nameSoFar === "" ? SEPARATOR : nameSoFar + SUBSEPARATOR; + var owner = element._owner; - if (isArray(children)) { - for (var i = 0; i < children.length; i++) { - child = children[i]; - nextName = nextNamePrefix + getElementKey(child, i); - subtreeCount += mapIntoArray( - child, - array, - escapedPrefix, - nextName, - callback - ); + if (config != null) { + if (hasValidRef(config)) { + // Silently steal the ref from the parent. + ref = config.ref; + owner = ReactCurrentOwner.current; } - } else { - var iteratorFn = getIteratorFn(children); - - if (typeof iteratorFn === "function") { - var iterableChildren = children; + if (hasValidKey(config)) { { - // Warn about using Maps as children - if (iteratorFn === iterableChildren.entries) { - if (!didWarnAboutMaps) { - warn( - "Using Maps as children is not supported. " + - "Use an array of keyed ReactElements instead." - ); - } + checkKeyStringCoercion(config.key); + } - didWarnAboutMaps = true; + key = "" + config.key; + } // Remaining properties override existing props + + var defaultProps; + + if (element.type && element.type.defaultProps) { + defaultProps = element.type.defaultProps; + } + + for (propName in config) { + if ( + hasOwnProperty.call(config, propName) && // Skip over reserved prop names + propName !== "key" && // TODO: `ref` will no longer be reserved in the next major + propName !== "ref" && // ...and maybe these, too, though we currently rely on them for + // warnings and debug information in dev. Need to decide if we're OK + // with dropping them. In the jsx() runtime it's not an issue because + // the data gets passed as separate arguments instead of props, but + // it would be nice to stop relying on them entirely so we can drop + // them from the internal Fiber field. + propName !== "__self" && + propName !== "__source" + ) { + if (config[propName] === undefined && defaultProps !== undefined) { + // Resolve default props + props[propName] = defaultProps[propName]; + } else { + props[propName] = config[propName]; } } + } + } // Children can be more than one argument, and those are transferred onto + // the newly allocated props object. - var iterator = iteratorFn.call(iterableChildren); - var step; - var ii = 0; // $FlowFixMe[incompatible-use] `iteratorFn` might return null according to typing. + var childrenLength = arguments.length - 2; - while (!(step = iterator.next()).done) { - child = step.value; - nextName = nextNamePrefix + getElementKey(child, ii++); - subtreeCount += mapIntoArray( - child, - array, - escapedPrefix, - nextName, - callback - ); - } - } else if (type === "object") { - if (typeof children.then === "function") { - return mapIntoArray( - resolveThenable(children), - array, - escapedPrefix, - nameSoFar, - callback - ); - } // eslint-disable-next-line react-internal/safe-string-coercion + if (childrenLength === 1) { + props.children = children; + } else if (childrenLength > 1) { + var childArray = Array(childrenLength); - var childrenString = String(children); - throw new Error( - "Objects are not valid as a React child (found: " + - (childrenString === "[object Object]" - ? "object with keys {" + Object.keys(children).join(", ") + "}" - : childrenString) + - "). " + - "If you meant to render a collection of children, use an array " + - "instead." - ); + for (var i = 0; i < childrenLength; i++) { + childArray[i] = arguments[i + 2]; } + + props.children = childArray; } - return subtreeCount; + var clonedElement = ReactElement( + element.type, + key, + ref, + undefined, + undefined, + owner, + props + ); + + for (var _i2 = 2; _i2 < arguments.length; _i2++) { + validateChildKeys(arguments[_i2], clonedElement.type); + } + + validatePropTypes(clonedElement); + return clonedElement; } - /** - * Maps children that are typically specified as `props.children`. - * - * See https://reactjs.org/docs/react-api.html#reactchildrenmap - * - * The provided mapFunction(child, index) will be called for each - * leaf child. - * - * @param {?*} children Children tree container. - * @param {function(*, int)} func The map function. - * @param {*} context Context for mapFunction. - * @return {object} Object containing the ordered map of results. - */ - function mapChildren(children, func, context) { - if (children == null) { - // $FlowFixMe limitation refining abstract types in Flow - return children; + function getDeclarationErrorAddendum() { + { + if (ReactCurrentOwner.current) { + var name = getComponentNameFromType(ReactCurrentOwner.current.type); + + if (name) { + return "\n\nCheck the render method of `" + name + "`."; + } + } + + return ""; } + } - var result = []; - var count = 0; - mapIntoArray(children, result, "", "", function (child) { - return func.call(context, child, count++); - }); - return result; + function getSourceInfoErrorAddendumForProps(elementProps) { + if (elementProps !== null && elementProps !== undefined) { + return getSourceInfoErrorAddendum(elementProps.__source); + } + + return ""; } - /** - * Count the number of children that are typically specified as - * `props.children`. - * - * See https://reactjs.org/docs/react-api.html#reactchildrencount - * - * @param {?*} children Children tree container. - * @return {number} The number of children. - */ - function countChildren(children) { - var n = 0; - mapChildren(children, function () { - n++; // Don't return anything - }); - return n; + function getSourceInfoErrorAddendum(source) { + { + if (source !== undefined) { + var fileName = source.fileName.replace(/^.*[\\\/]/, ""); + var lineNumber = source.lineNumber; + return "\n\nCheck your code at " + fileName + ":" + lineNumber + "."; + } + + return ""; + } } /** - * Iterates through children that are typically specified as `props.children`. - * - * See https://reactjs.org/docs/react-api.html#reactchildrenforeach - * - * The provided forEachFunc(child, index) will be called for each - * leaf child. + * 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. * - * @param {?*} children Children tree container. - * @param {function(*, int)} forEachFunc - * @param {*} forEachContext Context for forEachContext. + * @internal + * @param {ReactNode} node Statically passed child of any type. + * @param {*} parentType node's parent's type. */ - function forEachChildren(children, forEachFunc, forEachContext) { - mapChildren( - children, // $FlowFixMe[missing-this-annot] - function () { - forEachFunc.apply(this, arguments); // Don't return anything. - }, - forEachContext - ); + function validateChildKeys(node, parentType) { + { + if (typeof node !== "object" || !node) { + return; + } + + if (node.$$typeof === REACT_CLIENT_REFERENCE); + else if (isArray(node)) { + for (var i = 0; i < node.length; i++) { + var child = node[i]; + + 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); + } + } + } + } + } + } } /** - * Flatten a children object (typically specified as `props.children`) and - * return an array with appropriately re-keyed children. - * - * See https://reactjs.org/docs/react-api.html#reactchildrentoarray + * 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 toArray(children) { + function isValidElement(object) { return ( - mapChildren(children, function (child) { - return child; - }) || [] + typeof object === "object" && + object !== null && + object.$$typeof === REACT_ELEMENT_TYPE ); } + var ownerHasKeyUseWarning = {}; /** - * Returns the first child in a collection of children and verifies that there - * is only one child in the collection. - * - * See https://reactjs.org/docs/react-api.html#reactchildrenonly - * - * The current implementation of this function assumes that a single child gets - * passed without a wrapper, but the purpose of this helper function is to - * abstract away the particular structure of children. + * 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 + * reordered. All children that haven't already been validated are required to + * have a "key" property assigned to it. Error statuses are cached so a warning + * will only be shown once. * - * @param {?object} children Child collection structure. - * @return {ReactElement} The first and only `ReactElement` contained in the - * structure. + * @internal + * @param {ReactElement} element Element that requires a key. + * @param {*} parentType element's parent's type. */ - function onlyChild(children) { - if (!isValidElement$1(children)) { - throw new Error( - "React.Children.only expected to receive a single React element child." + function validateExplicitKey(element, parentType) { + { + if ( + !element._store || + element._store.validated || + element.key != null + ) { + return; + } + + element._store.validated = true; + var currentComponentErrorInfo = + getCurrentComponentErrorInfo(parentType); + + if (ownerHasKeyUseWarning[currentComponentErrorInfo]) { + return; + } + + ownerHasKeyUseWarning[currentComponentErrorInfo] = true; // Usually the current owner is the offender, but if it accepts children as a + // property, it may be the creator of the child that's responsible for + // assigning it a key. + + var childOwner = ""; + + if ( + element && + element._owner && + element._owner !== ReactCurrentOwner.current + ) { + // Give the component that originally created this child. + childOwner = + " It was passed a child from " + + getComponentNameFromType(element._owner.type) + + "."; + } + + setCurrentlyValidatingElement(element); + + error( + 'Each child in a list should have a unique "key" prop.' + + "%s%s See https://reactjs.org/link/warning-keys for more information.", + currentComponentErrorInfo, + childOwner ); + + setCurrentlyValidatingElement(null); } + } - return children; + function setCurrentlyValidatingElement(element) { + { + if (element) { + var owner = element._owner; + var stack = describeUnknownElementTypeFrameInDEV( + element.type, + owner ? owner.type : null + ); + ReactDebugCurrentFrame.setExtraStackFrame(stack); + } else { + ReactDebugCurrentFrame.setExtraStackFrame(null); + } + } } - function createContext(defaultValue) { - // TODO: Second argument used to be an optional `calculateChangedBits` - // function. Warn to reserve for future use? - var context = { - $$typeof: REACT_CONTEXT_TYPE, - // As a workaround to support multiple concurrent renderers, we categorize - // some renderers as primary and others as secondary. We only expect - // there to be two concurrent renderers at most: React Native (primary) and - // Fabric (secondary); React DOM (primary) and React ART (secondary). - // Secondary renderers store their context values on separate fields. - _currentValue: defaultValue, - _currentValue2: defaultValue, - // Used to track how many concurrent renderers this context currently - // supports within in a single renderer. Such as parallel server rendering. - _threadCount: 0, - // These are circular - Provider: null, - Consumer: null - }; + function getCurrentComponentErrorInfo(parentType) { + { + var info = getDeclarationErrorAddendum(); - if (enableRenderableContext) { - context.Provider = context; - context.Consumer = { - $$typeof: REACT_CONSUMER_TYPE, - _context: context - }; - } else { - context.Provider = { - $$typeof: REACT_PROVIDER_TYPE, - _context: context - }; + if (!info) { + var parentName = getComponentNameFromType(parentType); - { - var Consumer = { - $$typeof: REACT_CONTEXT_TYPE, - _context: context - }; - Object.defineProperties(Consumer, { - Provider: { - get: function () { - return context.Provider; - }, - set: function (_Provider) { - context.Provider = _Provider; - } - }, - _currentValue: { - get: function () { - return context._currentValue; - }, - set: function (_currentValue) { - context._currentValue = _currentValue; - } - }, - _currentValue2: { - get: function () { - return context._currentValue2; - }, - set: function (_currentValue2) { - context._currentValue2 = _currentValue2; - } - }, - _threadCount: { - get: function () { - return context._threadCount; - }, - set: function (_threadCount) { - context._threadCount = _threadCount; - } - }, - Consumer: { - get: function () { - return context.Consumer; - } - }, - displayName: { - get: function () { - return context.displayName; - }, - set: function (displayName) {} - } - }); - context.Consumer = Consumer; + if (parentName) { + info = + "\n\nCheck the top-level render call using <" + parentName + ">."; + } } + + return info; } + } + /** + * Given a fragment, validate that it can only be provided with fragment props + * @param {ReactElement} fragment + */ + function validateFragmentProps(fragment) { { - context._currentRenderer = null; - context._currentRenderer2 = null; - } + var keys = Object.keys(fragment.props); - return context; - } + for (var i = 0; i < keys.length; i++) { + var key = keys[i]; - var Uninitialized = -1; - var Pending = 0; - var Resolved = 1; - var Rejected = 2; + if (key !== "children" && key !== "key") { + setCurrentlyValidatingElement(fragment); - function lazyInitializer(payload) { - if (payload._status === Uninitialized) { - var ctor = payload._result; - var thenable = ctor(); // Transition to the next state. - // This might throw either because it's missing or throws. If so, we treat it - // as still uninitialized and try again next time. Which is the same as what - // happens if the ctor or any wrappers processing the ctor throws. This might - // end up fixing it if the resolution was a concurrency bug. + error( + "Invalid prop `%s` supplied to `React.Fragment`. " + + "React.Fragment can only have `key` and `children` props.", + key + ); - thenable.then( - function (moduleObject) { - if ( - payload._status === Pending || - payload._status === Uninitialized - ) { - // Transition to the next state. - var resolved = payload; - resolved._status = Resolved; - resolved._result = moduleObject; - } - }, - function (error) { - if ( - payload._status === Pending || - payload._status === Uninitialized - ) { - // Transition to the next state. - var rejected = payload; - rejected._status = Rejected; - rejected._result = error; - } + setCurrentlyValidatingElement(null); + break; } - ); - - if (payload._status === Uninitialized) { - // In case, we're still uninitialized, then we're waiting for the thenable - // to resolve. Set it as pending in the meantime. - var pending = payload; - pending._status = Pending; - pending._result = thenable; } - } - if (payload._status === Resolved) { - var moduleObject = payload._result; + if (fragment.ref !== null) { + setCurrentlyValidatingElement(fragment); - { - if (moduleObject === undefined) { - error( - "lazy: Expected the result of a dynamic imp" + - "ort() call. " + - "Instead received: %s\n\nYour code should look like: \n " + // Break up imports to avoid accidentally parsing them as dependencies. - "const MyComponent = lazy(() => imp" + - "ort('./MyComponent'))\n\n" + - "Did you accidentally put curly braces around the import?", - moduleObject - ); - } - } + error("Invalid attribute `ref` supplied to `React.Fragment`."); - { - if (!("default" in moduleObject)) { - error( - "lazy: Expected the result of a dynamic imp" + - "ort() call. " + - "Instead received: %s\n\nYour code should look like: \n " + // Break up imports to avoid accidentally parsing them as dependencies. - "const MyComponent = lazy(() => imp" + - "ort('./MyComponent'))", - moduleObject - ); - } + setCurrentlyValidatingElement(null); } - - return moduleObject.default; - } else { - throw payload._result; } } - function lazy(ctor) { - var payload = { - // We use these fields to store the result. - _status: Uninitialized, - _result: ctor - }; - var lazyType = { - $$typeof: REACT_LAZY_TYPE, - _payload: payload, - _init: lazyInitializer - }; + var propTypesMisspellWarningShown = false; + /** + * Given an element, validate that its props follow the propTypes definition, + * provided by the type. + * + * @param {ReactElement} element + */ + function validatePropTypes(element) { { - // In production, this would just set it on the object. - var defaultProps; - var propTypes; // $FlowFixMe[prop-missing] + var type = element.type; - Object.defineProperties(lazyType, { - defaultProps: { - configurable: true, - get: function () { - return defaultProps; - }, - // $FlowFixMe[missing-local-annot] - set: function (newDefaultProps) { - error( - "React.lazy(...): It is not supported to assign `defaultProps` to " + - "a lazy component import. Either specify them where the component " + - "is defined, or create a wrapping component around it." - ); + if (type === null || type === undefined || typeof type === "string") { + return; + } - defaultProps = newDefaultProps; // Match production behavior more closely: - // $FlowFixMe[prop-missing] + if (type.$$typeof === REACT_CLIENT_REFERENCE) { + return; + } - Object.defineProperty(lazyType, "defaultProps", { - enumerable: true - }); - } - }, - propTypes: { - configurable: true, - get: function () { - return propTypes; - }, - // $FlowFixMe[missing-local-annot] - set: function (newPropTypes) { - error( - "React.lazy(...): It is not supported to assign `propTypes` to " + - "a lazy component import. Either specify them where the component " + - "is defined, or create a wrapping component around it." - ); + var propTypes; - propTypes = newPropTypes; // Match production behavior more closely: - // $FlowFixMe[prop-missing] + if (typeof type === "function") { + propTypes = type.propTypes; + } else if ( + typeof type === "object" && + (type.$$typeof === REACT_FORWARD_REF_TYPE || // Note: Memo only checks outer props here. + // Inner props are checked in the reconciler. + type.$$typeof === REACT_MEMO_TYPE) + ) { + propTypes = type.propTypes; + } else { + return; + } - Object.defineProperty(lazyType, "propTypes", { - enumerable: true - }); - } - } - }); - } + if (propTypes) { + // Intentionally inside to avoid triggering lazy initializers: + var name = getComponentNameFromType(type); + checkPropTypes(propTypes, element.props, "prop", name, element); + } else if ( + type.PropTypes !== undefined && + !propTypesMisspellWarningShown + ) { + propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers: - return lazyType; - } + var _name = getComponentNameFromType(type); - function forwardRef(render) { - { - if (render != null && render.$$typeof === REACT_MEMO_TYPE) { - error( - "forwardRef requires a render function but received a `memo` " + - "component. Instead of forwardRef(memo(...)), use " + - "memo(forwardRef(...))." - ); - } else if (typeof render !== "function") { error( - "forwardRef requires a render function but was given %s.", - render === null ? "null" : typeof render + "Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", + _name || "Unknown" ); - } else { - if (render.length !== 0 && render.length !== 2) { - error( - "forwardRef render functions accept exactly two parameters: props and ref. %s", - render.length === 1 - ? "Did you forget to use the ref parameter?" - : "Any additional parameter will be undefined." - ); - } } - if (render != null) { - if (render.defaultProps != null) { - error( - "forwardRef render functions do not support defaultProps. " + - "Did you accidentally pass a React component?" - ); - } + if ( + typeof type.getDefaultProps === "function" && + !type.getDefaultProps.isReactClassApproved + ) { + error( + "getDefaultProps is only used on classic React.createClass " + + "definitions. Use a static property named `defaultProps` instead." + ); } } + } - var elementType = { - $$typeof: REACT_FORWARD_REF_TYPE, - render: render + var SEPARATOR = "."; + var SUBSEPARATOR = ":"; + /** + * Escape and wrap key so it is safe to use as a reactid + * + * @param {string} key to be escaped. + * @return {string} the escaped key. + */ + + function escape(key) { + var escapeRegex = /[=:]/g; + var escaperLookup = { + "=": "=0", + ":": "=2" }; + var escapedString = key.replace(escapeRegex, function (match) { + return escaperLookup[match]; + }); + return "$" + escapedString; + } + /** + * TODO: Test that a single child and an array with one item have the same key + * pattern. + */ - { - var ownName; - Object.defineProperty(elementType, "displayName", { - enumerable: false, - configurable: true, - get: function () { - return ownName; - }, - set: function (name) { - ownName = name; // The inner component shouldn't inherit this display name in most cases, - // because the component may be used elsewhere. - // But it's nice for anonymous functions to inherit the name, - // so that our component-stack generation logic will display their frames. - // An anonymous function generally suggests a pattern like: - // React.forwardRef((props, ref) => {...}); - // This kind of inner function is not used elsewhere so the side effect is okay. + var didWarnAboutMaps = false; + var userProvidedKeyEscapeRegex = /\/+/g; - if (!render.name && !render.displayName) { - render.displayName = name; - } - } - }); - } + function escapeUserProvidedKey(text) { + return text.replace(userProvidedKeyEscapeRegex, "$&/"); + } + /** + * Generate a key string that identifies a element within a set. + * + * @param {*} element A element that could contain a manual key. + * @param {number} index Index that is used if a manual key is not provided. + * @return {string} + */ - return elementType; + function getElementKey(element, index) { + // Do some typechecking here since we call this blindly. We want to ensure + // that we don't block potential future ES APIs. + if ( + typeof element === "object" && + element !== null && + element.key != null + ) { + // Explicit key + { + checkKeyStringCoercion(element.key); + } + + return escape("" + element.key); + } // Implicit key determined by the index in the set + + return index.toString(36); } - function memo(type, compare) { - { - if (!isValidElementType(type)) { - error( - "memo: The first argument must be a component. Instead " + - "received: %s", - type === null ? "null" : typeof type - ); + function noop$1() {} + + function resolveThenable(thenable) { + switch (thenable.status) { + case "fulfilled": { + var fulfilledValue = thenable.value; + return fulfilledValue; } - } - var elementType = { - $$typeof: REACT_MEMO_TYPE, - type: type, - compare: compare === undefined ? null : compare - }; + case "rejected": { + var rejectedError = thenable.reason; + throw rejectedError; + } - { - var ownName; - Object.defineProperty(elementType, "displayName", { - enumerable: false, - configurable: true, - get: function () { - return ownName; - }, - set: function (name) { - ownName = name; // The inner component shouldn't inherit this display name in most cases, - // because the component may be used elsewhere. - // But it's nice for anonymous functions to inherit the name, - // so that our component-stack generation logic will display their frames. - // An anonymous function generally suggests a pattern like: - // React.memo((props) => {...}); - // This kind of inner function is not used elsewhere so the side effect is okay. + default: { + if (typeof thenable.status === "string") { + // Only instrument the thenable if the status if not defined. If + // it's defined, but an unknown value, assume it's been instrumented by + // some custom userspace implementation. We treat it as "pending". + // Attach a dummy listener, to ensure that any lazy initialization can + // happen. Flight lazily parses JSON when the value is actually awaited. + thenable.then(noop$1, noop$1); + } else { + // This is an uncached thenable that we haven't seen before. + // TODO: Detect infinite ping loops caused by uncached promises. + var pendingThenable = thenable; + pendingThenable.status = "pending"; + pendingThenable.then( + function (fulfilledValue) { + if (thenable.status === "pending") { + var fulfilledThenable = thenable; + fulfilledThenable.status = "fulfilled"; + fulfilledThenable.value = fulfilledValue; + } + }, + function (error) { + if (thenable.status === "pending") { + var rejectedThenable = thenable; + rejectedThenable.status = "rejected"; + rejectedThenable.reason = error; + } + } + ); + } // Check one more time in case the thenable resolved synchronously. - if (!type.name && !type.displayName) { - type.displayName = name; + switch (thenable.status) { + case "fulfilled": { + var fulfilledThenable = thenable; + return fulfilledThenable.value; + } + + case "rejected": { + var rejectedThenable = thenable; + var _rejectedError = rejectedThenable.reason; + throw _rejectedError; } } - }); + } } - return elementType; + throw thenable; } - function noopCache(fn) { - // On the client (i.e. not a Server Components environment) `cache` has - // no caching behavior. We just return the function as-is. - // - // We intend to implement client caching in a future major release. In the - // meantime, it's only exposed as an API so that Shared Components can use - // per-request caching on the server without breaking on the client. But it - // does mean they need to be aware of the behavioral difference. - // - // The rest of the behavior is the same as the server implementation — it - // returns a new reference, extra properties like `displayName` are not - // preserved, the length of the new function is 0, etc. That way apps can't - // accidentally depend on those details. - return function () { - // $FlowFixMe[incompatible-call]: We don't want to use rest arguments since we transpile the code. - return fn.apply(null, arguments); - }; - } - var cache = noopCache; + function mapIntoArray(children, array, escapedPrefix, nameSoFar, callback) { + var type = typeof children; - function resolveDispatcher() { - var dispatcher = ReactCurrentDispatcher$1.current; + if (type === "undefined" || type === "boolean") { + // All of the above are perceived as null. + children = null; + } - { - if (dispatcher === null) { - error( - "Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for" + - " one of the following reasons:\n" + - "1. You might have mismatching versions of React and the renderer (such as React DOM)\n" + - "2. You might be breaking the Rules of Hooks\n" + - "3. You might have more than one copy of React in the same app\n" + - "See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem." - ); - } - } // Will result in a null access error if accessed outside render phase. We - // intentionally don't throw our own error because this is in a hot path. - // Also helps ensure this is inlined. + var invokeCallback = false; - return dispatcher; - } + if (children === null) { + invokeCallback = true; + } else { + switch (type) { + case "string": + case "number": + invokeCallback = true; + break; - function getCacheSignal() { - var dispatcher = ReactCurrentCache.current; + case "object": + switch (children.$$typeof) { + case REACT_ELEMENT_TYPE: + case REACT_PORTAL_TYPE: + invokeCallback = true; + break; - if (!dispatcher) { - // If we have no cache to associate with this call, then we don't know - // its lifetime. We abort early since that's safer than letting it live - // for ever. Unlike just caching which can be a functional noop outside - // of React, these should generally always be associated with some React - // render but we're not limiting quite as much as making it a Hook. - // It's safer than erroring early at runtime. - var controller = new AbortController(); - var reason = new Error( - "This CacheSignal was requested outside React which means that it is " + - "immediately aborted." - ); - controller.abort(reason); - return controller.signal; + case REACT_LAZY_TYPE: + var payload = children._payload; + var init = children._init; + return mapIntoArray( + init(payload), + array, + escapedPrefix, + nameSoFar, + callback + ); + } + } } - return dispatcher.getCacheSignal(); - } - function getCacheForType(resourceType) { - var dispatcher = ReactCurrentCache.current; + if (invokeCallback) { + var _child = children; + var mappedChild = callback(_child); // If it's the only child, treat the name as if it was wrapped in an array + // so that it's consistent if the number of children grows: - if (!dispatcher) { - // If there is no dispatcher, then we treat this as not being cached. - return resourceType(); - } + var childKey = + nameSoFar === "" ? SEPARATOR + getElementKey(_child, 0) : nameSoFar; - return dispatcher.getCacheForType(resourceType); - } - function useContext(Context) { - var dispatcher = resolveDispatcher(); + if (isArray(mappedChild)) { + var escapedChildKey = ""; - { - if (Context.$$typeof === REACT_CONSUMER_TYPE) { - error( - "Calling useContext(Context.Consumer) is not supported and will cause bugs. " + - "Did you mean to call useContext(Context) instead?" - ); - } - } + if (childKey != null) { + escapedChildKey = escapeUserProvidedKey(childKey) + "/"; + } - return dispatcher.useContext(Context); - } - function useState(initialState) { - var dispatcher = resolveDispatcher(); - return dispatcher.useState(initialState); - } - function useReducer(reducer, initialArg, init) { - var dispatcher = resolveDispatcher(); - return dispatcher.useReducer(reducer, initialArg, init); - } - function useRef(initialValue) { - var dispatcher = resolveDispatcher(); - return dispatcher.useRef(initialValue); - } - function useEffect(create, deps) { - var dispatcher = resolveDispatcher(); - return dispatcher.useEffect(create, deps); - } - function useInsertionEffect(create, deps) { - var dispatcher = resolveDispatcher(); - return dispatcher.useInsertionEffect(create, deps); - } - function useLayoutEffect(create, deps) { - var dispatcher = resolveDispatcher(); - return dispatcher.useLayoutEffect(create, deps); - } - function useCallback(callback, deps) { - var dispatcher = resolveDispatcher(); - return dispatcher.useCallback(callback, deps); - } - function useMemo(create, deps) { - var dispatcher = resolveDispatcher(); - return dispatcher.useMemo(create, deps); - } - function useImperativeHandle(ref, create, deps) { - var dispatcher = resolveDispatcher(); - return dispatcher.useImperativeHandle(ref, create, deps); - } - function useDebugValue(value, formatterFn) { - { - var dispatcher = resolveDispatcher(); - return dispatcher.useDebugValue(value, formatterFn); - } - } - function useTransition() { - var dispatcher = resolveDispatcher(); - return dispatcher.useTransition(); - } - function useDeferredValue(value, initialValue) { - var dispatcher = resolveDispatcher(); - return dispatcher.useDeferredValue(value, initialValue); - } - function useId() { - var dispatcher = resolveDispatcher(); - return dispatcher.useId(); - } - function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) { - var dispatcher = resolveDispatcher(); - return dispatcher.useSyncExternalStore( - subscribe, - getSnapshot, - getServerSnapshot - ); - } - function useCacheRefresh() { - var dispatcher = resolveDispatcher(); // $FlowFixMe[not-a-function] This is unstable, thus optional - - return dispatcher.useCacheRefresh(); - } - function use(usable) { - var dispatcher = resolveDispatcher(); - return dispatcher.use(usable); - } - function useMemoCache(size) { - var dispatcher = resolveDispatcher(); // $FlowFixMe[not-a-function] This is unstable, thus optional - - return dispatcher.useMemoCache(size); - } - function useEffectEvent(callback) { - var dispatcher = resolveDispatcher(); // $FlowFixMe[not-a-function] This is unstable, thus optional - - return dispatcher.useEffectEvent(callback); - } - function useOptimistic(passthrough, reducer) { - var dispatcher = resolveDispatcher(); // $FlowFixMe[not-a-function] This is unstable, thus optional - - return dispatcher.useOptimistic(passthrough, reducer); - } + mapIntoArray(mappedChild, array, escapedChildKey, "", function (c) { + return c; + }); + } else if (mappedChild != null) { + if (isValidElement(mappedChild)) { + { + // The `if` statement here prevents auto-disabling of the safe + // coercion ESLint rule, so we must manually disable it below. + // $FlowFixMe[incompatible-type] Flow incorrectly thinks React.Portal doesn't have a key + if ( + mappedChild.key && + (!_child || _child.key !== mappedChild.key) + ) { + checkKeyStringCoercion(mappedChild.key); + } + } - function startTransition(scope, options) { - var prevTransition = ReactCurrentBatchConfig.transition; // Each renderer registers a callback to receive the return value of - // the scope function. This is used to implement async actions. + mappedChild = cloneAndReplaceKey( + mappedChild, // Keep both the (mapped) and old keys if they differ, just as + // traverseAllChildren used to do for objects as children + escapedPrefix + // $FlowFixMe[incompatible-type] Flow incorrectly thinks React.Portal doesn't have a key + (mappedChild.key && (!_child || _child.key !== mappedChild.key) + ? escapeUserProvidedKey( + // $FlowFixMe[unsafe-addition] + "" + mappedChild.key // eslint-disable-line react-internal/safe-string-coercion + ) + "/" + : "") + + childKey + ); + } - var callbacks = new Set(); - var transition = { - _callbacks: callbacks - }; - ReactCurrentBatchConfig.transition = transition; - var currentTransition = ReactCurrentBatchConfig.transition; + array.push(mappedChild); + } - { - ReactCurrentBatchConfig.transition._updatedFibers = new Set(); + return 1; } - if (enableTransitionTracing) { - if (options !== undefined && options.name !== undefined) { - // $FlowFixMe[incompatible-use] found when upgrading Flow - ReactCurrentBatchConfig.transition.name = options.name; // $FlowFixMe[incompatible-use] found when upgrading Flow + var child; + var nextName; + var subtreeCount = 0; // Count of children found in the current subtree. - ReactCurrentBatchConfig.transition.startTime = -1; + var nextNamePrefix = + nameSoFar === "" ? SEPARATOR : nameSoFar + SUBSEPARATOR; + + if (isArray(children)) { + for (var i = 0; i < children.length; i++) { + child = children[i]; + nextName = nextNamePrefix + getElementKey(child, i); + subtreeCount += mapIntoArray( + child, + array, + escapedPrefix, + nextName, + callback + ); } - } + } else { + var iteratorFn = getIteratorFn(children); - { - try { - var returnValue = scope(); + if (typeof iteratorFn === "function") { + var iterableChildren = children; - if ( - typeof returnValue === "object" && - returnValue !== null && - typeof returnValue.then === "function" - ) { - callbacks.forEach(function (callback) { - return callback(currentTransition, returnValue); - }); - returnValue.then(noop, onError); - } - } catch (error) { - onError(error); - } finally { - warnAboutTransitionSubscriptions(prevTransition, currentTransition); - ReactCurrentBatchConfig.transition = prevTransition; - } - } - } + { + // Warn about using Maps as children + if (iteratorFn === iterableChildren.entries) { + if (!didWarnAboutMaps) { + warn( + "Using Maps as children is not supported. " + + "Use an array of keyed ReactElements instead." + ); + } - function warnAboutTransitionSubscriptions( - prevTransition, - currentTransition - ) { - { - if (prevTransition === null && currentTransition._updatedFibers) { - var updatedFibersCount = currentTransition._updatedFibers.size; + didWarnAboutMaps = true; + } + } - currentTransition._updatedFibers.clear(); + var iterator = iteratorFn.call(iterableChildren); + var step; + var ii = 0; // $FlowFixMe[incompatible-use] `iteratorFn` might return null according to typing. - if (updatedFibersCount > 10) { - warn( - "Detected a large number of updates inside startTransition. " + - "If this is due to a subscription please re-write it to use React provided hooks. " + - "Otherwise concurrent mode guarantees are off the table." + while (!(step = iterator.next()).done) { + child = step.value; + nextName = nextNamePrefix + getElementKey(child, ii++); + subtreeCount += mapIntoArray( + child, + array, + escapedPrefix, + nextName, + callback ); } + } else if (type === "object") { + if (typeof children.then === "function") { + return mapIntoArray( + resolveThenable(children), + array, + escapedPrefix, + nameSoFar, + callback + ); + } // eslint-disable-next-line react-internal/safe-string-coercion + + var childrenString = String(children); + throw new Error( + "Objects are not valid as a React child (found: " + + (childrenString === "[object Object]" + ? "object with keys {" + Object.keys(children).join(", ") + "}" + : childrenString) + + "). " + + "If you meant to render a collection of children, use an array " + + "instead." + ); } } - } - function noop() {} // Use reportError, if it exists. Otherwise console.error. This is the same as - // the default for onRecoverableError. + return subtreeCount; + } + /** + * Maps children that are typically specified as `props.children`. + * + * See https://reactjs.org/docs/react-api.html#reactchildrenmap + * + * The provided mapFunction(child, index) will be called for each + * leaf child. + * + * @param {?*} children Children tree container. + * @param {function(*, int)} func The map function. + * @param {*} context Context for mapFunction. + * @return {object} Object containing the ordered map of results. + */ - var onError = - typeof reportError === "function" // In modern browsers, reportError will dispatch an error event, - ? // emulating an uncaught JavaScript error. - reportError - : function (error) { - // In older browsers and test environments, fallback to console.error. - // eslint-disable-next-line react-internal/no-production-logging - console["error"](error); - }; + function mapChildren(children, func, context) { + if (children == null) { + // $FlowFixMe limitation refining abstract types in Flow + return children; + } - var didWarnAboutMessageChannel = false; - var enqueueTaskImpl = null; - function enqueueTask(task) { - if (enqueueTaskImpl === null) { - try { - // read require off the module object to get around the bundlers. - // we don't want them to detect a require and bundle a Node polyfill. - var requireString = ("require" + Math.random()).slice(0, 7); - var nodeRequire = module && module[requireString]; // assuming we're in node, let's try to get node's - // version of setImmediate, bypassing fake timers if any. - - enqueueTaskImpl = nodeRequire.call(module, "timers").setImmediate; - } catch (_err) { - // we're in a browser - // we can't use regular timers because they may still be faked - // so we try MessageChannel+postMessage instead - enqueueTaskImpl = function (callback) { - { - if (didWarnAboutMessageChannel === false) { - didWarnAboutMessageChannel = true; - - if (typeof MessageChannel === "undefined") { - error( - "This browser does not have a MessageChannel implementation, " + - "so enqueuing tasks via await act(async () => ...) will fail. " + - "Please file an issue at https://github.com/facebook/react/issues " + - "if you encounter this warning." - ); - } - } - } - - var channel = new MessageChannel(); - channel.port1.onmessage = callback; - channel.port2.postMessage(undefined); - }; - } - } - - return enqueueTaskImpl(task); + var result = []; + var count = 0; + mapIntoArray(children, result, "", "", function (child) { + return func.call(context, child, count++); + }); + return result; } + /** + * Count the number of children that are typically specified as + * `props.children`. + * + * See https://reactjs.org/docs/react-api.html#reactchildrencount + * + * @param {?*} children Children tree container. + * @return {number} The number of children. + */ - // number of `act` scopes on the stack. - - var actScopeDepth = 0; // We only warn the first time you neglect to await an async `act` scope. - - var didWarnNoAwaitAct = false; - function act(callback) { - { - // When ReactCurrentActQueue.current is not null, it signals to React that - // we're currently inside an `act` scope. React will push all its tasks to - // this queue instead of scheduling them with platform APIs. - // - // We set this to an empty array when we first enter an `act` scope, and - // only unset it once we've left the outermost `act` scope — remember that - // `act` calls can be nested. - // - // If we're already inside an `act` scope, reuse the existing queue. - var prevIsBatchingLegacy = ReactCurrentActQueue.isBatchingLegacy; - var prevActQueue = ReactCurrentActQueue.current; - var prevActScopeDepth = actScopeDepth; - actScopeDepth++; - var queue = (ReactCurrentActQueue.current = - prevActQueue !== null ? prevActQueue : []); // Used to reproduce behavior of `batchedUpdates` in legacy mode. Only - // set to `true` while the given callback is executed, not for updates - // triggered during an async event, because this is how the legacy - // implementation of `act` behaved. - - ReactCurrentActQueue.isBatchingLegacy = true; - var result; // This tracks whether the `act` call is awaited. In certain cases, not - // awaiting it is a mistake, so we will detect that and warn. - - var didAwaitActCall = false; - - try { - // Reset this to `false` right before entering the React work loop. The - // only place we ever read this fields is just below, right after running - // the callback. So we don't need to reset after the callback runs. - ReactCurrentActQueue.didScheduleLegacyUpdate = false; - result = callback(); - var didScheduleLegacyUpdate = - ReactCurrentActQueue.didScheduleLegacyUpdate; // Replicate behavior of original `act` implementation in legacy mode, - // which flushed updates immediately after the scope function exits, even - // if it's an async function. - - if (!prevIsBatchingLegacy && didScheduleLegacyUpdate) { - flushActQueue(queue); - } // `isBatchingLegacy` gets reset using the regular stack, not the async - // one used to track `act` scopes. Why, you may be wondering? Because - // that's how it worked before version 18. Yes, it's confusing! We should - // delete legacy mode!! - - ReactCurrentActQueue.isBatchingLegacy = prevIsBatchingLegacy; - } catch (error) { - // `isBatchingLegacy` gets reset using the regular stack, not the async - // one used to track `act` scopes. Why, you may be wondering? Because - // that's how it worked before version 18. Yes, it's confusing! We should - // delete legacy mode!! - ReactCurrentActQueue.isBatchingLegacy = prevIsBatchingLegacy; - popActScope(prevActQueue, prevActScopeDepth); - throw error; - } - - if ( - result !== null && - typeof result === "object" && // $FlowFixMe[method-unbinding] - typeof result.then === "function" - ) { - // A promise/thenable was returned from the callback. Wait for it to - // resolve before flushing the queue. - // - // If `act` were implemented as an async function, this whole block could - // be a single `await` call. That's really the only difference between - // this branch and the next one. - var thenable = result; // Warn if the an `act` call with an async scope is not awaited. In a - // future release, consider making this an error. - - queueSeveralMicrotasks(function () { - if (!didAwaitActCall && !didWarnNoAwaitAct) { - didWarnNoAwaitAct = true; - - error( - "You called act(async () => ...) without await. " + - "This could lead to unexpected testing behaviour, " + - "interleaving multiple act calls and mixing their " + - "scopes. " + - "You should - await act(async () => ...);" - ); - } - }); - return { - then: function (resolve, reject) { - didAwaitActCall = true; - thenable.then( - function (returnValue) { - popActScope(prevActQueue, prevActScopeDepth); - - if (prevActScopeDepth === 0) { - // We're exiting the outermost `act` scope. Flush the queue. - try { - flushActQueue(queue); - enqueueTask(function () { - return ( - // Recursively flush tasks scheduled by a microtask. - recursivelyFlushAsyncActWork( - returnValue, - resolve, - reject - ) - ); - }); - } catch (error) { - // `thenable` might not be a real promise, and `flushActQueue` - // might throw, so we need to wrap `flushActQueue` in a - // try/catch. - reject(error); - } - } else { - resolve(returnValue); - } - }, - function (error) { - popActScope(prevActQueue, prevActScopeDepth); - reject(error); - } - ); - } - }; - } else { - var returnValue = result; // The callback is not an async function. Exit the current - // scope immediately. - - popActScope(prevActQueue, prevActScopeDepth); - - if (prevActScopeDepth === 0) { - // We're exiting the outermost `act` scope. Flush the queue. - flushActQueue(queue); // If the queue is not empty, it implies that we intentionally yielded - // to the main thread, because something suspended. We will continue - // in an asynchronous task. - // - // Warn if something suspends but the `act` call is not awaited. - // In a future release, consider making this an error. - - if (queue.length !== 0) { - queueSeveralMicrotasks(function () { - if (!didAwaitActCall && !didWarnNoAwaitAct) { - didWarnNoAwaitAct = true; - - error( - "A component suspended inside an `act` scope, but the " + - "`act` call was not awaited. When testing React " + - "components that depend on asynchronous data, you must " + - "await the result:\n\n" + - "await act(() => ...)" - ); - } - }); - } // Like many things in this module, this is next part is confusing. - // - // We do not currently require every `act` call that is passed a - // callback to be awaited, through arguably we should. Since this - // callback was synchronous, we need to exit the current scope before - // returning. - // - // However, if thenable we're about to return *is* awaited, we'll - // immediately restore the current scope. So it shouldn't observable. - // - // This doesn't affect the case where the scope callback is async, - // because we always require those calls to be awaited. - // - // TODO: In a future version, consider always requiring all `act` calls - // to be awaited, regardless of whether the callback is sync or async. - - ReactCurrentActQueue.current = null; - } - - return { - then: function (resolve, reject) { - didAwaitActCall = true; + function countChildren(children) { + var n = 0; + mapChildren(children, function () { + n++; // Don't return anything + }); + return n; + } + /** + * Iterates through children that are typically specified as `props.children`. + * + * See https://reactjs.org/docs/react-api.html#reactchildrenforeach + * + * The provided forEachFunc(child, index) will be called for each + * leaf child. + * + * @param {?*} children Children tree container. + * @param {function(*, int)} forEachFunc + * @param {*} forEachContext Context for forEachContext. + */ - if (prevActScopeDepth === 0) { - // If the `act` call is awaited, restore the queue we were - // using before (see long comment above) so we can flush it. - ReactCurrentActQueue.current = queue; - enqueueTask(function () { - return ( - // Recursively flush tasks scheduled by a microtask. - recursivelyFlushAsyncActWork(returnValue, resolve, reject) - ); - }); - } else { - resolve(returnValue); - } - } - }; - } - } + function forEachChildren(children, forEachFunc, forEachContext) { + mapChildren( + children, // $FlowFixMe[missing-this-annot] + function () { + forEachFunc.apply(this, arguments); // Don't return anything. + }, + forEachContext + ); } + /** + * Flatten a children object (typically specified as `props.children`) and + * return an array with appropriately re-keyed children. + * + * See https://reactjs.org/docs/react-api.html#reactchildrentoarray + */ - function popActScope(prevActQueue, prevActScopeDepth) { - { - if (prevActScopeDepth !== actScopeDepth - 1) { - error( - "You seem to have overlapping act() calls, this is not supported. " + - "Be sure to await previous act() calls before making a new one. " - ); - } + function toArray(children) { + return ( + mapChildren(children, function (child) { + return child; + }) || [] + ); + } + /** + * Returns the first child in a collection of children and verifies that there + * is only one child in the collection. + * + * See https://reactjs.org/docs/react-api.html#reactchildrenonly + * + * The current implementation of this function assumes that a single child gets + * passed without a wrapper, but the purpose of this helper function is to + * abstract away the particular structure of children. + * + * @param {?object} children Child collection structure. + * @return {ReactElement} The first and only `ReactElement` contained in the + * structure. + */ - actScopeDepth = prevActScopeDepth; + function onlyChild(children) { + if (!isValidElement(children)) { + throw new Error( + "React.Children.only expected to receive a single React element child." + ); } + + return children; } - function recursivelyFlushAsyncActWork(returnValue, resolve, reject) { - { - // Check if any tasks were scheduled asynchronously. - var queue = ReactCurrentActQueue.current; + function createContext(defaultValue) { + // TODO: Second argument used to be an optional `calculateChangedBits` + // function. Warn to reserve for future use? + var context = { + $$typeof: REACT_CONTEXT_TYPE, + // As a workaround to support multiple concurrent renderers, we categorize + // some renderers as primary and others as secondary. We only expect + // there to be two concurrent renderers at most: React Native (primary) and + // Fabric (secondary); React DOM (primary) and React ART (secondary). + // Secondary renderers store their context values on separate fields. + _currentValue: defaultValue, + _currentValue2: defaultValue, + // Used to track how many concurrent renderers this context currently + // supports within in a single renderer. Such as parallel server rendering. + _threadCount: 0, + // These are circular + Provider: null, + Consumer: null + }; - if (queue !== null) { - if (queue.length !== 0) { - // Async tasks were scheduled, mostly likely in a microtask. - // Keep flushing until there are no more. - try { - flushActQueue(queue); // The work we just performed may have schedule additional async - // tasks. Wait a macrotask and check again. + if (enableRenderableContext) { + context.Provider = context; + context.Consumer = { + $$typeof: REACT_CONSUMER_TYPE, + _context: context + }; + } else { + context.Provider = { + $$typeof: REACT_PROVIDER_TYPE, + _context: context + }; - enqueueTask(function () { - return recursivelyFlushAsyncActWork( - returnValue, - resolve, - reject - ); - }); - } catch (error) { - // Leave remaining tasks on the queue if something throws. - reject(error); + { + var Consumer = { + $$typeof: REACT_CONTEXT_TYPE, + _context: context + }; + Object.defineProperties(Consumer, { + Provider: { + get: function () { + return context.Provider; + }, + set: function (_Provider) { + context.Provider = _Provider; + } + }, + _currentValue: { + get: function () { + return context._currentValue; + }, + set: function (_currentValue) { + context._currentValue = _currentValue; + } + }, + _currentValue2: { + get: function () { + return context._currentValue2; + }, + set: function (_currentValue2) { + context._currentValue2 = _currentValue2; + } + }, + _threadCount: { + get: function () { + return context._threadCount; + }, + set: function (_threadCount) { + context._threadCount = _threadCount; + } + }, + Consumer: { + get: function () { + return context.Consumer; + } + }, + displayName: { + get: function () { + return context.displayName; + }, + set: function (displayName) {} } - } else { - // The queue is empty. We can finish. - ReactCurrentActQueue.current = null; - resolve(returnValue); - } - } else { - resolve(returnValue); + }); + context.Consumer = Consumer; } } - } - var isFlushing = false; - - function flushActQueue(queue) { { - if (!isFlushing) { - // Prevent re-entrance. - isFlushing = true; - var i = 0; - - try { - for (; i < queue.length; i++) { - var callback = queue[i]; - - do { - ReactCurrentActQueue.didUsePromise = false; - var continuation = callback(false); + context._currentRenderer = null; + context._currentRenderer2 = null; + } - if (continuation !== null) { - if (ReactCurrentActQueue.didUsePromise) { - // The component just suspended. Yield to the main thread in - // case the promise is already resolved. If so, it will ping in - // a microtask and we can resume without unwinding the stack. - queue[i] = callback; - queue.splice(0, i); - return; - } + return context; + } - callback = continuation; - } else { - break; - } - } while (true); - } // We flushed the entire queue. + var Uninitialized = -1; + var Pending = 0; + var Resolved = 1; + var Rejected = 2; - queue.length = 0; - } catch (error) { - // If something throws, leave the remaining callbacks on the queue. - queue.splice(0, i + 1); - throw error; - } finally { - isFlushing = false; - } - } - } - } // Some of our warnings attempt to detect if the `act` call is awaited by - // checking in an asynchronous task. Wait a few microtasks before checking. The - // only reason one isn't sufficient is we want to accommodate the case where an - // `act` call is returned from an async function without first being awaited, - // since that's a somewhat common pattern. If you do this too many times in a - // nested sequence, you might get a warning, but you can always fix by awaiting - // the call. - // - // A macrotask would also work (and is the fallback) but depending on the test - // environment it may cause the warning to fire too late. + function lazyInitializer(payload) { + if (payload._status === Uninitialized) { + var ctor = payload._result; + var thenable = ctor(); // Transition to the next state. + // This might throw either because it's missing or throws. If so, we treat it + // as still uninitialized and try again next time. Which is the same as what + // happens if the ctor or any wrappers processing the ctor throws. This might + // end up fixing it if the resolution was a concurrency bug. - var queueSeveralMicrotasks = - typeof queueMicrotask === "function" - ? function (callback) { - queueMicrotask(function () { - return queueMicrotask(callback); - }); + thenable.then( + function (moduleObject) { + if ( + payload._status === Pending || + payload._status === Uninitialized + ) { + // Transition to the next state. + var resolved = payload; + resolved._status = Resolved; + resolved._result = moduleObject; + } + }, + function (error) { + if ( + payload._status === Pending || + payload._status === Uninitialized + ) { + // Transition to the next state. + var rejected = payload; + rejected._status = Rejected; + rejected._result = error; + } } - : enqueueTask; - - var Children = { - map: mapChildren, - forEach: forEachChildren, - count: countChildren, - toArray: toArray, - only: onlyChild - }; + ); - var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; - var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; - var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"); - var specialPropKeyWarningShown; - var specialPropRefWarningShown; - var didWarnAboutStringRefs; + if (payload._status === Uninitialized) { + // In case, we're still uninitialized, then we're waiting for the thenable + // to resolve. Set it as pending in the meantime. + var pending = payload; + pending._status = Pending; + pending._result = thenable; + } + } - { - didWarnAboutStringRefs = {}; - } + if (payload._status === Resolved) { + var moduleObject = payload._result; - function hasValidRef(config) { - { - if (hasOwnProperty.call(config, "ref")) { - var getter = Object.getOwnPropertyDescriptor(config, "ref").get; + { + if (moduleObject === undefined) { + error( + "lazy: Expected the result of a dynamic imp" + + "ort() call. " + + "Instead received: %s\n\nYour code should look like: \n " + // Break up imports to avoid accidentally parsing them as dependencies. + "const MyComponent = lazy(() => imp" + + "ort('./MyComponent'))\n\n" + + "Did you accidentally put curly braces around the import?", + moduleObject + ); + } + } - if (getter && getter.isReactWarning) { - return false; + { + if (!("default" in moduleObject)) { + error( + "lazy: Expected the result of a dynamic imp" + + "ort() call. " + + "Instead received: %s\n\nYour code should look like: \n " + // Break up imports to avoid accidentally parsing them as dependencies. + "const MyComponent = lazy(() => imp" + + "ort('./MyComponent'))", + moduleObject + ); } } - } - return config.ref !== undefined; + return moduleObject.default; + } else { + throw payload._result; + } } - function hasValidKey(config) { + function lazy(ctor) { + var payload = { + // We use these fields to store the result. + _status: Uninitialized, + _result: ctor + }; + var lazyType = { + $$typeof: REACT_LAZY_TYPE, + _payload: payload, + _init: lazyInitializer + }; + { - if (hasOwnProperty.call(config, "key")) { - var getter = Object.getOwnPropertyDescriptor(config, "key").get; + // In production, this would just set it on the object. + var defaultProps; + var propTypes; // $FlowFixMe[prop-missing] - if (getter && getter.isReactWarning) { - return false; + Object.defineProperties(lazyType, { + defaultProps: { + configurable: true, + get: function () { + return defaultProps; + }, + // $FlowFixMe[missing-local-annot] + set: function (newDefaultProps) { + error( + "React.lazy(...): It is not supported to assign `defaultProps` to " + + "a lazy component import. Either specify them where the component " + + "is defined, or create a wrapping component around it." + ); + + defaultProps = newDefaultProps; // Match production behavior more closely: + // $FlowFixMe[prop-missing] + + Object.defineProperty(lazyType, "defaultProps", { + enumerable: true + }); + } + }, + propTypes: { + configurable: true, + get: function () { + return propTypes; + }, + // $FlowFixMe[missing-local-annot] + set: function (newPropTypes) { + error( + "React.lazy(...): It is not supported to assign `propTypes` to " + + "a lazy component import. Either specify them where the component " + + "is defined, or create a wrapping component around it." + ); + + propTypes = newPropTypes; // Match production behavior more closely: + // $FlowFixMe[prop-missing] + + Object.defineProperty(lazyType, "propTypes", { + enumerable: true + }); + } } - } + }); } - return config.key !== undefined; + return lazyType; } - function warnIfStringRefCannotBeAutoConverted(config, self) { + function forwardRef(render) { { - if ( - typeof config.ref === "string" && - ReactCurrentOwner.current && - self && - ReactCurrentOwner.current.stateNode !== self - ) { - var componentName = getComponentNameFromType( - ReactCurrentOwner.current.type + if (render != null && render.$$typeof === REACT_MEMO_TYPE) { + error( + "forwardRef requires a render function but received a `memo` " + + "component. Instead of forwardRef(memo(...)), use " + + "memo(forwardRef(...))." ); - - if (!didWarnAboutStringRefs[componentName]) { + } else if (typeof render !== "function") { + error( + "forwardRef requires a render function but was given %s.", + render === null ? "null" : typeof render + ); + } else { + if (render.length !== 0 && render.length !== 2) { error( - 'Component "%s" contains the string ref "%s". ' + - "Support for string refs will be removed in a future major release. " + - "This case cannot be automatically converted to an arrow function. " + - "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.current.type), - config.ref + "forwardRef render functions accept exactly two parameters: props and ref. %s", + render.length === 1 + ? "Did you forget to use the ref parameter?" + : "Any additional parameter will be undefined." ); - - didWarnAboutStringRefs[componentName] = true; } } - } - } - - function defineKeyPropWarningGetter(props, displayName) { - { - var warnAboutAccessingKey = function () { - if (!specialPropKeyWarningShown) { - specialPropKeyWarningShown = true; + if (render != null) { + if (render.defaultProps != null) { error( - "%s: `key` is not a prop. Trying to access it will result " + - "in `undefined` being returned. If you need to access the same " + - "value within the child component, you should pass it as a different " + - "prop. (https://reactjs.org/link/special-props)", - displayName + "forwardRef render functions do not support defaultProps. " + + "Did you accidentally pass a React component?" ); } - }; - - warnAboutAccessingKey.isReactWarning = true; - Object.defineProperty(props, "key", { - get: warnAboutAccessingKey, - configurable: true - }); + } } - } - function defineRefPropWarningGetter(props, displayName) { + var elementType = { + $$typeof: REACT_FORWARD_REF_TYPE, + render: render + }; + { - var warnAboutAccessingRef = function () { - if (!specialPropRefWarningShown) { - specialPropRefWarningShown = true; + var ownName; + Object.defineProperty(elementType, "displayName", { + enumerable: false, + configurable: true, + get: function () { + return ownName; + }, + set: function (name) { + ownName = name; // The inner component shouldn't inherit this display name in most cases, + // because the component may be used elsewhere. + // But it's nice for anonymous functions to inherit the name, + // so that our component-stack generation logic will display their frames. + // An anonymous function generally suggests a pattern like: + // React.forwardRef((props, ref) => {...}); + // This kind of inner function is not used elsewhere so the side effect is okay. - error( - "%s: `ref` is not a prop. Trying to access it will result " + - "in `undefined` being returned. If you need to access the same " + - "value within the child component, you should pass it as a different " + - "prop. (https://reactjs.org/link/special-props)", - displayName - ); + if (!render.name && !render.displayName) { + render.displayName = name; + } } - }; - - warnAboutAccessingRef.isReactWarning = true; - Object.defineProperty(props, "ref", { - get: warnAboutAccessingRef, - configurable: true }); } + + return elementType; } - /** - * Factory method to create a new React element. This no longer adheres to - * the class pattern, so do not use new to call it. Also, instanceof check - * will not work. Instead test $$typeof field against Symbol.for('react.element') to check - * if something is a React Element. - * - * @param {*} type - * @param {*} props - * @param {*} key - * @param {string|object} ref - * @param {*} owner - * @param {*} self A *temporary* helper to detect places where `this` is - * different from the `owner` when React.createElement is called, so that we - * can warn. We want to get rid of owner and replace string `ref`s with arrow - * functions, and as long as `this` and owner are the same, there will be no - * change in behavior. - * @param {*} source An annotation object (added by a transpiler or otherwise) - * indicating filename, line number, and/or other information. - * @internal - */ - function ReactElement(type, key, ref, self, source, owner, props) { - var element = { - // This tag allows us to uniquely identify this as a React Element - $$typeof: REACT_ELEMENT_TYPE, - // Built-in properties that belong on the element + function memo(type, compare) { + { + if (!isValidElementType(type)) { + error( + "memo: The first argument must be a component. Instead " + + "received: %s", + type === null ? "null" : typeof type + ); + } + } + + var elementType = { + $$typeof: REACT_MEMO_TYPE, type: type, - key: key, - ref: ref, - props: props, - // Record the component responsible for creating this element. - _owner: owner + compare: compare === undefined ? null : compare }; { - // The validation flag is currently mutative. We put it on - // an external backing store so that we can freeze the whole object. - // This can be replaced with a WeakMap once they are implemented in - // commonly used development environments. - element._store = {}; // To make comparing ReactElements easier for testing purposes, we make - // the validation flag non-enumerable (where possible, which should - // include every environment we run tests in), so the test framework - // ignores it. - - Object.defineProperty(element._store, "validated", { - configurable: false, + var ownName; + Object.defineProperty(elementType, "displayName", { enumerable: false, - writable: true, - value: false - }); // debugInfo contains Server Component debug information. + configurable: true, + get: function () { + return ownName; + }, + set: function (name) { + ownName = name; // The inner component shouldn't inherit this display name in most cases, + // because the component may be used elsewhere. + // But it's nice for anonymous functions to inherit the name, + // so that our component-stack generation logic will display their frames. + // An anonymous function generally suggests a pattern like: + // React.memo((props) => {...}); + // This kind of inner function is not used elsewhere so the side effect is okay. - Object.defineProperty(element, "_debugInfo", { - configurable: false, - enumerable: false, - writable: true, - value: null + if (!type.name && !type.displayName) { + type.displayName = name; + } + } }); - - if (Object.freeze) { - Object.freeze(element.props); - Object.freeze(element); - } } - return element; + return elementType; } - // 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); - } + function noopCache(fn) { + // On the client (i.e. not a Server Components environment) `cache` has + // no caching behavior. We just return the function as-is. + // + // We intend to implement client caching in a future major release. In the + // meantime, it's only exposed as an API so that Shared Components can use + // per-request caching on the server without breaking on the client. But it + // does mean they need to be aware of the behavioral difference. + // + // The rest of the behavior is the same as the server implementation — it + // returns a new reference, extra properties like `displayName` are not + // preserved, the length of the new function is 0, etc. That way apps can't + // accidentally depend on those details. + return function () { + // $FlowFixMe[incompatible-call]: We don't want to use rest arguments since we transpile the code. + return fn.apply(null, arguments); + }; } - var didWarnAboutKeySpread = {}; - /** - * https://github.com/reactjs/rfcs/pull/107 - * @param {*} type - * @param {object} props - * @param {string} key - */ - - 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 = ""; + var cache = noopCache; - 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."; - } + function resolveDispatcher() { + var dispatcher = ReactCurrentDispatcher$1.current; - var sourceInfo = getSourceInfoErrorAddendum(source); + { + if (dispatcher === null) { + error( + "Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for" + + " one of the following reasons:\n" + + "1. You might have mismatching versions of React and the renderer (such as React DOM)\n" + + "2. You might be breaking the Rules of Hooks\n" + + "3. You might have more than one copy of React in the same app\n" + + "See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem." + ); + } + } // Will result in a null access error if accessed outside render phase. We + // intentionally don't throw our own error because this is in a hot path. + // Also helps ensure this is inlined. - if (sourceInfo) { - info += sourceInfo; - } else { - info += getDeclarationErrorAddendum(); - } + return dispatcher; + } - var typeString; + function getCacheSignal() { + var dispatcher = ReactCurrentCache.current; - 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; - } + if (!dispatcher) { + // If we have no cache to associate with this call, then we don't know + // its lifetime. We abort early since that's safer than letting it live + // for ever. Unlike just caching which can be a functional noop outside + // of React, these should generally always be associated with some React + // render but we're not limiting quite as much as making it a Hook. + // It's safer than erroring early at runtime. + var controller = new AbortController(); + var reason = new Error( + "This CacheSignal was requested outside React which means that it is " + + "immediately aborted." + ); + controller.abort(reason); + return controller.signal; + } - 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; + return dispatcher.getCacheSignal(); + } + function getCacheForType(resourceType) { + var dispatcher = ReactCurrentCache.current; - if (children !== undefined) { - if (isStaticChildren) { - if (isArray(children)) { - for (var i = 0; i < children.length; i++) { - validateChildKeys(children[i], type); - } + if (!dispatcher) { + // If there is no dispatcher, then we treat this as not being cached. + return resourceType(); + } - 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. + return dispatcher.getCacheForType(resourceType); + } + function useContext(Context) { + var dispatcher = resolveDispatcher(); - 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 (Context.$$typeof === REACT_CONSUMER_TYPE) { + error( + "Calling useContext(Context.Consumer) is not supported and will cause bugs. " + + "Did you mean to call useContext(Context) instead?" + ); + } + } - if (!didWarnAboutKeySpread[componentName + beforeExample]) { - var afterExample = - keys.length > 0 ? "{" + keys.join(": ..., ") + ": ...}" : "{}"; + return dispatcher.useContext(Context); + } + function useState(initialState) { + var dispatcher = resolveDispatcher(); + return dispatcher.useState(initialState); + } + function useReducer(reducer, initialArg, init) { + var dispatcher = resolveDispatcher(); + return dispatcher.useReducer(reducer, initialArg, init); + } + function useRef(initialValue) { + var dispatcher = resolveDispatcher(); + return dispatcher.useRef(initialValue); + } + function useEffect(create, deps) { + var dispatcher = resolveDispatcher(); + return dispatcher.useEffect(create, deps); + } + function useInsertionEffect(create, deps) { + var dispatcher = resolveDispatcher(); + return dispatcher.useInsertionEffect(create, deps); + } + function useLayoutEffect(create, deps) { + var dispatcher = resolveDispatcher(); + return dispatcher.useLayoutEffect(create, deps); + } + function useCallback(callback, deps) { + var dispatcher = resolveDispatcher(); + return dispatcher.useCallback(callback, deps); + } + function useMemo(create, deps) { + var dispatcher = resolveDispatcher(); + return dispatcher.useMemo(create, deps); + } + function useImperativeHandle(ref, create, deps) { + var dispatcher = resolveDispatcher(); + return dispatcher.useImperativeHandle(ref, create, deps); + } + function useDebugValue(value, formatterFn) { + { + var dispatcher = resolveDispatcher(); + return dispatcher.useDebugValue(value, formatterFn); + } + } + function useTransition() { + var dispatcher = resolveDispatcher(); + return dispatcher.useTransition(); + } + function useDeferredValue(value, initialValue) { + var dispatcher = resolveDispatcher(); + return dispatcher.useDeferredValue(value, initialValue); + } + function useId() { + var dispatcher = resolveDispatcher(); + return dispatcher.useId(); + } + function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) { + var dispatcher = resolveDispatcher(); + return dispatcher.useSyncExternalStore( + subscribe, + getSnapshot, + getServerSnapshot + ); + } + function useCacheRefresh() { + var dispatcher = resolveDispatcher(); // $FlowFixMe[not-a-function] This is unstable, thus optional - 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 - ); + return dispatcher.useCacheRefresh(); + } + function use(usable) { + var dispatcher = resolveDispatcher(); + return dispatcher.use(usable); + } + function useMemoCache(size) { + var dispatcher = resolveDispatcher(); // $FlowFixMe[not-a-function] This is unstable, thus optional - didWarnAboutKeySpread[componentName + beforeExample] = true; - } - } + return dispatcher.useMemoCache(size); + } + function useEffectEvent(callback) { + var dispatcher = resolveDispatcher(); // $FlowFixMe[not-a-function] This is unstable, thus optional - var propName; // Reserved names are extracted + return dispatcher.useEffectEvent(callback); + } + function useOptimistic(passthrough, reducer) { + var dispatcher = resolveDispatcher(); // $FlowFixMe[not-a-function] This is unstable, thus optional - var props = {}; - var key = null; - var ref = null; // Currently, key can be spread in as a prop. This causes a potential - // issue if key is also explicitly declared (ie.
- // or
). We want to deprecate key spread, - // but as an intermediary step, we will use jsxDEV for everything except - //
, because we aren't currently able to tell if - // key is explicitly declared to be undefined or not. + return dispatcher.useOptimistic(passthrough, reducer); + } - if (maybeKey !== undefined) { - { - checkKeyStringCoercion(maybeKey); - } + function startTransition(scope, options) { + var prevTransition = ReactCurrentBatchConfig.transition; // Each renderer registers a callback to receive the return value of + // the scope function. This is used to implement async actions. - key = "" + maybeKey; - } + var callbacks = new Set(); + var transition = { + _callbacks: callbacks + }; + ReactCurrentBatchConfig.transition = transition; + var currentTransition = ReactCurrentBatchConfig.transition; - if (hasValidKey(config)) { - { - checkKeyStringCoercion(config.key); - } + { + ReactCurrentBatchConfig.transition._updatedFibers = new Set(); + } - key = "" + config.key; + if (enableTransitionTracing) { + if (options !== undefined && options.name !== undefined) { + // $FlowFixMe[incompatible-use] found when upgrading Flow + ReactCurrentBatchConfig.transition.name = options.name; // $FlowFixMe[incompatible-use] found when upgrading Flow + + ReactCurrentBatchConfig.transition.startTime = -1; } + } - if (hasValidRef(config)) { - ref = config.ref; - warnIfStringRefCannotBeAutoConverted(config, self); - } // Remaining properties are added to a new props object + { + try { + var returnValue = scope(); - for (propName in config) { if ( - hasOwnProperty.call(config, propName) && // Skip over reserved prop names - propName !== "key" && // TODO: `ref` will no longer be reserved in the next major - propName !== "ref" + typeof returnValue === "object" && + returnValue !== null && + typeof returnValue.then === "function" ) { - props[propName] = config[propName]; - } - } // Resolve default props - - if (type && type.defaultProps) { - var defaultProps = type.defaultProps; - - for (propName in defaultProps) { - if (props[propName] === undefined) { - props[propName] = defaultProps[propName]; - } + callbacks.forEach(function (callback) { + return callback(currentTransition, returnValue); + }); + returnValue.then(noop, onError); } + } catch (error) { + onError(error); + } finally { + warnAboutTransitionSubscriptions(prevTransition, currentTransition); + ReactCurrentBatchConfig.transition = prevTransition; } + } + } - if (key || ref) { - var displayName = - typeof type === "function" - ? type.displayName || type.name || "Unknown" - : type; + function warnAboutTransitionSubscriptions( + prevTransition, + currentTransition + ) { + { + if (prevTransition === null && currentTransition._updatedFibers) { + var updatedFibersCount = currentTransition._updatedFibers.size; - if (key) { - defineKeyPropWarningGetter(props, displayName); - } + currentTransition._updatedFibers.clear(); - if (ref) { - defineRefPropWarningGetter(props, displayName); + if (updatedFibersCount > 10) { + warn( + "Detected a large number of updates inside startTransition. " + + "If this is due to a subscription please re-write it to use React provided hooks. " + + "Otherwise concurrent mode guarantees are off the table." + ); } } + } + } - var element = ReactElement( - type, - key, - ref, - self, - source, - ReactCurrentOwner.current, - props - ); + function noop() {} // Use reportError, if it exists. Otherwise console.error. This is the same as + // the default for onRecoverableError. - if (type === REACT_FRAGMENT_TYPE) { - validateFragmentProps(element); - } else { - validatePropTypes(element); - } + var onError = + typeof reportError === "function" // In modern browsers, reportError will dispatch an error event, + ? // emulating an uncaught JavaScript error. + reportError + : function (error) { + // In older browsers and test environments, fallback to console.error. + // eslint-disable-next-line react-internal/no-production-logging + console["error"](error); + }; - return element; - } - } + var didWarnAboutMessageChannel = false; + var enqueueTaskImpl = null; + function enqueueTask(task) { + if (enqueueTaskImpl === null) { + try { + // read require off the module object to get around the bundlers. + // we don't want them to detect a require and bundle a Node polyfill. + var requireString = ("require" + Math.random()).slice(0, 7); + var nodeRequire = module && module[requireString]; // assuming we're in node, let's try to get node's + // version of setImmediate, bypassing fake timers if any. - function getDeclarationErrorAddendum() { - { - if (ReactCurrentOwner.current) { - var name = getComponentNameFromType(ReactCurrentOwner.current.type); + enqueueTaskImpl = nodeRequire.call(module, "timers").setImmediate; + } catch (_err) { + // we're in a browser + // we can't use regular timers because they may still be faked + // so we try MessageChannel+postMessage instead + enqueueTaskImpl = function (callback) { + { + if (didWarnAboutMessageChannel === false) { + didWarnAboutMessageChannel = true; - if (name) { - return "\n\nCheck the render method of `" + name + "`."; - } - } + if (typeof MessageChannel === "undefined") { + error( + "This browser does not have a MessageChannel implementation, " + + "so enqueuing tasks via await act(async () => ...) will fail. " + + "Please file an issue at https://github.com/facebook/react/issues " + + "if you encounter this warning." + ); + } + } + } - return ""; + var channel = new MessageChannel(); + channel.port1.onmessage = callback; + channel.port2.postMessage(undefined); + }; + } } + + return enqueueTaskImpl(task); } - function getSourceInfoErrorAddendum(source) { - { - if (source !== undefined) { - var fileName = source.fileName.replace(/^.*[\\\/]/, ""); - var lineNumber = source.lineNumber; - return "\n\nCheck your code at " + fileName + ":" + lineNumber + "."; - } + // number of `act` scopes on the stack. - return ""; - } - } - /** - * 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 actScopeDepth = 0; // We only warn the first time you neglect to await an async `act` scope. - function validateChildKeys(node, parentType) { + var didWarnNoAwaitAct = false; + function act(callback) { { - if (typeof node !== "object" || !node) { - return; - } + // When ReactCurrentActQueue.current is not null, it signals to React that + // we're currently inside an `act` scope. React will push all its tasks to + // this queue instead of scheduling them with platform APIs. + // + // We set this to an empty array when we first enter an `act` scope, and + // only unset it once we've left the outermost `act` scope — remember that + // `act` calls can be nested. + // + // If we're already inside an `act` scope, reuse the existing queue. + var prevIsBatchingLegacy = ReactCurrentActQueue.isBatchingLegacy; + var prevActQueue = ReactCurrentActQueue.current; + var prevActScopeDepth = actScopeDepth; + actScopeDepth++; + var queue = (ReactCurrentActQueue.current = + prevActQueue !== null ? prevActQueue : []); // Used to reproduce behavior of `batchedUpdates` in legacy mode. Only + // set to `true` while the given callback is executed, not for updates + // triggered during an async event, because this is how the legacy + // implementation of `act` behaved. - if (node.$$typeof === REACT_CLIENT_REFERENCE); - else if (isArray(node)) { - for (var i = 0; i < node.length; i++) { - var child = node[i]; + ReactCurrentActQueue.isBatchingLegacy = true; + var result; // This tracks whether the `act` call is awaited. In certain cases, not + // awaiting it is a mistake, so we will detect that and warn. - 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); + var didAwaitActCall = false; - 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; + try { + // Reset this to `false` right before entering the React work loop. The + // only place we ever read this fields is just below, right after running + // the callback. So we don't need to reset after the callback runs. + ReactCurrentActQueue.didScheduleLegacyUpdate = false; + result = callback(); + var didScheduleLegacyUpdate = + ReactCurrentActQueue.didScheduleLegacyUpdate; // Replicate behavior of original `act` implementation in legacy mode, + // which flushed updates immediately after the scope function exits, even + // if it's an async function. - 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 - */ + if (!prevIsBatchingLegacy && didScheduleLegacyUpdate) { + flushActQueue(queue); + } // `isBatchingLegacy` gets reset using the regular stack, not the async + // one used to track `act` scopes. Why, you may be wondering? Because + // that's how it worked before version 18. Yes, it's confusing! We should + // delete legacy mode!! - 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 - * reordered. All children that haven't already been validated are required to - * have a "key" property assigned to it. Error statuses are cached so a warning - * will only be shown once. - * - * @internal - * @param {ReactElement} element Element that requires a key. - * @param {*} parentType element's parent's type. - */ + ReactCurrentActQueue.isBatchingLegacy = prevIsBatchingLegacy; + } catch (error) { + // `isBatchingLegacy` gets reset using the regular stack, not the async + // one used to track `act` scopes. Why, you may be wondering? Because + // that's how it worked before version 18. Yes, it's confusing! We should + // delete legacy mode!! + ReactCurrentActQueue.isBatchingLegacy = prevIsBatchingLegacy; + popActScope(prevActQueue, prevActScopeDepth); + throw error; + } - function validateExplicitKey(element, parentType) { - { if ( - !element._store || - element._store.validated || - element.key != null + result !== null && + typeof result === "object" && // $FlowFixMe[method-unbinding] + typeof result.then === "function" ) { - return; - } + // A promise/thenable was returned from the callback. Wait for it to + // resolve before flushing the queue. + // + // If `act` were implemented as an async function, this whole block could + // be a single `await` call. That's really the only difference between + // this branch and the next one. + var thenable = result; // Warn if the an `act` call with an async scope is not awaited. In a + // future release, consider making this an error. - element._store.validated = true; - var currentComponentErrorInfo = - getCurrentComponentErrorInfo(parentType); + queueSeveralMicrotasks(function () { + if (!didAwaitActCall && !didWarnNoAwaitAct) { + didWarnNoAwaitAct = true; - if (ownerHasKeyUseWarning[currentComponentErrorInfo]) { - return; - } + error( + "You called act(async () => ...) without await. " + + "This could lead to unexpected testing behaviour, " + + "interleaving multiple act calls and mixing their " + + "scopes. " + + "You should - await act(async () => ...);" + ); + } + }); + return { + then: function (resolve, reject) { + didAwaitActCall = true; + thenable.then( + function (returnValue) { + popActScope(prevActQueue, prevActScopeDepth); - ownerHasKeyUseWarning[currentComponentErrorInfo] = true; // Usually the current owner is the offender, but if it accepts children as a - // property, it may be the creator of the child that's responsible for - // assigning it a key. + if (prevActScopeDepth === 0) { + // We're exiting the outermost `act` scope. Flush the queue. + try { + flushActQueue(queue); + enqueueTask(function () { + return ( + // Recursively flush tasks scheduled by a microtask. + recursivelyFlushAsyncActWork( + returnValue, + resolve, + reject + ) + ); + }); + } catch (error) { + // `thenable` might not be a real promise, and `flushActQueue` + // might throw, so we need to wrap `flushActQueue` in a + // try/catch. + reject(error); + } + } else { + resolve(returnValue); + } + }, + function (error) { + popActScope(prevActQueue, prevActScopeDepth); + reject(error); + } + ); + } + }; + } else { + var returnValue = result; // The callback is not an async function. Exit the current + // scope immediately. - var childOwner = ""; + popActScope(prevActQueue, prevActScopeDepth); - if ( - element && - element._owner && - element._owner !== ReactCurrentOwner.current - ) { - // Give the component that originally created this child. - childOwner = - " It was passed a child from " + - getComponentNameFromType(element._owner.type) + - "."; - } + if (prevActScopeDepth === 0) { + // We're exiting the outermost `act` scope. Flush the queue. + flushActQueue(queue); // If the queue is not empty, it implies that we intentionally yielded + // to the main thread, because something suspended. We will continue + // in an asynchronous task. + // + // Warn if something suspends but the `act` call is not awaited. + // In a future release, consider making this an error. + + if (queue.length !== 0) { + queueSeveralMicrotasks(function () { + if (!didAwaitActCall && !didWarnNoAwaitAct) { + didWarnNoAwaitAct = true; - setCurrentlyValidatingElement(element); + error( + "A component suspended inside an `act` scope, but the " + + "`act` call was not awaited. When testing React " + + "components that depend on asynchronous data, you must " + + "await the result:\n\n" + + "await act(() => ...)" + ); + } + }); + } // Like many things in this module, this is next part is confusing. + // + // We do not currently require every `act` call that is passed a + // callback to be awaited, through arguably we should. Since this + // callback was synchronous, we need to exit the current scope before + // returning. + // + // However, if thenable we're about to return *is* awaited, we'll + // immediately restore the current scope. So it shouldn't observable. + // + // This doesn't affect the case where the scope callback is async, + // because we always require those calls to be awaited. + // + // TODO: In a future version, consider always requiring all `act` calls + // to be awaited, regardless of whether the callback is sync or async. - error( - 'Each child in a list should have a unique "key" prop.' + - "%s%s See https://reactjs.org/link/warning-keys for more information.", - currentComponentErrorInfo, - childOwner - ); + ReactCurrentActQueue.current = null; + } - setCurrentlyValidatingElement(null); - } - } + return { + then: function (resolve, reject) { + didAwaitActCall = true; - function setCurrentlyValidatingElement(element) { - { - if (element) { - var owner = element._owner; - var stack = describeUnknownElementTypeFrameInDEV( - element.type, - owner ? owner.type : null - ); - ReactDebugCurrentFrame.setExtraStackFrame(stack); - } else { - ReactDebugCurrentFrame.setExtraStackFrame(null); + if (prevActScopeDepth === 0) { + // If the `act` call is awaited, restore the queue we were + // using before (see long comment above) so we can flush it. + ReactCurrentActQueue.current = queue; + enqueueTask(function () { + return ( + // Recursively flush tasks scheduled by a microtask. + recursivelyFlushAsyncActWork(returnValue, resolve, reject) + ); + }); + } else { + resolve(returnValue); + } + } + }; } } } - function getCurrentComponentErrorInfo(parentType) { + function popActScope(prevActQueue, prevActScopeDepth) { { - var info = getDeclarationErrorAddendum(); - - if (!info) { - var parentName = getComponentNameFromType(parentType); - - if (parentName) { - info = - "\n\nCheck the top-level render call using <" + parentName + ">."; - } + if (prevActScopeDepth !== actScopeDepth - 1) { + error( + "You seem to have overlapping act() calls, this is not supported. " + + "Be sure to await previous act() calls before making a new one. " + ); } - return info; + actScopeDepth = prevActScopeDepth; } } - /** - * Given a fragment, validate that it can only be provided with fragment props - * @param {ReactElement} fragment - */ - function validateFragmentProps(fragment) { + function recursivelyFlushAsyncActWork(returnValue, resolve, reject) { { - 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); + // Check if any tasks were scheduled asynchronously. + var queue = ReactCurrentActQueue.current; - error( - "Invalid prop `%s` supplied to `React.Fragment`. " + - "React.Fragment can only have `key` and `children` props.", - key - ); + if (queue !== null) { + if (queue.length !== 0) { + // Async tasks were scheduled, mostly likely in a microtask. + // Keep flushing until there are no more. + try { + flushActQueue(queue); // The work we just performed may have schedule additional async + // tasks. Wait a macrotask and check again. - setCurrentlyValidatingElement(null); - break; + enqueueTask(function () { + return recursivelyFlushAsyncActWork( + returnValue, + resolve, + reject + ); + }); + } catch (error) { + // Leave remaining tasks on the queue if something throws. + reject(error); + } + } else { + // The queue is empty. We can finish. + ReactCurrentActQueue.current = null; + resolve(returnValue); } - } - - if (fragment.ref !== null) { - setCurrentlyValidatingElement(fragment); - - error("Invalid attribute `ref` supplied to `React.Fragment`."); - - setCurrentlyValidatingElement(null); + } else { + resolve(returnValue); } } } - var propTypesMisspellWarningShown = false; - /** - * Given an element, validate that its props follow the propTypes definition, - * provided by the type. - * - * @param {ReactElement} element - */ + var isFlushing = false; - function validatePropTypes(element) { + function flushActQueue(queue) { { - var type = element.type; - - if (type === null || type === undefined || typeof type === "string") { - return; - } - - if (type.$$typeof === REACT_CLIENT_REFERENCE) { - return; - } - - var propTypes; + if (!isFlushing) { + // Prevent re-entrance. + isFlushing = true; + var i = 0; - if (typeof type === "function") { - propTypes = type.propTypes; - } else if ( - typeof type === "object" && - (type.$$typeof === REACT_FORWARD_REF_TYPE || // Note: Memo only checks outer props here. - // Inner props are checked in the reconciler. - type.$$typeof === REACT_MEMO_TYPE) - ) { - propTypes = type.propTypes; - } else { - return; - } + try { + for (; i < queue.length; i++) { + var callback = queue[i]; - if (propTypes) { - // Intentionally inside to avoid triggering lazy initializers: - var name = getComponentNameFromType(type); - checkPropTypes(propTypes, element.props, "prop", name, element); - } else if ( - type.PropTypes !== undefined && - !propTypesMisspellWarningShown - ) { - propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers: + do { + ReactCurrentActQueue.didUsePromise = false; + var continuation = callback(false); - var _name = getComponentNameFromType(type); + if (continuation !== null) { + if (ReactCurrentActQueue.didUsePromise) { + // The component just suspended. Yield to the main thread in + // case the promise is already resolved. If so, it will ping in + // a microtask and we can resume without unwinding the stack. + queue[i] = callback; + queue.splice(0, i); + return; + } - error( - "Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", - _name || "Unknown" - ); - } + callback = continuation; + } else { + break; + } + } while (true); + } // We flushed the entire queue. - if ( - typeof type.getDefaultProps === "function" && - !type.getDefaultProps.isReactClassApproved - ) { - error( - "getDefaultProps is only used on classic React.createClass " + - "definitions. Use a static property named `defaultProps` instead." - ); + queue.length = 0; + } catch (error) { + // If something throws, leave the remaining callbacks on the queue. + queue.splice(0, i + 1); + throw error; + } finally { + isFlushing = false; + } } } - } + } // Some of our warnings attempt to detect if the `act` call is awaited by + // checking in an asynchronous task. Wait a few microtasks before checking. The + // only reason one isn't sufficient is we want to accommodate the case where an + // `act` call is returned from an async function without first being awaited, + // since that's a somewhat common pattern. If you do this too many times in a + // nested sequence, you might get a warning, but you can always fix by awaiting + // the call. + // + // A macrotask would also work (and is the fallback) but depending on the test + // environment it may cause the warning to fire too late. + + var queueSeveralMicrotasks = + typeof queueMicrotask === "function" + ? function (callback) { + queueMicrotask(function () { + return queueMicrotask(callback); + }); + } + : enqueueTask; + + var Children = { + map: mapChildren, + forEach: forEachChildren, + count: countChildren, + toArray: toArray, + only: onlyChild + }; 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 @@ -4179,7 +3723,7 @@ if (__DEV__) { exports.createRef = createRef; exports.experimental_useEffectEvent = useEffectEvent; exports.forwardRef = forwardRef; - exports.isValidElement = isValidElement$1; + exports.isValidElement = isValidElement; exports.jsx = jsx; exports.jsxDEV = jsxDEV; exports.jsxs = jsxs; diff --git a/compiled/facebook-www/React-dev.modern.js b/compiled/facebook-www/React-dev.modern.js index 38db504bbfd08..e61330073a11e 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-2cf5f916"; + var ReactVersion = "18.3.0-www-modern-89ee23d0"; // ATTENTION // When adding new symbols to this file, @@ -495,7 +495,7 @@ if (__DEV__) { return type.displayName || "Context"; } - var REACT_CLIENT_REFERENCE$3 = 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) { @@ -504,7 +504,7 @@ if (__DEV__) { } if (typeof type === "function") { - if (type.$$typeof === REACT_CLIENT_REFERENCE$3) { + if (type.$$typeof === REACT_CLIENT_REFERENCE$2) { // TODO: Create a convention for naming client references with debug info. return null; } @@ -612,8 +612,38 @@ if (__DEV__) { return null; } - // $FlowFixMe[method-unbinding] - var hasOwnProperty = Object.prototype.hasOwnProperty; + /** + * Keeps track of the current dispatcher. + */ + var ReactCurrentDispatcher$1 = { + current: null + }; + + /** + * Keeps track of the current Cache dispatcher. + */ + var ReactCurrentCache = { + current: null + }; + + /** + * Keeps track of the current batch's configuration such as how long an update + * should suspend for if it needs to. + */ + var ReactCurrentBatchConfig = { + transition: null + }; + + var ReactCurrentActQueue = { + current: null, + // Used to reproduce behavior of `batchedUpdates` in legacy mode. + isBatchingLegacy: false, + didScheduleLegacyUpdate: false, + // Tracks whether something called `use` during the current batch of work. + // Determines whether we should yield to microtasks to unwrap already resolved + // promises without suspending. + didUsePromise: false + }; /** * Keeps track of the current owner. @@ -629,948 +659,527 @@ if (__DEV__) { current: null }; - var specialPropKeyWarningShown$1, - specialPropRefWarningShown$1, - didWarnAboutStringRefs$1; + var ReactDebugCurrentFrame$2 = {}; + var currentExtraStackFrame = null; { - didWarnAboutStringRefs$1 = {}; - } + ReactDebugCurrentFrame$2.setExtraStackFrame = function (stack) { + { + currentExtraStackFrame = stack; + } + }; // Stack implementation injected by the current renderer. - function hasValidRef$1(config) { - { - if (hasOwnProperty.call(config, "ref")) { - var getter = Object.getOwnPropertyDescriptor(config, "ref").get; + ReactDebugCurrentFrame$2.getCurrentStack = null; - if (getter && getter.isReactWarning) { - return false; - } - } - } + ReactDebugCurrentFrame$2.getStackAddendum = function () { + var stack = ""; // Add an extra top frame while an element is being validated - return config.ref !== undefined; - } + if (currentExtraStackFrame) { + stack += currentExtraStackFrame; + } // Delegate to the injected renderer-specific implementation - function hasValidKey$1(config) { - { - if (hasOwnProperty.call(config, "key")) { - var getter = Object.getOwnPropertyDescriptor(config, "key").get; + var impl = ReactDebugCurrentFrame$2.getCurrentStack; - if (getter && getter.isReactWarning) { - return false; - } + if (impl) { + stack += impl() || ""; } - } - return config.key !== undefined; + return stack; + }; } - function defineKeyPropWarningGetter$1(props, displayName) { - var warnAboutAccessingKey = function () { - { - if (!specialPropKeyWarningShown$1) { - specialPropKeyWarningShown$1 = true; - - error( - "%s: `key` is not a prop. Trying to access it will result " + - "in `undefined` being returned. If you need to access the same " + - "value within the child component, you should pass it as a different " + - "prop. (https://reactjs.org/link/special-props)", - displayName - ); - } - } - }; + var ReactSharedInternals = { + ReactCurrentDispatcher: ReactCurrentDispatcher$1, + ReactCurrentCache: ReactCurrentCache, + ReactCurrentBatchConfig: ReactCurrentBatchConfig, + ReactCurrentOwner: ReactCurrentOwner$1 + }; - warnAboutAccessingKey.isReactWarning = true; - Object.defineProperty(props, "key", { - get: warnAboutAccessingKey, - configurable: true - }); + { + ReactSharedInternals.ReactDebugCurrentFrame = ReactDebugCurrentFrame$2; + ReactSharedInternals.ReactCurrentActQueue = ReactCurrentActQueue; } - function defineRefPropWarningGetter$1(props, displayName) { - var warnAboutAccessingRef = function () { - { - if (!specialPropRefWarningShown$1) { - specialPropRefWarningShown$1 = true; + // $FlowFixMe[method-unbinding] + var hasOwnProperty = Object.prototype.hasOwnProperty; - error( - "%s: `ref` is not a prop. Trying to access it will result " + - "in `undefined` being returned. If you need to access the same " + - "value within the child component, you should pass it as a different " + - "prop. (https://reactjs.org/link/special-props)", - displayName - ); - } - } - }; + 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). - warnAboutAccessingRef.isReactWarning = true; - Object.defineProperty(props, "ref", { - get: warnAboutAccessingRef, - configurable: true - }); - } + 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; + } - function warnIfStringRefCannotBeAutoConverted$1(config) { - { + if (typeof type === "object" && type !== null) { if ( - typeof config.ref === "string" && - ReactCurrentOwner$1.current && - config.__self && - ReactCurrentOwner$1.current.stateNode !== config.__self + 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 ) { - var componentName = getComponentNameFromType( - ReactCurrentOwner$1.current.type - ); - - if (!didWarnAboutStringRefs$1[componentName]) { - error( - 'Component "%s" contains the string ref "%s". ' + - "Support for string refs will be removed in a future major release. " + - "This case cannot be automatically converted to an arrow function. " + - "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", - componentName, - config.ref - ); - - didWarnAboutStringRefs$1[componentName] = true; - } + return true; } } + + return false; } - /** - * Factory method to create a new React element. This no longer adheres to - * the class pattern, so do not use new to call it. Also, instanceof check - * will not work. Instead test $$typeof field against Symbol.for('react.element') to check - * if something is a React Element. - * - * @param {*} type - * @param {*} props - * @param {*} key - * @param {string|object} ref - * @param {*} owner - * @param {*} self A *temporary* helper to detect places where `this` is - * different from the `owner` when React.createElement is called, so that we - * can warn. We want to get rid of owner and replace string `ref`s with arrow - * functions, and as long as `this` and owner are the same, there will be no - * change in behavior. - * @param {*} source An annotation object (added by a transpiler or otherwise) - * indicating filename, line number, and/or other information. - * @internal - */ - function ReactElement$1(type, key, ref, owner, props) { - var element = { - // This tag allows us to uniquely identify this as a React Element - $$typeof: REACT_ELEMENT_TYPE, - // Built-in properties that belong on the element - type: type, - key: key, - ref: ref, - props: props, - // Record the component responsible for creating this element. - _owner: owner - }; + // Helpers to patch console.logs to avoid logging during side-effect free + // replaying on render function. This currently only patches the object + // lazily which won't cover if the log function was extracted eagerly. + // We could also eagerly patch the method. + var disabledDepth = 0; + var prevLog; + var prevInfo; + var prevWarn; + var prevError; + var prevGroup; + var prevGroupCollapsed; + var prevGroupEnd; - { - // The validation flag is currently mutative. We put it on - // an external backing store so that we can freeze the whole object. - // This can be replaced with a WeakMap once they are implemented in - // commonly used development environments. - element._store = {}; // To make comparing ReactElements easier for testing purposes, we make - // the validation flag non-enumerable (where possible, which should - // include every environment we run tests in), so the test framework - // ignores it. + function disabledLog() {} - Object.defineProperty(element._store, "validated", { - configurable: false, - enumerable: false, - writable: true, - value: false - }); // debugInfo contains Server Component debug information. + disabledLog.__reactDisabledLog = true; + function disableLogs() { + { + if (disabledDepth === 0) { + /* eslint-disable react-internal/no-production-logging */ + prevLog = console.log; + prevInfo = console.info; + prevWarn = console.warn; + prevError = console.error; + prevGroup = console.group; + prevGroupCollapsed = console.groupCollapsed; + prevGroupEnd = console.groupEnd; // https://github.com/facebook/react/issues/19099 - Object.defineProperty(element, "_debugInfo", { - configurable: false, - enumerable: false, - writable: true, - value: null - }); + var props = { + configurable: true, + enumerable: true, + value: disabledLog, + writable: true + }; // $FlowFixMe[cannot-write] Flow thinks console is immutable. - if (Object.freeze) { - Object.freeze(element.props); - Object.freeze(element); + Object.defineProperties(console, { + info: props, + log: props, + warn: props, + error: props, + group: props, + groupCollapsed: props, + groupEnd: props + }); + /* eslint-enable react-internal/no-production-logging */ } - } - return element; + disabledDepth++; + } } - /** - * Create and return a new ReactElement of the given type. - * See https://reactjs.org/docs/react-api.html#createelement - */ - - function createElement$1(type, config, children) { - var propName; // Reserved names are extracted - - var props = {}; - var key = null; - var ref = null; - - if (config != null) { - if (hasValidRef$1(config)) { - ref = config.ref; - - { - warnIfStringRefCannotBeAutoConverted$1(config); - } - } - - if (hasValidKey$1(config)) { - { - checkKeyStringCoercion(config.key); - } - - key = "" + config.key; - } // Remaining properties are added to a new props object - - for (propName in config) { - if ( - hasOwnProperty.call(config, propName) && // Skip over reserved prop names - propName !== "key" && // TODO: `ref` will no longer be reserved in the next major - propName !== "ref" && // ...and maybe these, too, though we currently rely on them for - // warnings and debug information in dev. Need to decide if we're OK - // with dropping them. In the jsx() runtime it's not an issue because - // the data gets passed as separate arguments instead of props, but - // it would be nice to stop relying on them entirely so we can drop - // them from the internal Fiber field. - propName !== "__self" && - propName !== "__source" - ) { - props[propName] = config[propName]; - } - } - } // Children can be more than one argument, and those are transferred onto - // the newly allocated props object. - - var childrenLength = arguments.length - 2; - - if (childrenLength === 1) { - props.children = children; - } else if (childrenLength > 1) { - var childArray = Array(childrenLength); + function reenableLogs() { + { + disabledDepth--; - for (var i = 0; i < childrenLength; i++) { - childArray[i] = arguments[i + 2]; - } + if (disabledDepth === 0) { + /* eslint-disable react-internal/no-production-logging */ + var props = { + configurable: true, + enumerable: true, + writable: true + }; // $FlowFixMe[cannot-write] Flow thinks console is immutable. - { - if (Object.freeze) { - Object.freeze(childArray); - } + Object.defineProperties(console, { + log: assign({}, props, { + value: prevLog + }), + info: assign({}, props, { + value: prevInfo + }), + warn: assign({}, props, { + value: prevWarn + }), + error: assign({}, props, { + value: prevError + }), + group: assign({}, props, { + value: prevGroup + }), + groupCollapsed: assign({}, props, { + value: prevGroupCollapsed + }), + groupEnd: assign({}, props, { + value: prevGroupEnd + }) + }); + /* eslint-enable react-internal/no-production-logging */ } - props.children = childArray; - } // Resolve default props - - if (type && type.defaultProps) { - var defaultProps = type.defaultProps; - - for (propName in defaultProps) { - if (props[propName] === undefined) { - props[propName] = defaultProps[propName]; - } + if (disabledDepth < 0) { + error( + "disabledDepth fell below zero. " + + "This is a bug in React. Please file an issue." + ); } } + } + var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher; + var prefix; + function describeBuiltInComponentFrame(name, ownerFn) { { - if (key || ref) { - var displayName = - typeof type === "function" - ? type.displayName || type.name || "Unknown" - : type; - - if (key) { - defineKeyPropWarningGetter$1(props, displayName); + if (prefix === undefined) { + // Extract the VM specific prefix used by each line. + try { + throw Error(); + } catch (x) { + var match = x.stack.trim().match(/\n( *(at )?)/); + prefix = (match && match[1]) || ""; } + } // We use the prefix to ensure our stacks line up with native stack frames. - if (ref) { - defineRefPropWarningGetter$1(props, displayName); - } - } + return "\n" + prefix + name; } - - return ReactElement$1(type, key, ref, ReactCurrentOwner$1.current, props); } - function cloneAndReplaceKey(oldElement, newKey) { - var newElement = ReactElement$1( - oldElement.type, - newKey, - oldElement.ref, - oldElement._owner, - oldElement.props - ); - return newElement; + var reentry = false; + var componentFrameCache; + + { + var PossiblyWeakMap = typeof WeakMap === "function" ? WeakMap : Map; + componentFrameCache = new PossiblyWeakMap(); } /** - * Clone and return a new ReactElement using element as the starting point. - * See https://reactjs.org/docs/react-api.html#cloneelement + * Leverages native browser/VM stack frames to get proper details (e.g. + * filename, line + col number) for a single component in a component stack. We + * do this by: + * (1) throwing and catching an error in the function - this will be our + * control error. + * (2) calling the component which will eventually throw an error that we'll + * catch - this will be our sample error. + * (3) diffing the control and sample error stacks to find the stack frame + * which represents our component. */ - function cloneElement$1(element, config, children) { - if (element === null || element === undefined) { - throw new Error( - "React.cloneElement(...): The argument must be a React element, but you passed " + - element + - "." - ); + function describeNativeComponentFrame(fn, construct) { + // If something asked for a stack inside a fake render, it should get ignored. + if (!fn || reentry) { + return ""; } - var propName; // Original props are copied - - var props = assign({}, element.props); // Reserved names are extracted - - var key = element.key; - var ref = element.ref; // Owner will be preserved, unless ref is overridden - - var owner = element._owner; + { + var frame = componentFrameCache.get(fn); - if (config != null) { - if (hasValidRef$1(config)) { - // Silently steal the ref from the parent. - ref = config.ref; - owner = ReactCurrentOwner$1.current; + if (frame !== undefined) { + return frame; } + } - if (hasValidKey$1(config)) { - { - checkKeyStringCoercion(config.key); - } - - key = "" + config.key; - } // Remaining properties override existing props - - var defaultProps; + reentry = true; + var previousPrepareStackTrace = Error.prepareStackTrace; // $FlowFixMe[incompatible-type] It does accept undefined. - if (element.type && element.type.defaultProps) { - defaultProps = element.type.defaultProps; - } + Error.prepareStackTrace = undefined; + var previousDispatcher; - for (propName in config) { - if ( - hasOwnProperty.call(config, propName) && // Skip over reserved prop names - propName !== "key" && // TODO: `ref` will no longer be reserved in the next major - propName !== "ref" && // ...and maybe these, too, though we currently rely on them for - // warnings and debug information in dev. Need to decide if we're OK - // with dropping them. In the jsx() runtime it's not an issue because - // the data gets passed as separate arguments instead of props, but - // it would be nice to stop relying on them entirely so we can drop - // them from the internal Fiber field. - propName !== "__self" && - propName !== "__source" - ) { - if (config[propName] === undefined && defaultProps !== undefined) { - // Resolve default props - props[propName] = defaultProps[propName]; - } else { - props[propName] = config[propName]; - } - } - } - } // Children can be more than one argument, and those are transferred onto - // the newly allocated props object. + { + previousDispatcher = ReactCurrentDispatcher.current; // Set the dispatcher in DEV because this might be call in the render function + // for warnings. - var childrenLength = arguments.length - 2; + ReactCurrentDispatcher.current = null; + disableLogs(); + } + /** + * Finding a common stack frame between sample and control errors can be + * tricky given the different types and levels of stack trace truncation from + * different JS VMs. So instead we'll attempt to control what that common + * frame should be through this object method: + * Having both the sample and control errors be in the function under the + * `DescribeNativeComponentFrameRoot` property, + setting the `name` and + * `displayName` properties of the function ensures that a stack + * frame exists that has the method name `DescribeNativeComponentFrameRoot` in + * it for both control and sample stacks. + */ - if (childrenLength === 1) { - props.children = children; - } else if (childrenLength > 1) { - var childArray = Array(childrenLength); + var RunInRootFrame = { + DetermineComponentFrameRoot: function () { + var control; - for (var i = 0; i < childrenLength; i++) { - childArray[i] = arguments[i + 2]; - } + try { + // This should throw. + if (construct) { + // Something should be setting the props in the constructor. + var Fake = function () { + throw Error(); + }; // $FlowFixMe[prop-missing] - props.children = childArray; - } + Object.defineProperty(Fake.prototype, "props", { + set: function () { + // We use a throwing setter instead of frozen or non-writable props + // because that won't throw in a non-strict mode function. + throw Error(); + } + }); - return ReactElement$1(element.type, key, ref, owner, props); - } - /** - * 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 - */ + if (typeof Reflect === "object" && Reflect.construct) { + // We construct a different control for this case to include any extra + // frames added by the construct call. + try { + Reflect.construct(Fake, []); + } catch (x) { + control = x; + } - function isValidElement$1(object) { - return ( - typeof object === "object" && - object !== null && - object.$$typeof === REACT_ELEMENT_TYPE - ); - } + Reflect.construct(fn, [], Fake); + } else { + try { + Fake.call(); + } catch (x) { + control = x; + } // $FlowFixMe[prop-missing] found when upgrading Flow - 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). + fn.call(Fake.prototype); + } + } else { + try { + throw Error(); + } catch (x) { + control = x; + } // TODO(luna): This will currently only throw if the function component + // tries to access React/ReactDOM/props. We should probably make this throw + // in simple components too - 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; - } + var maybePromise = fn(); // If the function component returns a promise, it's likely an async + // component, which we don't yet support. Attach a noop catch handler to + // silence the error. + // TODO: Implement component stacks for async client components? - 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; + if (maybePromise && typeof maybePromise.catch === "function") { + maybePromise.catch(function () {}); + } + } + } catch (sample) { + // This is inlined manually because closure doesn't do it for us. + if (sample && control && typeof sample.stack === "string") { + return [sample.stack, control.stack]; + } + } + + return [null, null]; } - } + }; // $FlowFixMe[prop-missing] - return false; - } + RunInRootFrame.DetermineComponentFrameRoot.displayName = + "DetermineComponentFrameRoot"; + var namePropDescriptor = Object.getOwnPropertyDescriptor( + RunInRootFrame.DetermineComponentFrameRoot, + "name" + ); // Before ES6, the `name` property was not configurable. - // Helpers to patch console.logs to avoid logging during side-effect free - // replaying on render function. This currently only patches the object - // lazily which won't cover if the log function was extracted eagerly. - // We could also eagerly patch the method. - var disabledDepth = 0; - var prevLog; - var prevInfo; - var prevWarn; - var prevError; - var prevGroup; - var prevGroupCollapsed; - var prevGroupEnd; + if (namePropDescriptor && namePropDescriptor.configurable) { + // V8 utilizes a function's `name` property when generating a stack trace. + Object.defineProperty( + RunInRootFrame.DetermineComponentFrameRoot, // Configurable properties can be updated even if its writable descriptor + // is set to `false`. + // $FlowFixMe[cannot-write] + "name", + { + value: "DetermineComponentFrameRoot" + } + ); + } - function disabledLog() {} + try { + var _RunInRootFrame$Deter = + RunInRootFrame.DetermineComponentFrameRoot(), + sampleStack = _RunInRootFrame$Deter[0], + controlStack = _RunInRootFrame$Deter[1]; - disabledLog.__reactDisabledLog = true; - function disableLogs() { - { - if (disabledDepth === 0) { - /* eslint-disable react-internal/no-production-logging */ - prevLog = console.log; - prevInfo = console.info; - prevWarn = console.warn; - prevError = console.error; - prevGroup = console.group; - prevGroupCollapsed = console.groupCollapsed; - prevGroupEnd = console.groupEnd; // https://github.com/facebook/react/issues/19099 + if (sampleStack && controlStack) { + // This extracts the first frame from the sample that isn't also in the control. + // Skipping one frame that we assume is the frame that calls the two. + var sampleLines = sampleStack.split("\n"); + var controlLines = controlStack.split("\n"); + var s = 0; + var c = 0; - var props = { - configurable: true, - enumerable: true, - value: disabledLog, - writable: true - }; // $FlowFixMe[cannot-write] Flow thinks console is immutable. + while ( + s < sampleLines.length && + !sampleLines[s].includes("DetermineComponentFrameRoot") + ) { + s++; + } - Object.defineProperties(console, { - info: props, - log: props, - warn: props, - error: props, - group: props, - groupCollapsed: props, - groupEnd: props - }); - /* eslint-enable react-internal/no-production-logging */ - } + while ( + c < controlLines.length && + !controlLines[c].includes("DetermineComponentFrameRoot") + ) { + c++; + } // We couldn't find our intentionally injected common root frame, attempt + // to find another common root frame by search from the bottom of the + // control stack... - disabledDepth++; - } - } - function reenableLogs() { - { - disabledDepth--; + if (s === sampleLines.length || c === controlLines.length) { + s = sampleLines.length - 1; + c = controlLines.length - 1; - if (disabledDepth === 0) { - /* eslint-disable react-internal/no-production-logging */ - var props = { - configurable: true, - enumerable: true, - writable: true - }; // $FlowFixMe[cannot-write] Flow thinks console is immutable. + while (s >= 1 && c >= 0 && sampleLines[s] !== controlLines[c]) { + // We expect at least one stack frame to be shared. + // Typically this will be the root most one. However, stack frames may be + // cut off due to maximum stack limits. In this case, one maybe cut off + // earlier than the other. We assume that the sample is longer or the same + // and there for cut off earlier. So we should find the root most frame in + // the sample somewhere in the control. + c--; + } + } - Object.defineProperties(console, { - log: assign({}, props, { - value: prevLog - }), - info: assign({}, props, { - value: prevInfo - }), - warn: assign({}, props, { - value: prevWarn - }), - error: assign({}, props, { - value: prevError - }), - group: assign({}, props, { - value: prevGroup - }), - groupCollapsed: assign({}, props, { - value: prevGroupCollapsed - }), - groupEnd: assign({}, props, { - value: prevGroupEnd - }) - }); - /* eslint-enable react-internal/no-production-logging */ - } + for (; s >= 1 && c >= 0; s--, c--) { + // Next we find the first one that isn't the same which should be the + // frame that called our sample function and the control. + if (sampleLines[s] !== controlLines[c]) { + // In V8, the first line is describing the message but other VMs don't. + // If we're about to return the first line, and the control is also on the same + // line, that's a pretty good indicator that our sample threw at same line as + // the control. I.e. before we entered the sample frame. So we ignore this result. + // This can happen if you passed a class to function component, or non-function. + if (s !== 1 || c !== 1) { + do { + s--; + c--; // We may still have similar intermediate frames from the construct call. + // The next one that isn't the same should be our match though. - if (disabledDepth < 0) { - error( - "disabledDepth fell below zero. " + - "This is a bug in React. Please file an issue." - ); - } - } - } - - /** - * Keeps track of the current dispatcher. - */ - var ReactCurrentDispatcher$1 = { - current: null - }; + if (c < 0 || sampleLines[s] !== controlLines[c]) { + // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier. + var _frame = + "\n" + sampleLines[s].replace(" at new ", " at "); // If our component frame is labeled "" + // but we have a user-provided "displayName" + // splice it in to make the stack more readable. - /** - * Keeps track of the current Cache dispatcher. - */ - var ReactCurrentCache = { - current: null - }; + if (fn.displayName && _frame.includes("")) { + _frame = _frame.replace("", fn.displayName); + } - /** - * Keeps track of the current batch's configuration such as how long an update - * should suspend for if it needs to. - */ - var ReactCurrentBatchConfig = { - transition: null - }; + if (true) { + if (typeof fn === "function") { + componentFrameCache.set(fn, _frame); + } + } // Return the line we found. - var ReactCurrentActQueue = { - current: null, - // Used to reproduce behavior of `batchedUpdates` in legacy mode. - isBatchingLegacy: false, - didScheduleLegacyUpdate: false, - // Tracks whether something called `use` during the current batch of work. - // Determines whether we should yield to microtasks to unwrap already resolved - // promises without suspending. - didUsePromise: false - }; + return _frame; + } + } while (s >= 1 && c >= 0); + } - var ReactDebugCurrentFrame$2 = {}; - var currentExtraStackFrame = null; - function setExtraStackFrame(stack) { - { - currentExtraStackFrame = stack; - } - } + break; + } + } + } + } finally { + reentry = false; - { - ReactDebugCurrentFrame$2.setExtraStackFrame = function (stack) { { - currentExtraStackFrame = stack; + ReactCurrentDispatcher.current = previousDispatcher; + reenableLogs(); } - }; // Stack implementation injected by the current renderer. - - ReactDebugCurrentFrame$2.getCurrentStack = null; - - ReactDebugCurrentFrame$2.getStackAddendum = function () { - var stack = ""; // Add an extra top frame while an element is being validated - if (currentExtraStackFrame) { - stack += currentExtraStackFrame; - } // Delegate to the injected renderer-specific implementation + Error.prepareStackTrace = previousPrepareStackTrace; + } // Fallback to just using the name if we couldn't make it throw. - var impl = ReactDebugCurrentFrame$2.getCurrentStack; + var name = fn ? fn.displayName || fn.name : ""; + var syntheticFrame = name ? describeBuiltInComponentFrame(name) : ""; - if (impl) { - stack += impl() || ""; + { + if (typeof fn === "function") { + componentFrameCache.set(fn, syntheticFrame); } + } - return stack; - }; - } - - var ReactSharedInternals = { - ReactCurrentDispatcher: ReactCurrentDispatcher$1, - ReactCurrentCache: ReactCurrentCache, - ReactCurrentBatchConfig: ReactCurrentBatchConfig, - ReactCurrentOwner: ReactCurrentOwner$1 - }; - - { - ReactSharedInternals.ReactDebugCurrentFrame = ReactDebugCurrentFrame$2; - ReactSharedInternals.ReactCurrentActQueue = ReactCurrentActQueue; + return syntheticFrame; } - - var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher; - var prefix; - function describeBuiltInComponentFrame(name, ownerFn) { + function describeFunctionComponentFrame(fn, ownerFn) { { - if (prefix === undefined) { - // Extract the VM specific prefix used by each line. - try { - throw Error(); - } catch (x) { - var match = x.stack.trim().match(/\n( *(at )?)/); - prefix = (match && match[1]) || ""; - } - } // We use the prefix to ensure our stacks line up with native stack frames. - - return "\n" + prefix + name; + return describeNativeComponentFrame(fn, false); } } - var reentry = false; - var componentFrameCache; - { - var PossiblyWeakMap = typeof WeakMap === "function" ? WeakMap : Map; - componentFrameCache = new PossiblyWeakMap(); + function shouldConstruct(Component) { + var prototype = Component.prototype; + return !!(prototype && prototype.isReactComponent); } - /** - * Leverages native browser/VM stack frames to get proper details (e.g. - * filename, line + col number) for a single component in a component stack. We - * do this by: - * (1) throwing and catching an error in the function - this will be our - * control error. - * (2) calling the component which will eventually throw an error that we'll - * catch - this will be our sample error. - * (3) diffing the control and sample error stacks to find the stack frame - * which represents our component. - */ - function describeNativeComponentFrame(fn, construct) { - // If something asked for a stack inside a fake render, it should get ignored. - if (!fn || reentry) { + function describeUnknownElementTypeFrameInDEV(type, ownerFn) { + if (type == null) { return ""; } - { - var frame = componentFrameCache.get(fn); - - if (frame !== undefined) { - return frame; + if (typeof type === "function") { + { + return describeNativeComponentFrame(type, shouldConstruct(type)); } } - reentry = true; - var previousPrepareStackTrace = Error.prepareStackTrace; // $FlowFixMe[incompatible-type] It does accept undefined. - - Error.prepareStackTrace = undefined; - var previousDispatcher; + if (typeof type === "string") { + return describeBuiltInComponentFrame(type); + } - { - previousDispatcher = ReactCurrentDispatcher.current; // Set the dispatcher in DEV because this might be call in the render function - // for warnings. + switch (type) { + case REACT_SUSPENSE_TYPE: + return describeBuiltInComponentFrame("Suspense"); - ReactCurrentDispatcher.current = null; - disableLogs(); + case REACT_SUSPENSE_LIST_TYPE: + return describeBuiltInComponentFrame("SuspenseList"); } - /** - * Finding a common stack frame between sample and control errors can be - * tricky given the different types and levels of stack trace truncation from - * different JS VMs. So instead we'll attempt to control what that common - * frame should be through this object method: - * Having both the sample and control errors be in the function under the - * `DescribeNativeComponentFrameRoot` property, + setting the `name` and - * `displayName` properties of the function ensures that a stack - * frame exists that has the method name `DescribeNativeComponentFrameRoot` in - * it for both control and sample stacks. - */ - - var RunInRootFrame = { - DetermineComponentFrameRoot: function () { - var control; - try { - // This should throw. - if (construct) { - // Something should be setting the props in the constructor. - var Fake = function () { - throw Error(); - }; // $FlowFixMe[prop-missing] + if (typeof type === "object") { + switch (type.$$typeof) { + case REACT_FORWARD_REF_TYPE: + return describeFunctionComponentFrame(type.render); - Object.defineProperty(Fake.prototype, "props", { - set: function () { - // We use a throwing setter instead of frozen or non-writable props - // because that won't throw in a non-strict mode function. - throw Error(); - } - }); + case REACT_MEMO_TYPE: + // Memo may contain any component type so we recursively resolve it. + return describeUnknownElementTypeFrameInDEV(type.type, ownerFn); - if (typeof Reflect === "object" && Reflect.construct) { - // We construct a different control for this case to include any extra - // frames added by the construct call. - try { - Reflect.construct(Fake, []); - } catch (x) { - control = x; - } + case REACT_LAZY_TYPE: { + var lazyComponent = type; + var payload = lazyComponent._payload; + var init = lazyComponent._init; - Reflect.construct(fn, [], Fake); - } else { - try { - Fake.call(); - } catch (x) { - control = x; - } // $FlowFixMe[prop-missing] found when upgrading Flow + try { + // Lazy may contain any component type so we recursively resolve it. + return describeUnknownElementTypeFrameInDEV( + init(payload), + ownerFn + ); + } catch (x) {} + } + } + } - fn.call(Fake.prototype); - } - } else { - try { - throw Error(); - } catch (x) { - control = x; - } // TODO(luna): This will currently only throw if the function component - // tries to access React/ReactDOM/props. We should probably make this throw - // in simple components too + return ""; + } - var maybePromise = fn(); // If the function component returns a promise, it's likely an async - // component, which we don't yet support. Attach a noop catch handler to - // silence the error. - // TODO: Implement component stacks for async client components? + var loggedTypeFailures = {}; + var ReactDebugCurrentFrame$1 = ReactSharedInternals.ReactDebugCurrentFrame; - if (maybePromise && typeof maybePromise.catch === "function") { - maybePromise.catch(function () {}); - } - } - } catch (sample) { - // This is inlined manually because closure doesn't do it for us. - if (sample && control && typeof sample.stack === "string") { - return [sample.stack, control.stack]; - } - } - - return [null, null]; - } - }; // $FlowFixMe[prop-missing] - - RunInRootFrame.DetermineComponentFrameRoot.displayName = - "DetermineComponentFrameRoot"; - var namePropDescriptor = Object.getOwnPropertyDescriptor( - RunInRootFrame.DetermineComponentFrameRoot, - "name" - ); // Before ES6, the `name` property was not configurable. - - if (namePropDescriptor && namePropDescriptor.configurable) { - // V8 utilizes a function's `name` property when generating a stack trace. - Object.defineProperty( - RunInRootFrame.DetermineComponentFrameRoot, // Configurable properties can be updated even if its writable descriptor - // is set to `false`. - // $FlowFixMe[cannot-write] - "name", - { - value: "DetermineComponentFrameRoot" - } - ); - } - - try { - var _RunInRootFrame$Deter = - RunInRootFrame.DetermineComponentFrameRoot(), - sampleStack = _RunInRootFrame$Deter[0], - controlStack = _RunInRootFrame$Deter[1]; - - if (sampleStack && controlStack) { - // This extracts the first frame from the sample that isn't also in the control. - // Skipping one frame that we assume is the frame that calls the two. - var sampleLines = sampleStack.split("\n"); - var controlLines = controlStack.split("\n"); - var s = 0; - var c = 0; - - while ( - s < sampleLines.length && - !sampleLines[s].includes("DetermineComponentFrameRoot") - ) { - s++; - } - - while ( - c < controlLines.length && - !controlLines[c].includes("DetermineComponentFrameRoot") - ) { - c++; - } // We couldn't find our intentionally injected common root frame, attempt - // to find another common root frame by search from the bottom of the - // control stack... - - if (s === sampleLines.length || c === controlLines.length) { - s = sampleLines.length - 1; - c = controlLines.length - 1; - - while (s >= 1 && c >= 0 && sampleLines[s] !== controlLines[c]) { - // We expect at least one stack frame to be shared. - // Typically this will be the root most one. However, stack frames may be - // cut off due to maximum stack limits. In this case, one maybe cut off - // earlier than the other. We assume that the sample is longer or the same - // and there for cut off earlier. So we should find the root most frame in - // the sample somewhere in the control. - c--; - } - } - - for (; s >= 1 && c >= 0; s--, c--) { - // Next we find the first one that isn't the same which should be the - // frame that called our sample function and the control. - if (sampleLines[s] !== controlLines[c]) { - // In V8, the first line is describing the message but other VMs don't. - // If we're about to return the first line, and the control is also on the same - // line, that's a pretty good indicator that our sample threw at same line as - // the control. I.e. before we entered the sample frame. So we ignore this result. - // This can happen if you passed a class to function component, or non-function. - if (s !== 1 || c !== 1) { - do { - s--; - c--; // We may still have similar intermediate frames from the construct call. - // The next one that isn't the same should be our match though. - - if (c < 0 || sampleLines[s] !== controlLines[c]) { - // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier. - var _frame = - "\n" + sampleLines[s].replace(" at new ", " at "); // If our component frame is labeled "" - // but we have a user-provided "displayName" - // splice it in to make the stack more readable. - - if (fn.displayName && _frame.includes("")) { - _frame = _frame.replace("", fn.displayName); - } - - if (true) { - if (typeof fn === "function") { - componentFrameCache.set(fn, _frame); - } - } // Return the line we found. - - return _frame; - } - } while (s >= 1 && c >= 0); - } - - break; - } - } - } - } finally { - reentry = false; - - { - ReactCurrentDispatcher.current = previousDispatcher; - reenableLogs(); - } - - Error.prepareStackTrace = previousPrepareStackTrace; - } // Fallback to just using the name if we couldn't make it throw. - - var name = fn ? fn.displayName || fn.name : ""; - var syntheticFrame = name ? describeBuiltInComponentFrame(name) : ""; - - { - if (typeof fn === "function") { - componentFrameCache.set(fn, syntheticFrame); - } - } - - return syntheticFrame; - } - function describeFunctionComponentFrame(fn, ownerFn) { - { - return describeNativeComponentFrame(fn, false); - } - } - - function shouldConstruct(Component) { - var prototype = Component.prototype; - return !!(prototype && prototype.isReactComponent); - } - - function describeUnknownElementTypeFrameInDEV(type, ownerFn) { - if (type == null) { - return ""; - } - - if (typeof type === "function") { - { - return describeNativeComponentFrame(type, shouldConstruct(type)); - } - } - - if (typeof type === "string") { - return describeBuiltInComponentFrame(type); - } - - switch (type) { - case REACT_SUSPENSE_TYPE: - return describeBuiltInComponentFrame("Suspense"); - - case REACT_SUSPENSE_LIST_TYPE: - return describeBuiltInComponentFrame("SuspenseList"); - } - - if (typeof type === "object") { - switch (type.$$typeof) { - case REACT_FORWARD_REF_TYPE: - return describeFunctionComponentFrame(type.render); - - case REACT_MEMO_TYPE: - // Memo may contain any component type so we recursively resolve it. - return describeUnknownElementTypeFrameInDEV(type.type, ownerFn); - - case REACT_LAZY_TYPE: { - var lazyComponent = type; - var payload = lazyComponent._payload; - var init = lazyComponent._init; - - try { - // Lazy may contain any component type so we recursively resolve it. - return describeUnknownElementTypeFrameInDEV( - init(payload), - ownerFn - ); - } catch (x) {} - } - } - } - - return ""; - } - - var loggedTypeFailures = {}; - var ReactDebugCurrentFrame$1 = ReactSharedInternals.ReactDebugCurrentFrame; - - function setCurrentlyValidatingElement$2(element) { + function setCurrentlyValidatingElement$1(element) { { if (element) { var owner = element._owner; @@ -1636,7 +1245,7 @@ if (__DEV__) { } if (error$1 && !(error$1 instanceof Error)) { - setCurrentlyValidatingElement$2(element); + setCurrentlyValidatingElement$1(element); error( "%s: type specification of %s" + @@ -1651,7 +1260,7 @@ if (__DEV__) { typeof error$1 ); - setCurrentlyValidatingElement$2(null); + setCurrentlyValidatingElement$1(null); } if ( @@ -1661,336 +1270,496 @@ if (__DEV__) { // Only monitor this failure once because there tends to be a lot of the // same error. loggedTypeFailures[error$1.message] = true; - setCurrentlyValidatingElement$2(element); + setCurrentlyValidatingElement$1(element); error("Failed %s type: %s", location, error$1.message); - setCurrentlyValidatingElement$2(null); + setCurrentlyValidatingElement$1(null); } } } } } - var REACT_CLIENT_REFERENCE$1 = Symbol.for("react.client.reference"); - - function setCurrentlyValidatingElement$1(element) { - { - if (element) { - var owner = element._owner; - var stack = describeUnknownElementTypeFrameInDEV( - element.type, - owner ? owner.type : null - ); - setExtraStackFrame(stack); - } else { - setExtraStackFrame(null); - } - } - } - - var propTypesMisspellWarningShown$1; + var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; + var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; + var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"); + var specialPropKeyWarningShown; + var specialPropRefWarningShown; + var didWarnAboutStringRefs; { - propTypesMisspellWarningShown$1 = false; + didWarnAboutStringRefs = {}; } - function getDeclarationErrorAddendum$1() { - if (ReactCurrentOwner$1.current) { - var name = getComponentNameFromType(ReactCurrentOwner$1.current.type); + function hasValidRef(config) { + { + if (hasOwnProperty.call(config, "ref")) { + var getter = Object.getOwnPropertyDescriptor(config, "ref").get; - if (name) { - return "\n\nCheck the render method of `" + name + "`."; + if (getter && getter.isReactWarning) { + return false; + } } } - return ""; + return config.ref !== undefined; } - function getSourceInfoErrorAddendum$1(source) { - if (source !== undefined) { - var fileName = source.fileName.replace(/^.*[\\\/]/, ""); - var lineNumber = source.lineNumber; - return "\n\nCheck your code at " + fileName + ":" + lineNumber + "."; - } - - return ""; - } + function hasValidKey(config) { + { + if (hasOwnProperty.call(config, "key")) { + var getter = Object.getOwnPropertyDescriptor(config, "key").get; - function getSourceInfoErrorAddendumForProps(elementProps) { - if (elementProps !== null && elementProps !== undefined) { - return getSourceInfoErrorAddendum$1(elementProps.__source); + if (getter && getter.isReactWarning) { + return false; + } + } } - return ""; + return config.key !== undefined; } - /** - * 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. - */ - - var ownerHasKeyUseWarning$1 = {}; - function getCurrentComponentErrorInfo$1(parentType) { - var info = getDeclarationErrorAddendum$1(); + function warnIfStringRefCannotBeAutoConverted(config, self) { + { + if ( + typeof config.ref === "string" && + ReactCurrentOwner.current && + self && + ReactCurrentOwner.current.stateNode !== self + ) { + var componentName = getComponentNameFromType( + ReactCurrentOwner.current.type + ); - if (!info) { - var parentName = getComponentNameFromType(parentType); + if (!didWarnAboutStringRefs[componentName]) { + error( + 'Component "%s" contains the string ref "%s". ' + + "Support for string refs will be removed in a future major release. " + + "This case cannot be automatically converted to an arrow function. " + + "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.current.type), + config.ref + ); - if (parentName) { - info = - "\n\nCheck the top-level render call using <" + parentName + ">."; + didWarnAboutStringRefs[componentName] = true; + } } } - - return info; } - /** - * 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 - * reordered. All children that haven't already been validated are required to - * have a "key" property assigned to it. Error statuses are cached so a warning - * will only be shown once. - * - * @internal - * @param {ReactElement} element Element that requires a key. - * @param {*} parentType element's parent's type. - */ - - function validateExplicitKey$1(element, parentType) { - if (!element._store || element._store.validated || element.key != null) { - return; - } - - element._store.validated = true; - var currentComponentErrorInfo = - getCurrentComponentErrorInfo$1(parentType); - - if (ownerHasKeyUseWarning$1[currentComponentErrorInfo]) { - return; - } - ownerHasKeyUseWarning$1[currentComponentErrorInfo] = true; // Usually the current owner is the offender, but if it accepts children as a - // property, it may be the creator of the child that's responsible for - // assigning it a key. + function defineKeyPropWarningGetter(props, displayName) { + { + var warnAboutAccessingKey = function () { + if (!specialPropKeyWarningShown) { + specialPropKeyWarningShown = true; - var childOwner = ""; + error( + "%s: `key` is not a prop. Trying to access it will result " + + "in `undefined` being returned. If you need to access the same " + + "value within the child component, you should pass it as a different " + + "prop. (https://reactjs.org/link/special-props)", + displayName + ); + } + }; - if ( - element && - element._owner && - element._owner !== ReactCurrentOwner$1.current - ) { - // Give the component that originally created this child. - childOwner = - " It was passed a child from " + - getComponentNameFromType(element._owner.type) + - "."; + warnAboutAccessingKey.isReactWarning = true; + Object.defineProperty(props, "key", { + get: warnAboutAccessingKey, + configurable: true + }); } + } + function defineRefPropWarningGetter(props, displayName) { { - setCurrentlyValidatingElement$1(element); + var warnAboutAccessingRef = function () { + if (!specialPropRefWarningShown) { + specialPropRefWarningShown = true; - error( - 'Each child in a list should have a unique "key" prop.' + - "%s%s See https://reactjs.org/link/warning-keys for more information.", - currentComponentErrorInfo, - childOwner - ); + error( + "%s: `ref` is not a prop. Trying to access it will result " + + "in `undefined` being returned. If you need to access the same " + + "value within the child component, you should pass it as a different " + + "prop. (https://reactjs.org/link/special-props)", + displayName + ); + } + }; - setCurrentlyValidatingElement$1(null); + warnAboutAccessingRef.isReactWarning = true; + Object.defineProperty(props, "ref", { + get: warnAboutAccessingRef, + configurable: true + }); } } /** - * 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. + * Factory method to create a new React element. This no longer adheres to + * the class pattern, so do not use new to call it. Also, instanceof check + * will not work. Instead test $$typeof field against Symbol.for('react.element') to check + * if something is a React Element. * + * @param {*} type + * @param {*} props + * @param {*} key + * @param {string|object} ref + * @param {*} owner + * @param {*} self A *temporary* helper to detect places where `this` is + * different from the `owner` when React.createElement is called, so that we + * can warn. We want to get rid of owner and replace string `ref`s with arrow + * functions, and as long as `this` and owner are the same, there will be no + * change in behavior. + * @param {*} source An annotation object (added by a transpiler or otherwise) + * indicating filename, line number, and/or other information. * @internal - * @param {ReactNode} node Statically passed child of any type. - * @param {*} parentType node's parent's type. */ - function validateChildKeys$1(node, parentType) { - if (typeof node !== "object" || !node) { - return; - } + function ReactElement(type, key, ref, self, source, owner, props) { + var element = { + // This tag allows us to uniquely identify this as a React Element + $$typeof: REACT_ELEMENT_TYPE, + // Built-in properties that belong on the element + type: type, + key: key, + ref: ref, + props: props, + // Record the component responsible for creating this element. + _owner: owner + }; + + { + // The validation flag is currently mutative. We put it on + // an external backing store so that we can freeze the whole object. + // This can be replaced with a WeakMap once they are implemented in + // commonly used development environments. + element._store = {}; // To make comparing ReactElements easier for testing purposes, we make + // the validation flag non-enumerable (where possible, which should + // include every environment we run tests in), so the test framework + // ignores it. - if (node.$$typeof === REACT_CLIENT_REFERENCE$1); - else if (isArray(node)) { - for (var i = 0; i < node.length; i++) { - var child = node[i]; + Object.defineProperty(element._store, "validated", { + configurable: false, + enumerable: false, + writable: true, + value: false + }); // debugInfo contains Server Component debug information. - if (isValidElement$1(child)) { - validateExplicitKey$1(child, parentType); - } - } - } else if (isValidElement$1(node)) { - // This element was passed in a valid location. - if (node._store) { - node._store.validated = true; - } - } else { - var iteratorFn = getIteratorFn(node); + Object.defineProperty(element, "_debugInfo", { + configurable: false, + enumerable: false, + writable: true, + value: null + }); - 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$1(step.value)) { - validateExplicitKey$1(step.value, parentType); - } - } - } + if (Object.freeze) { + Object.freeze(element.props); + Object.freeze(element); } } + + 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 = {}; /** - * Given an element, validate that its props follow the propTypes definition, - * provided by the type. - * - * @param {ReactElement} element + * https://github.com/reactjs/rfcs/pull/107 + * @param {*} type + * @param {object} props + * @param {string} key */ - function validatePropTypes$1(element) { + function jsxDEV$1(type, config, maybeKey, isStaticChildren, source, self) { { - var type = element.type; - - if (type === null || type === undefined || typeof type === "string") { - return; - } - - if (type.$$typeof === REACT_CLIENT_REFERENCE$1) { - return; - } + 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 = ""; - var propTypes; + 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."; + } - if (typeof type === "function") { - propTypes = type.propTypes; - } else if ( - typeof type === "object" && - (type.$$typeof === REACT_FORWARD_REF_TYPE || // Note: Memo only checks outer props here. - // Inner props are checked in the reconciler. - type.$$typeof === REACT_MEMO_TYPE) - ) { - propTypes = type.propTypes; - } else { - return; - } + var sourceInfo = getSourceInfoErrorAddendum(source); - if (propTypes) { - // Intentionally inside to avoid triggering lazy initializers: - var name = getComponentNameFromType(type); - checkPropTypes(propTypes, element.props, "prop", name, element); - } else if ( - type.PropTypes !== undefined && - !propTypesMisspellWarningShown$1 - ) { - propTypesMisspellWarningShown$1 = true; // Intentionally inside to avoid triggering lazy initializers: + if (sourceInfo) { + info += sourceInfo; + } else { + info += getDeclarationErrorAddendum(); + } - var _name = getComponentNameFromType(type); + var typeString; - error( - "Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", - _name || "Unknown" - ); - } + 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; + } - if ( - typeof type.getDefaultProps === "function" && - !type.getDefaultProps.isReactClassApproved - ) { error( - "getDefaultProps is only used on classic React.createClass " + - "definitions. Use a static property named `defaultProps` instead." + "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 ); - } - } - } - /** - * Given a fragment, validate that it can only be provided with fragment props - * @param {ReactElement} fragment - */ + } 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; - function validateFragmentProps$1(fragment) { - { - var keys = Object.keys(fragment.props); + if (children !== undefined) { + if (isStaticChildren) { + if (isArray(children)) { + for (var i = 0; i < children.length; i++) { + validateChildKeys(children[i], type); + } - for (var i = 0; i < keys.length; i++) { - var key = keys[i]; + 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 (key !== "children" && key !== "key") { - setCurrentlyValidatingElement$1(fragment); + 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( - "Invalid prop `%s` supplied to `React.Fragment`. " + - "React.Fragment can only have `key` and `children` props.", - key + '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 ); - setCurrentlyValidatingElement$1(null); - break; + didWarnAboutKeySpread[componentName + beforeExample] = true; } } - if (fragment.ref !== null) { - setCurrentlyValidatingElement$1(fragment); + var propName; // Reserved names are extracted - error("Invalid attribute `ref` supplied to `React.Fragment`."); + var props = {}; + var key = null; + var ref = null; // Currently, key can be spread in as a prop. This causes a potential + // issue if key is also explicitly declared (ie.
+ // or
). We want to deprecate key spread, + // but as an intermediary step, we will use jsxDEV for everything except + //
, because we aren't currently able to tell if + // key is explicitly declared to be undefined or not. + + if (maybeKey !== undefined) { + { + checkKeyStringCoercion(maybeKey); + } - setCurrentlyValidatingElement$1(null); + key = "" + maybeKey; } - } - } - function createElementWithValidation(type, props, children) { - 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 (hasValidKey(config)) { + { + checkKeyStringCoercion(config.key); + } - if (!validType) { - var info = ""; + key = "" + config.key; + } - 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."; + if (hasValidRef(config)) { + ref = config.ref; + warnIfStringRefCannotBeAutoConverted(config, self); + } // Remaining properties are added to a new props object + + for (propName in config) { + if ( + hasOwnProperty.call(config, propName) && // Skip over reserved prop names + propName !== "key" && // TODO: `ref` will no longer be reserved in the next major + propName !== "ref" + ) { + props[propName] = config[propName]; + } + } // Resolve default props + + if (type && type.defaultProps) { + var defaultProps = type.defaultProps; + + for (propName in defaultProps) { + if (props[propName] === undefined) { + props[propName] = defaultProps[propName]; + } + } } - var sourceInfo = getSourceInfoErrorAddendumForProps(props); + if (key || ref) { + var displayName = + typeof type === "function" + ? type.displayName || type.name || "Unknown" + : type; + + if (key) { + defineKeyPropWarningGetter(props, displayName); + } - if (sourceInfo) { - info += sourceInfo; - } else { - info += getDeclarationErrorAddendum$1(); + if (ref) { + defineRefPropWarningGetter(props, displayName); + } } - 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?"; + var element = ReactElement( + type, + key, + ref, + self, + source, + ReactCurrentOwner.current, + props + ); + + if (type === REACT_FRAGMENT_TYPE) { + validateFragmentProps(element); } else { - typeString = typeof type; + validatePropTypes(element); } - { + return element; + } + } + /** + * Create and return a new ReactElement of the given type. + * See https://reactjs.org/docs/react-api.html#createelement + */ + + function createElement(type, config, children) { + { + 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 = getSourceInfoErrorAddendumForProps(config); + + 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.createElement: type is invalid -- expected a string (for " + "built-in components) or a class/function (for composite " + @@ -1998,2127 +1767,1893 @@ if (__DEV__) { 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.) + for (var i = 2; i < arguments.length; i++) { + validateChildKeys(arguments[i], type); + } + } // Unlike the jsx() runtime, createElement() doesn't warn about key spread. } - var element = createElement$1.apply(this, arguments); // 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) { - for (var i = 2; i < arguments.length; i++) { - validateChildKeys$1(arguments[i], type); - } - } + var propName; // Reserved names are extracted - if (type === REACT_FRAGMENT_TYPE) { - validateFragmentProps$1(element); - } else { - validatePropTypes$1(element); - } + var props = {}; + var key = null; + var ref = null; - return element; - } - function cloneElementWithValidation(element, props, children) { - var newElement = cloneElement$1.apply(this, arguments); + if (config != null) { + if (hasValidRef(config)) { + ref = config.ref; - for (var i = 2; i < arguments.length; i++) { - validateChildKeys$1(arguments[i], newElement.type); - } + { + warnIfStringRefCannotBeAutoConverted(config, config.__self); + } + } - validatePropTypes$1(newElement); - return newElement; - } - - var createElement = createElementWithValidation; - var cloneElement = cloneElementWithValidation; - - var SEPARATOR = "."; - var SUBSEPARATOR = ":"; - /** - * Escape and wrap key so it is safe to use as a reactid - * - * @param {string} key to be escaped. - * @return {string} the escaped key. - */ - - function escape(key) { - var escapeRegex = /[=:]/g; - var escaperLookup = { - "=": "=0", - ":": "=2" - }; - var escapedString = key.replace(escapeRegex, function (match) { - return escaperLookup[match]; - }); - return "$" + escapedString; - } - /** - * TODO: Test that a single child and an array with one item have the same key - * pattern. - */ - - var didWarnAboutMaps = false; - var userProvidedKeyEscapeRegex = /\/+/g; + if (hasValidKey(config)) { + { + checkKeyStringCoercion(config.key); + } - function escapeUserProvidedKey(text) { - return text.replace(userProvidedKeyEscapeRegex, "$&/"); - } - /** - * Generate a key string that identifies a element within a set. - * - * @param {*} element A element that could contain a manual key. - * @param {number} index Index that is used if a manual key is not provided. - * @return {string} - */ + key = "" + config.key; + } // Remaining properties are added to a new props object - function getElementKey(element, index) { - // Do some typechecking here since we call this blindly. We want to ensure - // that we don't block potential future ES APIs. - if ( - typeof element === "object" && - element !== null && - element.key != null - ) { - // Explicit key - { - checkKeyStringCoercion(element.key); + for (propName in config) { + if ( + hasOwnProperty.call(config, propName) && // Skip over reserved prop names + propName !== "key" && // TODO: `ref` will no longer be reserved in the next major + propName !== "ref" && // ...and maybe these, too, though we currently rely on them for + // warnings and debug information in dev. Need to decide if we're OK + // with dropping them. In the jsx() runtime it's not an issue because + // the data gets passed as separate arguments instead of props, but + // it would be nice to stop relying on them entirely so we can drop + // them from the internal Fiber field. + propName !== "__self" && + propName !== "__source" + ) { + props[propName] = config[propName]; + } } + } // Children can be more than one argument, and those are transferred onto + // the newly allocated props object. - return escape("" + element.key); - } // Implicit key determined by the index in the set - - return index.toString(36); - } + var childrenLength = arguments.length - 2; - function noop$1() {} + if (childrenLength === 1) { + props.children = children; + } else if (childrenLength > 1) { + var childArray = Array(childrenLength); - function resolveThenable(thenable) { - switch (thenable.status) { - case "fulfilled": { - var fulfilledValue = thenable.value; - return fulfilledValue; + for (var _i = 0; _i < childrenLength; _i++) { + childArray[_i] = arguments[_i + 2]; } - case "rejected": { - var rejectedError = thenable.reason; - throw rejectedError; + { + if (Object.freeze) { + Object.freeze(childArray); + } } - default: { - if (typeof thenable.status === "string") { - // Only instrument the thenable if the status if not defined. If - // it's defined, but an unknown value, assume it's been instrumented by - // some custom userspace implementation. We treat it as "pending". - // Attach a dummy listener, to ensure that any lazy initialization can - // happen. Flight lazily parses JSON when the value is actually awaited. - thenable.then(noop$1, noop$1); - } else { - // This is an uncached thenable that we haven't seen before. - // TODO: Detect infinite ping loops caused by uncached promises. - var pendingThenable = thenable; - pendingThenable.status = "pending"; - pendingThenable.then( - function (fulfilledValue) { - if (thenable.status === "pending") { - var fulfilledThenable = thenable; - fulfilledThenable.status = "fulfilled"; - fulfilledThenable.value = fulfilledValue; - } - }, - function (error) { - if (thenable.status === "pending") { - var rejectedThenable = thenable; - rejectedThenable.status = "rejected"; - rejectedThenable.reason = error; - } - } - ); - } // Check one more time in case the thenable resolved synchronously. + props.children = childArray; + } // Resolve default props - switch (thenable.status) { - case "fulfilled": { - var fulfilledThenable = thenable; - return fulfilledThenable.value; - } + if (type && type.defaultProps) { + var defaultProps = type.defaultProps; - case "rejected": { - var rejectedThenable = thenable; - var _rejectedError = rejectedThenable.reason; - throw _rejectedError; - } + for (propName in defaultProps) { + if (props[propName] === undefined) { + props[propName] = defaultProps[propName]; } } } - throw thenable; - } + { + if (key || ref) { + var displayName = + typeof type === "function" + ? type.displayName || type.name || "Unknown" + : type; - function mapIntoArray(children, array, escapedPrefix, nameSoFar, callback) { - var type = typeof children; + if (key) { + defineKeyPropWarningGetter(props, displayName); + } - if (type === "undefined" || type === "boolean") { - // All of the above are perceived as null. - children = null; + if (ref) { + defineRefPropWarningGetter(props, displayName); + } + } } - var invokeCallback = false; + var element = ReactElement( + type, + key, + ref, + undefined, + undefined, + ReactCurrentOwner.current, + props + ); - if (children === null) { - invokeCallback = true; + if (type === REACT_FRAGMENT_TYPE) { + validateFragmentProps(element); } else { - switch (type) { - case "string": - case "number": - invokeCallback = true; - break; + validatePropTypes(element); + } - case "object": - switch (children.$$typeof) { - case REACT_ELEMENT_TYPE: - case REACT_PORTAL_TYPE: - invokeCallback = true; - break; + return element; + } + function cloneAndReplaceKey(oldElement, newKey) { + return ReactElement( + oldElement.type, + newKey, + oldElement.ref, + undefined, + undefined, + oldElement._owner, + oldElement.props + ); + } + /** + * Clone and return a new ReactElement using element as the starting point. + * See https://reactjs.org/docs/react-api.html#cloneelement + */ - case REACT_LAZY_TYPE: - var payload = children._payload; - var init = children._init; - return mapIntoArray( - init(payload), - array, - escapedPrefix, - nameSoFar, - callback - ); - } - } + function cloneElement(element, config, children) { + if (element === null || element === undefined) { + throw new Error( + "React.cloneElement(...): The argument must be a React element, but you passed " + + element + + "." + ); } - if (invokeCallback) { - var _child = children; - var mappedChild = callback(_child); // If it's the only child, treat the name as if it was wrapped in an array - // so that it's consistent if the number of children grows: + var propName; // Original props are copied - var childKey = - nameSoFar === "" ? SEPARATOR + getElementKey(_child, 0) : nameSoFar; + var props = assign({}, element.props); // Reserved names are extracted - if (isArray(mappedChild)) { - var escapedChildKey = ""; + var key = element.key; + var ref = element.ref; // Owner will be preserved, unless ref is overridden - if (childKey != null) { - escapedChildKey = escapeUserProvidedKey(childKey) + "/"; + var owner = element._owner; + + if (config != null) { + if (hasValidRef(config)) { + // Silently steal the ref from the parent. + ref = config.ref; + owner = ReactCurrentOwner.current; + } + + if (hasValidKey(config)) { + { + checkKeyStringCoercion(config.key); } - mapIntoArray(mappedChild, array, escapedChildKey, "", function (c) { - return c; - }); - } else if (mappedChild != null) { - if (isValidElement$1(mappedChild)) { - { - // The `if` statement here prevents auto-disabling of the safe - // coercion ESLint rule, so we must manually disable it below. - // $FlowFixMe[incompatible-type] Flow incorrectly thinks React.Portal doesn't have a key - if ( - mappedChild.key && - (!_child || _child.key !== mappedChild.key) - ) { - checkKeyStringCoercion(mappedChild.key); - } - } + key = "" + config.key; + } // Remaining properties override existing props - mappedChild = cloneAndReplaceKey( - mappedChild, // Keep both the (mapped) and old keys if they differ, just as - // traverseAllChildren used to do for objects as children - escapedPrefix + // $FlowFixMe[incompatible-type] Flow incorrectly thinks React.Portal doesn't have a key - (mappedChild.key && (!_child || _child.key !== mappedChild.key) - ? escapeUserProvidedKey( - // $FlowFixMe[unsafe-addition] - "" + mappedChild.key // eslint-disable-line react-internal/safe-string-coercion - ) + "/" - : "") + - childKey - ); - } + var defaultProps; - array.push(mappedChild); + if (element.type && element.type.defaultProps) { + defaultProps = element.type.defaultProps; } - return 1; - } + for (propName in config) { + if ( + hasOwnProperty.call(config, propName) && // Skip over reserved prop names + propName !== "key" && // TODO: `ref` will no longer be reserved in the next major + propName !== "ref" && // ...and maybe these, too, though we currently rely on them for + // warnings and debug information in dev. Need to decide if we're OK + // with dropping them. In the jsx() runtime it's not an issue because + // the data gets passed as separate arguments instead of props, but + // it would be nice to stop relying on them entirely so we can drop + // them from the internal Fiber field. + propName !== "__self" && + propName !== "__source" + ) { + if (config[propName] === undefined && defaultProps !== undefined) { + // Resolve default props + props[propName] = defaultProps[propName]; + } else { + props[propName] = config[propName]; + } + } + } + } // Children can be more than one argument, and those are transferred onto + // the newly allocated props object. - var child; - var nextName; - var subtreeCount = 0; // Count of children found in the current subtree. + var childrenLength = arguments.length - 2; - var nextNamePrefix = - nameSoFar === "" ? SEPARATOR : nameSoFar + SUBSEPARATOR; + if (childrenLength === 1) { + props.children = children; + } else if (childrenLength > 1) { + var childArray = Array(childrenLength); - if (isArray(children)) { - for (var i = 0; i < children.length; i++) { - child = children[i]; - nextName = nextNamePrefix + getElementKey(child, i); - subtreeCount += mapIntoArray( - child, - array, - escapedPrefix, - nextName, - callback - ); + for (var i = 0; i < childrenLength; i++) { + childArray[i] = arguments[i + 2]; } - } else { - var iteratorFn = getIteratorFn(children); - if (typeof iteratorFn === "function") { - var iterableChildren = children; + props.children = childArray; + } - { - // Warn about using Maps as children - if (iteratorFn === iterableChildren.entries) { - if (!didWarnAboutMaps) { - warn( - "Using Maps as children is not supported. " + - "Use an array of keyed ReactElements instead." - ); - } + var clonedElement = ReactElement( + element.type, + key, + ref, + undefined, + undefined, + owner, + props + ); - didWarnAboutMaps = true; - } - } + for (var _i2 = 2; _i2 < arguments.length; _i2++) { + validateChildKeys(arguments[_i2], clonedElement.type); + } - var iterator = iteratorFn.call(iterableChildren); - var step; - var ii = 0; // $FlowFixMe[incompatible-use] `iteratorFn` might return null according to typing. + validatePropTypes(clonedElement); + return clonedElement; + } - while (!(step = iterator.next()).done) { - child = step.value; - nextName = nextNamePrefix + getElementKey(child, ii++); - subtreeCount += mapIntoArray( - child, - array, - escapedPrefix, - nextName, - callback - ); - } - } else if (type === "object") { - if (typeof children.then === "function") { - return mapIntoArray( - resolveThenable(children), - array, - escapedPrefix, - nameSoFar, - callback - ); - } // eslint-disable-next-line react-internal/safe-string-coercion + function getDeclarationErrorAddendum() { + { + if (ReactCurrentOwner.current) { + var name = getComponentNameFromType(ReactCurrentOwner.current.type); - var childrenString = String(children); - throw new Error( - "Objects are not valid as a React child (found: " + - (childrenString === "[object Object]" - ? "object with keys {" + Object.keys(children).join(", ") + "}" - : childrenString) + - "). " + - "If you meant to render a collection of children, use an array " + - "instead." - ); + if (name) { + return "\n\nCheck the render method of `" + name + "`."; + } } - } - return subtreeCount; + return ""; + } } - /** - * Maps children that are typically specified as `props.children`. - * - * See https://reactjs.org/docs/react-api.html#reactchildrenmap - * - * The provided mapFunction(child, index) will be called for each - * leaf child. - * - * @param {?*} children Children tree container. - * @param {function(*, int)} func The map function. - * @param {*} context Context for mapFunction. - * @return {object} Object containing the ordered map of results. - */ - function mapChildren(children, func, context) { - if (children == null) { - // $FlowFixMe limitation refining abstract types in Flow - return children; + function getSourceInfoErrorAddendumForProps(elementProps) { + if (elementProps !== null && elementProps !== undefined) { + return getSourceInfoErrorAddendum(elementProps.__source); } - var result = []; - var count = 0; - mapIntoArray(children, result, "", "", function (child) { - return func.call(context, child, count++); - }); - return result; + return ""; } - /** - * Count the number of children that are typically specified as - * `props.children`. - * - * See https://reactjs.org/docs/react-api.html#reactchildrencount - * - * @param {?*} children Children tree container. - * @return {number} The number of children. - */ - function countChildren(children) { - var n = 0; - mapChildren(children, function () { - n++; // Don't return anything - }); - return n; + function getSourceInfoErrorAddendum(source) { + { + if (source !== undefined) { + var fileName = source.fileName.replace(/^.*[\\\/]/, ""); + var lineNumber = source.lineNumber; + return "\n\nCheck your code at " + fileName + ":" + lineNumber + "."; + } + + return ""; + } } /** - * Iterates through children that are typically specified as `props.children`. - * - * See https://reactjs.org/docs/react-api.html#reactchildrenforeach - * - * The provided forEachFunc(child, index) will be called for each - * leaf child. + * 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. * - * @param {?*} children Children tree container. - * @param {function(*, int)} forEachFunc - * @param {*} forEachContext Context for forEachContext. + * @internal + * @param {ReactNode} node Statically passed child of any type. + * @param {*} parentType node's parent's type. */ - function forEachChildren(children, forEachFunc, forEachContext) { - mapChildren( - children, // $FlowFixMe[missing-this-annot] - function () { - forEachFunc.apply(this, arguments); // Don't return anything. - }, - forEachContext - ); + function validateChildKeys(node, parentType) { + { + if (typeof node !== "object" || !node) { + return; + } + + if (node.$$typeof === REACT_CLIENT_REFERENCE); + else if (isArray(node)) { + for (var i = 0; i < node.length; i++) { + var child = node[i]; + + 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); + } + } + } + } + } + } } /** - * Flatten a children object (typically specified as `props.children`) and - * return an array with appropriately re-keyed children. - * - * See https://reactjs.org/docs/react-api.html#reactchildrentoarray + * 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 toArray(children) { + function isValidElement(object) { return ( - mapChildren(children, function (child) { - return child; - }) || [] + typeof object === "object" && + object !== null && + object.$$typeof === REACT_ELEMENT_TYPE ); } + var ownerHasKeyUseWarning = {}; /** - * Returns the first child in a collection of children and verifies that there - * is only one child in the collection. - * - * See https://reactjs.org/docs/react-api.html#reactchildrenonly - * - * The current implementation of this function assumes that a single child gets - * passed without a wrapper, but the purpose of this helper function is to - * abstract away the particular structure of children. + * 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 + * reordered. All children that haven't already been validated are required to + * have a "key" property assigned to it. Error statuses are cached so a warning + * will only be shown once. * - * @param {?object} children Child collection structure. - * @return {ReactElement} The first and only `ReactElement` contained in the - * structure. + * @internal + * @param {ReactElement} element Element that requires a key. + * @param {*} parentType element's parent's type. */ - function onlyChild(children) { - if (!isValidElement$1(children)) { - throw new Error( - "React.Children.only expected to receive a single React element child." - ); - } + function validateExplicitKey(element, parentType) { + { + if ( + !element._store || + element._store.validated || + element.key != null + ) { + return; + } - return children; - } + element._store.validated = true; + var currentComponentErrorInfo = + getCurrentComponentErrorInfo(parentType); - function createContext(defaultValue) { - // TODO: Second argument used to be an optional `calculateChangedBits` - // function. Warn to reserve for future use? - var context = { - $$typeof: REACT_CONTEXT_TYPE, - // As a workaround to support multiple concurrent renderers, we categorize - // some renderers as primary and others as secondary. We only expect - // there to be two concurrent renderers at most: React Native (primary) and - // Fabric (secondary); React DOM (primary) and React ART (secondary). - // Secondary renderers store their context values on separate fields. - _currentValue: defaultValue, - _currentValue2: defaultValue, - // Used to track how many concurrent renderers this context currently - // supports within in a single renderer. Such as parallel server rendering. - _threadCount: 0, - // These are circular - Provider: null, - Consumer: null - }; + if (ownerHasKeyUseWarning[currentComponentErrorInfo]) { + return; + } - if (enableRenderableContext) { - context.Provider = context; - context.Consumer = { - $$typeof: REACT_CONSUMER_TYPE, - _context: context - }; - } else { - context.Provider = { - $$typeof: REACT_PROVIDER_TYPE, - _context: context - }; + ownerHasKeyUseWarning[currentComponentErrorInfo] = true; // Usually the current owner is the offender, but if it accepts children as a + // property, it may be the creator of the child that's responsible for + // assigning it a key. - { - var Consumer = { - $$typeof: REACT_CONTEXT_TYPE, - _context: context - }; - Object.defineProperties(Consumer, { - Provider: { - get: function () { - return context.Provider; - }, - set: function (_Provider) { - context.Provider = _Provider; - } - }, - _currentValue: { - get: function () { - return context._currentValue; - }, - set: function (_currentValue) { - context._currentValue = _currentValue; - } - }, - _currentValue2: { - get: function () { - return context._currentValue2; - }, - set: function (_currentValue2) { - context._currentValue2 = _currentValue2; - } - }, - _threadCount: { - get: function () { - return context._threadCount; - }, - set: function (_threadCount) { - context._threadCount = _threadCount; - } - }, - Consumer: { - get: function () { - return context.Consumer; - } - }, - displayName: { - get: function () { - return context.displayName; - }, - set: function (displayName) {} - } - }); - context.Consumer = Consumer; + var childOwner = ""; + + if ( + element && + element._owner && + element._owner !== ReactCurrentOwner.current + ) { + // Give the component that originally created this child. + childOwner = + " It was passed a child from " + + getComponentNameFromType(element._owner.type) + + "."; } + + setCurrentlyValidatingElement(element); + + error( + 'Each child in a list should have a unique "key" prop.' + + "%s%s See https://reactjs.org/link/warning-keys for more information.", + currentComponentErrorInfo, + childOwner + ); + + setCurrentlyValidatingElement(null); } + } + function setCurrentlyValidatingElement(element) { { - context._currentRenderer = null; - context._currentRenderer2 = null; + if (element) { + var owner = element._owner; + var stack = describeUnknownElementTypeFrameInDEV( + element.type, + owner ? owner.type : null + ); + ReactDebugCurrentFrame.setExtraStackFrame(stack); + } else { + ReactDebugCurrentFrame.setExtraStackFrame(null); + } } - - return context; } - var Uninitialized = -1; - var Pending = 0; - var Resolved = 1; - var Rejected = 2; + function getCurrentComponentErrorInfo(parentType) { + { + var info = getDeclarationErrorAddendum(); - function lazyInitializer(payload) { - if (payload._status === Uninitialized) { - var ctor = payload._result; - var thenable = ctor(); // Transition to the next state. - // This might throw either because it's missing or throws. If so, we treat it - // as still uninitialized and try again next time. Which is the same as what - // happens if the ctor or any wrappers processing the ctor throws. This might - // end up fixing it if the resolution was a concurrency bug. + if (!info) { + var parentName = getComponentNameFromType(parentType); - thenable.then( - function (moduleObject) { - if ( - payload._status === Pending || - payload._status === Uninitialized - ) { - // Transition to the next state. - var resolved = payload; - resolved._status = Resolved; - resolved._result = moduleObject; - } - }, - function (error) { - if ( - payload._status === Pending || - payload._status === Uninitialized - ) { - // Transition to the next state. - var rejected = payload; - rejected._status = Rejected; - rejected._result = error; - } + if (parentName) { + info = + "\n\nCheck the top-level render call using <" + parentName + ">."; } - ); - - if (payload._status === Uninitialized) { - // In case, we're still uninitialized, then we're waiting for the thenable - // to resolve. Set it as pending in the meantime. - var pending = payload; - pending._status = Pending; - pending._result = thenable; } + + return info; } + } + /** + * Given a fragment, validate that it can only be provided with fragment props + * @param {ReactElement} fragment + */ - if (payload._status === Resolved) { - var moduleObject = payload._result; + 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); - { - if (moduleObject === undefined) { error( - "lazy: Expected the result of a dynamic imp" + - "ort() call. " + - "Instead received: %s\n\nYour code should look like: \n " + // Break up imports to avoid accidentally parsing them as dependencies. - "const MyComponent = lazy(() => imp" + - "ort('./MyComponent'))\n\n" + - "Did you accidentally put curly braces around the import?", - moduleObject + "Invalid prop `%s` supplied to `React.Fragment`. " + + "React.Fragment can only have `key` and `children` props.", + key ); + + setCurrentlyValidatingElement(null); + break; } } - { - if (!("default" in moduleObject)) { - error( - "lazy: Expected the result of a dynamic imp" + - "ort() call. " + - "Instead received: %s\n\nYour code should look like: \n " + // Break up imports to avoid accidentally parsing them as dependencies. - "const MyComponent = lazy(() => imp" + - "ort('./MyComponent'))", - moduleObject - ); - } - } + if (fragment.ref !== null) { + setCurrentlyValidatingElement(fragment); - return moduleObject.default; - } else { - throw payload._result; + error("Invalid attribute `ref` supplied to `React.Fragment`."); + + setCurrentlyValidatingElement(null); + } } } - function lazy(ctor) { - var payload = { - // We use these fields to store the result. - _status: Uninitialized, - _result: ctor - }; - var lazyType = { - $$typeof: REACT_LAZY_TYPE, - _payload: payload, - _init: lazyInitializer - }; + var propTypesMisspellWarningShown = false; + /** + * Given an element, validate that its props follow the propTypes definition, + * provided by the type. + * + * @param {ReactElement} element + */ + function validatePropTypes(element) { { - // In production, this would just set it on the object. - var defaultProps; - var propTypes; // $FlowFixMe[prop-missing] + var type = element.type; - Object.defineProperties(lazyType, { - defaultProps: { - configurable: true, - get: function () { - return defaultProps; - }, - // $FlowFixMe[missing-local-annot] - set: function (newDefaultProps) { - error( - "React.lazy(...): It is not supported to assign `defaultProps` to " + - "a lazy component import. Either specify them where the component " + - "is defined, or create a wrapping component around it." - ); + if (type === null || type === undefined || typeof type === "string") { + return; + } - defaultProps = newDefaultProps; // Match production behavior more closely: - // $FlowFixMe[prop-missing] + if (type.$$typeof === REACT_CLIENT_REFERENCE) { + return; + } - Object.defineProperty(lazyType, "defaultProps", { - enumerable: true - }); - } - }, - propTypes: { - configurable: true, - get: function () { - return propTypes; - }, - // $FlowFixMe[missing-local-annot] - set: function (newPropTypes) { - error( - "React.lazy(...): It is not supported to assign `propTypes` to " + - "a lazy component import. Either specify them where the component " + - "is defined, or create a wrapping component around it." - ); + var propTypes; - propTypes = newPropTypes; // Match production behavior more closely: - // $FlowFixMe[prop-missing] + if (typeof type === "function") { + propTypes = type.propTypes; + } else if ( + typeof type === "object" && + (type.$$typeof === REACT_FORWARD_REF_TYPE || // Note: Memo only checks outer props here. + // Inner props are checked in the reconciler. + type.$$typeof === REACT_MEMO_TYPE) + ) { + propTypes = type.propTypes; + } else { + return; + } - Object.defineProperty(lazyType, "propTypes", { - enumerable: true - }); - } - } - }); - } + if (propTypes) { + // Intentionally inside to avoid triggering lazy initializers: + var name = getComponentNameFromType(type); + checkPropTypes(propTypes, element.props, "prop", name, element); + } else if ( + type.PropTypes !== undefined && + !propTypesMisspellWarningShown + ) { + propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers: - return lazyType; - } + var _name = getComponentNameFromType(type); - function forwardRef(render) { - { - if (render != null && render.$$typeof === REACT_MEMO_TYPE) { - error( - "forwardRef requires a render function but received a `memo` " + - "component. Instead of forwardRef(memo(...)), use " + - "memo(forwardRef(...))." - ); - } else if (typeof render !== "function") { error( - "forwardRef requires a render function but was given %s.", - render === null ? "null" : typeof render + "Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", + _name || "Unknown" ); - } else { - if (render.length !== 0 && render.length !== 2) { - error( - "forwardRef render functions accept exactly two parameters: props and ref. %s", - render.length === 1 - ? "Did you forget to use the ref parameter?" - : "Any additional parameter will be undefined." - ); - } } - if (render != null) { - if (render.defaultProps != null) { - error( - "forwardRef render functions do not support defaultProps. " + - "Did you accidentally pass a React component?" - ); - } + if ( + typeof type.getDefaultProps === "function" && + !type.getDefaultProps.isReactClassApproved + ) { + error( + "getDefaultProps is only used on classic React.createClass " + + "definitions. Use a static property named `defaultProps` instead." + ); } } + } - var elementType = { - $$typeof: REACT_FORWARD_REF_TYPE, - render: render - }; + var SEPARATOR = "."; + var SUBSEPARATOR = ":"; + /** + * Escape and wrap key so it is safe to use as a reactid + * + * @param {string} key to be escaped. + * @return {string} the escaped key. + */ - { - var ownName; - Object.defineProperty(elementType, "displayName", { - enumerable: false, - configurable: true, - get: function () { - return ownName; - }, - set: function (name) { - ownName = name; // The inner component shouldn't inherit this display name in most cases, - // because the component may be used elsewhere. - // But it's nice for anonymous functions to inherit the name, - // so that our component-stack generation logic will display their frames. - // An anonymous function generally suggests a pattern like: - // React.forwardRef((props, ref) => {...}); - // This kind of inner function is not used elsewhere so the side effect is okay. + function escape(key) { + var escapeRegex = /[=:]/g; + var escaperLookup = { + "=": "=0", + ":": "=2" + }; + var escapedString = key.replace(escapeRegex, function (match) { + return escaperLookup[match]; + }); + return "$" + escapedString; + } + /** + * TODO: Test that a single child and an array with one item have the same key + * pattern. + */ - if (!render.name && !render.displayName) { - render.displayName = name; - } - } - }); - } + var didWarnAboutMaps = false; + var userProvidedKeyEscapeRegex = /\/+/g; - return elementType; + function escapeUserProvidedKey(text) { + return text.replace(userProvidedKeyEscapeRegex, "$&/"); } + /** + * Generate a key string that identifies a element within a set. + * + * @param {*} element A element that could contain a manual key. + * @param {number} index Index that is used if a manual key is not provided. + * @return {string} + */ - function memo(type, compare) { - { - if (!isValidElementType(type)) { - error( - "memo: The first argument must be a component. Instead " + - "received: %s", - type === null ? "null" : typeof type - ); + function getElementKey(element, index) { + // Do some typechecking here since we call this blindly. We want to ensure + // that we don't block potential future ES APIs. + if ( + typeof element === "object" && + element !== null && + element.key != null + ) { + // Explicit key + { + checkKeyStringCoercion(element.key); } - } - var elementType = { - $$typeof: REACT_MEMO_TYPE, - type: type, - compare: compare === undefined ? null : compare - }; + return escape("" + element.key); + } // Implicit key determined by the index in the set - { - var ownName; - Object.defineProperty(elementType, "displayName", { - enumerable: false, - configurable: true, - get: function () { - return ownName; - }, - set: function (name) { - ownName = name; // The inner component shouldn't inherit this display name in most cases, - // because the component may be used elsewhere. - // But it's nice for anonymous functions to inherit the name, - // so that our component-stack generation logic will display their frames. - // An anonymous function generally suggests a pattern like: - // React.memo((props) => {...}); - // This kind of inner function is not used elsewhere so the side effect is okay. + return index.toString(36); + } - if (!type.name && !type.displayName) { - type.displayName = name; - } - } - }); - } + function noop$1() {} - return elementType; - } + function resolveThenable(thenable) { + switch (thenable.status) { + case "fulfilled": { + var fulfilledValue = thenable.value; + return fulfilledValue; + } - function noopCache(fn) { - // On the client (i.e. not a Server Components environment) `cache` has - // no caching behavior. We just return the function as-is. - // - // We intend to implement client caching in a future major release. In the - // meantime, it's only exposed as an API so that Shared Components can use - // per-request caching on the server without breaking on the client. But it - // does mean they need to be aware of the behavioral difference. - // - // The rest of the behavior is the same as the server implementation — it - // returns a new reference, extra properties like `displayName` are not - // preserved, the length of the new function is 0, etc. That way apps can't - // accidentally depend on those details. - return function () { - // $FlowFixMe[incompatible-call]: We don't want to use rest arguments since we transpile the code. - return fn.apply(null, arguments); - }; - } - var cache = noopCache; + case "rejected": { + var rejectedError = thenable.reason; + throw rejectedError; + } - function resolveDispatcher() { - var dispatcher = ReactCurrentDispatcher$1.current; + default: { + if (typeof thenable.status === "string") { + // Only instrument the thenable if the status if not defined. If + // it's defined, but an unknown value, assume it's been instrumented by + // some custom userspace implementation. We treat it as "pending". + // Attach a dummy listener, to ensure that any lazy initialization can + // happen. Flight lazily parses JSON when the value is actually awaited. + thenable.then(noop$1, noop$1); + } else { + // This is an uncached thenable that we haven't seen before. + // TODO: Detect infinite ping loops caused by uncached promises. + var pendingThenable = thenable; + pendingThenable.status = "pending"; + pendingThenable.then( + function (fulfilledValue) { + if (thenable.status === "pending") { + var fulfilledThenable = thenable; + fulfilledThenable.status = "fulfilled"; + fulfilledThenable.value = fulfilledValue; + } + }, + function (error) { + if (thenable.status === "pending") { + var rejectedThenable = thenable; + rejectedThenable.status = "rejected"; + rejectedThenable.reason = error; + } + } + ); + } // Check one more time in case the thenable resolved synchronously. - { - if (dispatcher === null) { - error( - "Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for" + - " one of the following reasons:\n" + - "1. You might have mismatching versions of React and the renderer (such as React DOM)\n" + - "2. You might be breaking the Rules of Hooks\n" + - "3. You might have more than one copy of React in the same app\n" + - "See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem." - ); + switch (thenable.status) { + case "fulfilled": { + var fulfilledThenable = thenable; + return fulfilledThenable.value; + } + + case "rejected": { + var rejectedThenable = thenable; + var _rejectedError = rejectedThenable.reason; + throw _rejectedError; + } + } } - } // Will result in a null access error if accessed outside render phase. We - // intentionally don't throw our own error because this is in a hot path. - // Also helps ensure this is inlined. + } - return dispatcher; + throw thenable; } - function getCacheSignal() { - var dispatcher = ReactCurrentCache.current; + function mapIntoArray(children, array, escapedPrefix, nameSoFar, callback) { + var type = typeof children; - if (!dispatcher) { - // If we have no cache to associate with this call, then we don't know - // its lifetime. We abort early since that's safer than letting it live - // for ever. Unlike just caching which can be a functional noop outside - // of React, these should generally always be associated with some React - // render but we're not limiting quite as much as making it a Hook. - // It's safer than erroring early at runtime. - var controller = new AbortController(); - var reason = new Error( - "This CacheSignal was requested outside React which means that it is " + - "immediately aborted." - ); - controller.abort(reason); - return controller.signal; + if (type === "undefined" || type === "boolean") { + // All of the above are perceived as null. + children = null; } - return dispatcher.getCacheSignal(); - } - function getCacheForType(resourceType) { - var dispatcher = ReactCurrentCache.current; + var invokeCallback = false; - if (!dispatcher) { - // If there is no dispatcher, then we treat this as not being cached. - return resourceType(); - } + if (children === null) { + invokeCallback = true; + } else { + switch (type) { + case "string": + case "number": + invokeCallback = true; + break; - return dispatcher.getCacheForType(resourceType); - } - function useContext(Context) { - var dispatcher = resolveDispatcher(); + case "object": + switch (children.$$typeof) { + case REACT_ELEMENT_TYPE: + case REACT_PORTAL_TYPE: + invokeCallback = true; + break; - { - if (Context.$$typeof === REACT_CONSUMER_TYPE) { - error( - "Calling useContext(Context.Consumer) is not supported and will cause bugs. " + - "Did you mean to call useContext(Context) instead?" - ); + case REACT_LAZY_TYPE: + var payload = children._payload; + var init = children._init; + return mapIntoArray( + init(payload), + array, + escapedPrefix, + nameSoFar, + callback + ); + } } } - return dispatcher.useContext(Context); - } - function useState(initialState) { - var dispatcher = resolveDispatcher(); - return dispatcher.useState(initialState); - } - function useReducer(reducer, initialArg, init) { - var dispatcher = resolveDispatcher(); - return dispatcher.useReducer(reducer, initialArg, init); - } - function useRef(initialValue) { - var dispatcher = resolveDispatcher(); - return dispatcher.useRef(initialValue); - } - function useEffect(create, deps) { - var dispatcher = resolveDispatcher(); - return dispatcher.useEffect(create, deps); - } - function useInsertionEffect(create, deps) { - var dispatcher = resolveDispatcher(); - return dispatcher.useInsertionEffect(create, deps); - } - function useLayoutEffect(create, deps) { - var dispatcher = resolveDispatcher(); - return dispatcher.useLayoutEffect(create, deps); - } - function useCallback(callback, deps) { - var dispatcher = resolveDispatcher(); - return dispatcher.useCallback(callback, deps); - } - function useMemo(create, deps) { - var dispatcher = resolveDispatcher(); - return dispatcher.useMemo(create, deps); - } - function useImperativeHandle(ref, create, deps) { - var dispatcher = resolveDispatcher(); - return dispatcher.useImperativeHandle(ref, create, deps); - } - function useDebugValue(value, formatterFn) { - { - var dispatcher = resolveDispatcher(); - return dispatcher.useDebugValue(value, formatterFn); - } - } - function useTransition() { - var dispatcher = resolveDispatcher(); - return dispatcher.useTransition(); - } - function useDeferredValue(value, initialValue) { - var dispatcher = resolveDispatcher(); - return dispatcher.useDeferredValue(value, initialValue); - } - function useId() { - var dispatcher = resolveDispatcher(); - return dispatcher.useId(); - } - function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) { - var dispatcher = resolveDispatcher(); - return dispatcher.useSyncExternalStore( - subscribe, - getSnapshot, - getServerSnapshot - ); - } - function useCacheRefresh() { - var dispatcher = resolveDispatcher(); // $FlowFixMe[not-a-function] This is unstable, thus optional + if (invokeCallback) { + var _child = children; + var mappedChild = callback(_child); // If it's the only child, treat the name as if it was wrapped in an array + // so that it's consistent if the number of children grows: - return dispatcher.useCacheRefresh(); - } - function use(usable) { - var dispatcher = resolveDispatcher(); - return dispatcher.use(usable); - } - function useMemoCache(size) { - var dispatcher = resolveDispatcher(); // $FlowFixMe[not-a-function] This is unstable, thus optional + var childKey = + nameSoFar === "" ? SEPARATOR + getElementKey(_child, 0) : nameSoFar; - return dispatcher.useMemoCache(size); - } - function useEffectEvent(callback) { - var dispatcher = resolveDispatcher(); // $FlowFixMe[not-a-function] This is unstable, thus optional + if (isArray(mappedChild)) { + var escapedChildKey = ""; - return dispatcher.useEffectEvent(callback); - } - function useOptimistic(passthrough, reducer) { - var dispatcher = resolveDispatcher(); // $FlowFixMe[not-a-function] This is unstable, thus optional + if (childKey != null) { + escapedChildKey = escapeUserProvidedKey(childKey) + "/"; + } - return dispatcher.useOptimistic(passthrough, reducer); - } - - function startTransition(scope, options) { - var prevTransition = ReactCurrentBatchConfig.transition; // Each renderer registers a callback to receive the return value of - // the scope function. This is used to implement async actions. - - var callbacks = new Set(); - var transition = { - _callbacks: callbacks - }; - ReactCurrentBatchConfig.transition = transition; - var currentTransition = ReactCurrentBatchConfig.transition; - - { - ReactCurrentBatchConfig.transition._updatedFibers = new Set(); - } + mapIntoArray(mappedChild, array, escapedChildKey, "", function (c) { + return c; + }); + } else if (mappedChild != null) { + if (isValidElement(mappedChild)) { + { + // The `if` statement here prevents auto-disabling of the safe + // coercion ESLint rule, so we must manually disable it below. + // $FlowFixMe[incompatible-type] Flow incorrectly thinks React.Portal doesn't have a key + if ( + mappedChild.key && + (!_child || _child.key !== mappedChild.key) + ) { + checkKeyStringCoercion(mappedChild.key); + } + } - if (enableTransitionTracing) { - if (options !== undefined && options.name !== undefined) { - // $FlowFixMe[incompatible-use] found when upgrading Flow - ReactCurrentBatchConfig.transition.name = options.name; // $FlowFixMe[incompatible-use] found when upgrading Flow + mappedChild = cloneAndReplaceKey( + mappedChild, // Keep both the (mapped) and old keys if they differ, just as + // traverseAllChildren used to do for objects as children + escapedPrefix + // $FlowFixMe[incompatible-type] Flow incorrectly thinks React.Portal doesn't have a key + (mappedChild.key && (!_child || _child.key !== mappedChild.key) + ? escapeUserProvidedKey( + // $FlowFixMe[unsafe-addition] + "" + mappedChild.key // eslint-disable-line react-internal/safe-string-coercion + ) + "/" + : "") + + childKey + ); + } - ReactCurrentBatchConfig.transition.startTime = -1; + array.push(mappedChild); } - } - { - try { - var returnValue = scope(); - - if ( - typeof returnValue === "object" && - returnValue !== null && - typeof returnValue.then === "function" - ) { - callbacks.forEach(function (callback) { - return callback(currentTransition, returnValue); - }); - returnValue.then(noop, onError); - } - } catch (error) { - onError(error); - } finally { - warnAboutTransitionSubscriptions(prevTransition, currentTransition); - ReactCurrentBatchConfig.transition = prevTransition; - } + return 1; } - } - function warnAboutTransitionSubscriptions( - prevTransition, - currentTransition - ) { - { - if (prevTransition === null && currentTransition._updatedFibers) { - var updatedFibersCount = currentTransition._updatedFibers.size; + var child; + var nextName; + var subtreeCount = 0; // Count of children found in the current subtree. - currentTransition._updatedFibers.clear(); + var nextNamePrefix = + nameSoFar === "" ? SEPARATOR : nameSoFar + SUBSEPARATOR; - if (updatedFibersCount > 10) { - warn( - "Detected a large number of updates inside startTransition. " + - "If this is due to a subscription please re-write it to use React provided hooks. " + - "Otherwise concurrent mode guarantees are off the table." - ); - } + if (isArray(children)) { + for (var i = 0; i < children.length; i++) { + child = children[i]; + nextName = nextNamePrefix + getElementKey(child, i); + subtreeCount += mapIntoArray( + child, + array, + escapedPrefix, + nextName, + callback + ); } - } - } + } else { + var iteratorFn = getIteratorFn(children); - function noop() {} // Use reportError, if it exists. Otherwise console.error. This is the same as - // the default for onRecoverableError. + if (typeof iteratorFn === "function") { + var iterableChildren = children; - var onError = - typeof reportError === "function" // In modern browsers, reportError will dispatch an error event, - ? // emulating an uncaught JavaScript error. - reportError - : function (error) { - // In older browsers and test environments, fallback to console.error. - // eslint-disable-next-line react-internal/no-production-logging - console["error"](error); - }; + { + // Warn about using Maps as children + if (iteratorFn === iterableChildren.entries) { + if (!didWarnAboutMaps) { + warn( + "Using Maps as children is not supported. " + + "Use an array of keyed ReactElements instead." + ); + } - var didWarnAboutMessageChannel = false; - var enqueueTaskImpl = null; - function enqueueTask(task) { - if (enqueueTaskImpl === null) { - try { - // read require off the module object to get around the bundlers. - // we don't want them to detect a require and bundle a Node polyfill. - var requireString = ("require" + Math.random()).slice(0, 7); - var nodeRequire = module && module[requireString]; // assuming we're in node, let's try to get node's - // version of setImmediate, bypassing fake timers if any. + didWarnAboutMaps = true; + } + } - enqueueTaskImpl = nodeRequire.call(module, "timers").setImmediate; - } catch (_err) { - // we're in a browser - // we can't use regular timers because they may still be faked - // so we try MessageChannel+postMessage instead - enqueueTaskImpl = function (callback) { - { - if (didWarnAboutMessageChannel === false) { - didWarnAboutMessageChannel = true; + var iterator = iteratorFn.call(iterableChildren); + var step; + var ii = 0; // $FlowFixMe[incompatible-use] `iteratorFn` might return null according to typing. - if (typeof MessageChannel === "undefined") { - error( - "This browser does not have a MessageChannel implementation, " + - "so enqueuing tasks via await act(async () => ...) will fail. " + - "Please file an issue at https://github.com/facebook/react/issues " + - "if you encounter this warning." - ); - } - } - } + while (!(step = iterator.next()).done) { + child = step.value; + nextName = nextNamePrefix + getElementKey(child, ii++); + subtreeCount += mapIntoArray( + child, + array, + escapedPrefix, + nextName, + callback + ); + } + } else if (type === "object") { + if (typeof children.then === "function") { + return mapIntoArray( + resolveThenable(children), + array, + escapedPrefix, + nameSoFar, + callback + ); + } // eslint-disable-next-line react-internal/safe-string-coercion - var channel = new MessageChannel(); - channel.port1.onmessage = callback; - channel.port2.postMessage(undefined); - }; + var childrenString = String(children); + throw new Error( + "Objects are not valid as a React child (found: " + + (childrenString === "[object Object]" + ? "object with keys {" + Object.keys(children).join(", ") + "}" + : childrenString) + + "). " + + "If you meant to render a collection of children, use an array " + + "instead." + ); } } - return enqueueTaskImpl(task); + return subtreeCount; } + /** + * Maps children that are typically specified as `props.children`. + * + * See https://reactjs.org/docs/react-api.html#reactchildrenmap + * + * The provided mapFunction(child, index) will be called for each + * leaf child. + * + * @param {?*} children Children tree container. + * @param {function(*, int)} func The map function. + * @param {*} context Context for mapFunction. + * @return {object} Object containing the ordered map of results. + */ - // number of `act` scopes on the stack. - - var actScopeDepth = 0; // We only warn the first time you neglect to await an async `act` scope. - - var didWarnNoAwaitAct = false; - function act(callback) { - { - // When ReactCurrentActQueue.current is not null, it signals to React that - // we're currently inside an `act` scope. React will push all its tasks to - // this queue instead of scheduling them with platform APIs. - // - // We set this to an empty array when we first enter an `act` scope, and - // only unset it once we've left the outermost `act` scope — remember that - // `act` calls can be nested. - // - // If we're already inside an `act` scope, reuse the existing queue. - var prevIsBatchingLegacy = ReactCurrentActQueue.isBatchingLegacy; - var prevActQueue = ReactCurrentActQueue.current; - var prevActScopeDepth = actScopeDepth; - actScopeDepth++; - var queue = (ReactCurrentActQueue.current = - prevActQueue !== null ? prevActQueue : []); // Used to reproduce behavior of `batchedUpdates` in legacy mode. Only - // set to `true` while the given callback is executed, not for updates - // triggered during an async event, because this is how the legacy - // implementation of `act` behaved. - - ReactCurrentActQueue.isBatchingLegacy = true; - var result; // This tracks whether the `act` call is awaited. In certain cases, not - // awaiting it is a mistake, so we will detect that and warn. - - var didAwaitActCall = false; - - try { - // Reset this to `false` right before entering the React work loop. The - // only place we ever read this fields is just below, right after running - // the callback. So we don't need to reset after the callback runs. - ReactCurrentActQueue.didScheduleLegacyUpdate = false; - result = callback(); - var didScheduleLegacyUpdate = - ReactCurrentActQueue.didScheduleLegacyUpdate; // Replicate behavior of original `act` implementation in legacy mode, - // which flushed updates immediately after the scope function exits, even - // if it's an async function. - - if (!prevIsBatchingLegacy && didScheduleLegacyUpdate) { - flushActQueue(queue); - } // `isBatchingLegacy` gets reset using the regular stack, not the async - // one used to track `act` scopes. Why, you may be wondering? Because - // that's how it worked before version 18. Yes, it's confusing! We should - // delete legacy mode!! - - ReactCurrentActQueue.isBatchingLegacy = prevIsBatchingLegacy; - } catch (error) { - // `isBatchingLegacy` gets reset using the regular stack, not the async - // one used to track `act` scopes. Why, you may be wondering? Because - // that's how it worked before version 18. Yes, it's confusing! We should - // delete legacy mode!! - ReactCurrentActQueue.isBatchingLegacy = prevIsBatchingLegacy; - popActScope(prevActQueue, prevActScopeDepth); - throw error; - } - - if ( - result !== null && - typeof result === "object" && // $FlowFixMe[method-unbinding] - typeof result.then === "function" - ) { - // A promise/thenable was returned from the callback. Wait for it to - // resolve before flushing the queue. - // - // If `act` were implemented as an async function, this whole block could - // be a single `await` call. That's really the only difference between - // this branch and the next one. - var thenable = result; // Warn if the an `act` call with an async scope is not awaited. In a - // future release, consider making this an error. - - queueSeveralMicrotasks(function () { - if (!didAwaitActCall && !didWarnNoAwaitAct) { - didWarnNoAwaitAct = true; - - error( - "You called act(async () => ...) without await. " + - "This could lead to unexpected testing behaviour, " + - "interleaving multiple act calls and mixing their " + - "scopes. " + - "You should - await act(async () => ...);" - ); - } - }); - return { - then: function (resolve, reject) { - didAwaitActCall = true; - thenable.then( - function (returnValue) { - popActScope(prevActQueue, prevActScopeDepth); - - if (prevActScopeDepth === 0) { - // We're exiting the outermost `act` scope. Flush the queue. - try { - flushActQueue(queue); - enqueueTask(function () { - return ( - // Recursively flush tasks scheduled by a microtask. - recursivelyFlushAsyncActWork( - returnValue, - resolve, - reject - ) - ); - }); - } catch (error) { - // `thenable` might not be a real promise, and `flushActQueue` - // might throw, so we need to wrap `flushActQueue` in a - // try/catch. - reject(error); - } - } else { - resolve(returnValue); - } - }, - function (error) { - popActScope(prevActQueue, prevActScopeDepth); - reject(error); - } - ); - } - }; - } else { - var returnValue = result; // The callback is not an async function. Exit the current - // scope immediately. - - popActScope(prevActQueue, prevActScopeDepth); - - if (prevActScopeDepth === 0) { - // We're exiting the outermost `act` scope. Flush the queue. - flushActQueue(queue); // If the queue is not empty, it implies that we intentionally yielded - // to the main thread, because something suspended. We will continue - // in an asynchronous task. - // - // Warn if something suspends but the `act` call is not awaited. - // In a future release, consider making this an error. - - if (queue.length !== 0) { - queueSeveralMicrotasks(function () { - if (!didAwaitActCall && !didWarnNoAwaitAct) { - didWarnNoAwaitAct = true; - - error( - "A component suspended inside an `act` scope, but the " + - "`act` call was not awaited. When testing React " + - "components that depend on asynchronous data, you must " + - "await the result:\n\n" + - "await act(() => ...)" - ); - } - }); - } // Like many things in this module, this is next part is confusing. - // - // We do not currently require every `act` call that is passed a - // callback to be awaited, through arguably we should. Since this - // callback was synchronous, we need to exit the current scope before - // returning. - // - // However, if thenable we're about to return *is* awaited, we'll - // immediately restore the current scope. So it shouldn't observable. - // - // This doesn't affect the case where the scope callback is async, - // because we always require those calls to be awaited. - // - // TODO: In a future version, consider always requiring all `act` calls - // to be awaited, regardless of whether the callback is sync or async. + function mapChildren(children, func, context) { + if (children == null) { + // $FlowFixMe limitation refining abstract types in Flow + return children; + } - ReactCurrentActQueue.current = null; - } + var result = []; + var count = 0; + mapIntoArray(children, result, "", "", function (child) { + return func.call(context, child, count++); + }); + return result; + } + /** + * Count the number of children that are typically specified as + * `props.children`. + * + * See https://reactjs.org/docs/react-api.html#reactchildrencount + * + * @param {?*} children Children tree container. + * @return {number} The number of children. + */ - return { - then: function (resolve, reject) { - didAwaitActCall = true; + function countChildren(children) { + var n = 0; + mapChildren(children, function () { + n++; // Don't return anything + }); + return n; + } + /** + * Iterates through children that are typically specified as `props.children`. + * + * See https://reactjs.org/docs/react-api.html#reactchildrenforeach + * + * The provided forEachFunc(child, index) will be called for each + * leaf child. + * + * @param {?*} children Children tree container. + * @param {function(*, int)} forEachFunc + * @param {*} forEachContext Context for forEachContext. + */ - if (prevActScopeDepth === 0) { - // If the `act` call is awaited, restore the queue we were - // using before (see long comment above) so we can flush it. - ReactCurrentActQueue.current = queue; - enqueueTask(function () { - return ( - // Recursively flush tasks scheduled by a microtask. - recursivelyFlushAsyncActWork(returnValue, resolve, reject) - ); - }); - } else { - resolve(returnValue); - } - } - }; - } - } + function forEachChildren(children, forEachFunc, forEachContext) { + mapChildren( + children, // $FlowFixMe[missing-this-annot] + function () { + forEachFunc.apply(this, arguments); // Don't return anything. + }, + forEachContext + ); } + /** + * Flatten a children object (typically specified as `props.children`) and + * return an array with appropriately re-keyed children. + * + * See https://reactjs.org/docs/react-api.html#reactchildrentoarray + */ - function popActScope(prevActQueue, prevActScopeDepth) { - { - if (prevActScopeDepth !== actScopeDepth - 1) { - error( - "You seem to have overlapping act() calls, this is not supported. " + - "Be sure to await previous act() calls before making a new one. " - ); - } + function toArray(children) { + return ( + mapChildren(children, function (child) { + return child; + }) || [] + ); + } + /** + * Returns the first child in a collection of children and verifies that there + * is only one child in the collection. + * + * See https://reactjs.org/docs/react-api.html#reactchildrenonly + * + * The current implementation of this function assumes that a single child gets + * passed without a wrapper, but the purpose of this helper function is to + * abstract away the particular structure of children. + * + * @param {?object} children Child collection structure. + * @return {ReactElement} The first and only `ReactElement` contained in the + * structure. + */ - actScopeDepth = prevActScopeDepth; + function onlyChild(children) { + if (!isValidElement(children)) { + throw new Error( + "React.Children.only expected to receive a single React element child." + ); } + + return children; } - function recursivelyFlushAsyncActWork(returnValue, resolve, reject) { - { - // Check if any tasks were scheduled asynchronously. - var queue = ReactCurrentActQueue.current; + function createContext(defaultValue) { + // TODO: Second argument used to be an optional `calculateChangedBits` + // function. Warn to reserve for future use? + var context = { + $$typeof: REACT_CONTEXT_TYPE, + // As a workaround to support multiple concurrent renderers, we categorize + // some renderers as primary and others as secondary. We only expect + // there to be two concurrent renderers at most: React Native (primary) and + // Fabric (secondary); React DOM (primary) and React ART (secondary). + // Secondary renderers store their context values on separate fields. + _currentValue: defaultValue, + _currentValue2: defaultValue, + // Used to track how many concurrent renderers this context currently + // supports within in a single renderer. Such as parallel server rendering. + _threadCount: 0, + // These are circular + Provider: null, + Consumer: null + }; - if (queue !== null) { - if (queue.length !== 0) { - // Async tasks were scheduled, mostly likely in a microtask. - // Keep flushing until there are no more. - try { - flushActQueue(queue); // The work we just performed may have schedule additional async - // tasks. Wait a macrotask and check again. + if (enableRenderableContext) { + context.Provider = context; + context.Consumer = { + $$typeof: REACT_CONSUMER_TYPE, + _context: context + }; + } else { + context.Provider = { + $$typeof: REACT_PROVIDER_TYPE, + _context: context + }; - enqueueTask(function () { - return recursivelyFlushAsyncActWork( - returnValue, - resolve, - reject - ); - }); - } catch (error) { - // Leave remaining tasks on the queue if something throws. - reject(error); + { + var Consumer = { + $$typeof: REACT_CONTEXT_TYPE, + _context: context + }; + Object.defineProperties(Consumer, { + Provider: { + get: function () { + return context.Provider; + }, + set: function (_Provider) { + context.Provider = _Provider; + } + }, + _currentValue: { + get: function () { + return context._currentValue; + }, + set: function (_currentValue) { + context._currentValue = _currentValue; + } + }, + _currentValue2: { + get: function () { + return context._currentValue2; + }, + set: function (_currentValue2) { + context._currentValue2 = _currentValue2; + } + }, + _threadCount: { + get: function () { + return context._threadCount; + }, + set: function (_threadCount) { + context._threadCount = _threadCount; + } + }, + Consumer: { + get: function () { + return context.Consumer; + } + }, + displayName: { + get: function () { + return context.displayName; + }, + set: function (displayName) {} } - } else { - // The queue is empty. We can finish. - ReactCurrentActQueue.current = null; - resolve(returnValue); - } - } else { - resolve(returnValue); + }); + context.Consumer = Consumer; } } - } - var isFlushing = false; - - function flushActQueue(queue) { { - if (!isFlushing) { - // Prevent re-entrance. - isFlushing = true; - var i = 0; - - try { - for (; i < queue.length; i++) { - var callback = queue[i]; - - do { - ReactCurrentActQueue.didUsePromise = false; - var continuation = callback(false); + context._currentRenderer = null; + context._currentRenderer2 = null; + } - if (continuation !== null) { - if (ReactCurrentActQueue.didUsePromise) { - // The component just suspended. Yield to the main thread in - // case the promise is already resolved. If so, it will ping in - // a microtask and we can resume without unwinding the stack. - queue[i] = callback; - queue.splice(0, i); - return; - } + return context; + } - callback = continuation; - } else { - break; - } - } while (true); - } // We flushed the entire queue. + var Uninitialized = -1; + var Pending = 0; + var Resolved = 1; + var Rejected = 2; - queue.length = 0; - } catch (error) { - // If something throws, leave the remaining callbacks on the queue. - queue.splice(0, i + 1); - throw error; - } finally { - isFlushing = false; - } - } - } - } // Some of our warnings attempt to detect if the `act` call is awaited by - // checking in an asynchronous task. Wait a few microtasks before checking. The - // only reason one isn't sufficient is we want to accommodate the case where an - // `act` call is returned from an async function without first being awaited, - // since that's a somewhat common pattern. If you do this too many times in a - // nested sequence, you might get a warning, but you can always fix by awaiting - // the call. - // - // A macrotask would also work (and is the fallback) but depending on the test - // environment it may cause the warning to fire too late. + function lazyInitializer(payload) { + if (payload._status === Uninitialized) { + var ctor = payload._result; + var thenable = ctor(); // Transition to the next state. + // This might throw either because it's missing or throws. If so, we treat it + // as still uninitialized and try again next time. Which is the same as what + // happens if the ctor or any wrappers processing the ctor throws. This might + // end up fixing it if the resolution was a concurrency bug. - var queueSeveralMicrotasks = - typeof queueMicrotask === "function" - ? function (callback) { - queueMicrotask(function () { - return queueMicrotask(callback); - }); + thenable.then( + function (moduleObject) { + if ( + payload._status === Pending || + payload._status === Uninitialized + ) { + // Transition to the next state. + var resolved = payload; + resolved._status = Resolved; + resolved._result = moduleObject; + } + }, + function (error) { + if ( + payload._status === Pending || + payload._status === Uninitialized + ) { + // Transition to the next state. + var rejected = payload; + rejected._status = Rejected; + rejected._result = error; + } } - : enqueueTask; - - var Children = { - map: mapChildren, - forEach: forEachChildren, - count: countChildren, - toArray: toArray, - only: onlyChild - }; + ); - var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; - var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; - var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"); - var specialPropKeyWarningShown; - var specialPropRefWarningShown; - var didWarnAboutStringRefs; + if (payload._status === Uninitialized) { + // In case, we're still uninitialized, then we're waiting for the thenable + // to resolve. Set it as pending in the meantime. + var pending = payload; + pending._status = Pending; + pending._result = thenable; + } + } - { - didWarnAboutStringRefs = {}; - } + if (payload._status === Resolved) { + var moduleObject = payload._result; - function hasValidRef(config) { - { - if (hasOwnProperty.call(config, "ref")) { - var getter = Object.getOwnPropertyDescriptor(config, "ref").get; + { + if (moduleObject === undefined) { + error( + "lazy: Expected the result of a dynamic imp" + + "ort() call. " + + "Instead received: %s\n\nYour code should look like: \n " + // Break up imports to avoid accidentally parsing them as dependencies. + "const MyComponent = lazy(() => imp" + + "ort('./MyComponent'))\n\n" + + "Did you accidentally put curly braces around the import?", + moduleObject + ); + } + } - if (getter && getter.isReactWarning) { - return false; + { + if (!("default" in moduleObject)) { + error( + "lazy: Expected the result of a dynamic imp" + + "ort() call. " + + "Instead received: %s\n\nYour code should look like: \n " + // Break up imports to avoid accidentally parsing them as dependencies. + "const MyComponent = lazy(() => imp" + + "ort('./MyComponent'))", + moduleObject + ); } } - } - return config.ref !== undefined; + return moduleObject.default; + } else { + throw payload._result; + } } - function hasValidKey(config) { + function lazy(ctor) { + var payload = { + // We use these fields to store the result. + _status: Uninitialized, + _result: ctor + }; + var lazyType = { + $$typeof: REACT_LAZY_TYPE, + _payload: payload, + _init: lazyInitializer + }; + { - if (hasOwnProperty.call(config, "key")) { - var getter = Object.getOwnPropertyDescriptor(config, "key").get; + // In production, this would just set it on the object. + var defaultProps; + var propTypes; // $FlowFixMe[prop-missing] - if (getter && getter.isReactWarning) { - return false; + Object.defineProperties(lazyType, { + defaultProps: { + configurable: true, + get: function () { + return defaultProps; + }, + // $FlowFixMe[missing-local-annot] + set: function (newDefaultProps) { + error( + "React.lazy(...): It is not supported to assign `defaultProps` to " + + "a lazy component import. Either specify them where the component " + + "is defined, or create a wrapping component around it." + ); + + defaultProps = newDefaultProps; // Match production behavior more closely: + // $FlowFixMe[prop-missing] + + Object.defineProperty(lazyType, "defaultProps", { + enumerable: true + }); + } + }, + propTypes: { + configurable: true, + get: function () { + return propTypes; + }, + // $FlowFixMe[missing-local-annot] + set: function (newPropTypes) { + error( + "React.lazy(...): It is not supported to assign `propTypes` to " + + "a lazy component import. Either specify them where the component " + + "is defined, or create a wrapping component around it." + ); + + propTypes = newPropTypes; // Match production behavior more closely: + // $FlowFixMe[prop-missing] + + Object.defineProperty(lazyType, "propTypes", { + enumerable: true + }); + } } - } + }); } - return config.key !== undefined; + return lazyType; } - function warnIfStringRefCannotBeAutoConverted(config, self) { + function forwardRef(render) { { - if ( - typeof config.ref === "string" && - ReactCurrentOwner.current && - self && - ReactCurrentOwner.current.stateNode !== self - ) { - var componentName = getComponentNameFromType( - ReactCurrentOwner.current.type + if (render != null && render.$$typeof === REACT_MEMO_TYPE) { + error( + "forwardRef requires a render function but received a `memo` " + + "component. Instead of forwardRef(memo(...)), use " + + "memo(forwardRef(...))." ); - - if (!didWarnAboutStringRefs[componentName]) { + } else if (typeof render !== "function") { + error( + "forwardRef requires a render function but was given %s.", + render === null ? "null" : typeof render + ); + } else { + if (render.length !== 0 && render.length !== 2) { error( - 'Component "%s" contains the string ref "%s". ' + - "Support for string refs will be removed in a future major release. " + - "This case cannot be automatically converted to an arrow function. " + - "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.current.type), - config.ref + "forwardRef render functions accept exactly two parameters: props and ref. %s", + render.length === 1 + ? "Did you forget to use the ref parameter?" + : "Any additional parameter will be undefined." ); - - didWarnAboutStringRefs[componentName] = true; } } - } - } - - function defineKeyPropWarningGetter(props, displayName) { - { - var warnAboutAccessingKey = function () { - if (!specialPropKeyWarningShown) { - specialPropKeyWarningShown = true; + if (render != null) { + if (render.defaultProps != null) { error( - "%s: `key` is not a prop. Trying to access it will result " + - "in `undefined` being returned. If you need to access the same " + - "value within the child component, you should pass it as a different " + - "prop. (https://reactjs.org/link/special-props)", - displayName + "forwardRef render functions do not support defaultProps. " + + "Did you accidentally pass a React component?" ); } - }; - - warnAboutAccessingKey.isReactWarning = true; - Object.defineProperty(props, "key", { - get: warnAboutAccessingKey, - configurable: true - }); + } } - } - function defineRefPropWarningGetter(props, displayName) { + var elementType = { + $$typeof: REACT_FORWARD_REF_TYPE, + render: render + }; + { - var warnAboutAccessingRef = function () { - if (!specialPropRefWarningShown) { - specialPropRefWarningShown = true; + var ownName; + Object.defineProperty(elementType, "displayName", { + enumerable: false, + configurable: true, + get: function () { + return ownName; + }, + set: function (name) { + ownName = name; // The inner component shouldn't inherit this display name in most cases, + // because the component may be used elsewhere. + // But it's nice for anonymous functions to inherit the name, + // so that our component-stack generation logic will display their frames. + // An anonymous function generally suggests a pattern like: + // React.forwardRef((props, ref) => {...}); + // This kind of inner function is not used elsewhere so the side effect is okay. - error( - "%s: `ref` is not a prop. Trying to access it will result " + - "in `undefined` being returned. If you need to access the same " + - "value within the child component, you should pass it as a different " + - "prop. (https://reactjs.org/link/special-props)", - displayName - ); + if (!render.name && !render.displayName) { + render.displayName = name; + } } - }; - - warnAboutAccessingRef.isReactWarning = true; - Object.defineProperty(props, "ref", { - get: warnAboutAccessingRef, - configurable: true }); } + + return elementType; } - /** - * Factory method to create a new React element. This no longer adheres to - * the class pattern, so do not use new to call it. Also, instanceof check - * will not work. Instead test $$typeof field against Symbol.for('react.element') to check - * if something is a React Element. - * - * @param {*} type - * @param {*} props - * @param {*} key - * @param {string|object} ref - * @param {*} owner - * @param {*} self A *temporary* helper to detect places where `this` is - * different from the `owner` when React.createElement is called, so that we - * can warn. We want to get rid of owner and replace string `ref`s with arrow - * functions, and as long as `this` and owner are the same, there will be no - * change in behavior. - * @param {*} source An annotation object (added by a transpiler or otherwise) - * indicating filename, line number, and/or other information. - * @internal - */ - function ReactElement(type, key, ref, self, source, owner, props) { - var element = { - // This tag allows us to uniquely identify this as a React Element - $$typeof: REACT_ELEMENT_TYPE, - // Built-in properties that belong on the element + function memo(type, compare) { + { + if (!isValidElementType(type)) { + error( + "memo: The first argument must be a component. Instead " + + "received: %s", + type === null ? "null" : typeof type + ); + } + } + + var elementType = { + $$typeof: REACT_MEMO_TYPE, type: type, - key: key, - ref: ref, - props: props, - // Record the component responsible for creating this element. - _owner: owner + compare: compare === undefined ? null : compare }; { - // The validation flag is currently mutative. We put it on - // an external backing store so that we can freeze the whole object. - // This can be replaced with a WeakMap once they are implemented in - // commonly used development environments. - element._store = {}; // To make comparing ReactElements easier for testing purposes, we make - // the validation flag non-enumerable (where possible, which should - // include every environment we run tests in), so the test framework - // ignores it. - - Object.defineProperty(element._store, "validated", { - configurable: false, + var ownName; + Object.defineProperty(elementType, "displayName", { enumerable: false, - writable: true, - value: false - }); // debugInfo contains Server Component debug information. + configurable: true, + get: function () { + return ownName; + }, + set: function (name) { + ownName = name; // The inner component shouldn't inherit this display name in most cases, + // because the component may be used elsewhere. + // But it's nice for anonymous functions to inherit the name, + // so that our component-stack generation logic will display their frames. + // An anonymous function generally suggests a pattern like: + // React.memo((props) => {...}); + // This kind of inner function is not used elsewhere so the side effect is okay. - Object.defineProperty(element, "_debugInfo", { - configurable: false, - enumerable: false, - writable: true, - value: null + if (!type.name && !type.displayName) { + type.displayName = name; + } + } }); - - if (Object.freeze) { - Object.freeze(element.props); - Object.freeze(element); - } } - return element; + return elementType; } - // 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); - } + function noopCache(fn) { + // On the client (i.e. not a Server Components environment) `cache` has + // no caching behavior. We just return the function as-is. + // + // We intend to implement client caching in a future major release. In the + // meantime, it's only exposed as an API so that Shared Components can use + // per-request caching on the server without breaking on the client. But it + // does mean they need to be aware of the behavioral difference. + // + // The rest of the behavior is the same as the server implementation — it + // returns a new reference, extra properties like `displayName` are not + // preserved, the length of the new function is 0, etc. That way apps can't + // accidentally depend on those details. + return function () { + // $FlowFixMe[incompatible-call]: We don't want to use rest arguments since we transpile the code. + return fn.apply(null, arguments); + }; } - var didWarnAboutKeySpread = {}; - /** - * https://github.com/reactjs/rfcs/pull/107 - * @param {*} type - * @param {object} props - * @param {string} key - */ - - 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 = ""; + var cache = noopCache; - 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."; - } + function resolveDispatcher() { + var dispatcher = ReactCurrentDispatcher$1.current; - var sourceInfo = getSourceInfoErrorAddendum(source); + { + if (dispatcher === null) { + error( + "Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for" + + " one of the following reasons:\n" + + "1. You might have mismatching versions of React and the renderer (such as React DOM)\n" + + "2. You might be breaking the Rules of Hooks\n" + + "3. You might have more than one copy of React in the same app\n" + + "See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem." + ); + } + } // Will result in a null access error if accessed outside render phase. We + // intentionally don't throw our own error because this is in a hot path. + // Also helps ensure this is inlined. - if (sourceInfo) { - info += sourceInfo; - } else { - info += getDeclarationErrorAddendum(); - } + return dispatcher; + } - var typeString; + function getCacheSignal() { + var dispatcher = ReactCurrentCache.current; - 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; - } + if (!dispatcher) { + // If we have no cache to associate with this call, then we don't know + // its lifetime. We abort early since that's safer than letting it live + // for ever. Unlike just caching which can be a functional noop outside + // of React, these should generally always be associated with some React + // render but we're not limiting quite as much as making it a Hook. + // It's safer than erroring early at runtime. + var controller = new AbortController(); + var reason = new Error( + "This CacheSignal was requested outside React which means that it is " + + "immediately aborted." + ); + controller.abort(reason); + return controller.signal; + } - 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; + return dispatcher.getCacheSignal(); + } + function getCacheForType(resourceType) { + var dispatcher = ReactCurrentCache.current; - if (children !== undefined) { - if (isStaticChildren) { - if (isArray(children)) { - for (var i = 0; i < children.length; i++) { - validateChildKeys(children[i], type); - } + if (!dispatcher) { + // If there is no dispatcher, then we treat this as not being cached. + return resourceType(); + } - 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. + return dispatcher.getCacheForType(resourceType); + } + function useContext(Context) { + var dispatcher = resolveDispatcher(); - 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 (Context.$$typeof === REACT_CONSUMER_TYPE) { + error( + "Calling useContext(Context.Consumer) is not supported and will cause bugs. " + + "Did you mean to call useContext(Context) instead?" + ); + } + } - if (!didWarnAboutKeySpread[componentName + beforeExample]) { - var afterExample = - keys.length > 0 ? "{" + keys.join(": ..., ") + ": ...}" : "{}"; + return dispatcher.useContext(Context); + } + function useState(initialState) { + var dispatcher = resolveDispatcher(); + return dispatcher.useState(initialState); + } + function useReducer(reducer, initialArg, init) { + var dispatcher = resolveDispatcher(); + return dispatcher.useReducer(reducer, initialArg, init); + } + function useRef(initialValue) { + var dispatcher = resolveDispatcher(); + return dispatcher.useRef(initialValue); + } + function useEffect(create, deps) { + var dispatcher = resolveDispatcher(); + return dispatcher.useEffect(create, deps); + } + function useInsertionEffect(create, deps) { + var dispatcher = resolveDispatcher(); + return dispatcher.useInsertionEffect(create, deps); + } + function useLayoutEffect(create, deps) { + var dispatcher = resolveDispatcher(); + return dispatcher.useLayoutEffect(create, deps); + } + function useCallback(callback, deps) { + var dispatcher = resolveDispatcher(); + return dispatcher.useCallback(callback, deps); + } + function useMemo(create, deps) { + var dispatcher = resolveDispatcher(); + return dispatcher.useMemo(create, deps); + } + function useImperativeHandle(ref, create, deps) { + var dispatcher = resolveDispatcher(); + return dispatcher.useImperativeHandle(ref, create, deps); + } + function useDebugValue(value, formatterFn) { + { + var dispatcher = resolveDispatcher(); + return dispatcher.useDebugValue(value, formatterFn); + } + } + function useTransition() { + var dispatcher = resolveDispatcher(); + return dispatcher.useTransition(); + } + function useDeferredValue(value, initialValue) { + var dispatcher = resolveDispatcher(); + return dispatcher.useDeferredValue(value, initialValue); + } + function useId() { + var dispatcher = resolveDispatcher(); + return dispatcher.useId(); + } + function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) { + var dispatcher = resolveDispatcher(); + return dispatcher.useSyncExternalStore( + subscribe, + getSnapshot, + getServerSnapshot + ); + } + function useCacheRefresh() { + var dispatcher = resolveDispatcher(); // $FlowFixMe[not-a-function] This is unstable, thus optional - 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 - ); + return dispatcher.useCacheRefresh(); + } + function use(usable) { + var dispatcher = resolveDispatcher(); + return dispatcher.use(usable); + } + function useMemoCache(size) { + var dispatcher = resolveDispatcher(); // $FlowFixMe[not-a-function] This is unstable, thus optional - didWarnAboutKeySpread[componentName + beforeExample] = true; - } - } + return dispatcher.useMemoCache(size); + } + function useEffectEvent(callback) { + var dispatcher = resolveDispatcher(); // $FlowFixMe[not-a-function] This is unstable, thus optional - var propName; // Reserved names are extracted + return dispatcher.useEffectEvent(callback); + } + function useOptimistic(passthrough, reducer) { + var dispatcher = resolveDispatcher(); // $FlowFixMe[not-a-function] This is unstable, thus optional - var props = {}; - var key = null; - var ref = null; // Currently, key can be spread in as a prop. This causes a potential - // issue if key is also explicitly declared (ie.
- // or
). We want to deprecate key spread, - // but as an intermediary step, we will use jsxDEV for everything except - //
, because we aren't currently able to tell if - // key is explicitly declared to be undefined or not. + return dispatcher.useOptimistic(passthrough, reducer); + } - if (maybeKey !== undefined) { - { - checkKeyStringCoercion(maybeKey); - } + function startTransition(scope, options) { + var prevTransition = ReactCurrentBatchConfig.transition; // Each renderer registers a callback to receive the return value of + // the scope function. This is used to implement async actions. - key = "" + maybeKey; - } + var callbacks = new Set(); + var transition = { + _callbacks: callbacks + }; + ReactCurrentBatchConfig.transition = transition; + var currentTransition = ReactCurrentBatchConfig.transition; - if (hasValidKey(config)) { - { - checkKeyStringCoercion(config.key); - } + { + ReactCurrentBatchConfig.transition._updatedFibers = new Set(); + } - key = "" + config.key; + if (enableTransitionTracing) { + if (options !== undefined && options.name !== undefined) { + // $FlowFixMe[incompatible-use] found when upgrading Flow + ReactCurrentBatchConfig.transition.name = options.name; // $FlowFixMe[incompatible-use] found when upgrading Flow + + ReactCurrentBatchConfig.transition.startTime = -1; } + } - if (hasValidRef(config)) { - ref = config.ref; - warnIfStringRefCannotBeAutoConverted(config, self); - } // Remaining properties are added to a new props object + { + try { + var returnValue = scope(); - for (propName in config) { if ( - hasOwnProperty.call(config, propName) && // Skip over reserved prop names - propName !== "key" && // TODO: `ref` will no longer be reserved in the next major - propName !== "ref" + typeof returnValue === "object" && + returnValue !== null && + typeof returnValue.then === "function" ) { - props[propName] = config[propName]; - } - } // Resolve default props - - if (type && type.defaultProps) { - var defaultProps = type.defaultProps; - - for (propName in defaultProps) { - if (props[propName] === undefined) { - props[propName] = defaultProps[propName]; - } + callbacks.forEach(function (callback) { + return callback(currentTransition, returnValue); + }); + returnValue.then(noop, onError); } + } catch (error) { + onError(error); + } finally { + warnAboutTransitionSubscriptions(prevTransition, currentTransition); + ReactCurrentBatchConfig.transition = prevTransition; } + } + } - if (key || ref) { - var displayName = - typeof type === "function" - ? type.displayName || type.name || "Unknown" - : type; + function warnAboutTransitionSubscriptions( + prevTransition, + currentTransition + ) { + { + if (prevTransition === null && currentTransition._updatedFibers) { + var updatedFibersCount = currentTransition._updatedFibers.size; - if (key) { - defineKeyPropWarningGetter(props, displayName); - } + currentTransition._updatedFibers.clear(); - if (ref) { - defineRefPropWarningGetter(props, displayName); + if (updatedFibersCount > 10) { + warn( + "Detected a large number of updates inside startTransition. " + + "If this is due to a subscription please re-write it to use React provided hooks. " + + "Otherwise concurrent mode guarantees are off the table." + ); } } + } + } - var element = ReactElement( - type, - key, - ref, - self, - source, - ReactCurrentOwner.current, - props - ); + function noop() {} // Use reportError, if it exists. Otherwise console.error. This is the same as + // the default for onRecoverableError. - if (type === REACT_FRAGMENT_TYPE) { - validateFragmentProps(element); - } else { - validatePropTypes(element); - } + var onError = + typeof reportError === "function" // In modern browsers, reportError will dispatch an error event, + ? // emulating an uncaught JavaScript error. + reportError + : function (error) { + // In older browsers and test environments, fallback to console.error. + // eslint-disable-next-line react-internal/no-production-logging + console["error"](error); + }; - return element; - } - } + var didWarnAboutMessageChannel = false; + var enqueueTaskImpl = null; + function enqueueTask(task) { + if (enqueueTaskImpl === null) { + try { + // read require off the module object to get around the bundlers. + // we don't want them to detect a require and bundle a Node polyfill. + var requireString = ("require" + Math.random()).slice(0, 7); + var nodeRequire = module && module[requireString]; // assuming we're in node, let's try to get node's + // version of setImmediate, bypassing fake timers if any. - function getDeclarationErrorAddendum() { - { - if (ReactCurrentOwner.current) { - var name = getComponentNameFromType(ReactCurrentOwner.current.type); + enqueueTaskImpl = nodeRequire.call(module, "timers").setImmediate; + } catch (_err) { + // we're in a browser + // we can't use regular timers because they may still be faked + // so we try MessageChannel+postMessage instead + enqueueTaskImpl = function (callback) { + { + if (didWarnAboutMessageChannel === false) { + didWarnAboutMessageChannel = true; - if (name) { - return "\n\nCheck the render method of `" + name + "`."; - } - } + if (typeof MessageChannel === "undefined") { + error( + "This browser does not have a MessageChannel implementation, " + + "so enqueuing tasks via await act(async () => ...) will fail. " + + "Please file an issue at https://github.com/facebook/react/issues " + + "if you encounter this warning." + ); + } + } + } - return ""; + var channel = new MessageChannel(); + channel.port1.onmessage = callback; + channel.port2.postMessage(undefined); + }; + } } + + return enqueueTaskImpl(task); } - function getSourceInfoErrorAddendum(source) { - { - if (source !== undefined) { - var fileName = source.fileName.replace(/^.*[\\\/]/, ""); - var lineNumber = source.lineNumber; - return "\n\nCheck your code at " + fileName + ":" + lineNumber + "."; - } + // number of `act` scopes on the stack. - return ""; - } - } - /** - * 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 actScopeDepth = 0; // We only warn the first time you neglect to await an async `act` scope. - function validateChildKeys(node, parentType) { + var didWarnNoAwaitAct = false; + function act(callback) { { - if (typeof node !== "object" || !node) { - return; - } + // When ReactCurrentActQueue.current is not null, it signals to React that + // we're currently inside an `act` scope. React will push all its tasks to + // this queue instead of scheduling them with platform APIs. + // + // We set this to an empty array when we first enter an `act` scope, and + // only unset it once we've left the outermost `act` scope — remember that + // `act` calls can be nested. + // + // If we're already inside an `act` scope, reuse the existing queue. + var prevIsBatchingLegacy = ReactCurrentActQueue.isBatchingLegacy; + var prevActQueue = ReactCurrentActQueue.current; + var prevActScopeDepth = actScopeDepth; + actScopeDepth++; + var queue = (ReactCurrentActQueue.current = + prevActQueue !== null ? prevActQueue : []); // Used to reproduce behavior of `batchedUpdates` in legacy mode. Only + // set to `true` while the given callback is executed, not for updates + // triggered during an async event, because this is how the legacy + // implementation of `act` behaved. - if (node.$$typeof === REACT_CLIENT_REFERENCE); - else if (isArray(node)) { - for (var i = 0; i < node.length; i++) { - var child = node[i]; + ReactCurrentActQueue.isBatchingLegacy = true; + var result; // This tracks whether the `act` call is awaited. In certain cases, not + // awaiting it is a mistake, so we will detect that and warn. - 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); + var didAwaitActCall = false; - 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; + try { + // Reset this to `false` right before entering the React work loop. The + // only place we ever read this fields is just below, right after running + // the callback. So we don't need to reset after the callback runs. + ReactCurrentActQueue.didScheduleLegacyUpdate = false; + result = callback(); + var didScheduleLegacyUpdate = + ReactCurrentActQueue.didScheduleLegacyUpdate; // Replicate behavior of original `act` implementation in legacy mode, + // which flushed updates immediately after the scope function exits, even + // if it's an async function. - 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 - */ + if (!prevIsBatchingLegacy && didScheduleLegacyUpdate) { + flushActQueue(queue); + } // `isBatchingLegacy` gets reset using the regular stack, not the async + // one used to track `act` scopes. Why, you may be wondering? Because + // that's how it worked before version 18. Yes, it's confusing! We should + // delete legacy mode!! - 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 - * reordered. All children that haven't already been validated are required to - * have a "key" property assigned to it. Error statuses are cached so a warning - * will only be shown once. - * - * @internal - * @param {ReactElement} element Element that requires a key. - * @param {*} parentType element's parent's type. - */ + ReactCurrentActQueue.isBatchingLegacy = prevIsBatchingLegacy; + } catch (error) { + // `isBatchingLegacy` gets reset using the regular stack, not the async + // one used to track `act` scopes. Why, you may be wondering? Because + // that's how it worked before version 18. Yes, it's confusing! We should + // delete legacy mode!! + ReactCurrentActQueue.isBatchingLegacy = prevIsBatchingLegacy; + popActScope(prevActQueue, prevActScopeDepth); + throw error; + } - function validateExplicitKey(element, parentType) { - { if ( - !element._store || - element._store.validated || - element.key != null + result !== null && + typeof result === "object" && // $FlowFixMe[method-unbinding] + typeof result.then === "function" ) { - return; - } + // A promise/thenable was returned from the callback. Wait for it to + // resolve before flushing the queue. + // + // If `act` were implemented as an async function, this whole block could + // be a single `await` call. That's really the only difference between + // this branch and the next one. + var thenable = result; // Warn if the an `act` call with an async scope is not awaited. In a + // future release, consider making this an error. - element._store.validated = true; - var currentComponentErrorInfo = - getCurrentComponentErrorInfo(parentType); + queueSeveralMicrotasks(function () { + if (!didAwaitActCall && !didWarnNoAwaitAct) { + didWarnNoAwaitAct = true; - if (ownerHasKeyUseWarning[currentComponentErrorInfo]) { - return; - } + error( + "You called act(async () => ...) without await. " + + "This could lead to unexpected testing behaviour, " + + "interleaving multiple act calls and mixing their " + + "scopes. " + + "You should - await act(async () => ...);" + ); + } + }); + return { + then: function (resolve, reject) { + didAwaitActCall = true; + thenable.then( + function (returnValue) { + popActScope(prevActQueue, prevActScopeDepth); - ownerHasKeyUseWarning[currentComponentErrorInfo] = true; // Usually the current owner is the offender, but if it accepts children as a - // property, it may be the creator of the child that's responsible for - // assigning it a key. + if (prevActScopeDepth === 0) { + // We're exiting the outermost `act` scope. Flush the queue. + try { + flushActQueue(queue); + enqueueTask(function () { + return ( + // Recursively flush tasks scheduled by a microtask. + recursivelyFlushAsyncActWork( + returnValue, + resolve, + reject + ) + ); + }); + } catch (error) { + // `thenable` might not be a real promise, and `flushActQueue` + // might throw, so we need to wrap `flushActQueue` in a + // try/catch. + reject(error); + } + } else { + resolve(returnValue); + } + }, + function (error) { + popActScope(prevActQueue, prevActScopeDepth); + reject(error); + } + ); + } + }; + } else { + var returnValue = result; // The callback is not an async function. Exit the current + // scope immediately. - var childOwner = ""; + popActScope(prevActQueue, prevActScopeDepth); - if ( - element && - element._owner && - element._owner !== ReactCurrentOwner.current - ) { - // Give the component that originally created this child. - childOwner = - " It was passed a child from " + - getComponentNameFromType(element._owner.type) + - "."; - } + if (prevActScopeDepth === 0) { + // We're exiting the outermost `act` scope. Flush the queue. + flushActQueue(queue); // If the queue is not empty, it implies that we intentionally yielded + // to the main thread, because something suspended. We will continue + // in an asynchronous task. + // + // Warn if something suspends but the `act` call is not awaited. + // In a future release, consider making this an error. + + if (queue.length !== 0) { + queueSeveralMicrotasks(function () { + if (!didAwaitActCall && !didWarnNoAwaitAct) { + didWarnNoAwaitAct = true; - setCurrentlyValidatingElement(element); + error( + "A component suspended inside an `act` scope, but the " + + "`act` call was not awaited. When testing React " + + "components that depend on asynchronous data, you must " + + "await the result:\n\n" + + "await act(() => ...)" + ); + } + }); + } // Like many things in this module, this is next part is confusing. + // + // We do not currently require every `act` call that is passed a + // callback to be awaited, through arguably we should. Since this + // callback was synchronous, we need to exit the current scope before + // returning. + // + // However, if thenable we're about to return *is* awaited, we'll + // immediately restore the current scope. So it shouldn't observable. + // + // This doesn't affect the case where the scope callback is async, + // because we always require those calls to be awaited. + // + // TODO: In a future version, consider always requiring all `act` calls + // to be awaited, regardless of whether the callback is sync or async. - error( - 'Each child in a list should have a unique "key" prop.' + - "%s%s See https://reactjs.org/link/warning-keys for more information.", - currentComponentErrorInfo, - childOwner - ); + ReactCurrentActQueue.current = null; + } - setCurrentlyValidatingElement(null); - } - } + return { + then: function (resolve, reject) { + didAwaitActCall = true; - function setCurrentlyValidatingElement(element) { - { - if (element) { - var owner = element._owner; - var stack = describeUnknownElementTypeFrameInDEV( - element.type, - owner ? owner.type : null - ); - ReactDebugCurrentFrame.setExtraStackFrame(stack); - } else { - ReactDebugCurrentFrame.setExtraStackFrame(null); + if (prevActScopeDepth === 0) { + // If the `act` call is awaited, restore the queue we were + // using before (see long comment above) so we can flush it. + ReactCurrentActQueue.current = queue; + enqueueTask(function () { + return ( + // Recursively flush tasks scheduled by a microtask. + recursivelyFlushAsyncActWork(returnValue, resolve, reject) + ); + }); + } else { + resolve(returnValue); + } + } + }; } } } - function getCurrentComponentErrorInfo(parentType) { + function popActScope(prevActQueue, prevActScopeDepth) { { - var info = getDeclarationErrorAddendum(); - - if (!info) { - var parentName = getComponentNameFromType(parentType); - - if (parentName) { - info = - "\n\nCheck the top-level render call using <" + parentName + ">."; - } + if (prevActScopeDepth !== actScopeDepth - 1) { + error( + "You seem to have overlapping act() calls, this is not supported. " + + "Be sure to await previous act() calls before making a new one. " + ); } - return info; + actScopeDepth = prevActScopeDepth; } } - /** - * Given a fragment, validate that it can only be provided with fragment props - * @param {ReactElement} fragment - */ - function validateFragmentProps(fragment) { + function recursivelyFlushAsyncActWork(returnValue, resolve, reject) { { - 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); + // Check if any tasks were scheduled asynchronously. + var queue = ReactCurrentActQueue.current; - error( - "Invalid prop `%s` supplied to `React.Fragment`. " + - "React.Fragment can only have `key` and `children` props.", - key - ); + if (queue !== null) { + if (queue.length !== 0) { + // Async tasks were scheduled, mostly likely in a microtask. + // Keep flushing until there are no more. + try { + flushActQueue(queue); // The work we just performed may have schedule additional async + // tasks. Wait a macrotask and check again. - setCurrentlyValidatingElement(null); - break; + enqueueTask(function () { + return recursivelyFlushAsyncActWork( + returnValue, + resolve, + reject + ); + }); + } catch (error) { + // Leave remaining tasks on the queue if something throws. + reject(error); + } + } else { + // The queue is empty. We can finish. + ReactCurrentActQueue.current = null; + resolve(returnValue); } - } - - if (fragment.ref !== null) { - setCurrentlyValidatingElement(fragment); - - error("Invalid attribute `ref` supplied to `React.Fragment`."); - - setCurrentlyValidatingElement(null); + } else { + resolve(returnValue); } } } - var propTypesMisspellWarningShown = false; - /** - * Given an element, validate that its props follow the propTypes definition, - * provided by the type. - * - * @param {ReactElement} element - */ + var isFlushing = false; - function validatePropTypes(element) { + function flushActQueue(queue) { { - var type = element.type; - - if (type === null || type === undefined || typeof type === "string") { - return; - } - - if (type.$$typeof === REACT_CLIENT_REFERENCE) { - return; - } - - var propTypes; + if (!isFlushing) { + // Prevent re-entrance. + isFlushing = true; + var i = 0; - if (typeof type === "function") { - propTypes = type.propTypes; - } else if ( - typeof type === "object" && - (type.$$typeof === REACT_FORWARD_REF_TYPE || // Note: Memo only checks outer props here. - // Inner props are checked in the reconciler. - type.$$typeof === REACT_MEMO_TYPE) - ) { - propTypes = type.propTypes; - } else { - return; - } + try { + for (; i < queue.length; i++) { + var callback = queue[i]; - if (propTypes) { - // Intentionally inside to avoid triggering lazy initializers: - var name = getComponentNameFromType(type); - checkPropTypes(propTypes, element.props, "prop", name, element); - } else if ( - type.PropTypes !== undefined && - !propTypesMisspellWarningShown - ) { - propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers: + do { + ReactCurrentActQueue.didUsePromise = false; + var continuation = callback(false); - var _name = getComponentNameFromType(type); + if (continuation !== null) { + if (ReactCurrentActQueue.didUsePromise) { + // The component just suspended. Yield to the main thread in + // case the promise is already resolved. If so, it will ping in + // a microtask and we can resume without unwinding the stack. + queue[i] = callback; + queue.splice(0, i); + return; + } - error( - "Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", - _name || "Unknown" - ); - } + callback = continuation; + } else { + break; + } + } while (true); + } // We flushed the entire queue. - if ( - typeof type.getDefaultProps === "function" && - !type.getDefaultProps.isReactClassApproved - ) { - error( - "getDefaultProps is only used on classic React.createClass " + - "definitions. Use a static property named `defaultProps` instead." - ); + queue.length = 0; + } catch (error) { + // If something throws, leave the remaining callbacks on the queue. + queue.splice(0, i + 1); + throw error; + } finally { + isFlushing = false; + } } } - } + } // Some of our warnings attempt to detect if the `act` call is awaited by + // checking in an asynchronous task. Wait a few microtasks before checking. The + // only reason one isn't sufficient is we want to accommodate the case where an + // `act` call is returned from an async function without first being awaited, + // since that's a somewhat common pattern. If you do this too many times in a + // nested sequence, you might get a warning, but you can always fix by awaiting + // the call. + // + // A macrotask would also work (and is the fallback) but depending on the test + // environment it may cause the warning to fire too late. + + var queueSeveralMicrotasks = + typeof queueMicrotask === "function" + ? function (callback) { + queueMicrotask(function () { + return queueMicrotask(callback); + }); + } + : enqueueTask; + + var Children = { + map: mapChildren, + forEach: forEachChildren, + count: countChildren, + toArray: toArray, + only: onlyChild + }; 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 @@ -4143,7 +3678,7 @@ if (__DEV__) { exports.createRef = createRef; exports.experimental_useEffectEvent = useEffectEvent; exports.forwardRef = forwardRef; - exports.isValidElement = isValidElement$1; + exports.isValidElement = isValidElement; exports.jsx = jsx; exports.jsxDEV = jsxDEV; exports.jsxs = jsxs; diff --git a/compiled/facebook-www/React-prod.classic.js b/compiled/facebook-www/React-prod.classic.js index 4ccc2e2fad813..d056956484561 100644 --- a/compiled/facebook-www/React-prod.classic.js +++ b/compiled/facebook-www/React-prod.classic.js @@ -85,9 +85,18 @@ var isArrayImpl = Array.isArray, dynamicFeatureFlags = require("ReactFeatureFlags"), enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing, enableRenderableContext = dynamicFeatureFlags.enableRenderableContext, + ReactCurrentDispatcher = { current: null }, + ReactCurrentCache = { current: null }, + ReactCurrentBatchConfig = { transition: null }, + ReactSharedInternals = { + ReactCurrentDispatcher: ReactCurrentDispatcher, + ReactCurrentCache: ReactCurrentCache, + ReactCurrentBatchConfig: ReactCurrentBatchConfig, + ReactCurrentOwner: { current: null } + }, hasOwnProperty = Object.prototype.hasOwnProperty, - ReactCurrentOwner$1 = { current: null }; -function ReactElement$1(type, key, ref, owner, props) { + ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; +function ReactElement(type, key, ref, self, source, owner, props) { return { $$typeof: REACT_ELEMENT_TYPE, type: type, @@ -97,7 +106,33 @@ function ReactElement$1(type, key, ref, owner, props) { _owner: owner }; } -function createElement$1(type, config, children) { +function jsxProd(type, config, maybeKey) { + var propName, + props = {}, + key = null, + ref = null; + void 0 !== maybeKey && (key = "" + maybeKey); + void 0 !== config.key && (key = "" + config.key); + void 0 !== config.ref && (ref = config.ref); + for (propName in config) + hasOwnProperty.call(config, propName) && + "key" !== propName && + "ref" !== propName && + (props[propName] = config[propName]); + if (type && type.defaultProps) + for (propName in ((config = type.defaultProps), config)) + void 0 === props[propName] && (props[propName] = config[propName]); + return ReactElement( + type, + key, + ref, + void 0, + void 0, + ReactCurrentOwner.current, + props + ); +} +function createElement(type, config, children) { var propName, props = {}, key = null, @@ -123,13 +158,23 @@ function createElement$1(type, config, children) { for (propName in ((childrenLength = type.defaultProps), childrenLength)) void 0 === props[propName] && (props[propName] = childrenLength[propName]); - return ReactElement$1(type, key, ref, ReactCurrentOwner$1.current, props); + return ReactElement( + type, + key, + ref, + void 0, + void 0, + ReactCurrentOwner.current, + props + ); } function cloneAndReplaceKey(oldElement, newKey) { - return ReactElement$1( + return ReactElement( oldElement.type, newKey, oldElement.ref, + void 0, + void 0, oldElement._owner, oldElement.props ); @@ -141,15 +186,6 @@ function isValidElement(object) { object.$$typeof === REACT_ELEMENT_TYPE ); } -var ReactCurrentDispatcher = { current: null }, - ReactCurrentCache = { current: null }, - ReactCurrentBatchConfig = { transition: null }, - ReactSharedInternals = { - ReactCurrentDispatcher: ReactCurrentDispatcher, - ReactCurrentCache: ReactCurrentCache, - ReactCurrentBatchConfig: ReactCurrentBatchConfig, - ReactCurrentOwner: ReactCurrentOwner$1 - }; function escape(key) { var escaperLookup = { "=": "=0", ":": "=2" }; return ( @@ -335,37 +371,11 @@ function lazyInitializer(payload) { } function noop() {} var onError = - "function" === typeof reportError - ? reportError - : function (error) { - console.error(error); - }, - ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; -function jsxProd(type, config, maybeKey) { - var propName, - props = {}, - key = null, - ref = null; - void 0 !== maybeKey && (key = "" + maybeKey); - void 0 !== config.key && (key = "" + config.key); - void 0 !== config.ref && (ref = config.ref); - for (propName in config) - hasOwnProperty.call(config, propName) && - "key" !== propName && - "ref" !== propName && - (props[propName] = config[propName]); - if (type && type.defaultProps) - for (propName in ((config = type.defaultProps), config)) - void 0 === props[propName] && (props[propName] = config[propName]); - return { - $$typeof: REACT_ELEMENT_TYPE, - type: type, - key: key, - ref: ref, - props: props, - _owner: ReactCurrentOwner.current - }; -} + "function" === typeof reportError + ? reportError + : function (error) { + console.error(error); + }; exports.Children = { map: mapChildren, forEach: function (children, forEachFunc, forEachContext) { @@ -428,7 +438,7 @@ exports.cloneElement = function (element, config, children) { owner = element._owner; if (null != config) { void 0 !== config.ref && - ((ref = config.ref), (owner = ReactCurrentOwner$1.current)); + ((ref = config.ref), (owner = ReactCurrentOwner.current)); void 0 !== config.key && (key = "" + config.key); if (element.type && element.type.defaultProps) var defaultProps = element.type.defaultProps; @@ -450,7 +460,7 @@ exports.cloneElement = function (element, config, children) { for (var i = 0; i < propName; i++) defaultProps[i] = arguments[i + 2]; props.children = defaultProps; } - return ReactElement$1(element.type, key, ref, owner, props); + return ReactElement(element.type, key, ref, void 0, void 0, owner, props); }; exports.createContext = function (defaultValue) { defaultValue = { @@ -474,9 +484,9 @@ exports.createContext = function (defaultValue) { (defaultValue.Consumer = defaultValue)); return defaultValue; }; -exports.createElement = createElement$1; +exports.createElement = createElement; exports.createFactory = function (type) { - var factory = createElement$1.bind(null, type); + var factory = createElement.bind(null, type); factory.type = type; return factory; }; @@ -618,4 +628,4 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "18.3.0-www-classic-5f72f147"; +exports.version = "18.3.0-www-classic-220a174b"; diff --git a/compiled/facebook-www/React-prod.modern.js b/compiled/facebook-www/React-prod.modern.js index 55bbfd64a3cb1..c5e87d336793a 100644 --- a/compiled/facebook-www/React-prod.modern.js +++ b/compiled/facebook-www/React-prod.modern.js @@ -84,9 +84,18 @@ var isArrayImpl = Array.isArray, dynamicFeatureFlags = require("ReactFeatureFlags"), enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing, enableRenderableContext = dynamicFeatureFlags.enableRenderableContext, + ReactCurrentDispatcher = { current: null }, + ReactCurrentCache = { current: null }, + ReactCurrentBatchConfig = { transition: null }, + ReactSharedInternals = { + ReactCurrentDispatcher: ReactCurrentDispatcher, + ReactCurrentCache: ReactCurrentCache, + ReactCurrentBatchConfig: ReactCurrentBatchConfig, + ReactCurrentOwner: { current: null } + }, hasOwnProperty = Object.prototype.hasOwnProperty, - ReactCurrentOwner$1 = { current: null }; -function ReactElement$1(type, key, ref, owner, props) { + ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; +function ReactElement(type, key, ref, self, source, owner, props) { return { $$typeof: REACT_ELEMENT_TYPE, type: type, @@ -96,11 +105,39 @@ function ReactElement$1(type, key, ref, owner, props) { _owner: owner }; } +function jsxProd(type, config, maybeKey) { + var propName, + props = {}, + key = null, + ref = null; + void 0 !== maybeKey && (key = "" + maybeKey); + void 0 !== config.key && (key = "" + config.key); + void 0 !== config.ref && (ref = config.ref); + for (propName in config) + hasOwnProperty.call(config, propName) && + "key" !== propName && + "ref" !== propName && + (props[propName] = config[propName]); + if (type && type.defaultProps) + for (propName in ((config = type.defaultProps), config)) + void 0 === props[propName] && (props[propName] = config[propName]); + return ReactElement( + type, + key, + ref, + void 0, + void 0, + ReactCurrentOwner.current, + props + ); +} function cloneAndReplaceKey(oldElement, newKey) { - return ReactElement$1( + return ReactElement( oldElement.type, newKey, oldElement.ref, + void 0, + void 0, oldElement._owner, oldElement.props ); @@ -112,15 +149,6 @@ function isValidElement(object) { object.$$typeof === REACT_ELEMENT_TYPE ); } -var ReactCurrentDispatcher = { current: null }, - ReactCurrentCache = { current: null }, - ReactCurrentBatchConfig = { transition: null }, - ReactSharedInternals = { - ReactCurrentDispatcher: ReactCurrentDispatcher, - ReactCurrentCache: ReactCurrentCache, - ReactCurrentBatchConfig: ReactCurrentBatchConfig, - ReactCurrentOwner: ReactCurrentOwner$1 - }; function escape(key) { var escaperLookup = { "=": "=0", ":": "=2" }; return ( @@ -306,37 +334,11 @@ function lazyInitializer(payload) { } function noop() {} var onError = - "function" === typeof reportError - ? reportError - : function (error) { - console.error(error); - }, - ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; -function jsxProd(type, config, maybeKey) { - var propName, - props = {}, - key = null, - ref = null; - void 0 !== maybeKey && (key = "" + maybeKey); - void 0 !== config.key && (key = "" + config.key); - void 0 !== config.ref && (ref = config.ref); - for (propName in config) - hasOwnProperty.call(config, propName) && - "key" !== propName && - "ref" !== propName && - (props[propName] = config[propName]); - if (type && type.defaultProps) - for (propName in ((config = type.defaultProps), config)) - void 0 === props[propName] && (props[propName] = config[propName]); - return { - $$typeof: REACT_ELEMENT_TYPE, - type: type, - key: key, - ref: ref, - props: props, - _owner: ReactCurrentOwner.current - }; -} + "function" === typeof reportError + ? reportError + : function (error) { + console.error(error); + }; exports.Children = { map: mapChildren, forEach: function (children, forEachFunc, forEachContext) { @@ -399,7 +401,7 @@ exports.cloneElement = function (element, config, children) { owner = element._owner; if (null != config) { void 0 !== config.ref && - ((ref = config.ref), (owner = ReactCurrentOwner$1.current)); + ((ref = config.ref), (owner = ReactCurrentOwner.current)); void 0 !== config.key && (key = "" + config.key); if (element.type && element.type.defaultProps) var defaultProps = element.type.defaultProps; @@ -421,7 +423,7 @@ exports.cloneElement = function (element, config, children) { for (var i = 0; i < propName; i++) defaultProps[i] = arguments[i + 2]; props.children = defaultProps; } - return ReactElement$1(element.type, key, ref, owner, props); + return ReactElement(element.type, key, ref, void 0, void 0, owner, props); }; exports.createContext = function (defaultValue) { defaultValue = { @@ -471,7 +473,15 @@ exports.createElement = function (type, config, children) { for (propName in ((childrenLength = type.defaultProps), childrenLength)) void 0 === props[propName] && (props[propName] = childrenLength[propName]); - return ReactElement$1(type, key, ref, ReactCurrentOwner$1.current, props); + return ReactElement( + type, + key, + ref, + void 0, + void 0, + ReactCurrentOwner.current, + props + ); }; exports.createRef = function () { return { current: null }; @@ -610,4 +620,4 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "18.3.0-www-modern-a03dc08d"; +exports.version = "18.3.0-www-modern-b44b3fe9"; diff --git a/compiled/facebook-www/React-profiling.classic.js b/compiled/facebook-www/React-profiling.classic.js index 1131a2c75969b..d6693f157a8f6 100644 --- a/compiled/facebook-www/React-profiling.classic.js +++ b/compiled/facebook-www/React-profiling.classic.js @@ -89,9 +89,18 @@ var isArrayImpl = Array.isArray, dynamicFeatureFlags = require("ReactFeatureFlags"), enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing, enableRenderableContext = dynamicFeatureFlags.enableRenderableContext, + ReactCurrentDispatcher = { current: null }, + ReactCurrentCache = { current: null }, + ReactCurrentBatchConfig = { transition: null }, + ReactSharedInternals = { + ReactCurrentDispatcher: ReactCurrentDispatcher, + ReactCurrentCache: ReactCurrentCache, + ReactCurrentBatchConfig: ReactCurrentBatchConfig, + ReactCurrentOwner: { current: null } + }, hasOwnProperty = Object.prototype.hasOwnProperty, - ReactCurrentOwner$1 = { current: null }; -function ReactElement$1(type, key, ref, owner, props) { + ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; +function ReactElement(type, key, ref, self, source, owner, props) { return { $$typeof: REACT_ELEMENT_TYPE, type: type, @@ -101,7 +110,33 @@ function ReactElement$1(type, key, ref, owner, props) { _owner: owner }; } -function createElement$1(type, config, children) { +function jsxProd(type, config, maybeKey) { + var propName, + props = {}, + key = null, + ref = null; + void 0 !== maybeKey && (key = "" + maybeKey); + void 0 !== config.key && (key = "" + config.key); + void 0 !== config.ref && (ref = config.ref); + for (propName in config) + hasOwnProperty.call(config, propName) && + "key" !== propName && + "ref" !== propName && + (props[propName] = config[propName]); + if (type && type.defaultProps) + for (propName in ((config = type.defaultProps), config)) + void 0 === props[propName] && (props[propName] = config[propName]); + return ReactElement( + type, + key, + ref, + void 0, + void 0, + ReactCurrentOwner.current, + props + ); +} +function createElement(type, config, children) { var propName, props = {}, key = null, @@ -127,13 +162,23 @@ function createElement$1(type, config, children) { for (propName in ((childrenLength = type.defaultProps), childrenLength)) void 0 === props[propName] && (props[propName] = childrenLength[propName]); - return ReactElement$1(type, key, ref, ReactCurrentOwner$1.current, props); + return ReactElement( + type, + key, + ref, + void 0, + void 0, + ReactCurrentOwner.current, + props + ); } function cloneAndReplaceKey(oldElement, newKey) { - return ReactElement$1( + return ReactElement( oldElement.type, newKey, oldElement.ref, + void 0, + void 0, oldElement._owner, oldElement.props ); @@ -145,15 +190,6 @@ function isValidElement(object) { object.$$typeof === REACT_ELEMENT_TYPE ); } -var ReactCurrentDispatcher = { current: null }, - ReactCurrentCache = { current: null }, - ReactCurrentBatchConfig = { transition: null }, - ReactSharedInternals = { - ReactCurrentDispatcher: ReactCurrentDispatcher, - ReactCurrentCache: ReactCurrentCache, - ReactCurrentBatchConfig: ReactCurrentBatchConfig, - ReactCurrentOwner: ReactCurrentOwner$1 - }; function escape(key) { var escaperLookup = { "=": "=0", ":": "=2" }; return ( @@ -339,37 +375,11 @@ function lazyInitializer(payload) { } function noop() {} var onError = - "function" === typeof reportError - ? reportError - : function (error) { - console.error(error); - }, - ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; -function jsxProd(type, config, maybeKey) { - var propName, - props = {}, - key = null, - ref = null; - void 0 !== maybeKey && (key = "" + maybeKey); - void 0 !== config.key && (key = "" + config.key); - void 0 !== config.ref && (ref = config.ref); - for (propName in config) - hasOwnProperty.call(config, propName) && - "key" !== propName && - "ref" !== propName && - (props[propName] = config[propName]); - if (type && type.defaultProps) - for (propName in ((config = type.defaultProps), config)) - void 0 === props[propName] && (props[propName] = config[propName]); - return { - $$typeof: REACT_ELEMENT_TYPE, - type: type, - key: key, - ref: ref, - props: props, - _owner: ReactCurrentOwner.current - }; -} + "function" === typeof reportError + ? reportError + : function (error) { + console.error(error); + }; exports.Children = { map: mapChildren, forEach: function (children, forEachFunc, forEachContext) { @@ -432,7 +442,7 @@ exports.cloneElement = function (element, config, children) { owner = element._owner; if (null != config) { void 0 !== config.ref && - ((ref = config.ref), (owner = ReactCurrentOwner$1.current)); + ((ref = config.ref), (owner = ReactCurrentOwner.current)); void 0 !== config.key && (key = "" + config.key); if (element.type && element.type.defaultProps) var defaultProps = element.type.defaultProps; @@ -454,7 +464,7 @@ exports.cloneElement = function (element, config, children) { for (var i = 0; i < propName; i++) defaultProps[i] = arguments[i + 2]; props.children = defaultProps; } - return ReactElement$1(element.type, key, ref, owner, props); + return ReactElement(element.type, key, ref, void 0, void 0, owner, props); }; exports.createContext = function (defaultValue) { defaultValue = { @@ -478,9 +488,9 @@ exports.createContext = function (defaultValue) { (defaultValue.Consumer = defaultValue)); return defaultValue; }; -exports.createElement = createElement$1; +exports.createElement = createElement; exports.createFactory = function (type) { - var factory = createElement$1.bind(null, type); + var factory = createElement.bind(null, type); factory.type = type; return factory; }; @@ -622,7 +632,7 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "18.3.0-www-classic-a37e1c3f"; +exports.version = "18.3.0-www-classic-75b632f7"; "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 31b5211613f1c..536a0146ca0ee 100644 --- a/compiled/facebook-www/React-profiling.modern.js +++ b/compiled/facebook-www/React-profiling.modern.js @@ -88,9 +88,18 @@ var isArrayImpl = Array.isArray, dynamicFeatureFlags = require("ReactFeatureFlags"), enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing, enableRenderableContext = dynamicFeatureFlags.enableRenderableContext, + ReactCurrentDispatcher = { current: null }, + ReactCurrentCache = { current: null }, + ReactCurrentBatchConfig = { transition: null }, + ReactSharedInternals = { + ReactCurrentDispatcher: ReactCurrentDispatcher, + ReactCurrentCache: ReactCurrentCache, + ReactCurrentBatchConfig: ReactCurrentBatchConfig, + ReactCurrentOwner: { current: null } + }, hasOwnProperty = Object.prototype.hasOwnProperty, - ReactCurrentOwner$1 = { current: null }; -function ReactElement$1(type, key, ref, owner, props) { + ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; +function ReactElement(type, key, ref, self, source, owner, props) { return { $$typeof: REACT_ELEMENT_TYPE, type: type, @@ -100,11 +109,39 @@ function ReactElement$1(type, key, ref, owner, props) { _owner: owner }; } +function jsxProd(type, config, maybeKey) { + var propName, + props = {}, + key = null, + ref = null; + void 0 !== maybeKey && (key = "" + maybeKey); + void 0 !== config.key && (key = "" + config.key); + void 0 !== config.ref && (ref = config.ref); + for (propName in config) + hasOwnProperty.call(config, propName) && + "key" !== propName && + "ref" !== propName && + (props[propName] = config[propName]); + if (type && type.defaultProps) + for (propName in ((config = type.defaultProps), config)) + void 0 === props[propName] && (props[propName] = config[propName]); + return ReactElement( + type, + key, + ref, + void 0, + void 0, + ReactCurrentOwner.current, + props + ); +} function cloneAndReplaceKey(oldElement, newKey) { - return ReactElement$1( + return ReactElement( oldElement.type, newKey, oldElement.ref, + void 0, + void 0, oldElement._owner, oldElement.props ); @@ -116,15 +153,6 @@ function isValidElement(object) { object.$$typeof === REACT_ELEMENT_TYPE ); } -var ReactCurrentDispatcher = { current: null }, - ReactCurrentCache = { current: null }, - ReactCurrentBatchConfig = { transition: null }, - ReactSharedInternals = { - ReactCurrentDispatcher: ReactCurrentDispatcher, - ReactCurrentCache: ReactCurrentCache, - ReactCurrentBatchConfig: ReactCurrentBatchConfig, - ReactCurrentOwner: ReactCurrentOwner$1 - }; function escape(key) { var escaperLookup = { "=": "=0", ":": "=2" }; return ( @@ -310,37 +338,11 @@ function lazyInitializer(payload) { } function noop() {} var onError = - "function" === typeof reportError - ? reportError - : function (error) { - console.error(error); - }, - ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; -function jsxProd(type, config, maybeKey) { - var propName, - props = {}, - key = null, - ref = null; - void 0 !== maybeKey && (key = "" + maybeKey); - void 0 !== config.key && (key = "" + config.key); - void 0 !== config.ref && (ref = config.ref); - for (propName in config) - hasOwnProperty.call(config, propName) && - "key" !== propName && - "ref" !== propName && - (props[propName] = config[propName]); - if (type && type.defaultProps) - for (propName in ((config = type.defaultProps), config)) - void 0 === props[propName] && (props[propName] = config[propName]); - return { - $$typeof: REACT_ELEMENT_TYPE, - type: type, - key: key, - ref: ref, - props: props, - _owner: ReactCurrentOwner.current - }; -} + "function" === typeof reportError + ? reportError + : function (error) { + console.error(error); + }; exports.Children = { map: mapChildren, forEach: function (children, forEachFunc, forEachContext) { @@ -403,7 +405,7 @@ exports.cloneElement = function (element, config, children) { owner = element._owner; if (null != config) { void 0 !== config.ref && - ((ref = config.ref), (owner = ReactCurrentOwner$1.current)); + ((ref = config.ref), (owner = ReactCurrentOwner.current)); void 0 !== config.key && (key = "" + config.key); if (element.type && element.type.defaultProps) var defaultProps = element.type.defaultProps; @@ -425,7 +427,7 @@ exports.cloneElement = function (element, config, children) { for (var i = 0; i < propName; i++) defaultProps[i] = arguments[i + 2]; props.children = defaultProps; } - return ReactElement$1(element.type, key, ref, owner, props); + return ReactElement(element.type, key, ref, void 0, void 0, owner, props); }; exports.createContext = function (defaultValue) { defaultValue = { @@ -475,7 +477,15 @@ exports.createElement = function (type, config, children) { for (propName in ((childrenLength = type.defaultProps), childrenLength)) void 0 === props[propName] && (props[propName] = childrenLength[propName]); - return ReactElement$1(type, key, ref, ReactCurrentOwner$1.current, props); + return ReactElement( + type, + key, + ref, + void 0, + void 0, + ReactCurrentOwner.current, + props + ); }; exports.createRef = function () { return { current: null }; @@ -614,7 +624,7 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "18.3.0-www-modern-19e06609"; +exports.version = "18.3.0-www-modern-0d5002b3"; "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 c5bcee78dac28..c8e3a360cd6f4 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-5f72f147"; + var ReactVersion = "18.3.0-www-classic-220a174b"; function createPortal$1( children, diff --git a/compiled/facebook-www/ReactDOMTesting-prod.classic.js b/compiled/facebook-www/ReactDOMTesting-prod.classic.js index 6c7b90ade383b..0e6c1ee943ace 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-a37e1c3f", + version: "18.3.0-www-classic-75b632f7", 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-a37e1c3f" + reconcilerVersion: "18.3.0-www-classic-75b632f7" }; 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-a37e1c3f"; +exports.version = "18.3.0-www-classic-75b632f7"; diff --git a/compiled/facebook-www/ReactServer-dev.modern.js b/compiled/facebook-www/ReactServer-dev.modern.js index f89ed5d273723..b30d11c0d9c8e 100644 --- a/compiled/facebook-www/ReactServer-dev.modern.js +++ b/compiled/facebook-www/ReactServer-dev.modern.js @@ -117,11 +117,6 @@ if (__DEV__) { var ReactDebugCurrentFrame$2 = {}; var currentExtraStackFrame = null; - function setExtraStackFrame(stack) { - { - currentExtraStackFrame = stack; - } - } { ReactDebugCurrentFrame$2.setExtraStackFrame = function (stack) { @@ -301,7 +296,7 @@ if (__DEV__) { return type.displayName || "Context"; } - var REACT_CLIENT_REFERENCE$3 = 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) { @@ -310,7 +305,7 @@ if (__DEV__) { } if (typeof type === "function") { - if (type.$$typeof === REACT_CLIENT_REFERENCE$3) { + if (type.$$typeof === REACT_CLIENT_REFERENCE$2) { // TODO: Create a convention for naming client references with debug info. return null; } @@ -421,1375 +416,1630 @@ if (__DEV__) { // $FlowFixMe[method-unbinding] var hasOwnProperty = Object.prototype.hasOwnProperty; - var specialPropKeyWarningShown$1, - specialPropRefWarningShown$1, - didWarnAboutStringRefs$1; - - { - didWarnAboutStringRefs$1 = {}; - } + 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). - function hasValidRef$1(config) { - { - if (hasOwnProperty.call(config, "ref")) { - var getter = Object.getOwnPropertyDescriptor(config, "ref").get; + 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 (getter && getter.isReactWarning) { - return false; - } + 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 config.ref !== undefined; + return false; } - function hasValidKey$1(config) { - { - if (hasOwnProperty.call(config, "key")) { - var getter = Object.getOwnPropertyDescriptor(config, "key").get; + // Helpers to patch console.logs to avoid logging during side-effect free + // replaying on render function. This currently only patches the object + // lazily which won't cover if the log function was extracted eagerly. + // We could also eagerly patch the method. + var disabledDepth = 0; + var prevLog; + var prevInfo; + var prevWarn; + var prevError; + var prevGroup; + var prevGroupCollapsed; + var prevGroupEnd; - if (getter && getter.isReactWarning) { - return false; - } - } - } + function disabledLog() {} - return config.key !== undefined; - } + disabledLog.__reactDisabledLog = true; + function disableLogs() { + { + if (disabledDepth === 0) { + /* eslint-disable react-internal/no-production-logging */ + prevLog = console.log; + prevInfo = console.info; + prevWarn = console.warn; + prevError = console.error; + prevGroup = console.group; + prevGroupCollapsed = console.groupCollapsed; + prevGroupEnd = console.groupEnd; // https://github.com/facebook/react/issues/19099 - function defineKeyPropWarningGetter$1(props, displayName) { - var warnAboutAccessingKey = function () { - { - if (!specialPropKeyWarningShown$1) { - specialPropKeyWarningShown$1 = true; + var props = { + configurable: true, + enumerable: true, + value: disabledLog, + writable: true + }; // $FlowFixMe[cannot-write] Flow thinks console is immutable. - error( - "%s: `key` is not a prop. Trying to access it will result " + - "in `undefined` being returned. If you need to access the same " + - "value within the child component, you should pass it as a different " + - "prop. (https://reactjs.org/link/special-props)", - displayName - ); - } + Object.defineProperties(console, { + info: props, + log: props, + warn: props, + error: props, + group: props, + groupCollapsed: props, + groupEnd: props + }); + /* eslint-enable react-internal/no-production-logging */ } - }; - warnAboutAccessingKey.isReactWarning = true; - Object.defineProperty(props, "key", { - get: warnAboutAccessingKey, - configurable: true - }); + disabledDepth++; + } } + function reenableLogs() { + { + disabledDepth--; - function defineRefPropWarningGetter$1(props, displayName) { - var warnAboutAccessingRef = function () { - { - if (!specialPropRefWarningShown$1) { - specialPropRefWarningShown$1 = true; + if (disabledDepth === 0) { + /* eslint-disable react-internal/no-production-logging */ + var props = { + configurable: true, + enumerable: true, + writable: true + }; // $FlowFixMe[cannot-write] Flow thinks console is immutable. - error( - "%s: `ref` is not a prop. Trying to access it will result " + - "in `undefined` being returned. If you need to access the same " + - "value within the child component, you should pass it as a different " + - "prop. (https://reactjs.org/link/special-props)", - displayName - ); - } + Object.defineProperties(console, { + log: assign({}, props, { + value: prevLog + }), + info: assign({}, props, { + value: prevInfo + }), + warn: assign({}, props, { + value: prevWarn + }), + error: assign({}, props, { + value: prevError + }), + group: assign({}, props, { + value: prevGroup + }), + groupCollapsed: assign({}, props, { + value: prevGroupCollapsed + }), + groupEnd: assign({}, props, { + value: prevGroupEnd + }) + }); + /* eslint-enable react-internal/no-production-logging */ } - }; - warnAboutAccessingRef.isReactWarning = true; - Object.defineProperty(props, "ref", { - get: warnAboutAccessingRef, - configurable: true - }); + if (disabledDepth < 0) { + error( + "disabledDepth fell below zero. " + + "This is a bug in React. Please file an issue." + ); + } + } } - function warnIfStringRefCannotBeAutoConverted$1(config) { + var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher; + var prefix; + function describeBuiltInComponentFrame(name, ownerFn) { { - if ( - typeof config.ref === "string" && - ReactCurrentOwner$1.current && - config.__self && - ReactCurrentOwner$1.current.stateNode !== config.__self - ) { - var componentName = getComponentNameFromType( - ReactCurrentOwner$1.current.type - ); - - if (!didWarnAboutStringRefs$1[componentName]) { - error( - 'Component "%s" contains the string ref "%s". ' + - "Support for string refs will be removed in a future major release. " + - "This case cannot be automatically converted to an arrow function. " + - "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", - componentName, - config.ref - ); - - didWarnAboutStringRefs$1[componentName] = true; + if (prefix === undefined) { + // Extract the VM specific prefix used by each line. + try { + throw Error(); + } catch (x) { + var match = x.stack.trim().match(/\n( *(at )?)/); + prefix = (match && match[1]) || ""; } - } + } // We use the prefix to ensure our stacks line up with native stack frames. + + return "\n" + prefix + name; } } + var reentry = false; + var componentFrameCache; + + { + var PossiblyWeakMap = typeof WeakMap === "function" ? WeakMap : Map; + componentFrameCache = new PossiblyWeakMap(); + } /** - * Factory method to create a new React element. This no longer adheres to - * the class pattern, so do not use new to call it. Also, instanceof check - * will not work. Instead test $$typeof field against Symbol.for('react.element') to check - * if something is a React Element. - * - * @param {*} type - * @param {*} props - * @param {*} key - * @param {string|object} ref - * @param {*} owner - * @param {*} self A *temporary* helper to detect places where `this` is - * different from the `owner` when React.createElement is called, so that we - * can warn. We want to get rid of owner and replace string `ref`s with arrow - * functions, and as long as `this` and owner are the same, there will be no - * change in behavior. - * @param {*} source An annotation object (added by a transpiler or otherwise) - * indicating filename, line number, and/or other information. - * @internal + * Leverages native browser/VM stack frames to get proper details (e.g. + * filename, line + col number) for a single component in a component stack. We + * do this by: + * (1) throwing and catching an error in the function - this will be our + * control error. + * (2) calling the component which will eventually throw an error that we'll + * catch - this will be our sample error. + * (3) diffing the control and sample error stacks to find the stack frame + * which represents our component. */ - function ReactElement$1(type, key, ref, owner, props) { - var element = { - // This tag allows us to uniquely identify this as a React Element - $$typeof: REACT_ELEMENT_TYPE, - // Built-in properties that belong on the element - type: type, - key: key, - ref: ref, - props: props, - // Record the component responsible for creating this element. - _owner: owner - }; + function describeNativeComponentFrame(fn, construct) { + // If something asked for a stack inside a fake render, it should get ignored. + if (!fn || reentry) { + return ""; + } { - // The validation flag is currently mutative. We put it on - // an external backing store so that we can freeze the whole object. - // This can be replaced with a WeakMap once they are implemented in - // commonly used development environments. - element._store = {}; // To make comparing ReactElements easier for testing purposes, we make - // the validation flag non-enumerable (where possible, which should - // include every environment we run tests in), so the test framework - // ignores it. + var frame = componentFrameCache.get(fn); - Object.defineProperty(element._store, "validated", { - configurable: false, - enumerable: false, - writable: true, - value: false - }); // debugInfo contains Server Component debug information. - - Object.defineProperty(element, "_debugInfo", { - configurable: false, - enumerable: false, - writable: true, - value: null - }); - - if (Object.freeze) { - Object.freeze(element.props); - Object.freeze(element); + if (frame !== undefined) { + return frame; } } - return element; - } - /** - * Create and return a new ReactElement of the given type. - * See https://reactjs.org/docs/react-api.html#createelement - */ + reentry = true; + var previousPrepareStackTrace = Error.prepareStackTrace; // $FlowFixMe[incompatible-type] It does accept undefined. - function createElement$1(type, config, children) { - var propName; // Reserved names are extracted + Error.prepareStackTrace = undefined; + var previousDispatcher; - var props = {}; - var key = null; - var ref = null; + { + previousDispatcher = ReactCurrentDispatcher.current; // Set the dispatcher in DEV because this might be call in the render function + // for warnings. - if (config != null) { - if (hasValidRef$1(config)) { - ref = config.ref; + ReactCurrentDispatcher.current = null; + disableLogs(); + } + /** + * Finding a common stack frame between sample and control errors can be + * tricky given the different types and levels of stack trace truncation from + * different JS VMs. So instead we'll attempt to control what that common + * frame should be through this object method: + * Having both the sample and control errors be in the function under the + * `DescribeNativeComponentFrameRoot` property, + setting the `name` and + * `displayName` properties of the function ensures that a stack + * frame exists that has the method name `DescribeNativeComponentFrameRoot` in + * it for both control and sample stacks. + */ - { - warnIfStringRefCannotBeAutoConverted$1(config); - } - } + var RunInRootFrame = { + DetermineComponentFrameRoot: function () { + var control; - if (hasValidKey$1(config)) { - { - checkKeyStringCoercion(config.key); - } + try { + // This should throw. + if (construct) { + // Something should be setting the props in the constructor. + var Fake = function () { + throw Error(); + }; // $FlowFixMe[prop-missing] - key = "" + config.key; - } // Remaining properties are added to a new props object + Object.defineProperty(Fake.prototype, "props", { + set: function () { + // We use a throwing setter instead of frozen or non-writable props + // because that won't throw in a non-strict mode function. + throw Error(); + } + }); - for (propName in config) { - if ( - hasOwnProperty.call(config, propName) && // Skip over reserved prop names - propName !== "key" && // TODO: `ref` will no longer be reserved in the next major - propName !== "ref" && // ...and maybe these, too, though we currently rely on them for - // warnings and debug information in dev. Need to decide if we're OK - // with dropping them. In the jsx() runtime it's not an issue because - // the data gets passed as separate arguments instead of props, but - // it would be nice to stop relying on them entirely so we can drop - // them from the internal Fiber field. - propName !== "__self" && - propName !== "__source" - ) { - props[propName] = config[propName]; - } - } - } // Children can be more than one argument, and those are transferred onto - // the newly allocated props object. + if (typeof Reflect === "object" && Reflect.construct) { + // We construct a different control for this case to include any extra + // frames added by the construct call. + try { + Reflect.construct(Fake, []); + } catch (x) { + control = x; + } - var childrenLength = arguments.length - 2; + Reflect.construct(fn, [], Fake); + } else { + try { + Fake.call(); + } catch (x) { + control = x; + } // $FlowFixMe[prop-missing] found when upgrading Flow - if (childrenLength === 1) { - props.children = children; - } else if (childrenLength > 1) { - var childArray = Array(childrenLength); + fn.call(Fake.prototype); + } + } else { + try { + throw Error(); + } catch (x) { + control = x; + } // TODO(luna): This will currently only throw if the function component + // tries to access React/ReactDOM/props. We should probably make this throw + // in simple components too - for (var i = 0; i < childrenLength; i++) { - childArray[i] = arguments[i + 2]; - } + var maybePromise = fn(); // If the function component returns a promise, it's likely an async + // component, which we don't yet support. Attach a noop catch handler to + // silence the error. + // TODO: Implement component stacks for async client components? - { - if (Object.freeze) { - Object.freeze(childArray); + if (maybePromise && typeof maybePromise.catch === "function") { + maybePromise.catch(function () {}); + } + } + } catch (sample) { + // This is inlined manually because closure doesn't do it for us. + if (sample && control && typeof sample.stack === "string") { + return [sample.stack, control.stack]; + } } - } - - props.children = childArray; - } // Resolve default props - - if (type && type.defaultProps) { - var defaultProps = type.defaultProps; - for (propName in defaultProps) { - if (props[propName] === undefined) { - props[propName] = defaultProps[propName]; - } + return [null, null]; } - } - - { - if (key || ref) { - var displayName = - typeof type === "function" - ? type.displayName || type.name || "Unknown" - : type; + }; // $FlowFixMe[prop-missing] - if (key) { - defineKeyPropWarningGetter$1(props, displayName); - } + RunInRootFrame.DetermineComponentFrameRoot.displayName = + "DetermineComponentFrameRoot"; + var namePropDescriptor = Object.getOwnPropertyDescriptor( + RunInRootFrame.DetermineComponentFrameRoot, + "name" + ); // Before ES6, the `name` property was not configurable. - if (ref) { - defineRefPropWarningGetter$1(props, displayName); + if (namePropDescriptor && namePropDescriptor.configurable) { + // V8 utilizes a function's `name` property when generating a stack trace. + Object.defineProperty( + RunInRootFrame.DetermineComponentFrameRoot, // Configurable properties can be updated even if its writable descriptor + // is set to `false`. + // $FlowFixMe[cannot-write] + "name", + { + value: "DetermineComponentFrameRoot" } - } - } - - return ReactElement$1(type, key, ref, ReactCurrentOwner$1.current, props); - } - function cloneAndReplaceKey(oldElement, newKey) { - var newElement = ReactElement$1( - oldElement.type, - newKey, - oldElement.ref, - oldElement._owner, - oldElement.props - ); - return newElement; - } - /** - * Clone and return a new ReactElement using element as the starting point. - * See https://reactjs.org/docs/react-api.html#cloneelement - */ - - function cloneElement$1(element, config, children) { - if (element === null || element === undefined) { - throw new Error( - "React.cloneElement(...): The argument must be a React element, but you passed " + - element + - "." ); } - var propName; // Original props are copied + try { + var _RunInRootFrame$Deter = + RunInRootFrame.DetermineComponentFrameRoot(), + sampleStack = _RunInRootFrame$Deter[0], + controlStack = _RunInRootFrame$Deter[1]; - var props = assign({}, element.props); // Reserved names are extracted + if (sampleStack && controlStack) { + // This extracts the first frame from the sample that isn't also in the control. + // Skipping one frame that we assume is the frame that calls the two. + var sampleLines = sampleStack.split("\n"); + var controlLines = controlStack.split("\n"); + var s = 0; + var c = 0; - var key = element.key; - var ref = element.ref; // Owner will be preserved, unless ref is overridden + while ( + s < sampleLines.length && + !sampleLines[s].includes("DetermineComponentFrameRoot") + ) { + s++; + } - var owner = element._owner; + while ( + c < controlLines.length && + !controlLines[c].includes("DetermineComponentFrameRoot") + ) { + c++; + } // We couldn't find our intentionally injected common root frame, attempt + // to find another common root frame by search from the bottom of the + // control stack... - if (config != null) { - if (hasValidRef$1(config)) { - // Silently steal the ref from the parent. - ref = config.ref; - owner = ReactCurrentOwner$1.current; - } + if (s === sampleLines.length || c === controlLines.length) { + s = sampleLines.length - 1; + c = controlLines.length - 1; - if (hasValidKey$1(config)) { - { - checkKeyStringCoercion(config.key); + while (s >= 1 && c >= 0 && sampleLines[s] !== controlLines[c]) { + // We expect at least one stack frame to be shared. + // Typically this will be the root most one. However, stack frames may be + // cut off due to maximum stack limits. In this case, one maybe cut off + // earlier than the other. We assume that the sample is longer or the same + // and there for cut off earlier. So we should find the root most frame in + // the sample somewhere in the control. + c--; + } } - key = "" + config.key; - } // Remaining properties override existing props - - var defaultProps; + for (; s >= 1 && c >= 0; s--, c--) { + // Next we find the first one that isn't the same which should be the + // frame that called our sample function and the control. + if (sampleLines[s] !== controlLines[c]) { + // In V8, the first line is describing the message but other VMs don't. + // If we're about to return the first line, and the control is also on the same + // line, that's a pretty good indicator that our sample threw at same line as + // the control. I.e. before we entered the sample frame. So we ignore this result. + // This can happen if you passed a class to function component, or non-function. + if (s !== 1 || c !== 1) { + do { + s--; + c--; // We may still have similar intermediate frames from the construct call. + // The next one that isn't the same should be our match though. - if (element.type && element.type.defaultProps) { - defaultProps = element.type.defaultProps; - } + if (c < 0 || sampleLines[s] !== controlLines[c]) { + // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier. + var _frame = + "\n" + sampleLines[s].replace(" at new ", " at "); // If our component frame is labeled "" + // but we have a user-provided "displayName" + // splice it in to make the stack more readable. - for (propName in config) { - if ( - hasOwnProperty.call(config, propName) && // Skip over reserved prop names - propName !== "key" && // TODO: `ref` will no longer be reserved in the next major - propName !== "ref" && // ...and maybe these, too, though we currently rely on them for - // warnings and debug information in dev. Need to decide if we're OK - // with dropping them. In the jsx() runtime it's not an issue because - // the data gets passed as separate arguments instead of props, but - // it would be nice to stop relying on them entirely so we can drop - // them from the internal Fiber field. - propName !== "__self" && - propName !== "__source" - ) { - if (config[propName] === undefined && defaultProps !== undefined) { - // Resolve default props - props[propName] = defaultProps[propName]; - } else { - props[propName] = config[propName]; + if (fn.displayName && _frame.includes("")) { + _frame = _frame.replace("", fn.displayName); + } + + if (true) { + if (typeof fn === "function") { + componentFrameCache.set(fn, _frame); + } + } // Return the line we found. + + return _frame; + } + } while (s >= 1 && c >= 0); + } + + break; } } } - } // Children can be more than one argument, and those are transferred onto - // the newly allocated props object. + } finally { + reentry = false; - var childrenLength = arguments.length - 2; + { + ReactCurrentDispatcher.current = previousDispatcher; + reenableLogs(); + } - if (childrenLength === 1) { - props.children = children; - } else if (childrenLength > 1) { - var childArray = Array(childrenLength); + Error.prepareStackTrace = previousPrepareStackTrace; + } // Fallback to just using the name if we couldn't make it throw. - for (var i = 0; i < childrenLength; i++) { - childArray[i] = arguments[i + 2]; - } + var name = fn ? fn.displayName || fn.name : ""; + var syntheticFrame = name ? describeBuiltInComponentFrame(name) : ""; - props.children = childArray; + { + if (typeof fn === "function") { + componentFrameCache.set(fn, syntheticFrame); + } } - return ReactElement$1(element.type, key, ref, owner, props); + return syntheticFrame; } - /** - * 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$1(object) { - return ( - typeof object === "object" && - object !== null && - object.$$typeof === REACT_ELEMENT_TYPE - ); + function describeFunctionComponentFrame(fn, ownerFn) { + { + return describeNativeComponentFrame(fn, false); + } } - 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). + function shouldConstruct(Component) { + var prototype = Component.prototype; + return !!(prototype && prototype.isReactComponent); + } - 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; + function describeUnknownElementTypeFrameInDEV(type, ownerFn) { + if (type == null) { + return ""; } - 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; + if (typeof type === "function") { + { + return describeNativeComponentFrame(type, shouldConstruct(type)); } } - return false; - } + if (typeof type === "string") { + return describeBuiltInComponentFrame(type); + } - // Helpers to patch console.logs to avoid logging during side-effect free - // replaying on render function. This currently only patches the object - // lazily which won't cover if the log function was extracted eagerly. - // We could also eagerly patch the method. - var disabledDepth = 0; - var prevLog; - var prevInfo; - var prevWarn; - var prevError; - var prevGroup; - var prevGroupCollapsed; - var prevGroupEnd; + switch (type) { + case REACT_SUSPENSE_TYPE: + return describeBuiltInComponentFrame("Suspense"); - function disabledLog() {} + case REACT_SUSPENSE_LIST_TYPE: + return describeBuiltInComponentFrame("SuspenseList"); + } - disabledLog.__reactDisabledLog = true; - function disableLogs() { - { - if (disabledDepth === 0) { - /* eslint-disable react-internal/no-production-logging */ - prevLog = console.log; - prevInfo = console.info; - prevWarn = console.warn; - prevError = console.error; - prevGroup = console.group; - prevGroupCollapsed = console.groupCollapsed; - prevGroupEnd = console.groupEnd; // https://github.com/facebook/react/issues/19099 + if (typeof type === "object") { + switch (type.$$typeof) { + case REACT_FORWARD_REF_TYPE: + return describeFunctionComponentFrame(type.render); - var props = { - configurable: true, - enumerable: true, - value: disabledLog, - writable: true - }; // $FlowFixMe[cannot-write] Flow thinks console is immutable. + case REACT_MEMO_TYPE: + // Memo may contain any component type so we recursively resolve it. + return describeUnknownElementTypeFrameInDEV(type.type, ownerFn); - Object.defineProperties(console, { - info: props, - log: props, - warn: props, - error: props, - group: props, - groupCollapsed: props, - groupEnd: props - }); - /* eslint-enable react-internal/no-production-logging */ - } + case REACT_LAZY_TYPE: { + var lazyComponent = type; + var payload = lazyComponent._payload; + var init = lazyComponent._init; - disabledDepth++; + try { + // Lazy may contain any component type so we recursively resolve it. + return describeUnknownElementTypeFrameInDEV( + init(payload), + ownerFn + ); + } catch (x) {} + } + } } + + return ""; } - function reenableLogs() { + + var loggedTypeFailures = {}; + var ReactDebugCurrentFrame$1 = ReactSharedInternals.ReactDebugCurrentFrame; + + function setCurrentlyValidatingElement$1(element) { { - disabledDepth--; + if (element) { + var owner = element._owner; + var stack = describeUnknownElementTypeFrameInDEV( + element.type, + owner ? owner.type : null + ); + ReactDebugCurrentFrame$1.setExtraStackFrame(stack); + } else { + ReactDebugCurrentFrame$1.setExtraStackFrame(null); + } + } + } - if (disabledDepth === 0) { - /* eslint-disable react-internal/no-production-logging */ - var props = { - configurable: true, - enumerable: true, - writable: true - }; // $FlowFixMe[cannot-write] Flow thinks console is immutable. + function checkPropTypes( + typeSpecs, + values, + location, + componentName, + element + ) { + { + // $FlowFixMe[incompatible-use] This is okay but Flow doesn't know it. + var has = Function.call.bind(hasOwnProperty); - Object.defineProperties(console, { - log: assign({}, props, { - value: prevLog - }), - info: assign({}, props, { - value: prevInfo - }), - warn: assign({}, props, { - value: prevWarn - }), - error: assign({}, props, { - value: prevError - }), - group: assign({}, props, { - value: prevGroup - }), - groupCollapsed: assign({}, props, { - value: prevGroupCollapsed - }), - groupEnd: assign({}, props, { - value: prevGroupEnd - }) - }); - /* eslint-enable react-internal/no-production-logging */ - } + for (var typeSpecName in typeSpecs) { + if (has(typeSpecs, typeSpecName)) { + var error$1 = void 0; // Prop type validation may throw. In case they do, we don't want to + // fail the render phase where it didn't fail before. So we log it. + // After these have been cleaned up, we'll let them throw. - if (disabledDepth < 0) { - error( - "disabledDepth fell below zero. " + - "This is a bug in React. Please file an issue." - ); - } - } - } + try { + // This is intentionally an invariant that gets caught. It's the same + // behavior as without this statement except with a better message. + if (typeof typeSpecs[typeSpecName] !== "function") { + // eslint-disable-next-line react-internal/prod-error-codes + var err = Error( + (componentName || "React class") + + ": " + + location + + " type `" + + typeSpecName + + "` is invalid; " + + "it must be a function, usually from the `prop-types` package, but received `" + + typeof typeSpecs[typeSpecName] + + "`." + + "This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`." + ); + err.name = "Invariant Violation"; + throw err; + } - var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher; - var prefix; - function describeBuiltInComponentFrame(name, ownerFn) { - { - if (prefix === undefined) { - // Extract the VM specific prefix used by each line. - try { - throw Error(); - } catch (x) { - var match = x.stack.trim().match(/\n( *(at )?)/); - prefix = (match && match[1]) || ""; - } - } // We use the prefix to ensure our stacks line up with native stack frames. + error$1 = typeSpecs[typeSpecName]( + values, + typeSpecName, + componentName, + location, + null, + "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED" + ); + } catch (ex) { + error$1 = ex; + } - return "\n" + prefix + name; + if (error$1 && !(error$1 instanceof Error)) { + setCurrentlyValidatingElement$1(element); + + error( + "%s: type specification of %s" + + " `%s` is invalid; the type checker " + + "function must return `null` or an `Error` but returned a %s. " + + "You may have forgotten to pass an argument to the type checker " + + "creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and " + + "shape all require an argument).", + componentName || "React class", + location, + typeSpecName, + typeof error$1 + ); + + setCurrentlyValidatingElement$1(null); + } + + if ( + error$1 instanceof Error && + !(error$1.message in loggedTypeFailures) + ) { + // Only monitor this failure once because there tends to be a lot of the + // same error. + loggedTypeFailures[error$1.message] = true; + setCurrentlyValidatingElement$1(element); + + error("Failed %s type: %s", location, error$1.message); + + setCurrentlyValidatingElement$1(null); + } + } + } } } - var reentry = false; - var componentFrameCache; + + var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; + var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; + var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"); + var specialPropKeyWarningShown; + var specialPropRefWarningShown; + var didWarnAboutStringRefs; { - var PossiblyWeakMap = typeof WeakMap === "function" ? WeakMap : Map; - componentFrameCache = new PossiblyWeakMap(); + didWarnAboutStringRefs = {}; } - /** - * Leverages native browser/VM stack frames to get proper details (e.g. - * filename, line + col number) for a single component in a component stack. We - * do this by: - * (1) throwing and catching an error in the function - this will be our - * control error. - * (2) calling the component which will eventually throw an error that we'll - * catch - this will be our sample error. - * (3) diffing the control and sample error stacks to find the stack frame - * which represents our component. - */ - - function describeNativeComponentFrame(fn, construct) { - // If something asked for a stack inside a fake render, it should get ignored. - if (!fn || reentry) { - return ""; - } + function hasValidRef(config) { { - var frame = componentFrameCache.get(fn); + if (hasOwnProperty.call(config, "ref")) { + var getter = Object.getOwnPropertyDescriptor(config, "ref").get; - if (frame !== undefined) { - return frame; + if (getter && getter.isReactWarning) { + return false; + } } } - reentry = true; - var previousPrepareStackTrace = Error.prepareStackTrace; // $FlowFixMe[incompatible-type] It does accept undefined. - - Error.prepareStackTrace = undefined; - var previousDispatcher; + return config.ref !== undefined; + } + function hasValidKey(config) { { - previousDispatcher = ReactCurrentDispatcher.current; // Set the dispatcher in DEV because this might be call in the render function - // for warnings. + if (hasOwnProperty.call(config, "key")) { + var getter = Object.getOwnPropertyDescriptor(config, "key").get; - ReactCurrentDispatcher.current = null; - disableLogs(); + if (getter && getter.isReactWarning) { + return false; + } + } } - /** - * Finding a common stack frame between sample and control errors can be - * tricky given the different types and levels of stack trace truncation from - * different JS VMs. So instead we'll attempt to control what that common - * frame should be through this object method: - * Having both the sample and control errors be in the function under the - * `DescribeNativeComponentFrameRoot` property, + setting the `name` and - * `displayName` properties of the function ensures that a stack - * frame exists that has the method name `DescribeNativeComponentFrameRoot` in - * it for both control and sample stacks. - */ - - var RunInRootFrame = { - DetermineComponentFrameRoot: function () { - var control; - try { - // This should throw. - if (construct) { - // Something should be setting the props in the constructor. - var Fake = function () { - throw Error(); - }; // $FlowFixMe[prop-missing] + return config.key !== undefined; + } - Object.defineProperty(Fake.prototype, "props", { - set: function () { - // We use a throwing setter instead of frozen or non-writable props - // because that won't throw in a non-strict mode function. - throw Error(); - } - }); + function warnIfStringRefCannotBeAutoConverted(config, self) { + { + if ( + typeof config.ref === "string" && + ReactCurrentOwner.current && + self && + ReactCurrentOwner.current.stateNode !== self + ) { + var componentName = getComponentNameFromType( + ReactCurrentOwner.current.type + ); - if (typeof Reflect === "object" && Reflect.construct) { - // We construct a different control for this case to include any extra - // frames added by the construct call. - try { - Reflect.construct(Fake, []); - } catch (x) { - control = x; - } + if (!didWarnAboutStringRefs[componentName]) { + error( + 'Component "%s" contains the string ref "%s". ' + + "Support for string refs will be removed in a future major release. " + + "This case cannot be automatically converted to an arrow function. " + + "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.current.type), + config.ref + ); - Reflect.construct(fn, [], Fake); - } else { - try { - Fake.call(); - } catch (x) { - control = x; - } // $FlowFixMe[prop-missing] found when upgrading Flow + didWarnAboutStringRefs[componentName] = true; + } + } + } + } - fn.call(Fake.prototype); - } - } else { - try { - throw Error(); - } catch (x) { - control = x; - } // TODO(luna): This will currently only throw if the function component - // tries to access React/ReactDOM/props. We should probably make this throw - // in simple components too + function defineKeyPropWarningGetter(props, displayName) { + { + var warnAboutAccessingKey = function () { + if (!specialPropKeyWarningShown) { + specialPropKeyWarningShown = true; - var maybePromise = fn(); // If the function component returns a promise, it's likely an async - // component, which we don't yet support. Attach a noop catch handler to - // silence the error. - // TODO: Implement component stacks for async client components? - - if (maybePromise && typeof maybePromise.catch === "function") { - maybePromise.catch(function () {}); - } - } - } catch (sample) { - // This is inlined manually because closure doesn't do it for us. - if (sample && control && typeof sample.stack === "string") { - return [sample.stack, control.stack]; - } + error( + "%s: `key` is not a prop. Trying to access it will result " + + "in `undefined` being returned. If you need to access the same " + + "value within the child component, you should pass it as a different " + + "prop. (https://reactjs.org/link/special-props)", + displayName + ); } + }; - return [null, null]; - } - }; // $FlowFixMe[prop-missing] - - RunInRootFrame.DetermineComponentFrameRoot.displayName = - "DetermineComponentFrameRoot"; - var namePropDescriptor = Object.getOwnPropertyDescriptor( - RunInRootFrame.DetermineComponentFrameRoot, - "name" - ); // Before ES6, the `name` property was not configurable. - - if (namePropDescriptor && namePropDescriptor.configurable) { - // V8 utilizes a function's `name` property when generating a stack trace. - Object.defineProperty( - RunInRootFrame.DetermineComponentFrameRoot, // Configurable properties can be updated even if its writable descriptor - // is set to `false`. - // $FlowFixMe[cannot-write] - "name", - { - value: "DetermineComponentFrameRoot" - } - ); + warnAboutAccessingKey.isReactWarning = true; + Object.defineProperty(props, "key", { + get: warnAboutAccessingKey, + configurable: true + }); } + } - try { - var _RunInRootFrame$Deter = - RunInRootFrame.DetermineComponentFrameRoot(), - sampleStack = _RunInRootFrame$Deter[0], - controlStack = _RunInRootFrame$Deter[1]; - - if (sampleStack && controlStack) { - // This extracts the first frame from the sample that isn't also in the control. - // Skipping one frame that we assume is the frame that calls the two. - var sampleLines = sampleStack.split("\n"); - var controlLines = controlStack.split("\n"); - var s = 0; - var c = 0; - - while ( - s < sampleLines.length && - !sampleLines[s].includes("DetermineComponentFrameRoot") - ) { - s++; - } - - while ( - c < controlLines.length && - !controlLines[c].includes("DetermineComponentFrameRoot") - ) { - c++; - } // We couldn't find our intentionally injected common root frame, attempt - // to find another common root frame by search from the bottom of the - // control stack... - - if (s === sampleLines.length || c === controlLines.length) { - s = sampleLines.length - 1; - c = controlLines.length - 1; + function defineRefPropWarningGetter(props, displayName) { + { + var warnAboutAccessingRef = function () { + if (!specialPropRefWarningShown) { + specialPropRefWarningShown = true; - while (s >= 1 && c >= 0 && sampleLines[s] !== controlLines[c]) { - // We expect at least one stack frame to be shared. - // Typically this will be the root most one. However, stack frames may be - // cut off due to maximum stack limits. In this case, one maybe cut off - // earlier than the other. We assume that the sample is longer or the same - // and there for cut off earlier. So we should find the root most frame in - // the sample somewhere in the control. - c--; - } + error( + "%s: `ref` is not a prop. Trying to access it will result " + + "in `undefined` being returned. If you need to access the same " + + "value within the child component, you should pass it as a different " + + "prop. (https://reactjs.org/link/special-props)", + displayName + ); } + }; - for (; s >= 1 && c >= 0; s--, c--) { - // Next we find the first one that isn't the same which should be the - // frame that called our sample function and the control. - if (sampleLines[s] !== controlLines[c]) { - // In V8, the first line is describing the message but other VMs don't. - // If we're about to return the first line, and the control is also on the same - // line, that's a pretty good indicator that our sample threw at same line as - // the control. I.e. before we entered the sample frame. So we ignore this result. - // This can happen if you passed a class to function component, or non-function. - if (s !== 1 || c !== 1) { - do { - s--; - c--; // We may still have similar intermediate frames from the construct call. - // The next one that isn't the same should be our match though. - - if (c < 0 || sampleLines[s] !== controlLines[c]) { - // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier. - var _frame = - "\n" + sampleLines[s].replace(" at new ", " at "); // If our component frame is labeled "" - // but we have a user-provided "displayName" - // splice it in to make the stack more readable. + warnAboutAccessingRef.isReactWarning = true; + Object.defineProperty(props, "ref", { + get: warnAboutAccessingRef, + configurable: true + }); + } + } + /** + * Factory method to create a new React element. This no longer adheres to + * the class pattern, so do not use new to call it. Also, instanceof check + * will not work. Instead test $$typeof field against Symbol.for('react.element') to check + * if something is a React Element. + * + * @param {*} type + * @param {*} props + * @param {*} key + * @param {string|object} ref + * @param {*} owner + * @param {*} self A *temporary* helper to detect places where `this` is + * different from the `owner` when React.createElement is called, so that we + * can warn. We want to get rid of owner and replace string `ref`s with arrow + * functions, and as long as `this` and owner are the same, there will be no + * change in behavior. + * @param {*} source An annotation object (added by a transpiler or otherwise) + * indicating filename, line number, and/or other information. + * @internal + */ - if (fn.displayName && _frame.includes("")) { - _frame = _frame.replace("", fn.displayName); - } + function ReactElement(type, key, ref, self, source, owner, props) { + var element = { + // This tag allows us to uniquely identify this as a React Element + $$typeof: REACT_ELEMENT_TYPE, + // Built-in properties that belong on the element + type: type, + key: key, + ref: ref, + props: props, + // Record the component responsible for creating this element. + _owner: owner + }; - if (true) { - if (typeof fn === "function") { - componentFrameCache.set(fn, _frame); - } - } // Return the line we found. + { + // The validation flag is currently mutative. We put it on + // an external backing store so that we can freeze the whole object. + // This can be replaced with a WeakMap once they are implemented in + // commonly used development environments. + element._store = {}; // To make comparing ReactElements easier for testing purposes, we make + // the validation flag non-enumerable (where possible, which should + // include every environment we run tests in), so the test framework + // ignores it. - return _frame; - } - } while (s >= 1 && c >= 0); - } + Object.defineProperty(element._store, "validated", { + configurable: false, + enumerable: false, + writable: true, + value: false + }); // debugInfo contains Server Component debug information. - break; - } - } - } - } finally { - reentry = false; + Object.defineProperty(element, "_debugInfo", { + configurable: false, + enumerable: false, + writable: true, + value: null + }); - { - ReactCurrentDispatcher.current = previousDispatcher; - reenableLogs(); + if (Object.freeze) { + Object.freeze(element.props); + Object.freeze(element); } + } - Error.prepareStackTrace = previousPrepareStackTrace; - } // Fallback to just using the name if we couldn't make it throw. - - var name = fn ? fn.displayName || fn.name : ""; - var syntheticFrame = name ? describeBuiltInComponentFrame(name) : ""; + 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 + ) { { - if (typeof fn === "function") { - componentFrameCache.set(fn, syntheticFrame); - } + var isStaticChildren = false; + return jsxDEV$1(type, config, maybeKey, isStaticChildren, source, self); } - - return syntheticFrame; } - function describeFunctionComponentFrame(fn, ownerFn) { + function jsxProdSignatureRunningInDevWithStaticChildren( + type, + config, + maybeKey, + source, + self + ) { { - return describeNativeComponentFrame(fn, false); + var isStaticChildren = true; + return jsxDEV$1(type, config, maybeKey, isStaticChildren, source, self); } } + var didWarnAboutKeySpread = {}; + /** + * https://github.com/reactjs/rfcs/pull/107 + * @param {*} type + * @param {object} props + * @param {string} key + */ - function shouldConstruct(Component) { - var prototype = Component.prototype; - return !!(prototype && prototype.isReactComponent); - } - - function describeUnknownElementTypeFrameInDEV(type, ownerFn) { - if (type == null) { - return ""; - } - - if (typeof type === "function") { - { - return describeNativeComponentFrame(type, shouldConstruct(type)); - } - } - - if (typeof type === "string") { - return describeBuiltInComponentFrame(type); - } - - switch (type) { - case REACT_SUSPENSE_TYPE: - return describeBuiltInComponentFrame("Suspense"); - - case REACT_SUSPENSE_LIST_TYPE: - return describeBuiltInComponentFrame("SuspenseList"); - } - - if (typeof type === "object") { - switch (type.$$typeof) { - case REACT_FORWARD_REF_TYPE: - return describeFunctionComponentFrame(type.render); + 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 = ""; - case REACT_MEMO_TYPE: - // Memo may contain any component type so we recursively resolve it. - return describeUnknownElementTypeFrameInDEV(type.type, ownerFn); + 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."; + } - case REACT_LAZY_TYPE: { - var lazyComponent = type; - var payload = lazyComponent._payload; - var init = lazyComponent._init; + var sourceInfo = getSourceInfoErrorAddendum(source); - try { - // Lazy may contain any component type so we recursively resolve it. - return describeUnknownElementTypeFrameInDEV( - init(payload), - ownerFn - ); - } catch (x) {} + if (sourceInfo) { + info += sourceInfo; + } else { + info += getDeclarationErrorAddendum(); } - } - } - return ""; - } + var typeString; - var loggedTypeFailures = {}; - var ReactDebugCurrentFrame$1 = ReactSharedInternals.ReactDebugCurrentFrame; + 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; + } - function setCurrentlyValidatingElement$2(element) { - { - if (element) { - var owner = element._owner; - var stack = describeUnknownElementTypeFrameInDEV( - element.type, - owner ? owner.type : null + 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 ); - ReactDebugCurrentFrame$1.setExtraStackFrame(stack); } else { - ReactDebugCurrentFrame$1.setExtraStackFrame(null); - } - } - } - - function checkPropTypes( - typeSpecs, - values, - location, - componentName, - element - ) { - { - // $FlowFixMe[incompatible-use] This is okay but Flow doesn't know it. - var has = Function.call.bind(hasOwnProperty); + // 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; - for (var typeSpecName in typeSpecs) { - if (has(typeSpecs, typeSpecName)) { - var error$1 = void 0; // Prop type validation may throw. In case they do, we don't want to - // fail the render phase where it didn't fail before. So we log it. - // After these have been cleaned up, we'll let them throw. + if (children !== undefined) { + if (isStaticChildren) { + if (isArray(children)) { + for (var i = 0; i < children.length; i++) { + validateChildKeys(children[i], type); + } - try { - // This is intentionally an invariant that gets caught. It's the same - // behavior as without this statement except with a better message. - if (typeof typeSpecs[typeSpecName] !== "function") { - // eslint-disable-next-line react-internal/prod-error-codes - var err = Error( - (componentName || "React class") + - ": " + - location + - " type `" + - typeSpecName + - "` is invalid; " + - "it must be a function, usually from the `prop-types` package, but received `" + - typeof typeSpecs[typeSpecName] + - "`." + - "This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`." + 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." ); - err.name = "Invariant Violation"; - throw err; } - - error$1 = typeSpecs[typeSpecName]( - values, - typeSpecName, - componentName, - location, - null, - "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED" - ); - } catch (ex) { - error$1 = ex; + } else { + validateChildKeys(children, type); } + } + } // Warn about key spread regardless of whether the type is valid. - if (error$1 && !(error$1 instanceof Error)) { - setCurrentlyValidatingElement$2(element); + 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}"; - error( - "%s: type specification of %s" + - " `%s` is invalid; the type checker " + - "function must return `null` or an `Error` but returned a %s. " + - "You may have forgotten to pass an argument to the type checker " + - "creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and " + - "shape all require an argument).", - componentName || "React class", - location, - typeSpecName, - typeof error$1 - ); + if (!didWarnAboutKeySpread[componentName + beforeExample]) { + var afterExample = + keys.length > 0 ? "{" + keys.join(": ..., ") + ": ...}" : "{}"; - setCurrentlyValidatingElement$2(null); - } + 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 + ); - if ( - error$1 instanceof Error && - !(error$1.message in loggedTypeFailures) - ) { - // Only monitor this failure once because there tends to be a lot of the - // same error. - loggedTypeFailures[error$1.message] = true; - setCurrentlyValidatingElement$2(element); + didWarnAboutKeySpread[componentName + beforeExample] = true; + } + } - error("Failed %s type: %s", location, error$1.message); + var propName; // Reserved names are extracted - setCurrentlyValidatingElement$2(null); - } + var props = {}; + var key = null; + var ref = null; // Currently, key can be spread in as a prop. This causes a potential + // issue if key is also explicitly declared (ie.
+ // or
). We want to deprecate key spread, + // but as an intermediary step, we will use jsxDEV for everything except + //
, because we aren't currently able to tell if + // key is explicitly declared to be undefined or not. + + if (maybeKey !== undefined) { + { + checkKeyStringCoercion(maybeKey); } + + key = "" + maybeKey; } - } - } - var REACT_CLIENT_REFERENCE$1 = Symbol.for("react.client.reference"); + if (hasValidKey(config)) { + { + checkKeyStringCoercion(config.key); + } - function setCurrentlyValidatingElement$1(element) { - { - if (element) { - var owner = element._owner; - var stack = describeUnknownElementTypeFrameInDEV( - element.type, - owner ? owner.type : null - ); - setExtraStackFrame(stack); - } else { - setExtraStackFrame(null); + key = "" + config.key; } - } - } - var propTypesMisspellWarningShown$1; + if (hasValidRef(config)) { + ref = config.ref; + warnIfStringRefCannotBeAutoConverted(config, self); + } // Remaining properties are added to a new props object - { - propTypesMisspellWarningShown$1 = false; - } + for (propName in config) { + if ( + hasOwnProperty.call(config, propName) && // Skip over reserved prop names + propName !== "key" && // TODO: `ref` will no longer be reserved in the next major + propName !== "ref" + ) { + props[propName] = config[propName]; + } + } // Resolve default props - function getDeclarationErrorAddendum$1() { - if (ReactCurrentOwner$1.current) { - var name = getComponentNameFromType(ReactCurrentOwner$1.current.type); + if (type && type.defaultProps) { + var defaultProps = type.defaultProps; - if (name) { - return "\n\nCheck the render method of `" + name + "`."; + for (propName in defaultProps) { + if (props[propName] === undefined) { + props[propName] = defaultProps[propName]; + } + } } - } - return ""; - } + if (key || ref) { + var displayName = + typeof type === "function" + ? type.displayName || type.name || "Unknown" + : type; - function getSourceInfoErrorAddendum$1(source) { - if (source !== undefined) { - var fileName = source.fileName.replace(/^.*[\\\/]/, ""); - var lineNumber = source.lineNumber; - return "\n\nCheck your code at " + fileName + ":" + lineNumber + "."; - } + if (key) { + defineKeyPropWarningGetter(props, displayName); + } - return ""; - } + if (ref) { + defineRefPropWarningGetter(props, displayName); + } + } - function getSourceInfoErrorAddendumForProps(elementProps) { - if (elementProps !== null && elementProps !== undefined) { - return getSourceInfoErrorAddendum$1(elementProps.__source); - } + var element = ReactElement( + type, + key, + ref, + self, + source, + ReactCurrentOwner.current, + props + ); - return ""; + if (type === REACT_FRAGMENT_TYPE) { + validateFragmentProps(element); + } else { + validatePropTypes(element); + } + + return element; + } } /** - * 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. + * Create and return a new ReactElement of the given type. + * See https://reactjs.org/docs/react-api.html#createelement */ - var ownerHasKeyUseWarning$1 = {}; + function createElement(type, config, children) { + { + 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 = ""; - function getCurrentComponentErrorInfo$1(parentType) { - var info = getDeclarationErrorAddendum$1(); + 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."; + } - if (!info) { - var parentName = getComponentNameFromType(parentType); + var sourceInfo = getSourceInfoErrorAddendumForProps(config); - if (parentName) { - info = - "\n\nCheck the top-level render call using <" + parentName + ">."; - } - } + if (sourceInfo) { + info += sourceInfo; + } else { + info += getDeclarationErrorAddendum(); + } - return info; - } - /** - * 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 - * reordered. All children that haven't already been validated are required to - * have a "key" property assigned to it. Error statuses are cached so a warning - * will only be shown once. - * - * @internal - * @param {ReactElement} element Element that requires a key. - * @param {*} parentType element's parent's type. - */ + 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; + } - function validateExplicitKey$1(element, parentType) { - if (!element._store || element._store.validated || element.key != null) { - return; + error( + "React.createElement: 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.) + for (var i = 2; i < arguments.length; i++) { + validateChildKeys(arguments[i], type); + } + } // Unlike the jsx() runtime, createElement() doesn't warn about key spread. } - element._store.validated = true; - var currentComponentErrorInfo = - getCurrentComponentErrorInfo$1(parentType); + var propName; // Reserved names are extracted - if (ownerHasKeyUseWarning$1[currentComponentErrorInfo]) { - return; - } + var props = {}; + var key = null; + var ref = null; - ownerHasKeyUseWarning$1[currentComponentErrorInfo] = true; // Usually the current owner is the offender, but if it accepts children as a - // property, it may be the creator of the child that's responsible for - // assigning it a key. + if (config != null) { + if (hasValidRef(config)) { + ref = config.ref; - var childOwner = ""; + { + warnIfStringRefCannotBeAutoConverted(config, config.__self); + } + } - if ( - element && - element._owner && - element._owner !== ReactCurrentOwner$1.current - ) { - // Give the component that originally created this child. - childOwner = - " It was passed a child from " + - getComponentNameFromType(element._owner.type) + - "."; - } + if (hasValidKey(config)) { + { + checkKeyStringCoercion(config.key); + } - { - setCurrentlyValidatingElement$1(element); + key = "" + config.key; + } // Remaining properties are added to a new props object - error( - 'Each child in a list should have a unique "key" prop.' + - "%s%s See https://reactjs.org/link/warning-keys for more information.", - currentComponentErrorInfo, - childOwner - ); + for (propName in config) { + if ( + hasOwnProperty.call(config, propName) && // Skip over reserved prop names + propName !== "key" && // TODO: `ref` will no longer be reserved in the next major + propName !== "ref" && // ...and maybe these, too, though we currently rely on them for + // warnings and debug information in dev. Need to decide if we're OK + // with dropping them. In the jsx() runtime it's not an issue because + // the data gets passed as separate arguments instead of props, but + // it would be nice to stop relying on them entirely so we can drop + // them from the internal Fiber field. + propName !== "__self" && + propName !== "__source" + ) { + props[propName] = config[propName]; + } + } + } // Children can be more than one argument, and those are transferred onto + // the newly allocated props object. - setCurrentlyValidatingElement$1(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. - */ + var childrenLength = arguments.length - 2; - function validateChildKeys$1(node, parentType) { - if (typeof node !== "object" || !node) { - return; - } + if (childrenLength === 1) { + props.children = children; + } else if (childrenLength > 1) { + var childArray = Array(childrenLength); - if (node.$$typeof === REACT_CLIENT_REFERENCE$1); - else if (isArray(node)) { - for (var i = 0; i < node.length; i++) { - var child = node[i]; + for (var _i = 0; _i < childrenLength; _i++) { + childArray[_i] = arguments[_i + 2]; + } - if (isValidElement$1(child)) { - validateExplicitKey$1(child, parentType); + { + if (Object.freeze) { + Object.freeze(childArray); } } - } else if (isValidElement$1(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$1(step.value)) { - validateExplicitKey$1(step.value, parentType); - } - } + props.children = childArray; + } // Resolve default props + + if (type && type.defaultProps) { + var defaultProps = type.defaultProps; + + for (propName in defaultProps) { + if (props[propName] === undefined) { + props[propName] = defaultProps[propName]; } } } - } - /** - * Given an element, validate that its props follow the propTypes definition, - * provided by the type. - * - * @param {ReactElement} element - */ - function validatePropTypes$1(element) { { - var type = element.type; + if (key || ref) { + var displayName = + typeof type === "function" + ? type.displayName || type.name || "Unknown" + : type; - if (type === null || type === undefined || typeof type === "string") { - return; - } + if (key) { + defineKeyPropWarningGetter(props, displayName); + } - if (type.$$typeof === REACT_CLIENT_REFERENCE$1) { - return; + if (ref) { + defineRefPropWarningGetter(props, displayName); + } } + } - var propTypes; + var element = ReactElement( + type, + key, + ref, + undefined, + undefined, + ReactCurrentOwner.current, + props + ); - if (typeof type === "function") { - propTypes = type.propTypes; - } else if ( - typeof type === "object" && - (type.$$typeof === REACT_FORWARD_REF_TYPE || // Note: Memo only checks outer props here. - // Inner props are checked in the reconciler. - type.$$typeof === REACT_MEMO_TYPE) - ) { - propTypes = type.propTypes; - } else { - return; - } - - if (propTypes) { - // Intentionally inside to avoid triggering lazy initializers: - var name = getComponentNameFromType(type); - checkPropTypes(propTypes, element.props, "prop", name, element); - } else if ( - type.PropTypes !== undefined && - !propTypesMisspellWarningShown$1 - ) { - propTypesMisspellWarningShown$1 = true; // Intentionally inside to avoid triggering lazy initializers: - - var _name = getComponentNameFromType(type); - - error( - "Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", - _name || "Unknown" - ); - } - - if ( - typeof type.getDefaultProps === "function" && - !type.getDefaultProps.isReactClassApproved - ) { - error( - "getDefaultProps is only used on classic React.createClass " + - "definitions. Use a static property named `defaultProps` instead." - ); - } + if (type === REACT_FRAGMENT_TYPE) { + validateFragmentProps(element); + } else { + validatePropTypes(element); } + + return element; + } + function cloneAndReplaceKey(oldElement, newKey) { + return ReactElement( + oldElement.type, + newKey, + oldElement.ref, + undefined, + undefined, + oldElement._owner, + oldElement.props + ); } /** - * Given a fragment, validate that it can only be provided with fragment props - * @param {ReactElement} fragment + * Clone and return a new ReactElement using element as the starting point. + * See https://reactjs.org/docs/react-api.html#cloneelement */ - function validateFragmentProps$1(fragment) { - { - var keys = Object.keys(fragment.props); + function cloneElement(element, config, children) { + if (element === null || element === undefined) { + throw new Error( + "React.cloneElement(...): The argument must be a React element, but you passed " + + element + + "." + ); + } - for (var i = 0; i < keys.length; i++) { - var key = keys[i]; + var propName; // Original props are copied - if (key !== "children" && key !== "key") { - setCurrentlyValidatingElement$1(fragment); + var props = assign({}, element.props); // Reserved names are extracted - error( - "Invalid prop `%s` supplied to `React.Fragment`. " + - "React.Fragment can only have `key` and `children` props.", - key - ); + var key = element.key; + var ref = element.ref; // Owner will be preserved, unless ref is overridden - setCurrentlyValidatingElement$1(null); - break; - } - } + var owner = element._owner; - if (fragment.ref !== null) { - setCurrentlyValidatingElement$1(fragment); + if (config != null) { + if (hasValidRef(config)) { + // Silently steal the ref from the parent. + ref = config.ref; + owner = ReactCurrentOwner.current; + } - error("Invalid attribute `ref` supplied to `React.Fragment`."); + if (hasValidKey(config)) { + { + checkKeyStringCoercion(config.key); + } - setCurrentlyValidatingElement$1(null); - } - } - } + key = "" + config.key; + } // Remaining properties override existing props - function createElementWithValidation(type, props, children) { - 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. + var defaultProps; - if (!validType) { - var info = ""; + if (element.type && element.type.defaultProps) { + defaultProps = element.type.defaultProps; + } - 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."; + for (propName in config) { + if ( + hasOwnProperty.call(config, propName) && // Skip over reserved prop names + propName !== "key" && // TODO: `ref` will no longer be reserved in the next major + propName !== "ref" && // ...and maybe these, too, though we currently rely on them for + // warnings and debug information in dev. Need to decide if we're OK + // with dropping them. In the jsx() runtime it's not an issue because + // the data gets passed as separate arguments instead of props, but + // it would be nice to stop relying on them entirely so we can drop + // them from the internal Fiber field. + propName !== "__self" && + propName !== "__source" + ) { + if (config[propName] === undefined && defaultProps !== undefined) { + // Resolve default props + props[propName] = defaultProps[propName]; + } else { + props[propName] = config[propName]; + } + } } + } // Children can be more than one argument, and those are transferred onto + // the newly allocated props object. - var sourceInfo = getSourceInfoErrorAddendumForProps(props); + var childrenLength = arguments.length - 2; - if (sourceInfo) { - info += sourceInfo; - } else { - info += getDeclarationErrorAddendum$1(); + if (childrenLength === 1) { + props.children = children; + } else if (childrenLength > 1) { + var childArray = Array(childrenLength); + + for (var i = 0; i < childrenLength; i++) { + childArray[i] = arguments[i + 2]; } - var typeString; + props.children = childArray; + } - 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; - } + var clonedElement = ReactElement( + element.type, + key, + ref, + undefined, + undefined, + owner, + props + ); - { - error( - "React.createElement: type is invalid -- expected a string (for " + - "built-in components) or a class/function (for composite " + - "components) but got: %s.%s", - typeString, - info - ); - } + for (var _i2 = 2; _i2 < arguments.length; _i2++) { + validateChildKeys(arguments[_i2], clonedElement.type); } - var element = createElement$1.apply(this, arguments); // 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. + validatePropTypes(clonedElement); + return clonedElement; + } - 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.) + function getDeclarationErrorAddendum() { + { + if (ReactCurrentOwner.current) { + var name = getComponentNameFromType(ReactCurrentOwner.current.type); - if (validType) { - for (var i = 2; i < arguments.length; i++) { - validateChildKeys$1(arguments[i], type); + if (name) { + return "\n\nCheck the render method of `" + name + "`."; + } } - } - if (type === REACT_FRAGMENT_TYPE) { - validateFragmentProps$1(element); - } else { - validatePropTypes$1(element); + return ""; } - - return element; } - function cloneElementWithValidation(element, props, children) { - var newElement = cloneElement$1.apply(this, arguments); - for (var i = 2; i < arguments.length; i++) { - validateChildKeys$1(arguments[i], newElement.type); + function getSourceInfoErrorAddendumForProps(elementProps) { + if (elementProps !== null && elementProps !== undefined) { + return getSourceInfoErrorAddendum(elementProps.__source); } - validatePropTypes$1(newElement); - return newElement; + return ""; } - var createElement = createElementWithValidation; - var cloneElement = cloneElementWithValidation; + function getSourceInfoErrorAddendum(source) { + { + if (source !== undefined) { + var fileName = source.fileName.replace(/^.*[\\\/]/, ""); + var lineNumber = source.lineNumber; + return "\n\nCheck your code at " + fileName + ":" + lineNumber + "."; + } - var SEPARATOR = "."; - var SUBSEPARATOR = ":"; + return ""; + } + } /** - * Escape and wrap key so it is safe to use as a reactid + * 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. * - * @param {string} key to be escaped. - * @return {string} the escaped key. + * @internal + * @param {ReactNode} node Statically passed child of any type. + * @param {*} parentType node's parent's type. */ - function escape(key) { - var escapeRegex = /[=:]/g; - var escaperLookup = { - "=": "=0", - ":": "=2" - }; - var escapedString = key.replace(escapeRegex, function (match) { - return escaperLookup[match]; - }); - return "$" + escapedString; + function validateChildKeys(node, parentType) { + { + if (typeof node !== "object" || !node) { + return; + } + + if (node.$$typeof === REACT_CLIENT_REFERENCE); + else if (isArray(node)) { + for (var i = 0; i < node.length; i++) { + var child = node[i]; + + 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); + } + } + } + } + } + } } /** - * TODO: Test that a single child and an array with one item have the same key - * pattern. + * 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 */ - var didWarnAboutMaps = false; - var userProvidedKeyEscapeRegex = /\/+/g; - - function escapeUserProvidedKey(text) { - return text.replace(userProvidedKeyEscapeRegex, "$&/"); + function isValidElement(object) { + return ( + typeof object === "object" && + object !== null && + object.$$typeof === REACT_ELEMENT_TYPE + ); } + var ownerHasKeyUseWarning = {}; /** - * Generate a key string that identifies a element within a set. + * 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 + * reordered. All children that haven't already been validated are required to + * have a "key" property assigned to it. Error statuses are cached so a warning + * will only be shown once. * - * @param {*} element A element that could contain a manual key. - * @param {number} index Index that is used if a manual key is not provided. - * @return {string} + * @internal + * @param {ReactElement} element Element that requires a key. + * @param {*} parentType element's parent's type. + */ + + function validateExplicitKey(element, parentType) { + { + if ( + !element._store || + element._store.validated || + element.key != null + ) { + return; + } + + element._store.validated = true; + var currentComponentErrorInfo = + getCurrentComponentErrorInfo(parentType); + + if (ownerHasKeyUseWarning[currentComponentErrorInfo]) { + return; + } + + ownerHasKeyUseWarning[currentComponentErrorInfo] = true; // Usually the current owner is the offender, but if it accepts children as a + // property, it may be the creator of the child that's responsible for + // assigning it a key. + + var childOwner = ""; + + if ( + element && + element._owner && + element._owner !== ReactCurrentOwner.current + ) { + // Give the component that originally created this child. + childOwner = + " It was passed a child from " + + getComponentNameFromType(element._owner.type) + + "."; + } + + setCurrentlyValidatingElement(element); + + error( + 'Each child in a list should have a unique "key" prop.' + + "%s%s See https://reactjs.org/link/warning-keys for more information.", + currentComponentErrorInfo, + childOwner + ); + + setCurrentlyValidatingElement(null); + } + } + + function setCurrentlyValidatingElement(element) { + { + if (element) { + var owner = element._owner; + var stack = describeUnknownElementTypeFrameInDEV( + element.type, + owner ? owner.type : null + ); + ReactDebugCurrentFrame.setExtraStackFrame(stack); + } else { + ReactDebugCurrentFrame.setExtraStackFrame(null); + } + } + } + + function getCurrentComponentErrorInfo(parentType) { + { + var info = getDeclarationErrorAddendum(); + + if (!info) { + var parentName = getComponentNameFromType(parentType); + + if (parentName) { + info = + "\n\nCheck the top-level render call using <" + parentName + ">."; + } + } + + return info; + } + } + /** + * 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 propTypesMisspellWarningShown = false; + /** + * Given an element, validate that its props follow the propTypes definition, + * provided by the type. + * + * @param {ReactElement} element + */ + + function validatePropTypes(element) { + { + var type = element.type; + + if (type === null || type === undefined || typeof type === "string") { + return; + } + + if (type.$$typeof === REACT_CLIENT_REFERENCE) { + return; + } + + var propTypes; + + if (typeof type === "function") { + propTypes = type.propTypes; + } else if ( + typeof type === "object" && + (type.$$typeof === REACT_FORWARD_REF_TYPE || // Note: Memo only checks outer props here. + // Inner props are checked in the reconciler. + type.$$typeof === REACT_MEMO_TYPE) + ) { + propTypes = type.propTypes; + } else { + return; + } + + if (propTypes) { + // Intentionally inside to avoid triggering lazy initializers: + var name = getComponentNameFromType(type); + checkPropTypes(propTypes, element.props, "prop", name, element); + } else if ( + type.PropTypes !== undefined && + !propTypesMisspellWarningShown + ) { + propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers: + + var _name = getComponentNameFromType(type); + + error( + "Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", + _name || "Unknown" + ); + } + + if ( + typeof type.getDefaultProps === "function" && + !type.getDefaultProps.isReactClassApproved + ) { + error( + "getDefaultProps is only used on classic React.createClass " + + "definitions. Use a static property named `defaultProps` instead." + ); + } + } + } + + var SEPARATOR = "."; + var SUBSEPARATOR = ":"; + /** + * Escape and wrap key so it is safe to use as a reactid + * + * @param {string} key to be escaped. + * @return {string} the escaped key. + */ + + function escape(key) { + var escapeRegex = /[=:]/g; + var escaperLookup = { + "=": "=0", + ":": "=2" + }; + var escapedString = key.replace(escapeRegex, function (match) { + return escaperLookup[match]; + }); + return "$" + escapedString; + } + /** + * TODO: Test that a single child and an array with one item have the same key + * pattern. + */ + + var didWarnAboutMaps = false; + var userProvidedKeyEscapeRegex = /\/+/g; + + function escapeUserProvidedKey(text) { + return text.replace(userProvidedKeyEscapeRegex, "$&/"); + } + /** + * Generate a key string that identifies a element within a set. + * + * @param {*} element A element that could contain a manual key. + * @param {number} index Index that is used if a manual key is not provided. + * @return {string} */ function getElementKey(element, index) { @@ -1933,7 +2183,7 @@ if (__DEV__) { return c; }); } else if (mappedChild != null) { - if (isValidElement$1(mappedChild)) { + if (isValidElement(mappedChild)) { { // The `if` statement here prevents auto-disabling of the safe // coercion ESLint rule, so we must manually disable it below. @@ -2136,1259 +2386,544 @@ if (__DEV__) { * passed without a wrapper, but the purpose of this helper function is to * abstract away the particular structure of children. * - * @param {?object} children Child collection structure. - * @return {ReactElement} The first and only `ReactElement` contained in the - * structure. - */ - - function onlyChild(children) { - if (!isValidElement$1(children)) { - throw new Error( - "React.Children.only expected to receive a single React element child." - ); - } - - return children; - } - - // an immutable object with a single mutable value - function createRef() { - var refObject = { - current: null - }; - - { - Object.seal(refObject); - } - - return refObject; - } - - function resolveDispatcher() { - var dispatcher = ReactCurrentDispatcher$1.current; - - { - if (dispatcher === null) { - error( - "Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for" + - " one of the following reasons:\n" + - "1. You might have mismatching versions of React and the renderer (such as React DOM)\n" + - "2. You might be breaking the Rules of Hooks\n" + - "3. You might have more than one copy of React in the same app\n" + - "See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem." - ); - } - } // Will result in a null access error if accessed outside render phase. We - // intentionally don't throw our own error because this is in a hot path. - // Also helps ensure this is inlined. - - return dispatcher; - } - function useCallback(callback, deps) { - var dispatcher = resolveDispatcher(); - return dispatcher.useCallback(callback, deps); - } - function useMemo(create, deps) { - var dispatcher = resolveDispatcher(); - return dispatcher.useMemo(create, deps); - } - function useDebugValue(value, formatterFn) { - { - var dispatcher = resolveDispatcher(); - return dispatcher.useDebugValue(value, formatterFn); - } - } - function useId() { - var dispatcher = resolveDispatcher(); - return dispatcher.useId(); - } - function use(usable) { - var dispatcher = resolveDispatcher(); - return dispatcher.use(usable); - } - - function forwardRef(render) { - { - if (render != null && render.$$typeof === REACT_MEMO_TYPE) { - error( - "forwardRef requires a render function but received a `memo` " + - "component. Instead of forwardRef(memo(...)), use " + - "memo(forwardRef(...))." - ); - } else if (typeof render !== "function") { - error( - "forwardRef requires a render function but was given %s.", - render === null ? "null" : typeof render - ); - } else { - if (render.length !== 0 && render.length !== 2) { - error( - "forwardRef render functions accept exactly two parameters: props and ref. %s", - render.length === 1 - ? "Did you forget to use the ref parameter?" - : "Any additional parameter will be undefined." - ); - } - } - - if (render != null) { - if (render.defaultProps != null) { - error( - "forwardRef render functions do not support defaultProps. " + - "Did you accidentally pass a React component?" - ); - } - } - } - - var elementType = { - $$typeof: REACT_FORWARD_REF_TYPE, - render: render - }; - - { - var ownName; - Object.defineProperty(elementType, "displayName", { - enumerable: false, - configurable: true, - get: function () { - return ownName; - }, - set: function (name) { - ownName = name; // The inner component shouldn't inherit this display name in most cases, - // because the component may be used elsewhere. - // But it's nice for anonymous functions to inherit the name, - // so that our component-stack generation logic will display their frames. - // An anonymous function generally suggests a pattern like: - // React.forwardRef((props, ref) => {...}); - // This kind of inner function is not used elsewhere so the side effect is okay. - - if (!render.name && !render.displayName) { - render.displayName = name; - } - } - }); - } - - return elementType; - } - - var Uninitialized = -1; - var Pending = 0; - var Resolved = 1; - var Rejected = 2; - - function lazyInitializer(payload) { - if (payload._status === Uninitialized) { - var ctor = payload._result; - var thenable = ctor(); // Transition to the next state. - // This might throw either because it's missing or throws. If so, we treat it - // as still uninitialized and try again next time. Which is the same as what - // happens if the ctor or any wrappers processing the ctor throws. This might - // end up fixing it if the resolution was a concurrency bug. - - thenable.then( - function (moduleObject) { - if ( - payload._status === Pending || - payload._status === Uninitialized - ) { - // Transition to the next state. - var resolved = payload; - resolved._status = Resolved; - resolved._result = moduleObject; - } - }, - function (error) { - if ( - payload._status === Pending || - payload._status === Uninitialized - ) { - // Transition to the next state. - var rejected = payload; - rejected._status = Rejected; - rejected._result = error; - } - } - ); - - if (payload._status === Uninitialized) { - // In case, we're still uninitialized, then we're waiting for the thenable - // to resolve. Set it as pending in the meantime. - var pending = payload; - pending._status = Pending; - pending._result = thenable; - } - } - - if (payload._status === Resolved) { - var moduleObject = payload._result; - - { - if (moduleObject === undefined) { - error( - "lazy: Expected the result of a dynamic imp" + - "ort() call. " + - "Instead received: %s\n\nYour code should look like: \n " + // Break up imports to avoid accidentally parsing them as dependencies. - "const MyComponent = lazy(() => imp" + - "ort('./MyComponent'))\n\n" + - "Did you accidentally put curly braces around the import?", - moduleObject - ); - } - } - - { - if (!("default" in moduleObject)) { - error( - "lazy: Expected the result of a dynamic imp" + - "ort() call. " + - "Instead received: %s\n\nYour code should look like: \n " + // Break up imports to avoid accidentally parsing them as dependencies. - "const MyComponent = lazy(() => imp" + - "ort('./MyComponent'))", - moduleObject - ); - } - } - - return moduleObject.default; - } else { - throw payload._result; - } - } - - function lazy(ctor) { - var payload = { - // We use these fields to store the result. - _status: Uninitialized, - _result: ctor - }; - var lazyType = { - $$typeof: REACT_LAZY_TYPE, - _payload: payload, - _init: lazyInitializer - }; - - { - // In production, this would just set it on the object. - var defaultProps; - var propTypes; // $FlowFixMe[prop-missing] - - Object.defineProperties(lazyType, { - defaultProps: { - configurable: true, - get: function () { - return defaultProps; - }, - // $FlowFixMe[missing-local-annot] - set: function (newDefaultProps) { - error( - "React.lazy(...): It is not supported to assign `defaultProps` to " + - "a lazy component import. Either specify them where the component " + - "is defined, or create a wrapping component around it." - ); - - defaultProps = newDefaultProps; // Match production behavior more closely: - // $FlowFixMe[prop-missing] - - Object.defineProperty(lazyType, "defaultProps", { - enumerable: true - }); - } - }, - propTypes: { - configurable: true, - get: function () { - return propTypes; - }, - // $FlowFixMe[missing-local-annot] - set: function (newPropTypes) { - error( - "React.lazy(...): It is not supported to assign `propTypes` to " + - "a lazy component import. Either specify them where the component " + - "is defined, or create a wrapping component around it." - ); - - propTypes = newPropTypes; // Match production behavior more closely: - // $FlowFixMe[prop-missing] - - Object.defineProperty(lazyType, "propTypes", { - enumerable: true - }); - } - } - }); - } - - return lazyType; - } - - function memo(type, compare) { - { - if (!isValidElementType(type)) { - error( - "memo: The first argument must be a component. Instead " + - "received: %s", - type === null ? "null" : typeof type - ); - } - } - - var elementType = { - $$typeof: REACT_MEMO_TYPE, - type: type, - compare: compare === undefined ? null : compare - }; - - { - var ownName; - Object.defineProperty(elementType, "displayName", { - enumerable: false, - configurable: true, - get: function () { - return ownName; - }, - set: function (name) { - ownName = name; // The inner component shouldn't inherit this display name in most cases, - // because the component may be used elsewhere. - // But it's nice for anonymous functions to inherit the name, - // so that our component-stack generation logic will display their frames. - // An anonymous function generally suggests a pattern like: - // React.memo((props) => {...}); - // This kind of inner function is not used elsewhere so the side effect is okay. - - if (!type.name && !type.displayName) { - type.displayName = name; - } - } - }); - } - - return elementType; - } - - var UNTERMINATED = 0; - var TERMINATED = 1; - var ERRORED = 2; - - function createCacheRoot() { - return new WeakMap(); - } - - function createCacheNode() { - return { - s: UNTERMINATED, - // status, represents whether the cached computation returned a value or threw an error - v: undefined, - // value, either the cached result or an error, depending on s - o: null, - // object cache, a WeakMap where non-primitive arguments are stored - p: null // primitive cache, a regular Map where primitive arguments are stored. - }; - } - - function cache(fn) { - return function () { - var dispatcher = ReactCurrentCache.current; - - if (!dispatcher) { - // If there is no dispatcher, then we treat this as not being cached. - // $FlowFixMe[incompatible-call]: We don't want to use rest arguments since we transpile the code. - return fn.apply(null, arguments); - } - - var fnMap = dispatcher.getCacheForType(createCacheRoot); - var fnNode = fnMap.get(fn); - var cacheNode; - - if (fnNode === undefined) { - cacheNode = createCacheNode(); - fnMap.set(fn, cacheNode); - } else { - cacheNode = fnNode; - } - - for (var i = 0, l = arguments.length; i < l; i++) { - var arg = arguments[i]; - - if ( - typeof arg === "function" || - (typeof arg === "object" && arg !== null) - ) { - // Objects go into a WeakMap - var objectCache = cacheNode.o; - - if (objectCache === null) { - cacheNode.o = objectCache = new WeakMap(); - } - - var objectNode = objectCache.get(arg); - - if (objectNode === undefined) { - cacheNode = createCacheNode(); - objectCache.set(arg, cacheNode); - } else { - cacheNode = objectNode; - } - } else { - // Primitives go into a regular Map - var primitiveCache = cacheNode.p; - - if (primitiveCache === null) { - cacheNode.p = primitiveCache = new Map(); - } - - var primitiveNode = primitiveCache.get(arg); - - if (primitiveNode === undefined) { - cacheNode = createCacheNode(); - primitiveCache.set(arg, cacheNode); - } else { - cacheNode = primitiveNode; - } - } - } - - if (cacheNode.s === TERMINATED) { - return cacheNode.v; - } - - if (cacheNode.s === ERRORED) { - throw cacheNode.v; - } - - try { - // $FlowFixMe[incompatible-call]: We don't want to use rest arguments since we transpile the code. - var result = fn.apply(null, arguments); - var terminatedNode = cacheNode; - terminatedNode.s = TERMINATED; - terminatedNode.v = result; - return result; - } catch (error) { - // We store the first error that's thrown and rethrow it. - var erroredNode = cacheNode; - erroredNode.s = ERRORED; - erroredNode.v = error; - throw error; - } - }; - } - - /** - * Keeps track of the current batch's configuration such as how long an update - * should suspend for if it needs to. - */ - var ReactCurrentBatchConfig = { - transition: null - }; - - function startTransition(scope, options) { - var prevTransition = ReactCurrentBatchConfig.transition; // Each renderer registers a callback to receive the return value of - // the scope function. This is used to implement async actions. - - var callbacks = new Set(); - var transition = { - _callbacks: callbacks - }; - ReactCurrentBatchConfig.transition = transition; - var currentTransition = ReactCurrentBatchConfig.transition; - - { - ReactCurrentBatchConfig.transition._updatedFibers = new Set(); - } - - if (enableTransitionTracing) { - if (options !== undefined && options.name !== undefined) { - // $FlowFixMe[incompatible-use] found when upgrading Flow - ReactCurrentBatchConfig.transition.name = options.name; // $FlowFixMe[incompatible-use] found when upgrading Flow - - ReactCurrentBatchConfig.transition.startTime = -1; - } - } - - { - try { - var returnValue = scope(); - - if ( - typeof returnValue === "object" && - returnValue !== null && - typeof returnValue.then === "function" - ) { - callbacks.forEach(function (callback) { - return callback(currentTransition, returnValue); - }); - returnValue.then(noop, onError); - } - } catch (error) { - onError(error); - } finally { - warnAboutTransitionSubscriptions(prevTransition, currentTransition); - ReactCurrentBatchConfig.transition = prevTransition; - } - } - } - - function warnAboutTransitionSubscriptions( - prevTransition, - currentTransition - ) { - { - if (prevTransition === null && currentTransition._updatedFibers) { - var updatedFibersCount = currentTransition._updatedFibers.size; - - currentTransition._updatedFibers.clear(); - - if (updatedFibersCount > 10) { - warn( - "Detected a large number of updates inside startTransition. " + - "If this is due to a subscription please re-write it to use React provided hooks. " + - "Otherwise concurrent mode guarantees are off the table." - ); - } - } - } - } - - function noop() {} // Use reportError, if it exists. Otherwise console.error. This is the same as - // the default for onRecoverableError. - - var onError = - typeof reportError === "function" // In modern browsers, reportError will dispatch an error event, - ? // emulating an uncaught JavaScript error. - reportError - : function (error) { - // In older browsers and test environments, fallback to console.error. - // eslint-disable-next-line react-internal/no-production-logging - console["error"](error); - }; - - var ReactVersion = "18.3.0-www-modern-675604b7"; - - // Patch fetch - var Children = { - map: mapChildren, - forEach: forEachChildren, - count: countChildren, - toArray: toArray, - only: onlyChild - }; - - var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; - var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; - var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"); - 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; - } - - function warnIfStringRefCannotBeAutoConverted(config, self) { - { - if ( - typeof config.ref === "string" && - ReactCurrentOwner.current && - self && - ReactCurrentOwner.current.stateNode !== self - ) { - var componentName = getComponentNameFromType( - ReactCurrentOwner.current.type - ); - - if (!didWarnAboutStringRefs[componentName]) { - error( - 'Component "%s" contains the string ref "%s". ' + - "Support for string refs will be removed in a future major release. " + - "This case cannot be automatically converted to an arrow function. " + - "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.current.type), - config.ref - ); - - didWarnAboutStringRefs[componentName] = true; - } - } - } - } - - function defineKeyPropWarningGetter(props, displayName) { - { - var warnAboutAccessingKey = function () { - if (!specialPropKeyWarningShown) { - specialPropKeyWarningShown = true; - - error( - "%s: `key` is not a prop. Trying to access it will result " + - "in `undefined` being returned. If you need to access the same " + - "value within the child component, you should pass it as a different " + - "prop. (https://reactjs.org/link/special-props)", - displayName - ); - } - }; - - warnAboutAccessingKey.isReactWarning = true; - Object.defineProperty(props, "key", { - get: warnAboutAccessingKey, - configurable: true - }); - } - } - - function defineRefPropWarningGetter(props, displayName) { - { - var warnAboutAccessingRef = function () { - if (!specialPropRefWarningShown) { - specialPropRefWarningShown = true; - - error( - "%s: `ref` is not a prop. Trying to access it will result " + - "in `undefined` being returned. If you need to access the same " + - "value within the child component, you should pass it as a different " + - "prop. (https://reactjs.org/link/special-props)", - displayName - ); - } - }; - - warnAboutAccessingRef.isReactWarning = true; - Object.defineProperty(props, "ref", { - get: warnAboutAccessingRef, - configurable: true - }); - } - } - /** - * Factory method to create a new React element. This no longer adheres to - * the class pattern, so do not use new to call it. Also, instanceof check - * will not work. Instead test $$typeof field against Symbol.for('react.element') to check - * if something is a React Element. - * - * @param {*} type - * @param {*} props - * @param {*} key - * @param {string|object} ref - * @param {*} owner - * @param {*} self A *temporary* helper to detect places where `this` is - * different from the `owner` when React.createElement is called, so that we - * can warn. We want to get rid of owner and replace string `ref`s with arrow - * functions, and as long as `this` and owner are the same, there will be no - * change in behavior. - * @param {*} source An annotation object (added by a transpiler or otherwise) - * indicating filename, line number, and/or other information. - * @internal - */ - - function ReactElement(type, key, ref, self, source, owner, props) { - var element = { - // This tag allows us to uniquely identify this as a React Element - $$typeof: REACT_ELEMENT_TYPE, - // Built-in properties that belong on the element - type: type, - key: key, - ref: ref, - props: props, - // Record the component responsible for creating this element. - _owner: owner - }; - - { - // The validation flag is currently mutative. We put it on - // an external backing store so that we can freeze the whole object. - // This can be replaced with a WeakMap once they are implemented in - // commonly used development environments. - element._store = {}; // To make comparing ReactElements easier for testing purposes, we make - // the validation flag non-enumerable (where possible, which should - // include every environment we run tests in), so the test framework - // ignores it. - - Object.defineProperty(element._store, "validated", { - configurable: false, - enumerable: false, - writable: true, - value: false - }); // debugInfo contains Server Component debug information. - - Object.defineProperty(element, "_debugInfo", { - configurable: false, - enumerable: false, - writable: true, - value: null - }); - - if (Object.freeze) { - Object.freeze(element.props); - Object.freeze(element); - } - } - - 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 - * @param {object} props - * @param {string} key - */ - - 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; + * @param {?object} children Child collection structure. + * @return {ReactElement} The first and only `ReactElement` contained in the + * structure. + */ - if (children !== undefined) { - if (isStaticChildren) { - if (isArray(children)) { - for (var i = 0; i < children.length; i++) { - validateChildKeys(children[i], type); - } + function onlyChild(children) { + if (!isValidElement(children)) { + throw new Error( + "React.Children.only expected to receive a single React element child." + ); + } - 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. + return children; + } - 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}"; + // an immutable object with a single mutable value + function createRef() { + var refObject = { + current: null + }; - if (!didWarnAboutKeySpread[componentName + beforeExample]) { - var afterExample = - keys.length > 0 ? "{" + keys.join(": ..., ") + ": ...}" : "{}"; + { + Object.seal(refObject); + } - 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 - ); + return refObject; + } - didWarnAboutKeySpread[componentName + beforeExample] = true; - } - } + function resolveDispatcher() { + var dispatcher = ReactCurrentDispatcher$1.current; - var propName; // Reserved names are extracted + { + if (dispatcher === null) { + error( + "Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for" + + " one of the following reasons:\n" + + "1. You might have mismatching versions of React and the renderer (such as React DOM)\n" + + "2. You might be breaking the Rules of Hooks\n" + + "3. You might have more than one copy of React in the same app\n" + + "See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem." + ); + } + } // Will result in a null access error if accessed outside render phase. We + // intentionally don't throw our own error because this is in a hot path. + // Also helps ensure this is inlined. - var props = {}; - var key = null; - var ref = null; // Currently, key can be spread in as a prop. This causes a potential - // issue if key is also explicitly declared (ie.
- // or
). We want to deprecate key spread, - // but as an intermediary step, we will use jsxDEV for everything except - //
, because we aren't currently able to tell if - // key is explicitly declared to be undefined or not. + return dispatcher; + } + function useCallback(callback, deps) { + var dispatcher = resolveDispatcher(); + return dispatcher.useCallback(callback, deps); + } + function useMemo(create, deps) { + var dispatcher = resolveDispatcher(); + return dispatcher.useMemo(create, deps); + } + function useDebugValue(value, formatterFn) { + { + var dispatcher = resolveDispatcher(); + return dispatcher.useDebugValue(value, formatterFn); + } + } + function useId() { + var dispatcher = resolveDispatcher(); + return dispatcher.useId(); + } + function use(usable) { + var dispatcher = resolveDispatcher(); + return dispatcher.use(usable); + } - if (maybeKey !== undefined) { - { - checkKeyStringCoercion(maybeKey); + function forwardRef(render) { + { + if (render != null && render.$$typeof === REACT_MEMO_TYPE) { + error( + "forwardRef requires a render function but received a `memo` " + + "component. Instead of forwardRef(memo(...)), use " + + "memo(forwardRef(...))." + ); + } else if (typeof render !== "function") { + error( + "forwardRef requires a render function but was given %s.", + render === null ? "null" : typeof render + ); + } else { + if (render.length !== 0 && render.length !== 2) { + error( + "forwardRef render functions accept exactly two parameters: props and ref. %s", + render.length === 1 + ? "Did you forget to use the ref parameter?" + : "Any additional parameter will be undefined." + ); } - - key = "" + maybeKey; } - if (hasValidKey(config)) { - { - checkKeyStringCoercion(config.key); + if (render != null) { + if (render.defaultProps != null) { + error( + "forwardRef render functions do not support defaultProps. " + + "Did you accidentally pass a React component?" + ); } - - key = "" + config.key; } + } - if (hasValidRef(config)) { - ref = config.ref; - warnIfStringRefCannotBeAutoConverted(config, self); - } // Remaining properties are added to a new props object - - for (propName in config) { - if ( - hasOwnProperty.call(config, propName) && // Skip over reserved prop names - propName !== "key" && // TODO: `ref` will no longer be reserved in the next major - propName !== "ref" - ) { - props[propName] = config[propName]; - } - } // Resolve default props + var elementType = { + $$typeof: REACT_FORWARD_REF_TYPE, + render: render + }; - if (type && type.defaultProps) { - var defaultProps = type.defaultProps; + { + var ownName; + Object.defineProperty(elementType, "displayName", { + enumerable: false, + configurable: true, + get: function () { + return ownName; + }, + set: function (name) { + ownName = name; // The inner component shouldn't inherit this display name in most cases, + // because the component may be used elsewhere. + // But it's nice for anonymous functions to inherit the name, + // so that our component-stack generation logic will display their frames. + // An anonymous function generally suggests a pattern like: + // React.forwardRef((props, ref) => {...}); + // This kind of inner function is not used elsewhere so the side effect is okay. - for (propName in defaultProps) { - if (props[propName] === undefined) { - props[propName] = defaultProps[propName]; + if (!render.name && !render.displayName) { + render.displayName = name; } } - } + }); + } - if (key || ref) { - var displayName = - typeof type === "function" - ? type.displayName || type.name || "Unknown" - : type; + return elementType; + } - if (key) { - defineKeyPropWarningGetter(props, displayName); - } + var Uninitialized = -1; + var Pending = 0; + var Resolved = 1; + var Rejected = 2; - if (ref) { - defineRefPropWarningGetter(props, displayName); - } - } + function lazyInitializer(payload) { + if (payload._status === Uninitialized) { + var ctor = payload._result; + var thenable = ctor(); // Transition to the next state. + // This might throw either because it's missing or throws. If so, we treat it + // as still uninitialized and try again next time. Which is the same as what + // happens if the ctor or any wrappers processing the ctor throws. This might + // end up fixing it if the resolution was a concurrency bug. - var element = ReactElement( - type, - key, - ref, - self, - source, - ReactCurrentOwner.current, - props + thenable.then( + function (moduleObject) { + if ( + payload._status === Pending || + payload._status === Uninitialized + ) { + // Transition to the next state. + var resolved = payload; + resolved._status = Resolved; + resolved._result = moduleObject; + } + }, + function (error) { + if ( + payload._status === Pending || + payload._status === Uninitialized + ) { + // Transition to the next state. + var rejected = payload; + rejected._status = Rejected; + rejected._result = error; + } + } ); - if (type === REACT_FRAGMENT_TYPE) { - validateFragmentProps(element); - } else { - validatePropTypes(element); + if (payload._status === Uninitialized) { + // In case, we're still uninitialized, then we're waiting for the thenable + // to resolve. Set it as pending in the meantime. + var pending = payload; + pending._status = Pending; + pending._result = thenable; } - - return element; } - } - function getDeclarationErrorAddendum() { - { - if (ReactCurrentOwner.current) { - var name = getComponentNameFromType(ReactCurrentOwner.current.type); + if (payload._status === Resolved) { + var moduleObject = payload._result; - if (name) { - return "\n\nCheck the render method of `" + name + "`."; + { + if (moduleObject === undefined) { + error( + "lazy: Expected the result of a dynamic imp" + + "ort() call. " + + "Instead received: %s\n\nYour code should look like: \n " + // Break up imports to avoid accidentally parsing them as dependencies. + "const MyComponent = lazy(() => imp" + + "ort('./MyComponent'))\n\n" + + "Did you accidentally put curly braces around the import?", + moduleObject + ); } } - return ""; - } - } - - function getSourceInfoErrorAddendum(source) { - { - if (source !== undefined) { - var fileName = source.fileName.replace(/^.*[\\\/]/, ""); - var lineNumber = source.lineNumber; - return "\n\nCheck your code at " + fileName + ":" + lineNumber + "."; + { + if (!("default" in moduleObject)) { + error( + "lazy: Expected the result of a dynamic imp" + + "ort() call. " + + "Instead received: %s\n\nYour code should look like: \n " + // Break up imports to avoid accidentally parsing them as dependencies. + "const MyComponent = lazy(() => imp" + + "ort('./MyComponent'))", + moduleObject + ); + } } - return ""; + return moduleObject.default; + } else { + throw payload._result; } } - /** - * 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 lazy(ctor) { + var payload = { + // We use these fields to store the result. + _status: Uninitialized, + _result: ctor + }; + var lazyType = { + $$typeof: REACT_LAZY_TYPE, + _payload: payload, + _init: lazyInitializer + }; + { - if (typeof node !== "object" || !node) { - return; - } + // In production, this would just set it on the object. + var defaultProps; + var propTypes; // $FlowFixMe[prop-missing] - if (node.$$typeof === REACT_CLIENT_REFERENCE); - else if (isArray(node)) { - for (var i = 0; i < node.length; i++) { - var child = node[i]; + Object.defineProperties(lazyType, { + defaultProps: { + configurable: true, + get: function () { + return defaultProps; + }, + // $FlowFixMe[missing-local-annot] + set: function (newDefaultProps) { + error( + "React.lazy(...): It is not supported to assign `defaultProps` to " + + "a lazy component import. Either specify them where the component " + + "is defined, or create a wrapping component around it." + ); - if (isValidElement(child)) { - validateExplicitKey(child, parentType); + defaultProps = newDefaultProps; // Match production behavior more closely: + // $FlowFixMe[prop-missing] + + Object.defineProperty(lazyType, "defaultProps", { + enumerable: true + }); } - } - } else if (isValidElement(node)) { - // This element was passed in a valid location. - if (node._store) { - node._store.validated = true; - } - } else { - var iteratorFn = getIteratorFn(node); + }, + propTypes: { + configurable: true, + get: function () { + return propTypes; + }, + // $FlowFixMe[missing-local-annot] + set: function (newPropTypes) { + error( + "React.lazy(...): It is not supported to assign `propTypes` to " + + "a lazy component import. Either specify them where the component " + + "is defined, or create a wrapping component around it." + ); - 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; + propTypes = newPropTypes; // Match production behavior more closely: + // $FlowFixMe[prop-missing] - while (!(step = iterator.next()).done) { - if (isValidElement(step.value)) { - validateExplicitKey(step.value, parentType); - } - } + Object.defineProperty(lazyType, "propTypes", { + enumerable: true + }); } } - } + }); } + + return lazyType; } - /** - * 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) { + function memo(type, compare) { { - return ( - typeof object === "object" && - object !== null && - object.$$typeof === REACT_ELEMENT_TYPE - ); + if (!isValidElementType(type)) { + error( + "memo: The first argument must be a component. Instead " + + "received: %s", + type === null ? "null" : typeof 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 - * reordered. All children that haven't already been validated are required to - * have a "key" property assigned to it. Error statuses are cached so a warning - * will only be shown once. - * - * @internal - * @param {ReactElement} element Element that requires a key. - * @param {*} parentType element's parent's type. - */ - function validateExplicitKey(element, parentType) { + var elementType = { + $$typeof: REACT_MEMO_TYPE, + type: type, + compare: compare === undefined ? null : compare + }; + { - if ( - !element._store || - element._store.validated || - element.key != null - ) { - return; - } + var ownName; + Object.defineProperty(elementType, "displayName", { + enumerable: false, + configurable: true, + get: function () { + return ownName; + }, + set: function (name) { + ownName = name; // The inner component shouldn't inherit this display name in most cases, + // because the component may be used elsewhere. + // But it's nice for anonymous functions to inherit the name, + // so that our component-stack generation logic will display their frames. + // An anonymous function generally suggests a pattern like: + // React.memo((props) => {...}); + // This kind of inner function is not used elsewhere so the side effect is okay. - element._store.validated = true; - var currentComponentErrorInfo = - getCurrentComponentErrorInfo(parentType); + if (!type.name && !type.displayName) { + type.displayName = name; + } + } + }); + } - if (ownerHasKeyUseWarning[currentComponentErrorInfo]) { - return; - } + return elementType; + } - ownerHasKeyUseWarning[currentComponentErrorInfo] = true; // Usually the current owner is the offender, but if it accepts children as a - // property, it may be the creator of the child that's responsible for - // assigning it a key. + var UNTERMINATED = 0; + var TERMINATED = 1; + var ERRORED = 2; - var childOwner = ""; + function createCacheRoot() { + return new WeakMap(); + } - if ( - element && - element._owner && - element._owner !== ReactCurrentOwner.current - ) { - // Give the component that originally created this child. - childOwner = - " It was passed a child from " + - getComponentNameFromType(element._owner.type) + - "."; - } + function createCacheNode() { + return { + s: UNTERMINATED, + // status, represents whether the cached computation returned a value or threw an error + v: undefined, + // value, either the cached result or an error, depending on s + o: null, + // object cache, a WeakMap where non-primitive arguments are stored + p: null // primitive cache, a regular Map where primitive arguments are stored. + }; + } - setCurrentlyValidatingElement(element); + function cache(fn) { + return function () { + var dispatcher = ReactCurrentCache.current; - error( - 'Each child in a list should have a unique "key" prop.' + - "%s%s See https://reactjs.org/link/warning-keys for more information.", - currentComponentErrorInfo, - childOwner - ); + if (!dispatcher) { + // If there is no dispatcher, then we treat this as not being cached. + // $FlowFixMe[incompatible-call]: We don't want to use rest arguments since we transpile the code. + return fn.apply(null, arguments); + } - setCurrentlyValidatingElement(null); - } - } + var fnMap = dispatcher.getCacheForType(createCacheRoot); + var fnNode = fnMap.get(fn); + var cacheNode; - function setCurrentlyValidatingElement(element) { - { - if (element) { - var owner = element._owner; - var stack = describeUnknownElementTypeFrameInDEV( - element.type, - owner ? owner.type : null - ); - ReactDebugCurrentFrame.setExtraStackFrame(stack); + if (fnNode === undefined) { + cacheNode = createCacheNode(); + fnMap.set(fn, cacheNode); } else { - ReactDebugCurrentFrame.setExtraStackFrame(null); + cacheNode = fnNode; } - } - } - - function getCurrentComponentErrorInfo(parentType) { - { - var info = getDeclarationErrorAddendum(); - if (!info) { - var parentName = getComponentNameFromType(parentType); + for (var i = 0, l = arguments.length; i < l; i++) { + var arg = arguments[i]; - if (parentName) { - info = - "\n\nCheck the top-level render call using <" + parentName + ">."; - } - } + if ( + typeof arg === "function" || + (typeof arg === "object" && arg !== null) + ) { + // Objects go into a WeakMap + var objectCache = cacheNode.o; - return info; - } - } - /** - * Given a fragment, validate that it can only be provided with fragment props - * @param {ReactElement} fragment - */ + if (objectCache === null) { + cacheNode.o = objectCache = new WeakMap(); + } - function validateFragmentProps(fragment) { - { - var keys = Object.keys(fragment.props); + var objectNode = objectCache.get(arg); - for (var i = 0; i < keys.length; i++) { - var key = keys[i]; + if (objectNode === undefined) { + cacheNode = createCacheNode(); + objectCache.set(arg, cacheNode); + } else { + cacheNode = objectNode; + } + } else { + // Primitives go into a regular Map + var primitiveCache = cacheNode.p; - if (key !== "children" && key !== "key") { - setCurrentlyValidatingElement(fragment); + if (primitiveCache === null) { + cacheNode.p = primitiveCache = new Map(); + } - error( - "Invalid prop `%s` supplied to `React.Fragment`. " + - "React.Fragment can only have `key` and `children` props.", - key - ); + var primitiveNode = primitiveCache.get(arg); - setCurrentlyValidatingElement(null); - break; + if (primitiveNode === undefined) { + cacheNode = createCacheNode(); + primitiveCache.set(arg, cacheNode); + } else { + cacheNode = primitiveNode; + } } } - if (fragment.ref !== null) { - setCurrentlyValidatingElement(fragment); + if (cacheNode.s === TERMINATED) { + return cacheNode.v; + } - error("Invalid attribute `ref` supplied to `React.Fragment`."); + if (cacheNode.s === ERRORED) { + throw cacheNode.v; + } - setCurrentlyValidatingElement(null); + try { + // $FlowFixMe[incompatible-call]: We don't want to use rest arguments since we transpile the code. + var result = fn.apply(null, arguments); + var terminatedNode = cacheNode; + terminatedNode.s = TERMINATED; + terminatedNode.v = result; + return result; + } catch (error) { + // We store the first error that's thrown and rethrow it. + var erroredNode = cacheNode; + erroredNode.s = ERRORED; + erroredNode.v = error; + throw error; } - } + }; } - var propTypesMisspellWarningShown = false; /** - * Given an element, validate that its props follow the propTypes definition, - * provided by the type. - * - * @param {ReactElement} element + * Keeps track of the current batch's configuration such as how long an update + * should suspend for if it needs to. */ + var ReactCurrentBatchConfig = { + transition: null + }; + + function startTransition(scope, options) { + var prevTransition = ReactCurrentBatchConfig.transition; // Each renderer registers a callback to receive the return value of + // the scope function. This is used to implement async actions. + + var callbacks = new Set(); + var transition = { + _callbacks: callbacks + }; + ReactCurrentBatchConfig.transition = transition; + var currentTransition = ReactCurrentBatchConfig.transition; - function validatePropTypes(element) { { - var type = element.type; + ReactCurrentBatchConfig.transition._updatedFibers = new Set(); + } - if (type === null || type === undefined || typeof type === "string") { - return; - } + if (enableTransitionTracing) { + if (options !== undefined && options.name !== undefined) { + // $FlowFixMe[incompatible-use] found when upgrading Flow + ReactCurrentBatchConfig.transition.name = options.name; // $FlowFixMe[incompatible-use] found when upgrading Flow - if (type.$$typeof === REACT_CLIENT_REFERENCE) { - return; + ReactCurrentBatchConfig.transition.startTime = -1; } + } - var propTypes; + { + try { + var returnValue = scope(); - if (typeof type === "function") { - propTypes = type.propTypes; - } else if ( - typeof type === "object" && - (type.$$typeof === REACT_FORWARD_REF_TYPE || // Note: Memo only checks outer props here. - // Inner props are checked in the reconciler. - type.$$typeof === REACT_MEMO_TYPE) - ) { - propTypes = type.propTypes; - } else { - return; + if ( + typeof returnValue === "object" && + returnValue !== null && + typeof returnValue.then === "function" + ) { + callbacks.forEach(function (callback) { + return callback(currentTransition, returnValue); + }); + returnValue.then(noop, onError); + } + } catch (error) { + onError(error); + } finally { + warnAboutTransitionSubscriptions(prevTransition, currentTransition); + ReactCurrentBatchConfig.transition = prevTransition; } + } + } - if (propTypes) { - // Intentionally inside to avoid triggering lazy initializers: - var name = getComponentNameFromType(type); - checkPropTypes(propTypes, element.props, "prop", name, element); - } else if ( - type.PropTypes !== undefined && - !propTypesMisspellWarningShown - ) { - propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers: - - var _name = getComponentNameFromType(type); + function warnAboutTransitionSubscriptions( + prevTransition, + currentTransition + ) { + { + if (prevTransition === null && currentTransition._updatedFibers) { + var updatedFibersCount = currentTransition._updatedFibers.size; - error( - "Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", - _name || "Unknown" - ); - } + currentTransition._updatedFibers.clear(); - if ( - typeof type.getDefaultProps === "function" && - !type.getDefaultProps.isReactClassApproved - ) { - error( - "getDefaultProps is only used on classic React.createClass " + - "definitions. Use a static property named `defaultProps` instead." - ); + if (updatedFibersCount > 10) { + warn( + "Detected a large number of updates inside startTransition. " + + "If this is due to a subscription please re-write it to use React provided hooks. " + + "Otherwise concurrent mode guarantees are off the table." + ); + } } } } + function noop() {} // Use reportError, if it exists. Otherwise console.error. This is the same as + // the default for onRecoverableError. + + var onError = + typeof reportError === "function" // In modern browsers, reportError will dispatch an error event, + ? // emulating an uncaught JavaScript error. + reportError + : function (error) { + // In older browsers and test environments, fallback to console.error. + // eslint-disable-next-line react-internal/no-production-logging + console["error"](error); + }; + + var ReactVersion = "18.3.0-www-modern-a1c004bf"; + + // Patch fetch + var Children = { + map: mapChildren, + forEach: forEachChildren, + count: countChildren, + toArray: toArray, + only: onlyChild + }; + 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 @@ -3409,7 +2944,7 @@ if (__DEV__) { exports.createElement = createElement; exports.createRef = createRef; exports.forwardRef = forwardRef; - exports.isValidElement = isValidElement$1; + exports.isValidElement = isValidElement; exports.jsx = jsx; exports.jsxDEV = jsxDEV; exports.jsxs = jsxs; diff --git a/compiled/facebook-www/ReactServer-prod.modern.js b/compiled/facebook-www/ReactServer-prod.modern.js index 33f8dece8d55d..bb715376640ad 100644 --- a/compiled/facebook-www/ReactServer-prod.modern.js +++ b/compiled/facebook-www/ReactServer-prod.modern.js @@ -16,10 +16,9 @@ var assign = Object.assign, require("ReactFeatureFlags").enableTransitionTracing, ReactCurrentCache = { current: null }, ReactCurrentDispatcher = { current: null }, - ReactCurrentOwner$1 = { current: null }, ReactSharedInternals = { ReactCurrentDispatcher: ReactCurrentDispatcher, - ReactCurrentOwner: ReactCurrentOwner$1 + ReactCurrentOwner: { current: null } }, ReactServerSharedInternals = { ReactCurrentCache: ReactCurrentCache }; function formatProdErrorMessage(code) { @@ -55,8 +54,9 @@ function getIteratorFn(maybeIterable) { maybeIterable["@@iterator"]; return "function" === typeof maybeIterable ? maybeIterable : null; } -var hasOwnProperty = Object.prototype.hasOwnProperty; -function ReactElement$1(type, key, ref, owner, props) { +var hasOwnProperty = Object.prototype.hasOwnProperty, + ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; +function ReactElement(type, key, ref, self, source, owner, props) { return { $$typeof: REACT_ELEMENT_TYPE, type: type, @@ -66,11 +66,39 @@ function ReactElement$1(type, key, ref, owner, props) { _owner: owner }; } +function jsxProd(type, config, maybeKey) { + var propName, + props = {}, + key = null, + ref = null; + void 0 !== maybeKey && (key = "" + maybeKey); + void 0 !== config.key && (key = "" + config.key); + void 0 !== config.ref && (ref = config.ref); + for (propName in config) + hasOwnProperty.call(config, propName) && + "key" !== propName && + "ref" !== propName && + (props[propName] = config[propName]); + if (type && type.defaultProps) + for (propName in ((config = type.defaultProps), config)) + void 0 === props[propName] && (props[propName] = config[propName]); + return ReactElement( + type, + key, + ref, + void 0, + void 0, + ReactCurrentOwner.current, + props + ); +} function cloneAndReplaceKey(oldElement, newKey) { - return ReactElement$1( + return ReactElement( oldElement.type, newKey, oldElement.ref, + void 0, + void 0, oldElement._owner, oldElement.props ); @@ -275,37 +303,11 @@ function createCacheNode() { var ReactCurrentBatchConfig = { transition: null }; function noop() {} var onError = - "function" === typeof reportError - ? reportError - : function (error) { - console.error(error); - }, - ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; -function jsxProd(type, config, maybeKey) { - var propName, - props = {}, - key = null, - ref = null; - void 0 !== maybeKey && (key = "" + maybeKey); - void 0 !== config.key && (key = "" + config.key); - void 0 !== config.ref && (ref = config.ref); - for (propName in config) - hasOwnProperty.call(config, propName) && - "key" !== propName && - "ref" !== propName && - (props[propName] = config[propName]); - if (type && type.defaultProps) - for (propName in ((config = type.defaultProps), config)) - void 0 === props[propName] && (props[propName] = config[propName]); - return { - $$typeof: REACT_ELEMENT_TYPE, - type: type, - key: key, - ref: ref, - props: props, - _owner: ReactCurrentOwner.current - }; -} + "function" === typeof reportError + ? reportError + : function (error) { + console.error(error); + }; exports.Children = { map: mapChildren, forEach: function (children, forEachFunc, forEachContext) { @@ -393,7 +395,7 @@ exports.cloneElement = function (element, config, children) { owner = element._owner; if (null != config) { void 0 !== config.ref && - ((ref = config.ref), (owner = ReactCurrentOwner$1.current)); + ((ref = config.ref), (owner = ReactCurrentOwner.current)); void 0 !== config.key && (key = "" + config.key); if (element.type && element.type.defaultProps) var defaultProps = element.type.defaultProps; @@ -415,7 +417,7 @@ exports.cloneElement = function (element, config, children) { for (var i = 0; i < propName; i++) defaultProps[i] = arguments[i + 2]; props.children = defaultProps; } - return ReactElement$1(element.type, key, ref, owner, props); + return ReactElement(element.type, key, ref, void 0, void 0, owner, props); }; exports.createElement = function (type, config, children) { var propName, @@ -443,7 +445,15 @@ exports.createElement = function (type, config, children) { for (propName in ((childrenLength = type.defaultProps), childrenLength)) void 0 === props[propName] && (props[propName] = childrenLength[propName]); - return ReactElement$1(type, key, ref, ReactCurrentOwner$1.current, props); + return ReactElement( + type, + key, + ref, + void 0, + void 0, + ReactCurrentOwner.current, + props + ); }; exports.createRef = function () { return { current: null }; @@ -507,4 +517,4 @@ exports.useId = function () { exports.useMemo = function (create, deps) { return ReactCurrentDispatcher.current.useMemo(create, deps); }; -exports.version = "18.3.0-www-modern-b224d7b0"; +exports.version = "18.3.0-www-modern-b695f079";