From 241670ebfae74c81bf5e2abed482cae474b476e3 Mon Sep 17 00:00:00 2001 From: eps1lon Date: Tue, 4 Jun 2024 16:23:12 +0200 Subject: [PATCH 1/5] Update React from f994737d14 to bf3a29d097 --- package.json | 32 +- packages/create-next-app/templates/index.ts | 4 +- packages/next/package.json | 4 +- .../cjs/react-dom-client.development.js | 2483 ++++++++++------- .../cjs/react-dom-client.production.js | 1420 +++++----- .../cjs/react-dom-profiling.development.js | 2483 ++++++++++------- .../cjs/react-dom-profiling.profiling.js | 1501 +++++----- ...t-dom-server-legacy.browser.development.js | 119 +- ...ct-dom-server-legacy.browser.production.js | 2 +- ...eact-dom-server-legacy.node.development.js | 119 +- ...react-dom-server-legacy.node.production.js | 2 +- .../react-dom-server.browser.development.js | 133 +- .../react-dom-server.browser.production.js | 15 +- .../cjs/react-dom-server.bun.production.js | 12 +- .../cjs/react-dom-server.edge.development.js | 133 +- .../cjs/react-dom-server.edge.production.js | 13 +- .../cjs/react-dom-server.node.development.js | 133 +- .../cjs/react-dom-server.node.production.js | 13 +- .../react-dom-unstable_testing.development.js | 2483 ++++++++++------- .../react-dom-unstable_testing.production.js | 1420 +++++----- .../cjs/react-dom.development.js | 66 +- .../cjs/react-dom.production.js | 2 +- .../cjs/react-dom.react-server.development.js | 45 +- .../cjs/react-dom.react-server.production.js | 1 + .../react-dom-experimental/package.json | 4 +- .../cjs/react-dom-client.development.js | 2247 ++++++++------- .../cjs/react-dom-client.production.js | 1418 +++++----- .../cjs/react-dom-profiling.development.js | 2247 ++++++++------- .../cjs/react-dom-profiling.profiling.js | 1499 +++++----- ...t-dom-server-legacy.browser.development.js | 125 +- ...ct-dom-server-legacy.browser.production.js | 2 +- ...eact-dom-server-legacy.node.development.js | 125 +- ...react-dom-server-legacy.node.production.js | 2 +- .../react-dom-server.browser.development.js | 137 +- .../react-dom-server.browser.production.js | 14 +- .../cjs/react-dom-server.bun.production.js | 12 +- .../cjs/react-dom-server.edge.development.js | 137 +- .../cjs/react-dom-server.edge.production.js | 12 +- .../cjs/react-dom-server.node.development.js | 137 +- .../cjs/react-dom-server.node.production.js | 12 +- .../react-dom/cjs/react-dom.development.js | 64 +- .../react-dom/cjs/react-dom.production.js | 2 +- .../cjs/react-dom.react-server.development.js | 43 +- .../cjs/react-dom.react-server.production.js | 1 + .../next/src/compiled/react-dom/package.json | 4 +- .../cjs/react-compiler-runtime.development.js | 42 +- .../cjs/react-jsx-dev-runtime.development.js | 622 +---- ...sx-dev-runtime.react-server.development.js | 626 +---- .../cjs/react-jsx-runtime.development.js | 630 +---- ...ct-jsx-runtime.react-server.development.js | 626 +---- .../cjs/react.development.js | 768 +---- .../cjs/react.production.js | 22 +- .../cjs/react.react-server.development.js | 731 +---- .../cjs/react.react-server.production.js | 20 +- .../react-is/cjs/react-is.development.js | 4 +- .../next/src/compiled/react-is/package.json | 2 +- ...om-turbopack-client.browser.development.js | 409 ++- ...r-dom-turbopack-client.edge.development.js | 409 ++- ...r-dom-turbopack-client.node.development.js | 411 ++- ...opack-client.node.unbundled.development.js | 411 ++- ...om-turbopack-server.browser.development.js | 154 +- ...dom-turbopack-server.browser.production.js | 6 +- ...r-dom-turbopack-server.edge.development.js | 154 +- ...er-dom-turbopack-server.edge.production.js | 6 +- ...r-dom-turbopack-server.node.development.js | 154 +- ...er-dom-turbopack-server.node.production.js | 6 +- ...opack-server.node.unbundled.development.js | 154 +- ...bopack-server.node.unbundled.production.js | 6 +- .../package.json | 4 +- ...om-turbopack-client.browser.development.js | 76 +- ...r-dom-turbopack-client.edge.development.js | 76 +- ...r-dom-turbopack-client.node.development.js | 78 +- ...opack-client.node.unbundled.development.js | 78 +- ...om-turbopack-server.browser.development.js | 88 +- ...dom-turbopack-server.browser.production.js | 6 +- ...r-dom-turbopack-server.edge.development.js | 88 +- ...er-dom-turbopack-server.edge.production.js | 6 +- ...r-dom-turbopack-server.node.development.js | 88 +- ...er-dom-turbopack-server.node.production.js | 6 +- ...opack-server.node.unbundled.development.js | 88 +- ...bopack-server.node.unbundled.production.js | 6 +- .../react-server-dom-turbopack/package.json | 4 +- ...-dom-webpack-client.browser.development.js | 409 ++- ...ver-dom-webpack-client.edge.development.js | 409 ++- ...ver-dom-webpack-client.node.development.js | 411 ++- ...bpack-client.node.unbundled.development.js | 411 ++- ...-dom-webpack-server.browser.development.js | 154 +- ...r-dom-webpack-server.browser.production.js | 6 +- ...ver-dom-webpack-server.edge.development.js | 154 +- ...rver-dom-webpack-server.edge.production.js | 6 +- ...ver-dom-webpack-server.node.development.js | 154 +- ...rver-dom-webpack-server.node.production.js | 6 +- ...bpack-server.node.unbundled.development.js | 154 +- ...ebpack-server.node.unbundled.production.js | 6 +- .../package.json | 4 +- ...-dom-webpack-client.browser.development.js | 76 +- ...ver-dom-webpack-client.edge.development.js | 76 +- ...ver-dom-webpack-client.node.development.js | 78 +- ...bpack-client.node.unbundled.development.js | 78 +- ...-dom-webpack-server.browser.development.js | 88 +- ...r-dom-webpack-server.browser.production.js | 6 +- ...ver-dom-webpack-server.edge.development.js | 88 +- ...rver-dom-webpack-server.edge.production.js | 6 +- ...ver-dom-webpack-server.node.development.js | 88 +- ...rver-dom-webpack-server.node.production.js | 6 +- ...bpack-server.node.unbundled.development.js | 88 +- ...ebpack-server.node.unbundled.production.js | 6 +- .../react-server-dom-webpack/package.json | 4 +- .../cjs/react-compiler-runtime.development.js | 40 +- .../cjs/react-jsx-dev-runtime.development.js | 145 +- ...sx-dev-runtime.react-server.development.js | 149 +- .../cjs/react-jsx-runtime.development.js | 153 +- ...ct-jsx-runtime.react-server.development.js | 149 +- .../compiled/react/cjs/react.development.js | 239 +- .../compiled/react/cjs/react.production.js | 22 +- .../cjs/react.react-server.development.js | 234 +- .../cjs/react.react-server.production.js | 20 +- .../next/src/compiled/unistore/unistore.js | 2 +- pnpm-lock.yaml | 308 +- test/.stats-app/package.json | 6 +- .../first-time-setup-js/package.json | 4 +- .../first-time-setup-ts/package.json | 4 +- test/lib/next-modes/base.ts | 2 +- 123 files changed, 18538 insertions(+), 13858 deletions(-) diff --git a/package.json b/package.json index 91359f87c33b8..b0c466bf81f29 100644 --- a/package.json +++ b/package.json @@ -197,18 +197,18 @@ "pretty-bytes": "5.3.0", "pretty-ms": "7.0.0", "random-seed": "0.3.0", - "react": "19.0.0-rc-f994737d14-20240522", + "react": "19.0.0-rc-bf3a29d097-20240603", "react-17": "npm:react@17.0.2", - "react-builtin": "npm:react@19.0.0-rc-f994737d14-20240522", - "react-dom": "19.0.0-rc-f994737d14-20240522", + "react-builtin": "npm:react@19.0.0-rc-bf3a29d097-20240603", + "react-dom": "19.0.0-rc-bf3a29d097-20240603", "react-dom-17": "npm:react-dom@17.0.2", - "react-dom-builtin": "npm:react-dom@19.0.0-rc-f994737d14-20240522", - "react-dom-experimental-builtin": "npm:react-dom@0.0.0-experimental-f994737d14-20240522", - "react-experimental-builtin": "npm:react@0.0.0-experimental-f994737d14-20240522", - "react-server-dom-turbopack": "19.0.0-rc-f994737d14-20240522", - "react-server-dom-turbopack-experimental": "npm:react-server-dom-turbopack@0.0.0-experimental-f994737d14-20240522", - "react-server-dom-webpack": "19.0.0-rc-f994737d14-20240522", - "react-server-dom-webpack-experimental": "npm:react-server-dom-webpack@0.0.0-experimental-f994737d14-20240522", + "react-dom-builtin": "npm:react-dom@19.0.0-rc-bf3a29d097-20240603", + "react-dom-experimental-builtin": "npm:react-dom@0.0.0-experimental-bf3a29d097-20240603", + "react-experimental-builtin": "npm:react@0.0.0-experimental-bf3a29d097-20240603", + "react-server-dom-turbopack": "19.0.0-rc-bf3a29d097-20240603", + "react-server-dom-turbopack-experimental": "npm:react-server-dom-turbopack@0.0.0-experimental-bf3a29d097-20240603", + "react-server-dom-webpack": "19.0.0-rc-bf3a29d097-20240603", + "react-server-dom-webpack-experimental": "npm:react-server-dom-webpack@0.0.0-experimental-bf3a29d097-20240603", "react-ssr-prepass": "1.0.8", "react-virtualized": "9.22.3", "relay-compiler": "13.0.2", @@ -218,8 +218,8 @@ "resolve-from": "5.0.0", "sass": "1.54.0", "satori": "0.10.9", - "scheduler-builtin": "npm:scheduler@0.25.0-rc-f994737d14-20240522", - "scheduler-experimental-builtin": "npm:scheduler@0.0.0-experimental-f994737d14-20240522", + "scheduler-builtin": "npm:scheduler@0.25.0-rc-bf3a29d097-20240603", + "scheduler-experimental-builtin": "npm:scheduler@0.0.0-experimental-bf3a29d097-20240603", "seedrandom": "3.0.5", "semver": "7.3.7", "shell-quote": "1.7.3", @@ -253,10 +253,10 @@ "@babel/traverse": "7.22.5", "@types/react": "npm:types-react@19.0.0-rc.0", "@types/react-dom": "npm:types-react-dom@19.0.0-rc.0", - "react": "19.0.0-rc-f994737d14-20240522", - "react-dom": "19.0.0-rc-f994737d14-20240522", - "react-is": "19.0.0-rc-f994737d14-20240522", - "scheduler": "0.25.0-rc-f994737d14-20240522" + "react": "19.0.0-rc-bf3a29d097-20240603", + "react-dom": "19.0.0-rc-bf3a29d097-20240603", + "react-is": "19.0.0-rc-bf3a29d097-20240603", + "scheduler": "0.25.0-rc-bf3a29d097-20240603" }, "engines": { "node": ">=18.17.0", diff --git a/packages/create-next-app/templates/index.ts b/packages/create-next-app/templates/index.ts index f0f4da018ea25..58a7f45edac62 100644 --- a/packages/create-next-app/templates/index.ts +++ b/packages/create-next-app/templates/index.ts @@ -184,8 +184,8 @@ export const installTemplate = async ({ * Default dependencies. */ dependencies: { - react: "19.0.0-rc-f994737d14-20240522", - "react-dom": "19.0.0-rc-f994737d14-20240522", + react: "19.0.0-rc-bf3a29d097-20240603", + "react-dom": "19.0.0-rc-bf3a29d097-20240603", next: version, }, devDependencies: {}, diff --git a/packages/next/package.json b/packages/next/package.json index c28d832d00ccc..254dbfba9b0a1 100644 --- a/packages/next/package.json +++ b/packages/next/package.json @@ -105,8 +105,8 @@ "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.41.2", "babel-plugin-react-compiler": "*", - "react": "19.0.0-rc-f994737d14-20240522", - "react-dom": "19.0.0-rc-f994737d14-20240522", + "react": "19.0.0-rc-bf3a29d097-20240603", + "react-dom": "19.0.0-rc-bf3a29d097-20240603", "sass": "^1.3.0" }, "peerDependenciesMeta": { diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-client.development.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-client.development.js index 19341958181a4..970a7b8463b39 100644 --- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-client.development.js +++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-client.development.js @@ -26,64 +26,6 @@ var ReactDOM = require('react-dom'); var ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE; -var suppressWarning = false; -function setSuppressWarning(newSuppressWarning) { - { - suppressWarning = newSuppressWarning; - } -} // In DEV, calls to console.warn and console.error get replaced -// by calls to these methods by a Babel plugin. -// -// In PROD (or in packages without access to React internals), -// they are left as they are instead. - -function warn(format) { - { - if (!suppressWarning) { - for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { - args[_key - 1] = arguments[_key]; - } - - printWarning('warn', format, args); - } - } -} -function error(format) { - { - if (!suppressWarning) { - for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { - args[_key2 - 1] = arguments[_key2]; - } - - printWarning('error', format, args); - } - } -} - -function printWarning(level, format, args) { - // When changing this logic, you might want to also - // update consoleWithStackDev.www.js as well. - { - var stack = ReactSharedInternals.getStackAddendum(); - - if (stack !== '') { - format += '%s'; - args = args.concat([stack]); - } // eslint-disable-next-line react-internal/safe-string-coercion - - - var argsWithFormat = args.map(function (item) { - return String(item); - }); // Careful: RN currently depends on this prefix - - argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it - // breaks IE9: https://github.com/facebook/react/issues/13610 - // eslint-disable-next-line react-internal/no-production-logging - - Function.prototype.apply.call(console[level], console, argsWithFormat); - } -} - // ----------------------------------------------------------------------------- // Killswitch // @@ -122,6 +64,7 @@ var enableLazyContextPropagation = false; // FB-only usage. The new API has diff var enableLegacyHidden = false; // Enables unstable_avoidThisFallback feature in Fiber var alwaysThrottleRetries = true; +var enableOwnerStacks = true; var syncLaneExpirationMs = 250; var transitionLaneExpirationMs = 5000; // ----------------------------------------------------------------------------- // Remove IE and MsApp specific workarounds for innerHTML @@ -130,7 +73,7 @@ var disableIEWorkarounds = true; // Filter certain DOM attributes (e.g. src, hre // This allows us to land breaking changes to remove legacy mode APIs in experimental builds // before removing them in stable in the next Major -var disableLegacyMode = true; +var disableLegacyMode = true; // Make equivalent to instead of // React DOM Chopping Block // // Similar to main Chopping Block but only flags related to React DOM. These are @@ -153,6 +96,82 @@ var enableProfilerCommitHooks = true; // Phase param passed to onRender callback var enableProfilerNestedUpdatePhase = true; // Adds verbose console logging for e.g. state updates, suspense, and work loop +var suppressWarning = false; +function setSuppressWarning(newSuppressWarning) { + { + suppressWarning = newSuppressWarning; + } +} // In DEV, calls to console.warn and console.error get replaced +// by calls to these methods by a Babel plugin. +// +// In PROD (or in packages without access to React internals), +// they are left as they are instead. + +function warn(format) { + { + if (!suppressWarning) { + for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { + args[_key - 1] = arguments[_key]; + } + + printWarning('warn', format, args); + } + } +} +function error(format) { + { + if (!suppressWarning) { + for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { + args[_key2 - 1] = arguments[_key2]; + } + + printWarning('error', format, args); + } + } +} // eslint-disable-next-line react-internal/no-production-logging + +var supportsCreateTask = !!console.createTask; + +function printWarning(level, format, args) { + // When changing this logic, you might want to also + // update consoleWithStackDev.www.js as well. + { + var isErrorLogger = format === '%s\n\n%s\n' || format === '%o\n\n%s\n\n%s\n'; + + if (!supportsCreateTask && ReactSharedInternals.getCurrentStack) { + // We only add the current stack to the console when createTask is not supported. + // Since createTask requires DevTools to be open to work, this means that stacks + // can be lost while DevTools isn't open but we can't detect this. + var stack = ReactSharedInternals.getCurrentStack(); + + if (stack !== '') { + format += '%s'; + args = args.concat([stack]); + } + } + + if (isErrorLogger) { + // Don't prefix our default logging formatting in ReactFiberErrorLoggger. + // Don't toString the arguments. + args.unshift(format); + } else { + // TODO: Remove this prefix and stop toStringing in the wrapper and + // instead do it at each callsite as needed. + // Careful: RN currently depends on this prefix + // eslint-disable-next-line react-internal/safe-string-coercion + args = args.map(function (item) { + return String(item); + }); + args.unshift('Warning: ' + format); + } // We intentionally don't use spread (or .apply) directly because it + // breaks IE9: https://github.com/facebook/react/issues/13610 + // eslint-disable-next-line react-internal/no-production-logging + + + Function.prototype.apply.call(console[level], console, args); + } +} + /** * HTML nodeType values that represent the type of the node */ @@ -610,9 +629,772 @@ var PassiveMask = Passive$1 | Visibility | ChildDeletion; // Union of tags that var StaticMask = LayoutStatic | PassiveStatic | RefStatic | MaySuspendCommit; -var currentOwner = null; -function setCurrentOwner(fiber) { - currentOwner = fiber; +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. +// We could also eagerly patch the method. +var disabledDepth = 0; +var prevLog; +var prevInfo; +var prevWarn; +var prevError; +var prevGroup; +var prevGroupCollapsed; +var prevGroupEnd; + +function disabledLog() {} + +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 + + var props = { + configurable: true, + enumerable: true, + value: disabledLog, + writable: true + }; // $FlowFixMe[cannot-write] Flow thinks console is immutable. + + Object.defineProperties(console, { + info: props, + log: props, + warn: props, + error: props, + group: props, + groupCollapsed: props, + groupEnd: props + }); + /* eslint-enable react-internal/no-production-logging */ + } + + disabledDepth++; + } +} +function reenableLogs() { + { + disabledDepth--; + + 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. + + 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 */ + } + + if (disabledDepth < 0) { + error('disabledDepth fell below zero. ' + 'This is a bug in React. Please file an issue.'); + } + } +} + +var prefix; +function describeBuiltInComponentFrame(name) { + { + 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; + } +} +function describeDebugInfoFrame(name, env) { + return describeBuiltInComponentFrame(name + (env ? ' (' + env + ')' : '')); +} +var reentry = false; +var componentFrameCache; + +{ + var PossiblyWeakMap$1 = typeof WeakMap === 'function' ? WeakMap : Map; + componentFrameCache = new PossiblyWeakMap$1(); +} +/** + * 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 ''; + } + + { + var frame = componentFrameCache.get(fn); + + if (frame !== undefined) { + return frame; + } + } + + reentry = true; + var previousPrepareStackTrace = Error.prepareStackTrace; // $FlowFixMe[incompatible-type] It does accept undefined. + + Error.prepareStackTrace = undefined; + var previousDispatcher = null; + + { + previousDispatcher = ReactSharedInternals.H; // Set the dispatcher in DEV because this might be call in the render function + // for warnings. + + ReactSharedInternals.H = 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. + */ + + + 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] + + + 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(); + } + }); + + 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; + } + + Reflect.construct(fn, [], Fake); + } else { + try { + Fake.call(); + } catch (x) { + control = x; + } // $FlowFixMe[prop-missing] found when upgrading Flow + + + 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 + + + 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]; + } + } + + 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; + + { + ReactSharedInternals.H = 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 describeClassComponentFrame(ctor) { + { + return describeNativeComponentFrame(ctor, true); + } +} +function describeFunctionComponentFrame(fn) { + { + return describeNativeComponentFrame(fn, false); + } +} + +// TODO: Consider marking the whole bundle instead of these boundaries. + +/** @noinline */ + +function callComponentInDEV(Component, props, secondArg) { + setIsRendering(true); + var result = Component(props, secondArg); + setIsRendering(false); + return result; +} +/** @noinline */ + +function callRenderInDEV(instance) { + setIsRendering(true); + var result = instance.render(); + setIsRendering(false); + return result; +} +/** @noinline */ + +function callLazyInitInDEV(lazy) { + var payload = lazy._payload; + var init = lazy._init; + return init(payload); +} + +var externalRegExp = /\/node\_modules\/|\(\\)/; +var callComponentFrame = null; +var callIteratorFrame = null; +var callLazyInitFrame = null; + +function isNotExternal(stackFrame) { + return !externalRegExp.test(stackFrame); +} + +function initCallComponentFrame() { + // Extract the stack frame of the callComponentInDEV function. + var error = callComponentInDEV(Error, 'react-stack-top-frame', {}); + var stack = error.stack; + var startIdx = stack.startsWith('Error: react-stack-top-frame\n') ? 29 : 0; + var endIdx = stack.indexOf('\n', startIdx); + + if (endIdx === -1) { + return stack.slice(startIdx); + } + + return stack.slice(startIdx, endIdx); +} + +function initCallRenderFrame() { + // Extract the stack frame of the callRenderInDEV function. + try { + callRenderInDEV({ + render: null + }); + return ''; + } catch (error) { + var stack = error.stack; + var startIdx = stack.startsWith('TypeError: ') ? stack.indexOf('\n') + 1 : 0; + var endIdx = stack.indexOf('\n', startIdx); + + if (endIdx === -1) { + return stack.slice(startIdx); + } + + return stack.slice(startIdx, endIdx); + } +} + +function initCallLazyInitFrame() { + // Extract the stack frame of the callLazyInitInDEV function. + var error = callLazyInitInDEV({ + $$typeof: REACT_LAZY_TYPE, + _init: Error, + _payload: 'react-stack-top-frame' + }); + var stack = error.stack; + var startIdx = stack.startsWith('Error: react-stack-top-frame\n') ? 29 : 0; + var endIdx = stack.indexOf('\n', startIdx); + + if (endIdx === -1) { + return stack.slice(startIdx); + } + + return stack.slice(startIdx, endIdx); +} + +function filterDebugStack(error) { + // Since stacks can be quite large and we pass a lot of them, we filter them out eagerly + // to save bandwidth even in DEV. We'll also replay these stacks on the client so by + // stripping them early we avoid that overhead. Otherwise we'd normally just rely on + // the DevTools or framework's ignore lists to filter them out. + var stack = error.stack; + + if (stack.startsWith('Error: react-stack-top-frame\n')) { + // V8's default formatting prefixes with the error message which we + // don't want/need. + stack = stack.slice(29); + } + + var frames = stack.split('\n').slice(1); + + if (callComponentFrame === null) { + callComponentFrame = initCallComponentFrame(); + } + + var lastFrameIdx = frames.indexOf(callComponentFrame); + + if (lastFrameIdx === -1) { + if (callLazyInitFrame === null) { + callLazyInitFrame = initCallLazyInitFrame(); + } + + lastFrameIdx = frames.indexOf(callLazyInitFrame); + + if (lastFrameIdx === -1) { + if (callIteratorFrame === null) { + callIteratorFrame = initCallRenderFrame(); + } + + lastFrameIdx = frames.indexOf(callIteratorFrame); + } + } + + if (lastFrameIdx !== -1) { + // Cut off everything after our "callComponent" slot since it'll be Fiber internals. + frames.length = lastFrameIdx; + } + + return frames.filter(isNotExternal).join('\n'); +} + +function formatOwnerStack(ownerStackTrace) { + return filterDebugStack(ownerStackTrace); +} + +function describeFiber(fiber) { + switch (fiber.tag) { + case HostHoistable: + case HostSingleton: + case HostComponent: + return describeBuiltInComponentFrame(fiber.type); + + case LazyComponent: + return describeBuiltInComponentFrame('Lazy'); + + case SuspenseComponent: + return describeBuiltInComponentFrame('Suspense'); + + case SuspenseListComponent: + return describeBuiltInComponentFrame('SuspenseList'); + + case FunctionComponent: + case SimpleMemoComponent: + return describeFunctionComponentFrame(fiber.type); + + case ForwardRef: + return describeFunctionComponentFrame(fiber.type.render); + + case ClassComponent: + return describeClassComponentFrame(fiber.type); + + default: + return ''; + } +} + +function getStackByFiberInDevAndProd(workInProgress) { + try { + var info = ''; + var node = workInProgress; + + do { + info += describeFiber(node); + + if (true) { + // Add any Server Component stack frames in reverse order. + var debugInfo = node._debugInfo; + + if (debugInfo) { + for (var i = debugInfo.length - 1; i >= 0; i--) { + var entry = debugInfo[i]; + + if (typeof entry.name === 'string') { + info += describeDebugInfoFrame(entry.name, entry.env); + } + } + } + } // $FlowFixMe[incompatible-type] we bail out when we get a null + + + node = node.return; + } while (node); + + return info; + } catch (x) { + return '\nError generating stack: ' + x.message + '\n' + x.stack; + } +} + +function describeFunctionComponentFrameWithoutLineNumber(fn) { + // We use this because we don't actually want to describe the line of the component + // but just the component name. + var name = fn ? fn.displayName || fn.name : ''; + return name ? describeBuiltInComponentFrame(name) : ''; +} + +function getOwnerStackByFiberInDev(workInProgress) { + + try { + var info = ''; + + if (workInProgress.tag === HostText) { + // Text nodes never have an owner/stack because they're not created through JSX. + // We use the parent since text nodes are always created through a host parent. + workInProgress = workInProgress.return; + } // The owner stack of the current fiber will be where it was created, i.e. inside its owner. + // There's no actual name of the currently executing component. Instead, that is available + // on the regular stack that's currently executing. However, for built-ins there is no such + // named stack frame and it would be ignored as being internal anyway. Therefore we add + // add one extra frame just to describe the "current" built-in component by name. + // Similarly, if there is no owner at all, then there's no stack frame so we add the name + // of the root component to the stack to know which component is currently executing. + + + switch (workInProgress.tag) { + case HostHoistable: + case HostSingleton: + case HostComponent: + info += describeBuiltInComponentFrame(workInProgress.type); + break; + + case SuspenseComponent: + info += describeBuiltInComponentFrame('Suspense'); + break; + + case SuspenseListComponent: + info += describeBuiltInComponentFrame('SuspenseList'); + break; + + case FunctionComponent: + case SimpleMemoComponent: + case ClassComponent: + if (!workInProgress._debugOwner) { + info += describeFunctionComponentFrameWithoutLineNumber(workInProgress.type); + } + + break; + + case ForwardRef: + if (!workInProgress._debugOwner) { + info += describeFunctionComponentFrameWithoutLineNumber(workInProgress.type.render); + } + + break; + } + + var owner = workInProgress; + + while (owner) { + if (typeof owner.tag === 'number') { + var fiber = owner; + owner = fiber._debugOwner; + var debugStack = fiber._debugStack; // If we don't actually print the stack if there is no owner of this JSX element. + // In a real app it's typically not useful since the root app is always controlled + // by the framework. These also tend to have noisy stacks because they're not rooted + // in a React render but in some imperative bootstrapping code. It could be useful + // if the element was created in module scope. E.g. hoisted. We could add a a single + // stack frame for context for example but it doesn't say much if that's a wrapper. + + if (owner && debugStack) { + if (typeof debugStack !== 'string') { + // Stash the formatted stack so that we can avoid redoing the filtering. + fiber._debugStack = debugStack = formatOwnerStack(debugStack); + } + + if (debugStack !== '') { + info += '\n' + debugStack; + } + } + } else if (typeof owner.stack === 'string') { + // Server Component + // The Server Component stack can come from a different VM that formats it different. + // Likely V8. Since Chrome based browsers support createTask which is going to use + // another code path anyway. I.e. this is likely NOT a V8 based browser. + // This will cause some of the stack to have different formatting. + // TODO: Normalize server component stacks to the client formatting. + if (owner.stack !== '') { + info += '\n' + owner.stack; + } + + var componentInfo = owner; + owner = componentInfo.owner; + } else { + break; + } + } + + return info; + } catch (x) { + return '\nError generating stack: ' + x.message + '\n' + x.stack; + } +} + +var current = null; +var isRendering = false; +function getCurrentFiberOwnerNameInDevOrNull() { + { + if (current === null) { + return null; + } + + var owner = current._debugOwner; + + if (owner != null) { + return getComponentNameFromOwner(owner); + } + } + + return null; +} +function getCurrentParentStackInDev() { + // This is used to get the parent stack even with owner stacks turned on. + { + if (current === null) { + return ''; + } + + return getStackByFiberInDevAndProd(current); + } +} + +function getCurrentFiberStackInDev() { + { + if (current === null) { + return ''; + } // Safe because if current fiber exists, we are reconciling, + // and it is guaranteed to be the work-in-progress version. + // TODO: The above comment is not actually true. We might be + // in a commit phase or preemptive set state callback. + + + { + return getOwnerStackByFiberInDev(current); + } + } +} + +function runWithFiberInDEV(fiber, callback, arg0, arg1, arg2, arg3, arg4) { + { + var previousFiber = current; + setCurrentFiber(fiber); + + try { + if (enableOwnerStacks) { + if (fiber !== null && fiber._debugTask) { + return fiber._debugTask.run(callback.bind(null, arg0, arg1, arg2, arg3, arg4)); + } + } + + return callback(arg0, arg1, arg2, arg3, arg4); + } finally { + current = previousFiber; + } + } // These errors should never make it into a build so we don't need to encode them in codes.json + // eslint-disable-next-line react-internal/prod-error-codes + + + throw new Error('runWithFiberInDEV should never be called in production. This is a bug in React.'); +} +function resetCurrentFiber() { + { + ReactSharedInternals.getCurrentStack = null; + isRendering = false; + } + + current = null; +} +function setCurrentFiber(fiber) { + { + ReactSharedInternals.getCurrentStack = fiber === null ? null : getCurrentFiberStackInDev; + isRendering = false; + } + + current = fiber; +} +function setIsRendering(rendering) { + { + isRendering = rendering; + } } function getNearestMountedFiber(fiber) { @@ -677,9 +1459,9 @@ function getContainerFromFiber(fiber) { } function isMounted(component) { { - var owner = currentOwner; + var owner = current; - if (owner !== null && owner.tag === ClassComponent) { + if (owner !== null && isRendering && owner.tag === ClassComponent) { var ownerFiber = owner; var instance = ownerFiber.stateNode; @@ -892,8 +1674,6 @@ function findCurrentHostFiberImpl(node) { return null; } -var assign = Object.assign; - var LegacyRoot = 0; var ConcurrentRoot = 1; @@ -1204,100 +1984,6 @@ var IdlePriority = Scheduler.unstable_IdlePriority; // this doesn't actually exi var log$1 = Scheduler.log; var unstable_setDisableYieldValue = Scheduler.unstable_setDisableYieldValue; -// 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; - -function disabledLog() {} - -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 - - var props = { - configurable: true, - enumerable: true, - value: disabledLog, - writable: true - }; // $FlowFixMe[cannot-write] Flow thinks console is immutable. - - Object.defineProperties(console, { - info: props, - log: props, - warn: props, - error: props, - group: props, - groupCollapsed: props, - groupEnd: props - }); - /* eslint-enable react-internal/no-production-logging */ - } - - disabledDepth++; - } -} -function reenableLogs() { - { - disabledDepth--; - - 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. - - 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 */ - } - - if (disabledDepth < 0) { - error('disabledDepth fell below zero. ' + 'This is a bug in React. Please file an issue.'); - } - } -} - var rendererID = null; var injectedHook = null; var injectedProfilingHooks = null; @@ -3180,405 +3866,6 @@ function setValueForPropertyOnCustomComponent(node, name, value) { setValueForAttribute(node, name, value); } -var prefix; -function describeBuiltInComponentFrame(name) { - { - 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; - } -} -function describeDebugInfoFrame(name, env) { - return describeBuiltInComponentFrame(name + (env ? ' (' + env + ')' : '')); -} -var reentry = false; -var componentFrameCache; - -{ - var PossiblyWeakMap$1 = typeof WeakMap === 'function' ? WeakMap : Map; - componentFrameCache = new PossiblyWeakMap$1(); -} -/** - * 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 ''; - } - - { - var frame = componentFrameCache.get(fn); - - if (frame !== undefined) { - return frame; - } - } - - reentry = true; - var previousPrepareStackTrace = Error.prepareStackTrace; // $FlowFixMe[incompatible-type] It does accept undefined. - - Error.prepareStackTrace = undefined; - var previousDispatcher = null; - - { - previousDispatcher = ReactSharedInternals.H; // Set the dispatcher in DEV because this might be call in the render function - // for warnings. - - ReactSharedInternals.H = 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. - */ - - - 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] - - - 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(); - } - }); - - 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; - } - - Reflect.construct(fn, [], Fake); - } else { - try { - Fake.call(); - } catch (x) { - control = x; - } // $FlowFixMe[prop-missing] found when upgrading Flow - - - 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 - - - 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]; - } - } - - 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; - - { - ReactSharedInternals.H = 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 describeClassComponentFrame(ctor) { - { - return describeNativeComponentFrame(ctor, true); - } -} -function describeFunctionComponentFrame(fn) { - { - return describeNativeComponentFrame(fn, false); - } -} - -function describeFiber(fiber) { - switch (fiber.tag) { - case HostHoistable: - case HostSingleton: - case HostComponent: - return describeBuiltInComponentFrame(fiber.type); - - case LazyComponent: - return describeBuiltInComponentFrame('Lazy'); - - case SuspenseComponent: - return describeBuiltInComponentFrame('Suspense'); - - case SuspenseListComponent: - return describeBuiltInComponentFrame('SuspenseList'); - - case FunctionComponent: - case SimpleMemoComponent: - return describeFunctionComponentFrame(fiber.type); - - case ForwardRef: - return describeFunctionComponentFrame(fiber.type.render); - - case ClassComponent: - return describeClassComponentFrame(fiber.type); - - default: - return ''; - } -} - -function getStackByFiberInDevAndProd(workInProgress) { - try { - var info = ''; - var node = workInProgress; - - do { - info += describeFiber(node); - - if (true) { - // Add any Server Component stack frames in reverse order. - var debugInfo = node._debugInfo; - - if (debugInfo) { - for (var i = debugInfo.length - 1; i >= 0; i--) { - var entry = debugInfo[i]; - - if (typeof entry.name === 'string') { - info += describeDebugInfoFrame(entry.name, entry.env); - } - } - } - } // $FlowFixMe[incompatible-type] we bail out when we get a null - - - node = node.return; - } while (node); - - return info; - } catch (x) { - return '\nError generating stack: ' + x.message + '\n' + x.stack; - } -} - -var current = null; -var isRendering = false; -function getCurrentFiberOwnerNameInDevOrNull() { - { - if (current === null) { - return null; - } - - var owner = current._debugOwner; - - if (owner != null) { - return getComponentNameFromOwner(owner); - } - } - - return null; -} - -function getCurrentFiberStackInDev() { - { - if (current === null) { - return ''; - } // Safe because if current fiber exists, we are reconciling, - // and it is guaranteed to be the work-in-progress version. - - - return getStackByFiberInDevAndProd(current); - } -} - -function resetCurrentFiber() { - { - ReactSharedInternals.getCurrentStack = null; - current = null; - isRendering = false; - } -} -function setCurrentFiber(fiber) { - { - ReactSharedInternals.getCurrentStack = fiber === null ? null : getCurrentFiberStackInDev; - current = fiber; - isRendering = false; - } -} -function getCurrentFiber() { - { - return current; - } -} -function setIsRendering(rendering) { - { - isRendering = rendering; - } -} - // around this limitation, we use an opaque type that can only be obtained by // passing the value through getToStringValue first. @@ -4338,7 +4625,6 @@ function restoreControlledTextareaState(element, props) { updateTextarea(element, props.value, props.defaultValue); } -// This validation code was written based on the HTML5 parsing spec: // https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-scope // // Note: this does not catch all invalid nesting, nor does it try to (as it's @@ -4349,6 +4635,7 @@ function restoreControlledTextareaState(element, props) { //

tags where the beginning of the second element implicitly closes the // first, causing a confusing mess. // https://html.spec.whatwg.org/multipage/syntax.html#special + var specialTags = ['address', 'applet', 'area', 'article', 'aside', 'base', 'basefont', 'bgsound', 'blockquote', 'body', 'br', 'button', 'caption', 'center', 'col', 'colgroup', 'dd', 'details', 'dir', 'div', 'dl', 'dt', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'frame', 'frameset', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'iframe', 'img', 'input', 'isindex', 'li', 'link', 'listing', 'main', 'marquee', 'menu', 'menuitem', 'meta', 'nav', 'noembed', 'noframes', 'noscript', 'object', 'ol', 'p', 'param', 'plaintext', 'pre', 'script', 'section', 'select', 'source', 'style', 'summary', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'title', 'tr', 'track', 'ul', 'wbr', 'xmp']; // https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-scope var inScopeTags = ['applet', 'caption', 'html', 'table', 'td', 'th', 'marquee', 'object', 'template', // https://html.spec.whatwg.org/multipage/syntax.html#html-integration-point @@ -4631,11 +4918,21 @@ function validateDOMNesting(childTag, ancestorInfo) { if (ancestorTag === 'table' && childTag === 'tr') { info += ' Add a , or to your code to match the DOM tree generated by ' + 'the browser.'; - } + } // Don't transform into consoleWithStackDev here because we add a manual stack. + // We use the parent stack here instead of the owner stack because the parent + // stack has more useful context for nesting. + // TODO: Format this as a linkified "diff view" with props instead of + // a stack trace since the stack trace format is now for owner stacks. - error('In HTML, %s cannot be a child of <%s>.%s\n' + 'This will cause a hydration error.', tagDisplayName, ancestorTag, info); + + console['error']('Warning: In HTML, %s cannot be a child of <%s>.%s\n' + 'This will cause a hydration error.%s', tagDisplayName, ancestorTag, info, getCurrentParentStackInDev()); } else { - error('In HTML, %s cannot be a descendant of <%s>.\n' + 'This will cause a hydration error.', tagDisplayName, ancestorTag); + // Don't transform into consoleWithStackDev here because we add a manual stack. + // We use the parent stack here instead of the owner stack because the parent + // stack has more useful context for nesting. + // TODO: Format this as a linkified "diff view" with props instead of + // a stack trace since the stack trace format is now for owner stacks. + console['error']('Warning: In HTML, %s cannot be a descendant of <%s>.\n' + 'This will cause a hydration error.%s', tagDisplayName, ancestorTag, getCurrentParentStackInDev()); } return false; @@ -4658,9 +4955,19 @@ function validateTextNesting(childText, parentTag) { didWarn[warnKey] = true; if (/\S/.test(childText)) { - error('In HTML, text nodes cannot be a child of <%s>.\n' + 'This will cause a hydration error.', parentTag); + // Don't transform into consoleWithStackDev here because we add a manual stack. + // We use the parent stack here instead of the owner stack because the parent + // stack has more useful context for nesting. + // TODO: Format this as a linkified "diff view" with props instead of + // a stack trace since the stack trace format is now for owner stacks. + console['error']('Warning: In HTML, text nodes cannot be a child of <%s>.\n' + 'This will cause a hydration error.%s', parentTag, getCurrentParentStackInDev()); } else { - error('In HTML, whitespace text nodes cannot be a child of <%s>. ' + "Make sure you don't have any extra whitespace between tags on " + 'each line of your source code.\n' + 'This will cause a hydration error.', parentTag); + // Don't transform into consoleWithStackDev here because we add a manual stack. + // We use the parent stack here instead of the owner stack because the parent + // stack has more useful context for nesting. + // TODO: Format this as a linkified "diff view" with props instead of + // a stack trace since the stack trace format is now for owner stacks. + console['error']('Warning: In HTML, whitespace text nodes cannot be a child of <%s>. ' + "Make sure you don't have any extra whitespace between tags on " + 'each line of your source code.\n' + 'This will cause a hydration error.%s', parentTag, getCurrentParentStackInDev()); } return false; @@ -9606,14 +9913,9 @@ var ReactStrictModeWarnings = { didWarnAboutLegacyContext.add(fiber.type); }); var sortedNames = setToSortedString(uniqueNames); - - try { - setCurrentFiber(firstFiber); - + runWithFiberInDEV(firstFiber, function () { error('Legacy context API has been detected within a strict-mode tree.' + '\n\nThe old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.' + '\n\nPlease update the following components: %s' + '\n\nLearn more about this warning here: https://react.dev/link/legacy-context', sortedNames); - } finally { - resetCurrentFiber(); - } + }); }); }; @@ -11224,7 +11526,7 @@ var warnForMissingKey = function (child, returnFiber) {}; return; } - if (!child._store || child._store.validated || child.key != null) { + if (!child._store || (child._store.validated || child.key != null) && child._store.validated !== 2) { return; } @@ -11233,17 +11535,90 @@ var warnForMissingKey = function (child, returnFiber) {}; } // $FlowFixMe[cannot-write] unable to narrow type from mixed to writable object - child._store.validated = true; - var componentName = getComponentNameFromFiber(returnFiber) || 'Component'; + child._store.validated = 1; + var componentName = getComponentNameFromFiber(returnFiber); + var componentKey = componentName || 'null'; - if (ownerHasKeyUseWarning[componentName]) { + if (ownerHasKeyUseWarning[componentKey]) { return; } - ownerHasKeyUseWarning[componentName] = true; + ownerHasKeyUseWarning[componentKey] = true; + var childOwner = child._owner; + var parentOwner = returnFiber._debugOwner; + var currentComponentErrorInfo = ''; - error('Each child in a list should have a unique ' + '"key" prop. See https://react.dev/link/warning-keys for ' + 'more information.'); + if (parentOwner && typeof parentOwner.tag === 'number') { + var name = getComponentNameFromFiber(parentOwner); + + if (name) { + currentComponentErrorInfo = '\n\nCheck the render method of `' + name + '`.'; + } + } + + if (!currentComponentErrorInfo) { + if (componentName) { + currentComponentErrorInfo = "\n\nCheck the top-level render call using <" + componentName + ">."; + } + } // 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 childOwnerAppendix = ''; + + if (childOwner != null && parentOwner !== childOwner) { + var ownerName = null; + + if (typeof childOwner.tag === 'number') { + ownerName = getComponentNameFromFiber(childOwner); + } else if (typeof childOwner.name === 'string') { + ownerName = childOwner.name; + } + + if (ownerName) { + // Give the component that originally created this child. + childOwnerAppendix = " It was passed a child from " + ownerName + "."; + } + } // We create a fake Fiber for the child to log the stack trace from. + // TODO: Refactor the warnForMissingKey calls to happen after fiber creation + // so that we can get access to the fiber that will eventually be created. + // That way the log can show up associated with the right instance in DevTools. + + + var fiber = createFiberFromElement(child, returnFiber.mode, 0); + fiber.return = returnFiber; + runWithFiberInDEV(fiber, function () { + error('Each child in a list should have a unique "key" prop.' + '%s%s See https://react.dev/link/warning-keys for more information.', currentComponentErrorInfo, childOwnerAppendix); + }); }; +} // Given a fragment, validate that it can only be provided with fragment props +// We do this here instead of BeginWork because the Fragment fiber doesn't have +// the whole props object, only the children and is shared with arrays. + + +function validateFragmentProps(element, fiber, returnFiber) { + { + var keys = Object.keys(element.props); + + for (var i = 0; i < keys.length; i++) { + var key = keys[i]; + + if (key !== 'children' && key !== 'key') { + if (fiber === null) { + // For unkeyed root fragments there's no Fiber. We create a fake one just for + // error stack handling. + fiber = createFiberFromElement(element, returnFiber.mode, 0); + fiber.return = returnFiber; + } + + runWithFiberInDEV(fiber, function (erroredKey) { + error('Invalid prop `%s` supplied to `React.Fragment`. ' + 'React.Fragment can only have `key` and `children` props.', erroredKey); + }, key); + break; + } + } + } } function unwrapThenable(thenable) { @@ -11323,9 +11698,9 @@ function warnOnSymbolType(returnFiber, invalidChild) { } function resolveLazy(lazyType) { - var payload = lazyType._payload; - var init = lazyType._init; - return init(payload); + { + return callLazyInitInDEV(lazyType); + } } // This wrapper function exists because I expect to clone the code in each path // to be able to optimize each path individually by branching early. This needs // a compiler or we can do it manually. Helpers that don't need this branching @@ -11464,7 +11839,9 @@ function createChildReconciler(shouldTrackSideEffects) { var elementType = element.type; if (elementType === REACT_FRAGMENT_TYPE) { - return updateFragment(returnFiber, current, element.props.children, lanes, element.key, debugInfo); + var updated = updateFragment(returnFiber, current, element.props.children, lanes, element.key, debugInfo); + validateFragmentProps(element, updated, returnFiber); + return updated; } if (current !== null) { @@ -11595,9 +11972,13 @@ function createChildReconciler(shouldTrackSideEffects) { case REACT_LAZY_TYPE: { - var payload = newChild._payload; - var init = newChild._init; - return createChild(returnFiber, init(payload), lanes, mergeDebugInfo(debugInfo, newChild._debugInfo) // call merge after init + var resolvedChild; + + { + resolvedChild = callLazyInitInDEV(newChild); + } + + return createChild(returnFiber, resolvedChild, lanes, mergeDebugInfo(debugInfo, newChild._debugInfo) // call merge after init ); } } @@ -11681,9 +12062,13 @@ function createChildReconciler(shouldTrackSideEffects) { case REACT_LAZY_TYPE: { - var payload = newChild._payload; - var init = newChild._init; - return updateSlot(returnFiber, oldFiber, init(payload), lanes, mergeDebugInfo(debugInfo, newChild._debugInfo)); + var resolvedChild; + + { + resolvedChild = callLazyInitInDEV(newChild); + } + + return updateSlot(returnFiber, oldFiber, resolvedChild, lanes, mergeDebugInfo(debugInfo, newChild._debugInfo)); } } @@ -11750,9 +12135,15 @@ function createChildReconciler(shouldTrackSideEffects) { } case REACT_LAZY_TYPE: - var payload = newChild._payload; - var init = newChild._init; - return updateFromMap(existingChildren, returnFiber, newIdx, init(payload), lanes, mergeDebugInfo(debugInfo, newChild._debugInfo)); + { + var resolvedChild; + + { + resolvedChild = callLazyInitInDEV(newChild); + } + + return updateFromMap(existingChildren, returnFiber, newIdx, resolvedChild, lanes, mergeDebugInfo(debugInfo, newChild._debugInfo)); + } } if (isArray(newChild) || getIteratorFn(newChild) || typeof newChild[ASYNC_ITERATOR] === 'function') { @@ -11826,10 +12217,16 @@ function createChildReconciler(shouldTrackSideEffects) { break; case REACT_LAZY_TYPE: - var payload = child._payload; - var init = child._init; - warnOnInvalidKey(init(payload), knownKeys, returnFiber); - break; + { + var resolvedChild; + + { + resolvedChild = callLazyInitInDEV(child); + } + + warnOnInvalidKey(resolvedChild, knownKeys, returnFiber); + break; + } } } @@ -12275,6 +12672,7 @@ function createChildReconciler(shouldTrackSideEffects) { existing._debugInfo = debugInfo; } + validateFragmentProps(element, existing, returnFiber); return existing; } } else { @@ -12318,6 +12716,7 @@ function createChildReconciler(shouldTrackSideEffects) { created._debugInfo = debugInfo; } + validateFragmentProps(element, created, returnFiber); return created; } else { var _created4 = createFiberFromElement(element, returnFiber.mode, lanes); @@ -12380,6 +12779,7 @@ function createChildReconciler(shouldTrackSideEffects) { var isUnkeyedTopLevelFragment = typeof newChild === 'object' && newChild !== null && newChild.type === REACT_FRAGMENT_TYPE && newChild.key === null; if (isUnkeyedTopLevelFragment) { + validateFragmentProps(newChild, null, returnFiber); newChild = newChild.props.children; } // Handle object types @@ -12936,30 +13336,42 @@ function peekEntangledActionThenable() { return currentEntangledActionThenable; } -function requestCurrentTransition() { - var transition = ReactSharedInternals.T; - - if (transition !== null) { - // Whenever a transition update is scheduled, register a callback on the - // transition object so we can get the return value of the scope function. - transition._callbacks.add(handleAsyncAction); +// the shared internals object. This is used by the isomorphic implementation of +// startTransition to compose all the startTransitions together. +// +// function startTransition(fn) { +// return startTransitionDOM(() => { +// return startTransitionART(() => { +// return startTransitionThreeFiber(() => { +// // and so on... +// return fn(); +// }); +// }); +// }); +// } +// +// Currently we only compose together the code that runs at the end of each +// startTransition, because for now that's sufficient — the part that sets +// isTransition=true on the stack uses a separate shared internal field. But +// really we should delete the shared field and track isTransition per +// reconciler. Leaving this for a future PR. + +var prevOnStartTransitionFinish = ReactSharedInternals.S; + +ReactSharedInternals.S = function onStartTransitionFinishForReconciler(transition, returnValue) { + if (typeof returnValue === 'object' && returnValue !== null && typeof returnValue.then === 'function') { + // This is an async action + var thenable = returnValue; + entangleAsyncAction(transition, thenable); } - return transition; -} - -function handleAsyncAction(transition, thenable) { - { - // This is an async action. - entangleAsyncAction(transition, thenable); + if (prevOnStartTransitionFinish !== null) { + prevOnStartTransitionFinish(transition, returnValue); } -} +}; -function notifyTransitionCallbacks(transition, returnValue) { - var callbacks = transition._callbacks; - callbacks.forEach(function (callback) { - return callback(transition, returnValue); - }); +function requestCurrentTransition() { + return ReactSharedInternals.T; } // When retrying a Suspense/Offscreen boundary, we restore the cache that was // used during the previous render by placing it here, on the stack. @@ -13350,7 +13762,7 @@ function renderWithHooks(current, workInProgress, Component, props, secondArg, n var shouldDoubleRenderDEV = (workInProgress.mode & StrictLegacyMode) !== NoMode; shouldDoubleInvokeUserFnsInHooksDEV = shouldDoubleRenderDEV; - var children = Component(props, secondArg); + var children = callComponentInDEV(Component, props, secondArg) ; shouldDoubleInvokeUserFnsInHooksDEV = false; // Check if there was a render phase update if (didScheduleRenderPhaseUpdateDuringThisPass) { @@ -13501,7 +13913,7 @@ function renderWithHooksAgain(workInProgress, Component, props, secondArg) { } ReactSharedInternals.H = HooksDispatcherOnRerenderInDEV ; - children = Component(props, secondArg); + children = callComponentInDEV(Component, props, secondArg) ; } while (didScheduleRenderPhaseUpdateDuringThisPass); return children; @@ -13729,15 +14141,39 @@ function useThenable(thenable) { thenableState = createThenableState(); } - var result = trackUsedThenable(thenableState, thenable, index); + var result = trackUsedThenable(thenableState, thenable, index); // When something suspends with `use`, we replay the component with the + // "re-render" dispatcher instead of the "mount" or "update" dispatcher. + // + // But if there are additional hooks that occur after the `use` invocation + // that suspended, they wouldn't have been processed during the previous + // attempt. So after we invoke `use` again, we may need to switch from the + // "re-render" dispatcher back to the "mount" or "update" dispatcher. That's + // what the following logic accounts for. + // + // TODO: Theoretically this logic only needs to go into the rerender + // dispatcher. Could optimize, but probably not be worth it. + // This is the same logic as in updateWorkInProgressHook. + + var workInProgressFiber = currentlyRenderingFiber$1; + var nextWorkInProgressHook = workInProgressHook === null ? // We're at the beginning of the list, so read from the first hook from + // the fiber. + workInProgressFiber.memoizedState : workInProgressHook.next; + + if (nextWorkInProgressHook !== null) ; else { + // There are no remaining hooks from the previous attempt. We're no longer + // in "re-render" mode. Switch to the normal mount or update dispatcher. + // + // This is the same as the logic in renderWithHooks, except we don't bother + // to track the hook types debug information in this case (sufficient to + // only do that when nothing suspends). + var currentFiber = workInProgressFiber.alternate; - if (currentlyRenderingFiber$1.alternate === null && (workInProgressHook === null ? currentlyRenderingFiber$1.memoizedState === null : workInProgressHook.next === null)) { - // Initial render, and either this is the first time the component is - // called, or there were no Hooks called after this use() the previous - // time (perhaps because it threw). Subsequent Hook calls should use the - // mount dispatcher. { - ReactSharedInternals.H = HooksDispatcherOnMountInDEV; + if (currentFiber !== null && currentFiber.memoizedState !== null) { + ReactSharedInternals.H = HooksDispatcherOnUpdateInDEV; + } else { + ReactSharedInternals.H = HooksDispatcherOnMountInDEV; + } } } @@ -13891,7 +14327,7 @@ function updateReducerImpl(hook, current, reducer) { var queue = hook.queue; if (queue === null) { - throw new Error('Should have a queue. This is likely a bug in React. Please file an issue.'); + throw new Error('Should have a queue. You are likely calling Hooks conditionally, ' + 'which is not allowed. (https://react.dev/link/invalid-hook-call)'); } queue.lastRenderedReducer = reducer; // The last rebase update that is NOT part of the base state. @@ -14126,7 +14562,7 @@ function rerenderReducer(reducer, initialArg, init) { var queue = hook.queue; if (queue === null) { - throw new Error('Should have a queue. This is likely a bug in React. Please file an issue.'); + throw new Error('Should have a queue. You are likely calling Hooks conditionally, ' + 'which is not allowed. (https://react.dev/link/invalid-hook-call)'); } queue.lastRenderedReducer = reducer; // This is a re-render. Apply the new render phase updates to the previous @@ -14499,101 +14935,155 @@ function dispatchActionState(fiber, actionQueue, setPendingState, setState, payl throw new Error('Cannot update form state while rendering.'); } + var currentAction = actionQueue.action; + + if (currentAction === null) { + // An earlier action errored. Subsequent actions should not run. + return; + } + + var actionNode = { + payload: payload, + action: currentAction, + next: null, + // circular + isTransition: true, + status: 'pending', + value: null, + reason: null, + listeners: [], + then: function (listener) { + // We know the only thing that subscribes to these promises is `use` so + // this implementation is simpler than a generic thenable. E.g. we don't + // bother to check if the thenable is still pending because `use` already + // does that. + actionNode.listeners.push(listener); + } + }; // Check if we're inside a transition. If so, we'll need to restore the + // transition context when the action is run. + + var prevTransition = ReactSharedInternals.T; + + if (prevTransition !== null) { + // Optimistically update the pending state, similar to useTransition. + // This will be reverted automatically when all actions are finished. + setPendingState(true); // `actionNode` is a thenable that resolves to the return value of + // the action. + + setState(actionNode); + } else { + // This is not a transition. + actionNode.isTransition = false; + setState(actionNode); + } + var last = actionQueue.pending; if (last === null) { // There are no pending actions; this is the first one. We can run // it immediately. - var newLast = { - payload: payload, - next: null // circular - - }; - newLast.next = actionQueue.pending = newLast; - runActionStateAction(actionQueue, setPendingState, setState, payload); + actionNode.next = actionQueue.pending = actionNode; + runActionStateAction(actionQueue, actionNode); } else { // There's already an action running. Add to the queue. var first = last.next; - var _newLast = { - payload: payload, - next: first - }; - actionQueue.pending = last.next = _newLast; - } -} + actionNode.next = first; + actionQueue.pending = last.next = actionNode; + } +} + +function runActionStateAction(actionQueue, node) { + // `node.action` represents the action function at the time it was dispatched. + // If this action was queued, it might be stale, i.e. it's not necessarily the + // most current implementation of the action, stored on `actionQueue`. This is + // intentional. The conceptual model for queued actions is that they are + // queued in a remote worker; the dispatch happens immediately, only the + // execution is delayed. + var action = node.action; + var payload = node.payload; + var prevState = actionQueue.state; + + if (node.isTransition) { + // The original dispatch was part of a transition. We restore its + // transition context here. + // This is a fork of startTransition + var prevTransition = ReactSharedInternals.T; + var currentTransition = {}; + ReactSharedInternals.T = currentTransition; -function runActionStateAction(actionQueue, setPendingState, setState, payload) { - var action = actionQueue.action; - var prevState = actionQueue.state; // This is a fork of startTransition + { + ReactSharedInternals.T._updatedFibers = new Set(); + } - var prevTransition = ReactSharedInternals.T; - var currentTransition = { - _callbacks: new Set() - }; - ReactSharedInternals.T = currentTransition; + try { + var returnValue = action(prevState, payload); + var onStartTransitionFinish = ReactSharedInternals.S; - { - ReactSharedInternals.T._updatedFibers = new Set(); - } // Optimistically update the pending state, similar to useTransition. - // This will be reverted automatically when all actions are finished. + if (onStartTransitionFinish !== null) { + onStartTransitionFinish(currentTransition, returnValue); + } + handleActionReturnValue(actionQueue, node, returnValue); + } catch (error) { + onActionError(actionQueue, node, error); + } finally { + ReactSharedInternals.T = prevTransition; - setPendingState(true); + { + if (prevTransition === null && currentTransition._updatedFibers) { + var updatedFibersCount = currentTransition._updatedFibers.size; - try { - var returnValue = action(prevState, payload); - - if (returnValue !== null && typeof returnValue === 'object' && // $FlowFixMe[method-unbinding] - typeof returnValue.then === 'function') { - var thenable = returnValue; - notifyTransitionCallbacks(currentTransition, thenable); // Attach a listener to read the return state of the action. As soon as - // this resolves, we can run the next action in the sequence. - - thenable.then(function (nextState) { - actionQueue.state = nextState; - finishRunningActionStateAction(actionQueue, setPendingState, setState); - }, function () { - return finishRunningActionStateAction(actionQueue, setPendingState, setState); - }); - setState(thenable); - } else { - setState(returnValue); - var nextState = returnValue; - actionQueue.state = nextState; - finishRunningActionStateAction(actionQueue, setPendingState, setState); + 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.'); + } + } + } } - } catch (error) { - // This is a trick to get the `useActionState` hook to rethrow the error. - // When it unwraps the thenable with the `use` algorithm, the error - // will be thrown. - var rejectedThenable = { - then: function () {}, - status: 'rejected', - reason: error // $FlowFixMe: Not sure why this doesn't work + } else { + // The original dispatch was not part of a transition. + try { + var _returnValue = action(prevState, payload); - }; - setState(rejectedThenable); - finishRunningActionStateAction(actionQueue, setPendingState, setState); - } finally { - ReactSharedInternals.T = prevTransition; + handleActionReturnValue(actionQueue, node, _returnValue); + } catch (error) { + onActionError(actionQueue, node, error); + } + } +} - { - if (prevTransition === null && currentTransition._updatedFibers) { - var updatedFibersCount = currentTransition._updatedFibers.size; +function handleActionReturnValue(actionQueue, node, returnValue) { + if (returnValue !== null && typeof returnValue === 'object' && // $FlowFixMe[method-unbinding] + typeof returnValue.then === 'function') { + var thenable = returnValue; // Attach a listener to read the return state of the action. As soon as + // this resolves, we can run the next action in the sequence. - currentTransition._updatedFibers.clear(); + thenable.then(function (nextState) { + onActionSuccess(actionQueue, node, nextState); + }, function (error) { + return onActionError(actionQueue, node, error); + }); - 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 (!node.isTransition) { + error('An async function was passed to useActionState, but it was ' + 'dispatched outside of an action context. This is likely not ' + 'what you intended. Either pass the dispatch function to an ' + '`action` prop, or dispatch manually inside `startTransition`'); } } + } else { + var nextState = returnValue; + onActionSuccess(actionQueue, node, nextState); } } -function finishRunningActionStateAction(actionQueue, setPendingState, setState) { - // The action finished running. Pop it from the queue and run the next pending - // action, if there are any. +function onActionSuccess(actionQueue, actionNode, nextState) { + // The action finished running. + actionNode.status = 'fulfilled'; + actionNode.value = nextState; + notifyActionListeners(actionNode); + actionQueue.state = nextState; // Pop the action from the queue and run the next pending action, if there + // are any. + var last = actionQueue.pending; if (last !== null) { @@ -14607,11 +15097,43 @@ function finishRunningActionStateAction(actionQueue, setPendingState, setState) var next = first.next; last.next = next; // Run the next action. - runActionStateAction(actionQueue, setPendingState, setState, next.payload); + runActionStateAction(actionQueue, next); } } } +function onActionError(actionQueue, actionNode, error) { + // Mark all the following actions as rejected. + var last = actionQueue.pending; + actionQueue.pending = null; + + if (last !== null) { + var first = last.next; + + do { + actionNode.status = 'rejected'; + actionNode.reason = error; + notifyActionListeners(actionNode); + actionNode = actionNode.next; + } while (actionNode !== first); + } // Prevent subsequent actions from being dispatched. + + + actionQueue.action = null; +} + +function notifyActionListeners(actionNode) { + // Notify React that the action has finished. + var listeners = actionNode.listeners; + + for (var i = 0; i < listeners.length; i++) { + // This is always a React internal listener, so we don't need to worry + // about it throwing. + var listener = listeners[i]; + listener(); + } +} + function actionStateReducer(oldState, newState) { return newState; } @@ -15131,9 +15653,7 @@ function startTransition(fiber, queue, pendingState, finishedState, callback, op var previousPriority = getCurrentUpdatePriority(); setCurrentUpdatePriority(higherEventPriority(previousPriority, ContinuousEventPriority)); var prevTransition = ReactSharedInternals.T; - var currentTransition = { - _callbacks: new Set() - }; + var currentTransition = {}; { // We don't really need to use an optimistic update here, because we @@ -15152,7 +15672,12 @@ function startTransition(fiber, queue, pendingState, finishedState, callback, op try { if (enableAsyncActions) { - var returnValue = callback(); // Check if we're inside an async action scope. If so, we'll entangle + var returnValue = callback(); + var onStartTransitionFinish = ReactSharedInternals.S; + + if (onStartTransitionFinish !== null) { + onStartTransitionFinish(currentTransition, returnValue); + } // Check if we're inside an async action scope. If so, we'll entangle // this new action with the existing scope. // // If we're not already inside an async action scope, and this action is @@ -15161,9 +15686,9 @@ function startTransition(fiber, queue, pendingState, finishedState, callback, op // In the async case, the resulting render will suspend until the async // action scope has finished. + if (returnValue !== null && typeof returnValue === 'object' && typeof returnValue.then === 'function') { - var thenable = returnValue; - notifyTransitionCallbacks(currentTransition, thenable); // Create a thenable that resolves to `finishedState` once the async + var thenable = returnValue; // Create a thenable that resolves to `finishedState` once the async // action has completed. var thenableForFinishedState = chainThenableValue(thenable, finishedState); @@ -17070,22 +17595,29 @@ function defaultOnUncaughtError(error, errorInfo) { reportGlobalError(error); { - var componentStack = errorInfo.componentStack != null ? errorInfo.componentStack : ''; - var componentNameMessage = componentName ? "An error occurred in the <" + componentName + "> component:" : 'An error occurred in one of your React components:'; - console['warn']('%s\n%s\n\n%s', componentNameMessage, componentStack || '', 'Consider adding an error boundary to your tree to customize error handling behavior.\n' + 'Visit https://react.dev/link/error-boundaries to learn more about error boundaries.'); + var componentNameMessage = componentName ? "An error occurred in the <" + componentName + "> component." : 'An error occurred in one of your React components.'; + var errorBoundaryMessage = 'Consider adding an error boundary to your tree to customize error handling behavior.\n' + 'Visit https://react.dev/link/error-boundaries to learn more about error boundaries.'; + + { + warn('%s\n\n%s\n', componentNameMessage, errorBoundaryMessage // We let our console.error wrapper add the component stack to the end. + ); + } } } -function defaultOnCaughtError(error, errorInfo) { +function defaultOnCaughtError(error$1, errorInfo) { // Overriding this can silence these warnings e.g. for tests. // See https://github.com/facebook/react/pull/13384 // Caught by error boundary { - var componentStack = errorInfo.componentStack != null ? errorInfo.componentStack : ''; - var componentNameMessage = componentName ? "The above error occurred in the <" + componentName + "> component:" : 'The above error occurred in one of your React components:'; // In development, we provide our own message which includes the component stack + var componentNameMessage = componentName ? "The above error occurred in the <" + componentName + "> component." : 'The above error occurred in one of your React components.'; // In development, we provide our own message which includes the component stack // in addition to the error. - // Don't transform to our wrapper - console['error']('%o\n\n%s\n%s\n\n%s', error, componentNameMessage, componentStack, "React will try to recreate this component tree from scratch " + ("using the error boundary you provided, " + (errorBoundaryName || 'Anonymous') + ".")); + var recreateMessage = "React will try to recreate this component tree from scratch " + ("using the error boundary you provided, " + (errorBoundaryName || 'Anonymous') + "."); + + { + error('%o\n\n%s\n\n%s\n', error$1, componentNameMessage, recreateMessage // We let our consoleWithStackDev wrapper add the component stack to the end. + ); + } } } function defaultOnRecoverableError(error, errorInfo) { @@ -17157,7 +17689,9 @@ function createRootErrorUpdate(root, errorInfo, lane) { }; update.callback = function () { - logUncaughtError(root, errorInfo); + { + runWithFiberInDEV(errorInfo.source, logUncaughtError, root, errorInfo); + } }; return update; @@ -17184,7 +17718,9 @@ function initializeClassErrorUpdate(update, root, fiber, errorInfo) { markFailedErrorBoundaryForHotReloading(fiber); } - logCaughtError(root, fiber, errorInfo); + { + runWithFiberInDEV(errorInfo.source, logCaughtError, root, fiber, errorInfo); + } }; } @@ -17197,7 +17733,9 @@ function initializeClassErrorUpdate(update, root, fiber, errorInfo) { markFailedErrorBoundaryForHotReloading(fiber); } - logCaughtError(root, fiber, errorInfo); + { + runWithFiberInDEV(errorInfo.source, logCaughtError, root, fiber, errorInfo); + } if (typeof getDerivedStateFromError !== 'function') { // To preserve the preexisting retry behavior of error boundaries, @@ -17654,11 +18192,8 @@ function updateForwardRef(current, workInProgress, Component, nextProps, renderL } { - setCurrentOwner(workInProgress); - setIsRendering(true); nextChildren = renderWithHooks(current, workInProgress, render, propsWithoutRef, ref, renderLanes); hasId = checkDidRenderIdHook(); - setIsRendering(false); } { @@ -18090,11 +18625,8 @@ function updateFunctionComponent(current, workInProgress, Component, nextProps, } { - setCurrentOwner(workInProgress); - setIsRendering(true); nextChildren = renderWithHooks(current, workInProgress, Component, nextProps, context, renderLanes); hasId = checkDidRenderIdHook(); - setIsRendering(false); } { @@ -18246,7 +18778,7 @@ function finishClassComponent(current, workInProgress, Component, shouldUpdate, var instance = workInProgress.stateNode; // Rerender { - setCurrentOwner(workInProgress); + setCurrentFiber(workInProgress); } var nextChildren; @@ -18268,20 +18800,17 @@ function finishClassComponent(current, workInProgress, Component, shouldUpdate, } { - setIsRendering(true); - nextChildren = instance.render(); + nextChildren = callRenderInDEV(instance); if (workInProgress.mode & StrictLegacyMode) { setIsStrictModeForDevtools(true); try { - instance.render(); + callRenderInDEV(instance); } finally { setIsStrictModeForDevtools(false); } } - - setIsRendering(false); } { @@ -18486,14 +19015,22 @@ function updateHostComponent$1(current, workInProgress, renderLanes) { function updateHostHoistable(current, workInProgress, renderLanes) { markRef(current, workInProgress); - var currentProps = current === null ? null : current.memoizedProps; - var resource = workInProgress.memoizedState = getResource(workInProgress.type, currentProps, workInProgress.pendingProps); if (current === null) { - if (!getIsHydrating() && resource === null) { - // This is not a Resource Hoistable and we aren't hydrating so we construct the instance. - workInProgress.stateNode = createHoistableInstance(workInProgress.type, workInProgress.pendingProps, getRootHostContainer(), workInProgress); + var resource = getResource(workInProgress.type, null, workInProgress.pendingProps, null); + + if (resource) { + workInProgress.memoizedState = resource; + } else { + if (!getIsHydrating()) { + // This is not a Resource Hoistable and we aren't hydrating so we construct the instance. + workInProgress.stateNode = createHoistableInstance(workInProgress.type, workInProgress.pendingProps, getRootHostContainer(), workInProgress); + } } + } else { + // Get Resource may or may not return a resource. either way we stash the result + // on memoized state. + workInProgress.memoizedState = getResource(workInProgress.type, current.memoizedProps, workInProgress.pendingProps, current.memoizedState); } // Resources never have reconciler managed children. It is possible for // the host implementation of getResource to consider children in the // resource construction but they will otherwise be discarded. In practice @@ -18540,9 +19077,12 @@ function updateHostText$1(current, workInProgress) { function mountLazyComponent(_current, workInProgress, elementType, renderLanes) { var props = workInProgress.pendingProps; var lazyComponent = elementType; - var payload = lazyComponent._payload; - var init = lazyComponent._init; - var Component = init(payload); // Store the unwrapped component in the type. + var Component; + + { + Component = callLazyInitInDEV(lazyComponent); + } // Store the unwrapped component in the type. + workInProgress.type = Component; @@ -19620,10 +20160,7 @@ function updateContextConsumer(current, workInProgress, renderLanes) { var newChildren; { - setCurrentOwner(workInProgress); - setIsRendering(true); - newChildren = render(newValue); - setIsRendering(false); + newChildren = callComponentInDEV(render, newValue, undefined); } { @@ -19945,7 +20482,14 @@ function beginWork(current, workInProgress, renderLanes) { { if (workInProgress._debugNeedsRemount && current !== null) { // This will restart the begin phase with a new fiber. - return remountFiber(current, workInProgress, createFiberFromTypeAndProps(workInProgress.type, workInProgress.key, workInProgress.pendingProps, workInProgress._debugOwner || null, workInProgress.mode, workInProgress.lanes)); + var copiedFiber = createFiberFromTypeAndProps(workInProgress.type, workInProgress.key, workInProgress.pendingProps, workInProgress._debugOwner || null, workInProgress.mode, workInProgress.lanes); + + { + copiedFiber._debugStack = workInProgress._debugStack; + copiedFiber._debugTask = workInProgress._debugTask; + } + + return remountFiber(current, workInProgress, copiedFiber); } } @@ -21977,15 +22521,15 @@ function commitBeforeMutationEffects_begin() { function commitBeforeMutationEffects_complete() { while (nextEffect !== null) { var fiber = nextEffect; - setCurrentFiber(fiber); try { - commitBeforeMutationEffectsOnFiber(fiber); + if (true) { + runWithFiberInDEV(fiber, commitBeforeMutationEffectsOnFiber, fiber); + } } catch (error) { captureCommitPhaseError(fiber, fiber.return, error); } - resetCurrentFiber(); var sibling = fiber.sibling; if (sibling !== null) { @@ -22002,10 +22546,6 @@ function commitBeforeMutationEffectsOnFiber(finishedWork) { var current = finishedWork.alternate; var flags = finishedWork.flags; - if ((flags & Snapshot) !== NoFlags$1) { - setCurrentFiber(finishedWork); - } - switch (finishedWork.tag) { case FunctionComponent: { @@ -22093,10 +22633,6 @@ function commitBeforeMutationEffectsOnFiber(finishedWork) { } } } - - if ((flags & Snapshot) !== NoFlags$1) { - resetCurrentFiber(); - } } function commitHookEffectListUnmount(flags, finishedWork, nearestMountedAncestor) { @@ -22500,7 +23036,7 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork, committe case ForwardRef: case SimpleMemoComponent: { - recursivelyTraverseLayoutEffects(finishedRoot, finishedWork); + recursivelyTraverseLayoutEffects(finishedRoot, finishedWork, committedLanes); if (flags & Update) { commitHookLayoutEffects(finishedWork, Layout | HasEffect); @@ -22511,7 +23047,7 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork, committe case ClassComponent: { - recursivelyTraverseLayoutEffects(finishedRoot, finishedWork); + recursivelyTraverseLayoutEffects(finishedRoot, finishedWork, committedLanes); if (flags & Update) { commitClassLayoutLifecycles(finishedWork, current); @@ -22530,7 +23066,7 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork, committe case HostRoot: { - recursivelyTraverseLayoutEffects(finishedRoot, finishedWork); + recursivelyTraverseLayoutEffects(finishedRoot, finishedWork, committedLanes); if (flags & Callback) { // TODO: I think this is now always non-null by the time it reaches the @@ -22567,7 +23103,7 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork, committe case HostHoistable: { { - recursivelyTraverseLayoutEffects(finishedRoot, finishedWork); + recursivelyTraverseLayoutEffects(finishedRoot, finishedWork, committedLanes); if (flags & Ref) { safelyAttachRef(finishedWork, finishedWork.return); @@ -22581,7 +23117,7 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork, committe case HostSingleton: case HostComponent: { - recursivelyTraverseLayoutEffects(finishedRoot, finishedWork); // Renderers may schedule work to be done after host components are mounted + recursivelyTraverseLayoutEffects(finishedRoot, finishedWork, committedLanes); // Renderers may schedule work to be done after host components are mounted // (eg DOM renderer may schedule auto-focus for inputs and form controls). // These effects should only be committed when components are first mounted, // aka when there is no current/alternate. @@ -22599,7 +23135,7 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork, committe case Profiler: { - recursivelyTraverseLayoutEffects(finishedRoot, finishedWork); // TODO: Should this fire inside an offscreen tree? Or should it wait to + recursivelyTraverseLayoutEffects(finishedRoot, finishedWork, committedLanes); // TODO: Should this fire inside an offscreen tree? Or should it wait to // fire when the tree becomes visible again. if (flags & Update) { @@ -22611,7 +23147,7 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork, committe case SuspenseComponent: { - recursivelyTraverseLayoutEffects(finishedRoot, finishedWork); + recursivelyTraverseLayoutEffects(finishedRoot, finishedWork, committedLanes); if (flags & Update) { commitSuspenseHydrationCallbacks(finishedRoot, finishedWork); @@ -22645,14 +23181,14 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork, committe var includeWorkInProgressEffects = (finishedWork.subtreeFlags & LayoutMask) !== NoFlags$1; recursivelyTraverseReappearLayoutEffects(finishedRoot, finishedWork, includeWorkInProgressEffects); } else { - recursivelyTraverseLayoutEffects(finishedRoot, finishedWork); + recursivelyTraverseLayoutEffects(finishedRoot, finishedWork, committedLanes); } offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden; offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden; } } else { - recursivelyTraverseLayoutEffects(finishedRoot, finishedWork); + recursivelyTraverseLayoutEffects(finishedRoot, finishedWork, committedLanes); } if (flags & Ref) { @@ -22670,7 +23206,7 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork, committe default: { - recursivelyTraverseLayoutEffects(finishedRoot, finishedWork); + recursivelyTraverseLayoutEffects(finishedRoot, finishedWork, committedLanes); break; } } @@ -23491,9 +24027,11 @@ function attachSuspenseRetryListeners(finishedWork, wakeables) { function commitMutationEffects(root, finishedWork, committedLanes) { inProgressLanes = committedLanes; inProgressRoot = root; - setCurrentFiber(finishedWork); - commitMutationEffectsOnFiber(finishedWork, root); - setCurrentFiber(finishedWork); + + { + runWithFiberInDEV(finishedWork, commitMutationEffectsOnFiber, finishedWork, root, committedLanes); + } + inProgressLanes = null; inProgressRoot = null; } @@ -23515,19 +24053,17 @@ function recursivelyTraverseMutationEffects(root, parentFiber, lanes) { } } - var prevDebugFiber = getCurrentFiber(); - if (parentFiber.subtreeFlags & MutationMask) { var child = parentFiber.child; while (child !== null) { - setCurrentFiber(child); - commitMutationEffectsOnFiber(child, root); + { + runWithFiberInDEV(child, commitMutationEffectsOnFiber, child, root, lanes); + } + child = child.sibling; } } - - setCurrentFiber(prevDebugFiber); } var currentHoistableRoot = null; @@ -23544,7 +24080,7 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) { case MemoComponent: case SimpleMemoComponent: { - recursivelyTraverseMutationEffects(root, finishedWork); + recursivelyTraverseMutationEffects(root, finishedWork, lanes); commitReconciliationEffects(finishedWork); if (flags & Update) { @@ -23583,7 +24119,7 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) { case ClassComponent: { - recursivelyTraverseMutationEffects(root, finishedWork); + recursivelyTraverseMutationEffects(root, finishedWork, lanes); commitReconciliationEffects(finishedWork); if (flags & Ref) { @@ -23609,7 +24145,7 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) { // We cast because we always set the root at the React root and so it cannot be // null while we are processing mutation effects var hoistableRoot = currentHoistableRoot; - recursivelyTraverseMutationEffects(root, finishedWork); + recursivelyTraverseMutationEffects(root, finishedWork, lanes); commitReconciliationEffects(finishedWork); if (flags & Ref) { @@ -23684,7 +24220,7 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) { case HostComponent: { - recursivelyTraverseMutationEffects(root, finishedWork); + recursivelyTraverseMutationEffects(root, finishedWork, lanes); commitReconciliationEffects(finishedWork); if (flags & Ref) { @@ -23748,7 +24284,7 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) { case HostText: { - recursivelyTraverseMutationEffects(root, finishedWork); + recursivelyTraverseMutationEffects(root, finishedWork, lanes); commitReconciliationEffects(finishedWork); if (flags & Update) { @@ -23781,7 +24317,7 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) { prepareToCommitHoistables(); var previousHoistableRoot = currentHoistableRoot; currentHoistableRoot = getHoistableRoot(root.containerInfo); - recursivelyTraverseMutationEffects(root, finishedWork); + recursivelyTraverseMutationEffects(root, finishedWork, lanes); currentHoistableRoot = previousHoistableRoot; commitReconciliationEffects(finishedWork); } @@ -23824,7 +24360,7 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) { { var _previousHoistableRoot = currentHoistableRoot; currentHoistableRoot = getHoistableRoot(finishedWork.stateNode.containerInfo); - recursivelyTraverseMutationEffects(root, finishedWork); + recursivelyTraverseMutationEffects(root, finishedWork, lanes); commitReconciliationEffects(finishedWork); currentHoistableRoot = _previousHoistableRoot; } @@ -23834,7 +24370,7 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) { case SuspenseComponent: { - recursivelyTraverseMutationEffects(root, finishedWork); + recursivelyTraverseMutationEffects(root, finishedWork, lanes); commitReconciliationEffects(finishedWork); // TODO: We should mark a flag on the Suspense fiber itself, rather than // relying on the Offscreen fiber having a flag also being marked. The // reason is that this offscreen fiber might not be part of the work-in- @@ -23900,7 +24436,7 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) { var prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden; offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden || isHidden; offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden || wasHidden; - recursivelyTraverseMutationEffects(root, finishedWork); + recursivelyTraverseMutationEffects(root, finishedWork, lanes); offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden; offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden; } @@ -23965,7 +24501,7 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) { case SuspenseListComponent: { - recursivelyTraverseMutationEffects(root, finishedWork); + recursivelyTraverseMutationEffects(root, finishedWork, lanes); commitReconciliationEffects(finishedWork); if (flags & Update) { @@ -23988,7 +24524,7 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) { default: { - recursivelyTraverseMutationEffects(root, finishedWork); + recursivelyTraverseMutationEffects(root, finishedWork, lanes); commitReconciliationEffects(finishedWork); return; } @@ -24044,26 +24580,29 @@ function commitLayoutEffects(finishedWork, root, committedLanes) { inProgressLanes = committedLanes; inProgressRoot = root; var current = finishedWork.alternate; - commitLayoutEffectOnFiber(root, current, finishedWork); + + { + runWithFiberInDEV(finishedWork, commitLayoutEffectOnFiber, root, current, finishedWork, committedLanes); + } + inProgressLanes = null; inProgressRoot = null; } function recursivelyTraverseLayoutEffects(root, parentFiber, lanes) { - var prevDebugFiber = getCurrentFiber(); - if (parentFiber.subtreeFlags & LayoutMask) { var child = parentFiber.child; while (child !== null) { - setCurrentFiber(child); var current = child.alternate; - commitLayoutEffectOnFiber(root, current, child); + + { + runWithFiberInDEV(child, commitLayoutEffectOnFiber, root, current, child, lanes); + } + child = child.sibling; } } - - setCurrentFiber(prevDebugFiber); } function disappearLayoutEffects(finishedWork) { @@ -24269,16 +24808,17 @@ function recursivelyTraverseReappearLayoutEffects(finishedRoot, parentFiber, inc // node was reused. var childShouldIncludeWorkInProgressEffects = includeWorkInProgressEffects && (parentFiber.subtreeFlags & LayoutMask) !== NoFlags$1; // TODO (Offscreen) Check: flags & (RefStatic | LayoutStatic) - var prevDebugFiber = getCurrentFiber(); var child = parentFiber.child; while (child !== null) { var current = child.alternate; - reappearLayoutEffects(finishedRoot, current, child, childShouldIncludeWorkInProgressEffects); + + { + runWithFiberInDEV(child, reappearLayoutEffects, finishedRoot, current, child, childShouldIncludeWorkInProgressEffects); + } + child = child.sibling; } - - setCurrentFiber(prevDebugFiber); } function commitHookPassiveMountEffects(finishedWork, hookFlags) { @@ -24356,25 +24896,23 @@ function commitCachePassiveMountEffect(current, finishedWork) { } function commitPassiveMountEffects(root, finishedWork, committedLanes, committedTransitions) { - setCurrentFiber(finishedWork); - commitPassiveMountOnFiber(root, finishedWork, committedLanes, committedTransitions); - resetCurrentFiber(); + { + runWithFiberInDEV(finishedWork, commitPassiveMountOnFiber, root, finishedWork, committedLanes, committedTransitions); + } } function recursivelyTraversePassiveMountEffects(root, parentFiber, committedLanes, committedTransitions) { - var prevDebugFiber = getCurrentFiber(); - if (parentFiber.subtreeFlags & PassiveMask) { var child = parentFiber.child; while (child !== null) { - setCurrentFiber(child); - commitPassiveMountOnFiber(root, child, committedLanes, committedTransitions); + { + runWithFiberInDEV(child, commitPassiveMountOnFiber, root, child, committedLanes, committedTransitions); + } + child = child.sibling; } } - - setCurrentFiber(prevDebugFiber); } function commitPassiveMountOnFiber(finishedRoot, finishedWork, committedLanes, committedTransitions) { @@ -24454,7 +24992,7 @@ function commitPassiveMountOnFiber(finishedRoot, finishedWork, committedLanes, c // "Atomic" effects are ones that need to fire on every commit, // even during pre-rendering. An example is updating the reference // count on cache instances. - recursivelyTraverseAtomicPassiveEffects(finishedRoot, finishedWork); + recursivelyTraverseAtomicPassiveEffects(finishedRoot, finishedWork, committedLanes, committedTransitions); } } } @@ -24510,15 +25048,15 @@ function recursivelyTraverseReconnectPassiveEffects(finishedRoot, parentFiber, c // node was reused. var childShouldIncludeWorkInProgressEffects = includeWorkInProgressEffects && (parentFiber.subtreeFlags & PassiveMask) !== NoFlags$1; // TODO (Offscreen) Check: flags & (RefStatic | LayoutStatic) - var prevDebugFiber = getCurrentFiber(); var child = parentFiber.child; while (child !== null) { - reconnectPassiveEffects(finishedRoot, child, committedLanes, committedTransitions, childShouldIncludeWorkInProgressEffects); + { + runWithFiberInDEV(child, reconnectPassiveEffects, finishedRoot, child, committedLanes, committedTransitions, childShouldIncludeWorkInProgressEffects); + } + child = child.sibling; } - - setCurrentFiber(prevDebugFiber); } function reconnectPassiveEffects(finishedRoot, finishedWork, committedLanes, committedTransitions, // This function visits both newly finished work and nodes that were re-used @@ -24568,7 +25106,7 @@ includeWorkInProgressEffects) { // "Atomic" effects are ones that need to fire on every commit, // even during pre-rendering. An example is updating the reference // count on cache instances. - recursivelyTraverseAtomicPassiveEffects(finishedRoot, finishedWork); + recursivelyTraverseAtomicPassiveEffects(finishedRoot, finishedWork, committedLanes, committedTransitions); } } } @@ -24619,19 +25157,18 @@ function recursivelyTraverseAtomicPassiveEffects(finishedRoot, parentFiber, comm // "Atomic" effects are ones that need to fire on every commit, even during // pre-rendering. We call this function when traversing a hidden tree whose // regular effects are currently disconnected. - var prevDebugFiber = getCurrentFiber(); // TODO: Add special flag for atomic effects - + // TODO: Add special flag for atomic effects if (parentFiber.subtreeFlags & PassiveMask) { var child = parentFiber.child; while (child !== null) { - setCurrentFiber(child); - commitAtomicPassiveEffects(finishedRoot, child); + { + runWithFiberInDEV(child, commitAtomicPassiveEffects, finishedRoot, child, committedLanes, committedTransitions); + } + child = child.sibling; } } - - setCurrentFiber(prevDebugFiber); } function commitAtomicPassiveEffects(finishedRoot, finishedWork, committedLanes, committedTransitions) { @@ -24643,7 +25180,7 @@ function commitAtomicPassiveEffects(finishedRoot, finishedWork, committedLanes, switch (finishedWork.tag) { case OffscreenComponent: { - recursivelyTraverseAtomicPassiveEffects(finishedRoot, finishedWork); + recursivelyTraverseAtomicPassiveEffects(finishedRoot, finishedWork, committedLanes, committedTransitions); if (flags & Passive$1) { // TODO: Pass `current` as argument to this function @@ -24656,7 +25193,7 @@ function commitAtomicPassiveEffects(finishedRoot, finishedWork, committedLanes, case CacheComponent: { - recursivelyTraverseAtomicPassiveEffects(finishedRoot, finishedWork); + recursivelyTraverseAtomicPassiveEffects(finishedRoot, finishedWork, committedLanes, committedTransitions); if (flags & Passive$1) { // TODO: Pass `current` as argument to this function @@ -24669,16 +25206,16 @@ function commitAtomicPassiveEffects(finishedRoot, finishedWork, committedLanes, default: { - recursivelyTraverseAtomicPassiveEffects(finishedRoot, finishedWork); + recursivelyTraverseAtomicPassiveEffects(finishedRoot, finishedWork, committedLanes, committedTransitions); break; } } } function commitPassiveUnmountEffects(finishedWork) { - setCurrentFiber(finishedWork); - commitPassiveUnmountOnFiber(finishedWork); - resetCurrentFiber(); + { + runWithFiberInDEV(finishedWork, commitPassiveUnmountOnFiber, finishedWork); + } } // If we're inside a brand new tree, or a tree that was already visible, then we // should only suspend host components that have a ShouldSuspendCommit flag. // Components without it haven't changed since the last commit, so we can skip @@ -24829,21 +25366,20 @@ function recursivelyTraversePassiveUnmountEffects(parentFiber) { } detachAlternateSiblings(parentFiber); - } + } // TODO: Split PassiveMask into separate masks for mount and unmount? - var prevDebugFiber = getCurrentFiber(); // TODO: Split PassiveMask into separate masks for mount and unmount? if (parentFiber.subtreeFlags & PassiveMask) { var child = parentFiber.child; while (child !== null) { - setCurrentFiber(child); - commitPassiveUnmountOnFiber(child); + { + runWithFiberInDEV(child, commitPassiveUnmountOnFiber, child); + } + child = child.sibling; } } - - setCurrentFiber(prevDebugFiber); } function commitPassiveUnmountOnFiber(finishedWork) { @@ -24907,19 +25443,18 @@ function recursivelyTraverseDisconnectPassiveEffects(parentFiber) { } detachAlternateSiblings(parentFiber); - } + } // TODO: Check PassiveStatic flag - var prevDebugFiber = getCurrentFiber(); // TODO: Check PassiveStatic flag var child = parentFiber.child; while (child !== null) { - setCurrentFiber(child); - disconnectPassiveEffect(child); + { + runWithFiberInDEV(child, disconnectPassiveEffect, child); + } + child = child.sibling; } - - setCurrentFiber(prevDebugFiber); } function disconnectPassiveEffect(finishedWork) { @@ -24961,9 +25496,10 @@ function commitPassiveUnmountEffectsInsideOfDeletedTree_begin(deletedSubtreeRoot var fiber = nextEffect; // Deletion effects fire in parent -> child order // TODO: Check if fiber has a PassiveStatic flag - setCurrentFiber(fiber); - commitPassiveUnmountInsideDeletedTreeOnFiber(fiber, nearestMountedAncestor); - resetCurrentFiber(); + { + runWithFiberInDEV(fiber, commitPassiveUnmountInsideDeletedTreeOnFiber, fiber, nearestMountedAncestor); + } + var child = fiber.child; // TODO: Only traverse subtree if it has a PassiveStatic flag. if (child !== null) { @@ -25134,6 +25670,12 @@ function FiberNode(tag, pendingProps, key, mode) { // This isn't directly used but is handy for debugging internals: this._debugInfo = null; this._debugOwner = null; + + { + this._debugStack = null; + this._debugTask = null; + } + this._debugNeedsRemount = false; this._debugHookTypes = null; @@ -25190,6 +25732,12 @@ function createWorkInProgress(current, pendingProps) { { // DEV-only fields workInProgress._debugOwner = current._debugOwner; + + { + workInProgress._debugStack = current._debugStack; + workInProgress._debugTask = current._debugTask; + } + workInProgress._debugHookTypes = current._debugHookTypes; } @@ -25457,10 +26005,22 @@ key, pendingProps, owner, mode, lanes) { } var info = ''; + var typeString; { 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.'; + 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 (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 ownerName = owner ? getComponentNameFromOwner(owner) : null; @@ -25470,7 +26030,7 @@ key, pendingProps, owner, mode, lanes) { } } - throw new Error('Element type is invalid: expected a string (for built-in ' + 'components) or a class/function (for composite components) ' + ("but got: " + (type == null ? type : typeof type) + "." + info)); + throw new Error('Element type is invalid: expected a string (for built-in ' + 'components) or a class/function (for composite components) ' + ("but got: " + typeString + "." + info)); } } } @@ -25500,6 +26060,11 @@ function createFiberFromElement(element, mode, lanes) { { fiber._debugOwner = element._owner; + + { + fiber._debugStack = element._debugStack; + fiber._debugTask = element._debugTask; + } } return fiber; @@ -26113,29 +26678,28 @@ function completeWork(current, workInProgress, renderLanes) { return null; } } else { - // We are updating. - var currentResource = current.memoizedState; + // This is an update. + if (nextResource) { + // This is a Resource + if (nextResource !== current.memoizedState) { + // we have a new Resource. we need to update + markUpdate(workInProgress); // This must come at the very end of the complete phase. + + bubbleProperties(workInProgress); // This must come at the very end of the complete phase, because it might + // throw to suspend, and if the resource immediately loads, the work loop + // will resume rendering as if the work-in-progress completed. So it must + // fully complete. - if (nextResource !== currentResource) { - // We are transitioning to, from, or between Hoistable Resources - // and require an update - markUpdate(workInProgress); - } - - if (nextResource !== null) { - // This is a Hoistable Resource - // This must come at the very end of the complete phase. - bubbleProperties(workInProgress); - - if (nextResource === currentResource) { - workInProgress.flags &= ~MaySuspendCommit; - } else { preloadResourceAndSuspendIfNeeded(workInProgress, nextResource); + return null; + } else { + // This must come at the very end of the complete phase. + bubbleProperties(workInProgress); + workInProgress.flags &= ~MaySuspendCommit; + return null; } - - return null; } else { - // This is a Hoistable Instance + // This is an Instance // We may have props to update on the Hoistable instance. { var oldProps = current.memoizedProps; @@ -26960,7 +27524,7 @@ var DefaultAsyncDispatcher = { { DefaultAsyncDispatcher.getOwner = function () { - return currentOwner; + return current; }; } @@ -27571,7 +28135,10 @@ function finishConcurrentRender(root, exitStatus, finishedWork, lanes) { function commitRootWhenReady(root, finishedWork, recoverableErrors, transitions, didIncludeRenderPhaseUpdate, lanes, spawnedLane) { // TODO: Combine retry throttling with Suspensey commits. Right now they run // one after the other. - if (finishedWork.subtreeFlags & ShouldSuspendCommit) { + var BothVisibilityAndMaySuspendCommit = Visibility | MaySuspendCommit; + var subtreeFlags = finishedWork.subtreeFlags; + + if (subtreeFlags & ShouldSuspendCommit || (subtreeFlags & BothVisibilityAndMaySuspendCommit) === BothVisibilityAndMaySuspendCommit) { // Before committing, ask the renderer whether the host tree is ready. // If it's not, we'll wait until it notifies us. startSuspendingCommit(); // This will walk the completed fiber tree and attach listeners to all @@ -27934,10 +28501,9 @@ function handleThrow(root, thrownValue) { // These should be reset immediately because they're only supposed to be set // when React is executing user code. resetHooksAfterThrow(); - resetCurrentFiber(); { - setCurrentOwner(null); + resetCurrentFiber(); } if (thrownValue === SuspenseException) { @@ -28568,18 +29134,22 @@ function performUnitOfWork(unitOfWork) { // nothing should rely on this, but relying on it here means that we don't // need an additional field on the work in progress. var current = unitOfWork.alternate; - setCurrentFiber(unitOfWork); var next; if ((unitOfWork.mode & ProfileMode) !== NoMode) { startProfilerTimer(unitOfWork); - next = beginWork(current, unitOfWork, entangledRenderLanes); + + { + next = runWithFiberInDEV(unitOfWork, beginWork, current, unitOfWork, entangledRenderLanes); + } + stopProfilerTimerIfRunningAndRecordDelta(unitOfWork, true); } else { - next = beginWork(current, unitOfWork, entangledRenderLanes); + { + next = runWithFiberInDEV(unitOfWork, beginWork, current, unitOfWork, entangledRenderLanes); + } } - resetCurrentFiber(); unitOfWork.memoizedProps = unitOfWork.pendingProps; if (next === null) { @@ -28588,20 +29158,32 @@ function performUnitOfWork(unitOfWork) { } else { workInProgress = next; } +} + +function replaySuspendedUnitOfWork(unitOfWork) { + // This is a fork of performUnitOfWork specifcally for replaying a fiber that + // just suspended. + var next; { - setCurrentOwner(null); + next = runWithFiberInDEV(unitOfWork, replayBeginWork, unitOfWork); + } // The begin phase finished successfully without suspending. Return to the + + unitOfWork.memoizedProps = unitOfWork.pendingProps; + + if (next === null) { + // If this doesn't spawn new work, complete the current work. + completeUnitOfWork(unitOfWork); + } else { + workInProgress = next; } } -function replaySuspendedUnitOfWork(unitOfWork) { - // This is a fork of performUnitOfWork specifcally for replaying a fiber that +function replayBeginWork(unitOfWork) { + // This is a fork of beginWork specifcally for replaying a fiber that // just suspended. - // var current = unitOfWork.alternate; - setCurrentFiber(unitOfWork); var next; - setCurrentFiber(unitOfWork); var isProfilingMode = (unitOfWork.mode & ProfileMode) !== NoMode; if (isProfilingMode) { @@ -28670,23 +29252,9 @@ function replaySuspendedUnitOfWork(unitOfWork) { if (isProfilingMode) { stopProfilerTimerIfRunningAndRecordDelta(unitOfWork, true); - } // The begin phase finished successfully without suspending. Return to the - // normal work loop. - - - resetCurrentFiber(); - unitOfWork.memoizedProps = unitOfWork.pendingProps; - - if (next === null) { - // If this doesn't spawn new work, complete the current work. - completeUnitOfWork(unitOfWork); - } else { - workInProgress = next; } - { - setCurrentOwner(null); - } + return next; } function throwAndUnwindWorkLoop(root, unitOfWork, thrownValue) { @@ -28773,20 +29341,23 @@ function completeUnitOfWork(unitOfWork) { var current = completedWork.alternate; var returnFiber = completedWork.return; - setCurrentFiber(completedWork); var next = void 0; if ((completedWork.mode & ProfileMode) === NoMode) { - next = completeWork(current, completedWork, entangledRenderLanes); + { + next = runWithFiberInDEV(completedWork, completeWork, current, completedWork, entangledRenderLanes); + } } else { startProfilerTimer(completedWork); - next = completeWork(current, completedWork, entangledRenderLanes); // Update render duration assuming we didn't error. + + { + next = runWithFiberInDEV(completedWork, completeWork, current, completedWork, entangledRenderLanes); + } // Update render duration assuming we didn't error. + stopProfilerTimerIfRunningAndRecordDelta(completedWork, false); } - resetCurrentFiber(); - if (next !== null) { // Completing this fiber spawned new work. Work on that next. workInProgress = next; @@ -29012,18 +29583,13 @@ function commitRootImpl(root, recoverableErrors, transitions, didIncludeRenderPh var previousPriority = getCurrentUpdatePriority(); setCurrentUpdatePriority(DiscreteEventPriority); var prevExecutionContext = executionContext; - executionContext |= CommitContext; // Reset this to null before calling lifecycles - - { - setCurrentOwner(null); - } // The commit phase is broken into several sub-phases. We do a separate pass + executionContext |= CommitContext; // The commit phase is broken into several sub-phases. We do a separate pass // of the effect list for each phase: all mutation effects come before all // layout effects, and so on. // The first phase a "before mutation" phase. We use this phase to read the // state of the host tree right before we mutate it. This is where // getSnapshotBeforeUpdate is called. - commitBeforeMutationEffects(root, finishedWork); { @@ -29137,7 +29703,10 @@ function commitRootImpl(root, recoverableErrors, transitions, didIncludeRenderPh for (var i = 0; i < recoverableErrors.length; i++) { var recoverableError = recoverableErrors[i]; var errorInfo = makeErrorInfo(recoverableError.stack); - onRecoverableError(recoverableError.value, errorInfo); + + { + runWithFiberInDEV(recoverableError.source, onRecoverableError, recoverableError.value, errorInfo); + } } } // If the passive effects are the result of a discrete render, flush them // synchronously at the end of the current task so that the result is @@ -29655,13 +30224,9 @@ function doubleInvokeEffectsInDEVIfNecessary(root, fiber, parentIsInStrictMode) if (fiber.tag !== OffscreenComponent) { if (fiber.flags & PlacementDEV) { - setCurrentFiber(fiber); - if (isInStrictMode) { - doubleInvokeEffectsOnFiber(root, fiber, (fiber.mode & NoStrictPassiveEffectsMode) === NoMode); + runWithFiberInDEV(fiber, doubleInvokeEffectsOnFiber, root, fiber, (fiber.mode & NoStrictPassiveEffectsMode) === NoMode); } - - resetCurrentFiber(); } else { recursivelyTraverseAndDoubleInvokeEffectsInDEV(root, fiber, isInStrictMode); } @@ -29674,19 +30239,15 @@ function doubleInvokeEffectsInDEVIfNecessary(root, fiber, parentIsInStrictMode) if (fiber.memoizedState === null) { // Only consider Offscreen that is visible. // TODO (Offscreen) Handle manual mode. - setCurrentFiber(fiber); - if (isInStrictMode && fiber.flags & Visibility) { // Double invoke effects on Offscreen's subtree only // if it is visible and its visibility has changed. - doubleInvokeEffectsOnFiber(root, fiber); + runWithFiberInDEV(fiber, doubleInvokeEffectsOnFiber, root, fiber); } else if (fiber.subtreeFlags & PlacementDEV) { // Something in the subtree could have been suspended. // We need to continue traversal and find newly inserted fibers. - recursivelyTraverseAndDoubleInvokeEffectsInDEV(root, fiber, isInStrictMode); + runWithFiberInDEV(fiber, recursivelyTraverseAndDoubleInvokeEffectsInDEV, root, fiber, isInStrictMode); } - - resetCurrentFiber(); } } @@ -29734,19 +30295,9 @@ function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber) { didWarnStateUpdateForNotYetMountedComponent = new Set([componentName]); } - var previousFiber = current; - - try { - setCurrentFiber(fiber); - + runWithFiberInDEV(fiber, function () { error("Can't perform a React state update on a component that hasn't mounted yet. " + 'This indicates that you have a side-effect in your render function that ' + 'asynchronously later calls tries to update the component. Move this work to ' + 'useEffect instead.'); - } finally { - if (previousFiber) { - setCurrentFiber(fiber); - } else { - resetCurrentFiber(); - } - } + }); } } var didWarnAboutUpdateInRender = false; @@ -29837,19 +30388,9 @@ function warnIfUpdatesNotWrappedWithActDEV(fiber) { } if (ReactSharedInternals.actQueue === null) { - var previousFiber = current; - - try { - setCurrentFiber(fiber); - + runWithFiberInDEV(fiber, function () { error('An update to %s inside a test was not wrapped in act(...).\n\n' + 'When testing, code that causes React state updates should be ' + 'wrapped into act(...):\n\n' + 'act(() => {\n' + ' /* fire events that update state */\n' + '});\n' + '/* assert on the output */\n\n' + "This ensures that you're testing the behavior the user would see " + 'in the browser.' + ' Learn more at https://react.dev/link/wrap-tests-with-act', getComponentNameFromFiber(fiber)); - } finally { - if (previousFiber) { - setCurrentFiber(fiber); - } else { - resetCurrentFiber(); - } - } + }); } } } @@ -35210,7 +35751,7 @@ function preinitModuleScript(src, options) { } // This function is called in begin work and we should always have a currentDocument set -function getResource(type, currentProps, pendingProps) { +function getResource(type, currentProps, pendingProps, currentResource) { var resourceRoot = getCurrentResourceRoot(); if (!resourceRoot) { @@ -35283,10 +35824,34 @@ function getResource(type, currentProps, pendingProps) { } } + if (currentProps && currentResource === null) { + // This node was previously an Instance type and is becoming a Resource type + // For now we error because we don't support flavor changes + var diff = ''; + + { + diff = "\n\n - " + describeLinkForResourceErrorDEV(currentProps) + "\n + " + describeLinkForResourceErrorDEV(pendingProps); + } + + throw new Error('Expected not to update to be updated to a stylesheet with precedence.' + ' Check the `rel`, `href`, and `precedence` props of this component.' + ' Alternatively, check whether two different components render in the same slot or share the same key.' + diff); + } + return _resource; - } + } else { + if (currentProps && currentResource !== null) { + // This node was previously a Resource type and is becoming an Instance type + // For now we error because we don't support flavor changes + var _diff = ''; - return null; + { + _diff = "\n\n - " + describeLinkForResourceErrorDEV(currentProps) + "\n + " + describeLinkForResourceErrorDEV(pendingProps); + } + + throw new Error('Expected stylesheet with precedence to not be updated to a different kind of .' + ' Check the `rel`, `href`, and `precedence` props of this component.' + ' Alternatively, check whether two different components render in the same slot or share the same key.' + _diff); + } + + return null; + } } case 'script': @@ -35329,6 +35894,44 @@ function getResource(type, currentProps, pendingProps) { } } +function describeLinkForResourceErrorDEV(props) { + { + var describedProps = 0; + var description = ' describedProps) { + description += ' ...'; + } + + description += ' />'; + return description; + } +} + function styleTagPropsFromRawProps(rawProps) { return assign({}, rawProps, { 'data-href': rawProps.href, @@ -36256,7 +36859,7 @@ identifierPrefix, onUncaughtError, onCaughtError, onRecoverableError, transition return root; } -var ReactVersion = '19.0.0-experimental-f994737d14-20240522'; +var ReactVersion = '19.0.0-experimental-bf3a29d097-20240603'; // Might add PROFILE later. @@ -37719,6 +38322,16 @@ function warnIfReactDOMContainerInDEV(container) { } } +function ensureCorrectIsomorphicReactVersion() { + var isomorphicReactPackageVersion = React.version; + + if (isomorphicReactPackageVersion !== ReactVersion) { + throw new Error('Incompatible React versions: The "react" and "react-dom" packages must ' + 'have the exact same version. Instead got:\n' + (" - react: " + isomorphicReactPackageVersion + "\n") + (" - react-dom: " + ReactVersion + "\n") + 'Learn more: https://react.dev/warnings/version-mismatch'); + } +} + +ensureCorrectIsomorphicReactVersion(); + { if (typeof Map !== 'function' || // $FlowFixMe[prop-missing] Flow incorrectly thinks Map has no prototype Map.prototype == null || typeof Map.prototype.forEach !== 'function' || typeof Set !== 'function' || // $FlowFixMe[prop-missing] Flow incorrectly thinks Set has no prototype diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-client.production.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-client.production.js index 21330a0f2e998..82b40ddce828e 100644 --- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-client.production.js +++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-client.production.js @@ -67,6 +67,189 @@ function getIteratorFn(maybeIterable) { } var ASYNC_ITERATOR = Symbol.asyncIterator; Symbol.for("react.client.reference"); +var ReactSharedInternals = + React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, + assign = Object.assign, + prefix; +function describeBuiltInComponentFrame(name) { + if (void 0 === prefix) + try { + throw Error(); + } catch (x) { + var match = x.stack.trim().match(/\n( *(at )?)/); + prefix = (match && match[1]) || ""; + } + return "\n" + prefix + name; +} +var reentry = !1; +function describeNativeComponentFrame(fn, construct) { + if (!fn || reentry) return ""; + reentry = !0; + var previousPrepareStackTrace = Error.prepareStackTrace; + Error.prepareStackTrace = void 0; + var RunInRootFrame = { + DetermineComponentFrameRoot: function () { + try { + if (construct) { + var Fake = function () { + throw Error(); + }; + Object.defineProperty(Fake.prototype, "props", { + set: function () { + throw Error(); + } + }); + if ("object" === typeof Reflect && Reflect.construct) { + try { + Reflect.construct(Fake, []); + } catch (x) { + var control = x; + } + Reflect.construct(fn, [], Fake); + } else { + try { + Fake.call(); + } catch (x$0) { + control = x$0; + } + fn.call(Fake.prototype); + } + } else { + try { + throw Error(); + } catch (x$1) { + control = x$1; + } + (Fake = fn()) && + "function" === typeof Fake.catch && + Fake.catch(function () {}); + } + } catch (sample) { + if (sample && control && "string" === typeof sample.stack) + return [sample.stack, control.stack]; + } + return [null, null]; + } + }; + RunInRootFrame.DetermineComponentFrameRoot.displayName = + "DetermineComponentFrameRoot"; + var namePropDescriptor = Object.getOwnPropertyDescriptor( + RunInRootFrame.DetermineComponentFrameRoot, + "name" + ); + namePropDescriptor && + namePropDescriptor.configurable && + Object.defineProperty(RunInRootFrame.DetermineComponentFrameRoot, "name", { + value: "DetermineComponentFrameRoot" + }); + try { + var _RunInRootFrame$Deter = RunInRootFrame.DetermineComponentFrameRoot(), + sampleStack = _RunInRootFrame$Deter[0], + controlStack = _RunInRootFrame$Deter[1]; + if (sampleStack && controlStack) { + var sampleLines = sampleStack.split("\n"), + controlLines = controlStack.split("\n"); + for ( + namePropDescriptor = RunInRootFrame = 0; + RunInRootFrame < sampleLines.length && + !sampleLines[RunInRootFrame].includes("DetermineComponentFrameRoot"); + + ) + RunInRootFrame++; + for ( + ; + namePropDescriptor < controlLines.length && + !controlLines[namePropDescriptor].includes( + "DetermineComponentFrameRoot" + ); + + ) + namePropDescriptor++; + if ( + RunInRootFrame === sampleLines.length || + namePropDescriptor === controlLines.length + ) + for ( + RunInRootFrame = sampleLines.length - 1, + namePropDescriptor = controlLines.length - 1; + 1 <= RunInRootFrame && + 0 <= namePropDescriptor && + sampleLines[RunInRootFrame] !== controlLines[namePropDescriptor]; + + ) + namePropDescriptor--; + for ( + ; + 1 <= RunInRootFrame && 0 <= namePropDescriptor; + RunInRootFrame--, namePropDescriptor-- + ) + if (sampleLines[RunInRootFrame] !== controlLines[namePropDescriptor]) { + if (1 !== RunInRootFrame || 1 !== namePropDescriptor) { + do + if ( + (RunInRootFrame--, + namePropDescriptor--, + 0 > namePropDescriptor || + sampleLines[RunInRootFrame] !== + controlLines[namePropDescriptor]) + ) { + var frame = + "\n" + + sampleLines[RunInRootFrame].replace(" at new ", " at "); + fn.displayName && + frame.includes("") && + (frame = frame.replace("", fn.displayName)); + return frame; + } + while (1 <= RunInRootFrame && 0 <= namePropDescriptor); + } + break; + } + } + } finally { + (reentry = !1), (Error.prepareStackTrace = previousPrepareStackTrace); + } + return (previousPrepareStackTrace = fn ? fn.displayName || fn.name : "") + ? describeBuiltInComponentFrame(previousPrepareStackTrace) + : ""; +} +function describeFiber(fiber) { + switch (fiber.tag) { + case 26: + case 27: + case 5: + return describeBuiltInComponentFrame(fiber.type); + case 16: + return describeBuiltInComponentFrame("Lazy"); + case 13: + return describeBuiltInComponentFrame("Suspense"); + case 19: + return describeBuiltInComponentFrame("SuspenseList"); + case 0: + case 15: + return (fiber = describeNativeComponentFrame(fiber.type, !1)), fiber; + case 11: + return ( + (fiber = describeNativeComponentFrame(fiber.type.render, !1)), fiber + ); + case 1: + return (fiber = describeNativeComponentFrame(fiber.type, !0)), fiber; + default: + return ""; + } +} +function getStackByFiberInDevAndProd(workInProgress) { + try { + var info = ""; + do + (info += describeFiber(workInProgress)), + (workInProgress = workInProgress.return); + while (workInProgress); + return info; + } catch (x) { + return "\nError generating stack: " + x.message + "\n" + x.stack; + } +} function getNearestMountedFiber(fiber) { var node = fiber, nearestMounted = fiber; @@ -124,36 +307,36 @@ function findCurrentFiberUsingSlowPath(fiber) { } if (a.return !== b.return) (a = parentA), (b = parentB); else { - for (var didFindChild = !1, child$0 = parentA.child; child$0; ) { - if (child$0 === a) { + for (var didFindChild = !1, child$2 = parentA.child; child$2; ) { + if (child$2 === a) { didFindChild = !0; a = parentA; b = parentB; break; } - if (child$0 === b) { + if (child$2 === b) { didFindChild = !0; b = parentA; a = parentB; break; } - child$0 = child$0.sibling; + child$2 = child$2.sibling; } if (!didFindChild) { - for (child$0 = parentB.child; child$0; ) { - if (child$0 === a) { + for (child$2 = parentB.child; child$2; ) { + if (child$2 === a) { didFindChild = !0; a = parentB; b = parentA; break; } - if (child$0 === b) { + if (child$2 === b) { didFindChild = !0; b = parentB; a = parentA; break; } - child$0 = child$0.sibling; + child$2 = child$2.sibling; } if (!didFindChild) throw Error(formatProdErrorMessage(189)); } @@ -177,10 +360,7 @@ function findCurrentHostFiberImpl(node) { } return null; } -var assign = Object.assign, - isArrayImpl = Array.isArray, - ReactSharedInternals = - React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, +var isArrayImpl = Array.isArray, ReactDOMSharedInternals = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, sharedNotPendingObject = { @@ -475,18 +655,18 @@ function markRootFinished(root, remainingLanes, spawnedLane) { 0 < noLongerPendingLanes; ) { - var index$4 = 31 - clz32(noLongerPendingLanes), - lane = 1 << index$4; - remainingLanes[index$4] = 0; - expirationTimes[index$4] = -1; - var hiddenUpdatesForLane = hiddenUpdates[index$4]; + var index$6 = 31 - clz32(noLongerPendingLanes), + lane = 1 << index$6; + remainingLanes[index$6] = 0; + expirationTimes[index$6] = -1; + var hiddenUpdatesForLane = hiddenUpdates[index$6]; if (null !== hiddenUpdatesForLane) for ( - hiddenUpdates[index$4] = null, index$4 = 0; - index$4 < hiddenUpdatesForLane.length; - index$4++ + hiddenUpdates[index$6] = null, index$6 = 0; + index$6 < hiddenUpdatesForLane.length; + index$6++ ) { - var update = hiddenUpdatesForLane[index$4]; + var update = hiddenUpdatesForLane[index$6]; null !== update && (update.lane &= -536870913); } noLongerPendingLanes &= ~lane; @@ -506,10 +686,10 @@ function markSpawnedDeferredLane(root, spawnedLane, entangledLanes) { function markRootEntangled(root, entangledLanes) { var rootEntangledLanes = (root.entangledLanes |= entangledLanes); for (root = root.entanglements; rootEntangledLanes; ) { - var index$5 = 31 - clz32(rootEntangledLanes), - lane = 1 << index$5; - (lane & entangledLanes) | (root[index$5] & entangledLanes) && - (root[index$5] |= entangledLanes); + var index$7 = 31 - clz32(rootEntangledLanes), + lane = 1 << index$7; + (lane & entangledLanes) | (root[index$7] & entangledLanes) && + (root[index$7] |= entangledLanes); rootEntangledLanes &= ~lane; } } @@ -659,8 +839,8 @@ function setValueForAttribute(node, name, value) { node.removeAttribute(name); return; case "boolean": - var prefix$7 = name.toLowerCase().slice(0, 5); - if ("data-" !== prefix$7 && "aria-" !== prefix$7) { + var prefix$9 = name.toLowerCase().slice(0, 5); + if ("data-" !== prefix$9 && "aria-" !== prefix$9) { node.removeAttribute(name); return; } @@ -696,186 +876,6 @@ function setValueForNamespacedAttribute(node, namespace, name, value) { node.setAttributeNS(namespace, name, "" + value); } } -var prefix; -function describeBuiltInComponentFrame(name) { - if (void 0 === prefix) - try { - throw Error(); - } catch (x) { - var match = x.stack.trim().match(/\n( *(at )?)/); - prefix = (match && match[1]) || ""; - } - return "\n" + prefix + name; -} -var reentry = !1; -function describeNativeComponentFrame(fn, construct) { - if (!fn || reentry) return ""; - reentry = !0; - var previousPrepareStackTrace = Error.prepareStackTrace; - Error.prepareStackTrace = void 0; - var RunInRootFrame = { - DetermineComponentFrameRoot: function () { - try { - if (construct) { - var Fake = function () { - throw Error(); - }; - Object.defineProperty(Fake.prototype, "props", { - set: function () { - throw Error(); - } - }); - if ("object" === typeof Reflect && Reflect.construct) { - try { - Reflect.construct(Fake, []); - } catch (x) { - var control = x; - } - Reflect.construct(fn, [], Fake); - } else { - try { - Fake.call(); - } catch (x$8) { - control = x$8; - } - fn.call(Fake.prototype); - } - } else { - try { - throw Error(); - } catch (x$9) { - control = x$9; - } - (Fake = fn()) && - "function" === typeof Fake.catch && - Fake.catch(function () {}); - } - } catch (sample) { - if (sample && control && "string" === typeof sample.stack) - return [sample.stack, control.stack]; - } - return [null, null]; - } - }; - RunInRootFrame.DetermineComponentFrameRoot.displayName = - "DetermineComponentFrameRoot"; - var namePropDescriptor = Object.getOwnPropertyDescriptor( - RunInRootFrame.DetermineComponentFrameRoot, - "name" - ); - namePropDescriptor && - namePropDescriptor.configurable && - Object.defineProperty(RunInRootFrame.DetermineComponentFrameRoot, "name", { - value: "DetermineComponentFrameRoot" - }); - try { - var _RunInRootFrame$Deter = RunInRootFrame.DetermineComponentFrameRoot(), - sampleStack = _RunInRootFrame$Deter[0], - controlStack = _RunInRootFrame$Deter[1]; - if (sampleStack && controlStack) { - var sampleLines = sampleStack.split("\n"), - controlLines = controlStack.split("\n"); - for ( - namePropDescriptor = RunInRootFrame = 0; - RunInRootFrame < sampleLines.length && - !sampleLines[RunInRootFrame].includes("DetermineComponentFrameRoot"); - - ) - RunInRootFrame++; - for ( - ; - namePropDescriptor < controlLines.length && - !controlLines[namePropDescriptor].includes( - "DetermineComponentFrameRoot" - ); - - ) - namePropDescriptor++; - if ( - RunInRootFrame === sampleLines.length || - namePropDescriptor === controlLines.length - ) - for ( - RunInRootFrame = sampleLines.length - 1, - namePropDescriptor = controlLines.length - 1; - 1 <= RunInRootFrame && - 0 <= namePropDescriptor && - sampleLines[RunInRootFrame] !== controlLines[namePropDescriptor]; - - ) - namePropDescriptor--; - for ( - ; - 1 <= RunInRootFrame && 0 <= namePropDescriptor; - RunInRootFrame--, namePropDescriptor-- - ) - if (sampleLines[RunInRootFrame] !== controlLines[namePropDescriptor]) { - if (1 !== RunInRootFrame || 1 !== namePropDescriptor) { - do - if ( - (RunInRootFrame--, - namePropDescriptor--, - 0 > namePropDescriptor || - sampleLines[RunInRootFrame] !== - controlLines[namePropDescriptor]) - ) { - var frame = - "\n" + - sampleLines[RunInRootFrame].replace(" at new ", " at "); - fn.displayName && - frame.includes("") && - (frame = frame.replace("", fn.displayName)); - return frame; - } - while (1 <= RunInRootFrame && 0 <= namePropDescriptor); - } - break; - } - } - } finally { - (reentry = !1), (Error.prepareStackTrace = previousPrepareStackTrace); - } - return (previousPrepareStackTrace = fn ? fn.displayName || fn.name : "") - ? describeBuiltInComponentFrame(previousPrepareStackTrace) - : ""; -} -function describeFiber(fiber) { - switch (fiber.tag) { - case 26: - case 27: - case 5: - return describeBuiltInComponentFrame(fiber.type); - case 16: - return describeBuiltInComponentFrame("Lazy"); - case 13: - return describeBuiltInComponentFrame("Suspense"); - case 19: - return describeBuiltInComponentFrame("SuspenseList"); - case 0: - case 15: - return (fiber = describeNativeComponentFrame(fiber.type, !1)), fiber; - case 11: - return ( - (fiber = describeNativeComponentFrame(fiber.type.render, !1)), fiber - ); - case 1: - return (fiber = describeNativeComponentFrame(fiber.type, !0)), fiber; - default: - return ""; - } -} -function getStackByFiberInDevAndProd(workInProgress) { - try { - var info = ""; - do - (info += describeFiber(workInProgress)), - (workInProgress = workInProgress.return); - while (workInProgress); - return info; - } catch (x) { - return "\nError generating stack: " + x.message + "\n" + x.stack; - } -} function getToStringValue(value) { switch (typeof value) { case "bigint": @@ -1908,19 +1908,19 @@ function getTargetInstForChangeEvent(domEventName, targetInst) { } var isInputEventSupported = !1; if (canUseDOM) { - var JSCompiler_inline_result$jscomp$269; + var JSCompiler_inline_result$jscomp$271; if (canUseDOM) { - var isSupported$jscomp$inline_400 = "oninput" in document; - if (!isSupported$jscomp$inline_400) { - var element$jscomp$inline_401 = document.createElement("div"); - element$jscomp$inline_401.setAttribute("oninput", "return;"); - isSupported$jscomp$inline_400 = - "function" === typeof element$jscomp$inline_401.oninput; + var isSupported$jscomp$inline_402 = "oninput" in document; + if (!isSupported$jscomp$inline_402) { + var element$jscomp$inline_403 = document.createElement("div"); + element$jscomp$inline_403.setAttribute("oninput", "return;"); + isSupported$jscomp$inline_402 = + "function" === typeof element$jscomp$inline_403.oninput; } - JSCompiler_inline_result$jscomp$269 = isSupported$jscomp$inline_400; - } else JSCompiler_inline_result$jscomp$269 = !1; + JSCompiler_inline_result$jscomp$271 = isSupported$jscomp$inline_402; + } else JSCompiler_inline_result$jscomp$271 = !1; isInputEventSupported = - JSCompiler_inline_result$jscomp$269 && + JSCompiler_inline_result$jscomp$271 && (!document.documentMode || 9 < document.documentMode); } function stopWatchingForValueChange() { @@ -2829,7 +2829,8 @@ function createChildReconciler(shouldTrackSideEffects) { ); case REACT_LAZY_TYPE: var init = newChild._init; - return createChild(returnFiber, init(newChild._payload), lanes); + newChild = init(newChild._payload); + return createChild(returnFiber, newChild, lanes); } if ( isArrayImpl(newChild) || @@ -2881,7 +2882,8 @@ function createChildReconciler(shouldTrackSideEffects) { case REACT_LAZY_TYPE: return ( (key = newChild._init), - updateSlot(returnFiber, oldFiber, key(newChild._payload), lanes) + (newChild = key(newChild._payload)), + updateSlot(returnFiber, oldFiber, newChild, lanes) ); } if ( @@ -2946,11 +2948,12 @@ function createChildReconciler(shouldTrackSideEffects) { ); case REACT_LAZY_TYPE: var init = newChild._init; + newChild = init(newChild._payload); return updateFromMap( existingChildren, returnFiber, newIdx, - init(newChild._payload), + newChild, lanes ); } @@ -3553,19 +3556,15 @@ function chainThenableValue(thenable, result) { ); return thenableWithOverride; } -function requestCurrentTransition() { - var transition = ReactSharedInternals.T; - null !== transition && transition._callbacks.add(handleAsyncAction); - return transition; -} -function handleAsyncAction(transition, thenable) { - entangleAsyncAction(transition, thenable); -} -function notifyTransitionCallbacks(transition, returnValue) { - transition._callbacks.forEach(function (callback) { - return callback(transition, returnValue); - }); -} +var prevOnStartTransitionFinish = ReactSharedInternals.S; +ReactSharedInternals.S = function (transition, returnValue) { + "object" === typeof returnValue && + null !== returnValue && + "function" === typeof returnValue.then && + entangleAsyncAction(transition, returnValue); + null !== prevOnStartTransitionFinish && + prevOnStartTransitionFinish(transition, returnValue); +}; var resumedCache = createCursor(null); function peekCacheFromPool() { var cacheResumedFromPreviousRender = resumedCache.current; @@ -3757,11 +3756,16 @@ function useThenable(thenable) { thenableIndexCounter += 1; null === thenableState && (thenableState = []); thenable = trackUsedThenable(thenableState, thenable, index); - null === currentlyRenderingFiber$1.alternate && + index = currentlyRenderingFiber$1; + null === (null === workInProgressHook - ? null === currentlyRenderingFiber$1.memoizedState - : null === workInProgressHook.next) && - (ReactSharedInternals.H = HooksDispatcherOnMount); + ? index.memoizedState + : workInProgressHook.next) && + ((index = index.alternate), + (ReactSharedInternals.H = + null === index || null === index.memoizedState + ? HooksDispatcherOnMount + : HooksDispatcherOnUpdate)); return thenable; } function use(usable) { @@ -4053,74 +4057,105 @@ function dispatchActionState( payload ) { if (isRenderPhaseUpdate(fiber)) throw Error(formatProdErrorMessage(485)); - fiber = actionQueue.pending; - null === fiber - ? ((fiber = { payload: payload, next: null }), - (fiber.next = actionQueue.pending = fiber), - runActionStateAction(actionQueue, setPendingState, setState, payload)) - : (actionQueue.pending = fiber.next = - { payload: payload, next: fiber.next }); -} -function runActionStateAction(actionQueue, setPendingState, setState, payload) { - var action = actionQueue.action, - prevState = actionQueue.state, - prevTransition = ReactSharedInternals.T, - currentTransition = { _callbacks: new Set() }; - ReactSharedInternals.T = currentTransition; - setPendingState(!0); - try { - var returnValue = action(prevState, payload); - null !== returnValue && - "object" === typeof returnValue && - "function" === typeof returnValue.then - ? (notifyTransitionCallbacks(currentTransition, returnValue), - returnValue.then( - function (nextState) { - actionQueue.state = nextState; - finishRunningActionStateAction( - actionQueue, - setPendingState, - setState - ); - }, - function () { - return finishRunningActionStateAction( - actionQueue, - setPendingState, - setState - ); - } - ), - setState(returnValue)) - : (setState(returnValue), - (actionQueue.state = returnValue), - finishRunningActionStateAction(actionQueue, setPendingState, setState)); - } catch (error) { - setState({ then: function () {}, status: "rejected", reason: error }), - finishRunningActionStateAction(actionQueue, setPendingState, setState); - } finally { - ReactSharedInternals.T = prevTransition; - } + fiber = actionQueue.action; + if (null !== fiber) { + var actionNode = { + payload: payload, + action: fiber, + next: null, + isTransition: !0, + status: "pending", + value: null, + reason: null, + listeners: [], + then: function (listener) { + actionNode.listeners.push(listener); + } + }; + null !== ReactSharedInternals.T + ? setPendingState(!0) + : (actionNode.isTransition = !1); + setState(actionNode); + setPendingState = actionQueue.pending; + null === setPendingState + ? ((actionNode.next = actionQueue.pending = actionNode), + runActionStateAction(actionQueue, actionNode)) + : ((actionNode.next = setPendingState.next), + (actionQueue.pending = setPendingState.next = actionNode)); + } +} +function runActionStateAction(actionQueue, node) { + var action = node.action, + payload = node.payload, + prevState = actionQueue.state; + if (node.isTransition) { + var prevTransition = ReactSharedInternals.T, + currentTransition = {}; + ReactSharedInternals.T = currentTransition; + try { + var returnValue = action(prevState, payload), + onStartTransitionFinish = ReactSharedInternals.S; + null !== onStartTransitionFinish && + onStartTransitionFinish(currentTransition, returnValue); + handleActionReturnValue(actionQueue, node, returnValue); + } catch (error) { + onActionError(actionQueue, node, error); + } finally { + ReactSharedInternals.T = prevTransition; + } + } else + try { + (prevTransition = action(prevState, payload)), + handleActionReturnValue(actionQueue, node, prevTransition); + } catch (error$47) { + onActionError(actionQueue, node, error$47); + } } -function finishRunningActionStateAction( - actionQueue, - setPendingState, - setState -) { +function handleActionReturnValue(actionQueue, node, returnValue) { + null !== returnValue && + "object" === typeof returnValue && + "function" === typeof returnValue.then + ? returnValue.then( + function (nextState) { + onActionSuccess(actionQueue, node, nextState); + }, + function (error) { + return onActionError(actionQueue, node, error); + } + ) + : onActionSuccess(actionQueue, node, returnValue); +} +function onActionSuccess(actionQueue, actionNode, nextState) { + actionNode.status = "fulfilled"; + actionNode.value = nextState; + notifyActionListeners(actionNode); + actionQueue.state = nextState; + actionNode = actionQueue.pending; + null !== actionNode && + ((nextState = actionNode.next), + nextState === actionNode + ? (actionQueue.pending = null) + : ((nextState = nextState.next), + (actionNode.next = nextState), + runActionStateAction(actionQueue, nextState))); +} +function onActionError(actionQueue, actionNode, error) { var last = actionQueue.pending; + actionQueue.pending = null; if (null !== last) { - var first = last.next; - first === last - ? (actionQueue.pending = null) - : ((first = first.next), - (last.next = first), - runActionStateAction( - actionQueue, - setPendingState, - setState, - first.payload - )); + last = last.next; + do + (actionNode.status = "rejected"), + (actionNode.reason = error), + notifyActionListeners(actionNode), + (actionNode = actionNode.next); + while (actionNode !== last); } + actionQueue.action = null; +} +function notifyActionListeners(actionNode) { + actionNode = actionNode.listeners; + for (var i = 0; i < actionNode.length; i++) (0, actionNode[i])(); } function actionStateReducer(oldState, newState) { return newState; @@ -4409,17 +4444,19 @@ function startTransition(fiber, queue, pendingState, finishedState, callback) { ReactDOMSharedInternals.p = 0 !== previousPriority && 8 > previousPriority ? previousPriority : 8; var prevTransition = ReactSharedInternals.T, - currentTransition = { _callbacks: new Set() }; + currentTransition = {}; ReactSharedInternals.T = currentTransition; dispatchOptimisticSetState(fiber, !1, queue, pendingState); try { - var returnValue = callback(); + var returnValue = callback(), + onStartTransitionFinish = ReactSharedInternals.S; + null !== onStartTransitionFinish && + onStartTransitionFinish(currentTransition, returnValue); if ( null !== returnValue && "object" === typeof returnValue && "function" === typeof returnValue.then ) { - notifyTransitionCallbacks(currentTransition, returnValue); var thenableForFinishedState = chainThenableValue( returnValue, finishedState @@ -4490,7 +4527,6 @@ function ensureFormComponentIsStateful(formFiber) { return existingStateHook; } function requestFormReset$1(formFiber) { - requestCurrentTransition(); var resetStateQueue = ensureFormComponentIsStateful(formFiber).next.queue; dispatchSetState(formFiber, resetStateQueue, {}); } @@ -4511,14 +4547,14 @@ function refreshCache(fiber, seedKey, seedValue) { case 3: var lane = requestUpdateLane(); fiber = createUpdate(lane); - var root$49 = enqueueUpdate(provider, fiber, lane); - null !== root$49 && - (scheduleUpdateOnFiber(root$49, provider, lane), - entangleTransitions(root$49, provider, lane)); + var root$50 = enqueueUpdate(provider, fiber, lane); + null !== root$50 && + (scheduleUpdateOnFiber(root$50, provider, lane), + entangleTransitions(root$50, provider, lane)); provider = createCache(); null !== seedKey && void 0 !== seedKey && - null !== root$49 && + null !== root$50 && provider.data.set(seedKey, seedValue); fiber.payload = { cache: provider }; return; @@ -4581,7 +4617,6 @@ function dispatchSetState(fiber, queue, action) { } } function dispatchOptimisticSetState(fiber, throwIfDuringRender, queue, action) { - requestCurrentTransition(); action = { lane: 2, revertLane: requestTransitionLane(), @@ -4988,9 +5023,9 @@ function logUncaughtError(root, errorInfo) { try { var onUncaughtError = root.onUncaughtError; onUncaughtError(errorInfo.value, { componentStack: errorInfo.stack }); - } catch (e$53) { + } catch (e$54) { setTimeout(function () { - throw e$53; + throw e$54; }); } } @@ -5001,9 +5036,9 @@ function logCaughtError(root, boundary, errorInfo) { componentStack: errorInfo.stack, errorBoundary: 1 === boundary.tag ? boundary.stateNode : null }); - } catch (e$54) { + } catch (e$55) { setTimeout(function () { - throw e$54; + throw e$55; }); } } @@ -6576,25 +6611,31 @@ function beginWork(current, workInProgress, renderLanes) { case 26: return ( markRef(current, workInProgress), - (renderLanes = workInProgress.memoizedState = - getResource( - workInProgress.type, - null === current ? null : current.memoizedProps, - workInProgress.pendingProps - )), - null !== current || - isHydrating || - null !== renderLanes || - ((renderLanes = workInProgress.type), - (current = workInProgress.pendingProps), - (lazyComponent = getOwnerDocumentFromRootContainer( - rootInstanceStackCursor.current - ).createElement(renderLanes)), - (lazyComponent[internalInstanceKey] = workInProgress), - (lazyComponent[internalPropsKey] = current), - setInitialProperties(lazyComponent, renderLanes, current), - markNodeAsHoistable(lazyComponent), - (workInProgress.stateNode = lazyComponent)), + null === current + ? (renderLanes = getResource( + workInProgress.type, + null, + workInProgress.pendingProps, + null + )) + ? (workInProgress.memoizedState = renderLanes) + : isHydrating || + ((renderLanes = workInProgress.type), + (current = workInProgress.pendingProps), + (lazyComponent = getOwnerDocumentFromRootContainer( + rootInstanceStackCursor.current + ).createElement(renderLanes)), + (lazyComponent[internalInstanceKey] = workInProgress), + (lazyComponent[internalPropsKey] = current), + setInitialProperties(lazyComponent, renderLanes, current), + markNodeAsHoistable(lazyComponent), + (workInProgress.stateNode = lazyComponent)) + : (workInProgress.memoizedState = getResource( + workInProgress.type, + current.memoizedProps, + workInProgress.pendingProps, + current.memoizedState + )), null ); case 27: @@ -7332,9 +7373,9 @@ function resolveClassComponentProps(Component, baseProps) { } if ((Component = Component.defaultProps)) { newProps === baseProps && (newProps = assign({}, newProps)); - for (var propName$96 in Component) - void 0 === newProps[propName$96] && - (newProps[propName$96] = Component[propName$96]); + for (var propName$97 in Component) + void 0 === newProps[propName$97] && + (newProps[propName$97] = Component[propName$97]); } return newProps; } @@ -7390,8 +7431,8 @@ function safelyDetachRef(current, nearestMountedAncestor) { else if ("function" === typeof ref) try { ref(null); - } catch (error$97) { - captureCommitPhaseError(current, nearestMountedAncestor, error$97); + } catch (error$98) { + captureCommitPhaseError(current, nearestMountedAncestor, error$98); } else ref.current = null; } @@ -7663,11 +7704,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) { current, finishedRoot.__reactInternalSnapshotBeforeUpdate ); - } catch (error$99) { + } catch (error$100) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$99 + error$100 ); } } @@ -8120,8 +8161,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { } try { commitHookEffectListUnmount(5, finishedWork, finishedWork.return); - } catch (error$111) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$111); + } catch (error$112) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$112); } } break; @@ -8294,11 +8335,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) { newProps ); domElement[internalPropsKey] = newProps; - } catch (error$112) { + } catch (error$113) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$112 + error$113 ); } break; @@ -8335,8 +8376,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { root = finishedWork.stateNode; try { setTextContent(root, ""); - } catch (error$113) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$113); + } catch (error$114) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$114); } } if (flags & 4 && ((root = finishedWork.stateNode), null != root)) { @@ -8346,8 +8387,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { try { updateProperties(root, maybeNodes, current, hoistableRoot), (root[internalPropsKey] = hoistableRoot); - } catch (error$115) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$115); + } catch (error$116) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$116); } } flags & 1024 && (needsFormReset = !0); @@ -8362,8 +8403,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { current = finishedWork.memoizedProps; try { flags.nodeValue = current; - } catch (error$116) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$116); + } catch (error$117) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$117); } } break; @@ -8377,8 +8418,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { if (flags & 4 && null !== current && current.memoizedState.isDehydrated) try { retryIfBlockedOn(root.containerInfo); - } catch (error$117) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$117); + } catch (error$118) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$118); } needsFormReset && ((needsFormReset = !1), recursivelyResetForms(finishedWork)); @@ -8472,11 +8513,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) { if (null === current) try { root.stateNode.nodeValue = domElement ? "" : root.memoizedProps; - } catch (error$101) { + } catch (error$102) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$101 + error$102 ); } } else if ( @@ -8545,21 +8586,21 @@ function commitReconciliationEffects(finishedWork) { insertOrAppendPlacementNode(finishedWork, before, parent$jscomp$0); break; case 5: - var parent$102 = JSCompiler_inline_result.stateNode; + var parent$103 = JSCompiler_inline_result.stateNode; JSCompiler_inline_result.flags & 32 && - (setTextContent(parent$102, ""), + (setTextContent(parent$103, ""), (JSCompiler_inline_result.flags &= -33)); - var before$103 = getHostSibling(finishedWork); - insertOrAppendPlacementNode(finishedWork, before$103, parent$102); + var before$104 = getHostSibling(finishedWork); + insertOrAppendPlacementNode(finishedWork, before$104, parent$103); break; case 3: case 4: - var parent$104 = JSCompiler_inline_result.stateNode.containerInfo, - before$105 = getHostSibling(finishedWork); + var parent$105 = JSCompiler_inline_result.stateNode.containerInfo, + before$106 = getHostSibling(finishedWork); insertOrAppendPlacementNodeIntoContainer( finishedWork, - before$105, - parent$104 + before$106, + parent$105 ); break; default: @@ -9332,7 +9373,7 @@ function createFiberFromTypeAndProps( break a; } throw Error( - formatProdErrorMessage(130, null == type ? type : typeof type, "") + formatProdErrorMessage(130, null === type ? "null" : typeof type, "") ); } key = createFiber(fiberTag, pendingProps, key, mode); @@ -9438,14 +9479,14 @@ function cutOffTailIfNeeded(renderState, hasRenderedATailFallback) { break; case "collapsed": lastTailNode = renderState.tail; - for (var lastTailNode$127 = null; null !== lastTailNode; ) - null !== lastTailNode.alternate && (lastTailNode$127 = lastTailNode), + for (var lastTailNode$128 = null; null !== lastTailNode; ) + null !== lastTailNode.alternate && (lastTailNode$128 = lastTailNode), (lastTailNode = lastTailNode.sibling); - null === lastTailNode$127 + null === lastTailNode$128 ? hasRenderedATailFallback || null === renderState.tail ? (renderState.tail = null) : (renderState.tail.sibling = null) - : (lastTailNode$127.sibling = null); + : (lastTailNode$128.sibling = null); } } function bubbleProperties(completedWork) { @@ -9455,19 +9496,19 @@ function bubbleProperties(completedWork) { newChildLanes = 0, subtreeFlags = 0; if (didBailout) - for (var child$128 = completedWork.child; null !== child$128; ) - (newChildLanes |= child$128.lanes | child$128.childLanes), - (subtreeFlags |= child$128.subtreeFlags & 31457280), - (subtreeFlags |= child$128.flags & 31457280), - (child$128.return = completedWork), - (child$128 = child$128.sibling); + for (var child$129 = completedWork.child; null !== child$129; ) + (newChildLanes |= child$129.lanes | child$129.childLanes), + (subtreeFlags |= child$129.subtreeFlags & 31457280), + (subtreeFlags |= child$129.flags & 31457280), + (child$129.return = completedWork), + (child$129 = child$129.sibling); else - for (child$128 = completedWork.child; null !== child$128; ) - (newChildLanes |= child$128.lanes | child$128.childLanes), - (subtreeFlags |= child$128.subtreeFlags), - (subtreeFlags |= child$128.flags), - (child$128.return = completedWork), - (child$128 = child$128.sibling); + for (child$129 = completedWork.child; null !== child$129; ) + (newChildLanes |= child$129.lanes | child$129.childLanes), + (subtreeFlags |= child$129.subtreeFlags), + (subtreeFlags |= child$129.flags), + (child$129.return = completedWork), + (child$129 = child$129.sibling); completedWork.subtreeFlags |= subtreeFlags; completedWork.childLanes = newChildLanes; return didBailout; @@ -9512,31 +9553,31 @@ function completeWork(current, workInProgress, renderLanes) { bubbleProperties(workInProgress); return null; case 26: - renderLanes = workInProgress.memoizedState; - if (null === current) - markUpdate(workInProgress), - null !== renderLanes - ? (bubbleProperties(workInProgress), + return ( + (renderLanes = workInProgress.memoizedState), + null === current + ? (markUpdate(workInProgress), + null !== renderLanes + ? (bubbleProperties(workInProgress), + preloadResourceAndSuspendIfNeeded(workInProgress, renderLanes)) + : (bubbleProperties(workInProgress), + (workInProgress.flags &= -16777217))) + : renderLanes + ? renderLanes !== current.memoizedState + ? (markUpdate(workInProgress), + bubbleProperties(workInProgress), preloadResourceAndSuspendIfNeeded(workInProgress, renderLanes)) : (bubbleProperties(workInProgress), - (workInProgress.flags &= -16777217)); - else { - var currentResource = current.memoizedState; - renderLanes !== currentResource && markUpdate(workInProgress); - null !== renderLanes - ? (bubbleProperties(workInProgress), - renderLanes === currentResource - ? (workInProgress.flags &= -16777217) - : preloadResourceAndSuspendIfNeeded(workInProgress, renderLanes)) + (workInProgress.flags &= -16777217)) : (current.memoizedProps !== newProps && markUpdate(workInProgress), bubbleProperties(workInProgress), - (workInProgress.flags &= -16777217)); - } - return null; + (workInProgress.flags &= -16777217)), + null + ); case 27: popHostContext(workInProgress); renderLanes = rootInstanceStackCursor.current; - currentResource = workInProgress.type; + var type = workInProgress.type; if (null !== current && null != workInProgress.stateNode) current.memoizedProps !== newProps && markUpdate(workInProgress); else { @@ -9549,11 +9590,7 @@ function completeWork(current, workInProgress, renderLanes) { current = contextStackCursor.current; popHydrationState(workInProgress) ? prepareToHydrateHostInstance(workInProgress, current) - : ((current = resolveSingletonInstance( - currentResource, - newProps, - renderLanes - )), + : ((current = resolveSingletonInstance(type, newProps, renderLanes)), (workInProgress.stateNode = current), markUpdate(workInProgress)); } @@ -9575,18 +9612,18 @@ function completeWork(current, workInProgress, renderLanes) { if (popHydrationState(workInProgress)) prepareToHydrateHostInstance(workInProgress, current); else { - currentResource = getOwnerDocumentFromRootContainer( + type = getOwnerDocumentFromRootContainer( rootInstanceStackCursor.current ); switch (current) { case 1: - current = currentResource.createElementNS( + current = type.createElementNS( "http://www.w3.org/2000/svg", renderLanes ); break; case 2: - current = currentResource.createElementNS( + current = type.createElementNS( "http://www.w3.org/1998/Math/MathML", renderLanes ); @@ -9594,29 +9631,27 @@ function completeWork(current, workInProgress, renderLanes) { default: switch (renderLanes) { case "svg": - current = currentResource.createElementNS( + current = type.createElementNS( "http://www.w3.org/2000/svg", renderLanes ); break; case "math": - current = currentResource.createElementNS( + current = type.createElementNS( "http://www.w3.org/1998/Math/MathML", renderLanes ); break; case "script": - current = currentResource.createElement("div"); + current = type.createElement("div"); current.innerHTML = "