From 1e2276b76952b2f6d494249291de1fd53e30e522 Mon Sep 17 00:00:00 2001 From: eps1lon Date: Mon, 10 Jun 2024 17:05:47 +0200 Subject: [PATCH 1/8] Update React from 1df34bdf62 to 20b6f4c0e8 --- .github/.react-version | 2 +- package.json | 34 +- .../cjs/react-dom-client.development.js | 72 ++-- .../cjs/react-dom-client.production.js | 16 +- .../cjs/react-dom-profiling.development.js | 72 ++-- .../cjs/react-dom-profiling.profiling.js | 16 +- ...t-dom-server-legacy.browser.development.js | 2 +- ...ct-dom-server-legacy.browser.production.js | 2 +- ...eact-dom-server-legacy.node.development.js | 2 +- ...react-dom-server-legacy.node.production.js | 2 +- .../react-dom-server.browser.development.js | 16 +- .../react-dom-server.browser.production.js | 47 ++- .../cjs/react-dom-server.bun.production.js | 44 ++- .../cjs/react-dom-server.edge.development.js | 2 +- .../cjs/react-dom-server.edge.production.js | 6 +- .../cjs/react-dom-server.node.development.js | 2 +- .../cjs/react-dom-server.node.production.js | 6 +- .../react-dom-unstable_testing.development.js | 72 ++-- .../react-dom-unstable_testing.production.js | 16 +- .../cjs/react-dom.development.js | 2 +- .../cjs/react-dom.production.js | 2 +- .../cjs/react-dom.react-server.development.js | 2 +- .../cjs/react-dom.react-server.production.js | 2 +- .../react-dom-experimental/package.json | 4 +- .../cjs/react-dom-client.development.js | 72 ++-- .../cjs/react-dom-client.production.js | 16 +- .../cjs/react-dom-profiling.development.js | 72 ++-- .../cjs/react-dom-profiling.profiling.js | 16 +- ...t-dom-server-legacy.browser.development.js | 2 +- ...ct-dom-server-legacy.browser.production.js | 2 +- ...eact-dom-server-legacy.node.development.js | 2 +- ...react-dom-server-legacy.node.production.js | 2 +- .../react-dom-server.browser.development.js | 16 +- .../react-dom-server.browser.production.js | 60 +-- .../cjs/react-dom-server.bun.production.js | 44 ++- .../cjs/react-dom-server.edge.development.js | 2 +- .../cjs/react-dom-server.edge.production.js | 6 +- .../cjs/react-dom-server.node.development.js | 2 +- .../cjs/react-dom-server.node.production.js | 6 +- .../react-dom/cjs/react-dom.development.js | 2 +- .../react-dom/cjs/react-dom.production.js | 2 +- .../cjs/react-dom.react-server.development.js | 2 +- .../cjs/react-dom.react-server.production.js | 2 +- .../next/src/compiled/react-dom/package.json | 4 +- .../cjs/react.development.js | 2 +- .../cjs/react.production.js | 2 +- .../cjs/react.react-server.development.js | 2 +- .../cjs/react.react-server.production.js | 2 +- .../next/src/compiled/react-is/package.json | 2 +- ...om-turbopack-client.browser.development.js | 40 +- ...r-dom-turbopack-client.edge.development.js | 40 +- ...r-dom-turbopack-client.node.development.js | 40 +- ...opack-client.node.unbundled.development.js | 40 +- ...om-turbopack-server.browser.development.js | 153 +++++++- ...dom-turbopack-server.browser.production.js | 302 +++++++++------ ...r-dom-turbopack-server.edge.development.js | 138 ++++++- ...er-dom-turbopack-server.edge.production.js | 285 ++++++++------ ...r-dom-turbopack-server.node.development.js | 129 ++++++- ...er-dom-turbopack-server.node.production.js | 286 ++++++++------- ...opack-server.node.unbundled.development.js | 129 ++++++- ...bopack-server.node.unbundled.production.js | 286 ++++++++------- .../package.json | 4 +- ...om-turbopack-client.browser.development.js | 11 +- ...r-dom-turbopack-client.edge.development.js | 11 +- ...r-dom-turbopack-client.node.development.js | 11 +- ...opack-client.node.unbundled.development.js | 11 +- ...om-turbopack-server.browser.development.js | 153 +++++++- ...dom-turbopack-server.browser.production.js | 233 ++++++++---- ...r-dom-turbopack-server.edge.development.js | 138 ++++++- ...er-dom-turbopack-server.edge.production.js | 216 +++++++---- ...r-dom-turbopack-server.node.development.js | 129 ++++++- ...er-dom-turbopack-server.node.production.js | 217 ++++++----- ...opack-server.node.unbundled.development.js | 129 ++++++- ...bopack-server.node.unbundled.production.js | 217 ++++++----- .../react-server-dom-turbopack/package.json | 4 +- ...-dom-webpack-client.browser.development.js | 40 +- ...ver-dom-webpack-client.edge.development.js | 40 +- ...ver-dom-webpack-client.node.development.js | 40 +- ...bpack-client.node.unbundled.development.js | 40 +- ...-dom-webpack-server.browser.development.js | 153 +++++++- ...r-dom-webpack-server.browser.production.js | 302 +++++++++------ ...ver-dom-webpack-server.edge.development.js | 138 ++++++- ...rver-dom-webpack-server.edge.production.js | 285 ++++++++------ ...ver-dom-webpack-server.node.development.js | 129 ++++++- ...rver-dom-webpack-server.node.production.js | 286 ++++++++------- ...bpack-server.node.unbundled.development.js | 129 ++++++- ...ebpack-server.node.unbundled.production.js | 286 ++++++++------- .../package.json | 4 +- ...-dom-webpack-client.browser.development.js | 11 +- ...ver-dom-webpack-client.edge.development.js | 11 +- ...ver-dom-webpack-client.node.development.js | 11 +- ...bpack-client.node.unbundled.development.js | 11 +- ...-dom-webpack-server.browser.development.js | 153 +++++++- ...r-dom-webpack-server.browser.production.js | 233 ++++++++---- ...ver-dom-webpack-server.edge.development.js | 138 ++++++- ...rver-dom-webpack-server.edge.production.js | 216 +++++++---- ...ver-dom-webpack-server.node.development.js | 129 ++++++- ...rver-dom-webpack-server.node.production.js | 217 ++++++----- ...bpack-server.node.unbundled.development.js | 129 ++++++- ...ebpack-server.node.unbundled.production.js | 217 ++++++----- .../react-server-dom-webpack/package.json | 4 +- .../compiled/react/cjs/react.development.js | 2 +- .../compiled/react/cjs/react.production.js | 2 +- .../cjs/react.react-server.development.js | 2 +- .../cjs/react.react-server.production.js | 2 +- .../next/src/compiled/unistore/unistore.js | 2 +- pnpm-lock.yaml | 347 ++++++++++-------- run-tests.js | 3 +- test/.stats-app/package.json | 4 +- 109 files changed, 5376 insertions(+), 2477 deletions(-) diff --git a/.github/.react-version b/.github/.react-version index 2de43dcf77c1f..59c8c14fbbb45 100644 --- a/.github/.react-version +++ b/.github/.react-version @@ -1 +1 @@ -19.0.0-rc-6230622a1a-20240610 \ No newline at end of file +19.0.0-rc-20b6f4c0e8-20240607 \ No newline at end of file diff --git a/package.json b/package.json index e137c3e332de3..894b6c6841c74 100644 --- a/package.json +++ b/package.json @@ -200,19 +200,19 @@ "pretty-bytes": "5.3.0", "pretty-ms": "7.0.0", "random-seed": "0.3.0", - "react": "19.0.0-rc-6230622a1a-20240610", + "react": "19.0.0-rc-20b6f4c0e8-20240607", "react-17": "npm:react@17.0.2", - "react-builtin": "npm:react@19.0.0-rc-6230622a1a-20240610", - "react-dom": "19.0.0-rc-6230622a1a-20240610", + "react-builtin": "npm:react@19.0.0-rc-20b6f4c0e8-20240607", + "react-dom": "19.0.0-rc-20b6f4c0e8-20240607", "react-dom-17": "npm:react-dom@17.0.2", - "react-dom-builtin": "npm:react-dom@19.0.0-rc-6230622a1a-20240610", - "react-dom-experimental-builtin": "npm:react-dom@0.0.0-experimental-6230622a1a-20240610", - "react-experimental-builtin": "npm:react@0.0.0-experimental-6230622a1a-20240610", - "react-is-builtin": "npm:react-is@19.0.0-rc-6230622a1a-20240610", - "react-server-dom-turbopack": "19.0.0-rc-6230622a1a-20240610", - "react-server-dom-turbopack-experimental": "npm:react-server-dom-turbopack@0.0.0-experimental-6230622a1a-20240610", - "react-server-dom-webpack": "19.0.0-rc-6230622a1a-20240610", - "react-server-dom-webpack-experimental": "npm:react-server-dom-webpack@0.0.0-experimental-6230622a1a-20240610", + "react-dom-builtin": "npm:react-dom@19.0.0-rc-20b6f4c0e8-20240607", + "react-dom-experimental-builtin": "npm:react-dom@0.0.0-experimental-20b6f4c0e8-20240607", + "react-is-builtin": "npm:react-is@19.0.0-rc-20b6f4c0e8-20240607", + "react-experimental-builtin": "npm:react@0.0.0-experimental-20b6f4c0e8-20240607", + "react-server-dom-turbopack": "19.0.0-rc-20b6f4c0e8-20240607", + "react-server-dom-turbopack-experimental": "npm:react-server-dom-turbopack@0.0.0-experimental-20b6f4c0e8-20240607", + "react-server-dom-webpack": "19.0.0-rc-20b6f4c0e8-20240607", + "react-server-dom-webpack-experimental": "npm:react-server-dom-webpack@0.0.0-experimental-20b6f4c0e8-20240607", "react-ssr-prepass": "1.0.8", "react-virtualized": "9.22.3", "relay-compiler": "13.0.2", @@ -222,8 +222,8 @@ "resolve-from": "5.0.0", "sass": "1.54.0", "satori": "0.10.9", - "scheduler-builtin": "npm:scheduler@0.25.0-rc-6230622a1a-20240610", - "scheduler-experimental-builtin": "npm:scheduler@0.0.0-experimental-6230622a1a-20240610", + "scheduler-builtin": "npm:scheduler@0.25.0-rc-20b6f4c0e8-20240607", + "scheduler-experimental-builtin": "npm:scheduler@0.0.0-experimental-20b6f4c0e8-20240607", "seedrandom": "3.0.5", "semver": "7.3.7", "shell-quote": "1.7.3", @@ -257,10 +257,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-6230622a1a-20240610", - "react-dom": "19.0.0-rc-6230622a1a-20240610", - "react-is": "19.0.0-rc-6230622a1a-20240610", - "scheduler": "0.25.0-rc-6230622a1a-20240610" + "react": "19.0.0-rc-20b6f4c0e8-20240607", + "react-dom": "19.0.0-rc-20b6f4c0e8-20240607", + "react-is": "19.0.0-rc-20b6f4c0e8-20240607", + "scheduler": "0.25.0-rc-20b6f4c0e8-20240607" }, "engines": { "node": ">=18.18.0", 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 b1262973216c8..75c6b45cbe59e 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 @@ -11535,7 +11535,7 @@ var ownerHasKeyUseWarning; var ownerHasFunctionTypeWarning; var ownerHasSymbolTypeWarning; -var warnForMissingKey = function (child, returnFiber) {}; +var warnForMissingKey = function (returnFiber, workInProgress, child) {}; { didWarnAboutMaps = false; @@ -11550,7 +11550,7 @@ var warnForMissingKey = function (child, returnFiber) {}; ownerHasFunctionTypeWarning = {}; ownerHasSymbolTypeWarning = {}; - warnForMissingKey = function (child, returnFiber) { + warnForMissingKey = function (returnFiber, workInProgress, child) { if (child === null || typeof child !== 'object') { return; } @@ -11609,15 +11609,9 @@ var warnForMissingKey = function (child, returnFiber) {}; // 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 () { + runWithFiberInDEV(workInProgress, 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); }); }; @@ -12214,7 +12208,7 @@ function createChildReconciler(shouldTrackSideEffects) { */ - function warnOnInvalidKey(child, knownKeys, returnFiber) { + function warnOnInvalidKey(returnFiber, workInProgress, child, knownKeys) { { if (typeof child !== 'object' || child === null) { return knownKeys; @@ -12223,7 +12217,7 @@ function createChildReconciler(shouldTrackSideEffects) { switch (child.$$typeof) { case REACT_ELEMENT_TYPE: case REACT_PORTAL_TYPE: - warnForMissingKey(child, returnFiber); + warnForMissingKey(returnFiber, workInProgress, child); var key = child.key; if (typeof key !== 'string') { @@ -12241,8 +12235,9 @@ function createChildReconciler(shouldTrackSideEffects) { break; } - error('Encountered two children with the same key, `%s`. ' + 'Keys should be unique so that components maintain their identity ' + 'across updates. Non-unique keys may cause children to be ' + 'duplicated and/or omitted — the behavior is unsupported and ' + 'could change in a future version.', key); - + runWithFiberInDEV(workInProgress, function () { + error('Encountered two children with the same key, `%s`. ' + 'Keys should be unique so that components maintain their identity ' + 'across updates. Non-unique keys may cause children to be ' + 'duplicated and/or omitted — the behavior is unsupported and ' + 'could change in a future version.', key); + }); break; case REACT_LAZY_TYPE: @@ -12253,7 +12248,7 @@ function createChildReconciler(shouldTrackSideEffects) { resolvedChild = callLazyInitInDEV(child); } - warnOnInvalidKey(resolvedChild, knownKeys, returnFiber); + warnOnInvalidKey(returnFiber, workInProgress, resolvedChild, knownKeys); break; } } @@ -12278,16 +12273,7 @@ function createChildReconciler(shouldTrackSideEffects) { // (adding everything to a Map) in for every insert/move. // If you change this code, also update reconcileChildrenIterator() which // uses the same algorithm. - { - // First, validate keys. - var knownKeys = null; - - for (var i = 0; i < newChildren.length; i++) { - var child = newChildren[i]; - knownKeys = warnOnInvalidKey(child, knownKeys, returnFiber); - } - } - + var knownKeys = null; var resultingFirstChild = null; var previousNewFiber = null; var oldFiber = currentFirstChild; @@ -12317,6 +12303,10 @@ function createChildReconciler(shouldTrackSideEffects) { break; } + { + knownKeys = warnOnInvalidKey(returnFiber, newFiber, newChildren[newIdx], knownKeys); + } + if (shouldTrackSideEffects) { if (oldFiber && newFiber.alternate === null) { // We matched the slot, but we didn't reuse the existing fiber, so we @@ -12364,6 +12354,10 @@ function createChildReconciler(shouldTrackSideEffects) { continue; } + { + knownKeys = warnOnInvalidKey(returnFiber, _newFiber, newChildren[newIdx], knownKeys); + } + lastPlacedIndex = placeChild(_newFiber, lastPlacedIndex, newIdx); if (previousNewFiber === null) { @@ -12391,6 +12385,10 @@ function createChildReconciler(shouldTrackSideEffects) { var _newFiber2 = updateFromMap(existingChildren, returnFiber, newIdx, newChildren[newIdx], lanes, debugInfo); if (_newFiber2 !== null) { + { + knownKeys = warnOnInvalidKey(returnFiber, _newFiber2, newChildren[newIdx], knownKeys); + } + if (shouldTrackSideEffects) { if (_newFiber2.alternate !== null) { // The new fiber is a work in progress, but if there exists a @@ -12522,11 +12520,7 @@ function createChildReconciler(shouldTrackSideEffects) { var knownKeys = null; var step = newChildren.next(); - { - knownKeys = warnOnInvalidKey(step.value, knownKeys, returnFiber); - } - - for (; oldFiber !== null && !step.done; newIdx++, step = newChildren.next(), knownKeys = warnOnInvalidKey(step.value, knownKeys, returnFiber) ) { + for (; oldFiber !== null && !step.done; newIdx++, step = newChildren.next()) { if (oldFiber.index > newIdx) { nextOldFiber = oldFiber; oldFiber = null; @@ -12548,6 +12542,10 @@ function createChildReconciler(shouldTrackSideEffects) { break; } + { + knownKeys = warnOnInvalidKey(returnFiber, newFiber, step.value, knownKeys); + } + if (shouldTrackSideEffects) { if (oldFiber && newFiber.alternate === null) { // We matched the slot, but we didn't reuse the existing fiber, so we @@ -12588,13 +12586,17 @@ function createChildReconciler(shouldTrackSideEffects) { if (oldFiber === null) { // If we don't have any more existing children we can choose a fast path // since the rest will all be insertions. - for (; !step.done; newIdx++, step = newChildren.next(), knownKeys = warnOnInvalidKey(step.value, knownKeys, returnFiber) ) { + for (; !step.done; newIdx++, step = newChildren.next()) { var _newFiber3 = createChild(returnFiber, step.value, lanes, debugInfo); if (_newFiber3 === null) { continue; } + { + knownKeys = warnOnInvalidKey(returnFiber, _newFiber3, step.value, knownKeys); + } + lastPlacedIndex = placeChild(_newFiber3, lastPlacedIndex, newIdx); if (previousNewFiber === null) { @@ -12618,10 +12620,14 @@ function createChildReconciler(shouldTrackSideEffects) { var existingChildren = mapRemainingChildren(oldFiber); // Keep scanning and use the map to restore deleted items as moves. - for (; !step.done; newIdx++, step = newChildren.next(), knownKeys = warnOnInvalidKey(step.value, knownKeys, returnFiber) ) { + for (; !step.done; newIdx++, step = newChildren.next()) { var _newFiber4 = updateFromMap(existingChildren, returnFiber, newIdx, step.value, lanes, debugInfo); if (_newFiber4 !== null) { + { + knownKeys = warnOnInvalidKey(returnFiber, _newFiber4, step.value, knownKeys); + } + if (shouldTrackSideEffects) { if (_newFiber4.alternate !== null) { // The new fiber is a work in progress, but if there exists a @@ -36898,7 +36904,7 @@ identifierPrefix, onUncaughtError, onCaughtError, onRecoverableError, transition return root; } -var ReactVersion = '19.0.0-experimental-6230622a1a-20240610'; +var ReactVersion = '19.0.0-experimental-20b6f4c0e8-20240607'; // Might add PROFILE later. 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 2543bedce9385..30b6d38789317 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 @@ -3115,7 +3115,7 @@ function createChildReconciler(shouldTrackSideEffects) { nextOldFiber = null, step = newChildren.next(); null !== oldFiber && !step.done; - newIdx++, step = newChildren.next(), null + newIdx++, step = newChildren.next() ) { oldFiber.index > newIdx ? ((nextOldFiber = oldFiber), (oldFiber = null)) @@ -3143,7 +3143,7 @@ function createChildReconciler(shouldTrackSideEffects) { resultingFirstChild ); if (null === oldFiber) { - for (; !step.done; newIdx++, step = newChildren.next(), null) + for (; !step.done; newIdx++, step = newChildren.next()) (step = createChild(returnFiber, step.value, lanes)), null !== step && ((currentFirstChild = placeChild(step, currentFirstChild, newIdx)), @@ -3157,7 +3157,7 @@ function createChildReconciler(shouldTrackSideEffects) { for ( oldFiber = mapRemainingChildren(oldFiber); !step.done; - newIdx++, step = newChildren.next(), null + newIdx++, step = newChildren.next() ) (step = updateFromMap(oldFiber, returnFiber, newIdx, step.value, lanes)), null !== step && @@ -14789,14 +14789,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) { }; var isomorphicReactPackageVersion$jscomp$inline_1631 = React.version; if ( - "19.0.0-experimental-6230622a1a-20240610" !== + "19.0.0-experimental-20b6f4c0e8-20240607" !== isomorphicReactPackageVersion$jscomp$inline_1631 ) throw Error( formatProdErrorMessage( 527, isomorphicReactPackageVersion$jscomp$inline_1631, - "19.0.0-experimental-6230622a1a-20240610" + "19.0.0-experimental-20b6f4c0e8-20240607" ) ); ReactDOMSharedInternals.findDOMNode = function (componentOrElement) { @@ -14815,7 +14815,7 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) { var devToolsConfig$jscomp$inline_1638 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "19.0.0-experimental-6230622a1a-20240610", + version: "19.0.0-experimental-20b6f4c0e8-20240607", rendererPackageName: "react-dom" }; var internals$jscomp$inline_2016 = { @@ -14845,7 +14845,7 @@ var internals$jscomp$inline_2016 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "19.0.0-experimental-6230622a1a-20240610" + reconcilerVersion: "19.0.0-experimental-20b6f4c0e8-20240607" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2017 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -14951,4 +14951,4 @@ exports.hydrateRoot = function (container, initialChildren, options) { listenToAllSupportedEvents(container); return new ReactDOMHydrationRoot(initialChildren); }; -exports.version = "19.0.0-experimental-6230622a1a-20240610"; +exports.version = "19.0.0-experimental-20b6f4c0e8-20240607"; diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-profiling.development.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-profiling.development.js index 574227c795ee7..71edbf81815fc 100644 --- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-profiling.development.js +++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-profiling.development.js @@ -11583,7 +11583,7 @@ var ownerHasKeyUseWarning; var ownerHasFunctionTypeWarning; var ownerHasSymbolTypeWarning; -var warnForMissingKey = function (child, returnFiber) {}; +var warnForMissingKey = function (returnFiber, workInProgress, child) {}; { didWarnAboutMaps = false; @@ -11598,7 +11598,7 @@ var warnForMissingKey = function (child, returnFiber) {}; ownerHasFunctionTypeWarning = {}; ownerHasSymbolTypeWarning = {}; - warnForMissingKey = function (child, returnFiber) { + warnForMissingKey = function (returnFiber, workInProgress, child) { if (child === null || typeof child !== 'object') { return; } @@ -11657,15 +11657,9 @@ var warnForMissingKey = function (child, returnFiber) {}; // 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 () { + runWithFiberInDEV(workInProgress, 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); }); }; @@ -12262,7 +12256,7 @@ function createChildReconciler(shouldTrackSideEffects) { */ - function warnOnInvalidKey(child, knownKeys, returnFiber) { + function warnOnInvalidKey(returnFiber, workInProgress, child, knownKeys) { { if (typeof child !== 'object' || child === null) { return knownKeys; @@ -12271,7 +12265,7 @@ function createChildReconciler(shouldTrackSideEffects) { switch (child.$$typeof) { case REACT_ELEMENT_TYPE: case REACT_PORTAL_TYPE: - warnForMissingKey(child, returnFiber); + warnForMissingKey(returnFiber, workInProgress, child); var key = child.key; if (typeof key !== 'string') { @@ -12289,8 +12283,9 @@ function createChildReconciler(shouldTrackSideEffects) { break; } - error('Encountered two children with the same key, `%s`. ' + 'Keys should be unique so that components maintain their identity ' + 'across updates. Non-unique keys may cause children to be ' + 'duplicated and/or omitted — the behavior is unsupported and ' + 'could change in a future version.', key); - + runWithFiberInDEV(workInProgress, function () { + error('Encountered two children with the same key, `%s`. ' + 'Keys should be unique so that components maintain their identity ' + 'across updates. Non-unique keys may cause children to be ' + 'duplicated and/or omitted — the behavior is unsupported and ' + 'could change in a future version.', key); + }); break; case REACT_LAZY_TYPE: @@ -12301,7 +12296,7 @@ function createChildReconciler(shouldTrackSideEffects) { resolvedChild = callLazyInitInDEV(child); } - warnOnInvalidKey(resolvedChild, knownKeys, returnFiber); + warnOnInvalidKey(returnFiber, workInProgress, resolvedChild, knownKeys); break; } } @@ -12326,16 +12321,7 @@ function createChildReconciler(shouldTrackSideEffects) { // (adding everything to a Map) in for every insert/move. // If you change this code, also update reconcileChildrenIterator() which // uses the same algorithm. - { - // First, validate keys. - var knownKeys = null; - - for (var i = 0; i < newChildren.length; i++) { - var child = newChildren[i]; - knownKeys = warnOnInvalidKey(child, knownKeys, returnFiber); - } - } - + var knownKeys = null; var resultingFirstChild = null; var previousNewFiber = null; var oldFiber = currentFirstChild; @@ -12365,6 +12351,10 @@ function createChildReconciler(shouldTrackSideEffects) { break; } + { + knownKeys = warnOnInvalidKey(returnFiber, newFiber, newChildren[newIdx], knownKeys); + } + if (shouldTrackSideEffects) { if (oldFiber && newFiber.alternate === null) { // We matched the slot, but we didn't reuse the existing fiber, so we @@ -12412,6 +12402,10 @@ function createChildReconciler(shouldTrackSideEffects) { continue; } + { + knownKeys = warnOnInvalidKey(returnFiber, _newFiber, newChildren[newIdx], knownKeys); + } + lastPlacedIndex = placeChild(_newFiber, lastPlacedIndex, newIdx); if (previousNewFiber === null) { @@ -12439,6 +12433,10 @@ function createChildReconciler(shouldTrackSideEffects) { var _newFiber2 = updateFromMap(existingChildren, returnFiber, newIdx, newChildren[newIdx], lanes, debugInfo); if (_newFiber2 !== null) { + { + knownKeys = warnOnInvalidKey(returnFiber, _newFiber2, newChildren[newIdx], knownKeys); + } + if (shouldTrackSideEffects) { if (_newFiber2.alternate !== null) { // The new fiber is a work in progress, but if there exists a @@ -12570,11 +12568,7 @@ function createChildReconciler(shouldTrackSideEffects) { var knownKeys = null; var step = newChildren.next(); - { - knownKeys = warnOnInvalidKey(step.value, knownKeys, returnFiber); - } - - for (; oldFiber !== null && !step.done; newIdx++, step = newChildren.next(), knownKeys = warnOnInvalidKey(step.value, knownKeys, returnFiber) ) { + for (; oldFiber !== null && !step.done; newIdx++, step = newChildren.next()) { if (oldFiber.index > newIdx) { nextOldFiber = oldFiber; oldFiber = null; @@ -12596,6 +12590,10 @@ function createChildReconciler(shouldTrackSideEffects) { break; } + { + knownKeys = warnOnInvalidKey(returnFiber, newFiber, step.value, knownKeys); + } + if (shouldTrackSideEffects) { if (oldFiber && newFiber.alternate === null) { // We matched the slot, but we didn't reuse the existing fiber, so we @@ -12636,13 +12634,17 @@ function createChildReconciler(shouldTrackSideEffects) { if (oldFiber === null) { // If we don't have any more existing children we can choose a fast path // since the rest will all be insertions. - for (; !step.done; newIdx++, step = newChildren.next(), knownKeys = warnOnInvalidKey(step.value, knownKeys, returnFiber) ) { + for (; !step.done; newIdx++, step = newChildren.next()) { var _newFiber3 = createChild(returnFiber, step.value, lanes, debugInfo); if (_newFiber3 === null) { continue; } + { + knownKeys = warnOnInvalidKey(returnFiber, _newFiber3, step.value, knownKeys); + } + lastPlacedIndex = placeChild(_newFiber3, lastPlacedIndex, newIdx); if (previousNewFiber === null) { @@ -12666,10 +12668,14 @@ function createChildReconciler(shouldTrackSideEffects) { var existingChildren = mapRemainingChildren(oldFiber); // Keep scanning and use the map to restore deleted items as moves. - for (; !step.done; newIdx++, step = newChildren.next(), knownKeys = warnOnInvalidKey(step.value, knownKeys, returnFiber) ) { + for (; !step.done; newIdx++, step = newChildren.next()) { var _newFiber4 = updateFromMap(existingChildren, returnFiber, newIdx, step.value, lanes, debugInfo); if (_newFiber4 !== null) { + { + knownKeys = warnOnInvalidKey(returnFiber, _newFiber4, step.value, knownKeys); + } + if (shouldTrackSideEffects) { if (_newFiber4.alternate !== null) { // The new fiber is a work in progress, but if there exists a @@ -36946,7 +36952,7 @@ identifierPrefix, onUncaughtError, onCaughtError, onRecoverableError, transition return root; } -var ReactVersion = '19.0.0-experimental-6230622a1a-20240610'; +var ReactVersion = '19.0.0-experimental-20b6f4c0e8-20240607'; function createPortal$1(children, containerInfo, // TODO: figure out the API for cross-renderer implementation. implementation) { diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-profiling.profiling.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-profiling.profiling.js index 869e063e75513..4c5f0bda80209 100644 --- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-profiling.profiling.js +++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-profiling.profiling.js @@ -3237,7 +3237,7 @@ function createChildReconciler(shouldTrackSideEffects) { nextOldFiber = null, step = newChildren.next(); null !== oldFiber && !step.done; - newIdx++, step = newChildren.next(), null + newIdx++, step = newChildren.next() ) { oldFiber.index > newIdx ? ((nextOldFiber = oldFiber), (oldFiber = null)) @@ -3265,7 +3265,7 @@ function createChildReconciler(shouldTrackSideEffects) { resultingFirstChild ); if (null === oldFiber) { - for (; !step.done; newIdx++, step = newChildren.next(), null) + for (; !step.done; newIdx++, step = newChildren.next()) (step = createChild(returnFiber, step.value, lanes)), null !== step && ((currentFirstChild = placeChild(step, currentFirstChild, newIdx)), @@ -3279,7 +3279,7 @@ function createChildReconciler(shouldTrackSideEffects) { for ( oldFiber = mapRemainingChildren(oldFiber); !step.done; - newIdx++, step = newChildren.next(), null + newIdx++, step = newChildren.next() ) (step = updateFromMap(oldFiber, returnFiber, newIdx, step.value, lanes)), null !== step && @@ -15499,14 +15499,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) { }; var isomorphicReactPackageVersion$jscomp$inline_1719 = React.version; if ( - "19.0.0-experimental-6230622a1a-20240610" !== + "19.0.0-experimental-20b6f4c0e8-20240607" !== isomorphicReactPackageVersion$jscomp$inline_1719 ) throw Error( formatProdErrorMessage( 527, isomorphicReactPackageVersion$jscomp$inline_1719, - "19.0.0-experimental-6230622a1a-20240610" + "19.0.0-experimental-20b6f4c0e8-20240607" ) ); ReactDOMSharedInternals.findDOMNode = function (componentOrElement) { @@ -15525,7 +15525,7 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) { var devToolsConfig$jscomp$inline_1726 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "19.0.0-experimental-6230622a1a-20240610", + version: "19.0.0-experimental-20b6f4c0e8-20240607", rendererPackageName: "react-dom" }; (function (internals) { @@ -15568,7 +15568,7 @@ var devToolsConfig$jscomp$inline_1726 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "19.0.0-experimental-6230622a1a-20240610" + reconcilerVersion: "19.0.0-experimental-20b6f4c0e8-20240607" }); function noop() {} function getCrossOriginStringAs(as, input) { @@ -15822,7 +15822,7 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactSharedInternals.H.useHostTransitionStatus(); }; -exports.version = "19.0.0-experimental-6230622a1a-20240610"; +exports.version = "19.0.0-experimental-20b6f4c0e8-20240607"; "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.browser.development.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.browser.development.js index 50f3351789139..01d60d5f3a7f1 100644 --- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.browser.development.js +++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.browser.development.js @@ -17,7 +17,7 @@ if (process.env.NODE_ENV !== "production") { var React = require("next/dist/compiled/react-experimental"); var ReactDOM = require('react-dom'); -var ReactVersion = '19.0.0-experimental-6230622a1a-20240610'; +var ReactVersion = '19.0.0-experimental-20b6f4c0e8-20240607'; var ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE; diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.browser.production.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.browser.production.js index 23065ec2d9ee9..2be70ae416466 100644 --- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.browser.production.js +++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.browser.production.js @@ -5863,4 +5863,4 @@ exports.renderToString = function (children, options) { 'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server' ); }; -exports.version = "19.0.0-experimental-6230622a1a-20240610"; +exports.version = "19.0.0-experimental-20b6f4c0e8-20240607"; diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.node.development.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.node.development.js index 1b311e7bace6d..0b466de590080 100644 --- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.node.development.js +++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.node.development.js @@ -17,7 +17,7 @@ if (process.env.NODE_ENV !== "production") { var React = require("next/dist/compiled/react-experimental"); var ReactDOM = require('react-dom'); -var ReactVersion = '19.0.0-experimental-6230622a1a-20240610'; +var ReactVersion = '19.0.0-experimental-20b6f4c0e8-20240607'; var ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE; diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.node.production.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.node.production.js index 080b75226badb..6450cc1602947 100644 --- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.node.production.js +++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.node.production.js @@ -5959,4 +5959,4 @@ exports.renderToString = function (children, options) { 'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToPipeableStream" which supports Suspense on the server' ); }; -exports.version = "19.0.0-experimental-6230622a1a-20240610"; +exports.version = "19.0.0-experimental-20b6f4c0e8-20240607"; diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.browser.development.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.browser.development.js index 47ac3fa761a15..266b033e17470 100644 --- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.browser.development.js +++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.browser.development.js @@ -17,7 +17,7 @@ if (process.env.NODE_ENV !== "production") { var React = require("next/dist/compiled/react-experimental"); var ReactDOM = require('react-dom'); -var reactDOMPackageVersion = '19.0.0-experimental-6230622a1a-20240610'; +var reactDOMPackageVersion = '19.0.0-experimental-20b6f4c0e8-20240607'; var ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE; @@ -503,8 +503,20 @@ function murmurhash3_32_gc(key, seed) { return h1 >>> 0; } +var channel = new MessageChannel(); +var taskQueue = []; + +channel.port1.onmessage = function () { + var task = taskQueue.shift(); + + if (task) { + task(); + } +}; + function scheduleWork(callback) { - callback(); + taskQueue.push(callback); + channel.port2.postMessage(null); } var VIEW_SIZE = 2048; var currentView = null; diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.browser.production.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.browser.production.js index 725e15419d634..39d572e1a6f6f 100644 --- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.browser.production.js +++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.browser.production.js @@ -125,6 +125,16 @@ function murmurhash3_32_gc(key, seed) { 4294967295; return (h1 ^ (h1 >>> 16)) >>> 0; } +var channel = new MessageChannel(), + taskQueue = []; +channel.port1.onmessage = function () { + var task = taskQueue.shift(); + task && task(); +}; +function scheduleWork(callback) { + taskQueue.push(callback); + channel.port2.postMessage(null); +} var currentView = null, writtenBytes = 0; function writeChunk(destination, chunk) { @@ -4035,7 +4045,9 @@ function pingTask(request, task) { request.pingedTasks.push(task); 1 === request.pingedTasks.length && ((request.flushScheduled = null !== request.destination), - performWork(request)); + scheduleWork(function () { + return performWork(request); + })); } function createSuspenseBoundary(request, fallbackAbortableTasks) { return { @@ -6246,22 +6258,25 @@ function flushCompletedQueues(request, destination) { } function startWork(request) { request.flushScheduled = null !== request.destination; - performWork(request); + scheduleWork(function () { + return performWork(request); + }); null === request.trackedPostpones && - safelyEmitEarlyPreloads(request, 0 === request.pendingRootTasks); + scheduleWork(function () { + safelyEmitEarlyPreloads(request, 0 === request.pendingRootTasks); + }); } function enqueueFlush(request) { - if ( - !1 === request.flushScheduled && + !1 === request.flushScheduled && 0 === request.pingedTasks.length && - null !== request.destination - ) { - request.flushScheduled = !0; - var destination = request.destination; - destination - ? flushCompletedQueues(request, destination) - : (request.flushScheduled = !1); - } + null !== request.destination && + ((request.flushScheduled = !0), + scheduleWork(function () { + var destination = request.destination; + destination + ? flushCompletedQueues(request, destination) + : (request.flushScheduled = !1); + })); } function startFlowing(request, destination) { if (1 === request.status) @@ -6345,12 +6360,12 @@ function getPostponedState(request) { } function ensureCorrectIsomorphicReactVersion() { var isomorphicReactPackageVersion = React.version; - if ("19.0.0-experimental-6230622a1a-20240610" !== isomorphicReactPackageVersion) + if ("19.0.0-experimental-20b6f4c0e8-20240607" !== isomorphicReactPackageVersion) throw Error( formatProdErrorMessage( 527, isomorphicReactPackageVersion, - "19.0.0-experimental-6230622a1a-20240610" + "19.0.0-experimental-20b6f4c0e8-20240607" ) ); } @@ -6555,4 +6570,4 @@ exports.resume = function (children, postponedState, options) { startWork(request); }); }; -exports.version = "19.0.0-experimental-6230622a1a-20240610"; +exports.version = "19.0.0-experimental-20b6f4c0e8-20240607"; diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.bun.production.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.bun.production.js index 84cc171c78b82..361f946fef0b5 100644 --- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.bun.production.js +++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.bun.production.js @@ -3569,7 +3569,9 @@ function pingTask(request, task) { request.pingedTasks.push(task); 1 === request.pingedTasks.length && ((request.flushScheduled = null !== request.destination), - performWork(request)); + setTimeout(function () { + return performWork(request); + }, 0)); } function createSuspenseBoundary(request, fallbackAbortableTasks) { return { @@ -5818,18 +5820,27 @@ function flushCompletedQueues(request, destination) { : flushBuffered(destination); } } +function startWork(request) { + request.flushScheduled = null !== request.destination; + setTimeout(function () { + return performWork(request); + }, 0); + null === request.trackedPostpones && + setTimeout(function () { + safelyEmitEarlyPreloads(request, 0 === request.pendingRootTasks); + }, 0); +} function enqueueFlush(request) { - if ( - !1 === request.flushScheduled && + !1 === request.flushScheduled && 0 === request.pingedTasks.length && - null !== request.destination - ) { - request.flushScheduled = !0; - var destination = request.destination; - destination - ? flushCompletedQueues(request, destination) - : (request.flushScheduled = !1); - } + null !== request.destination && + ((request.flushScheduled = !0), + setTimeout(function () { + var destination = request.destination; + destination + ? flushCompletedQueues(request, destination) + : (request.flushScheduled = !1); + }, 0)); } function abort(request, reason) { try { @@ -5864,13 +5875,13 @@ function addToReplayParent(node, parentKeyPath, trackedPostpones) { } var isomorphicReactPackageVersion$jscomp$inline_800 = React.version; if ( - "19.0.0-experimental-6230622a1a-20240610" !== + "19.0.0-experimental-20b6f4c0e8-20240607" !== isomorphicReactPackageVersion$jscomp$inline_800 ) throw Error( 'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n - react: ' + (isomorphicReactPackageVersion$jscomp$inline_800 + - "\n - react-dom: 19.0.0-experimental-6230622a1a-20240610\nLearn more: https://react.dev/warnings/version-mismatch") + "\n - react-dom: 19.0.0-experimental-20b6f4c0e8-20240607\nLearn more: https://react.dev/warnings/version-mismatch") ); exports.renderToReadableStream = function (children, options) { return new Promise(function (resolve, reject) { @@ -5955,10 +5966,7 @@ exports.renderToReadableStream = function (children, options) { signal.addEventListener("abort", listener); } } - request.flushScheduled = null !== request.destination; - performWork(request); - null === request.trackedPostpones && - safelyEmitEarlyPreloads(request, 0 === request.pendingRootTasks); + startWork(request); }); }; -exports.version = "19.0.0-experimental-6230622a1a-20240610"; +exports.version = "19.0.0-experimental-20b6f4c0e8-20240607"; diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.edge.development.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.edge.development.js index 0cb90ebfd3c7b..8f8886e02a45a 100644 --- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.edge.development.js +++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.edge.development.js @@ -17,7 +17,7 @@ if (process.env.NODE_ENV !== "production") { var React = require("next/dist/compiled/react-experimental"); var ReactDOM = require('react-dom'); -var reactDOMPackageVersion = '19.0.0-experimental-6230622a1a-20240610'; +var reactDOMPackageVersion = '19.0.0-experimental-20b6f4c0e8-20240607'; var ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE; diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.edge.production.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.edge.production.js index 3b96678ec3d29..c56d60e3f1e7b 100644 --- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.edge.production.js +++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.edge.production.js @@ -6468,11 +6468,11 @@ function getPostponedState(request) { } function ensureCorrectIsomorphicReactVersion() { var isomorphicReactPackageVersion = React.version; - if ("19.0.0-experimental-6230622a1a-20240610" !== isomorphicReactPackageVersion) + if ("19.0.0-experimental-20b6f4c0e8-20240607" !== isomorphicReactPackageVersion) throw Error( 'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n - react: ' + (isomorphicReactPackageVersion + - "\n - react-dom: 19.0.0-experimental-6230622a1a-20240610\nLearn more: https://react.dev/warnings/version-mismatch") + "\n - react-dom: 19.0.0-experimental-20b6f4c0e8-20240607\nLearn more: https://react.dev/warnings/version-mismatch") ); } ensureCorrectIsomorphicReactVersion(); @@ -6676,4 +6676,4 @@ exports.resume = function (children, postponedState, options) { startWork(request); }); }; -exports.version = "19.0.0-experimental-6230622a1a-20240610"; +exports.version = "19.0.0-experimental-20b6f4c0e8-20240607"; diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.node.development.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.node.development.js index 18c0609458ce4..89b64a86971da 100644 --- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.node.development.js +++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.node.development.js @@ -21,7 +21,7 @@ var async_hooks = require('async_hooks'); var ReactDOM = require('react-dom'); var stream = require('stream'); -var reactDOMPackageVersion = '19.0.0-experimental-6230622a1a-20240610'; +var reactDOMPackageVersion = '19.0.0-experimental-20b6f4c0e8-20240607'; var ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE; diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.node.production.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.node.production.js index 4d1d54adaed25..17a6c08331c4f 100644 --- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.node.production.js +++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.node.production.js @@ -6263,11 +6263,11 @@ function getPostponedState(request) { } function ensureCorrectIsomorphicReactVersion() { var isomorphicReactPackageVersion = React.version; - if ("19.0.0-experimental-6230622a1a-20240610" !== isomorphicReactPackageVersion) + if ("19.0.0-experimental-20b6f4c0e8-20240607" !== isomorphicReactPackageVersion) throw Error( 'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n - react: ' + (isomorphicReactPackageVersion + - "\n - react-dom: 19.0.0-experimental-6230622a1a-20240610\nLearn more: https://react.dev/warnings/version-mismatch") + "\n - react-dom: 19.0.0-experimental-20b6f4c0e8-20240607\nLearn more: https://react.dev/warnings/version-mismatch") ); } ensureCorrectIsomorphicReactVersion(); @@ -6548,4 +6548,4 @@ exports.resumeToPipeableStream = function (children, postponedState, options) { } }; }; -exports.version = "19.0.0-experimental-6230622a1a-20240610"; +exports.version = "19.0.0-experimental-20b6f4c0e8-20240607"; diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-unstable_testing.development.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-unstable_testing.development.js index 0613fd5ed9ec5..75a76766a21be 100644 --- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-unstable_testing.development.js +++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-unstable_testing.development.js @@ -11676,7 +11676,7 @@ var ownerHasKeyUseWarning; var ownerHasFunctionTypeWarning; var ownerHasSymbolTypeWarning; -var warnForMissingKey = function (child, returnFiber) {}; +var warnForMissingKey = function (returnFiber, workInProgress, child) {}; { didWarnAboutMaps = false; @@ -11691,7 +11691,7 @@ var warnForMissingKey = function (child, returnFiber) {}; ownerHasFunctionTypeWarning = {}; ownerHasSymbolTypeWarning = {}; - warnForMissingKey = function (child, returnFiber) { + warnForMissingKey = function (returnFiber, workInProgress, child) { if (child === null || typeof child !== 'object') { return; } @@ -11750,15 +11750,9 @@ var warnForMissingKey = function (child, returnFiber) {}; // 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 () { + runWithFiberInDEV(workInProgress, 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); }); }; @@ -12355,7 +12349,7 @@ function createChildReconciler(shouldTrackSideEffects) { */ - function warnOnInvalidKey(child, knownKeys, returnFiber) { + function warnOnInvalidKey(returnFiber, workInProgress, child, knownKeys) { { if (typeof child !== 'object' || child === null) { return knownKeys; @@ -12364,7 +12358,7 @@ function createChildReconciler(shouldTrackSideEffects) { switch (child.$$typeof) { case REACT_ELEMENT_TYPE: case REACT_PORTAL_TYPE: - warnForMissingKey(child, returnFiber); + warnForMissingKey(returnFiber, workInProgress, child); var key = child.key; if (typeof key !== 'string') { @@ -12382,8 +12376,9 @@ function createChildReconciler(shouldTrackSideEffects) { break; } - error('Encountered two children with the same key, `%s`. ' + 'Keys should be unique so that components maintain their identity ' + 'across updates. Non-unique keys may cause children to be ' + 'duplicated and/or omitted — the behavior is unsupported and ' + 'could change in a future version.', key); - + runWithFiberInDEV(workInProgress, function () { + error('Encountered two children with the same key, `%s`. ' + 'Keys should be unique so that components maintain their identity ' + 'across updates. Non-unique keys may cause children to be ' + 'duplicated and/or omitted — the behavior is unsupported and ' + 'could change in a future version.', key); + }); break; case REACT_LAZY_TYPE: @@ -12394,7 +12389,7 @@ function createChildReconciler(shouldTrackSideEffects) { resolvedChild = callLazyInitInDEV(child); } - warnOnInvalidKey(resolvedChild, knownKeys, returnFiber); + warnOnInvalidKey(returnFiber, workInProgress, resolvedChild, knownKeys); break; } } @@ -12419,16 +12414,7 @@ function createChildReconciler(shouldTrackSideEffects) { // (adding everything to a Map) in for every insert/move. // If you change this code, also update reconcileChildrenIterator() which // uses the same algorithm. - { - // First, validate keys. - var knownKeys = null; - - for (var i = 0; i < newChildren.length; i++) { - var child = newChildren[i]; - knownKeys = warnOnInvalidKey(child, knownKeys, returnFiber); - } - } - + var knownKeys = null; var resultingFirstChild = null; var previousNewFiber = null; var oldFiber = currentFirstChild; @@ -12458,6 +12444,10 @@ function createChildReconciler(shouldTrackSideEffects) { break; } + { + knownKeys = warnOnInvalidKey(returnFiber, newFiber, newChildren[newIdx], knownKeys); + } + if (shouldTrackSideEffects) { if (oldFiber && newFiber.alternate === null) { // We matched the slot, but we didn't reuse the existing fiber, so we @@ -12505,6 +12495,10 @@ function createChildReconciler(shouldTrackSideEffects) { continue; } + { + knownKeys = warnOnInvalidKey(returnFiber, _newFiber, newChildren[newIdx], knownKeys); + } + lastPlacedIndex = placeChild(_newFiber, lastPlacedIndex, newIdx); if (previousNewFiber === null) { @@ -12532,6 +12526,10 @@ function createChildReconciler(shouldTrackSideEffects) { var _newFiber2 = updateFromMap(existingChildren, returnFiber, newIdx, newChildren[newIdx], lanes, debugInfo); if (_newFiber2 !== null) { + { + knownKeys = warnOnInvalidKey(returnFiber, _newFiber2, newChildren[newIdx], knownKeys); + } + if (shouldTrackSideEffects) { if (_newFiber2.alternate !== null) { // The new fiber is a work in progress, but if there exists a @@ -12663,11 +12661,7 @@ function createChildReconciler(shouldTrackSideEffects) { var knownKeys = null; var step = newChildren.next(); - { - knownKeys = warnOnInvalidKey(step.value, knownKeys, returnFiber); - } - - for (; oldFiber !== null && !step.done; newIdx++, step = newChildren.next(), knownKeys = warnOnInvalidKey(step.value, knownKeys, returnFiber) ) { + for (; oldFiber !== null && !step.done; newIdx++, step = newChildren.next()) { if (oldFiber.index > newIdx) { nextOldFiber = oldFiber; oldFiber = null; @@ -12689,6 +12683,10 @@ function createChildReconciler(shouldTrackSideEffects) { break; } + { + knownKeys = warnOnInvalidKey(returnFiber, newFiber, step.value, knownKeys); + } + if (shouldTrackSideEffects) { if (oldFiber && newFiber.alternate === null) { // We matched the slot, but we didn't reuse the existing fiber, so we @@ -12729,13 +12727,17 @@ function createChildReconciler(shouldTrackSideEffects) { if (oldFiber === null) { // If we don't have any more existing children we can choose a fast path // since the rest will all be insertions. - for (; !step.done; newIdx++, step = newChildren.next(), knownKeys = warnOnInvalidKey(step.value, knownKeys, returnFiber) ) { + for (; !step.done; newIdx++, step = newChildren.next()) { var _newFiber3 = createChild(returnFiber, step.value, lanes, debugInfo); if (_newFiber3 === null) { continue; } + { + knownKeys = warnOnInvalidKey(returnFiber, _newFiber3, step.value, knownKeys); + } + lastPlacedIndex = placeChild(_newFiber3, lastPlacedIndex, newIdx); if (previousNewFiber === null) { @@ -12759,10 +12761,14 @@ function createChildReconciler(shouldTrackSideEffects) { var existingChildren = mapRemainingChildren(oldFiber); // Keep scanning and use the map to restore deleted items as moves. - for (; !step.done; newIdx++, step = newChildren.next(), knownKeys = warnOnInvalidKey(step.value, knownKeys, returnFiber) ) { + for (; !step.done; newIdx++, step = newChildren.next()) { var _newFiber4 = updateFromMap(existingChildren, returnFiber, newIdx, step.value, lanes, debugInfo); if (_newFiber4 !== null) { + { + knownKeys = warnOnInvalidKey(returnFiber, _newFiber4, step.value, knownKeys); + } + if (shouldTrackSideEffects) { if (_newFiber4.alternate !== null) { // The new fiber is a work in progress, but if there exists a @@ -37599,7 +37605,7 @@ identifierPrefix, onUncaughtError, onCaughtError, onRecoverableError, transition return root; } -var ReactVersion = '19.0.0-experimental-6230622a1a-20240610'; +var ReactVersion = '19.0.0-experimental-20b6f4c0e8-20240607'; // Might add PROFILE later. diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-unstable_testing.production.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-unstable_testing.production.js index 9d61431c8aea1..0cb3017479322 100644 --- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-unstable_testing.production.js +++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom-unstable_testing.production.js @@ -3251,7 +3251,7 @@ function createChildReconciler(shouldTrackSideEffects) { nextOldFiber = null, step = newChildren.next(); null !== oldFiber && !step.done; - newIdx++, step = newChildren.next(), null + newIdx++, step = newChildren.next() ) { oldFiber.index > newIdx ? ((nextOldFiber = oldFiber), (oldFiber = null)) @@ -3279,7 +3279,7 @@ function createChildReconciler(shouldTrackSideEffects) { resultingFirstChild ); if (null === oldFiber) { - for (; !step.done; newIdx++, step = newChildren.next(), null) + for (; !step.done; newIdx++, step = newChildren.next()) (step = createChild(returnFiber, step.value, lanes)), null !== step && ((currentFirstChild = placeChild(step, currentFirstChild, newIdx)), @@ -3293,7 +3293,7 @@ function createChildReconciler(shouldTrackSideEffects) { for ( oldFiber = mapRemainingChildren(oldFiber); !step.done; - newIdx++, step = newChildren.next(), null + newIdx++, step = newChildren.next() ) (step = updateFromMap(oldFiber, returnFiber, newIdx, step.value, lanes)), null !== step && @@ -15168,14 +15168,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) { }; var isomorphicReactPackageVersion$jscomp$inline_1660 = React.version; if ( - "19.0.0-experimental-6230622a1a-20240610" !== + "19.0.0-experimental-20b6f4c0e8-20240607" !== isomorphicReactPackageVersion$jscomp$inline_1660 ) throw Error( formatProdErrorMessage( 527, isomorphicReactPackageVersion$jscomp$inline_1660, - "19.0.0-experimental-6230622a1a-20240610" + "19.0.0-experimental-20b6f4c0e8-20240607" ) ); ReactDOMSharedInternals.findDOMNode = function (componentOrElement) { @@ -15194,7 +15194,7 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) { var devToolsConfig$jscomp$inline_1667 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "19.0.0-experimental-6230622a1a-20240610", + version: "19.0.0-experimental-20b6f4c0e8-20240607", rendererPackageName: "react-dom" }; var internals$jscomp$inline_2050 = { @@ -15224,7 +15224,7 @@ var internals$jscomp$inline_2050 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "19.0.0-experimental-6230622a1a-20240610" + reconcilerVersion: "19.0.0-experimental-20b6f4c0e8-20240607" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2051 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -15481,4 +15481,4 @@ exports.observeVisibleRects = function ( } }; }; -exports.version = "19.0.0-experimental-6230622a1a-20240610"; +exports.version = "19.0.0-experimental-20b6f4c0e8-20240607"; diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom.development.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom.development.js index 197c5b33a7c0c..b51a50aca1bf2 100644 --- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom.development.js +++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom.development.js @@ -144,7 +144,7 @@ var Internals = { findDOMNode: null }; -var ReactVersion = '19.0.0-experimental-6230622a1a-20240610'; +var ReactVersion = '19.0.0-experimental-20b6f4c0e8-20240607'; /** * HTML nodeType values that represent the type of the node diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom.production.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom.production.js index 9e324072ab49c..023aacc6fb934 100644 --- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom.production.js +++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom.production.js @@ -206,4 +206,4 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactSharedInternals.H.useHostTransitionStatus(); }; -exports.version = "19.0.0-experimental-6230622a1a-20240610"; +exports.version = "19.0.0-experimental-20b6f4c0e8-20240607"; diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom.react-server.development.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom.react-server.development.js index 1a32afc1da3c1..bd9adb86e5ee6 100644 --- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom.react-server.development.js +++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom.react-server.development.js @@ -16,7 +16,7 @@ if (process.env.NODE_ENV !== "production") { var React = require("next/dist/compiled/react-experimental"); -var ReactVersion = '19.0.0-experimental-6230622a1a-20240610'; +var ReactVersion = '19.0.0-experimental-20b6f4c0e8-20240607'; var ReactSharedInternalsServer = // $FlowFixMe: It's defined in the one we resolve to. React.__SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE; diff --git a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom.react-server.production.js b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom.react-server.production.js index 456b1c2aa9462..fdcbcd604a1bb 100644 --- a/packages/next/src/compiled/react-dom-experimental/cjs/react-dom.react-server.production.js +++ b/packages/next/src/compiled/react-dom-experimental/cjs/react-dom.react-server.production.js @@ -151,4 +151,4 @@ exports.preloadModule = function (href, options) { }); } else Internals.d.m(href); }; -exports.version = "19.0.0-experimental-6230622a1a-20240610"; +exports.version = "19.0.0-experimental-20b6f4c0e8-20240607"; diff --git a/packages/next/src/compiled/react-dom-experimental/package.json b/packages/next/src/compiled/react-dom-experimental/package.json index 0cc406b2d32b9..97256abe270e8 100644 --- a/packages/next/src/compiled/react-dom-experimental/package.json +++ b/packages/next/src/compiled/react-dom-experimental/package.json @@ -72,10 +72,10 @@ "./package.json": "./package.json" }, "dependencies": { - "scheduler": "0.0.0-experimental-6230622a1a-20240610" + "scheduler": "0.0.0-experimental-20b6f4c0e8-20240607" }, "peerDependencies": { - "react": "0.0.0-experimental-6230622a1a-20240610" + "react": "0.0.0-experimental-20b6f4c0e8-20240607" }, "browser": { "./server.js": "./server.browser.js", diff --git a/packages/next/src/compiled/react-dom/cjs/react-dom-client.development.js b/packages/next/src/compiled/react-dom/cjs/react-dom-client.development.js index 4cc92bdf21d53..dde27a3aeaf1f 100644 --- a/packages/next/src/compiled/react-dom/cjs/react-dom-client.development.js +++ b/packages/next/src/compiled/react-dom/cjs/react-dom-client.development.js @@ -11289,7 +11289,7 @@ var ownerHasKeyUseWarning; var ownerHasFunctionTypeWarning; var ownerHasSymbolTypeWarning; -var warnForMissingKey = function (child, returnFiber) {}; +var warnForMissingKey = function (returnFiber, workInProgress, child) {}; { didWarnAboutMaps = false; @@ -11304,7 +11304,7 @@ var warnForMissingKey = function (child, returnFiber) {}; ownerHasFunctionTypeWarning = {}; ownerHasSymbolTypeWarning = {}; - warnForMissingKey = function (child, returnFiber) { + warnForMissingKey = function (returnFiber, workInProgress, child) { if (child === null || typeof child !== 'object') { return; } @@ -11363,15 +11363,9 @@ var warnForMissingKey = function (child, returnFiber) {}; // 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 () { + runWithFiberInDEV(workInProgress, 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); }); }; @@ -11968,7 +11962,7 @@ function createChildReconciler(shouldTrackSideEffects) { */ - function warnOnInvalidKey(child, knownKeys, returnFiber) { + function warnOnInvalidKey(returnFiber, workInProgress, child, knownKeys) { { if (typeof child !== 'object' || child === null) { return knownKeys; @@ -11977,7 +11971,7 @@ function createChildReconciler(shouldTrackSideEffects) { switch (child.$$typeof) { case REACT_ELEMENT_TYPE: case REACT_PORTAL_TYPE: - warnForMissingKey(child, returnFiber); + warnForMissingKey(returnFiber, workInProgress, child); var key = child.key; if (typeof key !== 'string') { @@ -11995,8 +11989,9 @@ function createChildReconciler(shouldTrackSideEffects) { break; } - error('Encountered two children with the same key, `%s`. ' + 'Keys should be unique so that components maintain their identity ' + 'across updates. Non-unique keys may cause children to be ' + 'duplicated and/or omitted — the behavior is unsupported and ' + 'could change in a future version.', key); - + runWithFiberInDEV(workInProgress, function () { + error('Encountered two children with the same key, `%s`. ' + 'Keys should be unique so that components maintain their identity ' + 'across updates. Non-unique keys may cause children to be ' + 'duplicated and/or omitted — the behavior is unsupported and ' + 'could change in a future version.', key); + }); break; case REACT_LAZY_TYPE: @@ -12007,7 +12002,7 @@ function createChildReconciler(shouldTrackSideEffects) { resolvedChild = callLazyInitInDEV(child); } - warnOnInvalidKey(resolvedChild, knownKeys, returnFiber); + warnOnInvalidKey(returnFiber, workInProgress, resolvedChild, knownKeys); break; } } @@ -12032,16 +12027,7 @@ function createChildReconciler(shouldTrackSideEffects) { // (adding everything to a Map) in for every insert/move. // If you change this code, also update reconcileChildrenIterator() which // uses the same algorithm. - { - // First, validate keys. - var knownKeys = null; - - for (var i = 0; i < newChildren.length; i++) { - var child = newChildren[i]; - knownKeys = warnOnInvalidKey(child, knownKeys, returnFiber); - } - } - + var knownKeys = null; var resultingFirstChild = null; var previousNewFiber = null; var oldFiber = currentFirstChild; @@ -12071,6 +12057,10 @@ function createChildReconciler(shouldTrackSideEffects) { break; } + { + knownKeys = warnOnInvalidKey(returnFiber, newFiber, newChildren[newIdx], knownKeys); + } + if (shouldTrackSideEffects) { if (oldFiber && newFiber.alternate === null) { // We matched the slot, but we didn't reuse the existing fiber, so we @@ -12118,6 +12108,10 @@ function createChildReconciler(shouldTrackSideEffects) { continue; } + { + knownKeys = warnOnInvalidKey(returnFiber, _newFiber, newChildren[newIdx], knownKeys); + } + lastPlacedIndex = placeChild(_newFiber, lastPlacedIndex, newIdx); if (previousNewFiber === null) { @@ -12145,6 +12139,10 @@ function createChildReconciler(shouldTrackSideEffects) { var _newFiber2 = updateFromMap(existingChildren, returnFiber, newIdx, newChildren[newIdx], lanes, debugInfo); if (_newFiber2 !== null) { + { + knownKeys = warnOnInvalidKey(returnFiber, _newFiber2, newChildren[newIdx], knownKeys); + } + if (shouldTrackSideEffects) { if (_newFiber2.alternate !== null) { // The new fiber is a work in progress, but if there exists a @@ -12239,11 +12237,7 @@ function createChildReconciler(shouldTrackSideEffects) { var knownKeys = null; var step = newChildren.next(); - { - knownKeys = warnOnInvalidKey(step.value, knownKeys, returnFiber); - } - - for (; oldFiber !== null && !step.done; newIdx++, step = newChildren.next(), knownKeys = warnOnInvalidKey(step.value, knownKeys, returnFiber) ) { + for (; oldFiber !== null && !step.done; newIdx++, step = newChildren.next()) { if (oldFiber.index > newIdx) { nextOldFiber = oldFiber; oldFiber = null; @@ -12265,6 +12259,10 @@ function createChildReconciler(shouldTrackSideEffects) { break; } + { + knownKeys = warnOnInvalidKey(returnFiber, newFiber, step.value, knownKeys); + } + if (shouldTrackSideEffects) { if (oldFiber && newFiber.alternate === null) { // We matched the slot, but we didn't reuse the existing fiber, so we @@ -12305,13 +12303,17 @@ function createChildReconciler(shouldTrackSideEffects) { if (oldFiber === null) { // If we don't have any more existing children we can choose a fast path // since the rest will all be insertions. - for (; !step.done; newIdx++, step = newChildren.next(), knownKeys = warnOnInvalidKey(step.value, knownKeys, returnFiber) ) { + for (; !step.done; newIdx++, step = newChildren.next()) { var _newFiber3 = createChild(returnFiber, step.value, lanes, debugInfo); if (_newFiber3 === null) { continue; } + { + knownKeys = warnOnInvalidKey(returnFiber, _newFiber3, step.value, knownKeys); + } + lastPlacedIndex = placeChild(_newFiber3, lastPlacedIndex, newIdx); if (previousNewFiber === null) { @@ -12335,10 +12337,14 @@ function createChildReconciler(shouldTrackSideEffects) { var existingChildren = mapRemainingChildren(oldFiber); // Keep scanning and use the map to restore deleted items as moves. - for (; !step.done; newIdx++, step = newChildren.next(), knownKeys = warnOnInvalidKey(step.value, knownKeys, returnFiber) ) { + for (; !step.done; newIdx++, step = newChildren.next()) { var _newFiber4 = updateFromMap(existingChildren, returnFiber, newIdx, step.value, lanes, debugInfo); if (_newFiber4 !== null) { + { + knownKeys = warnOnInvalidKey(returnFiber, _newFiber4, step.value, knownKeys); + } + if (shouldTrackSideEffects) { if (_newFiber4.alternate !== null) { // The new fiber is a work in progress, but if there exists a @@ -36434,7 +36440,7 @@ identifierPrefix, onUncaughtError, onCaughtError, onRecoverableError, transition return root; } -var ReactVersion = '19.0.0-rc-6230622a1a-20240610'; +var ReactVersion = '19.0.0-rc-20b6f4c0e8-20240607'; // Might add PROFILE later. diff --git a/packages/next/src/compiled/react-dom/cjs/react-dom-client.production.js b/packages/next/src/compiled/react-dom/cjs/react-dom-client.production.js index 52d5e3c749149..6fccc372705d5 100644 --- a/packages/next/src/compiled/react-dom/cjs/react-dom-client.production.js +++ b/packages/next/src/compiled/react-dom/cjs/react-dom-client.production.js @@ -3082,7 +3082,7 @@ function createChildReconciler(shouldTrackSideEffects) { nextOldFiber = null, step = newChildren.next(); null !== oldFiber && !step.done; - newIdx++, step = newChildren.next(), null + newIdx++, step = newChildren.next() ) { oldFiber.index > newIdx ? ((nextOldFiber = oldFiber), (oldFiber = null)) @@ -3110,7 +3110,7 @@ function createChildReconciler(shouldTrackSideEffects) { resultingFirstChild ); if (null === oldFiber) { - for (; !step.done; newIdx++, step = newChildren.next(), null) + for (; !step.done; newIdx++, step = newChildren.next()) (step = createChild(returnFiber, step.value, lanes)), null !== step && ((currentFirstChild = placeChild(step, currentFirstChild, newIdx)), @@ -3124,7 +3124,7 @@ function createChildReconciler(shouldTrackSideEffects) { for ( oldFiber = mapRemainingChildren(oldFiber); !step.done; - newIdx++, step = newChildren.next(), null + newIdx++, step = newChildren.next() ) (step = updateFromMap(oldFiber, returnFiber, newIdx, step.value, lanes)), null !== step && @@ -14633,14 +14633,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) { }; var isomorphicReactPackageVersion$jscomp$inline_1651 = React.version; if ( - "19.0.0-rc-6230622a1a-20240610" !== + "19.0.0-rc-20b6f4c0e8-20240607" !== isomorphicReactPackageVersion$jscomp$inline_1651 ) throw Error( formatProdErrorMessage( 527, isomorphicReactPackageVersion$jscomp$inline_1651, - "19.0.0-rc-6230622a1a-20240610" + "19.0.0-rc-20b6f4c0e8-20240607" ) ); ReactDOMSharedInternals.findDOMNode = function (componentOrElement) { @@ -14659,7 +14659,7 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) { var devToolsConfig$jscomp$inline_1658 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "19.0.0-rc-6230622a1a-20240610", + version: "19.0.0-rc-20b6f4c0e8-20240607", rendererPackageName: "react-dom" }; var internals$jscomp$inline_2036 = { @@ -14689,7 +14689,7 @@ var internals$jscomp$inline_2036 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "19.0.0-rc-6230622a1a-20240610" + reconcilerVersion: "19.0.0-rc-20b6f4c0e8-20240607" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2037 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -14795,4 +14795,4 @@ exports.hydrateRoot = function (container, initialChildren, options) { listenToAllSupportedEvents(container); return new ReactDOMHydrationRoot(initialChildren); }; -exports.version = "19.0.0-rc-6230622a1a-20240610"; +exports.version = "19.0.0-rc-20b6f4c0e8-20240607"; diff --git a/packages/next/src/compiled/react-dom/cjs/react-dom-profiling.development.js b/packages/next/src/compiled/react-dom/cjs/react-dom-profiling.development.js index d70e6d3421157..3cb8af5c81c83 100644 --- a/packages/next/src/compiled/react-dom/cjs/react-dom-profiling.development.js +++ b/packages/next/src/compiled/react-dom/cjs/react-dom-profiling.development.js @@ -11337,7 +11337,7 @@ var ownerHasKeyUseWarning; var ownerHasFunctionTypeWarning; var ownerHasSymbolTypeWarning; -var warnForMissingKey = function (child, returnFiber) {}; +var warnForMissingKey = function (returnFiber, workInProgress, child) {}; { didWarnAboutMaps = false; @@ -11352,7 +11352,7 @@ var warnForMissingKey = function (child, returnFiber) {}; ownerHasFunctionTypeWarning = {}; ownerHasSymbolTypeWarning = {}; - warnForMissingKey = function (child, returnFiber) { + warnForMissingKey = function (returnFiber, workInProgress, child) { if (child === null || typeof child !== 'object') { return; } @@ -11411,15 +11411,9 @@ var warnForMissingKey = function (child, returnFiber) {}; // 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 () { + runWithFiberInDEV(workInProgress, 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); }); }; @@ -12016,7 +12010,7 @@ function createChildReconciler(shouldTrackSideEffects) { */ - function warnOnInvalidKey(child, knownKeys, returnFiber) { + function warnOnInvalidKey(returnFiber, workInProgress, child, knownKeys) { { if (typeof child !== 'object' || child === null) { return knownKeys; @@ -12025,7 +12019,7 @@ function createChildReconciler(shouldTrackSideEffects) { switch (child.$$typeof) { case REACT_ELEMENT_TYPE: case REACT_PORTAL_TYPE: - warnForMissingKey(child, returnFiber); + warnForMissingKey(returnFiber, workInProgress, child); var key = child.key; if (typeof key !== 'string') { @@ -12043,8 +12037,9 @@ function createChildReconciler(shouldTrackSideEffects) { break; } - error('Encountered two children with the same key, `%s`. ' + 'Keys should be unique so that components maintain their identity ' + 'across updates. Non-unique keys may cause children to be ' + 'duplicated and/or omitted — the behavior is unsupported and ' + 'could change in a future version.', key); - + runWithFiberInDEV(workInProgress, function () { + error('Encountered two children with the same key, `%s`. ' + 'Keys should be unique so that components maintain their identity ' + 'across updates. Non-unique keys may cause children to be ' + 'duplicated and/or omitted — the behavior is unsupported and ' + 'could change in a future version.', key); + }); break; case REACT_LAZY_TYPE: @@ -12055,7 +12050,7 @@ function createChildReconciler(shouldTrackSideEffects) { resolvedChild = callLazyInitInDEV(child); } - warnOnInvalidKey(resolvedChild, knownKeys, returnFiber); + warnOnInvalidKey(returnFiber, workInProgress, resolvedChild, knownKeys); break; } } @@ -12080,16 +12075,7 @@ function createChildReconciler(shouldTrackSideEffects) { // (adding everything to a Map) in for every insert/move. // If you change this code, also update reconcileChildrenIterator() which // uses the same algorithm. - { - // First, validate keys. - var knownKeys = null; - - for (var i = 0; i < newChildren.length; i++) { - var child = newChildren[i]; - knownKeys = warnOnInvalidKey(child, knownKeys, returnFiber); - } - } - + var knownKeys = null; var resultingFirstChild = null; var previousNewFiber = null; var oldFiber = currentFirstChild; @@ -12119,6 +12105,10 @@ function createChildReconciler(shouldTrackSideEffects) { break; } + { + knownKeys = warnOnInvalidKey(returnFiber, newFiber, newChildren[newIdx], knownKeys); + } + if (shouldTrackSideEffects) { if (oldFiber && newFiber.alternate === null) { // We matched the slot, but we didn't reuse the existing fiber, so we @@ -12166,6 +12156,10 @@ function createChildReconciler(shouldTrackSideEffects) { continue; } + { + knownKeys = warnOnInvalidKey(returnFiber, _newFiber, newChildren[newIdx], knownKeys); + } + lastPlacedIndex = placeChild(_newFiber, lastPlacedIndex, newIdx); if (previousNewFiber === null) { @@ -12193,6 +12187,10 @@ function createChildReconciler(shouldTrackSideEffects) { var _newFiber2 = updateFromMap(existingChildren, returnFiber, newIdx, newChildren[newIdx], lanes, debugInfo); if (_newFiber2 !== null) { + { + knownKeys = warnOnInvalidKey(returnFiber, _newFiber2, newChildren[newIdx], knownKeys); + } + if (shouldTrackSideEffects) { if (_newFiber2.alternate !== null) { // The new fiber is a work in progress, but if there exists a @@ -12287,11 +12285,7 @@ function createChildReconciler(shouldTrackSideEffects) { var knownKeys = null; var step = newChildren.next(); - { - knownKeys = warnOnInvalidKey(step.value, knownKeys, returnFiber); - } - - for (; oldFiber !== null && !step.done; newIdx++, step = newChildren.next(), knownKeys = warnOnInvalidKey(step.value, knownKeys, returnFiber) ) { + for (; oldFiber !== null && !step.done; newIdx++, step = newChildren.next()) { if (oldFiber.index > newIdx) { nextOldFiber = oldFiber; oldFiber = null; @@ -12313,6 +12307,10 @@ function createChildReconciler(shouldTrackSideEffects) { break; } + { + knownKeys = warnOnInvalidKey(returnFiber, newFiber, step.value, knownKeys); + } + if (shouldTrackSideEffects) { if (oldFiber && newFiber.alternate === null) { // We matched the slot, but we didn't reuse the existing fiber, so we @@ -12353,13 +12351,17 @@ function createChildReconciler(shouldTrackSideEffects) { if (oldFiber === null) { // If we don't have any more existing children we can choose a fast path // since the rest will all be insertions. - for (; !step.done; newIdx++, step = newChildren.next(), knownKeys = warnOnInvalidKey(step.value, knownKeys, returnFiber) ) { + for (; !step.done; newIdx++, step = newChildren.next()) { var _newFiber3 = createChild(returnFiber, step.value, lanes, debugInfo); if (_newFiber3 === null) { continue; } + { + knownKeys = warnOnInvalidKey(returnFiber, _newFiber3, step.value, knownKeys); + } + lastPlacedIndex = placeChild(_newFiber3, lastPlacedIndex, newIdx); if (previousNewFiber === null) { @@ -12383,10 +12385,14 @@ function createChildReconciler(shouldTrackSideEffects) { var existingChildren = mapRemainingChildren(oldFiber); // Keep scanning and use the map to restore deleted items as moves. - for (; !step.done; newIdx++, step = newChildren.next(), knownKeys = warnOnInvalidKey(step.value, knownKeys, returnFiber) ) { + for (; !step.done; newIdx++, step = newChildren.next()) { var _newFiber4 = updateFromMap(existingChildren, returnFiber, newIdx, step.value, lanes, debugInfo); if (_newFiber4 !== null) { + { + knownKeys = warnOnInvalidKey(returnFiber, _newFiber4, step.value, knownKeys); + } + if (shouldTrackSideEffects) { if (_newFiber4.alternate !== null) { // The new fiber is a work in progress, but if there exists a @@ -36482,7 +36488,7 @@ identifierPrefix, onUncaughtError, onCaughtError, onRecoverableError, transition return root; } -var ReactVersion = '19.0.0-rc-6230622a1a-20240610'; +var ReactVersion = '19.0.0-rc-20b6f4c0e8-20240607'; function createPortal$1(children, containerInfo, // TODO: figure out the API for cross-renderer implementation. implementation) { diff --git a/packages/next/src/compiled/react-dom/cjs/react-dom-profiling.profiling.js b/packages/next/src/compiled/react-dom/cjs/react-dom-profiling.profiling.js index 494d4a867b0ed..db99961f5d56c 100644 --- a/packages/next/src/compiled/react-dom/cjs/react-dom-profiling.profiling.js +++ b/packages/next/src/compiled/react-dom/cjs/react-dom-profiling.profiling.js @@ -3204,7 +3204,7 @@ function createChildReconciler(shouldTrackSideEffects) { nextOldFiber = null, step = newChildren.next(); null !== oldFiber && !step.done; - newIdx++, step = newChildren.next(), null + newIdx++, step = newChildren.next() ) { oldFiber.index > newIdx ? ((nextOldFiber = oldFiber), (oldFiber = null)) @@ -3232,7 +3232,7 @@ function createChildReconciler(shouldTrackSideEffects) { resultingFirstChild ); if (null === oldFiber) { - for (; !step.done; newIdx++, step = newChildren.next(), null) + for (; !step.done; newIdx++, step = newChildren.next()) (step = createChild(returnFiber, step.value, lanes)), null !== step && ((currentFirstChild = placeChild(step, currentFirstChild, newIdx)), @@ -3246,7 +3246,7 @@ function createChildReconciler(shouldTrackSideEffects) { for ( oldFiber = mapRemainingChildren(oldFiber); !step.done; - newIdx++, step = newChildren.next(), null + newIdx++, step = newChildren.next() ) (step = updateFromMap(oldFiber, returnFiber, newIdx, step.value, lanes)), null !== step && @@ -15343,14 +15343,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) { }; var isomorphicReactPackageVersion$jscomp$inline_1739 = React.version; if ( - "19.0.0-rc-6230622a1a-20240610" !== + "19.0.0-rc-20b6f4c0e8-20240607" !== isomorphicReactPackageVersion$jscomp$inline_1739 ) throw Error( formatProdErrorMessage( 527, isomorphicReactPackageVersion$jscomp$inline_1739, - "19.0.0-rc-6230622a1a-20240610" + "19.0.0-rc-20b6f4c0e8-20240607" ) ); ReactDOMSharedInternals.findDOMNode = function (componentOrElement) { @@ -15369,7 +15369,7 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) { var devToolsConfig$jscomp$inline_1746 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "19.0.0-rc-6230622a1a-20240610", + version: "19.0.0-rc-20b6f4c0e8-20240607", rendererPackageName: "react-dom" }; (function (internals) { @@ -15412,7 +15412,7 @@ var devToolsConfig$jscomp$inline_1746 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "19.0.0-rc-6230622a1a-20240610" + reconcilerVersion: "19.0.0-rc-20b6f4c0e8-20240607" }); function noop() {} function getCrossOriginStringAs(as, input) { @@ -15666,7 +15666,7 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactSharedInternals.H.useHostTransitionStatus(); }; -exports.version = "19.0.0-rc-6230622a1a-20240610"; +exports.version = "19.0.0-rc-20b6f4c0e8-20240607"; "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && diff --git a/packages/next/src/compiled/react-dom/cjs/react-dom-server-legacy.browser.development.js b/packages/next/src/compiled/react-dom/cjs/react-dom-server-legacy.browser.development.js index fae26ddcab7bc..c2b232dcb9af7 100644 --- a/packages/next/src/compiled/react-dom/cjs/react-dom-server-legacy.browser.development.js +++ b/packages/next/src/compiled/react-dom/cjs/react-dom-server-legacy.browser.development.js @@ -17,7 +17,7 @@ if (process.env.NODE_ENV !== "production") { var React = require("next/dist/compiled/react"); var ReactDOM = require('react-dom'); -var ReactVersion = '19.0.0-rc-6230622a1a-20240610'; +var ReactVersion = '19.0.0-rc-20b6f4c0e8-20240607'; var ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE; diff --git a/packages/next/src/compiled/react-dom/cjs/react-dom-server-legacy.browser.production.js b/packages/next/src/compiled/react-dom/cjs/react-dom-server-legacy.browser.production.js index 3a49cf59b7cd5..2ec88992dca2e 100644 --- a/packages/next/src/compiled/react-dom/cjs/react-dom-server-legacy.browser.production.js +++ b/packages/next/src/compiled/react-dom/cjs/react-dom-server-legacy.browser.production.js @@ -5469,4 +5469,4 @@ exports.renderToString = function (children, options) { 'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server' ); }; -exports.version = "19.0.0-rc-6230622a1a-20240610"; +exports.version = "19.0.0-rc-20b6f4c0e8-20240607"; diff --git a/packages/next/src/compiled/react-dom/cjs/react-dom-server-legacy.node.development.js b/packages/next/src/compiled/react-dom/cjs/react-dom-server-legacy.node.development.js index 946c5e4474556..16179809429d2 100644 --- a/packages/next/src/compiled/react-dom/cjs/react-dom-server-legacy.node.development.js +++ b/packages/next/src/compiled/react-dom/cjs/react-dom-server-legacy.node.development.js @@ -17,7 +17,7 @@ if (process.env.NODE_ENV !== "production") { var React = require("next/dist/compiled/react"); var ReactDOM = require('react-dom'); -var ReactVersion = '19.0.0-rc-6230622a1a-20240610'; +var ReactVersion = '19.0.0-rc-20b6f4c0e8-20240607'; var ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE; diff --git a/packages/next/src/compiled/react-dom/cjs/react-dom-server-legacy.node.production.js b/packages/next/src/compiled/react-dom/cjs/react-dom-server-legacy.node.production.js index 3211d1bf49077..87c72ecb0ec25 100644 --- a/packages/next/src/compiled/react-dom/cjs/react-dom-server-legacy.node.production.js +++ b/packages/next/src/compiled/react-dom/cjs/react-dom-server-legacy.node.production.js @@ -5551,4 +5551,4 @@ exports.renderToString = function (children, options) { 'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToPipeableStream" which supports Suspense on the server' ); }; -exports.version = "19.0.0-rc-6230622a1a-20240610"; +exports.version = "19.0.0-rc-20b6f4c0e8-20240607"; diff --git a/packages/next/src/compiled/react-dom/cjs/react-dom-server.browser.development.js b/packages/next/src/compiled/react-dom/cjs/react-dom-server.browser.development.js index dd5f57932f795..04c07d0352a86 100644 --- a/packages/next/src/compiled/react-dom/cjs/react-dom-server.browser.development.js +++ b/packages/next/src/compiled/react-dom/cjs/react-dom-server.browser.development.js @@ -17,7 +17,7 @@ if (process.env.NODE_ENV !== "production") { var React = require("next/dist/compiled/react"); var ReactDOM = require('react-dom'); -var reactDOMPackageVersion = '19.0.0-rc-6230622a1a-20240610'; +var reactDOMPackageVersion = '19.0.0-rc-20b6f4c0e8-20240607'; var ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE; @@ -503,8 +503,20 @@ function murmurhash3_32_gc(key, seed) { return h1 >>> 0; } +var channel = new MessageChannel(); +var taskQueue = []; + +channel.port1.onmessage = function () { + var task = taskQueue.shift(); + + if (task) { + task(); + } +}; + function scheduleWork(callback) { - callback(); + taskQueue.push(callback); + channel.port2.postMessage(null); } var VIEW_SIZE = 2048; var currentView = null; diff --git a/packages/next/src/compiled/react-dom/cjs/react-dom-server.browser.production.js b/packages/next/src/compiled/react-dom/cjs/react-dom-server.browser.production.js index 9e3e2f70509d0..66ad18ac0bb43 100644 --- a/packages/next/src/compiled/react-dom/cjs/react-dom-server.browser.production.js +++ b/packages/next/src/compiled/react-dom/cjs/react-dom-server.browser.production.js @@ -123,6 +123,16 @@ function murmurhash3_32_gc(key, seed) { 4294967295; return (h1 ^ (h1 >>> 16)) >>> 0; } +var channel = new MessageChannel(), + taskQueue = []; +channel.port1.onmessage = function () { + var task = taskQueue.shift(); + task && task(); +}; +function scheduleWork(callback) { + taskQueue.push(callback); + channel.port2.postMessage(null); +} var currentView = null, writtenBytes = 0; function writeChunk(destination, chunk) { @@ -3743,7 +3753,9 @@ function pingTask(request, task) { request.pingedTasks.push(task); 1 === request.pingedTasks.length && ((request.flushScheduled = null !== request.destination), - performWork(request)); + scheduleWork(function () { + return performWork(request); + })); } function createSuspenseBoundary(request, fallbackAbortableTasks) { return { @@ -5685,18 +5697,27 @@ function flushCompletedQueues(request, destination) { : completeWriting(destination); } } +function startWork(request) { + request.flushScheduled = null !== request.destination; + scheduleWork(function () { + return performWork(request); + }); + null === request.trackedPostpones && + scheduleWork(function () { + safelyEmitEarlyPreloads(request, 0 === request.pendingRootTasks); + }); +} function enqueueFlush(request) { - if ( - !1 === request.flushScheduled && + !1 === request.flushScheduled && 0 === request.pingedTasks.length && - null !== request.destination - ) { - request.flushScheduled = !0; - var destination = request.destination; - destination - ? flushCompletedQueues(request, destination) - : (request.flushScheduled = !1); - } + null !== request.destination && + ((request.flushScheduled = !0), + scheduleWork(function () { + var destination = request.destination; + destination + ? flushCompletedQueues(request, destination) + : (request.flushScheduled = !1); + })); } function abort(request, reason) { try { @@ -5715,16 +5736,16 @@ function abort(request, reason) { logRecoverableError(request, error$46, {}), fatalError(request, error$46); } } -var isomorphicReactPackageVersion$jscomp$inline_728 = React.version; +var isomorphicReactPackageVersion$jscomp$inline_720 = React.version; if ( - "19.0.0-rc-6230622a1a-20240610" !== - isomorphicReactPackageVersion$jscomp$inline_728 + "19.0.0-rc-20b6f4c0e8-20240607" !== + isomorphicReactPackageVersion$jscomp$inline_720 ) throw Error( formatProdErrorMessage( 527, - isomorphicReactPackageVersion$jscomp$inline_728, - "19.0.0-rc-6230622a1a-20240610" + isomorphicReactPackageVersion$jscomp$inline_720, + "19.0.0-rc-20b6f4c0e8-20240607" ) ); exports.renderToReadableStream = function (children, options) { @@ -5810,10 +5831,7 @@ exports.renderToReadableStream = function (children, options) { signal.addEventListener("abort", listener); } } - request.flushScheduled = null !== request.destination; - performWork(request); - null === request.trackedPostpones && - safelyEmitEarlyPreloads(request, 0 === request.pendingRootTasks); + startWork(request); }); }; -exports.version = "19.0.0-rc-6230622a1a-20240610"; +exports.version = "19.0.0-rc-20b6f4c0e8-20240607"; diff --git a/packages/next/src/compiled/react-dom/cjs/react-dom-server.bun.production.js b/packages/next/src/compiled/react-dom/cjs/react-dom-server.bun.production.js index 132f8e49ea8a3..01ec362ec4f02 100644 --- a/packages/next/src/compiled/react-dom/cjs/react-dom-server.bun.production.js +++ b/packages/next/src/compiled/react-dom/cjs/react-dom-server.bun.production.js @@ -3426,7 +3426,9 @@ function pingTask(request, task) { request.pingedTasks.push(task); 1 === request.pingedTasks.length && ((request.flushScheduled = null !== request.destination), - performWork(request)); + setTimeout(function () { + return performWork(request); + }, 0)); } function createSuspenseBoundary(request, fallbackAbortableTasks) { return { @@ -5396,18 +5398,27 @@ function flushCompletedQueues(request, destination) { : flushBuffered(destination); } } +function startWork(request) { + request.flushScheduled = null !== request.destination; + setTimeout(function () { + return performWork(request); + }, 0); + null === request.trackedPostpones && + setTimeout(function () { + safelyEmitEarlyPreloads(request, 0 === request.pendingRootTasks); + }, 0); +} function enqueueFlush(request) { - if ( - !1 === request.flushScheduled && + !1 === request.flushScheduled && 0 === request.pingedTasks.length && - null !== request.destination - ) { - request.flushScheduled = !0; - var destination = request.destination; - destination - ? flushCompletedQueues(request, destination) - : (request.flushScheduled = !1); - } + null !== request.destination && + ((request.flushScheduled = !0), + setTimeout(function () { + var destination = request.destination; + destination + ? flushCompletedQueues(request, destination) + : (request.flushScheduled = !1); + }, 0)); } function abort(request, reason) { try { @@ -5430,13 +5441,13 @@ function abort(request, reason) { } var isomorphicReactPackageVersion$jscomp$inline_724 = React.version; if ( - "19.0.0-rc-6230622a1a-20240610" !== + "19.0.0-rc-20b6f4c0e8-20240607" !== isomorphicReactPackageVersion$jscomp$inline_724 ) throw Error( 'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n - react: ' + (isomorphicReactPackageVersion$jscomp$inline_724 + - "\n - react-dom: 19.0.0-rc-6230622a1a-20240610\nLearn more: https://react.dev/warnings/version-mismatch") + "\n - react-dom: 19.0.0-rc-20b6f4c0e8-20240607\nLearn more: https://react.dev/warnings/version-mismatch") ); exports.renderToReadableStream = function (children, options) { return new Promise(function (resolve, reject) { @@ -5521,10 +5532,7 @@ exports.renderToReadableStream = function (children, options) { signal.addEventListener("abort", listener); } } - request.flushScheduled = null !== request.destination; - performWork(request); - null === request.trackedPostpones && - safelyEmitEarlyPreloads(request, 0 === request.pendingRootTasks); + startWork(request); }); }; -exports.version = "19.0.0-rc-6230622a1a-20240610"; +exports.version = "19.0.0-rc-20b6f4c0e8-20240607"; diff --git a/packages/next/src/compiled/react-dom/cjs/react-dom-server.edge.development.js b/packages/next/src/compiled/react-dom/cjs/react-dom-server.edge.development.js index 04c3f42c748d2..8f4e3c60cd7d0 100644 --- a/packages/next/src/compiled/react-dom/cjs/react-dom-server.edge.development.js +++ b/packages/next/src/compiled/react-dom/cjs/react-dom-server.edge.development.js @@ -17,7 +17,7 @@ if (process.env.NODE_ENV !== "production") { var React = require("next/dist/compiled/react"); var ReactDOM = require('react-dom'); -var reactDOMPackageVersion = '19.0.0-rc-6230622a1a-20240610'; +var reactDOMPackageVersion = '19.0.0-rc-20b6f4c0e8-20240607'; var ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE; diff --git a/packages/next/src/compiled/react-dom/cjs/react-dom-server.edge.production.js b/packages/next/src/compiled/react-dom/cjs/react-dom-server.edge.production.js index b565ba3c56f43..49f635657bd40 100644 --- a/packages/next/src/compiled/react-dom/cjs/react-dom-server.edge.production.js +++ b/packages/next/src/compiled/react-dom/cjs/react-dom-server.edge.production.js @@ -5832,13 +5832,13 @@ function abort(request, reason) { } var isomorphicReactPackageVersion$jscomp$inline_728 = React.version; if ( - "19.0.0-rc-6230622a1a-20240610" !== + "19.0.0-rc-20b6f4c0e8-20240607" !== isomorphicReactPackageVersion$jscomp$inline_728 ) throw Error( 'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n - react: ' + (isomorphicReactPackageVersion$jscomp$inline_728 + - "\n - react-dom: 19.0.0-rc-6230622a1a-20240610\nLearn more: https://react.dev/warnings/version-mismatch") + "\n - react-dom: 19.0.0-rc-20b6f4c0e8-20240607\nLearn more: https://react.dev/warnings/version-mismatch") ); exports.renderToReadableStream = function (children, options) { return new Promise(function (resolve, reject) { @@ -5926,4 +5926,4 @@ exports.renderToReadableStream = function (children, options) { startWork(request); }); }; -exports.version = "19.0.0-rc-6230622a1a-20240610"; +exports.version = "19.0.0-rc-20b6f4c0e8-20240607"; diff --git a/packages/next/src/compiled/react-dom/cjs/react-dom-server.node.development.js b/packages/next/src/compiled/react-dom/cjs/react-dom-server.node.development.js index e81ff0454735b..07d1e5834a4c9 100644 --- a/packages/next/src/compiled/react-dom/cjs/react-dom-server.node.development.js +++ b/packages/next/src/compiled/react-dom/cjs/react-dom-server.node.development.js @@ -20,7 +20,7 @@ var crypto = require('crypto'); var async_hooks = require('async_hooks'); var ReactDOM = require('react-dom'); -var reactDOMPackageVersion = '19.0.0-rc-6230622a1a-20240610'; +var reactDOMPackageVersion = '19.0.0-rc-20b6f4c0e8-20240607'; var ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE; diff --git a/packages/next/src/compiled/react-dom/cjs/react-dom-server.node.production.js b/packages/next/src/compiled/react-dom/cjs/react-dom-server.node.production.js index 88b32e2e4cc19..3f470c5ab1057 100644 --- a/packages/next/src/compiled/react-dom/cjs/react-dom-server.node.production.js +++ b/packages/next/src/compiled/react-dom/cjs/react-dom-server.node.production.js @@ -5456,13 +5456,13 @@ function abort(request, reason) { } var isomorphicReactPackageVersion$jscomp$inline_751 = React.version; if ( - "19.0.0-rc-6230622a1a-20240610" !== + "19.0.0-rc-20b6f4c0e8-20240607" !== isomorphicReactPackageVersion$jscomp$inline_751 ) throw Error( 'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n - react: ' + (isomorphicReactPackageVersion$jscomp$inline_751 + - "\n - react-dom: 19.0.0-rc-6230622a1a-20240610\nLearn more: https://react.dev/warnings/version-mismatch") + "\n - react-dom: 19.0.0-rc-20b6f4c0e8-20240607\nLearn more: https://react.dev/warnings/version-mismatch") ); function createDrainHandler(destination, request) { return function () { @@ -5789,4 +5789,4 @@ exports.renderToPipeableStream = function (children, options) { } }; }; -exports.version = "19.0.0-rc-6230622a1a-20240610"; +exports.version = "19.0.0-rc-20b6f4c0e8-20240607"; diff --git a/packages/next/src/compiled/react-dom/cjs/react-dom.development.js b/packages/next/src/compiled/react-dom/cjs/react-dom.development.js index 8db01a385167a..c2d44e2282388 100644 --- a/packages/next/src/compiled/react-dom/cjs/react-dom.development.js +++ b/packages/next/src/compiled/react-dom/cjs/react-dom.development.js @@ -142,7 +142,7 @@ var Internals = { findDOMNode: null }; -var ReactVersion = '19.0.0-rc-6230622a1a-20240610'; +var ReactVersion = '19.0.0-rc-20b6f4c0e8-20240607'; /** * HTML nodeType values that represent the type of the node diff --git a/packages/next/src/compiled/react-dom/cjs/react-dom.production.js b/packages/next/src/compiled/react-dom/cjs/react-dom.production.js index 09e9499d29d65..48123ab84df46 100644 --- a/packages/next/src/compiled/react-dom/cjs/react-dom.production.js +++ b/packages/next/src/compiled/react-dom/cjs/react-dom.production.js @@ -206,4 +206,4 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactSharedInternals.H.useHostTransitionStatus(); }; -exports.version = "19.0.0-rc-6230622a1a-20240610"; +exports.version = "19.0.0-rc-20b6f4c0e8-20240607"; diff --git a/packages/next/src/compiled/react-dom/cjs/react-dom.react-server.development.js b/packages/next/src/compiled/react-dom/cjs/react-dom.react-server.development.js index ebba208d3dbab..271d3076252ba 100644 --- a/packages/next/src/compiled/react-dom/cjs/react-dom.react-server.development.js +++ b/packages/next/src/compiled/react-dom/cjs/react-dom.react-server.development.js @@ -16,7 +16,7 @@ if (process.env.NODE_ENV !== "production") { var React = require("next/dist/compiled/react"); -var ReactVersion = '19.0.0-rc-6230622a1a-20240610'; +var ReactVersion = '19.0.0-rc-20b6f4c0e8-20240607'; var ReactSharedInternalsServer = // $FlowFixMe: It's defined in the one we resolve to. React.__SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE; diff --git a/packages/next/src/compiled/react-dom/cjs/react-dom.react-server.production.js b/packages/next/src/compiled/react-dom/cjs/react-dom.react-server.production.js index 2550b1a382478..2c5e8109104be 100644 --- a/packages/next/src/compiled/react-dom/cjs/react-dom.react-server.production.js +++ b/packages/next/src/compiled/react-dom/cjs/react-dom.react-server.production.js @@ -151,4 +151,4 @@ exports.preloadModule = function (href, options) { }); } else Internals.d.m(href); }; -exports.version = "19.0.0-rc-6230622a1a-20240610"; +exports.version = "19.0.0-rc-20b6f4c0e8-20240607"; diff --git a/packages/next/src/compiled/react-dom/package.json b/packages/next/src/compiled/react-dom/package.json index 7cae0f6a1a0ac..5c7351d9d1ced 100644 --- a/packages/next/src/compiled/react-dom/package.json +++ b/packages/next/src/compiled/react-dom/package.json @@ -67,10 +67,10 @@ "./package.json": "./package.json" }, "dependencies": { - "scheduler": "0.25.0-rc-6230622a1a-20240610" + "scheduler": "0.25.0-rc-20b6f4c0e8-20240607" }, "peerDependencies": { - "react": "19.0.0-rc-6230622a1a-20240610" + "react": "19.0.0-rc-20b6f4c0e8-20240607" }, "browser": { "./server.js": "./server.browser.js", diff --git a/packages/next/src/compiled/react-experimental/cjs/react.development.js b/packages/next/src/compiled/react-experimental/cjs/react.development.js index 2d96aa48ef62b..28a5bc8099ee5 100644 --- a/packages/next/src/compiled/react-experimental/cjs/react.development.js +++ b/packages/next/src/compiled/react-experimental/cjs/react.development.js @@ -129,7 +129,7 @@ function printWarning(level, format, args, currentStack) { } } -var ReactVersion = '19.0.0-experimental-6230622a1a-20240610'; +var ReactVersion = '19.0.0-experimental-20b6f4c0e8-20240607'; var REACT_ELEMENT_TYPE = Symbol.for('react.transitional.element') ; var REACT_PORTAL_TYPE = Symbol.for('react.portal'); diff --git a/packages/next/src/compiled/react-experimental/cjs/react.production.js b/packages/next/src/compiled/react-experimental/cjs/react.production.js index b052713a3bcb3..3fda938f9f1d6 100644 --- a/packages/next/src/compiled/react-experimental/cjs/react.production.js +++ b/packages/next/src/compiled/react-experimental/cjs/react.production.js @@ -559,4 +559,4 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactSharedInternals.H.useTransition(); }; -exports.version = "19.0.0-experimental-6230622a1a-20240610"; +exports.version = "19.0.0-experimental-20b6f4c0e8-20240607"; diff --git a/packages/next/src/compiled/react-experimental/cjs/react.react-server.development.js b/packages/next/src/compiled/react-experimental/cjs/react.react-server.development.js index 77efc5682d9e2..3ac65b1635bfa 100644 --- a/packages/next/src/compiled/react-experimental/cjs/react.react-server.development.js +++ b/packages/next/src/compiled/react-experimental/cjs/react.react-server.development.js @@ -1683,7 +1683,7 @@ function postpone(reason) { throw postponeInstance; } -var ReactVersion = '19.0.0-experimental-6230622a1a-20240610'; +var ReactVersion = '19.0.0-experimental-20b6f4c0e8-20240607'; var getPrototypeOf = Object.getPrototypeOf; diff --git a/packages/next/src/compiled/react-experimental/cjs/react.react-server.production.js b/packages/next/src/compiled/react-experimental/cjs/react.react-server.production.js index 39f2350364782..ec7bba145d1cd 100644 --- a/packages/next/src/compiled/react-experimental/cjs/react.react-server.production.js +++ b/packages/next/src/compiled/react-experimental/cjs/react.react-server.production.js @@ -564,4 +564,4 @@ exports.useId = function () { exports.useMemo = function (create, deps) { return ReactSharedInternals.H.useMemo(create, deps); }; -exports.version = "19.0.0-experimental-6230622a1a-20240610"; +exports.version = "19.0.0-experimental-20b6f4c0e8-20240607"; diff --git a/packages/next/src/compiled/react-is/package.json b/packages/next/src/compiled/react-is/package.json index 4425e958fd1d0..5117e710e55c3 100644 --- a/packages/next/src/compiled/react-is/package.json +++ b/packages/next/src/compiled/react-is/package.json @@ -1,6 +1,6 @@ { "name": "react-is", - "version": "19.0.0-rc-6230622a1a-20240610", + "version": "19.0.0-rc-20b6f4c0e8-20240607", "description": "Brand checking of React Elements.", "main": "index.js", "sideEffects": false, diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.browser.development.js b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.browser.development.js index 156c0d3516f21..f8d3c768509bf 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.browser.development.js +++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.browser.development.js @@ -2970,9 +2970,20 @@ function stopStream(response, id, row) { function resolveErrorDev(response, id, digest, message, stack) { + var error; + + { + var callStack = buildFakeCallStack(response, stack, // $FlowFixMe[incompatible-use] + Error.bind(null, message || 'An error occurred in the Server Components render but no message was provided')); + var rootTask = response._debugRootTask; + + if (rootTask != null) { + error = rootTask.run(callStack); + } else { + error = callStack(); + } + } - var error = new Error(message || 'An error occurred in the Server Components render but no message was provided'); - error.stack = stack; error.digest = digest; var errorWithDigest = error; var chunks = response._chunks; @@ -3011,6 +3022,7 @@ function resolveHint(response, code, model) { var supportsCreateTask = !!console.createTask; var taskCache = supportsCreateTask ? new WeakMap() : null; var fakeFunctionCache = new Map() ; +var fakeFunctionIdx = 0; function createFakeFunction(name, filename, sourceMap, line, col) { // This creates a fake copy of a Server Module. It represents a module that has already @@ -3022,15 +3034,31 @@ function createFakeFunction(name, filename, sourceMap, line, col) { var code; if (line <= 1) { - code = '_=>' + ' '.repeat(col < 4 ? 0 : col - 4) + '_()\n' + comment + '\n'; + code = '_=>' + ' '.repeat(col < 4 ? 0 : col - 4) + '_()\n' + comment; } else { - code = comment + '\n'.repeat(line - 2) + '_=>\n' + ' '.repeat(col < 1 ? 0 : col - 1) + '_()\n'; + code = comment + '\n'.repeat(line - 2) + '_=>\n' + ' '.repeat(col < 1 ? 0 : col - 1) + '_()'; + } + + if (filename.startsWith('/')) { + // If the filename starts with `/` we assume that it is a file system file + // rather than relative to the current host. Since on the server fully qualified + // stack traces use the file path. + // TODO: What does this look like on Windows? + filename = 'file://' + filename; } if (sourceMap) { - code += '//# sourceMappingURL=' + sourceMap; + // We use the prefix rsc://React/ to separate these from other files listed in + // the Chrome DevTools. We need a "host name" and not just a protocol because + // otherwise the group name becomes the root folder. Ideally we don't want to + // show these at all but there's two reasons to assign a fake URL. + // 1) A printed stack trace string needs a unique URL to be able to source map it. + // 2) If source maps are disabled or fails, you should at least be able to tell + // which file it was. + code += '\n//# sourceURL=rsc://React/' + filename + '?' + fakeFunctionIdx++; + code += '\n//# sourceMappingURL=' + sourceMap; } else if (filename) { - code += '//# sourceURL=' + filename; + code += '\n//# sourceURL=' + filename; } var fn; diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.edge.development.js b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.edge.development.js index 06d3092106e45..d7a66e3477be9 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.edge.development.js +++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.edge.development.js @@ -3243,9 +3243,20 @@ function stopStream(response, id, row) { function resolveErrorDev(response, id, digest, message, stack) { + var error; + + { + var callStack = buildFakeCallStack(response, stack, // $FlowFixMe[incompatible-use] + Error.bind(null, message || 'An error occurred in the Server Components render but no message was provided')); + var rootTask = response._debugRootTask; + + if (rootTask != null) { + error = rootTask.run(callStack); + } else { + error = callStack(); + } + } - var error = new Error(message || 'An error occurred in the Server Components render but no message was provided'); - error.stack = stack; error.digest = digest; var errorWithDigest = error; var chunks = response._chunks; @@ -3284,6 +3295,7 @@ function resolveHint(response, code, model) { var supportsCreateTask = !!console.createTask; var taskCache = supportsCreateTask ? new WeakMap() : null; var fakeFunctionCache = new Map() ; +var fakeFunctionIdx = 0; function createFakeFunction(name, filename, sourceMap, line, col) { // This creates a fake copy of a Server Module. It represents a module that has already @@ -3295,15 +3307,31 @@ function createFakeFunction(name, filename, sourceMap, line, col) { var code; if (line <= 1) { - code = '_=>' + ' '.repeat(col < 4 ? 0 : col - 4) + '_()\n' + comment + '\n'; + code = '_=>' + ' '.repeat(col < 4 ? 0 : col - 4) + '_()\n' + comment; } else { - code = comment + '\n'.repeat(line - 2) + '_=>\n' + ' '.repeat(col < 1 ? 0 : col - 1) + '_()\n'; + code = comment + '\n'.repeat(line - 2) + '_=>\n' + ' '.repeat(col < 1 ? 0 : col - 1) + '_()'; + } + + if (filename.startsWith('/')) { + // If the filename starts with `/` we assume that it is a file system file + // rather than relative to the current host. Since on the server fully qualified + // stack traces use the file path. + // TODO: What does this look like on Windows? + filename = 'file://' + filename; } if (sourceMap) { - code += '//# sourceMappingURL=' + sourceMap; + // We use the prefix rsc://React/ to separate these from other files listed in + // the Chrome DevTools. We need a "host name" and not just a protocol because + // otherwise the group name becomes the root folder. Ideally we don't want to + // show these at all but there's two reasons to assign a fake URL. + // 1) A printed stack trace string needs a unique URL to be able to source map it. + // 2) If source maps are disabled or fails, you should at least be able to tell + // which file it was. + code += '\n//# sourceURL=rsc://React/' + filename + '?' + fakeFunctionIdx++; + code += '\n//# sourceMappingURL=' + sourceMap; } else if (filename) { - code += '//# sourceURL=' + filename; + code += '\n//# sourceURL=' + filename; } var fn; diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.node.development.js b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.node.development.js index acf3bc6d56309..3dedc982739b2 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.node.development.js +++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.node.development.js @@ -3241,9 +3241,20 @@ function stopStream(response, id, row) { function resolveErrorDev(response, id, digest, message, stack) { + var error; + + { + var callStack = buildFakeCallStack(response, stack, // $FlowFixMe[incompatible-use] + Error.bind(null, message || 'An error occurred in the Server Components render but no message was provided')); + var rootTask = response._debugRootTask; + + if (rootTask != null) { + error = rootTask.run(callStack); + } else { + error = callStack(); + } + } - var error = new Error(message || 'An error occurred in the Server Components render but no message was provided'); - error.stack = stack; error.digest = digest; var errorWithDigest = error; var chunks = response._chunks; @@ -3282,6 +3293,7 @@ function resolveHint(response, code, model) { var supportsCreateTask = !!console.createTask; var taskCache = supportsCreateTask ? new WeakMap() : null; var fakeFunctionCache = new Map() ; +var fakeFunctionIdx = 0; function createFakeFunction(name, filename, sourceMap, line, col) { // This creates a fake copy of a Server Module. It represents a module that has already @@ -3293,15 +3305,31 @@ function createFakeFunction(name, filename, sourceMap, line, col) { var code; if (line <= 1) { - code = '_=>' + ' '.repeat(col < 4 ? 0 : col - 4) + '_()\n' + comment + '\n'; + code = '_=>' + ' '.repeat(col < 4 ? 0 : col - 4) + '_()\n' + comment; } else { - code = comment + '\n'.repeat(line - 2) + '_=>\n' + ' '.repeat(col < 1 ? 0 : col - 1) + '_()\n'; + code = comment + '\n'.repeat(line - 2) + '_=>\n' + ' '.repeat(col < 1 ? 0 : col - 1) + '_()'; + } + + if (filename.startsWith('/')) { + // If the filename starts with `/` we assume that it is a file system file + // rather than relative to the current host. Since on the server fully qualified + // stack traces use the file path. + // TODO: What does this look like on Windows? + filename = 'file://' + filename; } if (sourceMap) { - code += '//# sourceMappingURL=' + sourceMap; + // We use the prefix rsc://React/ to separate these from other files listed in + // the Chrome DevTools. We need a "host name" and not just a protocol because + // otherwise the group name becomes the root folder. Ideally we don't want to + // show these at all but there's two reasons to assign a fake URL. + // 1) A printed stack trace string needs a unique URL to be able to source map it. + // 2) If source maps are disabled or fails, you should at least be able to tell + // which file it was. + code += '\n//# sourceURL=rsc://React/' + filename + '?' + fakeFunctionIdx++; + code += '\n//# sourceMappingURL=' + sourceMap; } else if (filename) { - code += '//# sourceURL=' + filename; + code += '\n//# sourceURL=' + filename; } var fn; diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.node.unbundled.development.js b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.node.unbundled.development.js index fdb1a30362bf5..0b82d95a999b7 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.node.unbundled.development.js +++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.node.unbundled.development.js @@ -3196,9 +3196,20 @@ function stopStream(response, id, row) { function resolveErrorDev(response, id, digest, message, stack) { + var error; + + { + var callStack = buildFakeCallStack(response, stack, // $FlowFixMe[incompatible-use] + Error.bind(null, message || 'An error occurred in the Server Components render but no message was provided')); + var rootTask = response._debugRootTask; + + if (rootTask != null) { + error = rootTask.run(callStack); + } else { + error = callStack(); + } + } - var error = new Error(message || 'An error occurred in the Server Components render but no message was provided'); - error.stack = stack; error.digest = digest; var errorWithDigest = error; var chunks = response._chunks; @@ -3237,6 +3248,7 @@ function resolveHint(response, code, model) { var supportsCreateTask = !!console.createTask; var taskCache = supportsCreateTask ? new WeakMap() : null; var fakeFunctionCache = new Map() ; +var fakeFunctionIdx = 0; function createFakeFunction(name, filename, sourceMap, line, col) { // This creates a fake copy of a Server Module. It represents a module that has already @@ -3248,15 +3260,31 @@ function createFakeFunction(name, filename, sourceMap, line, col) { var code; if (line <= 1) { - code = '_=>' + ' '.repeat(col < 4 ? 0 : col - 4) + '_()\n' + comment + '\n'; + code = '_=>' + ' '.repeat(col < 4 ? 0 : col - 4) + '_()\n' + comment; } else { - code = comment + '\n'.repeat(line - 2) + '_=>\n' + ' '.repeat(col < 1 ? 0 : col - 1) + '_()\n'; + code = comment + '\n'.repeat(line - 2) + '_=>\n' + ' '.repeat(col < 1 ? 0 : col - 1) + '_()'; + } + + if (filename.startsWith('/')) { + // If the filename starts with `/` we assume that it is a file system file + // rather than relative to the current host. Since on the server fully qualified + // stack traces use the file path. + // TODO: What does this look like on Windows? + filename = 'file://' + filename; } if (sourceMap) { - code += '//# sourceMappingURL=' + sourceMap; + // We use the prefix rsc://React/ to separate these from other files listed in + // the Chrome DevTools. We need a "host name" and not just a protocol because + // otherwise the group name becomes the root folder. Ideally we don't want to + // show these at all but there's two reasons to assign a fake URL. + // 1) A printed stack trace string needs a unique URL to be able to source map it. + // 2) If source maps are disabled or fails, you should at least be able to tell + // which file it was. + code += '\n//# sourceURL=rsc://React/' + filename + '?' + fakeFunctionIdx++; + code += '\n//# sourceMappingURL=' + sourceMap; } else if (filename) { - code += '//# sourceURL=' + filename; + code += '\n//# sourceURL=' + filename; } var fn; diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.browser.development.js b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.browser.development.js index 28b12ac53ab49..d0e4286bc6c7f 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.browser.development.js +++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.browser.development.js @@ -96,9 +96,32 @@ function printWarning(level, format, args, currentStack) { } } +var channel = new MessageChannel(); +var taskQueue = []; + +channel.port1.onmessage = function () { + var task = taskQueue.shift(); + + if (task) { + task(); + } +}; + function scheduleWork(callback) { - callback(); + taskQueue.push(callback); + channel.port2.postMessage(null); +} + +function handleErrorInNextTick(error) { + setTimeout(function () { + throw error; + }); } + +var LocalPromise = Promise; +var scheduleMicrotask = typeof queueMicrotask === 'function' ? queueMicrotask : function (callback) { + LocalPromise.resolve(null).then(callback).catch(handleErrorInNextTick); +}; var VIEW_SIZE = 2048; var currentView = null; var writtenBytes = 0; @@ -1728,6 +1751,8 @@ var PENDING$1 = 0; var COMPLETED = 1; var ABORTED = 3; var ERRORED$1 = 4; +var RENDERING = 5; +var AbortSigil = {}; var TaintRegistryObjects = ReactSharedInternals.TaintRegistryObjects, TaintRegistryValues = ReactSharedInternals.TaintRegistryValues, TaintRegistryByteLengths = ReactSharedInternals.TaintRegistryByteLengths, @@ -1766,8 +1791,9 @@ function defaultPostponeHandler(reason) {// Noop } var OPEN = 0; -var CLOSING = 1; -var CLOSED = 2; +var ABORTING = 1; +var CLOSING = 2; +var CLOSED = 3; function createRequest(model, bundlerConfig, onError, identifierPrefix, onPostpone, environmentName, temporaryReferences) { if (ReactSharedInternals.A !== null && ReactSharedInternals.A !== DefaultAsyncDispatcher) { throw new Error('Currently React only supports one RSC renderer at a time.'); @@ -1868,6 +1894,16 @@ function serializeThenable(request, task, thenable) { default: { + if (request.status === ABORTING) { + // We can no longer accept any resolved values + newTask.status = ABORTED; + var errorId = request.fatalError; + var model = stringify(serializeByValueID(errorId)); + emitModelChunk(request, newTask.id, model); + request.abortableTasks.delete(newTask); + return newTask.id; + } + if (typeof thenable.status === 'string') { // Only instrument the thenable if the status if not defined. If // it's defined, but an unknown value, assume it's been instrumented by @@ -2261,6 +2297,13 @@ validated) // DEV-only result = callComponentInDEV(Component, props, componentDebugInfo); } + if (request.status === ABORTING) { + // If we aborted during rendering we should interrupt the render but + // we don't need to provide an error because the renderer will encode + // the abort error as the reason. + throw AbortSigil; + } + if (typeof result === 'object' && result !== null && !isClientReference(result)) { if (typeof result.then === 'function') { // When the return value is in children position we can resolve it immediately, @@ -2633,6 +2676,13 @@ validated) // DEV only wrappedType = callLazyInitInDEV(type); } + if (request.status === ABORTING) { + // lazy initializers are user code and could abort during render + // we don't wan to return any value resolved from the lazy initializer + // if it aborts so we interrupt rendering here + throw AbortSigil; + } + return renderElement(request, task, wrappedType, key, ref, props, owner, stack, validated); } @@ -2657,7 +2707,7 @@ function pingTask(request, task) { if (pingedTasks.length === 1) { request.flushScheduled = request.destination !== null; - scheduleWork(function () { + scheduleMicrotask(function () { return performWork(request); }); } @@ -2955,21 +3005,32 @@ function renderModel(request, task, parent, key, value) { try { return renderModelDestructive(request, task, parent, key, value); } catch (thrownValue) { + // If the suspended/errored value was an element or lazy it can be reduced + // to a lazy reference, so that it doesn't error the parent. + var model = task.model; + var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE); var x = thrownValue === SuspenseException ? // This is a special type of exception used for Suspense. For historical // reasons, the rest of the Suspense implementation expects the thrown // value to be a thenable, because before `use` existed that was the // (unstable) API for suspending. This implementation detail can change // later, once we deprecate the old API in favor of `use`. - getSuspendedThenable() : thrownValue; // If the suspended/errored value was an element or lazy it can be reduced - // to a lazy reference, so that it doesn't error the parent. - - var model = task.model; - var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE); + getSuspendedThenable() : thrownValue; if (typeof x === 'object' && x !== null) { // $FlowFixMe[method-unbinding] if (typeof x.then === 'function') { - // Something suspended, we'll need to create a new task and resolve it later. + if (request.status === ABORTING) { + task.status = ABORTED; + var errorId = request.fatalError; + + if (wasReactNode) { + return serializeLazyID(errorId); + } + + return serializeByValueID(errorId); + } // Something suspended, we'll need to create a new task and resolve it later. + + var newTask = createTask(request, task.model, task.keyPath, task.implicitSlot, request.abortableTasks); var ping = newTask.ping; x.then(ping, ping); @@ -3003,6 +3064,17 @@ function renderModel(request, task, parent, key, value) { return serializeByValueID(postponeId); } + } + + if (thrownValue === AbortSigil) { + task.status = ABORTED; + var _errorId = request.fatalError; + + if (wasReactNode) { + return serializeLazyID(_errorId); + } + + return serializeByValueID(_errorId); } // Restore the context. We assume that this will be restored by the inner // functions in case nothing throws so we don't use "finally" here. @@ -3015,10 +3087,12 @@ function renderModel(request, task, parent, key, value) { // We'll replace this element with a lazy reference that throws on the client // once it gets rendered. request.pendingChunks++; - var errorId = request.nextChunkId++; + + var _errorId2 = request.nextChunkId++; + var digest = logRecoverableError(request, x); - emitErrorChunk(request, errorId, digest, x); - return serializeLazyID(errorId); + emitErrorChunk(request, _errorId2, digest, x); + return serializeLazyID(_errorId2); } // Something errored but it was not in a React Node. There's no need to serialize // it by value because it'll just error the whole parent row anyway so we can // just stop any siblings and error the whole parent row. @@ -3122,6 +3196,13 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value resolvedModel = callLazyInitInDEV(lazy); } + if (request.status === ABORTING) { + // lazy initializers are user code and could abort during render + // we don't wan to return any value resolved from the lazy initializer + // if it aborts so we interrupt rendering here + throw AbortSigil; + } + { var _debugInfo = lazy._debugInfo; @@ -4111,6 +4192,7 @@ function retryTask(request, task) { } var prevDebugID = debugID; + task.status = RENDERING; try { // Track the root so we know that we have to emit this object even though it @@ -4167,10 +4249,20 @@ function retryTask(request, task) { if (typeof x === 'object' && x !== null) { // $FlowFixMe[method-unbinding] if (typeof x.then === 'function') { - // Something suspended again, let's pick it back up later. + if (request.status === ABORTING) { + request.abortableTasks.delete(task); + task.status = ABORTED; + var errorId = request.fatalError; + var model = stringify(serializeByValueID(errorId)); + emitModelChunk(request, task.id, model); + return; + } // Something suspended again, let's pick it back up later. + + + task.status = PENDING$1; + task.thenableState = getThenableStateAfterSuspending(); var ping = task.ping; x.then(ping, ping); - task.thenableState = getThenableStateAfterSuspending(); return; } else if (x.$$typeof === REACT_POSTPONE_TYPE) { request.abortableTasks.delete(task); @@ -4182,6 +4274,17 @@ function retryTask(request, task) { } } + if (x === AbortSigil) { + request.abortableTasks.delete(task); + task.status = ABORTED; + var _errorId3 = request.fatalError; + + var _model = stringify(serializeByValueID(_errorId3)); + + emitModelChunk(request, task.id, _model); + return; + } + request.abortableTasks.delete(task); task.status = ERRORED$1; var digest = logRecoverableError(request, x); @@ -4243,6 +4346,11 @@ function performWork(request) { } function abortTask(task, request, errorId) { + if (task.status === RENDERING) { + // This task will be aborted by the render + return; + } + task.status = ABORTED; // Instead of emitting an error per task.id, we emit a model that only // has a single value referencing the error. @@ -4339,6 +4447,7 @@ function flushCompletedChunks(request, destination) { cleanupTaintQueue(request); } + request.status = CLOSED; close$1(destination); request.destination = null; } @@ -4359,10 +4468,14 @@ function enqueueFlush(request) { request.pingedTasks.length === 0 && // If there is no destination there is nothing we can flush to. A flush will // happen when we start flowing again request.destination !== null) { - var destination = request.destination; request.flushScheduled = true; scheduleWork(function () { - return flushCompletedChunks(request, destination); + request.flushScheduled = false; + var destination = request.destination; + + if (destination) { + flushCompletedChunks(request, destination); + } }); } } @@ -4398,19 +4511,21 @@ function stopFlowing(request) { function abort(request, reason) { try { + request.status = ABORTING; var abortableTasks = request.abortableTasks; // We have tasks to abort. We'll emit one error row and then emit a reference // to that row from every row that's still remaining. if (abortableTasks.size > 0) { request.pendingChunks++; var errorId = request.nextChunkId++; + request.fatalError = errorId; if (enablePostpone && typeof reason === 'object' && reason !== null && reason.$$typeof === REACT_POSTPONE_TYPE) { var postponeInstance = reason; logPostpone(request, postponeInstance.message); emitPostponeChunk(request, errorId, postponeInstance); } else { - var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason; + var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : typeof reason === 'object' && reason !== null && typeof reason.then === 'function' ? new Error('The render was aborted by the server with a promise.') : reason; var digest = logRecoverableError(request, error); emitErrorChunk(request, errorId, digest, error); } @@ -4432,7 +4547,7 @@ function abort(request, reason) { // We create an alternative reason for it instead. _error = new Error('The render was aborted due to being postponed.'); } else { - _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason; + _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : typeof reason === 'object' && reason !== null && typeof reason.then === 'function' ? new Error('The render was aborted by the server with a promise.') : reason; } abortListeners.forEach(function (callback) { diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.browser.production.js b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.browser.production.js index c4b571061e446..4a0e7a589361b 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.browser.production.js +++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.browser.production.js @@ -11,6 +11,30 @@ "use strict"; var ReactDOM = require("react-dom"), React = require("react"), + channel = new MessageChannel(), + taskQueue = []; +channel.port1.onmessage = function () { + var task = taskQueue.shift(); + task && task(); +}; +function scheduleWork(callback) { + taskQueue.push(callback); + channel.port2.postMessage(null); +} +function handleErrorInNextTick(error) { + setTimeout(function () { + throw error; + }); +} +var LocalPromise = Promise, + scheduleMicrotask = + "function" === typeof queueMicrotask + ? queueMicrotask + : function (callback) { + LocalPromise.resolve(null) + .then(callback) + .catch(handleErrorInNextTick); + }, currentView = null, writtenBytes = 0; function writeChunkAndReturn(destination, chunk) { @@ -671,6 +695,7 @@ if (!ReactSharedInternalsServer) ); var ObjectPrototype = Object.prototype, stringify = JSON.stringify, + AbortSigil = {}, TaintRegistryObjects = ReactSharedInternalsServer.TaintRegistryObjects, TaintRegistryValues = ReactSharedInternalsServer.TaintRegistryValues, TaintRegistryByteLengths = @@ -776,6 +801,14 @@ function serializeThenable(request, task, thenable) { newTask.id ); default: + if (1 === request.status) + return ( + (newTask.status = 3), + (task = stringify(serializeByValueID(request.fatalError))), + emitModelChunk(request, newTask.id, task), + request.abortableTasks.delete(newTask), + newTask.id + ); "string" !== typeof thenable.status && ((thenable.status = "pending"), thenable.then( @@ -985,6 +1018,7 @@ function renderFunctionComponent(request, task, key, Component, props) { thenableIndexCounter = 0; thenableState = prevThenableState; Component = Component(props, void 0); + if (1 === request.status) throw AbortSigil; if ( "object" === typeof Component && null !== Component && @@ -1082,6 +1116,7 @@ function renderElement(request, task, type, key, ref, props) { case REACT_LAZY_TYPE: var init = type._init; type = init(type._payload); + if (1 === request.status) throw AbortSigil; return renderElement(request, task, type, key, ref, props); case REACT_FORWARD_REF_TYPE: return renderFunctionComponent(request, task, key, type.render, props); @@ -1098,7 +1133,9 @@ function pingTask(request, task) { pingedTasks.push(task); 1 === pingedTasks.length && ((request.flushScheduled = null !== request.destination), - performWork(request)); + scheduleMicrotask(function () { + return performWork(request); + })); } function createTask(request, model, keyPath, implicitSlot, abortSet) { request.pendingChunks++; @@ -1118,79 +1155,7 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) { return pingTask(request, task); }, toJSON: function (parentPropertyName, value) { - a: { - var prevKeyPath = task.keyPath, - prevImplicitSlot = task.implicitSlot; - try { - var JSCompiler_inline_result = renderModelDestructive( - request, - task, - this, - parentPropertyName, - value - ); - } catch (thrownValue) { - parentPropertyName = - thrownValue === SuspenseException - ? getSuspendedThenable() - : thrownValue; - value = task.model; - value = - "object" === typeof value && - null !== value && - (value.$$typeof === REACT_ELEMENT_TYPE || - value.$$typeof === REACT_LAZY_TYPE); - if ( - "object" === typeof parentPropertyName && - null !== parentPropertyName - ) { - if ("function" === typeof parentPropertyName.then) { - JSCompiler_inline_result = createTask( - request, - task.model, - task.keyPath, - task.implicitSlot, - request.abortableTasks - ); - var ping = JSCompiler_inline_result.ping; - parentPropertyName.then(ping, ping); - JSCompiler_inline_result.thenableState = - getThenableStateAfterSuspending(); - task.keyPath = prevKeyPath; - task.implicitSlot = prevImplicitSlot; - JSCompiler_inline_result = value - ? "$L" + JSCompiler_inline_result.id.toString(16) - : serializeByValueID(JSCompiler_inline_result.id); - break a; - } - if (parentPropertyName.$$typeof === REACT_POSTPONE_TYPE) { - request.pendingChunks++; - JSCompiler_inline_result = request.nextChunkId++; - logPostpone(request, parentPropertyName.message); - emitPostponeChunk(request, JSCompiler_inline_result); - task.keyPath = prevKeyPath; - task.implicitSlot = prevImplicitSlot; - JSCompiler_inline_result = value - ? "$L" + JSCompiler_inline_result.toString(16) - : serializeByValueID(JSCompiler_inline_result); - break a; - } - } - task.keyPath = prevKeyPath; - task.implicitSlot = prevImplicitSlot; - if (value) - request.pendingChunks++, - (prevKeyPath = request.nextChunkId++), - (prevImplicitSlot = logRecoverableError( - request, - parentPropertyName - )), - emitErrorChunk(request, prevKeyPath, prevImplicitSlot), - (JSCompiler_inline_result = "$L" + prevKeyPath.toString(16)); - else throw parentPropertyName; - } - } - return JSCompiler_inline_result; + return renderModel(request, task, this, parentPropertyName, value); }, thenableState: null }; @@ -1200,6 +1165,9 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) { function serializeByValueID(id) { return "$" + id.toString(16); } +function serializeLazyID(id) { + return "$L" + id.toString(16); +} function encodeReferenceChunk(request, id, reference) { request = stringify(reference); id = id.toString(16) + ":" + request + "\n"; @@ -1218,7 +1186,7 @@ function serializeClientReference( existingId = writtenClientReferences.get(clientReferenceKey); if (void 0 !== existingId) return parent[0] === REACT_ELEMENT_TYPE && "1" === parentPropertyName - ? "$L" + existingId.toString(16) + ? serializeLazyID(existingId) : serializeByValueID(existingId); try { var config = request.bundlerConfig, @@ -1250,7 +1218,7 @@ function serializeClientReference( request.completedImportChunks.push(processedChunk); writtenClientReferences.set(clientReferenceKey, importId); return parent[0] === REACT_ELEMENT_TYPE && "1" === parentPropertyName - ? "$L" + importId.toString(16) + ? serializeLazyID(importId) : serializeByValueID(importId); } catch (x) { return ( @@ -1305,6 +1273,74 @@ function serializeBlob(request, blob) { return "$B" + newTask.id.toString(16); } var modelRoot = !1; +function renderModel(request, task, parent, key, value) { + var prevKeyPath = task.keyPath, + prevImplicitSlot = task.implicitSlot; + try { + return renderModelDestructive(request, task, parent, key, value); + } catch (thrownValue) { + parent = task.model; + parent = + "object" === typeof parent && + null !== parent && + (parent.$$typeof === REACT_ELEMENT_TYPE || + parent.$$typeof === REACT_LAZY_TYPE); + key = + thrownValue === SuspenseException ? getSuspendedThenable() : thrownValue; + if ("object" === typeof key && null !== key) { + if ("function" === typeof key.then) { + if (1 === request.status) + return ( + (task.status = 3), + (request = request.fatalError), + parent ? serializeLazyID(request) : serializeByValueID(request) + ); + request = createTask( + request, + task.model, + task.keyPath, + task.implicitSlot, + request.abortableTasks + ); + value = request.ping; + key.then(value, value); + request.thenableState = getThenableStateAfterSuspending(); + task.keyPath = prevKeyPath; + task.implicitSlot = prevImplicitSlot; + return parent + ? serializeLazyID(request.id) + : serializeByValueID(request.id); + } + if (key.$$typeof === REACT_POSTPONE_TYPE) + return ( + request.pendingChunks++, + (value = request.nextChunkId++), + logPostpone(request, key.message), + emitPostponeChunk(request, value), + (task.keyPath = prevKeyPath), + (task.implicitSlot = prevImplicitSlot), + parent ? serializeLazyID(value) : serializeByValueID(value) + ); + } + if (thrownValue === AbortSigil) + return ( + (task.status = 3), + (request = request.fatalError), + parent ? serializeLazyID(request) : serializeByValueID(request) + ); + task.keyPath = prevKeyPath; + task.implicitSlot = prevImplicitSlot; + if (parent) + return ( + request.pendingChunks++, + (task = request.nextChunkId++), + (prevKeyPath = logRecoverableError(request, key)), + emitErrorChunk(request, task, prevKeyPath), + serializeLazyID(task) + ); + throw key; + } +} function renderModelDestructive( request, task, @@ -1341,12 +1377,11 @@ function renderModelDestructive( parentPropertyName ); case REACT_LAZY_TYPE: - return ( - (task.thenableState = null), - (parentPropertyName = value._init), - (value = parentPropertyName(value._payload)), - renderModelDestructive(request, task, emptyRoot, "", value) - ); + task.thenableState = null; + parentPropertyName = value._init; + value = parentPropertyName(value._payload); + if (1 === request.status) throw AbortSigil; + return renderModelDestructive(request, task, emptyRoot, "", value); case REACT_LEGACY_ELEMENT_TYPE: throw Error( 'A React Element from an older version of React was rendered. This is not supported. It can happen if:\n- Multiple copies of the "react" package is used.\n- A library pre-bundled an old copy of "react" or "react/jsx-runtime".\n- A compiler tries to "inline" JSX instead of using the runtime.' @@ -1629,8 +1664,8 @@ function logRecoverableError(request, error) { function fatalError(request, error) { cleanupTaintQueue(request); null !== request.destination - ? ((request.status = 2), closeWithError(request.destination, error)) - : ((request.status = 1), (request.fatalError = error)); + ? ((request.status = 3), closeWithError(request.destination, error)) + : ((request.status = 2), (request.fatalError = error)); } function emitPostponeChunk(request, id) { id = id.toString(16) + ":P\n"; @@ -1719,7 +1754,8 @@ function emitChunk(request, task, value) { } var emptyRoot = {}; function retryTask(request, task) { - if (0 === task.status) + if (0 === task.status) { + task.status = 5; try { modelRoot = task.model; var resolvedModel = renderModelDestructive( @@ -1748,9 +1784,17 @@ function retryTask(request, task) { : thrownValue; if ("object" === typeof x && null !== x) { if ("function" === typeof x.then) { + if (1 === request.status) { + request.abortableTasks.delete(task); + task.status = 3; + var model = stringify(serializeByValueID(request.fatalError)); + emitModelChunk(request, task.id, model); + return; + } + task.status = 0; + task.thenableState = getThenableStateAfterSuspending(); var ping = task.ping; x.then(ping, ping); - task.thenableState = getThenableStateAfterSuspending(); return; } if (x.$$typeof === REACT_POSTPONE_TYPE) { @@ -1761,12 +1805,20 @@ function retryTask(request, task) { return; } } - request.abortableTasks.delete(task); - task.status = 4; - var digest = logRecoverableError(request, x); - emitErrorChunk(request, task.id, digest); + if (x === AbortSigil) { + request.abortableTasks.delete(task); + task.status = 3; + var model$23 = stringify(serializeByValueID(request.fatalError)); + emitModelChunk(request, task.id, model$23); + } else { + request.abortableTasks.delete(task); + task.status = 4; + var digest = logRecoverableError(request, x); + emitErrorChunk(request, task.id, digest); + } } finally { } + } } function performWork(request) { var prevDispatcher = ReactSharedInternalsServer.H; @@ -1825,26 +1877,35 @@ function flushCompletedChunks(request, destination) { } 0 === request.pendingChunks && (cleanupTaintQueue(request), + (request.status = 3), destination.close(), (request.destination = null)); } +function startWork(request) { + request.flushScheduled = null !== request.destination; + scheduleWork(function () { + return performWork(request); + }); +} function enqueueFlush(request) { - if ( - !1 === request.flushScheduled && + !1 === request.flushScheduled && 0 === request.pingedTasks.length && - null !== request.destination - ) { - var destination = request.destination; - request.flushScheduled = !0; - flushCompletedChunks(request, destination); - } + null !== request.destination && + ((request.flushScheduled = !0), + scheduleWork(function () { + request.flushScheduled = !1; + var destination = request.destination; + destination && flushCompletedChunks(request, destination); + })); } function abort(request, reason) { try { + request.status = 1; var abortableTasks = request.abortableTasks; if (0 < abortableTasks.size) { request.pendingChunks++; var errorId = request.nextChunkId++; + request.fatalError = errorId; if ( "object" === typeof reason && null !== reason && @@ -1856,37 +1917,47 @@ function abort(request, reason) { var error = void 0 === reason ? Error("The render was aborted by the server without a reason.") + : "object" === typeof reason && + null !== reason && + "function" === typeof reason.then + ? Error("The render was aborted by the server with a promise.") : reason, digest = logRecoverableError(request, error); emitErrorChunk(request, errorId, digest, error); } abortableTasks.forEach(function (task) { - task.status = 3; - var ref = serializeByValueID(errorId); - task = encodeReferenceChunk(request, task.id, ref); - request.completedErrorChunks.push(task); + if (5 !== task.status) { + task.status = 3; + var ref = serializeByValueID(errorId); + task = encodeReferenceChunk(request, task.id, ref); + request.completedErrorChunks.push(task); + } }); abortableTasks.clear(); } var abortListeners = request.abortListeners; if (0 < abortListeners.size) { - var error$26 = + var error$30 = "object" === typeof reason && null !== reason && reason.$$typeof === REACT_POSTPONE_TYPE ? Error("The render was aborted due to being postponed.") : void 0 === reason ? Error("The render was aborted by the server without a reason.") + : "object" === typeof reason && + null !== reason && + "function" === typeof reason.then + ? Error("The render was aborted by the server with a promise.") : reason; abortListeners.forEach(function (callback) { - return callback(error$26); + return callback(error$30); }); abortListeners.clear(); } null !== request.destination && flushCompletedChunks(request, request.destination); - } catch (error$27) { - logRecoverableError(request, error$27), fatalError(request, error$27); + } catch (error$31) { + logRecoverableError(request, error$31), fatalError(request, error$31); } } function resolveServerReference(bundlerConfig, id) { @@ -2328,8 +2399,8 @@ function parseReadableStream(response, reference, type) { (previousBlockedChunk = chunk)); } else { chunk = previousBlockedChunk; - var chunk$30 = createPendingChunk(response); - chunk$30.then( + var chunk$34 = createPendingChunk(response); + chunk$34.then( function (v) { return controller.enqueue(v); }, @@ -2337,10 +2408,10 @@ function parseReadableStream(response, reference, type) { return controller.error(e); } ); - previousBlockedChunk = chunk$30; + previousBlockedChunk = chunk$34; chunk.then(function () { - previousBlockedChunk === chunk$30 && (previousBlockedChunk = null); - resolveModelChunk(chunk$30, json, -1); + previousBlockedChunk === chunk$34 && (previousBlockedChunk = null); + resolveModelChunk(chunk$34, json, -1); }); } }, @@ -2705,13 +2776,12 @@ exports.renderToReadableStream = function (model, turbopackMap, options) { { type: "bytes", start: function () { - request.flushScheduled = null !== request.destination; - performWork(request); + startWork(request); }, pull: function (controller) { - if (1 === request.status) - (request.status = 2), closeWithError(controller, request.fatalError); - else if (2 !== request.status && null === request.destination) { + if (2 === request.status) + (request.status = 3), closeWithError(controller, request.fatalError); + else if (3 !== request.status && null === request.destination) { request.destination = controller; try { flushCompletedChunks(request, controller); diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.edge.development.js b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.edge.development.js index 2ebac24a659a7..ab24b3938fe04 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.edge.development.js +++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.edge.development.js @@ -96,6 +96,16 @@ function printWarning(level, format, args, currentStack) { } } +function handleErrorInNextTick(error) { + setTimeout(function () { + throw error; + }); +} + +var LocalPromise = Promise; +var scheduleMicrotask = typeof queueMicrotask === 'function' ? queueMicrotask : function (callback) { + LocalPromise.resolve(null).then(callback).catch(handleErrorInNextTick); +}; function scheduleWork(callback) { setTimeout(callback, 0); } @@ -1763,6 +1773,8 @@ var PENDING$1 = 0; var COMPLETED = 1; var ABORTED = 3; var ERRORED$1 = 4; +var RENDERING = 5; +var AbortSigil = {}; var TaintRegistryObjects = ReactSharedInternals.TaintRegistryObjects, TaintRegistryValues = ReactSharedInternals.TaintRegistryValues, TaintRegistryByteLengths = ReactSharedInternals.TaintRegistryByteLengths, @@ -1801,8 +1813,9 @@ function defaultPostponeHandler(reason) {// Noop } var OPEN = 0; -var CLOSING = 1; -var CLOSED = 2; +var ABORTING = 1; +var CLOSING = 2; +var CLOSED = 3; function createRequest(model, bundlerConfig, onError, identifierPrefix, onPostpone, environmentName, temporaryReferences) { if (ReactSharedInternals.A !== null && ReactSharedInternals.A !== DefaultAsyncDispatcher) { throw new Error('Currently React only supports one RSC renderer at a time.'); @@ -1908,6 +1921,16 @@ function serializeThenable(request, task, thenable) { default: { + if (request.status === ABORTING) { + // We can no longer accept any resolved values + newTask.status = ABORTED; + var errorId = request.fatalError; + var model = stringify(serializeByValueID(errorId)); + emitModelChunk(request, newTask.id, model); + request.abortableTasks.delete(newTask); + return newTask.id; + } + if (typeof thenable.status === 'string') { // Only instrument the thenable if the status if not defined. If // it's defined, but an unknown value, assume it's been instrumented by @@ -2304,6 +2327,13 @@ validated) // DEV-only result = callComponentInDEV(Component, props, componentDebugInfo); } + if (request.status === ABORTING) { + // If we aborted during rendering we should interrupt the render but + // we don't need to provide an error because the renderer will encode + // the abort error as the reason. + throw AbortSigil; + } + if (typeof result === 'object' && result !== null && !isClientReference(result)) { if (typeof result.then === 'function') { // When the return value is in children position we can resolve it immediately, @@ -2676,6 +2706,13 @@ validated) // DEV only wrappedType = callLazyInitInDEV(type); } + if (request.status === ABORTING) { + // lazy initializers are user code and could abort during render + // we don't wan to return any value resolved from the lazy initializer + // if it aborts so we interrupt rendering here + throw AbortSigil; + } + return renderElement(request, task, wrappedType, key, ref, props, owner, stack, validated); } @@ -2700,7 +2737,7 @@ function pingTask(request, task) { if (pingedTasks.length === 1) { request.flushScheduled = request.destination !== null; - scheduleWork(function () { + scheduleMicrotask(function () { return performWork(request); }); } @@ -2998,21 +3035,32 @@ function renderModel(request, task, parent, key, value) { try { return renderModelDestructive(request, task, parent, key, value); } catch (thrownValue) { + // If the suspended/errored value was an element or lazy it can be reduced + // to a lazy reference, so that it doesn't error the parent. + var model = task.model; + var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE); var x = thrownValue === SuspenseException ? // This is a special type of exception used for Suspense. For historical // reasons, the rest of the Suspense implementation expects the thrown // value to be a thenable, because before `use` existed that was the // (unstable) API for suspending. This implementation detail can change // later, once we deprecate the old API in favor of `use`. - getSuspendedThenable() : thrownValue; // If the suspended/errored value was an element or lazy it can be reduced - // to a lazy reference, so that it doesn't error the parent. - - var model = task.model; - var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE); + getSuspendedThenable() : thrownValue; if (typeof x === 'object' && x !== null) { // $FlowFixMe[method-unbinding] if (typeof x.then === 'function') { - // Something suspended, we'll need to create a new task and resolve it later. + if (request.status === ABORTING) { + task.status = ABORTED; + var errorId = request.fatalError; + + if (wasReactNode) { + return serializeLazyID(errorId); + } + + return serializeByValueID(errorId); + } // Something suspended, we'll need to create a new task and resolve it later. + + var newTask = createTask(request, task.model, task.keyPath, task.implicitSlot, request.abortableTasks); var ping = newTask.ping; x.then(ping, ping); @@ -3046,6 +3094,17 @@ function renderModel(request, task, parent, key, value) { return serializeByValueID(postponeId); } + } + + if (thrownValue === AbortSigil) { + task.status = ABORTED; + var _errorId = request.fatalError; + + if (wasReactNode) { + return serializeLazyID(_errorId); + } + + return serializeByValueID(_errorId); } // Restore the context. We assume that this will be restored by the inner // functions in case nothing throws so we don't use "finally" here. @@ -3058,10 +3117,12 @@ function renderModel(request, task, parent, key, value) { // We'll replace this element with a lazy reference that throws on the client // once it gets rendered. request.pendingChunks++; - var errorId = request.nextChunkId++; + + var _errorId2 = request.nextChunkId++; + var digest = logRecoverableError(request, x); - emitErrorChunk(request, errorId, digest, x); - return serializeLazyID(errorId); + emitErrorChunk(request, _errorId2, digest, x); + return serializeLazyID(_errorId2); } // Something errored but it was not in a React Node. There's no need to serialize // it by value because it'll just error the whole parent row anyway so we can // just stop any siblings and error the whole parent row. @@ -3165,6 +3226,13 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value resolvedModel = callLazyInitInDEV(lazy); } + if (request.status === ABORTING) { + // lazy initializers are user code and could abort during render + // we don't wan to return any value resolved from the lazy initializer + // if it aborts so we interrupt rendering here + throw AbortSigil; + } + { var _debugInfo = lazy._debugInfo; @@ -4160,6 +4228,7 @@ function retryTask(request, task) { } var prevDebugID = debugID; + task.status = RENDERING; try { // Track the root so we know that we have to emit this object even though it @@ -4216,10 +4285,20 @@ function retryTask(request, task) { if (typeof x === 'object' && x !== null) { // $FlowFixMe[method-unbinding] if (typeof x.then === 'function') { - // Something suspended again, let's pick it back up later. + if (request.status === ABORTING) { + request.abortableTasks.delete(task); + task.status = ABORTED; + var errorId = request.fatalError; + var model = stringify(serializeByValueID(errorId)); + emitModelChunk(request, task.id, model); + return; + } // Something suspended again, let's pick it back up later. + + + task.status = PENDING$1; + task.thenableState = getThenableStateAfterSuspending(); var ping = task.ping; x.then(ping, ping); - task.thenableState = getThenableStateAfterSuspending(); return; } else if (x.$$typeof === REACT_POSTPONE_TYPE) { request.abortableTasks.delete(task); @@ -4231,6 +4310,17 @@ function retryTask(request, task) { } } + if (x === AbortSigil) { + request.abortableTasks.delete(task); + task.status = ABORTED; + var _errorId3 = request.fatalError; + + var _model = stringify(serializeByValueID(_errorId3)); + + emitModelChunk(request, task.id, _model); + return; + } + request.abortableTasks.delete(task); task.status = ERRORED$1; var digest = logRecoverableError(request, x); @@ -4292,6 +4382,11 @@ function performWork(request) { } function abortTask(task, request, errorId) { + if (task.status === RENDERING) { + // This task will be aborted by the render + return; + } + task.status = ABORTED; // Instead of emitting an error per task.id, we emit a model that only // has a single value referencing the error. @@ -4388,6 +4483,7 @@ function flushCompletedChunks(request, destination) { cleanupTaintQueue(request); } + request.status = CLOSED; close$1(destination); request.destination = null; } @@ -4412,10 +4508,14 @@ function enqueueFlush(request) { request.pingedTasks.length === 0 && // If there is no destination there is nothing we can flush to. A flush will // happen when we start flowing again request.destination !== null) { - var destination = request.destination; request.flushScheduled = true; scheduleWork(function () { - return flushCompletedChunks(request, destination); + request.flushScheduled = false; + var destination = request.destination; + + if (destination) { + flushCompletedChunks(request, destination); + } }); } } @@ -4451,19 +4551,21 @@ function stopFlowing(request) { function abort(request, reason) { try { + request.status = ABORTING; var abortableTasks = request.abortableTasks; // We have tasks to abort. We'll emit one error row and then emit a reference // to that row from every row that's still remaining. if (abortableTasks.size > 0) { request.pendingChunks++; var errorId = request.nextChunkId++; + request.fatalError = errorId; if (enablePostpone && typeof reason === 'object' && reason !== null && reason.$$typeof === REACT_POSTPONE_TYPE) { var postponeInstance = reason; logPostpone(request, postponeInstance.message); emitPostponeChunk(request, errorId, postponeInstance); } else { - var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason; + var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : typeof reason === 'object' && reason !== null && typeof reason.then === 'function' ? new Error('The render was aborted by the server with a promise.') : reason; var digest = logRecoverableError(request, error); emitErrorChunk(request, errorId, digest, error); } @@ -4485,7 +4587,7 @@ function abort(request, reason) { // We create an alternative reason for it instead. _error = new Error('The render was aborted due to being postponed.'); } else { - _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason; + _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : typeof reason === 'object' && reason !== null && typeof reason.then === 'function' ? new Error('The render was aborted by the server with a promise.') : reason; } abortListeners.forEach(function (callback) { diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.edge.production.js b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.edge.production.js index 34835be6eaec0..d9ab3f8f69859 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.edge.production.js +++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.edge.production.js @@ -10,7 +10,21 @@ "use strict"; var ReactDOM = require("react-dom"), - React = require("react"), + React = require("react"); +function handleErrorInNextTick(error) { + setTimeout(function () { + throw error; + }); +} +var LocalPromise = Promise, + scheduleMicrotask = + "function" === typeof queueMicrotask + ? queueMicrotask + : function (callback) { + LocalPromise.resolve(null) + .then(callback) + .catch(handleErrorInNextTick); + }, currentView = null, writtenBytes = 0; function writeChunkAndReturn(destination, chunk) { @@ -678,6 +692,7 @@ if (!ReactSharedInternalsServer) ); var ObjectPrototype = Object.prototype, stringify = JSON.stringify, + AbortSigil = {}, TaintRegistryObjects = ReactSharedInternalsServer.TaintRegistryObjects, TaintRegistryValues = ReactSharedInternalsServer.TaintRegistryValues, TaintRegistryByteLengths = @@ -791,6 +806,14 @@ function serializeThenable(request, task, thenable) { newTask.id ); default: + if (1 === request.status) + return ( + (newTask.status = 3), + (task = stringify(serializeByValueID(request.fatalError))), + emitModelChunk(request, newTask.id, task), + request.abortableTasks.delete(newTask), + newTask.id + ); "string" !== typeof thenable.status && ((thenable.status = "pending"), thenable.then( @@ -1000,6 +1023,7 @@ function renderFunctionComponent(request, task, key, Component, props) { thenableIndexCounter = 0; thenableState = prevThenableState; Component = Component(props, void 0); + if (1 === request.status) throw AbortSigil; if ( "object" === typeof Component && null !== Component && @@ -1097,6 +1121,7 @@ function renderElement(request, task, type, key, ref, props) { case REACT_LAZY_TYPE: var init = type._init; type = init(type._payload); + if (1 === request.status) throw AbortSigil; return renderElement(request, task, type, key, ref, props); case REACT_FORWARD_REF_TYPE: return renderFunctionComponent(request, task, key, type.render, props); @@ -1113,9 +1138,9 @@ function pingTask(request, task) { pingedTasks.push(task); 1 === pingedTasks.length && ((request.flushScheduled = null !== request.destination), - setTimeout(function () { + scheduleMicrotask(function () { return performWork(request); - }, 0)); + })); } function createTask(request, model, keyPath, implicitSlot, abortSet) { request.pendingChunks++; @@ -1135,79 +1160,7 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) { return pingTask(request, task); }, toJSON: function (parentPropertyName, value) { - a: { - var prevKeyPath = task.keyPath, - prevImplicitSlot = task.implicitSlot; - try { - var JSCompiler_inline_result = renderModelDestructive( - request, - task, - this, - parentPropertyName, - value - ); - } catch (thrownValue) { - parentPropertyName = - thrownValue === SuspenseException - ? getSuspendedThenable() - : thrownValue; - value = task.model; - value = - "object" === typeof value && - null !== value && - (value.$$typeof === REACT_ELEMENT_TYPE || - value.$$typeof === REACT_LAZY_TYPE); - if ( - "object" === typeof parentPropertyName && - null !== parentPropertyName - ) { - if ("function" === typeof parentPropertyName.then) { - JSCompiler_inline_result = createTask( - request, - task.model, - task.keyPath, - task.implicitSlot, - request.abortableTasks - ); - var ping = JSCompiler_inline_result.ping; - parentPropertyName.then(ping, ping); - JSCompiler_inline_result.thenableState = - getThenableStateAfterSuspending(); - task.keyPath = prevKeyPath; - task.implicitSlot = prevImplicitSlot; - JSCompiler_inline_result = value - ? "$L" + JSCompiler_inline_result.id.toString(16) - : serializeByValueID(JSCompiler_inline_result.id); - break a; - } - if (parentPropertyName.$$typeof === REACT_POSTPONE_TYPE) { - request.pendingChunks++; - JSCompiler_inline_result = request.nextChunkId++; - logPostpone(request, parentPropertyName.message); - emitPostponeChunk(request, JSCompiler_inline_result); - task.keyPath = prevKeyPath; - task.implicitSlot = prevImplicitSlot; - JSCompiler_inline_result = value - ? "$L" + JSCompiler_inline_result.toString(16) - : serializeByValueID(JSCompiler_inline_result); - break a; - } - } - task.keyPath = prevKeyPath; - task.implicitSlot = prevImplicitSlot; - if (value) - request.pendingChunks++, - (prevKeyPath = request.nextChunkId++), - (prevImplicitSlot = logRecoverableError( - request, - parentPropertyName - )), - emitErrorChunk(request, prevKeyPath, prevImplicitSlot), - (JSCompiler_inline_result = "$L" + prevKeyPath.toString(16)); - else throw parentPropertyName; - } - } - return JSCompiler_inline_result; + return renderModel(request, task, this, parentPropertyName, value); }, thenableState: null }; @@ -1217,6 +1170,9 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) { function serializeByValueID(id) { return "$" + id.toString(16); } +function serializeLazyID(id) { + return "$L" + id.toString(16); +} function encodeReferenceChunk(request, id, reference) { request = stringify(reference); id = id.toString(16) + ":" + request + "\n"; @@ -1235,7 +1191,7 @@ function serializeClientReference( existingId = writtenClientReferences.get(clientReferenceKey); if (void 0 !== existingId) return parent[0] === REACT_ELEMENT_TYPE && "1" === parentPropertyName - ? "$L" + existingId.toString(16) + ? serializeLazyID(existingId) : serializeByValueID(existingId); try { var config = request.bundlerConfig, @@ -1267,7 +1223,7 @@ function serializeClientReference( request.completedImportChunks.push(processedChunk); writtenClientReferences.set(clientReferenceKey, importId); return parent[0] === REACT_ELEMENT_TYPE && "1" === parentPropertyName - ? "$L" + importId.toString(16) + ? serializeLazyID(importId) : serializeByValueID(importId); } catch (x) { return ( @@ -1322,6 +1278,74 @@ function serializeBlob(request, blob) { return "$B" + newTask.id.toString(16); } var modelRoot = !1; +function renderModel(request, task, parent, key, value) { + var prevKeyPath = task.keyPath, + prevImplicitSlot = task.implicitSlot; + try { + return renderModelDestructive(request, task, parent, key, value); + } catch (thrownValue) { + parent = task.model; + parent = + "object" === typeof parent && + null !== parent && + (parent.$$typeof === REACT_ELEMENT_TYPE || + parent.$$typeof === REACT_LAZY_TYPE); + key = + thrownValue === SuspenseException ? getSuspendedThenable() : thrownValue; + if ("object" === typeof key && null !== key) { + if ("function" === typeof key.then) { + if (1 === request.status) + return ( + (task.status = 3), + (request = request.fatalError), + parent ? serializeLazyID(request) : serializeByValueID(request) + ); + request = createTask( + request, + task.model, + task.keyPath, + task.implicitSlot, + request.abortableTasks + ); + value = request.ping; + key.then(value, value); + request.thenableState = getThenableStateAfterSuspending(); + task.keyPath = prevKeyPath; + task.implicitSlot = prevImplicitSlot; + return parent + ? serializeLazyID(request.id) + : serializeByValueID(request.id); + } + if (key.$$typeof === REACT_POSTPONE_TYPE) + return ( + request.pendingChunks++, + (value = request.nextChunkId++), + logPostpone(request, key.message), + emitPostponeChunk(request, value), + (task.keyPath = prevKeyPath), + (task.implicitSlot = prevImplicitSlot), + parent ? serializeLazyID(value) : serializeByValueID(value) + ); + } + if (thrownValue === AbortSigil) + return ( + (task.status = 3), + (request = request.fatalError), + parent ? serializeLazyID(request) : serializeByValueID(request) + ); + task.keyPath = prevKeyPath; + task.implicitSlot = prevImplicitSlot; + if (parent) + return ( + request.pendingChunks++, + (task = request.nextChunkId++), + (prevKeyPath = logRecoverableError(request, key)), + emitErrorChunk(request, task, prevKeyPath), + serializeLazyID(task) + ); + throw key; + } +} function renderModelDestructive( request, task, @@ -1358,12 +1382,11 @@ function renderModelDestructive( parentPropertyName ); case REACT_LAZY_TYPE: - return ( - (task.thenableState = null), - (parentPropertyName = value._init), - (value = parentPropertyName(value._payload)), - renderModelDestructive(request, task, emptyRoot, "", value) - ); + task.thenableState = null; + parentPropertyName = value._init; + value = parentPropertyName(value._payload); + if (1 === request.status) throw AbortSigil; + return renderModelDestructive(request, task, emptyRoot, "", value); case REACT_LEGACY_ELEMENT_TYPE: throw Error( 'A React Element from an older version of React was rendered. This is not supported. It can happen if:\n- Multiple copies of the "react" package is used.\n- A library pre-bundled an old copy of "react" or "react/jsx-runtime".\n- A compiler tries to "inline" JSX instead of using the runtime.' @@ -1650,8 +1673,8 @@ function logRecoverableError(request, error) { function fatalError(request, error) { cleanupTaintQueue(request); null !== request.destination - ? ((request.status = 2), closeWithError(request.destination, error)) - : ((request.status = 1), (request.fatalError = error)); + ? ((request.status = 3), closeWithError(request.destination, error)) + : ((request.status = 2), (request.fatalError = error)); } function emitPostponeChunk(request, id) { id = id.toString(16) + ":P\n"; @@ -1740,7 +1763,8 @@ function emitChunk(request, task, value) { } var emptyRoot = {}; function retryTask(request, task) { - if (0 === task.status) + if (0 === task.status) { + task.status = 5; try { modelRoot = task.model; var resolvedModel = renderModelDestructive( @@ -1769,9 +1793,17 @@ function retryTask(request, task) { : thrownValue; if ("object" === typeof x && null !== x) { if ("function" === typeof x.then) { + if (1 === request.status) { + request.abortableTasks.delete(task); + task.status = 3; + var model = stringify(serializeByValueID(request.fatalError)); + emitModelChunk(request, task.id, model); + return; + } + task.status = 0; + task.thenableState = getThenableStateAfterSuspending(); var ping = task.ping; x.then(ping, ping); - task.thenableState = getThenableStateAfterSuspending(); return; } if (x.$$typeof === REACT_POSTPONE_TYPE) { @@ -1782,12 +1814,20 @@ function retryTask(request, task) { return; } } - request.abortableTasks.delete(task); - task.status = 4; - var digest = logRecoverableError(request, x); - emitErrorChunk(request, task.id, digest); + if (x === AbortSigil) { + request.abortableTasks.delete(task); + task.status = 3; + var model$23 = stringify(serializeByValueID(request.fatalError)); + emitModelChunk(request, task.id, model$23); + } else { + request.abortableTasks.delete(task); + task.status = 4; + var digest = logRecoverableError(request, x); + emitErrorChunk(request, task.id, digest); + } } finally { } + } } function performWork(request) { var prevDispatcher = ReactSharedInternalsServer.H; @@ -1846,6 +1886,7 @@ function flushCompletedChunks(request, destination) { } 0 === request.pendingChunks && (cleanupTaintQueue(request), + (request.status = 3), destination.close(), (request.destination = null)); } @@ -1860,24 +1901,24 @@ function startWork(request) { }, 0); } function enqueueFlush(request) { - if ( - !1 === request.flushScheduled && + !1 === request.flushScheduled && 0 === request.pingedTasks.length && - null !== request.destination - ) { - var destination = request.destination; - request.flushScheduled = !0; + null !== request.destination && + ((request.flushScheduled = !0), setTimeout(function () { - return flushCompletedChunks(request, destination); - }, 0); - } + request.flushScheduled = !1; + var destination = request.destination; + destination && flushCompletedChunks(request, destination); + }, 0)); } function abort(request, reason) { try { + request.status = 1; var abortableTasks = request.abortableTasks; if (0 < abortableTasks.size) { request.pendingChunks++; var errorId = request.nextChunkId++; + request.fatalError = errorId; if ( "object" === typeof reason && null !== reason && @@ -1889,37 +1930,47 @@ function abort(request, reason) { var error = void 0 === reason ? Error("The render was aborted by the server without a reason.") + : "object" === typeof reason && + null !== reason && + "function" === typeof reason.then + ? Error("The render was aborted by the server with a promise.") : reason, digest = logRecoverableError(request, error); emitErrorChunk(request, errorId, digest, error); } abortableTasks.forEach(function (task) { - task.status = 3; - var ref = serializeByValueID(errorId); - task = encodeReferenceChunk(request, task.id, ref); - request.completedErrorChunks.push(task); + if (5 !== task.status) { + task.status = 3; + var ref = serializeByValueID(errorId); + task = encodeReferenceChunk(request, task.id, ref); + request.completedErrorChunks.push(task); + } }); abortableTasks.clear(); } var abortListeners = request.abortListeners; if (0 < abortListeners.size) { - var error$26 = + var error$30 = "object" === typeof reason && null !== reason && reason.$$typeof === REACT_POSTPONE_TYPE ? Error("The render was aborted due to being postponed.") : void 0 === reason ? Error("The render was aborted by the server without a reason.") + : "object" === typeof reason && + null !== reason && + "function" === typeof reason.then + ? Error("The render was aborted by the server with a promise.") : reason; abortListeners.forEach(function (callback) { - return callback(error$26); + return callback(error$30); }); abortListeners.clear(); } null !== request.destination && flushCompletedChunks(request, request.destination); - } catch (error$27) { - logRecoverableError(request, error$27), fatalError(request, error$27); + } catch (error$31) { + logRecoverableError(request, error$31), fatalError(request, error$31); } } function resolveServerReference(bundlerConfig, id) { @@ -2361,8 +2412,8 @@ function parseReadableStream(response, reference, type) { (previousBlockedChunk = chunk)); } else { chunk = previousBlockedChunk; - var chunk$30 = createPendingChunk(response); - chunk$30.then( + var chunk$34 = createPendingChunk(response); + chunk$34.then( function (v) { return controller.enqueue(v); }, @@ -2370,10 +2421,10 @@ function parseReadableStream(response, reference, type) { return controller.error(e); } ); - previousBlockedChunk = chunk$30; + previousBlockedChunk = chunk$34; chunk.then(function () { - previousBlockedChunk === chunk$30 && (previousBlockedChunk = null); - resolveModelChunk(chunk$30, json, -1); + previousBlockedChunk === chunk$34 && (previousBlockedChunk = null); + resolveModelChunk(chunk$34, json, -1); }); } }, @@ -2741,9 +2792,9 @@ exports.renderToReadableStream = function (model, turbopackMap, options) { startWork(request); }, pull: function (controller) { - if (1 === request.status) - (request.status = 2), closeWithError(controller, request.fatalError); - else if (2 !== request.status && null === request.destination) { + if (2 === request.status) + (request.status = 3), closeWithError(controller, request.fatalError); + else if (3 !== request.status && null === request.destination) { request.destination = controller; try { flushCompletedChunks(request, controller); diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.development.js b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.development.js index 85d49dcc17329..a62fd90f41875 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.development.js +++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.development.js @@ -102,6 +102,7 @@ function printWarning(level, format, args, currentStack) { function scheduleWork(callback) { setImmediate(callback); } +var scheduleMicrotask = queueMicrotask; function flushBuffered(destination) { // If we don't have any more data to send right now. // Flush whatever is in the buffer to the wire. @@ -1816,6 +1817,8 @@ var PENDING$1 = 0; var COMPLETED = 1; var ABORTED = 3; var ERRORED$1 = 4; +var RENDERING = 5; +var AbortSigil = {}; var TaintRegistryObjects = ReactSharedInternals.TaintRegistryObjects, TaintRegistryValues = ReactSharedInternals.TaintRegistryValues, TaintRegistryByteLengths = ReactSharedInternals.TaintRegistryByteLengths, @@ -1854,8 +1857,9 @@ function defaultPostponeHandler(reason) {// Noop } var OPEN = 0; -var CLOSING = 1; -var CLOSED = 2; +var ABORTING = 1; +var CLOSING = 2; +var CLOSED = 3; function createRequest(model, bundlerConfig, onError, identifierPrefix, onPostpone, environmentName, temporaryReferences) { if (ReactSharedInternals.A !== null && ReactSharedInternals.A !== DefaultAsyncDispatcher) { throw new Error('Currently React only supports one RSC renderer at a time.'); @@ -1961,6 +1965,16 @@ function serializeThenable(request, task, thenable) { default: { + if (request.status === ABORTING) { + // We can no longer accept any resolved values + newTask.status = ABORTED; + var errorId = request.fatalError; + var model = stringify(serializeByValueID(errorId)); + emitModelChunk(request, newTask.id, model); + request.abortableTasks.delete(newTask); + return newTask.id; + } + if (typeof thenable.status === 'string') { // Only instrument the thenable if the status if not defined. If // it's defined, but an unknown value, assume it's been instrumented by @@ -2355,6 +2369,13 @@ validated) // DEV-only result = callComponentInDEV(Component, props, componentDebugInfo); } + if (request.status === ABORTING) { + // If we aborted during rendering we should interrupt the render but + // we don't need to provide an error because the renderer will encode + // the abort error as the reason. + throw AbortSigil; + } + if (typeof result === 'object' && result !== null && !isClientReference(result)) { if (typeof result.then === 'function') { // When the return value is in children position we can resolve it immediately, @@ -2727,6 +2748,13 @@ validated) // DEV only wrappedType = callLazyInitInDEV(type); } + if (request.status === ABORTING) { + // lazy initializers are user code and could abort during render + // we don't wan to return any value resolved from the lazy initializer + // if it aborts so we interrupt rendering here + throw AbortSigil; + } + return renderElement(request, task, wrappedType, key, ref, props, owner, stack, validated); } @@ -2751,7 +2779,7 @@ function pingTask(request, task) { if (pingedTasks.length === 1) { request.flushScheduled = request.destination !== null; - scheduleWork(function () { + scheduleMicrotask(function () { return performWork(request); }); } @@ -3049,21 +3077,32 @@ function renderModel(request, task, parent, key, value) { try { return renderModelDestructive(request, task, parent, key, value); } catch (thrownValue) { + // If the suspended/errored value was an element or lazy it can be reduced + // to a lazy reference, so that it doesn't error the parent. + var model = task.model; + var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE); var x = thrownValue === SuspenseException ? // This is a special type of exception used for Suspense. For historical // reasons, the rest of the Suspense implementation expects the thrown // value to be a thenable, because before `use` existed that was the // (unstable) API for suspending. This implementation detail can change // later, once we deprecate the old API in favor of `use`. - getSuspendedThenable() : thrownValue; // If the suspended/errored value was an element or lazy it can be reduced - // to a lazy reference, so that it doesn't error the parent. - - var model = task.model; - var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE); + getSuspendedThenable() : thrownValue; if (typeof x === 'object' && x !== null) { // $FlowFixMe[method-unbinding] if (typeof x.then === 'function') { - // Something suspended, we'll need to create a new task and resolve it later. + if (request.status === ABORTING) { + task.status = ABORTED; + var errorId = request.fatalError; + + if (wasReactNode) { + return serializeLazyID(errorId); + } + + return serializeByValueID(errorId); + } // Something suspended, we'll need to create a new task and resolve it later. + + var newTask = createTask(request, task.model, task.keyPath, task.implicitSlot, request.abortableTasks); var ping = newTask.ping; x.then(ping, ping); @@ -3097,6 +3136,17 @@ function renderModel(request, task, parent, key, value) { return serializeByValueID(postponeId); } + } + + if (thrownValue === AbortSigil) { + task.status = ABORTED; + var _errorId = request.fatalError; + + if (wasReactNode) { + return serializeLazyID(_errorId); + } + + return serializeByValueID(_errorId); } // Restore the context. We assume that this will be restored by the inner // functions in case nothing throws so we don't use "finally" here. @@ -3109,10 +3159,12 @@ function renderModel(request, task, parent, key, value) { // We'll replace this element with a lazy reference that throws on the client // once it gets rendered. request.pendingChunks++; - var errorId = request.nextChunkId++; + + var _errorId2 = request.nextChunkId++; + var digest = logRecoverableError(request, x); - emitErrorChunk(request, errorId, digest, x); - return serializeLazyID(errorId); + emitErrorChunk(request, _errorId2, digest, x); + return serializeLazyID(_errorId2); } // Something errored but it was not in a React Node. There's no need to serialize // it by value because it'll just error the whole parent row anyway so we can // just stop any siblings and error the whole parent row. @@ -3216,6 +3268,13 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value resolvedModel = callLazyInitInDEV(lazy); } + if (request.status === ABORTING) { + // lazy initializers are user code and could abort during render + // we don't wan to return any value resolved from the lazy initializer + // if it aborts so we interrupt rendering here + throw AbortSigil; + } + { var _debugInfo = lazy._debugInfo; @@ -4207,6 +4266,7 @@ function retryTask(request, task) { } var prevDebugID = debugID; + task.status = RENDERING; try { // Track the root so we know that we have to emit this object even though it @@ -4263,10 +4323,20 @@ function retryTask(request, task) { if (typeof x === 'object' && x !== null) { // $FlowFixMe[method-unbinding] if (typeof x.then === 'function') { - // Something suspended again, let's pick it back up later. + if (request.status === ABORTING) { + request.abortableTasks.delete(task); + task.status = ABORTED; + var errorId = request.fatalError; + var model = stringify(serializeByValueID(errorId)); + emitModelChunk(request, task.id, model); + return; + } // Something suspended again, let's pick it back up later. + + + task.status = PENDING$1; + task.thenableState = getThenableStateAfterSuspending(); var ping = task.ping; x.then(ping, ping); - task.thenableState = getThenableStateAfterSuspending(); return; } else if (x.$$typeof === REACT_POSTPONE_TYPE) { request.abortableTasks.delete(task); @@ -4278,6 +4348,17 @@ function retryTask(request, task) { } } + if (x === AbortSigil) { + request.abortableTasks.delete(task); + task.status = ABORTED; + var _errorId3 = request.fatalError; + + var _model = stringify(serializeByValueID(_errorId3)); + + emitModelChunk(request, task.id, _model); + return; + } + request.abortableTasks.delete(task); task.status = ERRORED$1; var digest = logRecoverableError(request, x); @@ -4339,6 +4420,11 @@ function performWork(request) { } function abortTask(task, request, errorId) { + if (task.status === RENDERING) { + // This task will be aborted by the render + return; + } + task.status = ABORTED; // Instead of emitting an error per task.id, we emit a model that only // has a single value referencing the error. @@ -4437,6 +4523,7 @@ function flushCompletedChunks(request, destination) { cleanupTaintQueue(request); } + request.status = CLOSED; close$1(destination); request.destination = null; } @@ -4457,10 +4544,14 @@ function enqueueFlush(request) { request.pingedTasks.length === 0 && // If there is no destination there is nothing we can flush to. A flush will // happen when we start flowing again request.destination !== null) { - var destination = request.destination; request.flushScheduled = true; scheduleWork(function () { - return flushCompletedChunks(request, destination); + request.flushScheduled = false; + var destination = request.destination; + + if (destination) { + flushCompletedChunks(request, destination); + } }); } } @@ -4496,19 +4587,21 @@ function stopFlowing(request) { function abort(request, reason) { try { + request.status = ABORTING; var abortableTasks = request.abortableTasks; // We have tasks to abort. We'll emit one error row and then emit a reference // to that row from every row that's still remaining. if (abortableTasks.size > 0) { request.pendingChunks++; var errorId = request.nextChunkId++; + request.fatalError = errorId; if (enablePostpone && typeof reason === 'object' && reason !== null && reason.$$typeof === REACT_POSTPONE_TYPE) { var postponeInstance = reason; logPostpone(request, postponeInstance.message); emitPostponeChunk(request, errorId, postponeInstance); } else { - var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason; + var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : typeof reason === 'object' && reason !== null && typeof reason.then === 'function' ? new Error('The render was aborted by the server with a promise.') : reason; var digest = logRecoverableError(request, error); emitErrorChunk(request, errorId, digest, error); } @@ -4530,7 +4623,7 @@ function abort(request, reason) { // We create an alternative reason for it instead. _error = new Error('The render was aborted due to being postponed.'); } else { - _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason; + _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : typeof reason === 'object' && reason !== null && typeof reason.then === 'function' ? new Error('The render was aborted by the server with a promise.') : reason; } abortListeners.forEach(function (callback) { diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.production.js b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.production.js index e6d93f95bb65c..47f13725808c8 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.production.js +++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.production.js @@ -14,6 +14,7 @@ require("crypto"); var async_hooks = require("async_hooks"), ReactDOM = require("react-dom"), React = require("react"), + scheduleMicrotask = queueMicrotask, currentView = null, writtenBytes = 0, destinationHasCapacity = !0; @@ -708,6 +709,7 @@ if (!ReactSharedInternalsServer) ); var ObjectPrototype = Object.prototype, stringify = JSON.stringify, + AbortSigil = {}, TaintRegistryObjects = ReactSharedInternalsServer.TaintRegistryObjects, TaintRegistryValues = ReactSharedInternalsServer.TaintRegistryValues, TaintRegistryByteLengths = @@ -818,6 +820,14 @@ function serializeThenable(request, task, thenable) { newTask.id ); default: + if (1 === request.status) + return ( + (newTask.status = 3), + (task = stringify(serializeByValueID(request.fatalError))), + emitModelChunk(request, newTask.id, task), + request.abortableTasks.delete(newTask), + newTask.id + ); "string" !== typeof thenable.status && ((thenable.status = "pending"), thenable.then( @@ -1026,6 +1036,7 @@ function renderFunctionComponent(request, task, key, Component, props) { thenableIndexCounter = 0; thenableState = prevThenableState; Component = Component(props, void 0); + if (1 === request.status) throw AbortSigil; if ( "object" === typeof Component && null !== Component && @@ -1123,6 +1134,7 @@ function renderElement(request, task, type, key, ref, props) { case REACT_LAZY_TYPE: var init = type._init; type = init(type._payload); + if (1 === request.status) throw AbortSigil; return renderElement(request, task, type, key, ref, props); case REACT_FORWARD_REF_TYPE: return renderFunctionComponent(request, task, key, type.render, props); @@ -1139,7 +1151,7 @@ function pingTask(request, task) { pingedTasks.push(task); 1 === pingedTasks.length && ((request.flushScheduled = null !== request.destination), - setImmediate(function () { + scheduleMicrotask(function () { return performWork(request); })); } @@ -1161,79 +1173,7 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) { return pingTask(request, task); }, toJSON: function (parentPropertyName, value) { - a: { - var prevKeyPath = task.keyPath, - prevImplicitSlot = task.implicitSlot; - try { - var JSCompiler_inline_result = renderModelDestructive( - request, - task, - this, - parentPropertyName, - value - ); - } catch (thrownValue) { - parentPropertyName = - thrownValue === SuspenseException - ? getSuspendedThenable() - : thrownValue; - value = task.model; - value = - "object" === typeof value && - null !== value && - (value.$$typeof === REACT_ELEMENT_TYPE || - value.$$typeof === REACT_LAZY_TYPE); - if ( - "object" === typeof parentPropertyName && - null !== parentPropertyName - ) { - if ("function" === typeof parentPropertyName.then) { - JSCompiler_inline_result = createTask( - request, - task.model, - task.keyPath, - task.implicitSlot, - request.abortableTasks - ); - var ping = JSCompiler_inline_result.ping; - parentPropertyName.then(ping, ping); - JSCompiler_inline_result.thenableState = - getThenableStateAfterSuspending(); - task.keyPath = prevKeyPath; - task.implicitSlot = prevImplicitSlot; - JSCompiler_inline_result = value - ? "$L" + JSCompiler_inline_result.id.toString(16) - : serializeByValueID(JSCompiler_inline_result.id); - break a; - } - if (parentPropertyName.$$typeof === REACT_POSTPONE_TYPE) { - request.pendingChunks++; - JSCompiler_inline_result = request.nextChunkId++; - logPostpone(request, parentPropertyName.message); - emitPostponeChunk(request, JSCompiler_inline_result); - task.keyPath = prevKeyPath; - task.implicitSlot = prevImplicitSlot; - JSCompiler_inline_result = value - ? "$L" + JSCompiler_inline_result.toString(16) - : serializeByValueID(JSCompiler_inline_result); - break a; - } - } - task.keyPath = prevKeyPath; - task.implicitSlot = prevImplicitSlot; - if (value) - request.pendingChunks++, - (prevKeyPath = request.nextChunkId++), - (prevImplicitSlot = logRecoverableError( - request, - parentPropertyName - )), - emitErrorChunk(request, prevKeyPath, prevImplicitSlot), - (JSCompiler_inline_result = "$L" + prevKeyPath.toString(16)); - else throw parentPropertyName; - } - } - return JSCompiler_inline_result; + return renderModel(request, task, this, parentPropertyName, value); }, thenableState: null }; @@ -1243,6 +1183,9 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) { function serializeByValueID(id) { return "$" + id.toString(16); } +function serializeLazyID(id) { + return "$L" + id.toString(16); +} function encodeReferenceChunk(request, id, reference) { request = stringify(reference); return id.toString(16) + ":" + request + "\n"; @@ -1260,7 +1203,7 @@ function serializeClientReference( existingId = writtenClientReferences.get(clientReferenceKey); if (void 0 !== existingId) return parent[0] === REACT_ELEMENT_TYPE && "1" === parentPropertyName - ? "$L" + existingId.toString(16) + ? serializeLazyID(existingId) : serializeByValueID(existingId); try { var config = request.bundlerConfig, @@ -1291,7 +1234,7 @@ function serializeClientReference( request.completedImportChunks.push(processedChunk); writtenClientReferences.set(clientReferenceKey, importId); return parent[0] === REACT_ELEMENT_TYPE && "1" === parentPropertyName - ? "$L" + importId.toString(16) + ? serializeLazyID(importId) : serializeByValueID(importId); } catch (x) { return ( @@ -1346,6 +1289,74 @@ function serializeBlob(request, blob) { return "$B" + newTask.id.toString(16); } var modelRoot = !1; +function renderModel(request, task, parent, key, value) { + var prevKeyPath = task.keyPath, + prevImplicitSlot = task.implicitSlot; + try { + return renderModelDestructive(request, task, parent, key, value); + } catch (thrownValue) { + parent = task.model; + parent = + "object" === typeof parent && + null !== parent && + (parent.$$typeof === REACT_ELEMENT_TYPE || + parent.$$typeof === REACT_LAZY_TYPE); + key = + thrownValue === SuspenseException ? getSuspendedThenable() : thrownValue; + if ("object" === typeof key && null !== key) { + if ("function" === typeof key.then) { + if (1 === request.status) + return ( + (task.status = 3), + (request = request.fatalError), + parent ? serializeLazyID(request) : serializeByValueID(request) + ); + request = createTask( + request, + task.model, + task.keyPath, + task.implicitSlot, + request.abortableTasks + ); + value = request.ping; + key.then(value, value); + request.thenableState = getThenableStateAfterSuspending(); + task.keyPath = prevKeyPath; + task.implicitSlot = prevImplicitSlot; + return parent + ? serializeLazyID(request.id) + : serializeByValueID(request.id); + } + if (key.$$typeof === REACT_POSTPONE_TYPE) + return ( + request.pendingChunks++, + (value = request.nextChunkId++), + logPostpone(request, key.message), + emitPostponeChunk(request, value), + (task.keyPath = prevKeyPath), + (task.implicitSlot = prevImplicitSlot), + parent ? serializeLazyID(value) : serializeByValueID(value) + ); + } + if (thrownValue === AbortSigil) + return ( + (task.status = 3), + (request = request.fatalError), + parent ? serializeLazyID(request) : serializeByValueID(request) + ); + task.keyPath = prevKeyPath; + task.implicitSlot = prevImplicitSlot; + if (parent) + return ( + request.pendingChunks++, + (task = request.nextChunkId++), + (prevKeyPath = logRecoverableError(request, key)), + emitErrorChunk(request, task, prevKeyPath), + serializeLazyID(task) + ); + throw key; + } +} function renderModelDestructive( request, task, @@ -1382,12 +1393,11 @@ function renderModelDestructive( parentPropertyName ); case REACT_LAZY_TYPE: - return ( - (task.thenableState = null), - (parentPropertyName = value._init), - (value = parentPropertyName(value._payload)), - renderModelDestructive(request, task, emptyRoot, "", value) - ); + task.thenableState = null; + parentPropertyName = value._init; + value = parentPropertyName(value._payload); + if (1 === request.status) throw AbortSigil; + return renderModelDestructive(request, task, emptyRoot, "", value); case REACT_LEGACY_ELEMENT_TYPE: throw Error( 'A React Element from an older version of React was rendered. This is not supported. It can happen if:\n- Multiple copies of the "react" package is used.\n- A library pre-bundled an old copy of "react" or "react/jsx-runtime".\n- A compiler tries to "inline" JSX instead of using the runtime.' @@ -1668,8 +1678,8 @@ function logRecoverableError(request, error) { function fatalError(request, error) { cleanupTaintQueue(request); null !== request.destination - ? ((request.status = 2), request.destination.destroy(error)) - : ((request.status = 1), (request.fatalError = error)); + ? ((request.status = 3), request.destination.destroy(error)) + : ((request.status = 2), (request.fatalError = error)); } function emitPostponeChunk(request, id) { id = id.toString(16) + ":P\n"; @@ -1680,6 +1690,10 @@ function emitErrorChunk(request, id, digest) { id = id.toString(16) + ":E" + stringify(digest) + "\n"; request.completedErrorChunks.push(id); } +function emitModelChunk(request, id, json) { + id = id.toString(16) + ":" + json + "\n"; + request.completedRegularChunks.push(id); +} function emitTypedArrayChunk(request, id, tag, typedArray) { if (TaintRegistryByteLengths.has(typedArray.byteLength)) { var tainted = TaintRegistryValues.get( @@ -1746,12 +1760,12 @@ function emitChunk(request, task, value) { : value instanceof DataView ? emitTypedArrayChunk(request, id, "V", value) : ((value = stringify(value, task.toJSON)), - (task = task.id.toString(16) + ":" + value + "\n"), - request.completedRegularChunks.push(task)); + emitModelChunk(request, task.id, value)); } var emptyRoot = {}; function retryTask(request, task) { - if (0 === task.status) + if (0 === task.status) { + task.status = 5; try { modelRoot = task.model; var resolvedModel = renderModelDestructive( @@ -1768,9 +1782,8 @@ function retryTask(request, task) { request.writtenObjects.set(resolvedModel, serializeByValueID(task.id)), emitChunk(request, task, resolvedModel); else { - var json = stringify(resolvedModel), - processedChunk = task.id.toString(16) + ":" + json + "\n"; - request.completedRegularChunks.push(processedChunk); + var json = stringify(resolvedModel); + emitModelChunk(request, task.id, json); } request.abortableTasks.delete(task); task.status = 1; @@ -1781,9 +1794,17 @@ function retryTask(request, task) { : thrownValue; if ("object" === typeof x && null !== x) { if ("function" === typeof x.then) { + if (1 === request.status) { + request.abortableTasks.delete(task); + task.status = 3; + var model = stringify(serializeByValueID(request.fatalError)); + emitModelChunk(request, task.id, model); + return; + } + task.status = 0; + task.thenableState = getThenableStateAfterSuspending(); var ping = task.ping; x.then(ping, ping); - task.thenableState = getThenableStateAfterSuspending(); return; } if (x.$$typeof === REACT_POSTPONE_TYPE) { @@ -1794,12 +1815,20 @@ function retryTask(request, task) { return; } } - request.abortableTasks.delete(task); - task.status = 4; - var digest = logRecoverableError(request, x); - emitErrorChunk(request, task.id, digest); + if (x === AbortSigil) { + request.abortableTasks.delete(task); + task.status = 3; + var model$23 = stringify(serializeByValueID(request.fatalError)); + emitModelChunk(request, task.id, model$23); + } else { + request.abortableTasks.delete(task); + task.status = 4; + var digest = logRecoverableError(request, x); + emitErrorChunk(request, task.id, digest); + } } finally { } + } } function performWork(request) { var prevDispatcher = ReactSharedInternalsServer.H; @@ -1882,6 +1911,7 @@ function flushCompletedChunks(request, destination) { "function" === typeof destination.flush && destination.flush(); 0 === request.pendingChunks && (cleanupTaintQueue(request), + (request.status = 3), destination.end(), (request.destination = null)); } @@ -1892,22 +1922,20 @@ function startWork(request) { }); } function enqueueFlush(request) { - if ( - !1 === request.flushScheduled && + !1 === request.flushScheduled && 0 === request.pingedTasks.length && - null !== request.destination - ) { - var destination = request.destination; - request.flushScheduled = !0; + null !== request.destination && + ((request.flushScheduled = !0), setImmediate(function () { - return flushCompletedChunks(request, destination); - }); - } + request.flushScheduled = !1; + var destination = request.destination; + destination && flushCompletedChunks(request, destination); + })); } function startFlowing(request, destination) { - if (1 === request.status) - (request.status = 2), destination.destroy(request.fatalError); - else if (2 !== request.status && null === request.destination) { + if (2 === request.status) + (request.status = 3), destination.destroy(request.fatalError); + else if (3 !== request.status && null === request.destination) { request.destination = destination; try { flushCompletedChunks(request, destination); @@ -1918,10 +1946,12 @@ function startFlowing(request, destination) { } function abort(request, reason) { try { + request.status = 1; var abortableTasks = request.abortableTasks; if (0 < abortableTasks.size) { request.pendingChunks++; var errorId = request.nextChunkId++; + request.fatalError = errorId; if ( "object" === typeof reason && null !== reason && @@ -1933,37 +1963,47 @@ function abort(request, reason) { var error = void 0 === reason ? Error("The render was aborted by the server without a reason.") + : "object" === typeof reason && + null !== reason && + "function" === typeof reason.then + ? Error("The render was aborted by the server with a promise.") : reason, digest = logRecoverableError(request, error); emitErrorChunk(request, errorId, digest, error); } abortableTasks.forEach(function (task) { - task.status = 3; - var ref = serializeByValueID(errorId); - task = encodeReferenceChunk(request, task.id, ref); - request.completedErrorChunks.push(task); + if (5 !== task.status) { + task.status = 3; + var ref = serializeByValueID(errorId); + task = encodeReferenceChunk(request, task.id, ref); + request.completedErrorChunks.push(task); + } }); abortableTasks.clear(); } var abortListeners = request.abortListeners; if (0 < abortListeners.size) { - var error$26 = + var error$30 = "object" === typeof reason && null !== reason && reason.$$typeof === REACT_POSTPONE_TYPE ? Error("The render was aborted due to being postponed.") : void 0 === reason ? Error("The render was aborted by the server without a reason.") + : "object" === typeof reason && + null !== reason && + "function" === typeof reason.then + ? Error("The render was aborted by the server with a promise.") : reason; abortListeners.forEach(function (callback) { - return callback(error$26); + return callback(error$30); }); abortListeners.clear(); } null !== request.destination && flushCompletedChunks(request, request.destination); - } catch (error$27) { - logRecoverableError(request, error$27), fatalError(request, error$27); + } catch (error$31) { + logRecoverableError(request, error$31), fatalError(request, error$31); } } function resolveServerReference(bundlerConfig, id) { @@ -2405,8 +2445,8 @@ function parseReadableStream(response, reference, type) { (previousBlockedChunk = chunk)); } else { chunk = previousBlockedChunk; - var chunk$30 = createPendingChunk(response); - chunk$30.then( + var chunk$34 = createPendingChunk(response); + chunk$34.then( function (v) { return controller.enqueue(v); }, @@ -2414,10 +2454,10 @@ function parseReadableStream(response, reference, type) { return controller.error(e); } ); - previousBlockedChunk = chunk$30; + previousBlockedChunk = chunk$34; chunk.then(function () { - previousBlockedChunk === chunk$30 && (previousBlockedChunk = null); - resolveModelChunk(chunk$30, json, -1); + previousBlockedChunk === chunk$34 && (previousBlockedChunk = null); + resolveModelChunk(chunk$34, json, -1); }); } }, @@ -2775,12 +2815,12 @@ exports.decodeReplyFromBusboy = function (busboyStream, turbopackMap, options) { "React doesn't accept base64 encoded file uploads because we don't expect form data passed from a browser to ever encode data that way. If that's the wrong assumption, we can easily fix it." ); pendingFiles++; - var JSCompiler_object_inline_chunks_203 = []; + var JSCompiler_object_inline_chunks_205 = []; value.on("data", function (chunk) { - JSCompiler_object_inline_chunks_203.push(chunk); + JSCompiler_object_inline_chunks_205.push(chunk); }); value.on("end", function () { - var blob = new Blob(JSCompiler_object_inline_chunks_203, { + var blob = new Blob(JSCompiler_object_inline_chunks_205, { type: mimeType }); response._formData.append(name, blob, filename); diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.unbundled.development.js b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.unbundled.development.js index 79f18d994110e..f6d04eb95faec 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.unbundled.development.js +++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.unbundled.development.js @@ -102,6 +102,7 @@ function printWarning(level, format, args, currentStack) { function scheduleWork(callback) { setImmediate(callback); } +var scheduleMicrotask = queueMicrotask; function flushBuffered(destination) { // If we don't have any more data to send right now. // Flush whatever is in the buffer to the wire. @@ -1816,6 +1817,8 @@ var PENDING$1 = 0; var COMPLETED = 1; var ABORTED = 3; var ERRORED$1 = 4; +var RENDERING = 5; +var AbortSigil = {}; var TaintRegistryObjects = ReactSharedInternals.TaintRegistryObjects, TaintRegistryValues = ReactSharedInternals.TaintRegistryValues, TaintRegistryByteLengths = ReactSharedInternals.TaintRegistryByteLengths, @@ -1854,8 +1857,9 @@ function defaultPostponeHandler(reason) {// Noop } var OPEN = 0; -var CLOSING = 1; -var CLOSED = 2; +var ABORTING = 1; +var CLOSING = 2; +var CLOSED = 3; function createRequest(model, bundlerConfig, onError, identifierPrefix, onPostpone, environmentName, temporaryReferences) { if (ReactSharedInternals.A !== null && ReactSharedInternals.A !== DefaultAsyncDispatcher) { throw new Error('Currently React only supports one RSC renderer at a time.'); @@ -1961,6 +1965,16 @@ function serializeThenable(request, task, thenable) { default: { + if (request.status === ABORTING) { + // We can no longer accept any resolved values + newTask.status = ABORTED; + var errorId = request.fatalError; + var model = stringify(serializeByValueID(errorId)); + emitModelChunk(request, newTask.id, model); + request.abortableTasks.delete(newTask); + return newTask.id; + } + if (typeof thenable.status === 'string') { // Only instrument the thenable if the status if not defined. If // it's defined, but an unknown value, assume it's been instrumented by @@ -2355,6 +2369,13 @@ validated) // DEV-only result = callComponentInDEV(Component, props, componentDebugInfo); } + if (request.status === ABORTING) { + // If we aborted during rendering we should interrupt the render but + // we don't need to provide an error because the renderer will encode + // the abort error as the reason. + throw AbortSigil; + } + if (typeof result === 'object' && result !== null && !isClientReference(result)) { if (typeof result.then === 'function') { // When the return value is in children position we can resolve it immediately, @@ -2727,6 +2748,13 @@ validated) // DEV only wrappedType = callLazyInitInDEV(type); } + if (request.status === ABORTING) { + // lazy initializers are user code and could abort during render + // we don't wan to return any value resolved from the lazy initializer + // if it aborts so we interrupt rendering here + throw AbortSigil; + } + return renderElement(request, task, wrappedType, key, ref, props, owner, stack, validated); } @@ -2751,7 +2779,7 @@ function pingTask(request, task) { if (pingedTasks.length === 1) { request.flushScheduled = request.destination !== null; - scheduleWork(function () { + scheduleMicrotask(function () { return performWork(request); }); } @@ -3049,21 +3077,32 @@ function renderModel(request, task, parent, key, value) { try { return renderModelDestructive(request, task, parent, key, value); } catch (thrownValue) { + // If the suspended/errored value was an element or lazy it can be reduced + // to a lazy reference, so that it doesn't error the parent. + var model = task.model; + var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE); var x = thrownValue === SuspenseException ? // This is a special type of exception used for Suspense. For historical // reasons, the rest of the Suspense implementation expects the thrown // value to be a thenable, because before `use` existed that was the // (unstable) API for suspending. This implementation detail can change // later, once we deprecate the old API in favor of `use`. - getSuspendedThenable() : thrownValue; // If the suspended/errored value was an element or lazy it can be reduced - // to a lazy reference, so that it doesn't error the parent. - - var model = task.model; - var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE); + getSuspendedThenable() : thrownValue; if (typeof x === 'object' && x !== null) { // $FlowFixMe[method-unbinding] if (typeof x.then === 'function') { - // Something suspended, we'll need to create a new task and resolve it later. + if (request.status === ABORTING) { + task.status = ABORTED; + var errorId = request.fatalError; + + if (wasReactNode) { + return serializeLazyID(errorId); + } + + return serializeByValueID(errorId); + } // Something suspended, we'll need to create a new task and resolve it later. + + var newTask = createTask(request, task.model, task.keyPath, task.implicitSlot, request.abortableTasks); var ping = newTask.ping; x.then(ping, ping); @@ -3097,6 +3136,17 @@ function renderModel(request, task, parent, key, value) { return serializeByValueID(postponeId); } + } + + if (thrownValue === AbortSigil) { + task.status = ABORTED; + var _errorId = request.fatalError; + + if (wasReactNode) { + return serializeLazyID(_errorId); + } + + return serializeByValueID(_errorId); } // Restore the context. We assume that this will be restored by the inner // functions in case nothing throws so we don't use "finally" here. @@ -3109,10 +3159,12 @@ function renderModel(request, task, parent, key, value) { // We'll replace this element with a lazy reference that throws on the client // once it gets rendered. request.pendingChunks++; - var errorId = request.nextChunkId++; + + var _errorId2 = request.nextChunkId++; + var digest = logRecoverableError(request, x); - emitErrorChunk(request, errorId, digest, x); - return serializeLazyID(errorId); + emitErrorChunk(request, _errorId2, digest, x); + return serializeLazyID(_errorId2); } // Something errored but it was not in a React Node. There's no need to serialize // it by value because it'll just error the whole parent row anyway so we can // just stop any siblings and error the whole parent row. @@ -3216,6 +3268,13 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value resolvedModel = callLazyInitInDEV(lazy); } + if (request.status === ABORTING) { + // lazy initializers are user code and could abort during render + // we don't wan to return any value resolved from the lazy initializer + // if it aborts so we interrupt rendering here + throw AbortSigil; + } + { var _debugInfo = lazy._debugInfo; @@ -4207,6 +4266,7 @@ function retryTask(request, task) { } var prevDebugID = debugID; + task.status = RENDERING; try { // Track the root so we know that we have to emit this object even though it @@ -4263,10 +4323,20 @@ function retryTask(request, task) { if (typeof x === 'object' && x !== null) { // $FlowFixMe[method-unbinding] if (typeof x.then === 'function') { - // Something suspended again, let's pick it back up later. + if (request.status === ABORTING) { + request.abortableTasks.delete(task); + task.status = ABORTED; + var errorId = request.fatalError; + var model = stringify(serializeByValueID(errorId)); + emitModelChunk(request, task.id, model); + return; + } // Something suspended again, let's pick it back up later. + + + task.status = PENDING$1; + task.thenableState = getThenableStateAfterSuspending(); var ping = task.ping; x.then(ping, ping); - task.thenableState = getThenableStateAfterSuspending(); return; } else if (x.$$typeof === REACT_POSTPONE_TYPE) { request.abortableTasks.delete(task); @@ -4278,6 +4348,17 @@ function retryTask(request, task) { } } + if (x === AbortSigil) { + request.abortableTasks.delete(task); + task.status = ABORTED; + var _errorId3 = request.fatalError; + + var _model = stringify(serializeByValueID(_errorId3)); + + emitModelChunk(request, task.id, _model); + return; + } + request.abortableTasks.delete(task); task.status = ERRORED$1; var digest = logRecoverableError(request, x); @@ -4339,6 +4420,11 @@ function performWork(request) { } function abortTask(task, request, errorId) { + if (task.status === RENDERING) { + // This task will be aborted by the render + return; + } + task.status = ABORTED; // Instead of emitting an error per task.id, we emit a model that only // has a single value referencing the error. @@ -4437,6 +4523,7 @@ function flushCompletedChunks(request, destination) { cleanupTaintQueue(request); } + request.status = CLOSED; close$1(destination); request.destination = null; } @@ -4457,10 +4544,14 @@ function enqueueFlush(request) { request.pingedTasks.length === 0 && // If there is no destination there is nothing we can flush to. A flush will // happen when we start flowing again request.destination !== null) { - var destination = request.destination; request.flushScheduled = true; scheduleWork(function () { - return flushCompletedChunks(request, destination); + request.flushScheduled = false; + var destination = request.destination; + + if (destination) { + flushCompletedChunks(request, destination); + } }); } } @@ -4496,19 +4587,21 @@ function stopFlowing(request) { function abort(request, reason) { try { + request.status = ABORTING; var abortableTasks = request.abortableTasks; // We have tasks to abort. We'll emit one error row and then emit a reference // to that row from every row that's still remaining. if (abortableTasks.size > 0) { request.pendingChunks++; var errorId = request.nextChunkId++; + request.fatalError = errorId; if (enablePostpone && typeof reason === 'object' && reason !== null && reason.$$typeof === REACT_POSTPONE_TYPE) { var postponeInstance = reason; logPostpone(request, postponeInstance.message); emitPostponeChunk(request, errorId, postponeInstance); } else { - var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason; + var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : typeof reason === 'object' && reason !== null && typeof reason.then === 'function' ? new Error('The render was aborted by the server with a promise.') : reason; var digest = logRecoverableError(request, error); emitErrorChunk(request, errorId, digest, error); } @@ -4530,7 +4623,7 @@ function abort(request, reason) { // We create an alternative reason for it instead. _error = new Error('The render was aborted due to being postponed.'); } else { - _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason; + _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : typeof reason === 'object' && reason !== null && typeof reason.then === 'function' ? new Error('The render was aborted by the server with a promise.') : reason; } abortListeners.forEach(function (callback) { diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.unbundled.production.js b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.unbundled.production.js index 8fc01b2098a3d..58b997ff847a4 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.unbundled.production.js +++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.unbundled.production.js @@ -14,6 +14,7 @@ require("crypto"); var async_hooks = require("async_hooks"), ReactDOM = require("react-dom"), React = require("react"), + scheduleMicrotask = queueMicrotask, currentView = null, writtenBytes = 0, destinationHasCapacity = !0; @@ -708,6 +709,7 @@ if (!ReactSharedInternalsServer) ); var ObjectPrototype = Object.prototype, stringify = JSON.stringify, + AbortSigil = {}, TaintRegistryObjects = ReactSharedInternalsServer.TaintRegistryObjects, TaintRegistryValues = ReactSharedInternalsServer.TaintRegistryValues, TaintRegistryByteLengths = @@ -818,6 +820,14 @@ function serializeThenable(request, task, thenable) { newTask.id ); default: + if (1 === request.status) + return ( + (newTask.status = 3), + (task = stringify(serializeByValueID(request.fatalError))), + emitModelChunk(request, newTask.id, task), + request.abortableTasks.delete(newTask), + newTask.id + ); "string" !== typeof thenable.status && ((thenable.status = "pending"), thenable.then( @@ -1026,6 +1036,7 @@ function renderFunctionComponent(request, task, key, Component, props) { thenableIndexCounter = 0; thenableState = prevThenableState; Component = Component(props, void 0); + if (1 === request.status) throw AbortSigil; if ( "object" === typeof Component && null !== Component && @@ -1123,6 +1134,7 @@ function renderElement(request, task, type, key, ref, props) { case REACT_LAZY_TYPE: var init = type._init; type = init(type._payload); + if (1 === request.status) throw AbortSigil; return renderElement(request, task, type, key, ref, props); case REACT_FORWARD_REF_TYPE: return renderFunctionComponent(request, task, key, type.render, props); @@ -1139,7 +1151,7 @@ function pingTask(request, task) { pingedTasks.push(task); 1 === pingedTasks.length && ((request.flushScheduled = null !== request.destination), - setImmediate(function () { + scheduleMicrotask(function () { return performWork(request); })); } @@ -1161,79 +1173,7 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) { return pingTask(request, task); }, toJSON: function (parentPropertyName, value) { - a: { - var prevKeyPath = task.keyPath, - prevImplicitSlot = task.implicitSlot; - try { - var JSCompiler_inline_result = renderModelDestructive( - request, - task, - this, - parentPropertyName, - value - ); - } catch (thrownValue) { - parentPropertyName = - thrownValue === SuspenseException - ? getSuspendedThenable() - : thrownValue; - value = task.model; - value = - "object" === typeof value && - null !== value && - (value.$$typeof === REACT_ELEMENT_TYPE || - value.$$typeof === REACT_LAZY_TYPE); - if ( - "object" === typeof parentPropertyName && - null !== parentPropertyName - ) { - if ("function" === typeof parentPropertyName.then) { - JSCompiler_inline_result = createTask( - request, - task.model, - task.keyPath, - task.implicitSlot, - request.abortableTasks - ); - var ping = JSCompiler_inline_result.ping; - parentPropertyName.then(ping, ping); - JSCompiler_inline_result.thenableState = - getThenableStateAfterSuspending(); - task.keyPath = prevKeyPath; - task.implicitSlot = prevImplicitSlot; - JSCompiler_inline_result = value - ? "$L" + JSCompiler_inline_result.id.toString(16) - : serializeByValueID(JSCompiler_inline_result.id); - break a; - } - if (parentPropertyName.$$typeof === REACT_POSTPONE_TYPE) { - request.pendingChunks++; - JSCompiler_inline_result = request.nextChunkId++; - logPostpone(request, parentPropertyName.message); - emitPostponeChunk(request, JSCompiler_inline_result); - task.keyPath = prevKeyPath; - task.implicitSlot = prevImplicitSlot; - JSCompiler_inline_result = value - ? "$L" + JSCompiler_inline_result.toString(16) - : serializeByValueID(JSCompiler_inline_result); - break a; - } - } - task.keyPath = prevKeyPath; - task.implicitSlot = prevImplicitSlot; - if (value) - request.pendingChunks++, - (prevKeyPath = request.nextChunkId++), - (prevImplicitSlot = logRecoverableError( - request, - parentPropertyName - )), - emitErrorChunk(request, prevKeyPath, prevImplicitSlot), - (JSCompiler_inline_result = "$L" + prevKeyPath.toString(16)); - else throw parentPropertyName; - } - } - return JSCompiler_inline_result; + return renderModel(request, task, this, parentPropertyName, value); }, thenableState: null }; @@ -1243,6 +1183,9 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) { function serializeByValueID(id) { return "$" + id.toString(16); } +function serializeLazyID(id) { + return "$L" + id.toString(16); +} function encodeReferenceChunk(request, id, reference) { request = stringify(reference); return id.toString(16) + ":" + request + "\n"; @@ -1260,7 +1203,7 @@ function serializeClientReference( existingId = writtenClientReferences.get(clientReferenceKey); if (void 0 !== existingId) return parent[0] === REACT_ELEMENT_TYPE && "1" === parentPropertyName - ? "$L" + existingId.toString(16) + ? serializeLazyID(existingId) : serializeByValueID(existingId); try { var config = request.bundlerConfig, @@ -1291,7 +1234,7 @@ function serializeClientReference( request.completedImportChunks.push(processedChunk); writtenClientReferences.set(clientReferenceKey, importId); return parent[0] === REACT_ELEMENT_TYPE && "1" === parentPropertyName - ? "$L" + importId.toString(16) + ? serializeLazyID(importId) : serializeByValueID(importId); } catch (x) { return ( @@ -1346,6 +1289,74 @@ function serializeBlob(request, blob) { return "$B" + newTask.id.toString(16); } var modelRoot = !1; +function renderModel(request, task, parent, key, value) { + var prevKeyPath = task.keyPath, + prevImplicitSlot = task.implicitSlot; + try { + return renderModelDestructive(request, task, parent, key, value); + } catch (thrownValue) { + parent = task.model; + parent = + "object" === typeof parent && + null !== parent && + (parent.$$typeof === REACT_ELEMENT_TYPE || + parent.$$typeof === REACT_LAZY_TYPE); + key = + thrownValue === SuspenseException ? getSuspendedThenable() : thrownValue; + if ("object" === typeof key && null !== key) { + if ("function" === typeof key.then) { + if (1 === request.status) + return ( + (task.status = 3), + (request = request.fatalError), + parent ? serializeLazyID(request) : serializeByValueID(request) + ); + request = createTask( + request, + task.model, + task.keyPath, + task.implicitSlot, + request.abortableTasks + ); + value = request.ping; + key.then(value, value); + request.thenableState = getThenableStateAfterSuspending(); + task.keyPath = prevKeyPath; + task.implicitSlot = prevImplicitSlot; + return parent + ? serializeLazyID(request.id) + : serializeByValueID(request.id); + } + if (key.$$typeof === REACT_POSTPONE_TYPE) + return ( + request.pendingChunks++, + (value = request.nextChunkId++), + logPostpone(request, key.message), + emitPostponeChunk(request, value), + (task.keyPath = prevKeyPath), + (task.implicitSlot = prevImplicitSlot), + parent ? serializeLazyID(value) : serializeByValueID(value) + ); + } + if (thrownValue === AbortSigil) + return ( + (task.status = 3), + (request = request.fatalError), + parent ? serializeLazyID(request) : serializeByValueID(request) + ); + task.keyPath = prevKeyPath; + task.implicitSlot = prevImplicitSlot; + if (parent) + return ( + request.pendingChunks++, + (task = request.nextChunkId++), + (prevKeyPath = logRecoverableError(request, key)), + emitErrorChunk(request, task, prevKeyPath), + serializeLazyID(task) + ); + throw key; + } +} function renderModelDestructive( request, task, @@ -1382,12 +1393,11 @@ function renderModelDestructive( parentPropertyName ); case REACT_LAZY_TYPE: - return ( - (task.thenableState = null), - (parentPropertyName = value._init), - (value = parentPropertyName(value._payload)), - renderModelDestructive(request, task, emptyRoot, "", value) - ); + task.thenableState = null; + parentPropertyName = value._init; + value = parentPropertyName(value._payload); + if (1 === request.status) throw AbortSigil; + return renderModelDestructive(request, task, emptyRoot, "", value); case REACT_LEGACY_ELEMENT_TYPE: throw Error( 'A React Element from an older version of React was rendered. This is not supported. It can happen if:\n- Multiple copies of the "react" package is used.\n- A library pre-bundled an old copy of "react" or "react/jsx-runtime".\n- A compiler tries to "inline" JSX instead of using the runtime.' @@ -1668,8 +1678,8 @@ function logRecoverableError(request, error) { function fatalError(request, error) { cleanupTaintQueue(request); null !== request.destination - ? ((request.status = 2), request.destination.destroy(error)) - : ((request.status = 1), (request.fatalError = error)); + ? ((request.status = 3), request.destination.destroy(error)) + : ((request.status = 2), (request.fatalError = error)); } function emitPostponeChunk(request, id) { id = id.toString(16) + ":P\n"; @@ -1680,6 +1690,10 @@ function emitErrorChunk(request, id, digest) { id = id.toString(16) + ":E" + stringify(digest) + "\n"; request.completedErrorChunks.push(id); } +function emitModelChunk(request, id, json) { + id = id.toString(16) + ":" + json + "\n"; + request.completedRegularChunks.push(id); +} function emitTypedArrayChunk(request, id, tag, typedArray) { if (TaintRegistryByteLengths.has(typedArray.byteLength)) { var tainted = TaintRegistryValues.get( @@ -1746,12 +1760,12 @@ function emitChunk(request, task, value) { : value instanceof DataView ? emitTypedArrayChunk(request, id, "V", value) : ((value = stringify(value, task.toJSON)), - (task = task.id.toString(16) + ":" + value + "\n"), - request.completedRegularChunks.push(task)); + emitModelChunk(request, task.id, value)); } var emptyRoot = {}; function retryTask(request, task) { - if (0 === task.status) + if (0 === task.status) { + task.status = 5; try { modelRoot = task.model; var resolvedModel = renderModelDestructive( @@ -1768,9 +1782,8 @@ function retryTask(request, task) { request.writtenObjects.set(resolvedModel, serializeByValueID(task.id)), emitChunk(request, task, resolvedModel); else { - var json = stringify(resolvedModel), - processedChunk = task.id.toString(16) + ":" + json + "\n"; - request.completedRegularChunks.push(processedChunk); + var json = stringify(resolvedModel); + emitModelChunk(request, task.id, json); } request.abortableTasks.delete(task); task.status = 1; @@ -1781,9 +1794,17 @@ function retryTask(request, task) { : thrownValue; if ("object" === typeof x && null !== x) { if ("function" === typeof x.then) { + if (1 === request.status) { + request.abortableTasks.delete(task); + task.status = 3; + var model = stringify(serializeByValueID(request.fatalError)); + emitModelChunk(request, task.id, model); + return; + } + task.status = 0; + task.thenableState = getThenableStateAfterSuspending(); var ping = task.ping; x.then(ping, ping); - task.thenableState = getThenableStateAfterSuspending(); return; } if (x.$$typeof === REACT_POSTPONE_TYPE) { @@ -1794,12 +1815,20 @@ function retryTask(request, task) { return; } } - request.abortableTasks.delete(task); - task.status = 4; - var digest = logRecoverableError(request, x); - emitErrorChunk(request, task.id, digest); + if (x === AbortSigil) { + request.abortableTasks.delete(task); + task.status = 3; + var model$23 = stringify(serializeByValueID(request.fatalError)); + emitModelChunk(request, task.id, model$23); + } else { + request.abortableTasks.delete(task); + task.status = 4; + var digest = logRecoverableError(request, x); + emitErrorChunk(request, task.id, digest); + } } finally { } + } } function performWork(request) { var prevDispatcher = ReactSharedInternalsServer.H; @@ -1882,6 +1911,7 @@ function flushCompletedChunks(request, destination) { "function" === typeof destination.flush && destination.flush(); 0 === request.pendingChunks && (cleanupTaintQueue(request), + (request.status = 3), destination.end(), (request.destination = null)); } @@ -1892,22 +1922,20 @@ function startWork(request) { }); } function enqueueFlush(request) { - if ( - !1 === request.flushScheduled && + !1 === request.flushScheduled && 0 === request.pingedTasks.length && - null !== request.destination - ) { - var destination = request.destination; - request.flushScheduled = !0; + null !== request.destination && + ((request.flushScheduled = !0), setImmediate(function () { - return flushCompletedChunks(request, destination); - }); - } + request.flushScheduled = !1; + var destination = request.destination; + destination && flushCompletedChunks(request, destination); + })); } function startFlowing(request, destination) { - if (1 === request.status) - (request.status = 2), destination.destroy(request.fatalError); - else if (2 !== request.status && null === request.destination) { + if (2 === request.status) + (request.status = 3), destination.destroy(request.fatalError); + else if (3 !== request.status && null === request.destination) { request.destination = destination; try { flushCompletedChunks(request, destination); @@ -1918,10 +1946,12 @@ function startFlowing(request, destination) { } function abort(request, reason) { try { + request.status = 1; var abortableTasks = request.abortableTasks; if (0 < abortableTasks.size) { request.pendingChunks++; var errorId = request.nextChunkId++; + request.fatalError = errorId; if ( "object" === typeof reason && null !== reason && @@ -1933,37 +1963,47 @@ function abort(request, reason) { var error = void 0 === reason ? Error("The render was aborted by the server without a reason.") + : "object" === typeof reason && + null !== reason && + "function" === typeof reason.then + ? Error("The render was aborted by the server with a promise.") : reason, digest = logRecoverableError(request, error); emitErrorChunk(request, errorId, digest, error); } abortableTasks.forEach(function (task) { - task.status = 3; - var ref = serializeByValueID(errorId); - task = encodeReferenceChunk(request, task.id, ref); - request.completedErrorChunks.push(task); + if (5 !== task.status) { + task.status = 3; + var ref = serializeByValueID(errorId); + task = encodeReferenceChunk(request, task.id, ref); + request.completedErrorChunks.push(task); + } }); abortableTasks.clear(); } var abortListeners = request.abortListeners; if (0 < abortListeners.size) { - var error$26 = + var error$30 = "object" === typeof reason && null !== reason && reason.$$typeof === REACT_POSTPONE_TYPE ? Error("The render was aborted due to being postponed.") : void 0 === reason ? Error("The render was aborted by the server without a reason.") + : "object" === typeof reason && + null !== reason && + "function" === typeof reason.then + ? Error("The render was aborted by the server with a promise.") : reason; abortListeners.forEach(function (callback) { - return callback(error$26); + return callback(error$30); }); abortListeners.clear(); } null !== request.destination && flushCompletedChunks(request, request.destination); - } catch (error$27) { - logRecoverableError(request, error$27), fatalError(request, error$27); + } catch (error$31) { + logRecoverableError(request, error$31), fatalError(request, error$31); } } function resolveServerReference(bundlerConfig, id) { @@ -2374,8 +2414,8 @@ function parseReadableStream(response, reference, type) { (previousBlockedChunk = chunk)); } else { chunk = previousBlockedChunk; - var chunk$30 = createPendingChunk(response); - chunk$30.then( + var chunk$34 = createPendingChunk(response); + chunk$34.then( function (v) { return controller.enqueue(v); }, @@ -2383,10 +2423,10 @@ function parseReadableStream(response, reference, type) { return controller.error(e); } ); - previousBlockedChunk = chunk$30; + previousBlockedChunk = chunk$34; chunk.then(function () { - previousBlockedChunk === chunk$30 && (previousBlockedChunk = null); - resolveModelChunk(chunk$30, json, -1); + previousBlockedChunk === chunk$34 && (previousBlockedChunk = null); + resolveModelChunk(chunk$34, json, -1); }); } }, @@ -2744,12 +2784,12 @@ exports.decodeReplyFromBusboy = function (busboyStream, turbopackMap, options) { "React doesn't accept base64 encoded file uploads because we don't expect form data passed from a browser to ever encode data that way. If that's the wrong assumption, we can easily fix it." ); pendingFiles++; - var JSCompiler_object_inline_chunks_203 = []; + var JSCompiler_object_inline_chunks_205 = []; value.on("data", function (chunk) { - JSCompiler_object_inline_chunks_203.push(chunk); + JSCompiler_object_inline_chunks_205.push(chunk); }); value.on("end", function () { - var blob = new Blob(JSCompiler_object_inline_chunks_203, { + var blob = new Blob(JSCompiler_object_inline_chunks_205, { type: mimeType }); response._formData.append(name, blob, filename); diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/package.json b/packages/next/src/compiled/react-server-dom-turbopack-experimental/package.json index 753a9380a4924..aa845203e30cd 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/package.json +++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/package.json @@ -47,7 +47,7 @@ "neo-async": "^2.6.1" }, "peerDependencies": { - "react": "0.0.0-experimental-6230622a1a-20240610", - "react-dom": "0.0.0-experimental-6230622a1a-20240610" + "react": "0.0.0-experimental-20b6f4c0e8-20240607", + "react-dom": "0.0.0-experimental-20b6f4c0e8-20240607" } } \ No newline at end of file diff --git a/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js b/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js index 6c1c09616b05a..a54b5b704da7c 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js +++ b/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js @@ -2763,9 +2763,16 @@ function stopStream(response, id, row) { function resolveErrorDev(response, id, digest, message, stack) { + var error; + + { + // Executing Error within a native stack isn't really limited to owner stacks + // but we gate it behind the same flag for now while iterating. + // eslint-disable-next-line react-internal/prod-error-codes + error = Error(message || 'An error occurred in the Server Components render but no message was provided'); + error.stack = stack; + } - var error = new Error(message || 'An error occurred in the Server Components render but no message was provided'); - error.stack = stack; error.digest = digest; var errorWithDigest = error; var chunks = response._chunks; diff --git a/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js b/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js index 155930d18831d..48d41fb22b445 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js +++ b/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js @@ -3036,9 +3036,16 @@ function stopStream(response, id, row) { function resolveErrorDev(response, id, digest, message, stack) { + var error; + + { + // Executing Error within a native stack isn't really limited to owner stacks + // but we gate it behind the same flag for now while iterating. + // eslint-disable-next-line react-internal/prod-error-codes + error = Error(message || 'An error occurred in the Server Components render but no message was provided'); + error.stack = stack; + } - var error = new Error(message || 'An error occurred in the Server Components render but no message was provided'); - error.stack = stack; error.digest = digest; var errorWithDigest = error; var chunks = response._chunks; diff --git a/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js b/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js index 898c55bd4871a..ebbe54583a531 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js +++ b/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js @@ -3034,9 +3034,16 @@ function stopStream(response, id, row) { function resolveErrorDev(response, id, digest, message, stack) { + var error; + + { + // Executing Error within a native stack isn't really limited to owner stacks + // but we gate it behind the same flag for now while iterating. + // eslint-disable-next-line react-internal/prod-error-codes + error = Error(message || 'An error occurred in the Server Components render but no message was provided'); + error.stack = stack; + } - var error = new Error(message || 'An error occurred in the Server Components render but no message was provided'); - error.stack = stack; error.digest = digest; var errorWithDigest = error; var chunks = response._chunks; diff --git a/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.development.js b/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.development.js index ae6127d1e8d16..67cf13d4077d6 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.development.js +++ b/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.development.js @@ -2989,9 +2989,16 @@ function stopStream(response, id, row) { function resolveErrorDev(response, id, digest, message, stack) { + var error; + + { + // Executing Error within a native stack isn't really limited to owner stacks + // but we gate it behind the same flag for now while iterating. + // eslint-disable-next-line react-internal/prod-error-codes + error = Error(message || 'An error occurred in the Server Components render but no message was provided'); + error.stack = stack; + } - var error = new Error(message || 'An error occurred in the Server Components render but no message was provided'); - error.stack = stack; error.digest = digest; var errorWithDigest = error; var chunks = response._chunks; diff --git a/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js b/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js index 0a94876e7c39b..1c9ec26064e08 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js +++ b/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js @@ -94,9 +94,32 @@ function printWarning(level, format, args, currentStack) { } } +var channel = new MessageChannel(); +var taskQueue = []; + +channel.port1.onmessage = function () { + var task = taskQueue.shift(); + + if (task) { + task(); + } +}; + function scheduleWork(callback) { - callback(); + taskQueue.push(callback); + channel.port2.postMessage(null); +} + +function handleErrorInNextTick(error) { + setTimeout(function () { + throw error; + }); } + +var LocalPromise = Promise; +var scheduleMicrotask = typeof queueMicrotask === 'function' ? queueMicrotask : function (callback) { + LocalPromise.resolve(null).then(callback).catch(handleErrorInNextTick); +}; var VIEW_SIZE = 2048; var currentView = null; var writtenBytes = 0; @@ -1558,6 +1581,8 @@ var PENDING$1 = 0; var COMPLETED = 1; var ABORTED = 3; var ERRORED$1 = 4; +var RENDERING = 5; +var AbortSigil = {}; function defaultErrorHandler(error) { console['error'](error); // Don't transform to our wrapper @@ -1567,8 +1592,9 @@ function defaultPostponeHandler(reason) {// Noop } var OPEN = 0; -var CLOSING = 1; -var CLOSED = 2; +var ABORTING = 1; +var CLOSING = 2; +var CLOSED = 3; function createRequest(model, bundlerConfig, onError, identifierPrefix, onPostpone, environmentName, temporaryReferences) { if (ReactSharedInternals.A !== null && ReactSharedInternals.A !== DefaultAsyncDispatcher) { throw new Error('Currently React only supports one RSC renderer at a time.'); @@ -1661,6 +1687,16 @@ function serializeThenable(request, task, thenable) { default: { + if (request.status === ABORTING) { + // We can no longer accept any resolved values + newTask.status = ABORTED; + var errorId = request.fatalError; + var model = stringify(serializeByValueID(errorId)); + emitModelChunk(request, newTask.id, model); + request.abortableTasks.delete(newTask); + return newTask.id; + } + if (typeof thenable.status === 'string') { // Only instrument the thenable if the status if not defined. If // it's defined, but an unknown value, assume it's been instrumented by @@ -2034,6 +2070,13 @@ validated) // DEV-only result = callComponentInDEV(Component, props, componentDebugInfo); } + if (request.status === ABORTING) { + // If we aborted during rendering we should interrupt the render but + // we don't need to provide an error because the renderer will encode + // the abort error as the reason. + throw AbortSigil; + } + if (typeof result === 'object' && result !== null && !isClientReference(result)) { if (typeof result.then === 'function') { // When the return value is in children position we can resolve it immediately, @@ -2375,6 +2418,13 @@ validated) // DEV only wrappedType = callLazyInitInDEV(type); } + if (request.status === ABORTING) { + // lazy initializers are user code and could abort during render + // we don't wan to return any value resolved from the lazy initializer + // if it aborts so we interrupt rendering here + throw AbortSigil; + } + return renderElement(request, task, wrappedType, key, ref, props, owner); } @@ -2399,7 +2449,7 @@ function pingTask(request, task) { if (pingedTasks.length === 1) { request.flushScheduled = request.destination !== null; - scheduleWork(function () { + scheduleMicrotask(function () { return performWork(request); }); } @@ -2697,21 +2747,32 @@ function renderModel(request, task, parent, key, value) { try { return renderModelDestructive(request, task, parent, key, value); } catch (thrownValue) { + // If the suspended/errored value was an element or lazy it can be reduced + // to a lazy reference, so that it doesn't error the parent. + var model = task.model; + var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE); var x = thrownValue === SuspenseException ? // This is a special type of exception used for Suspense. For historical // reasons, the rest of the Suspense implementation expects the thrown // value to be a thenable, because before `use` existed that was the // (unstable) API for suspending. This implementation detail can change // later, once we deprecate the old API in favor of `use`. - getSuspendedThenable() : thrownValue; // If the suspended/errored value was an element or lazy it can be reduced - // to a lazy reference, so that it doesn't error the parent. - - var model = task.model; - var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE); + getSuspendedThenable() : thrownValue; if (typeof x === 'object' && x !== null) { // $FlowFixMe[method-unbinding] if (typeof x.then === 'function') { - // Something suspended, we'll need to create a new task and resolve it later. + if (request.status === ABORTING) { + task.status = ABORTED; + var errorId = request.fatalError; + + if (wasReactNode) { + return serializeLazyID(errorId); + } + + return serializeByValueID(errorId); + } // Something suspended, we'll need to create a new task and resolve it later. + + var newTask = createTask(request, task.model, task.keyPath, task.implicitSlot, request.abortableTasks); var ping = newTask.ping; x.then(ping, ping); @@ -2727,6 +2788,17 @@ function renderModel(request, task, parent, key, value) { return serializeByValueID(newTask.id); } + } + + if (thrownValue === AbortSigil) { + task.status = ABORTED; + var _errorId = request.fatalError; + + if (wasReactNode) { + return serializeLazyID(_errorId); + } + + return serializeByValueID(_errorId); } // Restore the context. We assume that this will be restored by the inner // functions in case nothing throws so we don't use "finally" here. @@ -2739,10 +2811,12 @@ function renderModel(request, task, parent, key, value) { // We'll replace this element with a lazy reference that throws on the client // once it gets rendered. request.pendingChunks++; - var errorId = request.nextChunkId++; + + var _errorId2 = request.nextChunkId++; + var digest = logRecoverableError(request, x); - emitErrorChunk(request, errorId, digest, x); - return serializeLazyID(errorId); + emitErrorChunk(request, _errorId2, digest, x); + return serializeLazyID(_errorId2); } // Something errored but it was not in a React Node. There's no need to serialize // it by value because it'll just error the whole parent row anyway so we can // just stop any siblings and error the whole parent row. @@ -2846,6 +2920,13 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value resolvedModel = callLazyInitInDEV(lazy); } + if (request.status === ABORTING) { + // lazy initializers are user code and could abort during render + // we don't wan to return any value resolved from the lazy initializer + // if it aborts so we interrupt rendering here + throw AbortSigil; + } + { var _debugInfo = lazy._debugInfo; @@ -3754,6 +3835,7 @@ function retryTask(request, task) { } var prevDebugID = debugID; + task.status = RENDERING; try { // Track the root so we know that we have to emit this object even though it @@ -3810,14 +3892,35 @@ function retryTask(request, task) { if (typeof x === 'object' && x !== null) { // $FlowFixMe[method-unbinding] if (typeof x.then === 'function') { - // Something suspended again, let's pick it back up later. + if (request.status === ABORTING) { + request.abortableTasks.delete(task); + task.status = ABORTED; + var errorId = request.fatalError; + var model = stringify(serializeByValueID(errorId)); + emitModelChunk(request, task.id, model); + return; + } // Something suspended again, let's pick it back up later. + + + task.status = PENDING$1; + task.thenableState = getThenableStateAfterSuspending(); var ping = task.ping; x.then(ping, ping); - task.thenableState = getThenableStateAfterSuspending(); return; } } + if (x === AbortSigil) { + request.abortableTasks.delete(task); + task.status = ABORTED; + var _errorId3 = request.fatalError; + + var _model = stringify(serializeByValueID(_errorId3)); + + emitModelChunk(request, task.id, _model); + return; + } + request.abortableTasks.delete(task); task.status = ERRORED$1; var digest = logRecoverableError(request, x); @@ -3879,6 +3982,11 @@ function performWork(request) { } function abortTask(task, request, errorId) { + if (task.status === RENDERING) { + // This task will be aborted by the render + return; + } + task.status = ABORTED; // Instead of emitting an error per task.id, we emit a model that only // has a single value referencing the error. @@ -3971,6 +4079,7 @@ function flushCompletedChunks(request, destination) { if (request.pendingChunks === 0) { + request.status = CLOSED; close$1(destination); request.destination = null; } @@ -3991,10 +4100,14 @@ function enqueueFlush(request) { request.pingedTasks.length === 0 && // If there is no destination there is nothing we can flush to. A flush will // happen when we start flowing again request.destination !== null) { - var destination = request.destination; request.flushScheduled = true; scheduleWork(function () { - return flushCompletedChunks(request, destination); + request.flushScheduled = false; + var destination = request.destination; + + if (destination) { + flushCompletedChunks(request, destination); + } }); } } @@ -4030,15 +4143,17 @@ function stopFlowing(request) { function abort(request, reason) { try { + request.status = ABORTING; var abortableTasks = request.abortableTasks; // We have tasks to abort. We'll emit one error row and then emit a reference // to that row from every row that's still remaining. if (abortableTasks.size > 0) { request.pendingChunks++; var errorId = request.nextChunkId++; + request.fatalError = errorId; var postponeInstance; if (enablePostpone && typeof reason === 'object' && reason !== null && reason.$$typeof === REACT_POSTPONE_TYPE) ; else { - var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason; + var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : typeof reason === 'object' && reason !== null && typeof reason.then === 'function' ? new Error('The render was aborted by the server with a promise.') : reason; var digest = logRecoverableError(request, error); emitErrorChunk(request, errorId, digest, error); } @@ -4055,7 +4170,7 @@ function abort(request, reason) { var _error; if (enablePostpone && typeof reason === 'object' && reason !== null && reason.$$typeof === REACT_POSTPONE_TYPE) ; else { - _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason; + _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : typeof reason === 'object' && reason !== null && typeof reason.then === 'function' ? new Error('The render was aborted by the server with a promise.') : reason; } abortListeners.forEach(function (callback) { diff --git a/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.production.js b/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.production.js index 4183c4f841990..240543fa0e8a6 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.production.js +++ b/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.production.js @@ -11,6 +11,30 @@ "use strict"; var ReactDOM = require("react-dom"), React = require("react"), + channel = new MessageChannel(), + taskQueue = []; +channel.port1.onmessage = function () { + var task = taskQueue.shift(); + task && task(); +}; +function scheduleWork(callback) { + taskQueue.push(callback); + channel.port2.postMessage(null); +} +function handleErrorInNextTick(error) { + setTimeout(function () { + throw error; + }); +} +var LocalPromise = Promise, + scheduleMicrotask = + "function" === typeof queueMicrotask + ? queueMicrotask + : function (callback) { + LocalPromise.resolve(null) + .then(callback) + .catch(handleErrorInNextTick); + }, currentView = null, writtenBytes = 0; function writeChunkAndReturn(destination, chunk) { @@ -670,7 +694,8 @@ if (!ReactSharedInternalsServer) 'The "react" package in this environment is not configured correctly. The "react-server" condition must be enabled in any environment that runs React Server Components.' ); var ObjectPrototype = Object.prototype, - stringify = JSON.stringify; + stringify = JSON.stringify, + AbortSigil = {}; function defaultErrorHandler(error) { console.error(error); } @@ -746,6 +771,14 @@ function serializeThenable(request, task, thenable) { newTask.id ); default: + if (1 === request.status) + return ( + (newTask.status = 3), + (task = stringify(serializeByValueID(request.fatalError))), + emitModelChunk(request, newTask.id, task), + request.abortableTasks.delete(newTask), + newTask.id + ); "string" !== typeof thenable.status && ((thenable.status = "pending"), thenable.then( @@ -932,6 +965,7 @@ function renderFunctionComponent(request, task, key, Component, props) { thenableIndexCounter = 0; thenableState = prevThenableState; Component = Component(props, void 0); + if (1 === request.status) throw AbortSigil; if ( "object" === typeof Component && null !== Component && @@ -1029,6 +1063,7 @@ function renderElement(request, task, type, key, ref, props) { case REACT_LAZY_TYPE: var init = type._init; type = init(type._payload); + if (1 === request.status) throw AbortSigil; return renderElement(request, task, type, key, ref, props); case REACT_FORWARD_REF_TYPE: return renderFunctionComponent(request, task, key, type.render, props); @@ -1045,7 +1080,9 @@ function pingTask(request, task) { pingedTasks.push(task); 1 === pingedTasks.length && ((request.flushScheduled = null !== request.destination), - performWork(request)); + scheduleMicrotask(function () { + return performWork(request); + })); } function createTask(request, model, keyPath, implicitSlot, abortSet) { request.pendingChunks++; @@ -1077,50 +1114,61 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) { ); } catch (thrownValue) { if ( - ((parentPropertyName = + ((parentPropertyName = task.model), + (parentPropertyName = + "object" === typeof parentPropertyName && + null !== parentPropertyName && + (parentPropertyName.$$typeof === REACT_ELEMENT_TYPE || + parentPropertyName.$$typeof === REACT_LAZY_TYPE)), + (value = thrownValue === SuspenseException ? getSuspendedThenable() : thrownValue), - (value = task.model), - (value = - "object" === typeof value && + "object" === typeof value && null !== value && - (value.$$typeof === REACT_ELEMENT_TYPE || - value.$$typeof === REACT_LAZY_TYPE)), - "object" === typeof parentPropertyName && - null !== parentPropertyName && - "function" === typeof parentPropertyName.then) - ) { - JSCompiler_inline_result = createTask( - request, - task.model, - task.keyPath, - task.implicitSlot, - request.abortableTasks - ); - var ping = JSCompiler_inline_result.ping; - parentPropertyName.then(ping, ping); - JSCompiler_inline_result.thenableState = - getThenableStateAfterSuspending(); - task.keyPath = prevKeyPath; - task.implicitSlot = prevImplicitSlot; - JSCompiler_inline_result = value - ? "$L" + JSCompiler_inline_result.id.toString(16) - : serializeByValueID(JSCompiler_inline_result.id); - } else if ( + "function" === typeof value.then) + ) + if (1 === request.status) + (task.status = 3), + (prevKeyPath = request.fatalError), + (JSCompiler_inline_result = parentPropertyName + ? "$L" + prevKeyPath.toString(16) + : serializeByValueID(prevKeyPath)); + else { + JSCompiler_inline_result = createTask( + request, + task.model, + task.keyPath, + task.implicitSlot, + request.abortableTasks + ); + var ping = JSCompiler_inline_result.ping; + value.then(ping, ping); + JSCompiler_inline_result.thenableState = + getThenableStateAfterSuspending(); + task.keyPath = prevKeyPath; + task.implicitSlot = prevImplicitSlot; + JSCompiler_inline_result = parentPropertyName + ? "$L" + JSCompiler_inline_result.id.toString(16) + : serializeByValueID(JSCompiler_inline_result.id); + } + else if (thrownValue === AbortSigil) + (task.status = 3), + (prevKeyPath = request.fatalError), + (JSCompiler_inline_result = parentPropertyName + ? "$L" + prevKeyPath.toString(16) + : serializeByValueID(prevKeyPath)); + else if ( ((task.keyPath = prevKeyPath), (task.implicitSlot = prevImplicitSlot), - value) + parentPropertyName) ) request.pendingChunks++, (prevKeyPath = request.nextChunkId++), - (prevImplicitSlot = logRecoverableError( - request, - parentPropertyName - )), + (prevImplicitSlot = logRecoverableError(request, value)), emitErrorChunk(request, prevKeyPath, prevImplicitSlot), (JSCompiler_inline_result = "$L" + prevKeyPath.toString(16)); - else throw parentPropertyName; + else throw value; } return JSCompiler_inline_result; }, @@ -1273,12 +1321,11 @@ function renderModelDestructive( parentPropertyName ); case REACT_LAZY_TYPE: - return ( - (task.thenableState = null), - (parentPropertyName = value._init), - (value = parentPropertyName(value._payload)), - renderModelDestructive(request, task, emptyRoot, "", value) - ); + task.thenableState = null; + parentPropertyName = value._init; + value = parentPropertyName(value._payload); + if (1 === request.status) throw AbortSigil; + return renderModelDestructive(request, task, emptyRoot, "", value); case REACT_LEGACY_ELEMENT_TYPE: throw Error( 'A React Element from an older version of React was rendered. This is not supported. It can happen if:\n- Multiple copies of the "react" package is used.\n- A library pre-bundled an old copy of "react" or "react/jsx-runtime".\n- A compiler tries to "inline" JSX instead of using the runtime.' @@ -1539,8 +1586,8 @@ function logRecoverableError(request, error) { } function fatalError(request, error) { null !== request.destination - ? ((request.status = 2), closeWithError(request.destination, error)) - : ((request.status = 1), (request.fatalError = error)); + ? ((request.status = 3), closeWithError(request.destination, error)) + : ((request.status = 2), (request.fatalError = error)); } function emitErrorChunk(request, id, digest) { digest = { digest: digest }; @@ -1609,7 +1656,8 @@ function emitChunk(request, task, value) { } var emptyRoot = {}; function retryTask(request, task) { - if (0 === task.status) + if (0 === task.status) { + task.status = 5; try { modelRoot = task.model; var resolvedModel = renderModelDestructive( @@ -1636,10 +1684,23 @@ function retryTask(request, task) { thrownValue === SuspenseException ? getSuspendedThenable() : thrownValue; - if ("object" === typeof x && null !== x && "function" === typeof x.then) { - var ping = task.ping; - x.then(ping, ping); - task.thenableState = getThenableStateAfterSuspending(); + if ("object" === typeof x && null !== x && "function" === typeof x.then) + if (1 === request.status) { + request.abortableTasks.delete(task); + task.status = 3; + var model = stringify(serializeByValueID(request.fatalError)); + emitModelChunk(request, task.id, model); + } else { + task.status = 0; + task.thenableState = getThenableStateAfterSuspending(); + var ping = task.ping; + x.then(ping, ping); + } + else if (x === AbortSigil) { + request.abortableTasks.delete(task); + task.status = 3; + var model$19 = stringify(serializeByValueID(request.fatalError)); + emitModelChunk(request, task.id, model$19); } else { request.abortableTasks.delete(task); task.status = 4; @@ -1648,6 +1709,7 @@ function retryTask(request, task) { } } finally { } + } } function performWork(request) { var prevDispatcher = ReactSharedInternalsServer.H; @@ -1705,54 +1767,72 @@ function flushCompletedChunks(request, destination) { (writtenBytes = 0)); } 0 === request.pendingChunks && - (destination.close(), (request.destination = null)); + ((request.status = 3), destination.close(), (request.destination = null)); +} +function startWork(request) { + request.flushScheduled = null !== request.destination; + scheduleWork(function () { + return performWork(request); + }); } function enqueueFlush(request) { - if ( - !1 === request.flushScheduled && + !1 === request.flushScheduled && 0 === request.pingedTasks.length && - null !== request.destination - ) { - var destination = request.destination; - request.flushScheduled = !0; - flushCompletedChunks(request, destination); - } + null !== request.destination && + ((request.flushScheduled = !0), + scheduleWork(function () { + request.flushScheduled = !1; + var destination = request.destination; + destination && flushCompletedChunks(request, destination); + })); } function abort(request, reason) { try { + request.status = 1; var abortableTasks = request.abortableTasks; if (0 < abortableTasks.size) { request.pendingChunks++; - var errorId = request.nextChunkId++, - error = + var errorId = request.nextChunkId++; + request.fatalError = errorId; + var error = void 0 === reason ? Error("The render was aborted by the server without a reason.") + : "object" === typeof reason && + null !== reason && + "function" === typeof reason.then + ? Error("The render was aborted by the server with a promise.") : reason, digest = logRecoverableError(request, error); emitErrorChunk(request, errorId, digest, error); abortableTasks.forEach(function (task) { - task.status = 3; - var ref = serializeByValueID(errorId); - task = encodeReferenceChunk(request, task.id, ref); - request.completedErrorChunks.push(task); + if (5 !== task.status) { + task.status = 3; + var ref = serializeByValueID(errorId); + task = encodeReferenceChunk(request, task.id, ref); + request.completedErrorChunks.push(task); + } }); abortableTasks.clear(); } var abortListeners = request.abortListeners; if (0 < abortListeners.size) { - var error$22 = + var error$26 = void 0 === reason ? Error("The render was aborted by the server without a reason.") + : "object" === typeof reason && + null !== reason && + "function" === typeof reason.then + ? Error("The render was aborted by the server with a promise.") : reason; abortListeners.forEach(function (callback) { - return callback(error$22); + return callback(error$26); }); abortListeners.clear(); } null !== request.destination && flushCompletedChunks(request, request.destination); - } catch (error$23) { - logRecoverableError(request, error$23), fatalError(request, error$23); + } catch (error$27) { + logRecoverableError(request, error$27), fatalError(request, error$27); } } function resolveServerReference(bundlerConfig, id) { @@ -2194,8 +2274,8 @@ function parseReadableStream(response, reference, type) { (previousBlockedChunk = chunk)); } else { chunk = previousBlockedChunk; - var chunk$26 = createPendingChunk(response); - chunk$26.then( + var chunk$30 = createPendingChunk(response); + chunk$30.then( function (v) { return controller.enqueue(v); }, @@ -2203,10 +2283,10 @@ function parseReadableStream(response, reference, type) { return controller.error(e); } ); - previousBlockedChunk = chunk$26; + previousBlockedChunk = chunk$30; chunk.then(function () { - previousBlockedChunk === chunk$26 && (previousBlockedChunk = null); - resolveModelChunk(chunk$26, json, -1); + previousBlockedChunk === chunk$30 && (previousBlockedChunk = null); + resolveModelChunk(chunk$30, json, -1); }); } }, @@ -2571,13 +2651,12 @@ exports.renderToReadableStream = function (model, turbopackMap, options) { { type: "bytes", start: function () { - request.flushScheduled = null !== request.destination; - performWork(request); + startWork(request); }, pull: function (controller) { - if (1 === request.status) - (request.status = 2), closeWithError(controller, request.fatalError); - else if (2 !== request.status && null === request.destination) { + if (2 === request.status) + (request.status = 3), closeWithError(controller, request.fatalError); + else if (3 !== request.status && null === request.destination) { request.destination = controller; try { flushCompletedChunks(request, controller); diff --git a/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js b/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js index 4b11b1cf66fac..86f8193b208f9 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js +++ b/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js @@ -94,6 +94,16 @@ function printWarning(level, format, args, currentStack) { } } +function handleErrorInNextTick(error) { + setTimeout(function () { + throw error; + }); +} + +var LocalPromise = Promise; +var scheduleMicrotask = typeof queueMicrotask === 'function' ? queueMicrotask : function (callback) { + LocalPromise.resolve(null).then(callback).catch(handleErrorInNextTick); +}; function scheduleWork(callback) { setTimeout(callback, 0); } @@ -1571,6 +1581,8 @@ var PENDING$1 = 0; var COMPLETED = 1; var ABORTED = 3; var ERRORED$1 = 4; +var RENDERING = 5; +var AbortSigil = {}; function defaultErrorHandler(error) { console['error'](error); // Don't transform to our wrapper @@ -1580,8 +1592,9 @@ function defaultPostponeHandler(reason) {// Noop } var OPEN = 0; -var CLOSING = 1; -var CLOSED = 2; +var ABORTING = 1; +var CLOSING = 2; +var CLOSED = 3; function createRequest(model, bundlerConfig, onError, identifierPrefix, onPostpone, environmentName, temporaryReferences) { if (ReactSharedInternals.A !== null && ReactSharedInternals.A !== DefaultAsyncDispatcher) { throw new Error('Currently React only supports one RSC renderer at a time.'); @@ -1679,6 +1692,16 @@ function serializeThenable(request, task, thenable) { default: { + if (request.status === ABORTING) { + // We can no longer accept any resolved values + newTask.status = ABORTED; + var errorId = request.fatalError; + var model = stringify(serializeByValueID(errorId)); + emitModelChunk(request, newTask.id, model); + request.abortableTasks.delete(newTask); + return newTask.id; + } + if (typeof thenable.status === 'string') { // Only instrument the thenable if the status if not defined. If // it's defined, but an unknown value, assume it's been instrumented by @@ -2055,6 +2078,13 @@ validated) // DEV-only result = callComponentInDEV(Component, props, componentDebugInfo); } + if (request.status === ABORTING) { + // If we aborted during rendering we should interrupt the render but + // we don't need to provide an error because the renderer will encode + // the abort error as the reason. + throw AbortSigil; + } + if (typeof result === 'object' && result !== null && !isClientReference(result)) { if (typeof result.then === 'function') { // When the return value is in children position we can resolve it immediately, @@ -2396,6 +2426,13 @@ validated) // DEV only wrappedType = callLazyInitInDEV(type); } + if (request.status === ABORTING) { + // lazy initializers are user code and could abort during render + // we don't wan to return any value resolved from the lazy initializer + // if it aborts so we interrupt rendering here + throw AbortSigil; + } + return renderElement(request, task, wrappedType, key, ref, props, owner); } @@ -2420,7 +2457,7 @@ function pingTask(request, task) { if (pingedTasks.length === 1) { request.flushScheduled = request.destination !== null; - scheduleWork(function () { + scheduleMicrotask(function () { return performWork(request); }); } @@ -2718,21 +2755,32 @@ function renderModel(request, task, parent, key, value) { try { return renderModelDestructive(request, task, parent, key, value); } catch (thrownValue) { + // If the suspended/errored value was an element or lazy it can be reduced + // to a lazy reference, so that it doesn't error the parent. + var model = task.model; + var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE); var x = thrownValue === SuspenseException ? // This is a special type of exception used for Suspense. For historical // reasons, the rest of the Suspense implementation expects the thrown // value to be a thenable, because before `use` existed that was the // (unstable) API for suspending. This implementation detail can change // later, once we deprecate the old API in favor of `use`. - getSuspendedThenable() : thrownValue; // If the suspended/errored value was an element or lazy it can be reduced - // to a lazy reference, so that it doesn't error the parent. - - var model = task.model; - var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE); + getSuspendedThenable() : thrownValue; if (typeof x === 'object' && x !== null) { // $FlowFixMe[method-unbinding] if (typeof x.then === 'function') { - // Something suspended, we'll need to create a new task and resolve it later. + if (request.status === ABORTING) { + task.status = ABORTED; + var errorId = request.fatalError; + + if (wasReactNode) { + return serializeLazyID(errorId); + } + + return serializeByValueID(errorId); + } // Something suspended, we'll need to create a new task and resolve it later. + + var newTask = createTask(request, task.model, task.keyPath, task.implicitSlot, request.abortableTasks); var ping = newTask.ping; x.then(ping, ping); @@ -2748,6 +2796,17 @@ function renderModel(request, task, parent, key, value) { return serializeByValueID(newTask.id); } + } + + if (thrownValue === AbortSigil) { + task.status = ABORTED; + var _errorId = request.fatalError; + + if (wasReactNode) { + return serializeLazyID(_errorId); + } + + return serializeByValueID(_errorId); } // Restore the context. We assume that this will be restored by the inner // functions in case nothing throws so we don't use "finally" here. @@ -2760,10 +2819,12 @@ function renderModel(request, task, parent, key, value) { // We'll replace this element with a lazy reference that throws on the client // once it gets rendered. request.pendingChunks++; - var errorId = request.nextChunkId++; + + var _errorId2 = request.nextChunkId++; + var digest = logRecoverableError(request, x); - emitErrorChunk(request, errorId, digest, x); - return serializeLazyID(errorId); + emitErrorChunk(request, _errorId2, digest, x); + return serializeLazyID(_errorId2); } // Something errored but it was not in a React Node. There's no need to serialize // it by value because it'll just error the whole parent row anyway so we can // just stop any siblings and error the whole parent row. @@ -2867,6 +2928,13 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value resolvedModel = callLazyInitInDEV(lazy); } + if (request.status === ABORTING) { + // lazy initializers are user code and could abort during render + // we don't wan to return any value resolved from the lazy initializer + // if it aborts so we interrupt rendering here + throw AbortSigil; + } + { var _debugInfo = lazy._debugInfo; @@ -3781,6 +3849,7 @@ function retryTask(request, task) { } var prevDebugID = debugID; + task.status = RENDERING; try { // Track the root so we know that we have to emit this object even though it @@ -3837,14 +3906,35 @@ function retryTask(request, task) { if (typeof x === 'object' && x !== null) { // $FlowFixMe[method-unbinding] if (typeof x.then === 'function') { - // Something suspended again, let's pick it back up later. + if (request.status === ABORTING) { + request.abortableTasks.delete(task); + task.status = ABORTED; + var errorId = request.fatalError; + var model = stringify(serializeByValueID(errorId)); + emitModelChunk(request, task.id, model); + return; + } // Something suspended again, let's pick it back up later. + + + task.status = PENDING$1; + task.thenableState = getThenableStateAfterSuspending(); var ping = task.ping; x.then(ping, ping); - task.thenableState = getThenableStateAfterSuspending(); return; } } + if (x === AbortSigil) { + request.abortableTasks.delete(task); + task.status = ABORTED; + var _errorId3 = request.fatalError; + + var _model = stringify(serializeByValueID(_errorId3)); + + emitModelChunk(request, task.id, _model); + return; + } + request.abortableTasks.delete(task); task.status = ERRORED$1; var digest = logRecoverableError(request, x); @@ -3906,6 +3996,11 @@ function performWork(request) { } function abortTask(task, request, errorId) { + if (task.status === RENDERING) { + // This task will be aborted by the render + return; + } + task.status = ABORTED; // Instead of emitting an error per task.id, we emit a model that only // has a single value referencing the error. @@ -3998,6 +4093,7 @@ function flushCompletedChunks(request, destination) { if (request.pendingChunks === 0) { + request.status = CLOSED; close$1(destination); request.destination = null; } @@ -4022,10 +4118,14 @@ function enqueueFlush(request) { request.pingedTasks.length === 0 && // If there is no destination there is nothing we can flush to. A flush will // happen when we start flowing again request.destination !== null) { - var destination = request.destination; request.flushScheduled = true; scheduleWork(function () { - return flushCompletedChunks(request, destination); + request.flushScheduled = false; + var destination = request.destination; + + if (destination) { + flushCompletedChunks(request, destination); + } }); } } @@ -4061,15 +4161,17 @@ function stopFlowing(request) { function abort(request, reason) { try { + request.status = ABORTING; var abortableTasks = request.abortableTasks; // We have tasks to abort. We'll emit one error row and then emit a reference // to that row from every row that's still remaining. if (abortableTasks.size > 0) { request.pendingChunks++; var errorId = request.nextChunkId++; + request.fatalError = errorId; var postponeInstance; if (enablePostpone && typeof reason === 'object' && reason !== null && reason.$$typeof === REACT_POSTPONE_TYPE) ; else { - var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason; + var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : typeof reason === 'object' && reason !== null && typeof reason.then === 'function' ? new Error('The render was aborted by the server with a promise.') : reason; var digest = logRecoverableError(request, error); emitErrorChunk(request, errorId, digest, error); } @@ -4086,7 +4188,7 @@ function abort(request, reason) { var _error; if (enablePostpone && typeof reason === 'object' && reason !== null && reason.$$typeof === REACT_POSTPONE_TYPE) ; else { - _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason; + _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : typeof reason === 'object' && reason !== null && typeof reason.then === 'function' ? new Error('The render was aborted by the server with a promise.') : reason; } abortListeners.forEach(function (callback) { diff --git a/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.production.js b/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.production.js index 8eb8e50f4a02e..ad80e015828bc 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.production.js +++ b/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.production.js @@ -10,7 +10,21 @@ "use strict"; var ReactDOM = require("react-dom"), - React = require("react"), + React = require("react"); +function handleErrorInNextTick(error) { + setTimeout(function () { + throw error; + }); +} +var LocalPromise = Promise, + scheduleMicrotask = + "function" === typeof queueMicrotask + ? queueMicrotask + : function (callback) { + LocalPromise.resolve(null) + .then(callback) + .catch(handleErrorInNextTick); + }, currentView = null, writtenBytes = 0; function writeChunkAndReturn(destination, chunk) { @@ -677,7 +691,8 @@ if (!ReactSharedInternalsServer) 'The "react" package in this environment is not configured correctly. The "react-server" condition must be enabled in any environment that runs React Server Components.' ); var ObjectPrototype = Object.prototype, - stringify = JSON.stringify; + stringify = JSON.stringify, + AbortSigil = {}; function defaultErrorHandler(error) { console.error(error); } @@ -761,6 +776,14 @@ function serializeThenable(request, task, thenable) { newTask.id ); default: + if (1 === request.status) + return ( + (newTask.status = 3), + (task = stringify(serializeByValueID(request.fatalError))), + emitModelChunk(request, newTask.id, task), + request.abortableTasks.delete(newTask), + newTask.id + ); "string" !== typeof thenable.status && ((thenable.status = "pending"), thenable.then( @@ -947,6 +970,7 @@ function renderFunctionComponent(request, task, key, Component, props) { thenableIndexCounter = 0; thenableState = prevThenableState; Component = Component(props, void 0); + if (1 === request.status) throw AbortSigil; if ( "object" === typeof Component && null !== Component && @@ -1044,6 +1068,7 @@ function renderElement(request, task, type, key, ref, props) { case REACT_LAZY_TYPE: var init = type._init; type = init(type._payload); + if (1 === request.status) throw AbortSigil; return renderElement(request, task, type, key, ref, props); case REACT_FORWARD_REF_TYPE: return renderFunctionComponent(request, task, key, type.render, props); @@ -1060,9 +1085,9 @@ function pingTask(request, task) { pingedTasks.push(task); 1 === pingedTasks.length && ((request.flushScheduled = null !== request.destination), - setTimeout(function () { + scheduleMicrotask(function () { return performWork(request); - }, 0)); + })); } function createTask(request, model, keyPath, implicitSlot, abortSet) { request.pendingChunks++; @@ -1094,50 +1119,61 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) { ); } catch (thrownValue) { if ( - ((parentPropertyName = + ((parentPropertyName = task.model), + (parentPropertyName = + "object" === typeof parentPropertyName && + null !== parentPropertyName && + (parentPropertyName.$$typeof === REACT_ELEMENT_TYPE || + parentPropertyName.$$typeof === REACT_LAZY_TYPE)), + (value = thrownValue === SuspenseException ? getSuspendedThenable() : thrownValue), - (value = task.model), - (value = - "object" === typeof value && + "object" === typeof value && null !== value && - (value.$$typeof === REACT_ELEMENT_TYPE || - value.$$typeof === REACT_LAZY_TYPE)), - "object" === typeof parentPropertyName && - null !== parentPropertyName && - "function" === typeof parentPropertyName.then) - ) { - JSCompiler_inline_result = createTask( - request, - task.model, - task.keyPath, - task.implicitSlot, - request.abortableTasks - ); - var ping = JSCompiler_inline_result.ping; - parentPropertyName.then(ping, ping); - JSCompiler_inline_result.thenableState = - getThenableStateAfterSuspending(); - task.keyPath = prevKeyPath; - task.implicitSlot = prevImplicitSlot; - JSCompiler_inline_result = value - ? "$L" + JSCompiler_inline_result.id.toString(16) - : serializeByValueID(JSCompiler_inline_result.id); - } else if ( + "function" === typeof value.then) + ) + if (1 === request.status) + (task.status = 3), + (prevKeyPath = request.fatalError), + (JSCompiler_inline_result = parentPropertyName + ? "$L" + prevKeyPath.toString(16) + : serializeByValueID(prevKeyPath)); + else { + JSCompiler_inline_result = createTask( + request, + task.model, + task.keyPath, + task.implicitSlot, + request.abortableTasks + ); + var ping = JSCompiler_inline_result.ping; + value.then(ping, ping); + JSCompiler_inline_result.thenableState = + getThenableStateAfterSuspending(); + task.keyPath = prevKeyPath; + task.implicitSlot = prevImplicitSlot; + JSCompiler_inline_result = parentPropertyName + ? "$L" + JSCompiler_inline_result.id.toString(16) + : serializeByValueID(JSCompiler_inline_result.id); + } + else if (thrownValue === AbortSigil) + (task.status = 3), + (prevKeyPath = request.fatalError), + (JSCompiler_inline_result = parentPropertyName + ? "$L" + prevKeyPath.toString(16) + : serializeByValueID(prevKeyPath)); + else if ( ((task.keyPath = prevKeyPath), (task.implicitSlot = prevImplicitSlot), - value) + parentPropertyName) ) request.pendingChunks++, (prevKeyPath = request.nextChunkId++), - (prevImplicitSlot = logRecoverableError( - request, - parentPropertyName - )), + (prevImplicitSlot = logRecoverableError(request, value)), emitErrorChunk(request, prevKeyPath, prevImplicitSlot), (JSCompiler_inline_result = "$L" + prevKeyPath.toString(16)); - else throw parentPropertyName; + else throw value; } return JSCompiler_inline_result; }, @@ -1290,12 +1326,11 @@ function renderModelDestructive( parentPropertyName ); case REACT_LAZY_TYPE: - return ( - (task.thenableState = null), - (parentPropertyName = value._init), - (value = parentPropertyName(value._payload)), - renderModelDestructive(request, task, emptyRoot, "", value) - ); + task.thenableState = null; + parentPropertyName = value._init; + value = parentPropertyName(value._payload); + if (1 === request.status) throw AbortSigil; + return renderModelDestructive(request, task, emptyRoot, "", value); case REACT_LEGACY_ELEMENT_TYPE: throw Error( 'A React Element from an older version of React was rendered. This is not supported. It can happen if:\n- Multiple copies of the "react" package is used.\n- A library pre-bundled an old copy of "react" or "react/jsx-runtime".\n- A compiler tries to "inline" JSX instead of using the runtime.' @@ -1558,8 +1593,8 @@ function logRecoverableError(request, error) { } function fatalError(request, error) { null !== request.destination - ? ((request.status = 2), closeWithError(request.destination, error)) - : ((request.status = 1), (request.fatalError = error)); + ? ((request.status = 3), closeWithError(request.destination, error)) + : ((request.status = 2), (request.fatalError = error)); } function emitErrorChunk(request, id, digest) { digest = { digest: digest }; @@ -1628,7 +1663,8 @@ function emitChunk(request, task, value) { } var emptyRoot = {}; function retryTask(request, task) { - if (0 === task.status) + if (0 === task.status) { + task.status = 5; try { modelRoot = task.model; var resolvedModel = renderModelDestructive( @@ -1655,10 +1691,23 @@ function retryTask(request, task) { thrownValue === SuspenseException ? getSuspendedThenable() : thrownValue; - if ("object" === typeof x && null !== x && "function" === typeof x.then) { - var ping = task.ping; - x.then(ping, ping); - task.thenableState = getThenableStateAfterSuspending(); + if ("object" === typeof x && null !== x && "function" === typeof x.then) + if (1 === request.status) { + request.abortableTasks.delete(task); + task.status = 3; + var model = stringify(serializeByValueID(request.fatalError)); + emitModelChunk(request, task.id, model); + } else { + task.status = 0; + task.thenableState = getThenableStateAfterSuspending(); + var ping = task.ping; + x.then(ping, ping); + } + else if (x === AbortSigil) { + request.abortableTasks.delete(task); + task.status = 3; + var model$19 = stringify(serializeByValueID(request.fatalError)); + emitModelChunk(request, task.id, model$19); } else { request.abortableTasks.delete(task); task.status = 4; @@ -1667,6 +1716,7 @@ function retryTask(request, task) { } } finally { } + } } function performWork(request) { var prevDispatcher = ReactSharedInternalsServer.H; @@ -1724,7 +1774,7 @@ function flushCompletedChunks(request, destination) { (writtenBytes = 0)); } 0 === request.pendingChunks && - (destination.close(), (request.destination = null)); + ((request.status = 3), destination.close(), (request.destination = null)); } function startWork(request) { request.flushScheduled = null !== request.destination; @@ -1737,53 +1787,63 @@ function startWork(request) { }, 0); } function enqueueFlush(request) { - if ( - !1 === request.flushScheduled && + !1 === request.flushScheduled && 0 === request.pingedTasks.length && - null !== request.destination - ) { - var destination = request.destination; - request.flushScheduled = !0; + null !== request.destination && + ((request.flushScheduled = !0), setTimeout(function () { - return flushCompletedChunks(request, destination); - }, 0); - } + request.flushScheduled = !1; + var destination = request.destination; + destination && flushCompletedChunks(request, destination); + }, 0)); } function abort(request, reason) { try { + request.status = 1; var abortableTasks = request.abortableTasks; if (0 < abortableTasks.size) { request.pendingChunks++; - var errorId = request.nextChunkId++, - error = + var errorId = request.nextChunkId++; + request.fatalError = errorId; + var error = void 0 === reason ? Error("The render was aborted by the server without a reason.") + : "object" === typeof reason && + null !== reason && + "function" === typeof reason.then + ? Error("The render was aborted by the server with a promise.") : reason, digest = logRecoverableError(request, error); emitErrorChunk(request, errorId, digest, error); abortableTasks.forEach(function (task) { - task.status = 3; - var ref = serializeByValueID(errorId); - task = encodeReferenceChunk(request, task.id, ref); - request.completedErrorChunks.push(task); + if (5 !== task.status) { + task.status = 3; + var ref = serializeByValueID(errorId); + task = encodeReferenceChunk(request, task.id, ref); + request.completedErrorChunks.push(task); + } }); abortableTasks.clear(); } var abortListeners = request.abortListeners; if (0 < abortListeners.size) { - var error$22 = + var error$26 = void 0 === reason ? Error("The render was aborted by the server without a reason.") + : "object" === typeof reason && + null !== reason && + "function" === typeof reason.then + ? Error("The render was aborted by the server with a promise.") : reason; abortListeners.forEach(function (callback) { - return callback(error$22); + return callback(error$26); }); abortListeners.clear(); } null !== request.destination && flushCompletedChunks(request, request.destination); - } catch (error$23) { - logRecoverableError(request, error$23), fatalError(request, error$23); + } catch (error$27) { + logRecoverableError(request, error$27), fatalError(request, error$27); } } function resolveServerReference(bundlerConfig, id) { @@ -2225,8 +2285,8 @@ function parseReadableStream(response, reference, type) { (previousBlockedChunk = chunk)); } else { chunk = previousBlockedChunk; - var chunk$26 = createPendingChunk(response); - chunk$26.then( + var chunk$30 = createPendingChunk(response); + chunk$30.then( function (v) { return controller.enqueue(v); }, @@ -2234,10 +2294,10 @@ function parseReadableStream(response, reference, type) { return controller.error(e); } ); - previousBlockedChunk = chunk$26; + previousBlockedChunk = chunk$30; chunk.then(function () { - previousBlockedChunk === chunk$26 && (previousBlockedChunk = null); - resolveModelChunk(chunk$26, json, -1); + previousBlockedChunk === chunk$30 && (previousBlockedChunk = null); + resolveModelChunk(chunk$30, json, -1); }); } }, @@ -2605,9 +2665,9 @@ exports.renderToReadableStream = function (model, turbopackMap, options) { startWork(request); }, pull: function (controller) { - if (1 === request.status) - (request.status = 2), closeWithError(controller, request.fatalError); - else if (2 !== request.status && null === request.destination) { + if (2 === request.status) + (request.status = 3), closeWithError(controller, request.fatalError); + else if (3 !== request.status && null === request.destination) { request.destination = controller; try { flushCompletedChunks(request, controller); diff --git a/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js b/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js index d9eecb883352d..1ee39e940ecdd 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js +++ b/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js @@ -100,6 +100,7 @@ function printWarning(level, format, args, currentStack) { function scheduleWork(callback) { setImmediate(callback); } +var scheduleMicrotask = queueMicrotask; function flushBuffered(destination) { // If we don't have any more data to send right now. // Flush whatever is in the buffer to the wire. @@ -1624,6 +1625,8 @@ var PENDING$1 = 0; var COMPLETED = 1; var ABORTED = 3; var ERRORED$1 = 4; +var RENDERING = 5; +var AbortSigil = {}; function defaultErrorHandler(error) { console['error'](error); // Don't transform to our wrapper @@ -1633,8 +1636,9 @@ function defaultPostponeHandler(reason) {// Noop } var OPEN = 0; -var CLOSING = 1; -var CLOSED = 2; +var ABORTING = 1; +var CLOSING = 2; +var CLOSED = 3; function createRequest(model, bundlerConfig, onError, identifierPrefix, onPostpone, environmentName, temporaryReferences) { if (ReactSharedInternals.A !== null && ReactSharedInternals.A !== DefaultAsyncDispatcher) { throw new Error('Currently React only supports one RSC renderer at a time.'); @@ -1732,6 +1736,16 @@ function serializeThenable(request, task, thenable) { default: { + if (request.status === ABORTING) { + // We can no longer accept any resolved values + newTask.status = ABORTED; + var errorId = request.fatalError; + var model = stringify(serializeByValueID(errorId)); + emitModelChunk(request, newTask.id, model); + request.abortableTasks.delete(newTask); + return newTask.id; + } + if (typeof thenable.status === 'string') { // Only instrument the thenable if the status if not defined. If // it's defined, but an unknown value, assume it's been instrumented by @@ -2106,6 +2120,13 @@ validated) // DEV-only result = callComponentInDEV(Component, props, componentDebugInfo); } + if (request.status === ABORTING) { + // If we aborted during rendering we should interrupt the render but + // we don't need to provide an error because the renderer will encode + // the abort error as the reason. + throw AbortSigil; + } + if (typeof result === 'object' && result !== null && !isClientReference(result)) { if (typeof result.then === 'function') { // When the return value is in children position we can resolve it immediately, @@ -2447,6 +2468,13 @@ validated) // DEV only wrappedType = callLazyInitInDEV(type); } + if (request.status === ABORTING) { + // lazy initializers are user code and could abort during render + // we don't wan to return any value resolved from the lazy initializer + // if it aborts so we interrupt rendering here + throw AbortSigil; + } + return renderElement(request, task, wrappedType, key, ref, props, owner); } @@ -2471,7 +2499,7 @@ function pingTask(request, task) { if (pingedTasks.length === 1) { request.flushScheduled = request.destination !== null; - scheduleWork(function () { + scheduleMicrotask(function () { return performWork(request); }); } @@ -2769,21 +2797,32 @@ function renderModel(request, task, parent, key, value) { try { return renderModelDestructive(request, task, parent, key, value); } catch (thrownValue) { + // If the suspended/errored value was an element or lazy it can be reduced + // to a lazy reference, so that it doesn't error the parent. + var model = task.model; + var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE); var x = thrownValue === SuspenseException ? // This is a special type of exception used for Suspense. For historical // reasons, the rest of the Suspense implementation expects the thrown // value to be a thenable, because before `use` existed that was the // (unstable) API for suspending. This implementation detail can change // later, once we deprecate the old API in favor of `use`. - getSuspendedThenable() : thrownValue; // If the suspended/errored value was an element or lazy it can be reduced - // to a lazy reference, so that it doesn't error the parent. - - var model = task.model; - var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE); + getSuspendedThenable() : thrownValue; if (typeof x === 'object' && x !== null) { // $FlowFixMe[method-unbinding] if (typeof x.then === 'function') { - // Something suspended, we'll need to create a new task and resolve it later. + if (request.status === ABORTING) { + task.status = ABORTED; + var errorId = request.fatalError; + + if (wasReactNode) { + return serializeLazyID(errorId); + } + + return serializeByValueID(errorId); + } // Something suspended, we'll need to create a new task and resolve it later. + + var newTask = createTask(request, task.model, task.keyPath, task.implicitSlot, request.abortableTasks); var ping = newTask.ping; x.then(ping, ping); @@ -2799,6 +2838,17 @@ function renderModel(request, task, parent, key, value) { return serializeByValueID(newTask.id); } + } + + if (thrownValue === AbortSigil) { + task.status = ABORTED; + var _errorId = request.fatalError; + + if (wasReactNode) { + return serializeLazyID(_errorId); + } + + return serializeByValueID(_errorId); } // Restore the context. We assume that this will be restored by the inner // functions in case nothing throws so we don't use "finally" here. @@ -2811,10 +2861,12 @@ function renderModel(request, task, parent, key, value) { // We'll replace this element with a lazy reference that throws on the client // once it gets rendered. request.pendingChunks++; - var errorId = request.nextChunkId++; + + var _errorId2 = request.nextChunkId++; + var digest = logRecoverableError(request, x); - emitErrorChunk(request, errorId, digest, x); - return serializeLazyID(errorId); + emitErrorChunk(request, _errorId2, digest, x); + return serializeLazyID(_errorId2); } // Something errored but it was not in a React Node. There's no need to serialize // it by value because it'll just error the whole parent row anyway so we can // just stop any siblings and error the whole parent row. @@ -2918,6 +2970,13 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value resolvedModel = callLazyInitInDEV(lazy); } + if (request.status === ABORTING) { + // lazy initializers are user code and could abort during render + // we don't wan to return any value resolved from the lazy initializer + // if it aborts so we interrupt rendering here + throw AbortSigil; + } + { var _debugInfo = lazy._debugInfo; @@ -3828,6 +3887,7 @@ function retryTask(request, task) { } var prevDebugID = debugID; + task.status = RENDERING; try { // Track the root so we know that we have to emit this object even though it @@ -3884,14 +3944,35 @@ function retryTask(request, task) { if (typeof x === 'object' && x !== null) { // $FlowFixMe[method-unbinding] if (typeof x.then === 'function') { - // Something suspended again, let's pick it back up later. + if (request.status === ABORTING) { + request.abortableTasks.delete(task); + task.status = ABORTED; + var errorId = request.fatalError; + var model = stringify(serializeByValueID(errorId)); + emitModelChunk(request, task.id, model); + return; + } // Something suspended again, let's pick it back up later. + + + task.status = PENDING$1; + task.thenableState = getThenableStateAfterSuspending(); var ping = task.ping; x.then(ping, ping); - task.thenableState = getThenableStateAfterSuspending(); return; } } + if (x === AbortSigil) { + request.abortableTasks.delete(task); + task.status = ABORTED; + var _errorId3 = request.fatalError; + + var _model = stringify(serializeByValueID(_errorId3)); + + emitModelChunk(request, task.id, _model); + return; + } + request.abortableTasks.delete(task); task.status = ERRORED$1; var digest = logRecoverableError(request, x); @@ -3953,6 +4034,11 @@ function performWork(request) { } function abortTask(task, request, errorId) { + if (task.status === RENDERING) { + // This task will be aborted by the render + return; + } + task.status = ABORTED; // Instead of emitting an error per task.id, we emit a model that only // has a single value referencing the error. @@ -4047,6 +4133,7 @@ function flushCompletedChunks(request, destination) { if (request.pendingChunks === 0) { + request.status = CLOSED; close$1(destination); request.destination = null; } @@ -4067,10 +4154,14 @@ function enqueueFlush(request) { request.pingedTasks.length === 0 && // If there is no destination there is nothing we can flush to. A flush will // happen when we start flowing again request.destination !== null) { - var destination = request.destination; request.flushScheduled = true; scheduleWork(function () { - return flushCompletedChunks(request, destination); + request.flushScheduled = false; + var destination = request.destination; + + if (destination) { + flushCompletedChunks(request, destination); + } }); } } @@ -4106,15 +4197,17 @@ function stopFlowing(request) { function abort(request, reason) { try { + request.status = ABORTING; var abortableTasks = request.abortableTasks; // We have tasks to abort. We'll emit one error row and then emit a reference // to that row from every row that's still remaining. if (abortableTasks.size > 0) { request.pendingChunks++; var errorId = request.nextChunkId++; + request.fatalError = errorId; var postponeInstance; if (enablePostpone && typeof reason === 'object' && reason !== null && reason.$$typeof === REACT_POSTPONE_TYPE) ; else { - var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason; + var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : typeof reason === 'object' && reason !== null && typeof reason.then === 'function' ? new Error('The render was aborted by the server with a promise.') : reason; var digest = logRecoverableError(request, error); emitErrorChunk(request, errorId, digest, error); } @@ -4131,7 +4224,7 @@ function abort(request, reason) { var _error; if (enablePostpone && typeof reason === 'object' && reason !== null && reason.$$typeof === REACT_POSTPONE_TYPE) ; else { - _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason; + _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : typeof reason === 'object' && reason !== null && typeof reason.then === 'function' ? new Error('The render was aborted by the server with a promise.') : reason; } abortListeners.forEach(function (callback) { diff --git a/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.production.js b/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.production.js index d50b25790f9b1..f890dfb443aff 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.production.js +++ b/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.production.js @@ -14,6 +14,7 @@ require("crypto"); var async_hooks = require("async_hooks"), ReactDOM = require("react-dom"), React = require("react"), + scheduleMicrotask = queueMicrotask, currentView = null, writtenBytes = 0, destinationHasCapacity = !0; @@ -707,7 +708,8 @@ if (!ReactSharedInternalsServer) 'The "react" package in this environment is not configured correctly. The "react-server" condition must be enabled in any environment that runs React Server Components.' ); var ObjectPrototype = Object.prototype, - stringify = JSON.stringify; + stringify = JSON.stringify, + AbortSigil = {}; function defaultErrorHandler(error) { console.error(error); } @@ -788,6 +790,14 @@ function serializeThenable(request, task, thenable) { newTask.id ); default: + if (1 === request.status) + return ( + (newTask.status = 3), + (task = stringify(serializeByValueID(request.fatalError))), + emitModelChunk(request, newTask.id, task), + request.abortableTasks.delete(newTask), + newTask.id + ); "string" !== typeof thenable.status && ((thenable.status = "pending"), thenable.then( @@ -973,6 +983,7 @@ function renderFunctionComponent(request, task, key, Component, props) { thenableIndexCounter = 0; thenableState = prevThenableState; Component = Component(props, void 0); + if (1 === request.status) throw AbortSigil; if ( "object" === typeof Component && null !== Component && @@ -1070,6 +1081,7 @@ function renderElement(request, task, type, key, ref, props) { case REACT_LAZY_TYPE: var init = type._init; type = init(type._payload); + if (1 === request.status) throw AbortSigil; return renderElement(request, task, type, key, ref, props); case REACT_FORWARD_REF_TYPE: return renderFunctionComponent(request, task, key, type.render, props); @@ -1086,7 +1098,7 @@ function pingTask(request, task) { pingedTasks.push(task); 1 === pingedTasks.length && ((request.flushScheduled = null !== request.destination), - setImmediate(function () { + scheduleMicrotask(function () { return performWork(request); })); } @@ -1120,50 +1132,61 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) { ); } catch (thrownValue) { if ( - ((parentPropertyName = + ((parentPropertyName = task.model), + (parentPropertyName = + "object" === typeof parentPropertyName && + null !== parentPropertyName && + (parentPropertyName.$$typeof === REACT_ELEMENT_TYPE || + parentPropertyName.$$typeof === REACT_LAZY_TYPE)), + (value = thrownValue === SuspenseException ? getSuspendedThenable() : thrownValue), - (value = task.model), - (value = - "object" === typeof value && + "object" === typeof value && null !== value && - (value.$$typeof === REACT_ELEMENT_TYPE || - value.$$typeof === REACT_LAZY_TYPE)), - "object" === typeof parentPropertyName && - null !== parentPropertyName && - "function" === typeof parentPropertyName.then) - ) { - JSCompiler_inline_result = createTask( - request, - task.model, - task.keyPath, - task.implicitSlot, - request.abortableTasks - ); - var ping = JSCompiler_inline_result.ping; - parentPropertyName.then(ping, ping); - JSCompiler_inline_result.thenableState = - getThenableStateAfterSuspending(); - task.keyPath = prevKeyPath; - task.implicitSlot = prevImplicitSlot; - JSCompiler_inline_result = value - ? "$L" + JSCompiler_inline_result.id.toString(16) - : serializeByValueID(JSCompiler_inline_result.id); - } else if ( + "function" === typeof value.then) + ) + if (1 === request.status) + (task.status = 3), + (prevKeyPath = request.fatalError), + (JSCompiler_inline_result = parentPropertyName + ? "$L" + prevKeyPath.toString(16) + : serializeByValueID(prevKeyPath)); + else { + JSCompiler_inline_result = createTask( + request, + task.model, + task.keyPath, + task.implicitSlot, + request.abortableTasks + ); + var ping = JSCompiler_inline_result.ping; + value.then(ping, ping); + JSCompiler_inline_result.thenableState = + getThenableStateAfterSuspending(); + task.keyPath = prevKeyPath; + task.implicitSlot = prevImplicitSlot; + JSCompiler_inline_result = parentPropertyName + ? "$L" + JSCompiler_inline_result.id.toString(16) + : serializeByValueID(JSCompiler_inline_result.id); + } + else if (thrownValue === AbortSigil) + (task.status = 3), + (prevKeyPath = request.fatalError), + (JSCompiler_inline_result = parentPropertyName + ? "$L" + prevKeyPath.toString(16) + : serializeByValueID(prevKeyPath)); + else if ( ((task.keyPath = prevKeyPath), (task.implicitSlot = prevImplicitSlot), - value) + parentPropertyName) ) request.pendingChunks++, (prevKeyPath = request.nextChunkId++), - (prevImplicitSlot = logRecoverableError( - request, - parentPropertyName - )), + (prevImplicitSlot = logRecoverableError(request, value)), emitErrorChunk(request, prevKeyPath, prevImplicitSlot), (JSCompiler_inline_result = "$L" + prevKeyPath.toString(16)); - else throw parentPropertyName; + else throw value; } return JSCompiler_inline_result; }, @@ -1314,12 +1337,11 @@ function renderModelDestructive( parentPropertyName ); case REACT_LAZY_TYPE: - return ( - (task.thenableState = null), - (parentPropertyName = value._init), - (value = parentPropertyName(value._payload)), - renderModelDestructive(request, task, emptyRoot, "", value) - ); + task.thenableState = null; + parentPropertyName = value._init; + value = parentPropertyName(value._payload); + if (1 === request.status) throw AbortSigil; + return renderModelDestructive(request, task, emptyRoot, "", value); case REACT_LEGACY_ELEMENT_TYPE: throw Error( 'A React Element from an older version of React was rendered. This is not supported. It can happen if:\n- Multiple copies of the "react" package is used.\n- A library pre-bundled an old copy of "react" or "react/jsx-runtime".\n- A compiler tries to "inline" JSX instead of using the runtime.' @@ -1579,14 +1601,18 @@ function logRecoverableError(request, error) { } function fatalError(request, error) { null !== request.destination - ? ((request.status = 2), request.destination.destroy(error)) - : ((request.status = 1), (request.fatalError = error)); + ? ((request.status = 3), request.destination.destroy(error)) + : ((request.status = 2), (request.fatalError = error)); } function emitErrorChunk(request, id, digest) { digest = { digest: digest }; id = id.toString(16) + ":E" + stringify(digest) + "\n"; request.completedErrorChunks.push(id); } +function emitModelChunk(request, id, json) { + id = id.toString(16) + ":" + json + "\n"; + request.completedRegularChunks.push(id); +} function emitTypedArrayChunk(request, id, tag, typedArray) { request.pendingChunks++; typedArray = new Uint8Array( @@ -1638,12 +1664,12 @@ function emitChunk(request, task, value) { : value instanceof DataView ? emitTypedArrayChunk(request, id, "V", value) : ((value = stringify(value, task.toJSON)), - (task = task.id.toString(16) + ":" + value + "\n"), - request.completedRegularChunks.push(task)); + emitModelChunk(request, task.id, value)); } var emptyRoot = {}; function retryTask(request, task) { - if (0 === task.status) + if (0 === task.status) { + task.status = 5; try { modelRoot = task.model; var resolvedModel = renderModelDestructive( @@ -1660,9 +1686,8 @@ function retryTask(request, task) { request.writtenObjects.set(resolvedModel, serializeByValueID(task.id)), emitChunk(request, task, resolvedModel); else { - var json = stringify(resolvedModel), - processedChunk = task.id.toString(16) + ":" + json + "\n"; - request.completedRegularChunks.push(processedChunk); + var json = stringify(resolvedModel); + emitModelChunk(request, task.id, json); } request.abortableTasks.delete(task); task.status = 1; @@ -1671,10 +1696,23 @@ function retryTask(request, task) { thrownValue === SuspenseException ? getSuspendedThenable() : thrownValue; - if ("object" === typeof x && null !== x && "function" === typeof x.then) { - var ping = task.ping; - x.then(ping, ping); - task.thenableState = getThenableStateAfterSuspending(); + if ("object" === typeof x && null !== x && "function" === typeof x.then) + if (1 === request.status) { + request.abortableTasks.delete(task); + task.status = 3; + var model = stringify(serializeByValueID(request.fatalError)); + emitModelChunk(request, task.id, model); + } else { + task.status = 0; + task.thenableState = getThenableStateAfterSuspending(); + var ping = task.ping; + x.then(ping, ping); + } + else if (x === AbortSigil) { + request.abortableTasks.delete(task); + task.status = 3; + var model$19 = stringify(serializeByValueID(request.fatalError)); + emitModelChunk(request, task.id, model$19); } else { request.abortableTasks.delete(task); task.status = 4; @@ -1683,6 +1721,7 @@ function retryTask(request, task) { } } finally { } + } } function performWork(request) { var prevDispatcher = ReactSharedInternalsServer.H; @@ -1764,7 +1803,7 @@ function flushCompletedChunks(request, destination) { } "function" === typeof destination.flush && destination.flush(); 0 === request.pendingChunks && - (destination.end(), (request.destination = null)); + ((request.status = 3), destination.end(), (request.destination = null)); } function startWork(request) { request.flushScheduled = null !== request.destination; @@ -1773,22 +1812,20 @@ function startWork(request) { }); } function enqueueFlush(request) { - if ( - !1 === request.flushScheduled && + !1 === request.flushScheduled && 0 === request.pingedTasks.length && - null !== request.destination - ) { - var destination = request.destination; - request.flushScheduled = !0; + null !== request.destination && + ((request.flushScheduled = !0), setImmediate(function () { - return flushCompletedChunks(request, destination); - }); - } + request.flushScheduled = !1; + var destination = request.destination; + destination && flushCompletedChunks(request, destination); + })); } function startFlowing(request, destination) { - if (1 === request.status) - (request.status = 2), destination.destroy(request.fatalError); - else if (2 !== request.status && null === request.destination) { + if (2 === request.status) + (request.status = 3), destination.destroy(request.fatalError); + else if (3 !== request.status && null === request.destination) { request.destination = destination; try { flushCompletedChunks(request, destination); @@ -1799,39 +1836,51 @@ function startFlowing(request, destination) { } function abort(request, reason) { try { + request.status = 1; var abortableTasks = request.abortableTasks; if (0 < abortableTasks.size) { request.pendingChunks++; - var errorId = request.nextChunkId++, - error = + var errorId = request.nextChunkId++; + request.fatalError = errorId; + var error = void 0 === reason ? Error("The render was aborted by the server without a reason.") + : "object" === typeof reason && + null !== reason && + "function" === typeof reason.then + ? Error("The render was aborted by the server with a promise.") : reason, digest = logRecoverableError(request, error); emitErrorChunk(request, errorId, digest, error); abortableTasks.forEach(function (task) { - task.status = 3; - var ref = serializeByValueID(errorId); - task = encodeReferenceChunk(request, task.id, ref); - request.completedErrorChunks.push(task); + if (5 !== task.status) { + task.status = 3; + var ref = serializeByValueID(errorId); + task = encodeReferenceChunk(request, task.id, ref); + request.completedErrorChunks.push(task); + } }); abortableTasks.clear(); } var abortListeners = request.abortListeners; if (0 < abortListeners.size) { - var error$22 = + var error$26 = void 0 === reason ? Error("The render was aborted by the server without a reason.") + : "object" === typeof reason && + null !== reason && + "function" === typeof reason.then + ? Error("The render was aborted by the server with a promise.") : reason; abortListeners.forEach(function (callback) { - return callback(error$22); + return callback(error$26); }); abortListeners.clear(); } null !== request.destination && flushCompletedChunks(request, request.destination); - } catch (error$23) { - logRecoverableError(request, error$23), fatalError(request, error$23); + } catch (error$27) { + logRecoverableError(request, error$27), fatalError(request, error$27); } } function resolveServerReference(bundlerConfig, id) { @@ -2273,8 +2322,8 @@ function parseReadableStream(response, reference, type) { (previousBlockedChunk = chunk)); } else { chunk = previousBlockedChunk; - var chunk$26 = createPendingChunk(response); - chunk$26.then( + var chunk$30 = createPendingChunk(response); + chunk$30.then( function (v) { return controller.enqueue(v); }, @@ -2282,10 +2331,10 @@ function parseReadableStream(response, reference, type) { return controller.error(e); } ); - previousBlockedChunk = chunk$26; + previousBlockedChunk = chunk$30; chunk.then(function () { - previousBlockedChunk === chunk$26 && (previousBlockedChunk = null); - resolveModelChunk(chunk$26, json, -1); + previousBlockedChunk === chunk$30 && (previousBlockedChunk = null); + resolveModelChunk(chunk$30, json, -1); }); } }, @@ -2643,12 +2692,12 @@ exports.decodeReplyFromBusboy = function (busboyStream, turbopackMap, options) { "React doesn't accept base64 encoded file uploads because we don't expect form data passed from a browser to ever encode data that way. If that's the wrong assumption, we can easily fix it." ); pendingFiles++; - var JSCompiler_object_inline_chunks_216 = []; + var JSCompiler_object_inline_chunks_201 = []; value.on("data", function (chunk) { - JSCompiler_object_inline_chunks_216.push(chunk); + JSCompiler_object_inline_chunks_201.push(chunk); }); value.on("end", function () { - var blob = new Blob(JSCompiler_object_inline_chunks_216, { + var blob = new Blob(JSCompiler_object_inline_chunks_201, { type: mimeType }); response._formData.append(name, blob, filename); diff --git a/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.development.js b/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.development.js index 0f79a67c489a3..2a08b45d5665a 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.development.js +++ b/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.development.js @@ -100,6 +100,7 @@ function printWarning(level, format, args, currentStack) { function scheduleWork(callback) { setImmediate(callback); } +var scheduleMicrotask = queueMicrotask; function flushBuffered(destination) { // If we don't have any more data to send right now. // Flush whatever is in the buffer to the wire. @@ -1624,6 +1625,8 @@ var PENDING$1 = 0; var COMPLETED = 1; var ABORTED = 3; var ERRORED$1 = 4; +var RENDERING = 5; +var AbortSigil = {}; function defaultErrorHandler(error) { console['error'](error); // Don't transform to our wrapper @@ -1633,8 +1636,9 @@ function defaultPostponeHandler(reason) {// Noop } var OPEN = 0; -var CLOSING = 1; -var CLOSED = 2; +var ABORTING = 1; +var CLOSING = 2; +var CLOSED = 3; function createRequest(model, bundlerConfig, onError, identifierPrefix, onPostpone, environmentName, temporaryReferences) { if (ReactSharedInternals.A !== null && ReactSharedInternals.A !== DefaultAsyncDispatcher) { throw new Error('Currently React only supports one RSC renderer at a time.'); @@ -1732,6 +1736,16 @@ function serializeThenable(request, task, thenable) { default: { + if (request.status === ABORTING) { + // We can no longer accept any resolved values + newTask.status = ABORTED; + var errorId = request.fatalError; + var model = stringify(serializeByValueID(errorId)); + emitModelChunk(request, newTask.id, model); + request.abortableTasks.delete(newTask); + return newTask.id; + } + if (typeof thenable.status === 'string') { // Only instrument the thenable if the status if not defined. If // it's defined, but an unknown value, assume it's been instrumented by @@ -2106,6 +2120,13 @@ validated) // DEV-only result = callComponentInDEV(Component, props, componentDebugInfo); } + if (request.status === ABORTING) { + // If we aborted during rendering we should interrupt the render but + // we don't need to provide an error because the renderer will encode + // the abort error as the reason. + throw AbortSigil; + } + if (typeof result === 'object' && result !== null && !isClientReference(result)) { if (typeof result.then === 'function') { // When the return value is in children position we can resolve it immediately, @@ -2447,6 +2468,13 @@ validated) // DEV only wrappedType = callLazyInitInDEV(type); } + if (request.status === ABORTING) { + // lazy initializers are user code and could abort during render + // we don't wan to return any value resolved from the lazy initializer + // if it aborts so we interrupt rendering here + throw AbortSigil; + } + return renderElement(request, task, wrappedType, key, ref, props, owner); } @@ -2471,7 +2499,7 @@ function pingTask(request, task) { if (pingedTasks.length === 1) { request.flushScheduled = request.destination !== null; - scheduleWork(function () { + scheduleMicrotask(function () { return performWork(request); }); } @@ -2769,21 +2797,32 @@ function renderModel(request, task, parent, key, value) { try { return renderModelDestructive(request, task, parent, key, value); } catch (thrownValue) { + // If the suspended/errored value was an element or lazy it can be reduced + // to a lazy reference, so that it doesn't error the parent. + var model = task.model; + var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE); var x = thrownValue === SuspenseException ? // This is a special type of exception used for Suspense. For historical // reasons, the rest of the Suspense implementation expects the thrown // value to be a thenable, because before `use` existed that was the // (unstable) API for suspending. This implementation detail can change // later, once we deprecate the old API in favor of `use`. - getSuspendedThenable() : thrownValue; // If the suspended/errored value was an element or lazy it can be reduced - // to a lazy reference, so that it doesn't error the parent. - - var model = task.model; - var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE); + getSuspendedThenable() : thrownValue; if (typeof x === 'object' && x !== null) { // $FlowFixMe[method-unbinding] if (typeof x.then === 'function') { - // Something suspended, we'll need to create a new task and resolve it later. + if (request.status === ABORTING) { + task.status = ABORTED; + var errorId = request.fatalError; + + if (wasReactNode) { + return serializeLazyID(errorId); + } + + return serializeByValueID(errorId); + } // Something suspended, we'll need to create a new task and resolve it later. + + var newTask = createTask(request, task.model, task.keyPath, task.implicitSlot, request.abortableTasks); var ping = newTask.ping; x.then(ping, ping); @@ -2799,6 +2838,17 @@ function renderModel(request, task, parent, key, value) { return serializeByValueID(newTask.id); } + } + + if (thrownValue === AbortSigil) { + task.status = ABORTED; + var _errorId = request.fatalError; + + if (wasReactNode) { + return serializeLazyID(_errorId); + } + + return serializeByValueID(_errorId); } // Restore the context. We assume that this will be restored by the inner // functions in case nothing throws so we don't use "finally" here. @@ -2811,10 +2861,12 @@ function renderModel(request, task, parent, key, value) { // We'll replace this element with a lazy reference that throws on the client // once it gets rendered. request.pendingChunks++; - var errorId = request.nextChunkId++; + + var _errorId2 = request.nextChunkId++; + var digest = logRecoverableError(request, x); - emitErrorChunk(request, errorId, digest, x); - return serializeLazyID(errorId); + emitErrorChunk(request, _errorId2, digest, x); + return serializeLazyID(_errorId2); } // Something errored but it was not in a React Node. There's no need to serialize // it by value because it'll just error the whole parent row anyway so we can // just stop any siblings and error the whole parent row. @@ -2918,6 +2970,13 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value resolvedModel = callLazyInitInDEV(lazy); } + if (request.status === ABORTING) { + // lazy initializers are user code and could abort during render + // we don't wan to return any value resolved from the lazy initializer + // if it aborts so we interrupt rendering here + throw AbortSigil; + } + { var _debugInfo = lazy._debugInfo; @@ -3828,6 +3887,7 @@ function retryTask(request, task) { } var prevDebugID = debugID; + task.status = RENDERING; try { // Track the root so we know that we have to emit this object even though it @@ -3884,14 +3944,35 @@ function retryTask(request, task) { if (typeof x === 'object' && x !== null) { // $FlowFixMe[method-unbinding] if (typeof x.then === 'function') { - // Something suspended again, let's pick it back up later. + if (request.status === ABORTING) { + request.abortableTasks.delete(task); + task.status = ABORTED; + var errorId = request.fatalError; + var model = stringify(serializeByValueID(errorId)); + emitModelChunk(request, task.id, model); + return; + } // Something suspended again, let's pick it back up later. + + + task.status = PENDING$1; + task.thenableState = getThenableStateAfterSuspending(); var ping = task.ping; x.then(ping, ping); - task.thenableState = getThenableStateAfterSuspending(); return; } } + if (x === AbortSigil) { + request.abortableTasks.delete(task); + task.status = ABORTED; + var _errorId3 = request.fatalError; + + var _model = stringify(serializeByValueID(_errorId3)); + + emitModelChunk(request, task.id, _model); + return; + } + request.abortableTasks.delete(task); task.status = ERRORED$1; var digest = logRecoverableError(request, x); @@ -3953,6 +4034,11 @@ function performWork(request) { } function abortTask(task, request, errorId) { + if (task.status === RENDERING) { + // This task will be aborted by the render + return; + } + task.status = ABORTED; // Instead of emitting an error per task.id, we emit a model that only // has a single value referencing the error. @@ -4047,6 +4133,7 @@ function flushCompletedChunks(request, destination) { if (request.pendingChunks === 0) { + request.status = CLOSED; close$1(destination); request.destination = null; } @@ -4067,10 +4154,14 @@ function enqueueFlush(request) { request.pingedTasks.length === 0 && // If there is no destination there is nothing we can flush to. A flush will // happen when we start flowing again request.destination !== null) { - var destination = request.destination; request.flushScheduled = true; scheduleWork(function () { - return flushCompletedChunks(request, destination); + request.flushScheduled = false; + var destination = request.destination; + + if (destination) { + flushCompletedChunks(request, destination); + } }); } } @@ -4106,15 +4197,17 @@ function stopFlowing(request) { function abort(request, reason) { try { + request.status = ABORTING; var abortableTasks = request.abortableTasks; // We have tasks to abort. We'll emit one error row and then emit a reference // to that row from every row that's still remaining. if (abortableTasks.size > 0) { request.pendingChunks++; var errorId = request.nextChunkId++; + request.fatalError = errorId; var postponeInstance; if (enablePostpone && typeof reason === 'object' && reason !== null && reason.$$typeof === REACT_POSTPONE_TYPE) ; else { - var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason; + var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : typeof reason === 'object' && reason !== null && typeof reason.then === 'function' ? new Error('The render was aborted by the server with a promise.') : reason; var digest = logRecoverableError(request, error); emitErrorChunk(request, errorId, digest, error); } @@ -4131,7 +4224,7 @@ function abort(request, reason) { var _error; if (enablePostpone && typeof reason === 'object' && reason !== null && reason.$$typeof === REACT_POSTPONE_TYPE) ; else { - _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason; + _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : typeof reason === 'object' && reason !== null && typeof reason.then === 'function' ? new Error('The render was aborted by the server with a promise.') : reason; } abortListeners.forEach(function (callback) { diff --git a/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.production.js b/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.production.js index 219314934a52a..b2a1cabf87ac7 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.production.js +++ b/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.production.js @@ -14,6 +14,7 @@ require("crypto"); var async_hooks = require("async_hooks"), ReactDOM = require("react-dom"), React = require("react"), + scheduleMicrotask = queueMicrotask, currentView = null, writtenBytes = 0, destinationHasCapacity = !0; @@ -707,7 +708,8 @@ if (!ReactSharedInternalsServer) 'The "react" package in this environment is not configured correctly. The "react-server" condition must be enabled in any environment that runs React Server Components.' ); var ObjectPrototype = Object.prototype, - stringify = JSON.stringify; + stringify = JSON.stringify, + AbortSigil = {}; function defaultErrorHandler(error) { console.error(error); } @@ -788,6 +790,14 @@ function serializeThenable(request, task, thenable) { newTask.id ); default: + if (1 === request.status) + return ( + (newTask.status = 3), + (task = stringify(serializeByValueID(request.fatalError))), + emitModelChunk(request, newTask.id, task), + request.abortableTasks.delete(newTask), + newTask.id + ); "string" !== typeof thenable.status && ((thenable.status = "pending"), thenable.then( @@ -973,6 +983,7 @@ function renderFunctionComponent(request, task, key, Component, props) { thenableIndexCounter = 0; thenableState = prevThenableState; Component = Component(props, void 0); + if (1 === request.status) throw AbortSigil; if ( "object" === typeof Component && null !== Component && @@ -1070,6 +1081,7 @@ function renderElement(request, task, type, key, ref, props) { case REACT_LAZY_TYPE: var init = type._init; type = init(type._payload); + if (1 === request.status) throw AbortSigil; return renderElement(request, task, type, key, ref, props); case REACT_FORWARD_REF_TYPE: return renderFunctionComponent(request, task, key, type.render, props); @@ -1086,7 +1098,7 @@ function pingTask(request, task) { pingedTasks.push(task); 1 === pingedTasks.length && ((request.flushScheduled = null !== request.destination), - setImmediate(function () { + scheduleMicrotask(function () { return performWork(request); })); } @@ -1120,50 +1132,61 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) { ); } catch (thrownValue) { if ( - ((parentPropertyName = + ((parentPropertyName = task.model), + (parentPropertyName = + "object" === typeof parentPropertyName && + null !== parentPropertyName && + (parentPropertyName.$$typeof === REACT_ELEMENT_TYPE || + parentPropertyName.$$typeof === REACT_LAZY_TYPE)), + (value = thrownValue === SuspenseException ? getSuspendedThenable() : thrownValue), - (value = task.model), - (value = - "object" === typeof value && + "object" === typeof value && null !== value && - (value.$$typeof === REACT_ELEMENT_TYPE || - value.$$typeof === REACT_LAZY_TYPE)), - "object" === typeof parentPropertyName && - null !== parentPropertyName && - "function" === typeof parentPropertyName.then) - ) { - JSCompiler_inline_result = createTask( - request, - task.model, - task.keyPath, - task.implicitSlot, - request.abortableTasks - ); - var ping = JSCompiler_inline_result.ping; - parentPropertyName.then(ping, ping); - JSCompiler_inline_result.thenableState = - getThenableStateAfterSuspending(); - task.keyPath = prevKeyPath; - task.implicitSlot = prevImplicitSlot; - JSCompiler_inline_result = value - ? "$L" + JSCompiler_inline_result.id.toString(16) - : serializeByValueID(JSCompiler_inline_result.id); - } else if ( + "function" === typeof value.then) + ) + if (1 === request.status) + (task.status = 3), + (prevKeyPath = request.fatalError), + (JSCompiler_inline_result = parentPropertyName + ? "$L" + prevKeyPath.toString(16) + : serializeByValueID(prevKeyPath)); + else { + JSCompiler_inline_result = createTask( + request, + task.model, + task.keyPath, + task.implicitSlot, + request.abortableTasks + ); + var ping = JSCompiler_inline_result.ping; + value.then(ping, ping); + JSCompiler_inline_result.thenableState = + getThenableStateAfterSuspending(); + task.keyPath = prevKeyPath; + task.implicitSlot = prevImplicitSlot; + JSCompiler_inline_result = parentPropertyName + ? "$L" + JSCompiler_inline_result.id.toString(16) + : serializeByValueID(JSCompiler_inline_result.id); + } + else if (thrownValue === AbortSigil) + (task.status = 3), + (prevKeyPath = request.fatalError), + (JSCompiler_inline_result = parentPropertyName + ? "$L" + prevKeyPath.toString(16) + : serializeByValueID(prevKeyPath)); + else if ( ((task.keyPath = prevKeyPath), (task.implicitSlot = prevImplicitSlot), - value) + parentPropertyName) ) request.pendingChunks++, (prevKeyPath = request.nextChunkId++), - (prevImplicitSlot = logRecoverableError( - request, - parentPropertyName - )), + (prevImplicitSlot = logRecoverableError(request, value)), emitErrorChunk(request, prevKeyPath, prevImplicitSlot), (JSCompiler_inline_result = "$L" + prevKeyPath.toString(16)); - else throw parentPropertyName; + else throw value; } return JSCompiler_inline_result; }, @@ -1314,12 +1337,11 @@ function renderModelDestructive( parentPropertyName ); case REACT_LAZY_TYPE: - return ( - (task.thenableState = null), - (parentPropertyName = value._init), - (value = parentPropertyName(value._payload)), - renderModelDestructive(request, task, emptyRoot, "", value) - ); + task.thenableState = null; + parentPropertyName = value._init; + value = parentPropertyName(value._payload); + if (1 === request.status) throw AbortSigil; + return renderModelDestructive(request, task, emptyRoot, "", value); case REACT_LEGACY_ELEMENT_TYPE: throw Error( 'A React Element from an older version of React was rendered. This is not supported. It can happen if:\n- Multiple copies of the "react" package is used.\n- A library pre-bundled an old copy of "react" or "react/jsx-runtime".\n- A compiler tries to "inline" JSX instead of using the runtime.' @@ -1579,14 +1601,18 @@ function logRecoverableError(request, error) { } function fatalError(request, error) { null !== request.destination - ? ((request.status = 2), request.destination.destroy(error)) - : ((request.status = 1), (request.fatalError = error)); + ? ((request.status = 3), request.destination.destroy(error)) + : ((request.status = 2), (request.fatalError = error)); } function emitErrorChunk(request, id, digest) { digest = { digest: digest }; id = id.toString(16) + ":E" + stringify(digest) + "\n"; request.completedErrorChunks.push(id); } +function emitModelChunk(request, id, json) { + id = id.toString(16) + ":" + json + "\n"; + request.completedRegularChunks.push(id); +} function emitTypedArrayChunk(request, id, tag, typedArray) { request.pendingChunks++; typedArray = new Uint8Array( @@ -1638,12 +1664,12 @@ function emitChunk(request, task, value) { : value instanceof DataView ? emitTypedArrayChunk(request, id, "V", value) : ((value = stringify(value, task.toJSON)), - (task = task.id.toString(16) + ":" + value + "\n"), - request.completedRegularChunks.push(task)); + emitModelChunk(request, task.id, value)); } var emptyRoot = {}; function retryTask(request, task) { - if (0 === task.status) + if (0 === task.status) { + task.status = 5; try { modelRoot = task.model; var resolvedModel = renderModelDestructive( @@ -1660,9 +1686,8 @@ function retryTask(request, task) { request.writtenObjects.set(resolvedModel, serializeByValueID(task.id)), emitChunk(request, task, resolvedModel); else { - var json = stringify(resolvedModel), - processedChunk = task.id.toString(16) + ":" + json + "\n"; - request.completedRegularChunks.push(processedChunk); + var json = stringify(resolvedModel); + emitModelChunk(request, task.id, json); } request.abortableTasks.delete(task); task.status = 1; @@ -1671,10 +1696,23 @@ function retryTask(request, task) { thrownValue === SuspenseException ? getSuspendedThenable() : thrownValue; - if ("object" === typeof x && null !== x && "function" === typeof x.then) { - var ping = task.ping; - x.then(ping, ping); - task.thenableState = getThenableStateAfterSuspending(); + if ("object" === typeof x && null !== x && "function" === typeof x.then) + if (1 === request.status) { + request.abortableTasks.delete(task); + task.status = 3; + var model = stringify(serializeByValueID(request.fatalError)); + emitModelChunk(request, task.id, model); + } else { + task.status = 0; + task.thenableState = getThenableStateAfterSuspending(); + var ping = task.ping; + x.then(ping, ping); + } + else if (x === AbortSigil) { + request.abortableTasks.delete(task); + task.status = 3; + var model$19 = stringify(serializeByValueID(request.fatalError)); + emitModelChunk(request, task.id, model$19); } else { request.abortableTasks.delete(task); task.status = 4; @@ -1683,6 +1721,7 @@ function retryTask(request, task) { } } finally { } + } } function performWork(request) { var prevDispatcher = ReactSharedInternalsServer.H; @@ -1764,7 +1803,7 @@ function flushCompletedChunks(request, destination) { } "function" === typeof destination.flush && destination.flush(); 0 === request.pendingChunks && - (destination.end(), (request.destination = null)); + ((request.status = 3), destination.end(), (request.destination = null)); } function startWork(request) { request.flushScheduled = null !== request.destination; @@ -1773,22 +1812,20 @@ function startWork(request) { }); } function enqueueFlush(request) { - if ( - !1 === request.flushScheduled && + !1 === request.flushScheduled && 0 === request.pingedTasks.length && - null !== request.destination - ) { - var destination = request.destination; - request.flushScheduled = !0; + null !== request.destination && + ((request.flushScheduled = !0), setImmediate(function () { - return flushCompletedChunks(request, destination); - }); - } + request.flushScheduled = !1; + var destination = request.destination; + destination && flushCompletedChunks(request, destination); + })); } function startFlowing(request, destination) { - if (1 === request.status) - (request.status = 2), destination.destroy(request.fatalError); - else if (2 !== request.status && null === request.destination) { + if (2 === request.status) + (request.status = 3), destination.destroy(request.fatalError); + else if (3 !== request.status && null === request.destination) { request.destination = destination; try { flushCompletedChunks(request, destination); @@ -1799,39 +1836,51 @@ function startFlowing(request, destination) { } function abort(request, reason) { try { + request.status = 1; var abortableTasks = request.abortableTasks; if (0 < abortableTasks.size) { request.pendingChunks++; - var errorId = request.nextChunkId++, - error = + var errorId = request.nextChunkId++; + request.fatalError = errorId; + var error = void 0 === reason ? Error("The render was aborted by the server without a reason.") + : "object" === typeof reason && + null !== reason && + "function" === typeof reason.then + ? Error("The render was aborted by the server with a promise.") : reason, digest = logRecoverableError(request, error); emitErrorChunk(request, errorId, digest, error); abortableTasks.forEach(function (task) { - task.status = 3; - var ref = serializeByValueID(errorId); - task = encodeReferenceChunk(request, task.id, ref); - request.completedErrorChunks.push(task); + if (5 !== task.status) { + task.status = 3; + var ref = serializeByValueID(errorId); + task = encodeReferenceChunk(request, task.id, ref); + request.completedErrorChunks.push(task); + } }); abortableTasks.clear(); } var abortListeners = request.abortListeners; if (0 < abortListeners.size) { - var error$22 = + var error$26 = void 0 === reason ? Error("The render was aborted by the server without a reason.") + : "object" === typeof reason && + null !== reason && + "function" === typeof reason.then + ? Error("The render was aborted by the server with a promise.") : reason; abortListeners.forEach(function (callback) { - return callback(error$22); + return callback(error$26); }); abortListeners.clear(); } null !== request.destination && flushCompletedChunks(request, request.destination); - } catch (error$23) { - logRecoverableError(request, error$23), fatalError(request, error$23); + } catch (error$27) { + logRecoverableError(request, error$27), fatalError(request, error$27); } } function resolveServerReference(bundlerConfig, id) { @@ -2242,8 +2291,8 @@ function parseReadableStream(response, reference, type) { (previousBlockedChunk = chunk)); } else { chunk = previousBlockedChunk; - var chunk$26 = createPendingChunk(response); - chunk$26.then( + var chunk$30 = createPendingChunk(response); + chunk$30.then( function (v) { return controller.enqueue(v); }, @@ -2251,10 +2300,10 @@ function parseReadableStream(response, reference, type) { return controller.error(e); } ); - previousBlockedChunk = chunk$26; + previousBlockedChunk = chunk$30; chunk.then(function () { - previousBlockedChunk === chunk$26 && (previousBlockedChunk = null); - resolveModelChunk(chunk$26, json, -1); + previousBlockedChunk === chunk$30 && (previousBlockedChunk = null); + resolveModelChunk(chunk$30, json, -1); }); } }, @@ -2612,12 +2661,12 @@ exports.decodeReplyFromBusboy = function (busboyStream, turbopackMap, options) { "React doesn't accept base64 encoded file uploads because we don't expect form data passed from a browser to ever encode data that way. If that's the wrong assumption, we can easily fix it." ); pendingFiles++; - var JSCompiler_object_inline_chunks_216 = []; + var JSCompiler_object_inline_chunks_201 = []; value.on("data", function (chunk) { - JSCompiler_object_inline_chunks_216.push(chunk); + JSCompiler_object_inline_chunks_201.push(chunk); }); value.on("end", function () { - var blob = new Blob(JSCompiler_object_inline_chunks_216, { + var blob = new Blob(JSCompiler_object_inline_chunks_201, { type: mimeType }); response._formData.append(name, blob, filename); diff --git a/packages/next/src/compiled/react-server-dom-turbopack/package.json b/packages/next/src/compiled/react-server-dom-turbopack/package.json index a3195b088c38f..4d1e2b6cead8a 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack/package.json +++ b/packages/next/src/compiled/react-server-dom-turbopack/package.json @@ -47,7 +47,7 @@ "neo-async": "^2.6.1" }, "peerDependencies": { - "react": "19.0.0-rc-6230622a1a-20240610", - "react-dom": "19.0.0-rc-6230622a1a-20240610" + "react": "19.0.0-rc-20b6f4c0e8-20240607", + "react-dom": "19.0.0-rc-20b6f4c0e8-20240607" } } \ No newline at end of file diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.browser.development.js b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.browser.development.js index aea9b6e7a0e27..edcd25de5ee0e 100644 --- a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.browser.development.js +++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.browser.development.js @@ -2991,9 +2991,20 @@ function stopStream(response, id, row) { function resolveErrorDev(response, id, digest, message, stack) { + var error; + + { + var callStack = buildFakeCallStack(response, stack, // $FlowFixMe[incompatible-use] + Error.bind(null, message || 'An error occurred in the Server Components render but no message was provided')); + var rootTask = response._debugRootTask; + + if (rootTask != null) { + error = rootTask.run(callStack); + } else { + error = callStack(); + } + } - var error = new Error(message || 'An error occurred in the Server Components render but no message was provided'); - error.stack = stack; error.digest = digest; var errorWithDigest = error; var chunks = response._chunks; @@ -3032,6 +3043,7 @@ function resolveHint(response, code, model) { var supportsCreateTask = !!console.createTask; var taskCache = supportsCreateTask ? new WeakMap() : null; var fakeFunctionCache = new Map() ; +var fakeFunctionIdx = 0; function createFakeFunction(name, filename, sourceMap, line, col) { // This creates a fake copy of a Server Module. It represents a module that has already @@ -3043,15 +3055,31 @@ function createFakeFunction(name, filename, sourceMap, line, col) { var code; if (line <= 1) { - code = '_=>' + ' '.repeat(col < 4 ? 0 : col - 4) + '_()\n' + comment + '\n'; + code = '_=>' + ' '.repeat(col < 4 ? 0 : col - 4) + '_()\n' + comment; } else { - code = comment + '\n'.repeat(line - 2) + '_=>\n' + ' '.repeat(col < 1 ? 0 : col - 1) + '_()\n'; + code = comment + '\n'.repeat(line - 2) + '_=>\n' + ' '.repeat(col < 1 ? 0 : col - 1) + '_()'; + } + + if (filename.startsWith('/')) { + // If the filename starts with `/` we assume that it is a file system file + // rather than relative to the current host. Since on the server fully qualified + // stack traces use the file path. + // TODO: What does this look like on Windows? + filename = 'file://' + filename; } if (sourceMap) { - code += '//# sourceMappingURL=' + sourceMap; + // We use the prefix rsc://React/ to separate these from other files listed in + // the Chrome DevTools. We need a "host name" and not just a protocol because + // otherwise the group name becomes the root folder. Ideally we don't want to + // show these at all but there's two reasons to assign a fake URL. + // 1) A printed stack trace string needs a unique URL to be able to source map it. + // 2) If source maps are disabled or fails, you should at least be able to tell + // which file it was. + code += '\n//# sourceURL=rsc://React/' + filename + '?' + fakeFunctionIdx++; + code += '\n//# sourceMappingURL=' + sourceMap; } else if (filename) { - code += '//# sourceURL=' + filename; + code += '\n//# sourceURL=' + filename; } var fn; diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.edge.development.js b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.edge.development.js index e47c9ee42f7f1..5478d33921acd 100644 --- a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.edge.development.js +++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.edge.development.js @@ -3245,9 +3245,20 @@ function stopStream(response, id, row) { function resolveErrorDev(response, id, digest, message, stack) { + var error; + + { + var callStack = buildFakeCallStack(response, stack, // $FlowFixMe[incompatible-use] + Error.bind(null, message || 'An error occurred in the Server Components render but no message was provided')); + var rootTask = response._debugRootTask; + + if (rootTask != null) { + error = rootTask.run(callStack); + } else { + error = callStack(); + } + } - var error = new Error(message || 'An error occurred in the Server Components render but no message was provided'); - error.stack = stack; error.digest = digest; var errorWithDigest = error; var chunks = response._chunks; @@ -3286,6 +3297,7 @@ function resolveHint(response, code, model) { var supportsCreateTask = !!console.createTask; var taskCache = supportsCreateTask ? new WeakMap() : null; var fakeFunctionCache = new Map() ; +var fakeFunctionIdx = 0; function createFakeFunction(name, filename, sourceMap, line, col) { // This creates a fake copy of a Server Module. It represents a module that has already @@ -3297,15 +3309,31 @@ function createFakeFunction(name, filename, sourceMap, line, col) { var code; if (line <= 1) { - code = '_=>' + ' '.repeat(col < 4 ? 0 : col - 4) + '_()\n' + comment + '\n'; + code = '_=>' + ' '.repeat(col < 4 ? 0 : col - 4) + '_()\n' + comment; } else { - code = comment + '\n'.repeat(line - 2) + '_=>\n' + ' '.repeat(col < 1 ? 0 : col - 1) + '_()\n'; + code = comment + '\n'.repeat(line - 2) + '_=>\n' + ' '.repeat(col < 1 ? 0 : col - 1) + '_()'; + } + + if (filename.startsWith('/')) { + // If the filename starts with `/` we assume that it is a file system file + // rather than relative to the current host. Since on the server fully qualified + // stack traces use the file path. + // TODO: What does this look like on Windows? + filename = 'file://' + filename; } if (sourceMap) { - code += '//# sourceMappingURL=' + sourceMap; + // We use the prefix rsc://React/ to separate these from other files listed in + // the Chrome DevTools. We need a "host name" and not just a protocol because + // otherwise the group name becomes the root folder. Ideally we don't want to + // show these at all but there's two reasons to assign a fake URL. + // 1) A printed stack trace string needs a unique URL to be able to source map it. + // 2) If source maps are disabled or fails, you should at least be able to tell + // which file it was. + code += '\n//# sourceURL=rsc://React/' + filename + '?' + fakeFunctionIdx++; + code += '\n//# sourceMappingURL=' + sourceMap; } else if (filename) { - code += '//# sourceURL=' + filename; + code += '\n//# sourceURL=' + filename; } var fn; diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.node.development.js b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.node.development.js index 403a895cc1b5c..1573019566a0d 100644 --- a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.node.development.js +++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.node.development.js @@ -3243,9 +3243,20 @@ function stopStream(response, id, row) { function resolveErrorDev(response, id, digest, message, stack) { + var error; + + { + var callStack = buildFakeCallStack(response, stack, // $FlowFixMe[incompatible-use] + Error.bind(null, message || 'An error occurred in the Server Components render but no message was provided')); + var rootTask = response._debugRootTask; + + if (rootTask != null) { + error = rootTask.run(callStack); + } else { + error = callStack(); + } + } - var error = new Error(message || 'An error occurred in the Server Components render but no message was provided'); - error.stack = stack; error.digest = digest; var errorWithDigest = error; var chunks = response._chunks; @@ -3284,6 +3295,7 @@ function resolveHint(response, code, model) { var supportsCreateTask = !!console.createTask; var taskCache = supportsCreateTask ? new WeakMap() : null; var fakeFunctionCache = new Map() ; +var fakeFunctionIdx = 0; function createFakeFunction(name, filename, sourceMap, line, col) { // This creates a fake copy of a Server Module. It represents a module that has already @@ -3295,15 +3307,31 @@ function createFakeFunction(name, filename, sourceMap, line, col) { var code; if (line <= 1) { - code = '_=>' + ' '.repeat(col < 4 ? 0 : col - 4) + '_()\n' + comment + '\n'; + code = '_=>' + ' '.repeat(col < 4 ? 0 : col - 4) + '_()\n' + comment; } else { - code = comment + '\n'.repeat(line - 2) + '_=>\n' + ' '.repeat(col < 1 ? 0 : col - 1) + '_()\n'; + code = comment + '\n'.repeat(line - 2) + '_=>\n' + ' '.repeat(col < 1 ? 0 : col - 1) + '_()'; + } + + if (filename.startsWith('/')) { + // If the filename starts with `/` we assume that it is a file system file + // rather than relative to the current host. Since on the server fully qualified + // stack traces use the file path. + // TODO: What does this look like on Windows? + filename = 'file://' + filename; } if (sourceMap) { - code += '//# sourceMappingURL=' + sourceMap; + // We use the prefix rsc://React/ to separate these from other files listed in + // the Chrome DevTools. We need a "host name" and not just a protocol because + // otherwise the group name becomes the root folder. Ideally we don't want to + // show these at all but there's two reasons to assign a fake URL. + // 1) A printed stack trace string needs a unique URL to be able to source map it. + // 2) If source maps are disabled or fails, you should at least be able to tell + // which file it was. + code += '\n//# sourceURL=rsc://React/' + filename + '?' + fakeFunctionIdx++; + code += '\n//# sourceMappingURL=' + sourceMap; } else if (filename) { - code += '//# sourceURL=' + filename; + code += '\n//# sourceURL=' + filename; } var fn; diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.node.unbundled.development.js b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.node.unbundled.development.js index c934a07eb1afa..fdf7ff93190df 100644 --- a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.node.unbundled.development.js +++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.node.unbundled.development.js @@ -3196,9 +3196,20 @@ function stopStream(response, id, row) { function resolveErrorDev(response, id, digest, message, stack) { + var error; + + { + var callStack = buildFakeCallStack(response, stack, // $FlowFixMe[incompatible-use] + Error.bind(null, message || 'An error occurred in the Server Components render but no message was provided')); + var rootTask = response._debugRootTask; + + if (rootTask != null) { + error = rootTask.run(callStack); + } else { + error = callStack(); + } + } - var error = new Error(message || 'An error occurred in the Server Components render but no message was provided'); - error.stack = stack; error.digest = digest; var errorWithDigest = error; var chunks = response._chunks; @@ -3237,6 +3248,7 @@ function resolveHint(response, code, model) { var supportsCreateTask = !!console.createTask; var taskCache = supportsCreateTask ? new WeakMap() : null; var fakeFunctionCache = new Map() ; +var fakeFunctionIdx = 0; function createFakeFunction(name, filename, sourceMap, line, col) { // This creates a fake copy of a Server Module. It represents a module that has already @@ -3248,15 +3260,31 @@ function createFakeFunction(name, filename, sourceMap, line, col) { var code; if (line <= 1) { - code = '_=>' + ' '.repeat(col < 4 ? 0 : col - 4) + '_()\n' + comment + '\n'; + code = '_=>' + ' '.repeat(col < 4 ? 0 : col - 4) + '_()\n' + comment; } else { - code = comment + '\n'.repeat(line - 2) + '_=>\n' + ' '.repeat(col < 1 ? 0 : col - 1) + '_()\n'; + code = comment + '\n'.repeat(line - 2) + '_=>\n' + ' '.repeat(col < 1 ? 0 : col - 1) + '_()'; + } + + if (filename.startsWith('/')) { + // If the filename starts with `/` we assume that it is a file system file + // rather than relative to the current host. Since on the server fully qualified + // stack traces use the file path. + // TODO: What does this look like on Windows? + filename = 'file://' + filename; } if (sourceMap) { - code += '//# sourceMappingURL=' + sourceMap; + // We use the prefix rsc://React/ to separate these from other files listed in + // the Chrome DevTools. We need a "host name" and not just a protocol because + // otherwise the group name becomes the root folder. Ideally we don't want to + // show these at all but there's two reasons to assign a fake URL. + // 1) A printed stack trace string needs a unique URL to be able to source map it. + // 2) If source maps are disabled or fails, you should at least be able to tell + // which file it was. + code += '\n//# sourceURL=rsc://React/' + filename + '?' + fakeFunctionIdx++; + code += '\n//# sourceMappingURL=' + sourceMap; } else if (filename) { - code += '//# sourceURL=' + filename; + code += '\n//# sourceURL=' + filename; } var fn; diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.browser.development.js b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.browser.development.js index 2b4fa7bffe31f..2213e50a74951 100644 --- a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.browser.development.js +++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.browser.development.js @@ -96,9 +96,32 @@ function printWarning(level, format, args, currentStack) { } } +var channel = new MessageChannel(); +var taskQueue = []; + +channel.port1.onmessage = function () { + var task = taskQueue.shift(); + + if (task) { + task(); + } +}; + function scheduleWork(callback) { - callback(); + taskQueue.push(callback); + channel.port2.postMessage(null); +} + +function handleErrorInNextTick(error) { + setTimeout(function () { + throw error; + }); } + +var LocalPromise = Promise; +var scheduleMicrotask = typeof queueMicrotask === 'function' ? queueMicrotask : function (callback) { + LocalPromise.resolve(null).then(callback).catch(handleErrorInNextTick); +}; var VIEW_SIZE = 2048; var currentView = null; var writtenBytes = 0; @@ -1736,6 +1759,8 @@ var PENDING$1 = 0; var COMPLETED = 1; var ABORTED = 3; var ERRORED$1 = 4; +var RENDERING = 5; +var AbortSigil = {}; var TaintRegistryObjects = ReactSharedInternals.TaintRegistryObjects, TaintRegistryValues = ReactSharedInternals.TaintRegistryValues, TaintRegistryByteLengths = ReactSharedInternals.TaintRegistryByteLengths, @@ -1774,8 +1799,9 @@ function defaultPostponeHandler(reason) {// Noop } var OPEN = 0; -var CLOSING = 1; -var CLOSED = 2; +var ABORTING = 1; +var CLOSING = 2; +var CLOSED = 3; function createRequest(model, bundlerConfig, onError, identifierPrefix, onPostpone, environmentName, temporaryReferences) { if (ReactSharedInternals.A !== null && ReactSharedInternals.A !== DefaultAsyncDispatcher) { throw new Error('Currently React only supports one RSC renderer at a time.'); @@ -1876,6 +1902,16 @@ function serializeThenable(request, task, thenable) { default: { + if (request.status === ABORTING) { + // We can no longer accept any resolved values + newTask.status = ABORTED; + var errorId = request.fatalError; + var model = stringify(serializeByValueID(errorId)); + emitModelChunk(request, newTask.id, model); + request.abortableTasks.delete(newTask); + return newTask.id; + } + if (typeof thenable.status === 'string') { // Only instrument the thenable if the status if not defined. If // it's defined, but an unknown value, assume it's been instrumented by @@ -2269,6 +2305,13 @@ validated) // DEV-only result = callComponentInDEV(Component, props, componentDebugInfo); } + if (request.status === ABORTING) { + // If we aborted during rendering we should interrupt the render but + // we don't need to provide an error because the renderer will encode + // the abort error as the reason. + throw AbortSigil; + } + if (typeof result === 'object' && result !== null && !isClientReference(result)) { if (typeof result.then === 'function') { // When the return value is in children position we can resolve it immediately, @@ -2641,6 +2684,13 @@ validated) // DEV only wrappedType = callLazyInitInDEV(type); } + if (request.status === ABORTING) { + // lazy initializers are user code and could abort during render + // we don't wan to return any value resolved from the lazy initializer + // if it aborts so we interrupt rendering here + throw AbortSigil; + } + return renderElement(request, task, wrappedType, key, ref, props, owner, stack, validated); } @@ -2665,7 +2715,7 @@ function pingTask(request, task) { if (pingedTasks.length === 1) { request.flushScheduled = request.destination !== null; - scheduleWork(function () { + scheduleMicrotask(function () { return performWork(request); }); } @@ -2963,21 +3013,32 @@ function renderModel(request, task, parent, key, value) { try { return renderModelDestructive(request, task, parent, key, value); } catch (thrownValue) { + // If the suspended/errored value was an element or lazy it can be reduced + // to a lazy reference, so that it doesn't error the parent. + var model = task.model; + var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE); var x = thrownValue === SuspenseException ? // This is a special type of exception used for Suspense. For historical // reasons, the rest of the Suspense implementation expects the thrown // value to be a thenable, because before `use` existed that was the // (unstable) API for suspending. This implementation detail can change // later, once we deprecate the old API in favor of `use`. - getSuspendedThenable() : thrownValue; // If the suspended/errored value was an element or lazy it can be reduced - // to a lazy reference, so that it doesn't error the parent. - - var model = task.model; - var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE); + getSuspendedThenable() : thrownValue; if (typeof x === 'object' && x !== null) { // $FlowFixMe[method-unbinding] if (typeof x.then === 'function') { - // Something suspended, we'll need to create a new task and resolve it later. + if (request.status === ABORTING) { + task.status = ABORTED; + var errorId = request.fatalError; + + if (wasReactNode) { + return serializeLazyID(errorId); + } + + return serializeByValueID(errorId); + } // Something suspended, we'll need to create a new task and resolve it later. + + var newTask = createTask(request, task.model, task.keyPath, task.implicitSlot, request.abortableTasks); var ping = newTask.ping; x.then(ping, ping); @@ -3011,6 +3072,17 @@ function renderModel(request, task, parent, key, value) { return serializeByValueID(postponeId); } + } + + if (thrownValue === AbortSigil) { + task.status = ABORTED; + var _errorId = request.fatalError; + + if (wasReactNode) { + return serializeLazyID(_errorId); + } + + return serializeByValueID(_errorId); } // Restore the context. We assume that this will be restored by the inner // functions in case nothing throws so we don't use "finally" here. @@ -3023,10 +3095,12 @@ function renderModel(request, task, parent, key, value) { // We'll replace this element with a lazy reference that throws on the client // once it gets rendered. request.pendingChunks++; - var errorId = request.nextChunkId++; + + var _errorId2 = request.nextChunkId++; + var digest = logRecoverableError(request, x); - emitErrorChunk(request, errorId, digest, x); - return serializeLazyID(errorId); + emitErrorChunk(request, _errorId2, digest, x); + return serializeLazyID(_errorId2); } // Something errored but it was not in a React Node. There's no need to serialize // it by value because it'll just error the whole parent row anyway so we can // just stop any siblings and error the whole parent row. @@ -3130,6 +3204,13 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value resolvedModel = callLazyInitInDEV(lazy); } + if (request.status === ABORTING) { + // lazy initializers are user code and could abort during render + // we don't wan to return any value resolved from the lazy initializer + // if it aborts so we interrupt rendering here + throw AbortSigil; + } + { var _debugInfo = lazy._debugInfo; @@ -4119,6 +4200,7 @@ function retryTask(request, task) { } var prevDebugID = debugID; + task.status = RENDERING; try { // Track the root so we know that we have to emit this object even though it @@ -4175,10 +4257,20 @@ function retryTask(request, task) { if (typeof x === 'object' && x !== null) { // $FlowFixMe[method-unbinding] if (typeof x.then === 'function') { - // Something suspended again, let's pick it back up later. + if (request.status === ABORTING) { + request.abortableTasks.delete(task); + task.status = ABORTED; + var errorId = request.fatalError; + var model = stringify(serializeByValueID(errorId)); + emitModelChunk(request, task.id, model); + return; + } // Something suspended again, let's pick it back up later. + + + task.status = PENDING$1; + task.thenableState = getThenableStateAfterSuspending(); var ping = task.ping; x.then(ping, ping); - task.thenableState = getThenableStateAfterSuspending(); return; } else if (x.$$typeof === REACT_POSTPONE_TYPE) { request.abortableTasks.delete(task); @@ -4190,6 +4282,17 @@ function retryTask(request, task) { } } + if (x === AbortSigil) { + request.abortableTasks.delete(task); + task.status = ABORTED; + var _errorId3 = request.fatalError; + + var _model = stringify(serializeByValueID(_errorId3)); + + emitModelChunk(request, task.id, _model); + return; + } + request.abortableTasks.delete(task); task.status = ERRORED$1; var digest = logRecoverableError(request, x); @@ -4251,6 +4354,11 @@ function performWork(request) { } function abortTask(task, request, errorId) { + if (task.status === RENDERING) { + // This task will be aborted by the render + return; + } + task.status = ABORTED; // Instead of emitting an error per task.id, we emit a model that only // has a single value referencing the error. @@ -4347,6 +4455,7 @@ function flushCompletedChunks(request, destination) { cleanupTaintQueue(request); } + request.status = CLOSED; close$1(destination); request.destination = null; } @@ -4367,10 +4476,14 @@ function enqueueFlush(request) { request.pingedTasks.length === 0 && // If there is no destination there is nothing we can flush to. A flush will // happen when we start flowing again request.destination !== null) { - var destination = request.destination; request.flushScheduled = true; scheduleWork(function () { - return flushCompletedChunks(request, destination); + request.flushScheduled = false; + var destination = request.destination; + + if (destination) { + flushCompletedChunks(request, destination); + } }); } } @@ -4406,19 +4519,21 @@ function stopFlowing(request) { function abort(request, reason) { try { + request.status = ABORTING; var abortableTasks = request.abortableTasks; // We have tasks to abort. We'll emit one error row and then emit a reference // to that row from every row that's still remaining. if (abortableTasks.size > 0) { request.pendingChunks++; var errorId = request.nextChunkId++; + request.fatalError = errorId; if (enablePostpone && typeof reason === 'object' && reason !== null && reason.$$typeof === REACT_POSTPONE_TYPE) { var postponeInstance = reason; logPostpone(request, postponeInstance.message); emitPostponeChunk(request, errorId, postponeInstance); } else { - var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason; + var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : typeof reason === 'object' && reason !== null && typeof reason.then === 'function' ? new Error('The render was aborted by the server with a promise.') : reason; var digest = logRecoverableError(request, error); emitErrorChunk(request, errorId, digest, error); } @@ -4440,7 +4555,7 @@ function abort(request, reason) { // We create an alternative reason for it instead. _error = new Error('The render was aborted due to being postponed.'); } else { - _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason; + _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : typeof reason === 'object' && reason !== null && typeof reason.then === 'function' ? new Error('The render was aborted by the server with a promise.') : reason; } abortListeners.forEach(function (callback) { diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.browser.production.js b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.browser.production.js index 571858d8fcd86..21636a4c5ae42 100644 --- a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.browser.production.js +++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.browser.production.js @@ -11,6 +11,30 @@ "use strict"; var ReactDOM = require("react-dom"), React = require("react"), + channel = new MessageChannel(), + taskQueue = []; +channel.port1.onmessage = function () { + var task = taskQueue.shift(); + task && task(); +}; +function scheduleWork(callback) { + taskQueue.push(callback); + channel.port2.postMessage(null); +} +function handleErrorInNextTick(error) { + setTimeout(function () { + throw error; + }); +} +var LocalPromise = Promise, + scheduleMicrotask = + "function" === typeof queueMicrotask + ? queueMicrotask + : function (callback) { + LocalPromise.resolve(null) + .then(callback) + .catch(handleErrorInNextTick); + }, currentView = null, writtenBytes = 0; function writeChunkAndReturn(destination, chunk) { @@ -671,6 +695,7 @@ if (!ReactSharedInternalsServer) ); var ObjectPrototype = Object.prototype, stringify = JSON.stringify, + AbortSigil = {}, TaintRegistryObjects = ReactSharedInternalsServer.TaintRegistryObjects, TaintRegistryValues = ReactSharedInternalsServer.TaintRegistryValues, TaintRegistryByteLengths = @@ -776,6 +801,14 @@ function serializeThenable(request, task, thenable) { newTask.id ); default: + if (1 === request.status) + return ( + (newTask.status = 3), + (task = stringify(serializeByValueID(request.fatalError))), + emitModelChunk(request, newTask.id, task), + request.abortableTasks.delete(newTask), + newTask.id + ); "string" !== typeof thenable.status && ((thenable.status = "pending"), thenable.then( @@ -985,6 +1018,7 @@ function renderFunctionComponent(request, task, key, Component, props) { thenableIndexCounter = 0; thenableState = prevThenableState; Component = Component(props, void 0); + if (1 === request.status) throw AbortSigil; if ( "object" === typeof Component && null !== Component && @@ -1082,6 +1116,7 @@ function renderElement(request, task, type, key, ref, props) { case REACT_LAZY_TYPE: var init = type._init; type = init(type._payload); + if (1 === request.status) throw AbortSigil; return renderElement(request, task, type, key, ref, props); case REACT_FORWARD_REF_TYPE: return renderFunctionComponent(request, task, key, type.render, props); @@ -1098,7 +1133,9 @@ function pingTask(request, task) { pingedTasks.push(task); 1 === pingedTasks.length && ((request.flushScheduled = null !== request.destination), - performWork(request)); + scheduleMicrotask(function () { + return performWork(request); + })); } function createTask(request, model, keyPath, implicitSlot, abortSet) { request.pendingChunks++; @@ -1118,79 +1155,7 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) { return pingTask(request, task); }, toJSON: function (parentPropertyName, value) { - a: { - var prevKeyPath = task.keyPath, - prevImplicitSlot = task.implicitSlot; - try { - var JSCompiler_inline_result = renderModelDestructive( - request, - task, - this, - parentPropertyName, - value - ); - } catch (thrownValue) { - parentPropertyName = - thrownValue === SuspenseException - ? getSuspendedThenable() - : thrownValue; - value = task.model; - value = - "object" === typeof value && - null !== value && - (value.$$typeof === REACT_ELEMENT_TYPE || - value.$$typeof === REACT_LAZY_TYPE); - if ( - "object" === typeof parentPropertyName && - null !== parentPropertyName - ) { - if ("function" === typeof parentPropertyName.then) { - JSCompiler_inline_result = createTask( - request, - task.model, - task.keyPath, - task.implicitSlot, - request.abortableTasks - ); - var ping = JSCompiler_inline_result.ping; - parentPropertyName.then(ping, ping); - JSCompiler_inline_result.thenableState = - getThenableStateAfterSuspending(); - task.keyPath = prevKeyPath; - task.implicitSlot = prevImplicitSlot; - JSCompiler_inline_result = value - ? "$L" + JSCompiler_inline_result.id.toString(16) - : serializeByValueID(JSCompiler_inline_result.id); - break a; - } - if (parentPropertyName.$$typeof === REACT_POSTPONE_TYPE) { - request.pendingChunks++; - JSCompiler_inline_result = request.nextChunkId++; - logPostpone(request, parentPropertyName.message); - emitPostponeChunk(request, JSCompiler_inline_result); - task.keyPath = prevKeyPath; - task.implicitSlot = prevImplicitSlot; - JSCompiler_inline_result = value - ? "$L" + JSCompiler_inline_result.toString(16) - : serializeByValueID(JSCompiler_inline_result); - break a; - } - } - task.keyPath = prevKeyPath; - task.implicitSlot = prevImplicitSlot; - if (value) - request.pendingChunks++, - (prevKeyPath = request.nextChunkId++), - (prevImplicitSlot = logRecoverableError( - request, - parentPropertyName - )), - emitErrorChunk(request, prevKeyPath, prevImplicitSlot), - (JSCompiler_inline_result = "$L" + prevKeyPath.toString(16)); - else throw parentPropertyName; - } - } - return JSCompiler_inline_result; + return renderModel(request, task, this, parentPropertyName, value); }, thenableState: null }; @@ -1200,6 +1165,9 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) { function serializeByValueID(id) { return "$" + id.toString(16); } +function serializeLazyID(id) { + return "$L" + id.toString(16); +} function encodeReferenceChunk(request, id, reference) { request = stringify(reference); id = id.toString(16) + ":" + request + "\n"; @@ -1218,7 +1186,7 @@ function serializeClientReference( existingId = writtenClientReferences.get(clientReferenceKey); if (void 0 !== existingId) return parent[0] === REACT_ELEMENT_TYPE && "1" === parentPropertyName - ? "$L" + existingId.toString(16) + ? serializeLazyID(existingId) : serializeByValueID(existingId); try { var config = request.bundlerConfig, @@ -1250,7 +1218,7 @@ function serializeClientReference( request.completedImportChunks.push(processedChunk); writtenClientReferences.set(clientReferenceKey, importId); return parent[0] === REACT_ELEMENT_TYPE && "1" === parentPropertyName - ? "$L" + importId.toString(16) + ? serializeLazyID(importId) : serializeByValueID(importId); } catch (x) { return ( @@ -1305,6 +1273,74 @@ function serializeBlob(request, blob) { return "$B" + newTask.id.toString(16); } var modelRoot = !1; +function renderModel(request, task, parent, key, value) { + var prevKeyPath = task.keyPath, + prevImplicitSlot = task.implicitSlot; + try { + return renderModelDestructive(request, task, parent, key, value); + } catch (thrownValue) { + parent = task.model; + parent = + "object" === typeof parent && + null !== parent && + (parent.$$typeof === REACT_ELEMENT_TYPE || + parent.$$typeof === REACT_LAZY_TYPE); + key = + thrownValue === SuspenseException ? getSuspendedThenable() : thrownValue; + if ("object" === typeof key && null !== key) { + if ("function" === typeof key.then) { + if (1 === request.status) + return ( + (task.status = 3), + (request = request.fatalError), + parent ? serializeLazyID(request) : serializeByValueID(request) + ); + request = createTask( + request, + task.model, + task.keyPath, + task.implicitSlot, + request.abortableTasks + ); + value = request.ping; + key.then(value, value); + request.thenableState = getThenableStateAfterSuspending(); + task.keyPath = prevKeyPath; + task.implicitSlot = prevImplicitSlot; + return parent + ? serializeLazyID(request.id) + : serializeByValueID(request.id); + } + if (key.$$typeof === REACT_POSTPONE_TYPE) + return ( + request.pendingChunks++, + (value = request.nextChunkId++), + logPostpone(request, key.message), + emitPostponeChunk(request, value), + (task.keyPath = prevKeyPath), + (task.implicitSlot = prevImplicitSlot), + parent ? serializeLazyID(value) : serializeByValueID(value) + ); + } + if (thrownValue === AbortSigil) + return ( + (task.status = 3), + (request = request.fatalError), + parent ? serializeLazyID(request) : serializeByValueID(request) + ); + task.keyPath = prevKeyPath; + task.implicitSlot = prevImplicitSlot; + if (parent) + return ( + request.pendingChunks++, + (task = request.nextChunkId++), + (prevKeyPath = logRecoverableError(request, key)), + emitErrorChunk(request, task, prevKeyPath), + serializeLazyID(task) + ); + throw key; + } +} function renderModelDestructive( request, task, @@ -1341,12 +1377,11 @@ function renderModelDestructive( parentPropertyName ); case REACT_LAZY_TYPE: - return ( - (task.thenableState = null), - (parentPropertyName = value._init), - (value = parentPropertyName(value._payload)), - renderModelDestructive(request, task, emptyRoot, "", value) - ); + task.thenableState = null; + parentPropertyName = value._init; + value = parentPropertyName(value._payload); + if (1 === request.status) throw AbortSigil; + return renderModelDestructive(request, task, emptyRoot, "", value); case REACT_LEGACY_ELEMENT_TYPE: throw Error( 'A React Element from an older version of React was rendered. This is not supported. It can happen if:\n- Multiple copies of the "react" package is used.\n- A library pre-bundled an old copy of "react" or "react/jsx-runtime".\n- A compiler tries to "inline" JSX instead of using the runtime.' @@ -1629,8 +1664,8 @@ function logRecoverableError(request, error) { function fatalError(request, error) { cleanupTaintQueue(request); null !== request.destination - ? ((request.status = 2), closeWithError(request.destination, error)) - : ((request.status = 1), (request.fatalError = error)); + ? ((request.status = 3), closeWithError(request.destination, error)) + : ((request.status = 2), (request.fatalError = error)); } function emitPostponeChunk(request, id) { id = id.toString(16) + ":P\n"; @@ -1719,7 +1754,8 @@ function emitChunk(request, task, value) { } var emptyRoot = {}; function retryTask(request, task) { - if (0 === task.status) + if (0 === task.status) { + task.status = 5; try { modelRoot = task.model; var resolvedModel = renderModelDestructive( @@ -1748,9 +1784,17 @@ function retryTask(request, task) { : thrownValue; if ("object" === typeof x && null !== x) { if ("function" === typeof x.then) { + if (1 === request.status) { + request.abortableTasks.delete(task); + task.status = 3; + var model = stringify(serializeByValueID(request.fatalError)); + emitModelChunk(request, task.id, model); + return; + } + task.status = 0; + task.thenableState = getThenableStateAfterSuspending(); var ping = task.ping; x.then(ping, ping); - task.thenableState = getThenableStateAfterSuspending(); return; } if (x.$$typeof === REACT_POSTPONE_TYPE) { @@ -1761,12 +1805,20 @@ function retryTask(request, task) { return; } } - request.abortableTasks.delete(task); - task.status = 4; - var digest = logRecoverableError(request, x); - emitErrorChunk(request, task.id, digest); + if (x === AbortSigil) { + request.abortableTasks.delete(task); + task.status = 3; + var model$23 = stringify(serializeByValueID(request.fatalError)); + emitModelChunk(request, task.id, model$23); + } else { + request.abortableTasks.delete(task); + task.status = 4; + var digest = logRecoverableError(request, x); + emitErrorChunk(request, task.id, digest); + } } finally { } + } } function performWork(request) { var prevDispatcher = ReactSharedInternalsServer.H; @@ -1825,26 +1877,35 @@ function flushCompletedChunks(request, destination) { } 0 === request.pendingChunks && (cleanupTaintQueue(request), + (request.status = 3), destination.close(), (request.destination = null)); } +function startWork(request) { + request.flushScheduled = null !== request.destination; + scheduleWork(function () { + return performWork(request); + }); +} function enqueueFlush(request) { - if ( - !1 === request.flushScheduled && + !1 === request.flushScheduled && 0 === request.pingedTasks.length && - null !== request.destination - ) { - var destination = request.destination; - request.flushScheduled = !0; - flushCompletedChunks(request, destination); - } + null !== request.destination && + ((request.flushScheduled = !0), + scheduleWork(function () { + request.flushScheduled = !1; + var destination = request.destination; + destination && flushCompletedChunks(request, destination); + })); } function abort(request, reason) { try { + request.status = 1; var abortableTasks = request.abortableTasks; if (0 < abortableTasks.size) { request.pendingChunks++; var errorId = request.nextChunkId++; + request.fatalError = errorId; if ( "object" === typeof reason && null !== reason && @@ -1856,37 +1917,47 @@ function abort(request, reason) { var error = void 0 === reason ? Error("The render was aborted by the server without a reason.") + : "object" === typeof reason && + null !== reason && + "function" === typeof reason.then + ? Error("The render was aborted by the server with a promise.") : reason, digest = logRecoverableError(request, error); emitErrorChunk(request, errorId, digest, error); } abortableTasks.forEach(function (task) { - task.status = 3; - var ref = serializeByValueID(errorId); - task = encodeReferenceChunk(request, task.id, ref); - request.completedErrorChunks.push(task); + if (5 !== task.status) { + task.status = 3; + var ref = serializeByValueID(errorId); + task = encodeReferenceChunk(request, task.id, ref); + request.completedErrorChunks.push(task); + } }); abortableTasks.clear(); } var abortListeners = request.abortListeners; if (0 < abortListeners.size) { - var error$26 = + var error$30 = "object" === typeof reason && null !== reason && reason.$$typeof === REACT_POSTPONE_TYPE ? Error("The render was aborted due to being postponed.") : void 0 === reason ? Error("The render was aborted by the server without a reason.") + : "object" === typeof reason && + null !== reason && + "function" === typeof reason.then + ? Error("The render was aborted by the server with a promise.") : reason; abortListeners.forEach(function (callback) { - return callback(error$26); + return callback(error$30); }); abortListeners.clear(); } null !== request.destination && flushCompletedChunks(request, request.destination); - } catch (error$27) { - logRecoverableError(request, error$27), fatalError(request, error$27); + } catch (error$31) { + logRecoverableError(request, error$31), fatalError(request, error$31); } } function resolveServerReference(bundlerConfig, id) { @@ -2338,8 +2409,8 @@ function parseReadableStream(response, reference, type) { (previousBlockedChunk = chunk)); } else { chunk = previousBlockedChunk; - var chunk$30 = createPendingChunk(response); - chunk$30.then( + var chunk$34 = createPendingChunk(response); + chunk$34.then( function (v) { return controller.enqueue(v); }, @@ -2347,10 +2418,10 @@ function parseReadableStream(response, reference, type) { return controller.error(e); } ); - previousBlockedChunk = chunk$30; + previousBlockedChunk = chunk$34; chunk.then(function () { - previousBlockedChunk === chunk$30 && (previousBlockedChunk = null); - resolveModelChunk(chunk$30, json, -1); + previousBlockedChunk === chunk$34 && (previousBlockedChunk = null); + resolveModelChunk(chunk$34, json, -1); }); } }, @@ -2715,13 +2786,12 @@ exports.renderToReadableStream = function (model, webpackMap, options) { { type: "bytes", start: function () { - request.flushScheduled = null !== request.destination; - performWork(request); + startWork(request); }, pull: function (controller) { - if (1 === request.status) - (request.status = 2), closeWithError(controller, request.fatalError); - else if (2 !== request.status && null === request.destination) { + if (2 === request.status) + (request.status = 3), closeWithError(controller, request.fatalError); + else if (3 !== request.status && null === request.destination) { request.destination = controller; try { flushCompletedChunks(request, controller); diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.edge.development.js b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.edge.development.js index 06d9fbba45ac3..5f90452354181 100644 --- a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.edge.development.js +++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.edge.development.js @@ -96,6 +96,16 @@ function printWarning(level, format, args, currentStack) { } } +function handleErrorInNextTick(error) { + setTimeout(function () { + throw error; + }); +} + +var LocalPromise = Promise; +var scheduleMicrotask = typeof queueMicrotask === 'function' ? queueMicrotask : function (callback) { + LocalPromise.resolve(null).then(callback).catch(handleErrorInNextTick); +}; function scheduleWork(callback) { setTimeout(callback, 0); } @@ -1771,6 +1781,8 @@ var PENDING$1 = 0; var COMPLETED = 1; var ABORTED = 3; var ERRORED$1 = 4; +var RENDERING = 5; +var AbortSigil = {}; var TaintRegistryObjects = ReactSharedInternals.TaintRegistryObjects, TaintRegistryValues = ReactSharedInternals.TaintRegistryValues, TaintRegistryByteLengths = ReactSharedInternals.TaintRegistryByteLengths, @@ -1809,8 +1821,9 @@ function defaultPostponeHandler(reason) {// Noop } var OPEN = 0; -var CLOSING = 1; -var CLOSED = 2; +var ABORTING = 1; +var CLOSING = 2; +var CLOSED = 3; function createRequest(model, bundlerConfig, onError, identifierPrefix, onPostpone, environmentName, temporaryReferences) { if (ReactSharedInternals.A !== null && ReactSharedInternals.A !== DefaultAsyncDispatcher) { throw new Error('Currently React only supports one RSC renderer at a time.'); @@ -1916,6 +1929,16 @@ function serializeThenable(request, task, thenable) { default: { + if (request.status === ABORTING) { + // We can no longer accept any resolved values + newTask.status = ABORTED; + var errorId = request.fatalError; + var model = stringify(serializeByValueID(errorId)); + emitModelChunk(request, newTask.id, model); + request.abortableTasks.delete(newTask); + return newTask.id; + } + if (typeof thenable.status === 'string') { // Only instrument the thenable if the status if not defined. If // it's defined, but an unknown value, assume it's been instrumented by @@ -2312,6 +2335,13 @@ validated) // DEV-only result = callComponentInDEV(Component, props, componentDebugInfo); } + if (request.status === ABORTING) { + // If we aborted during rendering we should interrupt the render but + // we don't need to provide an error because the renderer will encode + // the abort error as the reason. + throw AbortSigil; + } + if (typeof result === 'object' && result !== null && !isClientReference(result)) { if (typeof result.then === 'function') { // When the return value is in children position we can resolve it immediately, @@ -2684,6 +2714,13 @@ validated) // DEV only wrappedType = callLazyInitInDEV(type); } + if (request.status === ABORTING) { + // lazy initializers are user code and could abort during render + // we don't wan to return any value resolved from the lazy initializer + // if it aborts so we interrupt rendering here + throw AbortSigil; + } + return renderElement(request, task, wrappedType, key, ref, props, owner, stack, validated); } @@ -2708,7 +2745,7 @@ function pingTask(request, task) { if (pingedTasks.length === 1) { request.flushScheduled = request.destination !== null; - scheduleWork(function () { + scheduleMicrotask(function () { return performWork(request); }); } @@ -3006,21 +3043,32 @@ function renderModel(request, task, parent, key, value) { try { return renderModelDestructive(request, task, parent, key, value); } catch (thrownValue) { + // If the suspended/errored value was an element or lazy it can be reduced + // to a lazy reference, so that it doesn't error the parent. + var model = task.model; + var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE); var x = thrownValue === SuspenseException ? // This is a special type of exception used for Suspense. For historical // reasons, the rest of the Suspense implementation expects the thrown // value to be a thenable, because before `use` existed that was the // (unstable) API for suspending. This implementation detail can change // later, once we deprecate the old API in favor of `use`. - getSuspendedThenable() : thrownValue; // If the suspended/errored value was an element or lazy it can be reduced - // to a lazy reference, so that it doesn't error the parent. - - var model = task.model; - var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE); + getSuspendedThenable() : thrownValue; if (typeof x === 'object' && x !== null) { // $FlowFixMe[method-unbinding] if (typeof x.then === 'function') { - // Something suspended, we'll need to create a new task and resolve it later. + if (request.status === ABORTING) { + task.status = ABORTED; + var errorId = request.fatalError; + + if (wasReactNode) { + return serializeLazyID(errorId); + } + + return serializeByValueID(errorId); + } // Something suspended, we'll need to create a new task and resolve it later. + + var newTask = createTask(request, task.model, task.keyPath, task.implicitSlot, request.abortableTasks); var ping = newTask.ping; x.then(ping, ping); @@ -3054,6 +3102,17 @@ function renderModel(request, task, parent, key, value) { return serializeByValueID(postponeId); } + } + + if (thrownValue === AbortSigil) { + task.status = ABORTED; + var _errorId = request.fatalError; + + if (wasReactNode) { + return serializeLazyID(_errorId); + } + + return serializeByValueID(_errorId); } // Restore the context. We assume that this will be restored by the inner // functions in case nothing throws so we don't use "finally" here. @@ -3066,10 +3125,12 @@ function renderModel(request, task, parent, key, value) { // We'll replace this element with a lazy reference that throws on the client // once it gets rendered. request.pendingChunks++; - var errorId = request.nextChunkId++; + + var _errorId2 = request.nextChunkId++; + var digest = logRecoverableError(request, x); - emitErrorChunk(request, errorId, digest, x); - return serializeLazyID(errorId); + emitErrorChunk(request, _errorId2, digest, x); + return serializeLazyID(_errorId2); } // Something errored but it was not in a React Node. There's no need to serialize // it by value because it'll just error the whole parent row anyway so we can // just stop any siblings and error the whole parent row. @@ -3173,6 +3234,13 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value resolvedModel = callLazyInitInDEV(lazy); } + if (request.status === ABORTING) { + // lazy initializers are user code and could abort during render + // we don't wan to return any value resolved from the lazy initializer + // if it aborts so we interrupt rendering here + throw AbortSigil; + } + { var _debugInfo = lazy._debugInfo; @@ -4168,6 +4236,7 @@ function retryTask(request, task) { } var prevDebugID = debugID; + task.status = RENDERING; try { // Track the root so we know that we have to emit this object even though it @@ -4224,10 +4293,20 @@ function retryTask(request, task) { if (typeof x === 'object' && x !== null) { // $FlowFixMe[method-unbinding] if (typeof x.then === 'function') { - // Something suspended again, let's pick it back up later. + if (request.status === ABORTING) { + request.abortableTasks.delete(task); + task.status = ABORTED; + var errorId = request.fatalError; + var model = stringify(serializeByValueID(errorId)); + emitModelChunk(request, task.id, model); + return; + } // Something suspended again, let's pick it back up later. + + + task.status = PENDING$1; + task.thenableState = getThenableStateAfterSuspending(); var ping = task.ping; x.then(ping, ping); - task.thenableState = getThenableStateAfterSuspending(); return; } else if (x.$$typeof === REACT_POSTPONE_TYPE) { request.abortableTasks.delete(task); @@ -4239,6 +4318,17 @@ function retryTask(request, task) { } } + if (x === AbortSigil) { + request.abortableTasks.delete(task); + task.status = ABORTED; + var _errorId3 = request.fatalError; + + var _model = stringify(serializeByValueID(_errorId3)); + + emitModelChunk(request, task.id, _model); + return; + } + request.abortableTasks.delete(task); task.status = ERRORED$1; var digest = logRecoverableError(request, x); @@ -4300,6 +4390,11 @@ function performWork(request) { } function abortTask(task, request, errorId) { + if (task.status === RENDERING) { + // This task will be aborted by the render + return; + } + task.status = ABORTED; // Instead of emitting an error per task.id, we emit a model that only // has a single value referencing the error. @@ -4396,6 +4491,7 @@ function flushCompletedChunks(request, destination) { cleanupTaintQueue(request); } + request.status = CLOSED; close$1(destination); request.destination = null; } @@ -4420,10 +4516,14 @@ function enqueueFlush(request) { request.pingedTasks.length === 0 && // If there is no destination there is nothing we can flush to. A flush will // happen when we start flowing again request.destination !== null) { - var destination = request.destination; request.flushScheduled = true; scheduleWork(function () { - return flushCompletedChunks(request, destination); + request.flushScheduled = false; + var destination = request.destination; + + if (destination) { + flushCompletedChunks(request, destination); + } }); } } @@ -4459,19 +4559,21 @@ function stopFlowing(request) { function abort(request, reason) { try { + request.status = ABORTING; var abortableTasks = request.abortableTasks; // We have tasks to abort. We'll emit one error row and then emit a reference // to that row from every row that's still remaining. if (abortableTasks.size > 0) { request.pendingChunks++; var errorId = request.nextChunkId++; + request.fatalError = errorId; if (enablePostpone && typeof reason === 'object' && reason !== null && reason.$$typeof === REACT_POSTPONE_TYPE) { var postponeInstance = reason; logPostpone(request, postponeInstance.message); emitPostponeChunk(request, errorId, postponeInstance); } else { - var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason; + var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : typeof reason === 'object' && reason !== null && typeof reason.then === 'function' ? new Error('The render was aborted by the server with a promise.') : reason; var digest = logRecoverableError(request, error); emitErrorChunk(request, errorId, digest, error); } @@ -4493,7 +4595,7 @@ function abort(request, reason) { // We create an alternative reason for it instead. _error = new Error('The render was aborted due to being postponed.'); } else { - _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason; + _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : typeof reason === 'object' && reason !== null && typeof reason.then === 'function' ? new Error('The render was aborted by the server with a promise.') : reason; } abortListeners.forEach(function (callback) { diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.edge.production.js b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.edge.production.js index 656fde5afd852..d77de5b938d4f 100644 --- a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.edge.production.js +++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.edge.production.js @@ -10,7 +10,21 @@ "use strict"; var ReactDOM = require("react-dom"), - React = require("react"), + React = require("react"); +function handleErrorInNextTick(error) { + setTimeout(function () { + throw error; + }); +} +var LocalPromise = Promise, + scheduleMicrotask = + "function" === typeof queueMicrotask + ? queueMicrotask + : function (callback) { + LocalPromise.resolve(null) + .then(callback) + .catch(handleErrorInNextTick); + }, currentView = null, writtenBytes = 0; function writeChunkAndReturn(destination, chunk) { @@ -678,6 +692,7 @@ if (!ReactSharedInternalsServer) ); var ObjectPrototype = Object.prototype, stringify = JSON.stringify, + AbortSigil = {}, TaintRegistryObjects = ReactSharedInternalsServer.TaintRegistryObjects, TaintRegistryValues = ReactSharedInternalsServer.TaintRegistryValues, TaintRegistryByteLengths = @@ -791,6 +806,14 @@ function serializeThenable(request, task, thenable) { newTask.id ); default: + if (1 === request.status) + return ( + (newTask.status = 3), + (task = stringify(serializeByValueID(request.fatalError))), + emitModelChunk(request, newTask.id, task), + request.abortableTasks.delete(newTask), + newTask.id + ); "string" !== typeof thenable.status && ((thenable.status = "pending"), thenable.then( @@ -1000,6 +1023,7 @@ function renderFunctionComponent(request, task, key, Component, props) { thenableIndexCounter = 0; thenableState = prevThenableState; Component = Component(props, void 0); + if (1 === request.status) throw AbortSigil; if ( "object" === typeof Component && null !== Component && @@ -1097,6 +1121,7 @@ function renderElement(request, task, type, key, ref, props) { case REACT_LAZY_TYPE: var init = type._init; type = init(type._payload); + if (1 === request.status) throw AbortSigil; return renderElement(request, task, type, key, ref, props); case REACT_FORWARD_REF_TYPE: return renderFunctionComponent(request, task, key, type.render, props); @@ -1113,9 +1138,9 @@ function pingTask(request, task) { pingedTasks.push(task); 1 === pingedTasks.length && ((request.flushScheduled = null !== request.destination), - setTimeout(function () { + scheduleMicrotask(function () { return performWork(request); - }, 0)); + })); } function createTask(request, model, keyPath, implicitSlot, abortSet) { request.pendingChunks++; @@ -1135,79 +1160,7 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) { return pingTask(request, task); }, toJSON: function (parentPropertyName, value) { - a: { - var prevKeyPath = task.keyPath, - prevImplicitSlot = task.implicitSlot; - try { - var JSCompiler_inline_result = renderModelDestructive( - request, - task, - this, - parentPropertyName, - value - ); - } catch (thrownValue) { - parentPropertyName = - thrownValue === SuspenseException - ? getSuspendedThenable() - : thrownValue; - value = task.model; - value = - "object" === typeof value && - null !== value && - (value.$$typeof === REACT_ELEMENT_TYPE || - value.$$typeof === REACT_LAZY_TYPE); - if ( - "object" === typeof parentPropertyName && - null !== parentPropertyName - ) { - if ("function" === typeof parentPropertyName.then) { - JSCompiler_inline_result = createTask( - request, - task.model, - task.keyPath, - task.implicitSlot, - request.abortableTasks - ); - var ping = JSCompiler_inline_result.ping; - parentPropertyName.then(ping, ping); - JSCompiler_inline_result.thenableState = - getThenableStateAfterSuspending(); - task.keyPath = prevKeyPath; - task.implicitSlot = prevImplicitSlot; - JSCompiler_inline_result = value - ? "$L" + JSCompiler_inline_result.id.toString(16) - : serializeByValueID(JSCompiler_inline_result.id); - break a; - } - if (parentPropertyName.$$typeof === REACT_POSTPONE_TYPE) { - request.pendingChunks++; - JSCompiler_inline_result = request.nextChunkId++; - logPostpone(request, parentPropertyName.message); - emitPostponeChunk(request, JSCompiler_inline_result); - task.keyPath = prevKeyPath; - task.implicitSlot = prevImplicitSlot; - JSCompiler_inline_result = value - ? "$L" + JSCompiler_inline_result.toString(16) - : serializeByValueID(JSCompiler_inline_result); - break a; - } - } - task.keyPath = prevKeyPath; - task.implicitSlot = prevImplicitSlot; - if (value) - request.pendingChunks++, - (prevKeyPath = request.nextChunkId++), - (prevImplicitSlot = logRecoverableError( - request, - parentPropertyName - )), - emitErrorChunk(request, prevKeyPath, prevImplicitSlot), - (JSCompiler_inline_result = "$L" + prevKeyPath.toString(16)); - else throw parentPropertyName; - } - } - return JSCompiler_inline_result; + return renderModel(request, task, this, parentPropertyName, value); }, thenableState: null }; @@ -1217,6 +1170,9 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) { function serializeByValueID(id) { return "$" + id.toString(16); } +function serializeLazyID(id) { + return "$L" + id.toString(16); +} function encodeReferenceChunk(request, id, reference) { request = stringify(reference); id = id.toString(16) + ":" + request + "\n"; @@ -1235,7 +1191,7 @@ function serializeClientReference( existingId = writtenClientReferences.get(clientReferenceKey); if (void 0 !== existingId) return parent[0] === REACT_ELEMENT_TYPE && "1" === parentPropertyName - ? "$L" + existingId.toString(16) + ? serializeLazyID(existingId) : serializeByValueID(existingId); try { var config = request.bundlerConfig, @@ -1267,7 +1223,7 @@ function serializeClientReference( request.completedImportChunks.push(processedChunk); writtenClientReferences.set(clientReferenceKey, importId); return parent[0] === REACT_ELEMENT_TYPE && "1" === parentPropertyName - ? "$L" + importId.toString(16) + ? serializeLazyID(importId) : serializeByValueID(importId); } catch (x) { return ( @@ -1322,6 +1278,74 @@ function serializeBlob(request, blob) { return "$B" + newTask.id.toString(16); } var modelRoot = !1; +function renderModel(request, task, parent, key, value) { + var prevKeyPath = task.keyPath, + prevImplicitSlot = task.implicitSlot; + try { + return renderModelDestructive(request, task, parent, key, value); + } catch (thrownValue) { + parent = task.model; + parent = + "object" === typeof parent && + null !== parent && + (parent.$$typeof === REACT_ELEMENT_TYPE || + parent.$$typeof === REACT_LAZY_TYPE); + key = + thrownValue === SuspenseException ? getSuspendedThenable() : thrownValue; + if ("object" === typeof key && null !== key) { + if ("function" === typeof key.then) { + if (1 === request.status) + return ( + (task.status = 3), + (request = request.fatalError), + parent ? serializeLazyID(request) : serializeByValueID(request) + ); + request = createTask( + request, + task.model, + task.keyPath, + task.implicitSlot, + request.abortableTasks + ); + value = request.ping; + key.then(value, value); + request.thenableState = getThenableStateAfterSuspending(); + task.keyPath = prevKeyPath; + task.implicitSlot = prevImplicitSlot; + return parent + ? serializeLazyID(request.id) + : serializeByValueID(request.id); + } + if (key.$$typeof === REACT_POSTPONE_TYPE) + return ( + request.pendingChunks++, + (value = request.nextChunkId++), + logPostpone(request, key.message), + emitPostponeChunk(request, value), + (task.keyPath = prevKeyPath), + (task.implicitSlot = prevImplicitSlot), + parent ? serializeLazyID(value) : serializeByValueID(value) + ); + } + if (thrownValue === AbortSigil) + return ( + (task.status = 3), + (request = request.fatalError), + parent ? serializeLazyID(request) : serializeByValueID(request) + ); + task.keyPath = prevKeyPath; + task.implicitSlot = prevImplicitSlot; + if (parent) + return ( + request.pendingChunks++, + (task = request.nextChunkId++), + (prevKeyPath = logRecoverableError(request, key)), + emitErrorChunk(request, task, prevKeyPath), + serializeLazyID(task) + ); + throw key; + } +} function renderModelDestructive( request, task, @@ -1358,12 +1382,11 @@ function renderModelDestructive( parentPropertyName ); case REACT_LAZY_TYPE: - return ( - (task.thenableState = null), - (parentPropertyName = value._init), - (value = parentPropertyName(value._payload)), - renderModelDestructive(request, task, emptyRoot, "", value) - ); + task.thenableState = null; + parentPropertyName = value._init; + value = parentPropertyName(value._payload); + if (1 === request.status) throw AbortSigil; + return renderModelDestructive(request, task, emptyRoot, "", value); case REACT_LEGACY_ELEMENT_TYPE: throw Error( 'A React Element from an older version of React was rendered. This is not supported. It can happen if:\n- Multiple copies of the "react" package is used.\n- A library pre-bundled an old copy of "react" or "react/jsx-runtime".\n- A compiler tries to "inline" JSX instead of using the runtime.' @@ -1650,8 +1673,8 @@ function logRecoverableError(request, error) { function fatalError(request, error) { cleanupTaintQueue(request); null !== request.destination - ? ((request.status = 2), closeWithError(request.destination, error)) - : ((request.status = 1), (request.fatalError = error)); + ? ((request.status = 3), closeWithError(request.destination, error)) + : ((request.status = 2), (request.fatalError = error)); } function emitPostponeChunk(request, id) { id = id.toString(16) + ":P\n"; @@ -1740,7 +1763,8 @@ function emitChunk(request, task, value) { } var emptyRoot = {}; function retryTask(request, task) { - if (0 === task.status) + if (0 === task.status) { + task.status = 5; try { modelRoot = task.model; var resolvedModel = renderModelDestructive( @@ -1769,9 +1793,17 @@ function retryTask(request, task) { : thrownValue; if ("object" === typeof x && null !== x) { if ("function" === typeof x.then) { + if (1 === request.status) { + request.abortableTasks.delete(task); + task.status = 3; + var model = stringify(serializeByValueID(request.fatalError)); + emitModelChunk(request, task.id, model); + return; + } + task.status = 0; + task.thenableState = getThenableStateAfterSuspending(); var ping = task.ping; x.then(ping, ping); - task.thenableState = getThenableStateAfterSuspending(); return; } if (x.$$typeof === REACT_POSTPONE_TYPE) { @@ -1782,12 +1814,20 @@ function retryTask(request, task) { return; } } - request.abortableTasks.delete(task); - task.status = 4; - var digest = logRecoverableError(request, x); - emitErrorChunk(request, task.id, digest); + if (x === AbortSigil) { + request.abortableTasks.delete(task); + task.status = 3; + var model$23 = stringify(serializeByValueID(request.fatalError)); + emitModelChunk(request, task.id, model$23); + } else { + request.abortableTasks.delete(task); + task.status = 4; + var digest = logRecoverableError(request, x); + emitErrorChunk(request, task.id, digest); + } } finally { } + } } function performWork(request) { var prevDispatcher = ReactSharedInternalsServer.H; @@ -1846,6 +1886,7 @@ function flushCompletedChunks(request, destination) { } 0 === request.pendingChunks && (cleanupTaintQueue(request), + (request.status = 3), destination.close(), (request.destination = null)); } @@ -1860,24 +1901,24 @@ function startWork(request) { }, 0); } function enqueueFlush(request) { - if ( - !1 === request.flushScheduled && + !1 === request.flushScheduled && 0 === request.pingedTasks.length && - null !== request.destination - ) { - var destination = request.destination; - request.flushScheduled = !0; + null !== request.destination && + ((request.flushScheduled = !0), setTimeout(function () { - return flushCompletedChunks(request, destination); - }, 0); - } + request.flushScheduled = !1; + var destination = request.destination; + destination && flushCompletedChunks(request, destination); + }, 0)); } function abort(request, reason) { try { + request.status = 1; var abortableTasks = request.abortableTasks; if (0 < abortableTasks.size) { request.pendingChunks++; var errorId = request.nextChunkId++; + request.fatalError = errorId; if ( "object" === typeof reason && null !== reason && @@ -1889,37 +1930,47 @@ function abort(request, reason) { var error = void 0 === reason ? Error("The render was aborted by the server without a reason.") + : "object" === typeof reason && + null !== reason && + "function" === typeof reason.then + ? Error("The render was aborted by the server with a promise.") : reason, digest = logRecoverableError(request, error); emitErrorChunk(request, errorId, digest, error); } abortableTasks.forEach(function (task) { - task.status = 3; - var ref = serializeByValueID(errorId); - task = encodeReferenceChunk(request, task.id, ref); - request.completedErrorChunks.push(task); + if (5 !== task.status) { + task.status = 3; + var ref = serializeByValueID(errorId); + task = encodeReferenceChunk(request, task.id, ref); + request.completedErrorChunks.push(task); + } }); abortableTasks.clear(); } var abortListeners = request.abortListeners; if (0 < abortListeners.size) { - var error$26 = + var error$30 = "object" === typeof reason && null !== reason && reason.$$typeof === REACT_POSTPONE_TYPE ? Error("The render was aborted due to being postponed.") : void 0 === reason ? Error("The render was aborted by the server without a reason.") + : "object" === typeof reason && + null !== reason && + "function" === typeof reason.then + ? Error("The render was aborted by the server with a promise.") : reason; abortListeners.forEach(function (callback) { - return callback(error$26); + return callback(error$30); }); abortListeners.clear(); } null !== request.destination && flushCompletedChunks(request, request.destination); - } catch (error$27) { - logRecoverableError(request, error$27), fatalError(request, error$27); + } catch (error$31) { + logRecoverableError(request, error$31), fatalError(request, error$31); } } function resolveServerReference(bundlerConfig, id) { @@ -2362,8 +2413,8 @@ function parseReadableStream(response, reference, type) { (previousBlockedChunk = chunk)); } else { chunk = previousBlockedChunk; - var chunk$30 = createPendingChunk(response); - chunk$30.then( + var chunk$34 = createPendingChunk(response); + chunk$34.then( function (v) { return controller.enqueue(v); }, @@ -2371,10 +2422,10 @@ function parseReadableStream(response, reference, type) { return controller.error(e); } ); - previousBlockedChunk = chunk$30; + previousBlockedChunk = chunk$34; chunk.then(function () { - previousBlockedChunk === chunk$30 && (previousBlockedChunk = null); - resolveModelChunk(chunk$30, json, -1); + previousBlockedChunk === chunk$34 && (previousBlockedChunk = null); + resolveModelChunk(chunk$34, json, -1); }); } }, @@ -2742,9 +2793,9 @@ exports.renderToReadableStream = function (model, webpackMap, options) { startWork(request); }, pull: function (controller) { - if (1 === request.status) - (request.status = 2), closeWithError(controller, request.fatalError); - else if (2 !== request.status && null === request.destination) { + if (2 === request.status) + (request.status = 3), closeWithError(controller, request.fatalError); + else if (3 !== request.status && null === request.destination) { request.destination = controller; try { flushCompletedChunks(request, controller); diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.development.js b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.development.js index 18ed8768aa7b0..6ded86d6ba192 100644 --- a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.development.js +++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.development.js @@ -102,6 +102,7 @@ function printWarning(level, format, args, currentStack) { function scheduleWork(callback) { setImmediate(callback); } +var scheduleMicrotask = queueMicrotask; function flushBuffered(destination) { // If we don't have any more data to send right now. // Flush whatever is in the buffer to the wire. @@ -1824,6 +1825,8 @@ var PENDING$1 = 0; var COMPLETED = 1; var ABORTED = 3; var ERRORED$1 = 4; +var RENDERING = 5; +var AbortSigil = {}; var TaintRegistryObjects = ReactSharedInternals.TaintRegistryObjects, TaintRegistryValues = ReactSharedInternals.TaintRegistryValues, TaintRegistryByteLengths = ReactSharedInternals.TaintRegistryByteLengths, @@ -1862,8 +1865,9 @@ function defaultPostponeHandler(reason) {// Noop } var OPEN = 0; -var CLOSING = 1; -var CLOSED = 2; +var ABORTING = 1; +var CLOSING = 2; +var CLOSED = 3; function createRequest(model, bundlerConfig, onError, identifierPrefix, onPostpone, environmentName, temporaryReferences) { if (ReactSharedInternals.A !== null && ReactSharedInternals.A !== DefaultAsyncDispatcher) { throw new Error('Currently React only supports one RSC renderer at a time.'); @@ -1969,6 +1973,16 @@ function serializeThenable(request, task, thenable) { default: { + if (request.status === ABORTING) { + // We can no longer accept any resolved values + newTask.status = ABORTED; + var errorId = request.fatalError; + var model = stringify(serializeByValueID(errorId)); + emitModelChunk(request, newTask.id, model); + request.abortableTasks.delete(newTask); + return newTask.id; + } + if (typeof thenable.status === 'string') { // Only instrument the thenable if the status if not defined. If // it's defined, but an unknown value, assume it's been instrumented by @@ -2363,6 +2377,13 @@ validated) // DEV-only result = callComponentInDEV(Component, props, componentDebugInfo); } + if (request.status === ABORTING) { + // If we aborted during rendering we should interrupt the render but + // we don't need to provide an error because the renderer will encode + // the abort error as the reason. + throw AbortSigil; + } + if (typeof result === 'object' && result !== null && !isClientReference(result)) { if (typeof result.then === 'function') { // When the return value is in children position we can resolve it immediately, @@ -2735,6 +2756,13 @@ validated) // DEV only wrappedType = callLazyInitInDEV(type); } + if (request.status === ABORTING) { + // lazy initializers are user code and could abort during render + // we don't wan to return any value resolved from the lazy initializer + // if it aborts so we interrupt rendering here + throw AbortSigil; + } + return renderElement(request, task, wrappedType, key, ref, props, owner, stack, validated); } @@ -2759,7 +2787,7 @@ function pingTask(request, task) { if (pingedTasks.length === 1) { request.flushScheduled = request.destination !== null; - scheduleWork(function () { + scheduleMicrotask(function () { return performWork(request); }); } @@ -3057,21 +3085,32 @@ function renderModel(request, task, parent, key, value) { try { return renderModelDestructive(request, task, parent, key, value); } catch (thrownValue) { + // If the suspended/errored value was an element or lazy it can be reduced + // to a lazy reference, so that it doesn't error the parent. + var model = task.model; + var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE); var x = thrownValue === SuspenseException ? // This is a special type of exception used for Suspense. For historical // reasons, the rest of the Suspense implementation expects the thrown // value to be a thenable, because before `use` existed that was the // (unstable) API for suspending. This implementation detail can change // later, once we deprecate the old API in favor of `use`. - getSuspendedThenable() : thrownValue; // If the suspended/errored value was an element or lazy it can be reduced - // to a lazy reference, so that it doesn't error the parent. - - var model = task.model; - var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE); + getSuspendedThenable() : thrownValue; if (typeof x === 'object' && x !== null) { // $FlowFixMe[method-unbinding] if (typeof x.then === 'function') { - // Something suspended, we'll need to create a new task and resolve it later. + if (request.status === ABORTING) { + task.status = ABORTED; + var errorId = request.fatalError; + + if (wasReactNode) { + return serializeLazyID(errorId); + } + + return serializeByValueID(errorId); + } // Something suspended, we'll need to create a new task and resolve it later. + + var newTask = createTask(request, task.model, task.keyPath, task.implicitSlot, request.abortableTasks); var ping = newTask.ping; x.then(ping, ping); @@ -3105,6 +3144,17 @@ function renderModel(request, task, parent, key, value) { return serializeByValueID(postponeId); } + } + + if (thrownValue === AbortSigil) { + task.status = ABORTED; + var _errorId = request.fatalError; + + if (wasReactNode) { + return serializeLazyID(_errorId); + } + + return serializeByValueID(_errorId); } // Restore the context. We assume that this will be restored by the inner // functions in case nothing throws so we don't use "finally" here. @@ -3117,10 +3167,12 @@ function renderModel(request, task, parent, key, value) { // We'll replace this element with a lazy reference that throws on the client // once it gets rendered. request.pendingChunks++; - var errorId = request.nextChunkId++; + + var _errorId2 = request.nextChunkId++; + var digest = logRecoverableError(request, x); - emitErrorChunk(request, errorId, digest, x); - return serializeLazyID(errorId); + emitErrorChunk(request, _errorId2, digest, x); + return serializeLazyID(_errorId2); } // Something errored but it was not in a React Node. There's no need to serialize // it by value because it'll just error the whole parent row anyway so we can // just stop any siblings and error the whole parent row. @@ -3224,6 +3276,13 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value resolvedModel = callLazyInitInDEV(lazy); } + if (request.status === ABORTING) { + // lazy initializers are user code and could abort during render + // we don't wan to return any value resolved from the lazy initializer + // if it aborts so we interrupt rendering here + throw AbortSigil; + } + { var _debugInfo = lazy._debugInfo; @@ -4215,6 +4274,7 @@ function retryTask(request, task) { } var prevDebugID = debugID; + task.status = RENDERING; try { // Track the root so we know that we have to emit this object even though it @@ -4271,10 +4331,20 @@ function retryTask(request, task) { if (typeof x === 'object' && x !== null) { // $FlowFixMe[method-unbinding] if (typeof x.then === 'function') { - // Something suspended again, let's pick it back up later. + if (request.status === ABORTING) { + request.abortableTasks.delete(task); + task.status = ABORTED; + var errorId = request.fatalError; + var model = stringify(serializeByValueID(errorId)); + emitModelChunk(request, task.id, model); + return; + } // Something suspended again, let's pick it back up later. + + + task.status = PENDING$1; + task.thenableState = getThenableStateAfterSuspending(); var ping = task.ping; x.then(ping, ping); - task.thenableState = getThenableStateAfterSuspending(); return; } else if (x.$$typeof === REACT_POSTPONE_TYPE) { request.abortableTasks.delete(task); @@ -4286,6 +4356,17 @@ function retryTask(request, task) { } } + if (x === AbortSigil) { + request.abortableTasks.delete(task); + task.status = ABORTED; + var _errorId3 = request.fatalError; + + var _model = stringify(serializeByValueID(_errorId3)); + + emitModelChunk(request, task.id, _model); + return; + } + request.abortableTasks.delete(task); task.status = ERRORED$1; var digest = logRecoverableError(request, x); @@ -4347,6 +4428,11 @@ function performWork(request) { } function abortTask(task, request, errorId) { + if (task.status === RENDERING) { + // This task will be aborted by the render + return; + } + task.status = ABORTED; // Instead of emitting an error per task.id, we emit a model that only // has a single value referencing the error. @@ -4445,6 +4531,7 @@ function flushCompletedChunks(request, destination) { cleanupTaintQueue(request); } + request.status = CLOSED; close$1(destination); request.destination = null; } @@ -4465,10 +4552,14 @@ function enqueueFlush(request) { request.pingedTasks.length === 0 && // If there is no destination there is nothing we can flush to. A flush will // happen when we start flowing again request.destination !== null) { - var destination = request.destination; request.flushScheduled = true; scheduleWork(function () { - return flushCompletedChunks(request, destination); + request.flushScheduled = false; + var destination = request.destination; + + if (destination) { + flushCompletedChunks(request, destination); + } }); } } @@ -4504,19 +4595,21 @@ function stopFlowing(request) { function abort(request, reason) { try { + request.status = ABORTING; var abortableTasks = request.abortableTasks; // We have tasks to abort. We'll emit one error row and then emit a reference // to that row from every row that's still remaining. if (abortableTasks.size > 0) { request.pendingChunks++; var errorId = request.nextChunkId++; + request.fatalError = errorId; if (enablePostpone && typeof reason === 'object' && reason !== null && reason.$$typeof === REACT_POSTPONE_TYPE) { var postponeInstance = reason; logPostpone(request, postponeInstance.message); emitPostponeChunk(request, errorId, postponeInstance); } else { - var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason; + var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : typeof reason === 'object' && reason !== null && typeof reason.then === 'function' ? new Error('The render was aborted by the server with a promise.') : reason; var digest = logRecoverableError(request, error); emitErrorChunk(request, errorId, digest, error); } @@ -4538,7 +4631,7 @@ function abort(request, reason) { // We create an alternative reason for it instead. _error = new Error('The render was aborted due to being postponed.'); } else { - _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason; + _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : typeof reason === 'object' && reason !== null && typeof reason.then === 'function' ? new Error('The render was aborted by the server with a promise.') : reason; } abortListeners.forEach(function (callback) { diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.production.js b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.production.js index 45287f2fbf7c3..63712e0a2c0e1 100644 --- a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.production.js +++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.production.js @@ -14,6 +14,7 @@ require("crypto"); var async_hooks = require("async_hooks"), ReactDOM = require("react-dom"), React = require("react"), + scheduleMicrotask = queueMicrotask, currentView = null, writtenBytes = 0, destinationHasCapacity = !0; @@ -708,6 +709,7 @@ if (!ReactSharedInternalsServer) ); var ObjectPrototype = Object.prototype, stringify = JSON.stringify, + AbortSigil = {}, TaintRegistryObjects = ReactSharedInternalsServer.TaintRegistryObjects, TaintRegistryValues = ReactSharedInternalsServer.TaintRegistryValues, TaintRegistryByteLengths = @@ -818,6 +820,14 @@ function serializeThenable(request, task, thenable) { newTask.id ); default: + if (1 === request.status) + return ( + (newTask.status = 3), + (task = stringify(serializeByValueID(request.fatalError))), + emitModelChunk(request, newTask.id, task), + request.abortableTasks.delete(newTask), + newTask.id + ); "string" !== typeof thenable.status && ((thenable.status = "pending"), thenable.then( @@ -1026,6 +1036,7 @@ function renderFunctionComponent(request, task, key, Component, props) { thenableIndexCounter = 0; thenableState = prevThenableState; Component = Component(props, void 0); + if (1 === request.status) throw AbortSigil; if ( "object" === typeof Component && null !== Component && @@ -1123,6 +1134,7 @@ function renderElement(request, task, type, key, ref, props) { case REACT_LAZY_TYPE: var init = type._init; type = init(type._payload); + if (1 === request.status) throw AbortSigil; return renderElement(request, task, type, key, ref, props); case REACT_FORWARD_REF_TYPE: return renderFunctionComponent(request, task, key, type.render, props); @@ -1139,7 +1151,7 @@ function pingTask(request, task) { pingedTasks.push(task); 1 === pingedTasks.length && ((request.flushScheduled = null !== request.destination), - setImmediate(function () { + scheduleMicrotask(function () { return performWork(request); })); } @@ -1161,79 +1173,7 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) { return pingTask(request, task); }, toJSON: function (parentPropertyName, value) { - a: { - var prevKeyPath = task.keyPath, - prevImplicitSlot = task.implicitSlot; - try { - var JSCompiler_inline_result = renderModelDestructive( - request, - task, - this, - parentPropertyName, - value - ); - } catch (thrownValue) { - parentPropertyName = - thrownValue === SuspenseException - ? getSuspendedThenable() - : thrownValue; - value = task.model; - value = - "object" === typeof value && - null !== value && - (value.$$typeof === REACT_ELEMENT_TYPE || - value.$$typeof === REACT_LAZY_TYPE); - if ( - "object" === typeof parentPropertyName && - null !== parentPropertyName - ) { - if ("function" === typeof parentPropertyName.then) { - JSCompiler_inline_result = createTask( - request, - task.model, - task.keyPath, - task.implicitSlot, - request.abortableTasks - ); - var ping = JSCompiler_inline_result.ping; - parentPropertyName.then(ping, ping); - JSCompiler_inline_result.thenableState = - getThenableStateAfterSuspending(); - task.keyPath = prevKeyPath; - task.implicitSlot = prevImplicitSlot; - JSCompiler_inline_result = value - ? "$L" + JSCompiler_inline_result.id.toString(16) - : serializeByValueID(JSCompiler_inline_result.id); - break a; - } - if (parentPropertyName.$$typeof === REACT_POSTPONE_TYPE) { - request.pendingChunks++; - JSCompiler_inline_result = request.nextChunkId++; - logPostpone(request, parentPropertyName.message); - emitPostponeChunk(request, JSCompiler_inline_result); - task.keyPath = prevKeyPath; - task.implicitSlot = prevImplicitSlot; - JSCompiler_inline_result = value - ? "$L" + JSCompiler_inline_result.toString(16) - : serializeByValueID(JSCompiler_inline_result); - break a; - } - } - task.keyPath = prevKeyPath; - task.implicitSlot = prevImplicitSlot; - if (value) - request.pendingChunks++, - (prevKeyPath = request.nextChunkId++), - (prevImplicitSlot = logRecoverableError( - request, - parentPropertyName - )), - emitErrorChunk(request, prevKeyPath, prevImplicitSlot), - (JSCompiler_inline_result = "$L" + prevKeyPath.toString(16)); - else throw parentPropertyName; - } - } - return JSCompiler_inline_result; + return renderModel(request, task, this, parentPropertyName, value); }, thenableState: null }; @@ -1243,6 +1183,9 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) { function serializeByValueID(id) { return "$" + id.toString(16); } +function serializeLazyID(id) { + return "$L" + id.toString(16); +} function encodeReferenceChunk(request, id, reference) { request = stringify(reference); return id.toString(16) + ":" + request + "\n"; @@ -1260,7 +1203,7 @@ function serializeClientReference( existingId = writtenClientReferences.get(clientReferenceKey); if (void 0 !== existingId) return parent[0] === REACT_ELEMENT_TYPE && "1" === parentPropertyName - ? "$L" + existingId.toString(16) + ? serializeLazyID(existingId) : serializeByValueID(existingId); try { var config = request.bundlerConfig, @@ -1291,7 +1234,7 @@ function serializeClientReference( request.completedImportChunks.push(processedChunk); writtenClientReferences.set(clientReferenceKey, importId); return parent[0] === REACT_ELEMENT_TYPE && "1" === parentPropertyName - ? "$L" + importId.toString(16) + ? serializeLazyID(importId) : serializeByValueID(importId); } catch (x) { return ( @@ -1346,6 +1289,74 @@ function serializeBlob(request, blob) { return "$B" + newTask.id.toString(16); } var modelRoot = !1; +function renderModel(request, task, parent, key, value) { + var prevKeyPath = task.keyPath, + prevImplicitSlot = task.implicitSlot; + try { + return renderModelDestructive(request, task, parent, key, value); + } catch (thrownValue) { + parent = task.model; + parent = + "object" === typeof parent && + null !== parent && + (parent.$$typeof === REACT_ELEMENT_TYPE || + parent.$$typeof === REACT_LAZY_TYPE); + key = + thrownValue === SuspenseException ? getSuspendedThenable() : thrownValue; + if ("object" === typeof key && null !== key) { + if ("function" === typeof key.then) { + if (1 === request.status) + return ( + (task.status = 3), + (request = request.fatalError), + parent ? serializeLazyID(request) : serializeByValueID(request) + ); + request = createTask( + request, + task.model, + task.keyPath, + task.implicitSlot, + request.abortableTasks + ); + value = request.ping; + key.then(value, value); + request.thenableState = getThenableStateAfterSuspending(); + task.keyPath = prevKeyPath; + task.implicitSlot = prevImplicitSlot; + return parent + ? serializeLazyID(request.id) + : serializeByValueID(request.id); + } + if (key.$$typeof === REACT_POSTPONE_TYPE) + return ( + request.pendingChunks++, + (value = request.nextChunkId++), + logPostpone(request, key.message), + emitPostponeChunk(request, value), + (task.keyPath = prevKeyPath), + (task.implicitSlot = prevImplicitSlot), + parent ? serializeLazyID(value) : serializeByValueID(value) + ); + } + if (thrownValue === AbortSigil) + return ( + (task.status = 3), + (request = request.fatalError), + parent ? serializeLazyID(request) : serializeByValueID(request) + ); + task.keyPath = prevKeyPath; + task.implicitSlot = prevImplicitSlot; + if (parent) + return ( + request.pendingChunks++, + (task = request.nextChunkId++), + (prevKeyPath = logRecoverableError(request, key)), + emitErrorChunk(request, task, prevKeyPath), + serializeLazyID(task) + ); + throw key; + } +} function renderModelDestructive( request, task, @@ -1382,12 +1393,11 @@ function renderModelDestructive( parentPropertyName ); case REACT_LAZY_TYPE: - return ( - (task.thenableState = null), - (parentPropertyName = value._init), - (value = parentPropertyName(value._payload)), - renderModelDestructive(request, task, emptyRoot, "", value) - ); + task.thenableState = null; + parentPropertyName = value._init; + value = parentPropertyName(value._payload); + if (1 === request.status) throw AbortSigil; + return renderModelDestructive(request, task, emptyRoot, "", value); case REACT_LEGACY_ELEMENT_TYPE: throw Error( 'A React Element from an older version of React was rendered. This is not supported. It can happen if:\n- Multiple copies of the "react" package is used.\n- A library pre-bundled an old copy of "react" or "react/jsx-runtime".\n- A compiler tries to "inline" JSX instead of using the runtime.' @@ -1668,8 +1678,8 @@ function logRecoverableError(request, error) { function fatalError(request, error) { cleanupTaintQueue(request); null !== request.destination - ? ((request.status = 2), request.destination.destroy(error)) - : ((request.status = 1), (request.fatalError = error)); + ? ((request.status = 3), request.destination.destroy(error)) + : ((request.status = 2), (request.fatalError = error)); } function emitPostponeChunk(request, id) { id = id.toString(16) + ":P\n"; @@ -1680,6 +1690,10 @@ function emitErrorChunk(request, id, digest) { id = id.toString(16) + ":E" + stringify(digest) + "\n"; request.completedErrorChunks.push(id); } +function emitModelChunk(request, id, json) { + id = id.toString(16) + ":" + json + "\n"; + request.completedRegularChunks.push(id); +} function emitTypedArrayChunk(request, id, tag, typedArray) { if (TaintRegistryByteLengths.has(typedArray.byteLength)) { var tainted = TaintRegistryValues.get( @@ -1746,12 +1760,12 @@ function emitChunk(request, task, value) { : value instanceof DataView ? emitTypedArrayChunk(request, id, "V", value) : ((value = stringify(value, task.toJSON)), - (task = task.id.toString(16) + ":" + value + "\n"), - request.completedRegularChunks.push(task)); + emitModelChunk(request, task.id, value)); } var emptyRoot = {}; function retryTask(request, task) { - if (0 === task.status) + if (0 === task.status) { + task.status = 5; try { modelRoot = task.model; var resolvedModel = renderModelDestructive( @@ -1768,9 +1782,8 @@ function retryTask(request, task) { request.writtenObjects.set(resolvedModel, serializeByValueID(task.id)), emitChunk(request, task, resolvedModel); else { - var json = stringify(resolvedModel), - processedChunk = task.id.toString(16) + ":" + json + "\n"; - request.completedRegularChunks.push(processedChunk); + var json = stringify(resolvedModel); + emitModelChunk(request, task.id, json); } request.abortableTasks.delete(task); task.status = 1; @@ -1781,9 +1794,17 @@ function retryTask(request, task) { : thrownValue; if ("object" === typeof x && null !== x) { if ("function" === typeof x.then) { + if (1 === request.status) { + request.abortableTasks.delete(task); + task.status = 3; + var model = stringify(serializeByValueID(request.fatalError)); + emitModelChunk(request, task.id, model); + return; + } + task.status = 0; + task.thenableState = getThenableStateAfterSuspending(); var ping = task.ping; x.then(ping, ping); - task.thenableState = getThenableStateAfterSuspending(); return; } if (x.$$typeof === REACT_POSTPONE_TYPE) { @@ -1794,12 +1815,20 @@ function retryTask(request, task) { return; } } - request.abortableTasks.delete(task); - task.status = 4; - var digest = logRecoverableError(request, x); - emitErrorChunk(request, task.id, digest); + if (x === AbortSigil) { + request.abortableTasks.delete(task); + task.status = 3; + var model$23 = stringify(serializeByValueID(request.fatalError)); + emitModelChunk(request, task.id, model$23); + } else { + request.abortableTasks.delete(task); + task.status = 4; + var digest = logRecoverableError(request, x); + emitErrorChunk(request, task.id, digest); + } } finally { } + } } function performWork(request) { var prevDispatcher = ReactSharedInternalsServer.H; @@ -1882,6 +1911,7 @@ function flushCompletedChunks(request, destination) { "function" === typeof destination.flush && destination.flush(); 0 === request.pendingChunks && (cleanupTaintQueue(request), + (request.status = 3), destination.end(), (request.destination = null)); } @@ -1892,22 +1922,20 @@ function startWork(request) { }); } function enqueueFlush(request) { - if ( - !1 === request.flushScheduled && + !1 === request.flushScheduled && 0 === request.pingedTasks.length && - null !== request.destination - ) { - var destination = request.destination; - request.flushScheduled = !0; + null !== request.destination && + ((request.flushScheduled = !0), setImmediate(function () { - return flushCompletedChunks(request, destination); - }); - } + request.flushScheduled = !1; + var destination = request.destination; + destination && flushCompletedChunks(request, destination); + })); } function startFlowing(request, destination) { - if (1 === request.status) - (request.status = 2), destination.destroy(request.fatalError); - else if (2 !== request.status && null === request.destination) { + if (2 === request.status) + (request.status = 3), destination.destroy(request.fatalError); + else if (3 !== request.status && null === request.destination) { request.destination = destination; try { flushCompletedChunks(request, destination); @@ -1918,10 +1946,12 @@ function startFlowing(request, destination) { } function abort(request, reason) { try { + request.status = 1; var abortableTasks = request.abortableTasks; if (0 < abortableTasks.size) { request.pendingChunks++; var errorId = request.nextChunkId++; + request.fatalError = errorId; if ( "object" === typeof reason && null !== reason && @@ -1933,37 +1963,47 @@ function abort(request, reason) { var error = void 0 === reason ? Error("The render was aborted by the server without a reason.") + : "object" === typeof reason && + null !== reason && + "function" === typeof reason.then + ? Error("The render was aborted by the server with a promise.") : reason, digest = logRecoverableError(request, error); emitErrorChunk(request, errorId, digest, error); } abortableTasks.forEach(function (task) { - task.status = 3; - var ref = serializeByValueID(errorId); - task = encodeReferenceChunk(request, task.id, ref); - request.completedErrorChunks.push(task); + if (5 !== task.status) { + task.status = 3; + var ref = serializeByValueID(errorId); + task = encodeReferenceChunk(request, task.id, ref); + request.completedErrorChunks.push(task); + } }); abortableTasks.clear(); } var abortListeners = request.abortListeners; if (0 < abortListeners.size) { - var error$26 = + var error$30 = "object" === typeof reason && null !== reason && reason.$$typeof === REACT_POSTPONE_TYPE ? Error("The render was aborted due to being postponed.") : void 0 === reason ? Error("The render was aborted by the server without a reason.") + : "object" === typeof reason && + null !== reason && + "function" === typeof reason.then + ? Error("The render was aborted by the server with a promise.") : reason; abortListeners.forEach(function (callback) { - return callback(error$26); + return callback(error$30); }); abortListeners.clear(); } null !== request.destination && flushCompletedChunks(request, request.destination); - } catch (error$27) { - logRecoverableError(request, error$27), fatalError(request, error$27); + } catch (error$31) { + logRecoverableError(request, error$31), fatalError(request, error$31); } } function resolveServerReference(bundlerConfig, id) { @@ -2406,8 +2446,8 @@ function parseReadableStream(response, reference, type) { (previousBlockedChunk = chunk)); } else { chunk = previousBlockedChunk; - var chunk$30 = createPendingChunk(response); - chunk$30.then( + var chunk$34 = createPendingChunk(response); + chunk$34.then( function (v) { return controller.enqueue(v); }, @@ -2415,10 +2455,10 @@ function parseReadableStream(response, reference, type) { return controller.error(e); } ); - previousBlockedChunk = chunk$30; + previousBlockedChunk = chunk$34; chunk.then(function () { - previousBlockedChunk === chunk$30 && (previousBlockedChunk = null); - resolveModelChunk(chunk$30, json, -1); + previousBlockedChunk === chunk$34 && (previousBlockedChunk = null); + resolveModelChunk(chunk$34, json, -1); }); } }, @@ -2776,12 +2816,12 @@ exports.decodeReplyFromBusboy = function (busboyStream, webpackMap, options) { "React doesn't accept base64 encoded file uploads because we don't expect form data passed from a browser to ever encode data that way. If that's the wrong assumption, we can easily fix it." ); pendingFiles++; - var JSCompiler_object_inline_chunks_203 = []; + var JSCompiler_object_inline_chunks_205 = []; value.on("data", function (chunk) { - JSCompiler_object_inline_chunks_203.push(chunk); + JSCompiler_object_inline_chunks_205.push(chunk); }); value.on("end", function () { - var blob = new Blob(JSCompiler_object_inline_chunks_203, { + var blob = new Blob(JSCompiler_object_inline_chunks_205, { type: mimeType }); response._formData.append(name, blob, filename); diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.unbundled.development.js b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.unbundled.development.js index 309bd1ebe9f2c..ac543b359f4c8 100644 --- a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.unbundled.development.js +++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.unbundled.development.js @@ -102,6 +102,7 @@ function printWarning(level, format, args, currentStack) { function scheduleWork(callback) { setImmediate(callback); } +var scheduleMicrotask = queueMicrotask; function flushBuffered(destination) { // If we don't have any more data to send right now. // Flush whatever is in the buffer to the wire. @@ -1824,6 +1825,8 @@ var PENDING$1 = 0; var COMPLETED = 1; var ABORTED = 3; var ERRORED$1 = 4; +var RENDERING = 5; +var AbortSigil = {}; var TaintRegistryObjects = ReactSharedInternals.TaintRegistryObjects, TaintRegistryValues = ReactSharedInternals.TaintRegistryValues, TaintRegistryByteLengths = ReactSharedInternals.TaintRegistryByteLengths, @@ -1862,8 +1865,9 @@ function defaultPostponeHandler(reason) {// Noop } var OPEN = 0; -var CLOSING = 1; -var CLOSED = 2; +var ABORTING = 1; +var CLOSING = 2; +var CLOSED = 3; function createRequest(model, bundlerConfig, onError, identifierPrefix, onPostpone, environmentName, temporaryReferences) { if (ReactSharedInternals.A !== null && ReactSharedInternals.A !== DefaultAsyncDispatcher) { throw new Error('Currently React only supports one RSC renderer at a time.'); @@ -1969,6 +1973,16 @@ function serializeThenable(request, task, thenable) { default: { + if (request.status === ABORTING) { + // We can no longer accept any resolved values + newTask.status = ABORTED; + var errorId = request.fatalError; + var model = stringify(serializeByValueID(errorId)); + emitModelChunk(request, newTask.id, model); + request.abortableTasks.delete(newTask); + return newTask.id; + } + if (typeof thenable.status === 'string') { // Only instrument the thenable if the status if not defined. If // it's defined, but an unknown value, assume it's been instrumented by @@ -2363,6 +2377,13 @@ validated) // DEV-only result = callComponentInDEV(Component, props, componentDebugInfo); } + if (request.status === ABORTING) { + // If we aborted during rendering we should interrupt the render but + // we don't need to provide an error because the renderer will encode + // the abort error as the reason. + throw AbortSigil; + } + if (typeof result === 'object' && result !== null && !isClientReference(result)) { if (typeof result.then === 'function') { // When the return value is in children position we can resolve it immediately, @@ -2735,6 +2756,13 @@ validated) // DEV only wrappedType = callLazyInitInDEV(type); } + if (request.status === ABORTING) { + // lazy initializers are user code and could abort during render + // we don't wan to return any value resolved from the lazy initializer + // if it aborts so we interrupt rendering here + throw AbortSigil; + } + return renderElement(request, task, wrappedType, key, ref, props, owner, stack, validated); } @@ -2759,7 +2787,7 @@ function pingTask(request, task) { if (pingedTasks.length === 1) { request.flushScheduled = request.destination !== null; - scheduleWork(function () { + scheduleMicrotask(function () { return performWork(request); }); } @@ -3057,21 +3085,32 @@ function renderModel(request, task, parent, key, value) { try { return renderModelDestructive(request, task, parent, key, value); } catch (thrownValue) { + // If the suspended/errored value was an element or lazy it can be reduced + // to a lazy reference, so that it doesn't error the parent. + var model = task.model; + var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE); var x = thrownValue === SuspenseException ? // This is a special type of exception used for Suspense. For historical // reasons, the rest of the Suspense implementation expects the thrown // value to be a thenable, because before `use` existed that was the // (unstable) API for suspending. This implementation detail can change // later, once we deprecate the old API in favor of `use`. - getSuspendedThenable() : thrownValue; // If the suspended/errored value was an element or lazy it can be reduced - // to a lazy reference, so that it doesn't error the parent. - - var model = task.model; - var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE); + getSuspendedThenable() : thrownValue; if (typeof x === 'object' && x !== null) { // $FlowFixMe[method-unbinding] if (typeof x.then === 'function') { - // Something suspended, we'll need to create a new task and resolve it later. + if (request.status === ABORTING) { + task.status = ABORTED; + var errorId = request.fatalError; + + if (wasReactNode) { + return serializeLazyID(errorId); + } + + return serializeByValueID(errorId); + } // Something suspended, we'll need to create a new task and resolve it later. + + var newTask = createTask(request, task.model, task.keyPath, task.implicitSlot, request.abortableTasks); var ping = newTask.ping; x.then(ping, ping); @@ -3105,6 +3144,17 @@ function renderModel(request, task, parent, key, value) { return serializeByValueID(postponeId); } + } + + if (thrownValue === AbortSigil) { + task.status = ABORTED; + var _errorId = request.fatalError; + + if (wasReactNode) { + return serializeLazyID(_errorId); + } + + return serializeByValueID(_errorId); } // Restore the context. We assume that this will be restored by the inner // functions in case nothing throws so we don't use "finally" here. @@ -3117,10 +3167,12 @@ function renderModel(request, task, parent, key, value) { // We'll replace this element with a lazy reference that throws on the client // once it gets rendered. request.pendingChunks++; - var errorId = request.nextChunkId++; + + var _errorId2 = request.nextChunkId++; + var digest = logRecoverableError(request, x); - emitErrorChunk(request, errorId, digest, x); - return serializeLazyID(errorId); + emitErrorChunk(request, _errorId2, digest, x); + return serializeLazyID(_errorId2); } // Something errored but it was not in a React Node. There's no need to serialize // it by value because it'll just error the whole parent row anyway so we can // just stop any siblings and error the whole parent row. @@ -3224,6 +3276,13 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value resolvedModel = callLazyInitInDEV(lazy); } + if (request.status === ABORTING) { + // lazy initializers are user code and could abort during render + // we don't wan to return any value resolved from the lazy initializer + // if it aborts so we interrupt rendering here + throw AbortSigil; + } + { var _debugInfo = lazy._debugInfo; @@ -4215,6 +4274,7 @@ function retryTask(request, task) { } var prevDebugID = debugID; + task.status = RENDERING; try { // Track the root so we know that we have to emit this object even though it @@ -4271,10 +4331,20 @@ function retryTask(request, task) { if (typeof x === 'object' && x !== null) { // $FlowFixMe[method-unbinding] if (typeof x.then === 'function') { - // Something suspended again, let's pick it back up later. + if (request.status === ABORTING) { + request.abortableTasks.delete(task); + task.status = ABORTED; + var errorId = request.fatalError; + var model = stringify(serializeByValueID(errorId)); + emitModelChunk(request, task.id, model); + return; + } // Something suspended again, let's pick it back up later. + + + task.status = PENDING$1; + task.thenableState = getThenableStateAfterSuspending(); var ping = task.ping; x.then(ping, ping); - task.thenableState = getThenableStateAfterSuspending(); return; } else if (x.$$typeof === REACT_POSTPONE_TYPE) { request.abortableTasks.delete(task); @@ -4286,6 +4356,17 @@ function retryTask(request, task) { } } + if (x === AbortSigil) { + request.abortableTasks.delete(task); + task.status = ABORTED; + var _errorId3 = request.fatalError; + + var _model = stringify(serializeByValueID(_errorId3)); + + emitModelChunk(request, task.id, _model); + return; + } + request.abortableTasks.delete(task); task.status = ERRORED$1; var digest = logRecoverableError(request, x); @@ -4347,6 +4428,11 @@ function performWork(request) { } function abortTask(task, request, errorId) { + if (task.status === RENDERING) { + // This task will be aborted by the render + return; + } + task.status = ABORTED; // Instead of emitting an error per task.id, we emit a model that only // has a single value referencing the error. @@ -4445,6 +4531,7 @@ function flushCompletedChunks(request, destination) { cleanupTaintQueue(request); } + request.status = CLOSED; close$1(destination); request.destination = null; } @@ -4465,10 +4552,14 @@ function enqueueFlush(request) { request.pingedTasks.length === 0 && // If there is no destination there is nothing we can flush to. A flush will // happen when we start flowing again request.destination !== null) { - var destination = request.destination; request.flushScheduled = true; scheduleWork(function () { - return flushCompletedChunks(request, destination); + request.flushScheduled = false; + var destination = request.destination; + + if (destination) { + flushCompletedChunks(request, destination); + } }); } } @@ -4504,19 +4595,21 @@ function stopFlowing(request) { function abort(request, reason) { try { + request.status = ABORTING; var abortableTasks = request.abortableTasks; // We have tasks to abort. We'll emit one error row and then emit a reference // to that row from every row that's still remaining. if (abortableTasks.size > 0) { request.pendingChunks++; var errorId = request.nextChunkId++; + request.fatalError = errorId; if (enablePostpone && typeof reason === 'object' && reason !== null && reason.$$typeof === REACT_POSTPONE_TYPE) { var postponeInstance = reason; logPostpone(request, postponeInstance.message); emitPostponeChunk(request, errorId, postponeInstance); } else { - var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason; + var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : typeof reason === 'object' && reason !== null && typeof reason.then === 'function' ? new Error('The render was aborted by the server with a promise.') : reason; var digest = logRecoverableError(request, error); emitErrorChunk(request, errorId, digest, error); } @@ -4538,7 +4631,7 @@ function abort(request, reason) { // We create an alternative reason for it instead. _error = new Error('The render was aborted due to being postponed.'); } else { - _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason; + _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : typeof reason === 'object' && reason !== null && typeof reason.then === 'function' ? new Error('The render was aborted by the server with a promise.') : reason; } abortListeners.forEach(function (callback) { diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.unbundled.production.js b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.unbundled.production.js index 5b65879a5afc6..c702722489646 100644 --- a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.unbundled.production.js +++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.unbundled.production.js @@ -14,6 +14,7 @@ require("crypto"); var async_hooks = require("async_hooks"), ReactDOM = require("react-dom"), React = require("react"), + scheduleMicrotask = queueMicrotask, currentView = null, writtenBytes = 0, destinationHasCapacity = !0; @@ -708,6 +709,7 @@ if (!ReactSharedInternalsServer) ); var ObjectPrototype = Object.prototype, stringify = JSON.stringify, + AbortSigil = {}, TaintRegistryObjects = ReactSharedInternalsServer.TaintRegistryObjects, TaintRegistryValues = ReactSharedInternalsServer.TaintRegistryValues, TaintRegistryByteLengths = @@ -818,6 +820,14 @@ function serializeThenable(request, task, thenable) { newTask.id ); default: + if (1 === request.status) + return ( + (newTask.status = 3), + (task = stringify(serializeByValueID(request.fatalError))), + emitModelChunk(request, newTask.id, task), + request.abortableTasks.delete(newTask), + newTask.id + ); "string" !== typeof thenable.status && ((thenable.status = "pending"), thenable.then( @@ -1026,6 +1036,7 @@ function renderFunctionComponent(request, task, key, Component, props) { thenableIndexCounter = 0; thenableState = prevThenableState; Component = Component(props, void 0); + if (1 === request.status) throw AbortSigil; if ( "object" === typeof Component && null !== Component && @@ -1123,6 +1134,7 @@ function renderElement(request, task, type, key, ref, props) { case REACT_LAZY_TYPE: var init = type._init; type = init(type._payload); + if (1 === request.status) throw AbortSigil; return renderElement(request, task, type, key, ref, props); case REACT_FORWARD_REF_TYPE: return renderFunctionComponent(request, task, key, type.render, props); @@ -1139,7 +1151,7 @@ function pingTask(request, task) { pingedTasks.push(task); 1 === pingedTasks.length && ((request.flushScheduled = null !== request.destination), - setImmediate(function () { + scheduleMicrotask(function () { return performWork(request); })); } @@ -1161,79 +1173,7 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) { return pingTask(request, task); }, toJSON: function (parentPropertyName, value) { - a: { - var prevKeyPath = task.keyPath, - prevImplicitSlot = task.implicitSlot; - try { - var JSCompiler_inline_result = renderModelDestructive( - request, - task, - this, - parentPropertyName, - value - ); - } catch (thrownValue) { - parentPropertyName = - thrownValue === SuspenseException - ? getSuspendedThenable() - : thrownValue; - value = task.model; - value = - "object" === typeof value && - null !== value && - (value.$$typeof === REACT_ELEMENT_TYPE || - value.$$typeof === REACT_LAZY_TYPE); - if ( - "object" === typeof parentPropertyName && - null !== parentPropertyName - ) { - if ("function" === typeof parentPropertyName.then) { - JSCompiler_inline_result = createTask( - request, - task.model, - task.keyPath, - task.implicitSlot, - request.abortableTasks - ); - var ping = JSCompiler_inline_result.ping; - parentPropertyName.then(ping, ping); - JSCompiler_inline_result.thenableState = - getThenableStateAfterSuspending(); - task.keyPath = prevKeyPath; - task.implicitSlot = prevImplicitSlot; - JSCompiler_inline_result = value - ? "$L" + JSCompiler_inline_result.id.toString(16) - : serializeByValueID(JSCompiler_inline_result.id); - break a; - } - if (parentPropertyName.$$typeof === REACT_POSTPONE_TYPE) { - request.pendingChunks++; - JSCompiler_inline_result = request.nextChunkId++; - logPostpone(request, parentPropertyName.message); - emitPostponeChunk(request, JSCompiler_inline_result); - task.keyPath = prevKeyPath; - task.implicitSlot = prevImplicitSlot; - JSCompiler_inline_result = value - ? "$L" + JSCompiler_inline_result.toString(16) - : serializeByValueID(JSCompiler_inline_result); - break a; - } - } - task.keyPath = prevKeyPath; - task.implicitSlot = prevImplicitSlot; - if (value) - request.pendingChunks++, - (prevKeyPath = request.nextChunkId++), - (prevImplicitSlot = logRecoverableError( - request, - parentPropertyName - )), - emitErrorChunk(request, prevKeyPath, prevImplicitSlot), - (JSCompiler_inline_result = "$L" + prevKeyPath.toString(16)); - else throw parentPropertyName; - } - } - return JSCompiler_inline_result; + return renderModel(request, task, this, parentPropertyName, value); }, thenableState: null }; @@ -1243,6 +1183,9 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) { function serializeByValueID(id) { return "$" + id.toString(16); } +function serializeLazyID(id) { + return "$L" + id.toString(16); +} function encodeReferenceChunk(request, id, reference) { request = stringify(reference); return id.toString(16) + ":" + request + "\n"; @@ -1260,7 +1203,7 @@ function serializeClientReference( existingId = writtenClientReferences.get(clientReferenceKey); if (void 0 !== existingId) return parent[0] === REACT_ELEMENT_TYPE && "1" === parentPropertyName - ? "$L" + existingId.toString(16) + ? serializeLazyID(existingId) : serializeByValueID(existingId); try { var config = request.bundlerConfig, @@ -1291,7 +1234,7 @@ function serializeClientReference( request.completedImportChunks.push(processedChunk); writtenClientReferences.set(clientReferenceKey, importId); return parent[0] === REACT_ELEMENT_TYPE && "1" === parentPropertyName - ? "$L" + importId.toString(16) + ? serializeLazyID(importId) : serializeByValueID(importId); } catch (x) { return ( @@ -1346,6 +1289,74 @@ function serializeBlob(request, blob) { return "$B" + newTask.id.toString(16); } var modelRoot = !1; +function renderModel(request, task, parent, key, value) { + var prevKeyPath = task.keyPath, + prevImplicitSlot = task.implicitSlot; + try { + return renderModelDestructive(request, task, parent, key, value); + } catch (thrownValue) { + parent = task.model; + parent = + "object" === typeof parent && + null !== parent && + (parent.$$typeof === REACT_ELEMENT_TYPE || + parent.$$typeof === REACT_LAZY_TYPE); + key = + thrownValue === SuspenseException ? getSuspendedThenable() : thrownValue; + if ("object" === typeof key && null !== key) { + if ("function" === typeof key.then) { + if (1 === request.status) + return ( + (task.status = 3), + (request = request.fatalError), + parent ? serializeLazyID(request) : serializeByValueID(request) + ); + request = createTask( + request, + task.model, + task.keyPath, + task.implicitSlot, + request.abortableTasks + ); + value = request.ping; + key.then(value, value); + request.thenableState = getThenableStateAfterSuspending(); + task.keyPath = prevKeyPath; + task.implicitSlot = prevImplicitSlot; + return parent + ? serializeLazyID(request.id) + : serializeByValueID(request.id); + } + if (key.$$typeof === REACT_POSTPONE_TYPE) + return ( + request.pendingChunks++, + (value = request.nextChunkId++), + logPostpone(request, key.message), + emitPostponeChunk(request, value), + (task.keyPath = prevKeyPath), + (task.implicitSlot = prevImplicitSlot), + parent ? serializeLazyID(value) : serializeByValueID(value) + ); + } + if (thrownValue === AbortSigil) + return ( + (task.status = 3), + (request = request.fatalError), + parent ? serializeLazyID(request) : serializeByValueID(request) + ); + task.keyPath = prevKeyPath; + task.implicitSlot = prevImplicitSlot; + if (parent) + return ( + request.pendingChunks++, + (task = request.nextChunkId++), + (prevKeyPath = logRecoverableError(request, key)), + emitErrorChunk(request, task, prevKeyPath), + serializeLazyID(task) + ); + throw key; + } +} function renderModelDestructive( request, task, @@ -1382,12 +1393,11 @@ function renderModelDestructive( parentPropertyName ); case REACT_LAZY_TYPE: - return ( - (task.thenableState = null), - (parentPropertyName = value._init), - (value = parentPropertyName(value._payload)), - renderModelDestructive(request, task, emptyRoot, "", value) - ); + task.thenableState = null; + parentPropertyName = value._init; + value = parentPropertyName(value._payload); + if (1 === request.status) throw AbortSigil; + return renderModelDestructive(request, task, emptyRoot, "", value); case REACT_LEGACY_ELEMENT_TYPE: throw Error( 'A React Element from an older version of React was rendered. This is not supported. It can happen if:\n- Multiple copies of the "react" package is used.\n- A library pre-bundled an old copy of "react" or "react/jsx-runtime".\n- A compiler tries to "inline" JSX instead of using the runtime.' @@ -1668,8 +1678,8 @@ function logRecoverableError(request, error) { function fatalError(request, error) { cleanupTaintQueue(request); null !== request.destination - ? ((request.status = 2), request.destination.destroy(error)) - : ((request.status = 1), (request.fatalError = error)); + ? ((request.status = 3), request.destination.destroy(error)) + : ((request.status = 2), (request.fatalError = error)); } function emitPostponeChunk(request, id) { id = id.toString(16) + ":P\n"; @@ -1680,6 +1690,10 @@ function emitErrorChunk(request, id, digest) { id = id.toString(16) + ":E" + stringify(digest) + "\n"; request.completedErrorChunks.push(id); } +function emitModelChunk(request, id, json) { + id = id.toString(16) + ":" + json + "\n"; + request.completedRegularChunks.push(id); +} function emitTypedArrayChunk(request, id, tag, typedArray) { if (TaintRegistryByteLengths.has(typedArray.byteLength)) { var tainted = TaintRegistryValues.get( @@ -1746,12 +1760,12 @@ function emitChunk(request, task, value) { : value instanceof DataView ? emitTypedArrayChunk(request, id, "V", value) : ((value = stringify(value, task.toJSON)), - (task = task.id.toString(16) + ":" + value + "\n"), - request.completedRegularChunks.push(task)); + emitModelChunk(request, task.id, value)); } var emptyRoot = {}; function retryTask(request, task) { - if (0 === task.status) + if (0 === task.status) { + task.status = 5; try { modelRoot = task.model; var resolvedModel = renderModelDestructive( @@ -1768,9 +1782,8 @@ function retryTask(request, task) { request.writtenObjects.set(resolvedModel, serializeByValueID(task.id)), emitChunk(request, task, resolvedModel); else { - var json = stringify(resolvedModel), - processedChunk = task.id.toString(16) + ":" + json + "\n"; - request.completedRegularChunks.push(processedChunk); + var json = stringify(resolvedModel); + emitModelChunk(request, task.id, json); } request.abortableTasks.delete(task); task.status = 1; @@ -1781,9 +1794,17 @@ function retryTask(request, task) { : thrownValue; if ("object" === typeof x && null !== x) { if ("function" === typeof x.then) { + if (1 === request.status) { + request.abortableTasks.delete(task); + task.status = 3; + var model = stringify(serializeByValueID(request.fatalError)); + emitModelChunk(request, task.id, model); + return; + } + task.status = 0; + task.thenableState = getThenableStateAfterSuspending(); var ping = task.ping; x.then(ping, ping); - task.thenableState = getThenableStateAfterSuspending(); return; } if (x.$$typeof === REACT_POSTPONE_TYPE) { @@ -1794,12 +1815,20 @@ function retryTask(request, task) { return; } } - request.abortableTasks.delete(task); - task.status = 4; - var digest = logRecoverableError(request, x); - emitErrorChunk(request, task.id, digest); + if (x === AbortSigil) { + request.abortableTasks.delete(task); + task.status = 3; + var model$23 = stringify(serializeByValueID(request.fatalError)); + emitModelChunk(request, task.id, model$23); + } else { + request.abortableTasks.delete(task); + task.status = 4; + var digest = logRecoverableError(request, x); + emitErrorChunk(request, task.id, digest); + } } finally { } + } } function performWork(request) { var prevDispatcher = ReactSharedInternalsServer.H; @@ -1882,6 +1911,7 @@ function flushCompletedChunks(request, destination) { "function" === typeof destination.flush && destination.flush(); 0 === request.pendingChunks && (cleanupTaintQueue(request), + (request.status = 3), destination.end(), (request.destination = null)); } @@ -1892,22 +1922,20 @@ function startWork(request) { }); } function enqueueFlush(request) { - if ( - !1 === request.flushScheduled && + !1 === request.flushScheduled && 0 === request.pingedTasks.length && - null !== request.destination - ) { - var destination = request.destination; - request.flushScheduled = !0; + null !== request.destination && + ((request.flushScheduled = !0), setImmediate(function () { - return flushCompletedChunks(request, destination); - }); - } + request.flushScheduled = !1; + var destination = request.destination; + destination && flushCompletedChunks(request, destination); + })); } function startFlowing(request, destination) { - if (1 === request.status) - (request.status = 2), destination.destroy(request.fatalError); - else if (2 !== request.status && null === request.destination) { + if (2 === request.status) + (request.status = 3), destination.destroy(request.fatalError); + else if (3 !== request.status && null === request.destination) { request.destination = destination; try { flushCompletedChunks(request, destination); @@ -1918,10 +1946,12 @@ function startFlowing(request, destination) { } function abort(request, reason) { try { + request.status = 1; var abortableTasks = request.abortableTasks; if (0 < abortableTasks.size) { request.pendingChunks++; var errorId = request.nextChunkId++; + request.fatalError = errorId; if ( "object" === typeof reason && null !== reason && @@ -1933,37 +1963,47 @@ function abort(request, reason) { var error = void 0 === reason ? Error("The render was aborted by the server without a reason.") + : "object" === typeof reason && + null !== reason && + "function" === typeof reason.then + ? Error("The render was aborted by the server with a promise.") : reason, digest = logRecoverableError(request, error); emitErrorChunk(request, errorId, digest, error); } abortableTasks.forEach(function (task) { - task.status = 3; - var ref = serializeByValueID(errorId); - task = encodeReferenceChunk(request, task.id, ref); - request.completedErrorChunks.push(task); + if (5 !== task.status) { + task.status = 3; + var ref = serializeByValueID(errorId); + task = encodeReferenceChunk(request, task.id, ref); + request.completedErrorChunks.push(task); + } }); abortableTasks.clear(); } var abortListeners = request.abortListeners; if (0 < abortListeners.size) { - var error$26 = + var error$30 = "object" === typeof reason && null !== reason && reason.$$typeof === REACT_POSTPONE_TYPE ? Error("The render was aborted due to being postponed.") : void 0 === reason ? Error("The render was aborted by the server without a reason.") + : "object" === typeof reason && + null !== reason && + "function" === typeof reason.then + ? Error("The render was aborted by the server with a promise.") : reason; abortListeners.forEach(function (callback) { - return callback(error$26); + return callback(error$30); }); abortListeners.clear(); } null !== request.destination && flushCompletedChunks(request, request.destination); - } catch (error$27) { - logRecoverableError(request, error$27), fatalError(request, error$27); + } catch (error$31) { + logRecoverableError(request, error$31), fatalError(request, error$31); } } function resolveServerReference(bundlerConfig, id) { @@ -2374,8 +2414,8 @@ function parseReadableStream(response, reference, type) { (previousBlockedChunk = chunk)); } else { chunk = previousBlockedChunk; - var chunk$30 = createPendingChunk(response); - chunk$30.then( + var chunk$34 = createPendingChunk(response); + chunk$34.then( function (v) { return controller.enqueue(v); }, @@ -2383,10 +2423,10 @@ function parseReadableStream(response, reference, type) { return controller.error(e); } ); - previousBlockedChunk = chunk$30; + previousBlockedChunk = chunk$34; chunk.then(function () { - previousBlockedChunk === chunk$30 && (previousBlockedChunk = null); - resolveModelChunk(chunk$30, json, -1); + previousBlockedChunk === chunk$34 && (previousBlockedChunk = null); + resolveModelChunk(chunk$34, json, -1); }); } }, @@ -2744,12 +2784,12 @@ exports.decodeReplyFromBusboy = function (busboyStream, webpackMap, options) { "React doesn't accept base64 encoded file uploads because we don't expect form data passed from a browser to ever encode data that way. If that's the wrong assumption, we can easily fix it." ); pendingFiles++; - var JSCompiler_object_inline_chunks_203 = []; + var JSCompiler_object_inline_chunks_205 = []; value.on("data", function (chunk) { - JSCompiler_object_inline_chunks_203.push(chunk); + JSCompiler_object_inline_chunks_205.push(chunk); }); value.on("end", function () { - var blob = new Blob(JSCompiler_object_inline_chunks_203, { + var blob = new Blob(JSCompiler_object_inline_chunks_205, { type: mimeType }); response._formData.append(name, blob, filename); diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/package.json b/packages/next/src/compiled/react-server-dom-webpack-experimental/package.json index 2a519e5cd49ee..63a2c5b1cc0ab 100644 --- a/packages/next/src/compiled/react-server-dom-webpack-experimental/package.json +++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/package.json @@ -46,8 +46,8 @@ "neo-async": "^2.6.1" }, "peerDependencies": { - "react": "0.0.0-experimental-6230622a1a-20240610", - "react-dom": "0.0.0-experimental-6230622a1a-20240610", + "react": "0.0.0-experimental-20b6f4c0e8-20240607", + "react-dom": "0.0.0-experimental-20b6f4c0e8-20240607", "webpack": "^5.59.0" } } \ No newline at end of file diff --git a/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js b/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js index c9bc9ea20580a..6202ccc045bbc 100644 --- a/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js +++ b/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js @@ -2784,9 +2784,16 @@ function stopStream(response, id, row) { function resolveErrorDev(response, id, digest, message, stack) { + var error; + + { + // Executing Error within a native stack isn't really limited to owner stacks + // but we gate it behind the same flag for now while iterating. + // eslint-disable-next-line react-internal/prod-error-codes + error = Error(message || 'An error occurred in the Server Components render but no message was provided'); + error.stack = stack; + } - var error = new Error(message || 'An error occurred in the Server Components render but no message was provided'); - error.stack = stack; error.digest = digest; var errorWithDigest = error; var chunks = response._chunks; diff --git a/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js b/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js index 6014f94919aca..98a600843f608 100644 --- a/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js +++ b/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js @@ -3038,9 +3038,16 @@ function stopStream(response, id, row) { function resolveErrorDev(response, id, digest, message, stack) { + var error; + + { + // Executing Error within a native stack isn't really limited to owner stacks + // but we gate it behind the same flag for now while iterating. + // eslint-disable-next-line react-internal/prod-error-codes + error = Error(message || 'An error occurred in the Server Components render but no message was provided'); + error.stack = stack; + } - var error = new Error(message || 'An error occurred in the Server Components render but no message was provided'); - error.stack = stack; error.digest = digest; var errorWithDigest = error; var chunks = response._chunks; diff --git a/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js b/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js index 39aae25b37b21..4bc7799fb81c6 100644 --- a/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js +++ b/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js @@ -3036,9 +3036,16 @@ function stopStream(response, id, row) { function resolveErrorDev(response, id, digest, message, stack) { + var error; + + { + // Executing Error within a native stack isn't really limited to owner stacks + // but we gate it behind the same flag for now while iterating. + // eslint-disable-next-line react-internal/prod-error-codes + error = Error(message || 'An error occurred in the Server Components render but no message was provided'); + error.stack = stack; + } - var error = new Error(message || 'An error occurred in the Server Components render but no message was provided'); - error.stack = stack; error.digest = digest; var errorWithDigest = error; var chunks = response._chunks; diff --git a/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js b/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js index 898d858826800..846dbc6cec3ee 100644 --- a/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js +++ b/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js @@ -2989,9 +2989,16 @@ function stopStream(response, id, row) { function resolveErrorDev(response, id, digest, message, stack) { + var error; + + { + // Executing Error within a native stack isn't really limited to owner stacks + // but we gate it behind the same flag for now while iterating. + // eslint-disable-next-line react-internal/prod-error-codes + error = Error(message || 'An error occurred in the Server Components render but no message was provided'); + error.stack = stack; + } - var error = new Error(message || 'An error occurred in the Server Components render but no message was provided'); - error.stack = stack; error.digest = digest; var errorWithDigest = error; var chunks = response._chunks; diff --git a/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js b/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js index bff4cc9895746..e276f64df10b6 100644 --- a/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js +++ b/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js @@ -94,9 +94,32 @@ function printWarning(level, format, args, currentStack) { } } +var channel = new MessageChannel(); +var taskQueue = []; + +channel.port1.onmessage = function () { + var task = taskQueue.shift(); + + if (task) { + task(); + } +}; + function scheduleWork(callback) { - callback(); + taskQueue.push(callback); + channel.port2.postMessage(null); +} + +function handleErrorInNextTick(error) { + setTimeout(function () { + throw error; + }); } + +var LocalPromise = Promise; +var scheduleMicrotask = typeof queueMicrotask === 'function' ? queueMicrotask : function (callback) { + LocalPromise.resolve(null).then(callback).catch(handleErrorInNextTick); +}; var VIEW_SIZE = 2048; var currentView = null; var writtenBytes = 0; @@ -1566,6 +1589,8 @@ var PENDING$1 = 0; var COMPLETED = 1; var ABORTED = 3; var ERRORED$1 = 4; +var RENDERING = 5; +var AbortSigil = {}; function defaultErrorHandler(error) { console['error'](error); // Don't transform to our wrapper @@ -1575,8 +1600,9 @@ function defaultPostponeHandler(reason) {// Noop } var OPEN = 0; -var CLOSING = 1; -var CLOSED = 2; +var ABORTING = 1; +var CLOSING = 2; +var CLOSED = 3; function createRequest(model, bundlerConfig, onError, identifierPrefix, onPostpone, environmentName, temporaryReferences) { if (ReactSharedInternals.A !== null && ReactSharedInternals.A !== DefaultAsyncDispatcher) { throw new Error('Currently React only supports one RSC renderer at a time.'); @@ -1669,6 +1695,16 @@ function serializeThenable(request, task, thenable) { default: { + if (request.status === ABORTING) { + // We can no longer accept any resolved values + newTask.status = ABORTED; + var errorId = request.fatalError; + var model = stringify(serializeByValueID(errorId)); + emitModelChunk(request, newTask.id, model); + request.abortableTasks.delete(newTask); + return newTask.id; + } + if (typeof thenable.status === 'string') { // Only instrument the thenable if the status if not defined. If // it's defined, but an unknown value, assume it's been instrumented by @@ -2042,6 +2078,13 @@ validated) // DEV-only result = callComponentInDEV(Component, props, componentDebugInfo); } + if (request.status === ABORTING) { + // If we aborted during rendering we should interrupt the render but + // we don't need to provide an error because the renderer will encode + // the abort error as the reason. + throw AbortSigil; + } + if (typeof result === 'object' && result !== null && !isClientReference(result)) { if (typeof result.then === 'function') { // When the return value is in children position we can resolve it immediately, @@ -2383,6 +2426,13 @@ validated) // DEV only wrappedType = callLazyInitInDEV(type); } + if (request.status === ABORTING) { + // lazy initializers are user code and could abort during render + // we don't wan to return any value resolved from the lazy initializer + // if it aborts so we interrupt rendering here + throw AbortSigil; + } + return renderElement(request, task, wrappedType, key, ref, props, owner); } @@ -2407,7 +2457,7 @@ function pingTask(request, task) { if (pingedTasks.length === 1) { request.flushScheduled = request.destination !== null; - scheduleWork(function () { + scheduleMicrotask(function () { return performWork(request); }); } @@ -2705,21 +2755,32 @@ function renderModel(request, task, parent, key, value) { try { return renderModelDestructive(request, task, parent, key, value); } catch (thrownValue) { + // If the suspended/errored value was an element or lazy it can be reduced + // to a lazy reference, so that it doesn't error the parent. + var model = task.model; + var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE); var x = thrownValue === SuspenseException ? // This is a special type of exception used for Suspense. For historical // reasons, the rest of the Suspense implementation expects the thrown // value to be a thenable, because before `use` existed that was the // (unstable) API for suspending. This implementation detail can change // later, once we deprecate the old API in favor of `use`. - getSuspendedThenable() : thrownValue; // If the suspended/errored value was an element or lazy it can be reduced - // to a lazy reference, so that it doesn't error the parent. - - var model = task.model; - var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE); + getSuspendedThenable() : thrownValue; if (typeof x === 'object' && x !== null) { // $FlowFixMe[method-unbinding] if (typeof x.then === 'function') { - // Something suspended, we'll need to create a new task and resolve it later. + if (request.status === ABORTING) { + task.status = ABORTED; + var errorId = request.fatalError; + + if (wasReactNode) { + return serializeLazyID(errorId); + } + + return serializeByValueID(errorId); + } // Something suspended, we'll need to create a new task and resolve it later. + + var newTask = createTask(request, task.model, task.keyPath, task.implicitSlot, request.abortableTasks); var ping = newTask.ping; x.then(ping, ping); @@ -2735,6 +2796,17 @@ function renderModel(request, task, parent, key, value) { return serializeByValueID(newTask.id); } + } + + if (thrownValue === AbortSigil) { + task.status = ABORTED; + var _errorId = request.fatalError; + + if (wasReactNode) { + return serializeLazyID(_errorId); + } + + return serializeByValueID(_errorId); } // Restore the context. We assume that this will be restored by the inner // functions in case nothing throws so we don't use "finally" here. @@ -2747,10 +2819,12 @@ function renderModel(request, task, parent, key, value) { // We'll replace this element with a lazy reference that throws on the client // once it gets rendered. request.pendingChunks++; - var errorId = request.nextChunkId++; + + var _errorId2 = request.nextChunkId++; + var digest = logRecoverableError(request, x); - emitErrorChunk(request, errorId, digest, x); - return serializeLazyID(errorId); + emitErrorChunk(request, _errorId2, digest, x); + return serializeLazyID(_errorId2); } // Something errored but it was not in a React Node. There's no need to serialize // it by value because it'll just error the whole parent row anyway so we can // just stop any siblings and error the whole parent row. @@ -2854,6 +2928,13 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value resolvedModel = callLazyInitInDEV(lazy); } + if (request.status === ABORTING) { + // lazy initializers are user code and could abort during render + // we don't wan to return any value resolved from the lazy initializer + // if it aborts so we interrupt rendering here + throw AbortSigil; + } + { var _debugInfo = lazy._debugInfo; @@ -3762,6 +3843,7 @@ function retryTask(request, task) { } var prevDebugID = debugID; + task.status = RENDERING; try { // Track the root so we know that we have to emit this object even though it @@ -3818,14 +3900,35 @@ function retryTask(request, task) { if (typeof x === 'object' && x !== null) { // $FlowFixMe[method-unbinding] if (typeof x.then === 'function') { - // Something suspended again, let's pick it back up later. + if (request.status === ABORTING) { + request.abortableTasks.delete(task); + task.status = ABORTED; + var errorId = request.fatalError; + var model = stringify(serializeByValueID(errorId)); + emitModelChunk(request, task.id, model); + return; + } // Something suspended again, let's pick it back up later. + + + task.status = PENDING$1; + task.thenableState = getThenableStateAfterSuspending(); var ping = task.ping; x.then(ping, ping); - task.thenableState = getThenableStateAfterSuspending(); return; } } + if (x === AbortSigil) { + request.abortableTasks.delete(task); + task.status = ABORTED; + var _errorId3 = request.fatalError; + + var _model = stringify(serializeByValueID(_errorId3)); + + emitModelChunk(request, task.id, _model); + return; + } + request.abortableTasks.delete(task); task.status = ERRORED$1; var digest = logRecoverableError(request, x); @@ -3887,6 +3990,11 @@ function performWork(request) { } function abortTask(task, request, errorId) { + if (task.status === RENDERING) { + // This task will be aborted by the render + return; + } + task.status = ABORTED; // Instead of emitting an error per task.id, we emit a model that only // has a single value referencing the error. @@ -3979,6 +4087,7 @@ function flushCompletedChunks(request, destination) { if (request.pendingChunks === 0) { + request.status = CLOSED; close$1(destination); request.destination = null; } @@ -3999,10 +4108,14 @@ function enqueueFlush(request) { request.pingedTasks.length === 0 && // If there is no destination there is nothing we can flush to. A flush will // happen when we start flowing again request.destination !== null) { - var destination = request.destination; request.flushScheduled = true; scheduleWork(function () { - return flushCompletedChunks(request, destination); + request.flushScheduled = false; + var destination = request.destination; + + if (destination) { + flushCompletedChunks(request, destination); + } }); } } @@ -4038,15 +4151,17 @@ function stopFlowing(request) { function abort(request, reason) { try { + request.status = ABORTING; var abortableTasks = request.abortableTasks; // We have tasks to abort. We'll emit one error row and then emit a reference // to that row from every row that's still remaining. if (abortableTasks.size > 0) { request.pendingChunks++; var errorId = request.nextChunkId++; + request.fatalError = errorId; var postponeInstance; if (enablePostpone && typeof reason === 'object' && reason !== null && reason.$$typeof === REACT_POSTPONE_TYPE) ; else { - var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason; + var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : typeof reason === 'object' && reason !== null && typeof reason.then === 'function' ? new Error('The render was aborted by the server with a promise.') : reason; var digest = logRecoverableError(request, error); emitErrorChunk(request, errorId, digest, error); } @@ -4063,7 +4178,7 @@ function abort(request, reason) { var _error; if (enablePostpone && typeof reason === 'object' && reason !== null && reason.$$typeof === REACT_POSTPONE_TYPE) ; else { - _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason; + _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : typeof reason === 'object' && reason !== null && typeof reason.then === 'function' ? new Error('The render was aborted by the server with a promise.') : reason; } abortListeners.forEach(function (callback) { diff --git a/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.js b/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.js index 99e8361ac82fb..a754e327df5c0 100644 --- a/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.js +++ b/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.js @@ -11,6 +11,30 @@ "use strict"; var ReactDOM = require("react-dom"), React = require("react"), + channel = new MessageChannel(), + taskQueue = []; +channel.port1.onmessage = function () { + var task = taskQueue.shift(); + task && task(); +}; +function scheduleWork(callback) { + taskQueue.push(callback); + channel.port2.postMessage(null); +} +function handleErrorInNextTick(error) { + setTimeout(function () { + throw error; + }); +} +var LocalPromise = Promise, + scheduleMicrotask = + "function" === typeof queueMicrotask + ? queueMicrotask + : function (callback) { + LocalPromise.resolve(null) + .then(callback) + .catch(handleErrorInNextTick); + }, currentView = null, writtenBytes = 0; function writeChunkAndReturn(destination, chunk) { @@ -670,7 +694,8 @@ if (!ReactSharedInternalsServer) 'The "react" package in this environment is not configured correctly. The "react-server" condition must be enabled in any environment that runs React Server Components.' ); var ObjectPrototype = Object.prototype, - stringify = JSON.stringify; + stringify = JSON.stringify, + AbortSigil = {}; function defaultErrorHandler(error) { console.error(error); } @@ -746,6 +771,14 @@ function serializeThenable(request, task, thenable) { newTask.id ); default: + if (1 === request.status) + return ( + (newTask.status = 3), + (task = stringify(serializeByValueID(request.fatalError))), + emitModelChunk(request, newTask.id, task), + request.abortableTasks.delete(newTask), + newTask.id + ); "string" !== typeof thenable.status && ((thenable.status = "pending"), thenable.then( @@ -932,6 +965,7 @@ function renderFunctionComponent(request, task, key, Component, props) { thenableIndexCounter = 0; thenableState = prevThenableState; Component = Component(props, void 0); + if (1 === request.status) throw AbortSigil; if ( "object" === typeof Component && null !== Component && @@ -1029,6 +1063,7 @@ function renderElement(request, task, type, key, ref, props) { case REACT_LAZY_TYPE: var init = type._init; type = init(type._payload); + if (1 === request.status) throw AbortSigil; return renderElement(request, task, type, key, ref, props); case REACT_FORWARD_REF_TYPE: return renderFunctionComponent(request, task, key, type.render, props); @@ -1045,7 +1080,9 @@ function pingTask(request, task) { pingedTasks.push(task); 1 === pingedTasks.length && ((request.flushScheduled = null !== request.destination), - performWork(request)); + scheduleMicrotask(function () { + return performWork(request); + })); } function createTask(request, model, keyPath, implicitSlot, abortSet) { request.pendingChunks++; @@ -1077,50 +1114,61 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) { ); } catch (thrownValue) { if ( - ((parentPropertyName = + ((parentPropertyName = task.model), + (parentPropertyName = + "object" === typeof parentPropertyName && + null !== parentPropertyName && + (parentPropertyName.$$typeof === REACT_ELEMENT_TYPE || + parentPropertyName.$$typeof === REACT_LAZY_TYPE)), + (value = thrownValue === SuspenseException ? getSuspendedThenable() : thrownValue), - (value = task.model), - (value = - "object" === typeof value && + "object" === typeof value && null !== value && - (value.$$typeof === REACT_ELEMENT_TYPE || - value.$$typeof === REACT_LAZY_TYPE)), - "object" === typeof parentPropertyName && - null !== parentPropertyName && - "function" === typeof parentPropertyName.then) - ) { - JSCompiler_inline_result = createTask( - request, - task.model, - task.keyPath, - task.implicitSlot, - request.abortableTasks - ); - var ping = JSCompiler_inline_result.ping; - parentPropertyName.then(ping, ping); - JSCompiler_inline_result.thenableState = - getThenableStateAfterSuspending(); - task.keyPath = prevKeyPath; - task.implicitSlot = prevImplicitSlot; - JSCompiler_inline_result = value - ? "$L" + JSCompiler_inline_result.id.toString(16) - : serializeByValueID(JSCompiler_inline_result.id); - } else if ( + "function" === typeof value.then) + ) + if (1 === request.status) + (task.status = 3), + (prevKeyPath = request.fatalError), + (JSCompiler_inline_result = parentPropertyName + ? "$L" + prevKeyPath.toString(16) + : serializeByValueID(prevKeyPath)); + else { + JSCompiler_inline_result = createTask( + request, + task.model, + task.keyPath, + task.implicitSlot, + request.abortableTasks + ); + var ping = JSCompiler_inline_result.ping; + value.then(ping, ping); + JSCompiler_inline_result.thenableState = + getThenableStateAfterSuspending(); + task.keyPath = prevKeyPath; + task.implicitSlot = prevImplicitSlot; + JSCompiler_inline_result = parentPropertyName + ? "$L" + JSCompiler_inline_result.id.toString(16) + : serializeByValueID(JSCompiler_inline_result.id); + } + else if (thrownValue === AbortSigil) + (task.status = 3), + (prevKeyPath = request.fatalError), + (JSCompiler_inline_result = parentPropertyName + ? "$L" + prevKeyPath.toString(16) + : serializeByValueID(prevKeyPath)); + else if ( ((task.keyPath = prevKeyPath), (task.implicitSlot = prevImplicitSlot), - value) + parentPropertyName) ) request.pendingChunks++, (prevKeyPath = request.nextChunkId++), - (prevImplicitSlot = logRecoverableError( - request, - parentPropertyName - )), + (prevImplicitSlot = logRecoverableError(request, value)), emitErrorChunk(request, prevKeyPath, prevImplicitSlot), (JSCompiler_inline_result = "$L" + prevKeyPath.toString(16)); - else throw parentPropertyName; + else throw value; } return JSCompiler_inline_result; }, @@ -1273,12 +1321,11 @@ function renderModelDestructive( parentPropertyName ); case REACT_LAZY_TYPE: - return ( - (task.thenableState = null), - (parentPropertyName = value._init), - (value = parentPropertyName(value._payload)), - renderModelDestructive(request, task, emptyRoot, "", value) - ); + task.thenableState = null; + parentPropertyName = value._init; + value = parentPropertyName(value._payload); + if (1 === request.status) throw AbortSigil; + return renderModelDestructive(request, task, emptyRoot, "", value); case REACT_LEGACY_ELEMENT_TYPE: throw Error( 'A React Element from an older version of React was rendered. This is not supported. It can happen if:\n- Multiple copies of the "react" package is used.\n- A library pre-bundled an old copy of "react" or "react/jsx-runtime".\n- A compiler tries to "inline" JSX instead of using the runtime.' @@ -1539,8 +1586,8 @@ function logRecoverableError(request, error) { } function fatalError(request, error) { null !== request.destination - ? ((request.status = 2), closeWithError(request.destination, error)) - : ((request.status = 1), (request.fatalError = error)); + ? ((request.status = 3), closeWithError(request.destination, error)) + : ((request.status = 2), (request.fatalError = error)); } function emitErrorChunk(request, id, digest) { digest = { digest: digest }; @@ -1609,7 +1656,8 @@ function emitChunk(request, task, value) { } var emptyRoot = {}; function retryTask(request, task) { - if (0 === task.status) + if (0 === task.status) { + task.status = 5; try { modelRoot = task.model; var resolvedModel = renderModelDestructive( @@ -1636,10 +1684,23 @@ function retryTask(request, task) { thrownValue === SuspenseException ? getSuspendedThenable() : thrownValue; - if ("object" === typeof x && null !== x && "function" === typeof x.then) { - var ping = task.ping; - x.then(ping, ping); - task.thenableState = getThenableStateAfterSuspending(); + if ("object" === typeof x && null !== x && "function" === typeof x.then) + if (1 === request.status) { + request.abortableTasks.delete(task); + task.status = 3; + var model = stringify(serializeByValueID(request.fatalError)); + emitModelChunk(request, task.id, model); + } else { + task.status = 0; + task.thenableState = getThenableStateAfterSuspending(); + var ping = task.ping; + x.then(ping, ping); + } + else if (x === AbortSigil) { + request.abortableTasks.delete(task); + task.status = 3; + var model$19 = stringify(serializeByValueID(request.fatalError)); + emitModelChunk(request, task.id, model$19); } else { request.abortableTasks.delete(task); task.status = 4; @@ -1648,6 +1709,7 @@ function retryTask(request, task) { } } finally { } + } } function performWork(request) { var prevDispatcher = ReactSharedInternalsServer.H; @@ -1705,54 +1767,72 @@ function flushCompletedChunks(request, destination) { (writtenBytes = 0)); } 0 === request.pendingChunks && - (destination.close(), (request.destination = null)); + ((request.status = 3), destination.close(), (request.destination = null)); +} +function startWork(request) { + request.flushScheduled = null !== request.destination; + scheduleWork(function () { + return performWork(request); + }); } function enqueueFlush(request) { - if ( - !1 === request.flushScheduled && + !1 === request.flushScheduled && 0 === request.pingedTasks.length && - null !== request.destination - ) { - var destination = request.destination; - request.flushScheduled = !0; - flushCompletedChunks(request, destination); - } + null !== request.destination && + ((request.flushScheduled = !0), + scheduleWork(function () { + request.flushScheduled = !1; + var destination = request.destination; + destination && flushCompletedChunks(request, destination); + })); } function abort(request, reason) { try { + request.status = 1; var abortableTasks = request.abortableTasks; if (0 < abortableTasks.size) { request.pendingChunks++; - var errorId = request.nextChunkId++, - error = + var errorId = request.nextChunkId++; + request.fatalError = errorId; + var error = void 0 === reason ? Error("The render was aborted by the server without a reason.") + : "object" === typeof reason && + null !== reason && + "function" === typeof reason.then + ? Error("The render was aborted by the server with a promise.") : reason, digest = logRecoverableError(request, error); emitErrorChunk(request, errorId, digest, error); abortableTasks.forEach(function (task) { - task.status = 3; - var ref = serializeByValueID(errorId); - task = encodeReferenceChunk(request, task.id, ref); - request.completedErrorChunks.push(task); + if (5 !== task.status) { + task.status = 3; + var ref = serializeByValueID(errorId); + task = encodeReferenceChunk(request, task.id, ref); + request.completedErrorChunks.push(task); + } }); abortableTasks.clear(); } var abortListeners = request.abortListeners; if (0 < abortListeners.size) { - var error$22 = + var error$26 = void 0 === reason ? Error("The render was aborted by the server without a reason.") + : "object" === typeof reason && + null !== reason && + "function" === typeof reason.then + ? Error("The render was aborted by the server with a promise.") : reason; abortListeners.forEach(function (callback) { - return callback(error$22); + return callback(error$26); }); abortListeners.clear(); } null !== request.destination && flushCompletedChunks(request, request.destination); - } catch (error$23) { - logRecoverableError(request, error$23), fatalError(request, error$23); + } catch (error$27) { + logRecoverableError(request, error$27), fatalError(request, error$27); } } function resolveServerReference(bundlerConfig, id) { @@ -2204,8 +2284,8 @@ function parseReadableStream(response, reference, type) { (previousBlockedChunk = chunk)); } else { chunk = previousBlockedChunk; - var chunk$26 = createPendingChunk(response); - chunk$26.then( + var chunk$30 = createPendingChunk(response); + chunk$30.then( function (v) { return controller.enqueue(v); }, @@ -2213,10 +2293,10 @@ function parseReadableStream(response, reference, type) { return controller.error(e); } ); - previousBlockedChunk = chunk$26; + previousBlockedChunk = chunk$30; chunk.then(function () { - previousBlockedChunk === chunk$26 && (previousBlockedChunk = null); - resolveModelChunk(chunk$26, json, -1); + previousBlockedChunk === chunk$30 && (previousBlockedChunk = null); + resolveModelChunk(chunk$30, json, -1); }); } }, @@ -2581,13 +2661,12 @@ exports.renderToReadableStream = function (model, webpackMap, options) { { type: "bytes", start: function () { - request.flushScheduled = null !== request.destination; - performWork(request); + startWork(request); }, pull: function (controller) { - if (1 === request.status) - (request.status = 2), closeWithError(controller, request.fatalError); - else if (2 !== request.status && null === request.destination) { + if (2 === request.status) + (request.status = 3), closeWithError(controller, request.fatalError); + else if (3 !== request.status && null === request.destination) { request.destination = controller; try { flushCompletedChunks(request, controller); diff --git a/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js b/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js index 570d72b285694..d9bd1672240c0 100644 --- a/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js +++ b/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js @@ -94,6 +94,16 @@ function printWarning(level, format, args, currentStack) { } } +function handleErrorInNextTick(error) { + setTimeout(function () { + throw error; + }); +} + +var LocalPromise = Promise; +var scheduleMicrotask = typeof queueMicrotask === 'function' ? queueMicrotask : function (callback) { + LocalPromise.resolve(null).then(callback).catch(handleErrorInNextTick); +}; function scheduleWork(callback) { setTimeout(callback, 0); } @@ -1579,6 +1589,8 @@ var PENDING$1 = 0; var COMPLETED = 1; var ABORTED = 3; var ERRORED$1 = 4; +var RENDERING = 5; +var AbortSigil = {}; function defaultErrorHandler(error) { console['error'](error); // Don't transform to our wrapper @@ -1588,8 +1600,9 @@ function defaultPostponeHandler(reason) {// Noop } var OPEN = 0; -var CLOSING = 1; -var CLOSED = 2; +var ABORTING = 1; +var CLOSING = 2; +var CLOSED = 3; function createRequest(model, bundlerConfig, onError, identifierPrefix, onPostpone, environmentName, temporaryReferences) { if (ReactSharedInternals.A !== null && ReactSharedInternals.A !== DefaultAsyncDispatcher) { throw new Error('Currently React only supports one RSC renderer at a time.'); @@ -1687,6 +1700,16 @@ function serializeThenable(request, task, thenable) { default: { + if (request.status === ABORTING) { + // We can no longer accept any resolved values + newTask.status = ABORTED; + var errorId = request.fatalError; + var model = stringify(serializeByValueID(errorId)); + emitModelChunk(request, newTask.id, model); + request.abortableTasks.delete(newTask); + return newTask.id; + } + if (typeof thenable.status === 'string') { // Only instrument the thenable if the status if not defined. If // it's defined, but an unknown value, assume it's been instrumented by @@ -2063,6 +2086,13 @@ validated) // DEV-only result = callComponentInDEV(Component, props, componentDebugInfo); } + if (request.status === ABORTING) { + // If we aborted during rendering we should interrupt the render but + // we don't need to provide an error because the renderer will encode + // the abort error as the reason. + throw AbortSigil; + } + if (typeof result === 'object' && result !== null && !isClientReference(result)) { if (typeof result.then === 'function') { // When the return value is in children position we can resolve it immediately, @@ -2404,6 +2434,13 @@ validated) // DEV only wrappedType = callLazyInitInDEV(type); } + if (request.status === ABORTING) { + // lazy initializers are user code and could abort during render + // we don't wan to return any value resolved from the lazy initializer + // if it aborts so we interrupt rendering here + throw AbortSigil; + } + return renderElement(request, task, wrappedType, key, ref, props, owner); } @@ -2428,7 +2465,7 @@ function pingTask(request, task) { if (pingedTasks.length === 1) { request.flushScheduled = request.destination !== null; - scheduleWork(function () { + scheduleMicrotask(function () { return performWork(request); }); } @@ -2726,21 +2763,32 @@ function renderModel(request, task, parent, key, value) { try { return renderModelDestructive(request, task, parent, key, value); } catch (thrownValue) { + // If the suspended/errored value was an element or lazy it can be reduced + // to a lazy reference, so that it doesn't error the parent. + var model = task.model; + var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE); var x = thrownValue === SuspenseException ? // This is a special type of exception used for Suspense. For historical // reasons, the rest of the Suspense implementation expects the thrown // value to be a thenable, because before `use` existed that was the // (unstable) API for suspending. This implementation detail can change // later, once we deprecate the old API in favor of `use`. - getSuspendedThenable() : thrownValue; // If the suspended/errored value was an element or lazy it can be reduced - // to a lazy reference, so that it doesn't error the parent. - - var model = task.model; - var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE); + getSuspendedThenable() : thrownValue; if (typeof x === 'object' && x !== null) { // $FlowFixMe[method-unbinding] if (typeof x.then === 'function') { - // Something suspended, we'll need to create a new task and resolve it later. + if (request.status === ABORTING) { + task.status = ABORTED; + var errorId = request.fatalError; + + if (wasReactNode) { + return serializeLazyID(errorId); + } + + return serializeByValueID(errorId); + } // Something suspended, we'll need to create a new task and resolve it later. + + var newTask = createTask(request, task.model, task.keyPath, task.implicitSlot, request.abortableTasks); var ping = newTask.ping; x.then(ping, ping); @@ -2756,6 +2804,17 @@ function renderModel(request, task, parent, key, value) { return serializeByValueID(newTask.id); } + } + + if (thrownValue === AbortSigil) { + task.status = ABORTED; + var _errorId = request.fatalError; + + if (wasReactNode) { + return serializeLazyID(_errorId); + } + + return serializeByValueID(_errorId); } // Restore the context. We assume that this will be restored by the inner // functions in case nothing throws so we don't use "finally" here. @@ -2768,10 +2827,12 @@ function renderModel(request, task, parent, key, value) { // We'll replace this element with a lazy reference that throws on the client // once it gets rendered. request.pendingChunks++; - var errorId = request.nextChunkId++; + + var _errorId2 = request.nextChunkId++; + var digest = logRecoverableError(request, x); - emitErrorChunk(request, errorId, digest, x); - return serializeLazyID(errorId); + emitErrorChunk(request, _errorId2, digest, x); + return serializeLazyID(_errorId2); } // Something errored but it was not in a React Node. There's no need to serialize // it by value because it'll just error the whole parent row anyway so we can // just stop any siblings and error the whole parent row. @@ -2875,6 +2936,13 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value resolvedModel = callLazyInitInDEV(lazy); } + if (request.status === ABORTING) { + // lazy initializers are user code and could abort during render + // we don't wan to return any value resolved from the lazy initializer + // if it aborts so we interrupt rendering here + throw AbortSigil; + } + { var _debugInfo = lazy._debugInfo; @@ -3789,6 +3857,7 @@ function retryTask(request, task) { } var prevDebugID = debugID; + task.status = RENDERING; try { // Track the root so we know that we have to emit this object even though it @@ -3845,14 +3914,35 @@ function retryTask(request, task) { if (typeof x === 'object' && x !== null) { // $FlowFixMe[method-unbinding] if (typeof x.then === 'function') { - // Something suspended again, let's pick it back up later. + if (request.status === ABORTING) { + request.abortableTasks.delete(task); + task.status = ABORTED; + var errorId = request.fatalError; + var model = stringify(serializeByValueID(errorId)); + emitModelChunk(request, task.id, model); + return; + } // Something suspended again, let's pick it back up later. + + + task.status = PENDING$1; + task.thenableState = getThenableStateAfterSuspending(); var ping = task.ping; x.then(ping, ping); - task.thenableState = getThenableStateAfterSuspending(); return; } } + if (x === AbortSigil) { + request.abortableTasks.delete(task); + task.status = ABORTED; + var _errorId3 = request.fatalError; + + var _model = stringify(serializeByValueID(_errorId3)); + + emitModelChunk(request, task.id, _model); + return; + } + request.abortableTasks.delete(task); task.status = ERRORED$1; var digest = logRecoverableError(request, x); @@ -3914,6 +4004,11 @@ function performWork(request) { } function abortTask(task, request, errorId) { + if (task.status === RENDERING) { + // This task will be aborted by the render + return; + } + task.status = ABORTED; // Instead of emitting an error per task.id, we emit a model that only // has a single value referencing the error. @@ -4006,6 +4101,7 @@ function flushCompletedChunks(request, destination) { if (request.pendingChunks === 0) { + request.status = CLOSED; close$1(destination); request.destination = null; } @@ -4030,10 +4126,14 @@ function enqueueFlush(request) { request.pingedTasks.length === 0 && // If there is no destination there is nothing we can flush to. A flush will // happen when we start flowing again request.destination !== null) { - var destination = request.destination; request.flushScheduled = true; scheduleWork(function () { - return flushCompletedChunks(request, destination); + request.flushScheduled = false; + var destination = request.destination; + + if (destination) { + flushCompletedChunks(request, destination); + } }); } } @@ -4069,15 +4169,17 @@ function stopFlowing(request) { function abort(request, reason) { try { + request.status = ABORTING; var abortableTasks = request.abortableTasks; // We have tasks to abort. We'll emit one error row and then emit a reference // to that row from every row that's still remaining. if (abortableTasks.size > 0) { request.pendingChunks++; var errorId = request.nextChunkId++; + request.fatalError = errorId; var postponeInstance; if (enablePostpone && typeof reason === 'object' && reason !== null && reason.$$typeof === REACT_POSTPONE_TYPE) ; else { - var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason; + var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : typeof reason === 'object' && reason !== null && typeof reason.then === 'function' ? new Error('The render was aborted by the server with a promise.') : reason; var digest = logRecoverableError(request, error); emitErrorChunk(request, errorId, digest, error); } @@ -4094,7 +4196,7 @@ function abort(request, reason) { var _error; if (enablePostpone && typeof reason === 'object' && reason !== null && reason.$$typeof === REACT_POSTPONE_TYPE) ; else { - _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason; + _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : typeof reason === 'object' && reason !== null && typeof reason.then === 'function' ? new Error('The render was aborted by the server with a promise.') : reason; } abortListeners.forEach(function (callback) { diff --git a/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.js b/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.js index 69d67b0581f68..a16e1a773eabc 100644 --- a/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.js +++ b/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.js @@ -10,7 +10,21 @@ "use strict"; var ReactDOM = require("react-dom"), - React = require("react"), + React = require("react"); +function handleErrorInNextTick(error) { + setTimeout(function () { + throw error; + }); +} +var LocalPromise = Promise, + scheduleMicrotask = + "function" === typeof queueMicrotask + ? queueMicrotask + : function (callback) { + LocalPromise.resolve(null) + .then(callback) + .catch(handleErrorInNextTick); + }, currentView = null, writtenBytes = 0; function writeChunkAndReturn(destination, chunk) { @@ -677,7 +691,8 @@ if (!ReactSharedInternalsServer) 'The "react" package in this environment is not configured correctly. The "react-server" condition must be enabled in any environment that runs React Server Components.' ); var ObjectPrototype = Object.prototype, - stringify = JSON.stringify; + stringify = JSON.stringify, + AbortSigil = {}; function defaultErrorHandler(error) { console.error(error); } @@ -761,6 +776,14 @@ function serializeThenable(request, task, thenable) { newTask.id ); default: + if (1 === request.status) + return ( + (newTask.status = 3), + (task = stringify(serializeByValueID(request.fatalError))), + emitModelChunk(request, newTask.id, task), + request.abortableTasks.delete(newTask), + newTask.id + ); "string" !== typeof thenable.status && ((thenable.status = "pending"), thenable.then( @@ -947,6 +970,7 @@ function renderFunctionComponent(request, task, key, Component, props) { thenableIndexCounter = 0; thenableState = prevThenableState; Component = Component(props, void 0); + if (1 === request.status) throw AbortSigil; if ( "object" === typeof Component && null !== Component && @@ -1044,6 +1068,7 @@ function renderElement(request, task, type, key, ref, props) { case REACT_LAZY_TYPE: var init = type._init; type = init(type._payload); + if (1 === request.status) throw AbortSigil; return renderElement(request, task, type, key, ref, props); case REACT_FORWARD_REF_TYPE: return renderFunctionComponent(request, task, key, type.render, props); @@ -1060,9 +1085,9 @@ function pingTask(request, task) { pingedTasks.push(task); 1 === pingedTasks.length && ((request.flushScheduled = null !== request.destination), - setTimeout(function () { + scheduleMicrotask(function () { return performWork(request); - }, 0)); + })); } function createTask(request, model, keyPath, implicitSlot, abortSet) { request.pendingChunks++; @@ -1094,50 +1119,61 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) { ); } catch (thrownValue) { if ( - ((parentPropertyName = + ((parentPropertyName = task.model), + (parentPropertyName = + "object" === typeof parentPropertyName && + null !== parentPropertyName && + (parentPropertyName.$$typeof === REACT_ELEMENT_TYPE || + parentPropertyName.$$typeof === REACT_LAZY_TYPE)), + (value = thrownValue === SuspenseException ? getSuspendedThenable() : thrownValue), - (value = task.model), - (value = - "object" === typeof value && + "object" === typeof value && null !== value && - (value.$$typeof === REACT_ELEMENT_TYPE || - value.$$typeof === REACT_LAZY_TYPE)), - "object" === typeof parentPropertyName && - null !== parentPropertyName && - "function" === typeof parentPropertyName.then) - ) { - JSCompiler_inline_result = createTask( - request, - task.model, - task.keyPath, - task.implicitSlot, - request.abortableTasks - ); - var ping = JSCompiler_inline_result.ping; - parentPropertyName.then(ping, ping); - JSCompiler_inline_result.thenableState = - getThenableStateAfterSuspending(); - task.keyPath = prevKeyPath; - task.implicitSlot = prevImplicitSlot; - JSCompiler_inline_result = value - ? "$L" + JSCompiler_inline_result.id.toString(16) - : serializeByValueID(JSCompiler_inline_result.id); - } else if ( + "function" === typeof value.then) + ) + if (1 === request.status) + (task.status = 3), + (prevKeyPath = request.fatalError), + (JSCompiler_inline_result = parentPropertyName + ? "$L" + prevKeyPath.toString(16) + : serializeByValueID(prevKeyPath)); + else { + JSCompiler_inline_result = createTask( + request, + task.model, + task.keyPath, + task.implicitSlot, + request.abortableTasks + ); + var ping = JSCompiler_inline_result.ping; + value.then(ping, ping); + JSCompiler_inline_result.thenableState = + getThenableStateAfterSuspending(); + task.keyPath = prevKeyPath; + task.implicitSlot = prevImplicitSlot; + JSCompiler_inline_result = parentPropertyName + ? "$L" + JSCompiler_inline_result.id.toString(16) + : serializeByValueID(JSCompiler_inline_result.id); + } + else if (thrownValue === AbortSigil) + (task.status = 3), + (prevKeyPath = request.fatalError), + (JSCompiler_inline_result = parentPropertyName + ? "$L" + prevKeyPath.toString(16) + : serializeByValueID(prevKeyPath)); + else if ( ((task.keyPath = prevKeyPath), (task.implicitSlot = prevImplicitSlot), - value) + parentPropertyName) ) request.pendingChunks++, (prevKeyPath = request.nextChunkId++), - (prevImplicitSlot = logRecoverableError( - request, - parentPropertyName - )), + (prevImplicitSlot = logRecoverableError(request, value)), emitErrorChunk(request, prevKeyPath, prevImplicitSlot), (JSCompiler_inline_result = "$L" + prevKeyPath.toString(16)); - else throw parentPropertyName; + else throw value; } return JSCompiler_inline_result; }, @@ -1290,12 +1326,11 @@ function renderModelDestructive( parentPropertyName ); case REACT_LAZY_TYPE: - return ( - (task.thenableState = null), - (parentPropertyName = value._init), - (value = parentPropertyName(value._payload)), - renderModelDestructive(request, task, emptyRoot, "", value) - ); + task.thenableState = null; + parentPropertyName = value._init; + value = parentPropertyName(value._payload); + if (1 === request.status) throw AbortSigil; + return renderModelDestructive(request, task, emptyRoot, "", value); case REACT_LEGACY_ELEMENT_TYPE: throw Error( 'A React Element from an older version of React was rendered. This is not supported. It can happen if:\n- Multiple copies of the "react" package is used.\n- A library pre-bundled an old copy of "react" or "react/jsx-runtime".\n- A compiler tries to "inline" JSX instead of using the runtime.' @@ -1558,8 +1593,8 @@ function logRecoverableError(request, error) { } function fatalError(request, error) { null !== request.destination - ? ((request.status = 2), closeWithError(request.destination, error)) - : ((request.status = 1), (request.fatalError = error)); + ? ((request.status = 3), closeWithError(request.destination, error)) + : ((request.status = 2), (request.fatalError = error)); } function emitErrorChunk(request, id, digest) { digest = { digest: digest }; @@ -1628,7 +1663,8 @@ function emitChunk(request, task, value) { } var emptyRoot = {}; function retryTask(request, task) { - if (0 === task.status) + if (0 === task.status) { + task.status = 5; try { modelRoot = task.model; var resolvedModel = renderModelDestructive( @@ -1655,10 +1691,23 @@ function retryTask(request, task) { thrownValue === SuspenseException ? getSuspendedThenable() : thrownValue; - if ("object" === typeof x && null !== x && "function" === typeof x.then) { - var ping = task.ping; - x.then(ping, ping); - task.thenableState = getThenableStateAfterSuspending(); + if ("object" === typeof x && null !== x && "function" === typeof x.then) + if (1 === request.status) { + request.abortableTasks.delete(task); + task.status = 3; + var model = stringify(serializeByValueID(request.fatalError)); + emitModelChunk(request, task.id, model); + } else { + task.status = 0; + task.thenableState = getThenableStateAfterSuspending(); + var ping = task.ping; + x.then(ping, ping); + } + else if (x === AbortSigil) { + request.abortableTasks.delete(task); + task.status = 3; + var model$19 = stringify(serializeByValueID(request.fatalError)); + emitModelChunk(request, task.id, model$19); } else { request.abortableTasks.delete(task); task.status = 4; @@ -1667,6 +1716,7 @@ function retryTask(request, task) { } } finally { } + } } function performWork(request) { var prevDispatcher = ReactSharedInternalsServer.H; @@ -1724,7 +1774,7 @@ function flushCompletedChunks(request, destination) { (writtenBytes = 0)); } 0 === request.pendingChunks && - (destination.close(), (request.destination = null)); + ((request.status = 3), destination.close(), (request.destination = null)); } function startWork(request) { request.flushScheduled = null !== request.destination; @@ -1737,53 +1787,63 @@ function startWork(request) { }, 0); } function enqueueFlush(request) { - if ( - !1 === request.flushScheduled && + !1 === request.flushScheduled && 0 === request.pingedTasks.length && - null !== request.destination - ) { - var destination = request.destination; - request.flushScheduled = !0; + null !== request.destination && + ((request.flushScheduled = !0), setTimeout(function () { - return flushCompletedChunks(request, destination); - }, 0); - } + request.flushScheduled = !1; + var destination = request.destination; + destination && flushCompletedChunks(request, destination); + }, 0)); } function abort(request, reason) { try { + request.status = 1; var abortableTasks = request.abortableTasks; if (0 < abortableTasks.size) { request.pendingChunks++; - var errorId = request.nextChunkId++, - error = + var errorId = request.nextChunkId++; + request.fatalError = errorId; + var error = void 0 === reason ? Error("The render was aborted by the server without a reason.") + : "object" === typeof reason && + null !== reason && + "function" === typeof reason.then + ? Error("The render was aborted by the server with a promise.") : reason, digest = logRecoverableError(request, error); emitErrorChunk(request, errorId, digest, error); abortableTasks.forEach(function (task) { - task.status = 3; - var ref = serializeByValueID(errorId); - task = encodeReferenceChunk(request, task.id, ref); - request.completedErrorChunks.push(task); + if (5 !== task.status) { + task.status = 3; + var ref = serializeByValueID(errorId); + task = encodeReferenceChunk(request, task.id, ref); + request.completedErrorChunks.push(task); + } }); abortableTasks.clear(); } var abortListeners = request.abortListeners; if (0 < abortListeners.size) { - var error$22 = + var error$26 = void 0 === reason ? Error("The render was aborted by the server without a reason.") + : "object" === typeof reason && + null !== reason && + "function" === typeof reason.then + ? Error("The render was aborted by the server with a promise.") : reason; abortListeners.forEach(function (callback) { - return callback(error$22); + return callback(error$26); }); abortListeners.clear(); } null !== request.destination && flushCompletedChunks(request, request.destination); - } catch (error$23) { - logRecoverableError(request, error$23), fatalError(request, error$23); + } catch (error$27) { + logRecoverableError(request, error$27), fatalError(request, error$27); } } function resolveServerReference(bundlerConfig, id) { @@ -2226,8 +2286,8 @@ function parseReadableStream(response, reference, type) { (previousBlockedChunk = chunk)); } else { chunk = previousBlockedChunk; - var chunk$26 = createPendingChunk(response); - chunk$26.then( + var chunk$30 = createPendingChunk(response); + chunk$30.then( function (v) { return controller.enqueue(v); }, @@ -2235,10 +2295,10 @@ function parseReadableStream(response, reference, type) { return controller.error(e); } ); - previousBlockedChunk = chunk$26; + previousBlockedChunk = chunk$30; chunk.then(function () { - previousBlockedChunk === chunk$26 && (previousBlockedChunk = null); - resolveModelChunk(chunk$26, json, -1); + previousBlockedChunk === chunk$30 && (previousBlockedChunk = null); + resolveModelChunk(chunk$30, json, -1); }); } }, @@ -2606,9 +2666,9 @@ exports.renderToReadableStream = function (model, webpackMap, options) { startWork(request); }, pull: function (controller) { - if (1 === request.status) - (request.status = 2), closeWithError(controller, request.fatalError); - else if (2 !== request.status && null === request.destination) { + if (2 === request.status) + (request.status = 3), closeWithError(controller, request.fatalError); + else if (3 !== request.status && null === request.destination) { request.destination = controller; try { flushCompletedChunks(request, controller); diff --git a/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js b/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js index 38c223f4f56c1..0d7a339ea8e18 100644 --- a/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +++ b/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js @@ -100,6 +100,7 @@ function printWarning(level, format, args, currentStack) { function scheduleWork(callback) { setImmediate(callback); } +var scheduleMicrotask = queueMicrotask; function flushBuffered(destination) { // If we don't have any more data to send right now. // Flush whatever is in the buffer to the wire. @@ -1632,6 +1633,8 @@ var PENDING$1 = 0; var COMPLETED = 1; var ABORTED = 3; var ERRORED$1 = 4; +var RENDERING = 5; +var AbortSigil = {}; function defaultErrorHandler(error) { console['error'](error); // Don't transform to our wrapper @@ -1641,8 +1644,9 @@ function defaultPostponeHandler(reason) {// Noop } var OPEN = 0; -var CLOSING = 1; -var CLOSED = 2; +var ABORTING = 1; +var CLOSING = 2; +var CLOSED = 3; function createRequest(model, bundlerConfig, onError, identifierPrefix, onPostpone, environmentName, temporaryReferences) { if (ReactSharedInternals.A !== null && ReactSharedInternals.A !== DefaultAsyncDispatcher) { throw new Error('Currently React only supports one RSC renderer at a time.'); @@ -1740,6 +1744,16 @@ function serializeThenable(request, task, thenable) { default: { + if (request.status === ABORTING) { + // We can no longer accept any resolved values + newTask.status = ABORTED; + var errorId = request.fatalError; + var model = stringify(serializeByValueID(errorId)); + emitModelChunk(request, newTask.id, model); + request.abortableTasks.delete(newTask); + return newTask.id; + } + if (typeof thenable.status === 'string') { // Only instrument the thenable if the status if not defined. If // it's defined, but an unknown value, assume it's been instrumented by @@ -2114,6 +2128,13 @@ validated) // DEV-only result = callComponentInDEV(Component, props, componentDebugInfo); } + if (request.status === ABORTING) { + // If we aborted during rendering we should interrupt the render but + // we don't need to provide an error because the renderer will encode + // the abort error as the reason. + throw AbortSigil; + } + if (typeof result === 'object' && result !== null && !isClientReference(result)) { if (typeof result.then === 'function') { // When the return value is in children position we can resolve it immediately, @@ -2455,6 +2476,13 @@ validated) // DEV only wrappedType = callLazyInitInDEV(type); } + if (request.status === ABORTING) { + // lazy initializers are user code and could abort during render + // we don't wan to return any value resolved from the lazy initializer + // if it aborts so we interrupt rendering here + throw AbortSigil; + } + return renderElement(request, task, wrappedType, key, ref, props, owner); } @@ -2479,7 +2507,7 @@ function pingTask(request, task) { if (pingedTasks.length === 1) { request.flushScheduled = request.destination !== null; - scheduleWork(function () { + scheduleMicrotask(function () { return performWork(request); }); } @@ -2777,21 +2805,32 @@ function renderModel(request, task, parent, key, value) { try { return renderModelDestructive(request, task, parent, key, value); } catch (thrownValue) { + // If the suspended/errored value was an element or lazy it can be reduced + // to a lazy reference, so that it doesn't error the parent. + var model = task.model; + var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE); var x = thrownValue === SuspenseException ? // This is a special type of exception used for Suspense. For historical // reasons, the rest of the Suspense implementation expects the thrown // value to be a thenable, because before `use` existed that was the // (unstable) API for suspending. This implementation detail can change // later, once we deprecate the old API in favor of `use`. - getSuspendedThenable() : thrownValue; // If the suspended/errored value was an element or lazy it can be reduced - // to a lazy reference, so that it doesn't error the parent. - - var model = task.model; - var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE); + getSuspendedThenable() : thrownValue; if (typeof x === 'object' && x !== null) { // $FlowFixMe[method-unbinding] if (typeof x.then === 'function') { - // Something suspended, we'll need to create a new task and resolve it later. + if (request.status === ABORTING) { + task.status = ABORTED; + var errorId = request.fatalError; + + if (wasReactNode) { + return serializeLazyID(errorId); + } + + return serializeByValueID(errorId); + } // Something suspended, we'll need to create a new task and resolve it later. + + var newTask = createTask(request, task.model, task.keyPath, task.implicitSlot, request.abortableTasks); var ping = newTask.ping; x.then(ping, ping); @@ -2807,6 +2846,17 @@ function renderModel(request, task, parent, key, value) { return serializeByValueID(newTask.id); } + } + + if (thrownValue === AbortSigil) { + task.status = ABORTED; + var _errorId = request.fatalError; + + if (wasReactNode) { + return serializeLazyID(_errorId); + } + + return serializeByValueID(_errorId); } // Restore the context. We assume that this will be restored by the inner // functions in case nothing throws so we don't use "finally" here. @@ -2819,10 +2869,12 @@ function renderModel(request, task, parent, key, value) { // We'll replace this element with a lazy reference that throws on the client // once it gets rendered. request.pendingChunks++; - var errorId = request.nextChunkId++; + + var _errorId2 = request.nextChunkId++; + var digest = logRecoverableError(request, x); - emitErrorChunk(request, errorId, digest, x); - return serializeLazyID(errorId); + emitErrorChunk(request, _errorId2, digest, x); + return serializeLazyID(_errorId2); } // Something errored but it was not in a React Node. There's no need to serialize // it by value because it'll just error the whole parent row anyway so we can // just stop any siblings and error the whole parent row. @@ -2926,6 +2978,13 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value resolvedModel = callLazyInitInDEV(lazy); } + if (request.status === ABORTING) { + // lazy initializers are user code and could abort during render + // we don't wan to return any value resolved from the lazy initializer + // if it aborts so we interrupt rendering here + throw AbortSigil; + } + { var _debugInfo = lazy._debugInfo; @@ -3836,6 +3895,7 @@ function retryTask(request, task) { } var prevDebugID = debugID; + task.status = RENDERING; try { // Track the root so we know that we have to emit this object even though it @@ -3892,14 +3952,35 @@ function retryTask(request, task) { if (typeof x === 'object' && x !== null) { // $FlowFixMe[method-unbinding] if (typeof x.then === 'function') { - // Something suspended again, let's pick it back up later. + if (request.status === ABORTING) { + request.abortableTasks.delete(task); + task.status = ABORTED; + var errorId = request.fatalError; + var model = stringify(serializeByValueID(errorId)); + emitModelChunk(request, task.id, model); + return; + } // Something suspended again, let's pick it back up later. + + + task.status = PENDING$1; + task.thenableState = getThenableStateAfterSuspending(); var ping = task.ping; x.then(ping, ping); - task.thenableState = getThenableStateAfterSuspending(); return; } } + if (x === AbortSigil) { + request.abortableTasks.delete(task); + task.status = ABORTED; + var _errorId3 = request.fatalError; + + var _model = stringify(serializeByValueID(_errorId3)); + + emitModelChunk(request, task.id, _model); + return; + } + request.abortableTasks.delete(task); task.status = ERRORED$1; var digest = logRecoverableError(request, x); @@ -3961,6 +4042,11 @@ function performWork(request) { } function abortTask(task, request, errorId) { + if (task.status === RENDERING) { + // This task will be aborted by the render + return; + } + task.status = ABORTED; // Instead of emitting an error per task.id, we emit a model that only // has a single value referencing the error. @@ -4055,6 +4141,7 @@ function flushCompletedChunks(request, destination) { if (request.pendingChunks === 0) { + request.status = CLOSED; close$1(destination); request.destination = null; } @@ -4075,10 +4162,14 @@ function enqueueFlush(request) { request.pingedTasks.length === 0 && // If there is no destination there is nothing we can flush to. A flush will // happen when we start flowing again request.destination !== null) { - var destination = request.destination; request.flushScheduled = true; scheduleWork(function () { - return flushCompletedChunks(request, destination); + request.flushScheduled = false; + var destination = request.destination; + + if (destination) { + flushCompletedChunks(request, destination); + } }); } } @@ -4114,15 +4205,17 @@ function stopFlowing(request) { function abort(request, reason) { try { + request.status = ABORTING; var abortableTasks = request.abortableTasks; // We have tasks to abort. We'll emit one error row and then emit a reference // to that row from every row that's still remaining. if (abortableTasks.size > 0) { request.pendingChunks++; var errorId = request.nextChunkId++; + request.fatalError = errorId; var postponeInstance; if (enablePostpone && typeof reason === 'object' && reason !== null && reason.$$typeof === REACT_POSTPONE_TYPE) ; else { - var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason; + var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : typeof reason === 'object' && reason !== null && typeof reason.then === 'function' ? new Error('The render was aborted by the server with a promise.') : reason; var digest = logRecoverableError(request, error); emitErrorChunk(request, errorId, digest, error); } @@ -4139,7 +4232,7 @@ function abort(request, reason) { var _error; if (enablePostpone && typeof reason === 'object' && reason !== null && reason.$$typeof === REACT_POSTPONE_TYPE) ; else { - _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason; + _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : typeof reason === 'object' && reason !== null && typeof reason.then === 'function' ? new Error('The render was aborted by the server with a promise.') : reason; } abortListeners.forEach(function (callback) { diff --git a/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.js b/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.js index ba407bb97f91e..a889230048078 100644 --- a/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.js +++ b/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.js @@ -14,6 +14,7 @@ require("crypto"); var async_hooks = require("async_hooks"), ReactDOM = require("react-dom"), React = require("react"), + scheduleMicrotask = queueMicrotask, currentView = null, writtenBytes = 0, destinationHasCapacity = !0; @@ -707,7 +708,8 @@ if (!ReactSharedInternalsServer) 'The "react" package in this environment is not configured correctly. The "react-server" condition must be enabled in any environment that runs React Server Components.' ); var ObjectPrototype = Object.prototype, - stringify = JSON.stringify; + stringify = JSON.stringify, + AbortSigil = {}; function defaultErrorHandler(error) { console.error(error); } @@ -788,6 +790,14 @@ function serializeThenable(request, task, thenable) { newTask.id ); default: + if (1 === request.status) + return ( + (newTask.status = 3), + (task = stringify(serializeByValueID(request.fatalError))), + emitModelChunk(request, newTask.id, task), + request.abortableTasks.delete(newTask), + newTask.id + ); "string" !== typeof thenable.status && ((thenable.status = "pending"), thenable.then( @@ -973,6 +983,7 @@ function renderFunctionComponent(request, task, key, Component, props) { thenableIndexCounter = 0; thenableState = prevThenableState; Component = Component(props, void 0); + if (1 === request.status) throw AbortSigil; if ( "object" === typeof Component && null !== Component && @@ -1070,6 +1081,7 @@ function renderElement(request, task, type, key, ref, props) { case REACT_LAZY_TYPE: var init = type._init; type = init(type._payload); + if (1 === request.status) throw AbortSigil; return renderElement(request, task, type, key, ref, props); case REACT_FORWARD_REF_TYPE: return renderFunctionComponent(request, task, key, type.render, props); @@ -1086,7 +1098,7 @@ function pingTask(request, task) { pingedTasks.push(task); 1 === pingedTasks.length && ((request.flushScheduled = null !== request.destination), - setImmediate(function () { + scheduleMicrotask(function () { return performWork(request); })); } @@ -1120,50 +1132,61 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) { ); } catch (thrownValue) { if ( - ((parentPropertyName = + ((parentPropertyName = task.model), + (parentPropertyName = + "object" === typeof parentPropertyName && + null !== parentPropertyName && + (parentPropertyName.$$typeof === REACT_ELEMENT_TYPE || + parentPropertyName.$$typeof === REACT_LAZY_TYPE)), + (value = thrownValue === SuspenseException ? getSuspendedThenable() : thrownValue), - (value = task.model), - (value = - "object" === typeof value && + "object" === typeof value && null !== value && - (value.$$typeof === REACT_ELEMENT_TYPE || - value.$$typeof === REACT_LAZY_TYPE)), - "object" === typeof parentPropertyName && - null !== parentPropertyName && - "function" === typeof parentPropertyName.then) - ) { - JSCompiler_inline_result = createTask( - request, - task.model, - task.keyPath, - task.implicitSlot, - request.abortableTasks - ); - var ping = JSCompiler_inline_result.ping; - parentPropertyName.then(ping, ping); - JSCompiler_inline_result.thenableState = - getThenableStateAfterSuspending(); - task.keyPath = prevKeyPath; - task.implicitSlot = prevImplicitSlot; - JSCompiler_inline_result = value - ? "$L" + JSCompiler_inline_result.id.toString(16) - : serializeByValueID(JSCompiler_inline_result.id); - } else if ( + "function" === typeof value.then) + ) + if (1 === request.status) + (task.status = 3), + (prevKeyPath = request.fatalError), + (JSCompiler_inline_result = parentPropertyName + ? "$L" + prevKeyPath.toString(16) + : serializeByValueID(prevKeyPath)); + else { + JSCompiler_inline_result = createTask( + request, + task.model, + task.keyPath, + task.implicitSlot, + request.abortableTasks + ); + var ping = JSCompiler_inline_result.ping; + value.then(ping, ping); + JSCompiler_inline_result.thenableState = + getThenableStateAfterSuspending(); + task.keyPath = prevKeyPath; + task.implicitSlot = prevImplicitSlot; + JSCompiler_inline_result = parentPropertyName + ? "$L" + JSCompiler_inline_result.id.toString(16) + : serializeByValueID(JSCompiler_inline_result.id); + } + else if (thrownValue === AbortSigil) + (task.status = 3), + (prevKeyPath = request.fatalError), + (JSCompiler_inline_result = parentPropertyName + ? "$L" + prevKeyPath.toString(16) + : serializeByValueID(prevKeyPath)); + else if ( ((task.keyPath = prevKeyPath), (task.implicitSlot = prevImplicitSlot), - value) + parentPropertyName) ) request.pendingChunks++, (prevKeyPath = request.nextChunkId++), - (prevImplicitSlot = logRecoverableError( - request, - parentPropertyName - )), + (prevImplicitSlot = logRecoverableError(request, value)), emitErrorChunk(request, prevKeyPath, prevImplicitSlot), (JSCompiler_inline_result = "$L" + prevKeyPath.toString(16)); - else throw parentPropertyName; + else throw value; } return JSCompiler_inline_result; }, @@ -1314,12 +1337,11 @@ function renderModelDestructive( parentPropertyName ); case REACT_LAZY_TYPE: - return ( - (task.thenableState = null), - (parentPropertyName = value._init), - (value = parentPropertyName(value._payload)), - renderModelDestructive(request, task, emptyRoot, "", value) - ); + task.thenableState = null; + parentPropertyName = value._init; + value = parentPropertyName(value._payload); + if (1 === request.status) throw AbortSigil; + return renderModelDestructive(request, task, emptyRoot, "", value); case REACT_LEGACY_ELEMENT_TYPE: throw Error( 'A React Element from an older version of React was rendered. This is not supported. It can happen if:\n- Multiple copies of the "react" package is used.\n- A library pre-bundled an old copy of "react" or "react/jsx-runtime".\n- A compiler tries to "inline" JSX instead of using the runtime.' @@ -1579,14 +1601,18 @@ function logRecoverableError(request, error) { } function fatalError(request, error) { null !== request.destination - ? ((request.status = 2), request.destination.destroy(error)) - : ((request.status = 1), (request.fatalError = error)); + ? ((request.status = 3), request.destination.destroy(error)) + : ((request.status = 2), (request.fatalError = error)); } function emitErrorChunk(request, id, digest) { digest = { digest: digest }; id = id.toString(16) + ":E" + stringify(digest) + "\n"; request.completedErrorChunks.push(id); } +function emitModelChunk(request, id, json) { + id = id.toString(16) + ":" + json + "\n"; + request.completedRegularChunks.push(id); +} function emitTypedArrayChunk(request, id, tag, typedArray) { request.pendingChunks++; typedArray = new Uint8Array( @@ -1638,12 +1664,12 @@ function emitChunk(request, task, value) { : value instanceof DataView ? emitTypedArrayChunk(request, id, "V", value) : ((value = stringify(value, task.toJSON)), - (task = task.id.toString(16) + ":" + value + "\n"), - request.completedRegularChunks.push(task)); + emitModelChunk(request, task.id, value)); } var emptyRoot = {}; function retryTask(request, task) { - if (0 === task.status) + if (0 === task.status) { + task.status = 5; try { modelRoot = task.model; var resolvedModel = renderModelDestructive( @@ -1660,9 +1686,8 @@ function retryTask(request, task) { request.writtenObjects.set(resolvedModel, serializeByValueID(task.id)), emitChunk(request, task, resolvedModel); else { - var json = stringify(resolvedModel), - processedChunk = task.id.toString(16) + ":" + json + "\n"; - request.completedRegularChunks.push(processedChunk); + var json = stringify(resolvedModel); + emitModelChunk(request, task.id, json); } request.abortableTasks.delete(task); task.status = 1; @@ -1671,10 +1696,23 @@ function retryTask(request, task) { thrownValue === SuspenseException ? getSuspendedThenable() : thrownValue; - if ("object" === typeof x && null !== x && "function" === typeof x.then) { - var ping = task.ping; - x.then(ping, ping); - task.thenableState = getThenableStateAfterSuspending(); + if ("object" === typeof x && null !== x && "function" === typeof x.then) + if (1 === request.status) { + request.abortableTasks.delete(task); + task.status = 3; + var model = stringify(serializeByValueID(request.fatalError)); + emitModelChunk(request, task.id, model); + } else { + task.status = 0; + task.thenableState = getThenableStateAfterSuspending(); + var ping = task.ping; + x.then(ping, ping); + } + else if (x === AbortSigil) { + request.abortableTasks.delete(task); + task.status = 3; + var model$19 = stringify(serializeByValueID(request.fatalError)); + emitModelChunk(request, task.id, model$19); } else { request.abortableTasks.delete(task); task.status = 4; @@ -1683,6 +1721,7 @@ function retryTask(request, task) { } } finally { } + } } function performWork(request) { var prevDispatcher = ReactSharedInternalsServer.H; @@ -1764,7 +1803,7 @@ function flushCompletedChunks(request, destination) { } "function" === typeof destination.flush && destination.flush(); 0 === request.pendingChunks && - (destination.end(), (request.destination = null)); + ((request.status = 3), destination.end(), (request.destination = null)); } function startWork(request) { request.flushScheduled = null !== request.destination; @@ -1773,22 +1812,20 @@ function startWork(request) { }); } function enqueueFlush(request) { - if ( - !1 === request.flushScheduled && + !1 === request.flushScheduled && 0 === request.pingedTasks.length && - null !== request.destination - ) { - var destination = request.destination; - request.flushScheduled = !0; + null !== request.destination && + ((request.flushScheduled = !0), setImmediate(function () { - return flushCompletedChunks(request, destination); - }); - } + request.flushScheduled = !1; + var destination = request.destination; + destination && flushCompletedChunks(request, destination); + })); } function startFlowing(request, destination) { - if (1 === request.status) - (request.status = 2), destination.destroy(request.fatalError); - else if (2 !== request.status && null === request.destination) { + if (2 === request.status) + (request.status = 3), destination.destroy(request.fatalError); + else if (3 !== request.status && null === request.destination) { request.destination = destination; try { flushCompletedChunks(request, destination); @@ -1799,39 +1836,51 @@ function startFlowing(request, destination) { } function abort(request, reason) { try { + request.status = 1; var abortableTasks = request.abortableTasks; if (0 < abortableTasks.size) { request.pendingChunks++; - var errorId = request.nextChunkId++, - error = + var errorId = request.nextChunkId++; + request.fatalError = errorId; + var error = void 0 === reason ? Error("The render was aborted by the server without a reason.") + : "object" === typeof reason && + null !== reason && + "function" === typeof reason.then + ? Error("The render was aborted by the server with a promise.") : reason, digest = logRecoverableError(request, error); emitErrorChunk(request, errorId, digest, error); abortableTasks.forEach(function (task) { - task.status = 3; - var ref = serializeByValueID(errorId); - task = encodeReferenceChunk(request, task.id, ref); - request.completedErrorChunks.push(task); + if (5 !== task.status) { + task.status = 3; + var ref = serializeByValueID(errorId); + task = encodeReferenceChunk(request, task.id, ref); + request.completedErrorChunks.push(task); + } }); abortableTasks.clear(); } var abortListeners = request.abortListeners; if (0 < abortListeners.size) { - var error$22 = + var error$26 = void 0 === reason ? Error("The render was aborted by the server without a reason.") + : "object" === typeof reason && + null !== reason && + "function" === typeof reason.then + ? Error("The render was aborted by the server with a promise.") : reason; abortListeners.forEach(function (callback) { - return callback(error$22); + return callback(error$26); }); abortListeners.clear(); } null !== request.destination && flushCompletedChunks(request, request.destination); - } catch (error$23) { - logRecoverableError(request, error$23), fatalError(request, error$23); + } catch (error$27) { + logRecoverableError(request, error$27), fatalError(request, error$27); } } function resolveServerReference(bundlerConfig, id) { @@ -2274,8 +2323,8 @@ function parseReadableStream(response, reference, type) { (previousBlockedChunk = chunk)); } else { chunk = previousBlockedChunk; - var chunk$26 = createPendingChunk(response); - chunk$26.then( + var chunk$30 = createPendingChunk(response); + chunk$30.then( function (v) { return controller.enqueue(v); }, @@ -2283,10 +2332,10 @@ function parseReadableStream(response, reference, type) { return controller.error(e); } ); - previousBlockedChunk = chunk$26; + previousBlockedChunk = chunk$30; chunk.then(function () { - previousBlockedChunk === chunk$26 && (previousBlockedChunk = null); - resolveModelChunk(chunk$26, json, -1); + previousBlockedChunk === chunk$30 && (previousBlockedChunk = null); + resolveModelChunk(chunk$30, json, -1); }); } }, @@ -2644,12 +2693,12 @@ exports.decodeReplyFromBusboy = function (busboyStream, webpackMap, options) { "React doesn't accept base64 encoded file uploads because we don't expect form data passed from a browser to ever encode data that way. If that's the wrong assumption, we can easily fix it." ); pendingFiles++; - var JSCompiler_object_inline_chunks_216 = []; + var JSCompiler_object_inline_chunks_201 = []; value.on("data", function (chunk) { - JSCompiler_object_inline_chunks_216.push(chunk); + JSCompiler_object_inline_chunks_201.push(chunk); }); value.on("end", function () { - var blob = new Blob(JSCompiler_object_inline_chunks_216, { + var blob = new Blob(JSCompiler_object_inline_chunks_201, { type: mimeType }); response._formData.append(name, blob, filename); diff --git a/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js b/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js index 5ee2f57659eed..51c1640f3f785 100644 --- a/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +++ b/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js @@ -100,6 +100,7 @@ function printWarning(level, format, args, currentStack) { function scheduleWork(callback) { setImmediate(callback); } +var scheduleMicrotask = queueMicrotask; function flushBuffered(destination) { // If we don't have any more data to send right now. // Flush whatever is in the buffer to the wire. @@ -1632,6 +1633,8 @@ var PENDING$1 = 0; var COMPLETED = 1; var ABORTED = 3; var ERRORED$1 = 4; +var RENDERING = 5; +var AbortSigil = {}; function defaultErrorHandler(error) { console['error'](error); // Don't transform to our wrapper @@ -1641,8 +1644,9 @@ function defaultPostponeHandler(reason) {// Noop } var OPEN = 0; -var CLOSING = 1; -var CLOSED = 2; +var ABORTING = 1; +var CLOSING = 2; +var CLOSED = 3; function createRequest(model, bundlerConfig, onError, identifierPrefix, onPostpone, environmentName, temporaryReferences) { if (ReactSharedInternals.A !== null && ReactSharedInternals.A !== DefaultAsyncDispatcher) { throw new Error('Currently React only supports one RSC renderer at a time.'); @@ -1740,6 +1744,16 @@ function serializeThenable(request, task, thenable) { default: { + if (request.status === ABORTING) { + // We can no longer accept any resolved values + newTask.status = ABORTED; + var errorId = request.fatalError; + var model = stringify(serializeByValueID(errorId)); + emitModelChunk(request, newTask.id, model); + request.abortableTasks.delete(newTask); + return newTask.id; + } + if (typeof thenable.status === 'string') { // Only instrument the thenable if the status if not defined. If // it's defined, but an unknown value, assume it's been instrumented by @@ -2114,6 +2128,13 @@ validated) // DEV-only result = callComponentInDEV(Component, props, componentDebugInfo); } + if (request.status === ABORTING) { + // If we aborted during rendering we should interrupt the render but + // we don't need to provide an error because the renderer will encode + // the abort error as the reason. + throw AbortSigil; + } + if (typeof result === 'object' && result !== null && !isClientReference(result)) { if (typeof result.then === 'function') { // When the return value is in children position we can resolve it immediately, @@ -2455,6 +2476,13 @@ validated) // DEV only wrappedType = callLazyInitInDEV(type); } + if (request.status === ABORTING) { + // lazy initializers are user code and could abort during render + // we don't wan to return any value resolved from the lazy initializer + // if it aborts so we interrupt rendering here + throw AbortSigil; + } + return renderElement(request, task, wrappedType, key, ref, props, owner); } @@ -2479,7 +2507,7 @@ function pingTask(request, task) { if (pingedTasks.length === 1) { request.flushScheduled = request.destination !== null; - scheduleWork(function () { + scheduleMicrotask(function () { return performWork(request); }); } @@ -2777,21 +2805,32 @@ function renderModel(request, task, parent, key, value) { try { return renderModelDestructive(request, task, parent, key, value); } catch (thrownValue) { + // If the suspended/errored value was an element or lazy it can be reduced + // to a lazy reference, so that it doesn't error the parent. + var model = task.model; + var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE); var x = thrownValue === SuspenseException ? // This is a special type of exception used for Suspense. For historical // reasons, the rest of the Suspense implementation expects the thrown // value to be a thenable, because before `use` existed that was the // (unstable) API for suspending. This implementation detail can change // later, once we deprecate the old API in favor of `use`. - getSuspendedThenable() : thrownValue; // If the suspended/errored value was an element or lazy it can be reduced - // to a lazy reference, so that it doesn't error the parent. - - var model = task.model; - var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE); + getSuspendedThenable() : thrownValue; if (typeof x === 'object' && x !== null) { // $FlowFixMe[method-unbinding] if (typeof x.then === 'function') { - // Something suspended, we'll need to create a new task and resolve it later. + if (request.status === ABORTING) { + task.status = ABORTED; + var errorId = request.fatalError; + + if (wasReactNode) { + return serializeLazyID(errorId); + } + + return serializeByValueID(errorId); + } // Something suspended, we'll need to create a new task and resolve it later. + + var newTask = createTask(request, task.model, task.keyPath, task.implicitSlot, request.abortableTasks); var ping = newTask.ping; x.then(ping, ping); @@ -2807,6 +2846,17 @@ function renderModel(request, task, parent, key, value) { return serializeByValueID(newTask.id); } + } + + if (thrownValue === AbortSigil) { + task.status = ABORTED; + var _errorId = request.fatalError; + + if (wasReactNode) { + return serializeLazyID(_errorId); + } + + return serializeByValueID(_errorId); } // Restore the context. We assume that this will be restored by the inner // functions in case nothing throws so we don't use "finally" here. @@ -2819,10 +2869,12 @@ function renderModel(request, task, parent, key, value) { // We'll replace this element with a lazy reference that throws on the client // once it gets rendered. request.pendingChunks++; - var errorId = request.nextChunkId++; + + var _errorId2 = request.nextChunkId++; + var digest = logRecoverableError(request, x); - emitErrorChunk(request, errorId, digest, x); - return serializeLazyID(errorId); + emitErrorChunk(request, _errorId2, digest, x); + return serializeLazyID(_errorId2); } // Something errored but it was not in a React Node. There's no need to serialize // it by value because it'll just error the whole parent row anyway so we can // just stop any siblings and error the whole parent row. @@ -2926,6 +2978,13 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value resolvedModel = callLazyInitInDEV(lazy); } + if (request.status === ABORTING) { + // lazy initializers are user code and could abort during render + // we don't wan to return any value resolved from the lazy initializer + // if it aborts so we interrupt rendering here + throw AbortSigil; + } + { var _debugInfo = lazy._debugInfo; @@ -3836,6 +3895,7 @@ function retryTask(request, task) { } var prevDebugID = debugID; + task.status = RENDERING; try { // Track the root so we know that we have to emit this object even though it @@ -3892,14 +3952,35 @@ function retryTask(request, task) { if (typeof x === 'object' && x !== null) { // $FlowFixMe[method-unbinding] if (typeof x.then === 'function') { - // Something suspended again, let's pick it back up later. + if (request.status === ABORTING) { + request.abortableTasks.delete(task); + task.status = ABORTED; + var errorId = request.fatalError; + var model = stringify(serializeByValueID(errorId)); + emitModelChunk(request, task.id, model); + return; + } // Something suspended again, let's pick it back up later. + + + task.status = PENDING$1; + task.thenableState = getThenableStateAfterSuspending(); var ping = task.ping; x.then(ping, ping); - task.thenableState = getThenableStateAfterSuspending(); return; } } + if (x === AbortSigil) { + request.abortableTasks.delete(task); + task.status = ABORTED; + var _errorId3 = request.fatalError; + + var _model = stringify(serializeByValueID(_errorId3)); + + emitModelChunk(request, task.id, _model); + return; + } + request.abortableTasks.delete(task); task.status = ERRORED$1; var digest = logRecoverableError(request, x); @@ -3961,6 +4042,11 @@ function performWork(request) { } function abortTask(task, request, errorId) { + if (task.status === RENDERING) { + // This task will be aborted by the render + return; + } + task.status = ABORTED; // Instead of emitting an error per task.id, we emit a model that only // has a single value referencing the error. @@ -4055,6 +4141,7 @@ function flushCompletedChunks(request, destination) { if (request.pendingChunks === 0) { + request.status = CLOSED; close$1(destination); request.destination = null; } @@ -4075,10 +4162,14 @@ function enqueueFlush(request) { request.pingedTasks.length === 0 && // If there is no destination there is nothing we can flush to. A flush will // happen when we start flowing again request.destination !== null) { - var destination = request.destination; request.flushScheduled = true; scheduleWork(function () { - return flushCompletedChunks(request, destination); + request.flushScheduled = false; + var destination = request.destination; + + if (destination) { + flushCompletedChunks(request, destination); + } }); } } @@ -4114,15 +4205,17 @@ function stopFlowing(request) { function abort(request, reason) { try { + request.status = ABORTING; var abortableTasks = request.abortableTasks; // We have tasks to abort. We'll emit one error row and then emit a reference // to that row from every row that's still remaining. if (abortableTasks.size > 0) { request.pendingChunks++; var errorId = request.nextChunkId++; + request.fatalError = errorId; var postponeInstance; if (enablePostpone && typeof reason === 'object' && reason !== null && reason.$$typeof === REACT_POSTPONE_TYPE) ; else { - var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason; + var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : typeof reason === 'object' && reason !== null && typeof reason.then === 'function' ? new Error('The render was aborted by the server with a promise.') : reason; var digest = logRecoverableError(request, error); emitErrorChunk(request, errorId, digest, error); } @@ -4139,7 +4232,7 @@ function abort(request, reason) { var _error; if (enablePostpone && typeof reason === 'object' && reason !== null && reason.$$typeof === REACT_POSTPONE_TYPE) ; else { - _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason; + _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : typeof reason === 'object' && reason !== null && typeof reason.then === 'function' ? new Error('The render was aborted by the server with a promise.') : reason; } abortListeners.forEach(function (callback) { diff --git a/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.js b/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.js index 9c958f5708a3c..3937e96796abd 100644 --- a/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.js +++ b/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.js @@ -14,6 +14,7 @@ require("crypto"); var async_hooks = require("async_hooks"), ReactDOM = require("react-dom"), React = require("react"), + scheduleMicrotask = queueMicrotask, currentView = null, writtenBytes = 0, destinationHasCapacity = !0; @@ -707,7 +708,8 @@ if (!ReactSharedInternalsServer) 'The "react" package in this environment is not configured correctly. The "react-server" condition must be enabled in any environment that runs React Server Components.' ); var ObjectPrototype = Object.prototype, - stringify = JSON.stringify; + stringify = JSON.stringify, + AbortSigil = {}; function defaultErrorHandler(error) { console.error(error); } @@ -788,6 +790,14 @@ function serializeThenable(request, task, thenable) { newTask.id ); default: + if (1 === request.status) + return ( + (newTask.status = 3), + (task = stringify(serializeByValueID(request.fatalError))), + emitModelChunk(request, newTask.id, task), + request.abortableTasks.delete(newTask), + newTask.id + ); "string" !== typeof thenable.status && ((thenable.status = "pending"), thenable.then( @@ -973,6 +983,7 @@ function renderFunctionComponent(request, task, key, Component, props) { thenableIndexCounter = 0; thenableState = prevThenableState; Component = Component(props, void 0); + if (1 === request.status) throw AbortSigil; if ( "object" === typeof Component && null !== Component && @@ -1070,6 +1081,7 @@ function renderElement(request, task, type, key, ref, props) { case REACT_LAZY_TYPE: var init = type._init; type = init(type._payload); + if (1 === request.status) throw AbortSigil; return renderElement(request, task, type, key, ref, props); case REACT_FORWARD_REF_TYPE: return renderFunctionComponent(request, task, key, type.render, props); @@ -1086,7 +1098,7 @@ function pingTask(request, task) { pingedTasks.push(task); 1 === pingedTasks.length && ((request.flushScheduled = null !== request.destination), - setImmediate(function () { + scheduleMicrotask(function () { return performWork(request); })); } @@ -1120,50 +1132,61 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) { ); } catch (thrownValue) { if ( - ((parentPropertyName = + ((parentPropertyName = task.model), + (parentPropertyName = + "object" === typeof parentPropertyName && + null !== parentPropertyName && + (parentPropertyName.$$typeof === REACT_ELEMENT_TYPE || + parentPropertyName.$$typeof === REACT_LAZY_TYPE)), + (value = thrownValue === SuspenseException ? getSuspendedThenable() : thrownValue), - (value = task.model), - (value = - "object" === typeof value && + "object" === typeof value && null !== value && - (value.$$typeof === REACT_ELEMENT_TYPE || - value.$$typeof === REACT_LAZY_TYPE)), - "object" === typeof parentPropertyName && - null !== parentPropertyName && - "function" === typeof parentPropertyName.then) - ) { - JSCompiler_inline_result = createTask( - request, - task.model, - task.keyPath, - task.implicitSlot, - request.abortableTasks - ); - var ping = JSCompiler_inline_result.ping; - parentPropertyName.then(ping, ping); - JSCompiler_inline_result.thenableState = - getThenableStateAfterSuspending(); - task.keyPath = prevKeyPath; - task.implicitSlot = prevImplicitSlot; - JSCompiler_inline_result = value - ? "$L" + JSCompiler_inline_result.id.toString(16) - : serializeByValueID(JSCompiler_inline_result.id); - } else if ( + "function" === typeof value.then) + ) + if (1 === request.status) + (task.status = 3), + (prevKeyPath = request.fatalError), + (JSCompiler_inline_result = parentPropertyName + ? "$L" + prevKeyPath.toString(16) + : serializeByValueID(prevKeyPath)); + else { + JSCompiler_inline_result = createTask( + request, + task.model, + task.keyPath, + task.implicitSlot, + request.abortableTasks + ); + var ping = JSCompiler_inline_result.ping; + value.then(ping, ping); + JSCompiler_inline_result.thenableState = + getThenableStateAfterSuspending(); + task.keyPath = prevKeyPath; + task.implicitSlot = prevImplicitSlot; + JSCompiler_inline_result = parentPropertyName + ? "$L" + JSCompiler_inline_result.id.toString(16) + : serializeByValueID(JSCompiler_inline_result.id); + } + else if (thrownValue === AbortSigil) + (task.status = 3), + (prevKeyPath = request.fatalError), + (JSCompiler_inline_result = parentPropertyName + ? "$L" + prevKeyPath.toString(16) + : serializeByValueID(prevKeyPath)); + else if ( ((task.keyPath = prevKeyPath), (task.implicitSlot = prevImplicitSlot), - value) + parentPropertyName) ) request.pendingChunks++, (prevKeyPath = request.nextChunkId++), - (prevImplicitSlot = logRecoverableError( - request, - parentPropertyName - )), + (prevImplicitSlot = logRecoverableError(request, value)), emitErrorChunk(request, prevKeyPath, prevImplicitSlot), (JSCompiler_inline_result = "$L" + prevKeyPath.toString(16)); - else throw parentPropertyName; + else throw value; } return JSCompiler_inline_result; }, @@ -1314,12 +1337,11 @@ function renderModelDestructive( parentPropertyName ); case REACT_LAZY_TYPE: - return ( - (task.thenableState = null), - (parentPropertyName = value._init), - (value = parentPropertyName(value._payload)), - renderModelDestructive(request, task, emptyRoot, "", value) - ); + task.thenableState = null; + parentPropertyName = value._init; + value = parentPropertyName(value._payload); + if (1 === request.status) throw AbortSigil; + return renderModelDestructive(request, task, emptyRoot, "", value); case REACT_LEGACY_ELEMENT_TYPE: throw Error( 'A React Element from an older version of React was rendered. This is not supported. It can happen if:\n- Multiple copies of the "react" package is used.\n- A library pre-bundled an old copy of "react" or "react/jsx-runtime".\n- A compiler tries to "inline" JSX instead of using the runtime.' @@ -1579,14 +1601,18 @@ function logRecoverableError(request, error) { } function fatalError(request, error) { null !== request.destination - ? ((request.status = 2), request.destination.destroy(error)) - : ((request.status = 1), (request.fatalError = error)); + ? ((request.status = 3), request.destination.destroy(error)) + : ((request.status = 2), (request.fatalError = error)); } function emitErrorChunk(request, id, digest) { digest = { digest: digest }; id = id.toString(16) + ":E" + stringify(digest) + "\n"; request.completedErrorChunks.push(id); } +function emitModelChunk(request, id, json) { + id = id.toString(16) + ":" + json + "\n"; + request.completedRegularChunks.push(id); +} function emitTypedArrayChunk(request, id, tag, typedArray) { request.pendingChunks++; typedArray = new Uint8Array( @@ -1638,12 +1664,12 @@ function emitChunk(request, task, value) { : value instanceof DataView ? emitTypedArrayChunk(request, id, "V", value) : ((value = stringify(value, task.toJSON)), - (task = task.id.toString(16) + ":" + value + "\n"), - request.completedRegularChunks.push(task)); + emitModelChunk(request, task.id, value)); } var emptyRoot = {}; function retryTask(request, task) { - if (0 === task.status) + if (0 === task.status) { + task.status = 5; try { modelRoot = task.model; var resolvedModel = renderModelDestructive( @@ -1660,9 +1686,8 @@ function retryTask(request, task) { request.writtenObjects.set(resolvedModel, serializeByValueID(task.id)), emitChunk(request, task, resolvedModel); else { - var json = stringify(resolvedModel), - processedChunk = task.id.toString(16) + ":" + json + "\n"; - request.completedRegularChunks.push(processedChunk); + var json = stringify(resolvedModel); + emitModelChunk(request, task.id, json); } request.abortableTasks.delete(task); task.status = 1; @@ -1671,10 +1696,23 @@ function retryTask(request, task) { thrownValue === SuspenseException ? getSuspendedThenable() : thrownValue; - if ("object" === typeof x && null !== x && "function" === typeof x.then) { - var ping = task.ping; - x.then(ping, ping); - task.thenableState = getThenableStateAfterSuspending(); + if ("object" === typeof x && null !== x && "function" === typeof x.then) + if (1 === request.status) { + request.abortableTasks.delete(task); + task.status = 3; + var model = stringify(serializeByValueID(request.fatalError)); + emitModelChunk(request, task.id, model); + } else { + task.status = 0; + task.thenableState = getThenableStateAfterSuspending(); + var ping = task.ping; + x.then(ping, ping); + } + else if (x === AbortSigil) { + request.abortableTasks.delete(task); + task.status = 3; + var model$19 = stringify(serializeByValueID(request.fatalError)); + emitModelChunk(request, task.id, model$19); } else { request.abortableTasks.delete(task); task.status = 4; @@ -1683,6 +1721,7 @@ function retryTask(request, task) { } } finally { } + } } function performWork(request) { var prevDispatcher = ReactSharedInternalsServer.H; @@ -1764,7 +1803,7 @@ function flushCompletedChunks(request, destination) { } "function" === typeof destination.flush && destination.flush(); 0 === request.pendingChunks && - (destination.end(), (request.destination = null)); + ((request.status = 3), destination.end(), (request.destination = null)); } function startWork(request) { request.flushScheduled = null !== request.destination; @@ -1773,22 +1812,20 @@ function startWork(request) { }); } function enqueueFlush(request) { - if ( - !1 === request.flushScheduled && + !1 === request.flushScheduled && 0 === request.pingedTasks.length && - null !== request.destination - ) { - var destination = request.destination; - request.flushScheduled = !0; + null !== request.destination && + ((request.flushScheduled = !0), setImmediate(function () { - return flushCompletedChunks(request, destination); - }); - } + request.flushScheduled = !1; + var destination = request.destination; + destination && flushCompletedChunks(request, destination); + })); } function startFlowing(request, destination) { - if (1 === request.status) - (request.status = 2), destination.destroy(request.fatalError); - else if (2 !== request.status && null === request.destination) { + if (2 === request.status) + (request.status = 3), destination.destroy(request.fatalError); + else if (3 !== request.status && null === request.destination) { request.destination = destination; try { flushCompletedChunks(request, destination); @@ -1799,39 +1836,51 @@ function startFlowing(request, destination) { } function abort(request, reason) { try { + request.status = 1; var abortableTasks = request.abortableTasks; if (0 < abortableTasks.size) { request.pendingChunks++; - var errorId = request.nextChunkId++, - error = + var errorId = request.nextChunkId++; + request.fatalError = errorId; + var error = void 0 === reason ? Error("The render was aborted by the server without a reason.") + : "object" === typeof reason && + null !== reason && + "function" === typeof reason.then + ? Error("The render was aborted by the server with a promise.") : reason, digest = logRecoverableError(request, error); emitErrorChunk(request, errorId, digest, error); abortableTasks.forEach(function (task) { - task.status = 3; - var ref = serializeByValueID(errorId); - task = encodeReferenceChunk(request, task.id, ref); - request.completedErrorChunks.push(task); + if (5 !== task.status) { + task.status = 3; + var ref = serializeByValueID(errorId); + task = encodeReferenceChunk(request, task.id, ref); + request.completedErrorChunks.push(task); + } }); abortableTasks.clear(); } var abortListeners = request.abortListeners; if (0 < abortListeners.size) { - var error$22 = + var error$26 = void 0 === reason ? Error("The render was aborted by the server without a reason.") + : "object" === typeof reason && + null !== reason && + "function" === typeof reason.then + ? Error("The render was aborted by the server with a promise.") : reason; abortListeners.forEach(function (callback) { - return callback(error$22); + return callback(error$26); }); abortListeners.clear(); } null !== request.destination && flushCompletedChunks(request, request.destination); - } catch (error$23) { - logRecoverableError(request, error$23), fatalError(request, error$23); + } catch (error$27) { + logRecoverableError(request, error$27), fatalError(request, error$27); } } function resolveServerReference(bundlerConfig, id) { @@ -2242,8 +2291,8 @@ function parseReadableStream(response, reference, type) { (previousBlockedChunk = chunk)); } else { chunk = previousBlockedChunk; - var chunk$26 = createPendingChunk(response); - chunk$26.then( + var chunk$30 = createPendingChunk(response); + chunk$30.then( function (v) { return controller.enqueue(v); }, @@ -2251,10 +2300,10 @@ function parseReadableStream(response, reference, type) { return controller.error(e); } ); - previousBlockedChunk = chunk$26; + previousBlockedChunk = chunk$30; chunk.then(function () { - previousBlockedChunk === chunk$26 && (previousBlockedChunk = null); - resolveModelChunk(chunk$26, json, -1); + previousBlockedChunk === chunk$30 && (previousBlockedChunk = null); + resolveModelChunk(chunk$30, json, -1); }); } }, @@ -2612,12 +2661,12 @@ exports.decodeReplyFromBusboy = function (busboyStream, webpackMap, options) { "React doesn't accept base64 encoded file uploads because we don't expect form data passed from a browser to ever encode data that way. If that's the wrong assumption, we can easily fix it." ); pendingFiles++; - var JSCompiler_object_inline_chunks_216 = []; + var JSCompiler_object_inline_chunks_201 = []; value.on("data", function (chunk) { - JSCompiler_object_inline_chunks_216.push(chunk); + JSCompiler_object_inline_chunks_201.push(chunk); }); value.on("end", function () { - var blob = new Blob(JSCompiler_object_inline_chunks_216, { + var blob = new Blob(JSCompiler_object_inline_chunks_201, { type: mimeType }); response._formData.append(name, blob, filename); diff --git a/packages/next/src/compiled/react-server-dom-webpack/package.json b/packages/next/src/compiled/react-server-dom-webpack/package.json index 71bd27598a5b4..def1d9eb8ec80 100644 --- a/packages/next/src/compiled/react-server-dom-webpack/package.json +++ b/packages/next/src/compiled/react-server-dom-webpack/package.json @@ -46,8 +46,8 @@ "neo-async": "^2.6.1" }, "peerDependencies": { - "react": "19.0.0-rc-6230622a1a-20240610", - "react-dom": "19.0.0-rc-6230622a1a-20240610", + "react": "19.0.0-rc-20b6f4c0e8-20240607", + "react-dom": "19.0.0-rc-20b6f4c0e8-20240607", "webpack": "^5.59.0" } } \ No newline at end of file diff --git a/packages/next/src/compiled/react/cjs/react.development.js b/packages/next/src/compiled/react/cjs/react.development.js index 2b5e6c323f65f..bd37b6acca397 100644 --- a/packages/next/src/compiled/react/cjs/react.development.js +++ b/packages/next/src/compiled/react/cjs/react.development.js @@ -20,7 +20,7 @@ if ( ) { __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error()); } -var ReactVersion = '19.0.0-rc-6230622a1a-20240610'; +var ReactVersion = '19.0.0-rc-20b6f4c0e8-20240607'; // ----------------------------------------------------------------------------- diff --git a/packages/next/src/compiled/react/cjs/react.production.js b/packages/next/src/compiled/react/cjs/react.production.js index 94a3f59a62593..d8c44e06880ff 100644 --- a/packages/next/src/compiled/react/cjs/react.production.js +++ b/packages/next/src/compiled/react/cjs/react.production.js @@ -536,4 +536,4 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactSharedInternals.H.useTransition(); }; -exports.version = "19.0.0-rc-6230622a1a-20240610"; +exports.version = "19.0.0-rc-20b6f4c0e8-20240607"; diff --git a/packages/next/src/compiled/react/cjs/react.react-server.development.js b/packages/next/src/compiled/react/cjs/react.react-server.development.js index 17c2f381a7cfa..e7c009e7091f2 100644 --- a/packages/next/src/compiled/react/cjs/react.react-server.development.js +++ b/packages/next/src/compiled/react/cjs/react.react-server.development.js @@ -2068,7 +2068,7 @@ function cache(fn) { }; } -var ReactVersion = '19.0.0-rc-6230622a1a-20240610'; +var ReactVersion = '19.0.0-rc-20b6f4c0e8-20240607'; var Children = { map: mapChildren, diff --git a/packages/next/src/compiled/react/cjs/react.react-server.production.js b/packages/next/src/compiled/react/cjs/react.react-server.production.js index 1e80bd7250e14..c4750622cab91 100644 --- a/packages/next/src/compiled/react/cjs/react.react-server.production.js +++ b/packages/next/src/compiled/react/cjs/react.react-server.production.js @@ -424,4 +424,4 @@ exports.useId = function () { exports.useMemo = function (create, deps) { return ReactSharedInternals.H.useMemo(create, deps); }; -exports.version = "19.0.0-rc-6230622a1a-20240610"; +exports.version = "19.0.0-rc-20b6f4c0e8-20240607"; diff --git a/packages/next/src/compiled/unistore/unistore.js b/packages/next/src/compiled/unistore/unistore.js index 91850c3f0d708..bb0d7150cbdc1 100644 --- a/packages/next/src/compiled/unistore/unistore.js +++ b/packages/next/src/compiled/unistore/unistore.js @@ -1 +1 @@ -(()=>{var t={448:t=>{function n(t,i){for(var _ in i)t[_]=i[_];return t}t.exports=function(t){var i=[];function u(t){for(var _=[],a=0;a{var t={899:t=>{function n(t,i){for(var _ in i)t[_]=i[_];return t}t.exports=function(t){var i=[];function u(t){for(var _=[],a=0;a=18'} peerDependencies: '@types/react': npm:types-react@19.0.0-rc.0 - react: 19.0.0-rc-6230622a1a-20240610 - react-dom: 19.0.0-rc-6230622a1a-20240610 + react: 19.0.0-rc-20b6f4c0e8-20240607 + react-dom: 19.0.0-rc-20b6f4c0e8-20240607 peerDependenciesMeta: '@types/react': optional: true @@ -10246,7 +10246,7 @@ packages: lucide-react@0.383.0: resolution: {integrity: sha512-13xlG0CQCJtzjSQYwwJ3WRqMHtRj3EXmLlorrARt7y+IHnxUCp3XyFNL1DfaGySWxHObDvnu1u1dV+0VMKHUSg==} peerDependencies: - react: 19.0.0-rc-6230622a1a-20240610 + react: 19.0.0-rc-20b6f4c0e8-20240607 lz-string@1.5.0: resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==} @@ -12486,20 +12486,28 @@ packages: resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==} hasBin: true - react-dom@0.0.0-experimental-6230622a1a-20240610: - resolution: {integrity: sha512-rkLgUvHRh4Spb22M7fVs0AKEqdwiw9TMyVQmZw6pj+FJpgn0Hgqb+evnWsT0B656bwplrp/mltS727Xkw4c0uw==} + react-dom@0.0.0-experimental-20b6f4c0e8-20240607: + resolution: {integrity: sha512-I16SgrNGq5f7qhEZiwS+11R1rG1IBg/e2w/5qbUGcw0r312QGbH9K7hOgPrn/ZpiK4A0oxTnRCDM6mI5fKFwbA==} peerDependencies: - react: 19.0.0-rc-6230622a1a-20240610 + react: 19.0.0-rc-20b6f4c0e8-20240607 react-dom@17.0.2: resolution: {integrity: sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==} peerDependencies: - react: 19.0.0-rc-6230622a1a-20240610 + react: 19.0.0-rc-20b6f4c0e8-20240607 + + react-dom@19.0.0-rc-20b6f4c0e8-20240607: + resolution: {integrity: sha512-XcCj/wjC8eCi2y+ba5ROsJbQMBIdZQYW5CMSiz/Dh5cduiyB4ERHYyfvC8SbreJuYildOHEBukmAVknDMVH+Gg==} + peerDependencies: + react: 19.0.0-rc-20b6f4c0e8-20240607 react-dom@19.0.0-rc-6230622a1a-20240610: resolution: {integrity: sha512-56G4Pum5E7FeGL1rwHX5IxidSJxQnXP4yORRo0pVeOJuu5DQJvNKpUwmJoftMP/ez0AiglYTY77L2Gs8iyt1Hg==} peerDependencies: - react: 19.0.0-rc-6230622a1a-20240610 + react: 19.0.0-rc-20b6f4c0e8-20240607 + + react-is@19.0.0-rc-20b6f4c0e8-20240607: + resolution: {integrity: sha512-3lSjb6Y5Fk+f49dU6CodhkijD9gWztoRYPwXO0LVIUxZfTyL+z3AEmQ0M5XqrNvFy6VCU/U9sPnkQRwP59NzLA==} react-is@19.0.0-rc-6230622a1a-20240610: resolution: {integrity: sha512-6BH4F/xpoTJ+BTcb2AmZAzWXInEPUNKgL4u4C1BssZmFkGsvUpZmllLgCEVa105omvex85ZWwKHCy22KftGwDw==} @@ -12510,8 +12518,8 @@ packages: react-number-format@5.4.0: resolution: {integrity: sha512-NWdICrqLhI7rAS8yUeLVd6Wr4cN7UjJ9IBTS0f/a9i7UB4x4Ti70kGnksBtZ7o4Z7YRbvCMMR/jQmkoOBa/4fg==} peerDependencies: - react: 19.0.0-rc-6230622a1a-20240610 - react-dom: 19.0.0-rc-6230622a1a-20240610 + react: 19.0.0-rc-20b6f4c0e8-20240607 + react-dom: 19.0.0-rc-20b6f4c0e8-20240607 react-refresh@0.12.0: resolution: {integrity: sha512-suLIhrU2IHKL5JEKR/fAwJv7bbeq4kJ+pJopf77jHwuR+HmJS/HbrPIGsTBUVfw7tXPOmYv7UJ7PCaN49e8x4A==} @@ -12522,7 +12530,7 @@ packages: engines: {node: '>=10'} peerDependencies: '@types/react': npm:types-react@19.0.0-rc.0 - react: 19.0.0-rc-6230622a1a-20240610 + react: 19.0.0-rc-20b6f4c0e8-20240607 peerDependenciesMeta: '@types/react': optional: true @@ -12532,53 +12540,53 @@ packages: engines: {node: '>=10'} peerDependencies: '@types/react': npm:types-react@19.0.0-rc.0 - react: 19.0.0-rc-6230622a1a-20240610 + react: 19.0.0-rc-20b6f4c0e8-20240607 peerDependenciesMeta: '@types/react': optional: true - react-server-dom-turbopack@0.0.0-experimental-6230622a1a-20240610: - resolution: {integrity: sha512-U/7v8k6XS+EPSn46S8/7igwIkNdlfLRjWOCYNxXRs1/nC/BQa/gYUti4bGrMJ7b/2h7WWIHQOdGZRxOvUKIBHg==} + react-server-dom-turbopack@0.0.0-experimental-20b6f4c0e8-20240607: + resolution: {integrity: sha512-YGXFceM1rsQp8wmuDosGYYbt8xa7EHxN3NcbbvwylKjXHtuLGV7zyooCiHG/+JINWe/O2eLH1TSBq8jUEujlkQ==} engines: {node: '>=0.10.0'} peerDependencies: - react: 19.0.0-rc-6230622a1a-20240610 - react-dom: 19.0.0-rc-6230622a1a-20240610 + react: 19.0.0-rc-20b6f4c0e8-20240607 + react-dom: 19.0.0-rc-20b6f4c0e8-20240607 - react-server-dom-turbopack@19.0.0-rc-6230622a1a-20240610: - resolution: {integrity: sha512-nhNFHBAB48CMxRZWRo1yrNAbqLrOnDtE6FiSCZuMCkkyiQYtVnWWVIS06O/unlZlY72A97XQyZX9K8RYb8K3iQ==} + react-server-dom-turbopack@19.0.0-rc-20b6f4c0e8-20240607: + resolution: {integrity: sha512-jFHrGTWw59F1VQsdPVGvQG8MizCi6u22mgTED4C/ZtO74DB8vNMX0KvtMfMikNCg77O/jGL+EkJdgMYD7US6Zg==} engines: {node: '>=0.10.0'} peerDependencies: - react: 19.0.0-rc-6230622a1a-20240610 - react-dom: 19.0.0-rc-6230622a1a-20240610 + react: 19.0.0-rc-20b6f4c0e8-20240607 + react-dom: 19.0.0-rc-20b6f4c0e8-20240607 - react-server-dom-webpack@0.0.0-experimental-6230622a1a-20240610: - resolution: {integrity: sha512-HunYxzgNQJ3QCB+wt/X1S0/jalfRWujzHZK5nn5lM72T14M+XEg0mspF55Rmm2+RDE++eFbVqiVLlwFOZ8ln3w==} + react-server-dom-webpack@0.0.0-experimental-20b6f4c0e8-20240607: + resolution: {integrity: sha512-92P3E/drjADzesBI1ArmcsNot0LDQeEAb9Wc/4bVTuJnuUvxunF0JwwRb2yfZIOAd+wYEN/RcnYT7WPrLQj8DA==} engines: {node: '>=0.10.0'} peerDependencies: - react: 19.0.0-rc-6230622a1a-20240610 - react-dom: 19.0.0-rc-6230622a1a-20240610 + react: 19.0.0-rc-20b6f4c0e8-20240607 + react-dom: 19.0.0-rc-20b6f4c0e8-20240607 webpack: 5.90.0 - react-server-dom-webpack@19.0.0-rc-6230622a1a-20240610: - resolution: {integrity: sha512-nr+IsOVD07QdeCr4BLvR5TALfLaZLi9AIaoa6vXymBc051iDPWedJujYYrjRJy5+9jp9oCx3G8Tt/Bs//TckJw==} + react-server-dom-webpack@19.0.0-rc-20b6f4c0e8-20240607: + resolution: {integrity: sha512-D/9Q/Z3ZypKAu9LkXlPWnu7CpNYfmdYSw8H+sVSQ70NiV+5eEhH4q/J/I/bPViI0muhDhhz3opUOT3O6xXGq9A==} engines: {node: '>=0.10.0'} peerDependencies: - react: 19.0.0-rc-6230622a1a-20240610 - react-dom: 19.0.0-rc-6230622a1a-20240610 + react: 19.0.0-rc-20b6f4c0e8-20240607 + react-dom: 19.0.0-rc-20b6f4c0e8-20240607 webpack: 5.90.0 react-ssr-prepass@1.0.8: resolution: {integrity: sha512-O0gfRA1SaK+9ITKxqfnXsej2jF+OHGP/+GxD4unROQaM/0/UczGF9fuF+wTboxaQoKdIf4FvS3h/OigWh704VA==} peerDependencies: - react: 19.0.0-rc-6230622a1a-20240610 - react-is: 19.0.0-rc-6230622a1a-20240610 + react: 19.0.0-rc-20b6f4c0e8-20240607 + react-is: 19.0.0-rc-20b6f4c0e8-20240607 react-style-singleton@2.2.1: resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==} engines: {node: '>=10'} peerDependencies: '@types/react': npm:types-react@19.0.0-rc.0 - react: 19.0.0-rc-6230622a1a-20240610 + react: 19.0.0-rc-20b6f4c0e8-20240607 peerDependenciesMeta: '@types/react': optional: true @@ -12587,22 +12595,26 @@ packages: resolution: {integrity: sha512-XT1024o2pqCuZSuBt9FwHlaDeNtVrtCXu0Rnz88t1jUGheCLa3PhjE1GH8Ctm2axEtvdCl5SUHYschyQ0L5QHQ==} engines: {node: '>=10'} peerDependencies: - react: 19.0.0-rc-6230622a1a-20240610 + react: 19.0.0-rc-20b6f4c0e8-20240607 react-virtualized@9.22.3: resolution: {integrity: sha512-MKovKMxWTcwPSxE1kK1HcheQTWfuCxAuBoSTf2gwyMM21NdX/PXUhnoP8Uc5dRKd+nKm8v41R36OellhdCpkrw==} peerDependencies: - react: 19.0.0-rc-6230622a1a-20240610 - react-dom: 19.0.0-rc-6230622a1a-20240610 + react: 19.0.0-rc-20b6f4c0e8-20240607 + react-dom: 19.0.0-rc-20b6f4c0e8-20240607 - react@0.0.0-experimental-6230622a1a-20240610: - resolution: {integrity: sha512-A6J2Uj5Jzgz8pLOj9qyyTEQ0v5SwyT6JASC56XxjAwbi9ckb3UwwG6lTjF+rltg4poT3fjPcPyRjd2Q4cWZy/Q==} + react@0.0.0-experimental-20b6f4c0e8-20240607: + resolution: {integrity: sha512-p5ILF6Y2W1DeguDqbB1KD/VnQYByxMBsUpCRn/EZsJsUfnBV8EXhAReUnVnHml3lXkDlb+6GfNaohkDtNmBdKA==} engines: {node: '>=0.10.0'} react@17.0.2: resolution: {integrity: sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==} engines: {node: '>=0.10.0'} + react@19.0.0-rc-20b6f4c0e8-20240607: + resolution: {integrity: sha512-1eTIYVwwwD43XOIXCGiOkHO1s6+DIKXfptplhZO0p0Fmr7qcVWz2wQj9icyb50H+vANWnT17EEOL/9xgFHbGEg==} + engines: {node: '>=0.10.0'} + react@19.0.0-rc-6230622a1a-20240610: resolution: {integrity: sha512-SMgWGY//7nO7F3HMuBfmC15Cr4vTe2tlpSCATfnz/wymSftDOKUqc+0smjRhcUeCFCc1zhOAWJ+N//U5CrmOzQ==} engines: {node: '>=0.10.0'} @@ -13126,11 +13138,11 @@ packages: resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==} engines: {node: '>=v12.22.7'} - scheduler@0.0.0-experimental-6230622a1a-20240610: - resolution: {integrity: sha512-jJZKVNvX9z+p8keIDncyZldGXNZVTBvHrBVWyJ6X9UYxZCtWgbRS0HGLXY9Doqz63wwg1SRIUX7cbgmwF30xKg==} + scheduler@0.0.0-experimental-20b6f4c0e8-20240607: + resolution: {integrity: sha512-3hCxIYVwPeEqnecnN6r441mYEIaXXk3fGP01Z1hPMEc3KVbuy1gWNha5f/6woJCP4CxgGla/O5OWfiLj512lvA==} - scheduler@0.25.0-rc-6230622a1a-20240610: - resolution: {integrity: sha512-GTIQdJXthps5mgkIFo7yAq03M0QQYTfN8z+GrnMC/SCKFSuyFP5tk2BMaaWUsVy4u4r+dTLdiXH8JEivVls0Bw==} + scheduler@0.25.0-rc-20b6f4c0e8-20240607: + resolution: {integrity: sha512-C7CD1K4+ybod6icJjifT3yh7NPaPJm5TSPzIO+yJwvkxw5XghS+zr77LGQtdNrd7JzfK/K/39UvhIBu5WoXUig==} schema-utils@2.7.1: resolution: {integrity: sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==} @@ -13699,8 +13711,8 @@ packages: engines: {node: '>= 16'} peerDependencies: babel-plugin-styled-components: '>= 2' - react: 19.0.0-rc-6230622a1a-20240610 - react-dom: 19.0.0-rc-6230622a1a-20240610 + react: 19.0.0-rc-20b6f4c0e8-20240607 + react-dom: 19.0.0-rc-20b6f4c0e8-20240607 peerDependenciesMeta: babel-plugin-styled-components: optional: true @@ -13714,7 +13726,7 @@ packages: peerDependencies: '@babel/core': '*' babel-plugin-macros: '*' - react: 19.0.0-rc-6230622a1a-20240610 + react: 19.0.0-rc-20b6f4c0e8-20240607 peerDependenciesMeta: '@babel/core': optional: true @@ -13791,7 +13803,7 @@ packages: swr@2.2.4: resolution: {integrity: sha512-njiZ/4RiIhoOlAaLYDqwz5qH/KZXVilRLvomrx83HjzCWTfa+InyfAjv05PSFxnmLzZkNO9ZfvgoqzAaEI4sGQ==} peerDependencies: - react: 19.0.0-rc-6230622a1a-20240610 + react: 19.0.0-rc-20b6f4c0e8-20240607 symbol-observable@1.0.1: resolution: {integrity: sha512-Kb3PrPYz4HanVF1LVGuAdW6LoVgIwjUYJGzFe7NDrBLCN4lsV/5J0MFurV+ygS4bRVwrCEt2c7MQ1R2a72oJDw==} @@ -14535,7 +14547,7 @@ packages: engines: {node: '>=10'} peerDependencies: '@types/react': npm:types-react@19.0.0-rc.0 - react: 19.0.0-rc-6230622a1a-20240610 + react: 19.0.0-rc-20b6f4c0e8-20240607 peerDependenciesMeta: '@types/react': optional: true @@ -14543,13 +14555,13 @@ packages: use-composed-ref@1.3.0: resolution: {integrity: sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==} peerDependencies: - react: 19.0.0-rc-6230622a1a-20240610 + react: 19.0.0-rc-20b6f4c0e8-20240607 use-isomorphic-layout-effect@1.1.2: resolution: {integrity: sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==} peerDependencies: '@types/react': '*' - react: 19.0.0-rc-6230622a1a-20240610 + react: 19.0.0-rc-20b6f4c0e8-20240607 peerDependenciesMeta: '@types/react': optional: true @@ -14558,7 +14570,7 @@ packages: resolution: {integrity: sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==} peerDependencies: '@types/react': '*' - react: 19.0.0-rc-6230622a1a-20240610 + react: 19.0.0-rc-20b6f4c0e8-20240607 peerDependenciesMeta: '@types/react': optional: true @@ -14568,7 +14580,7 @@ packages: engines: {node: '>=10'} peerDependencies: '@types/react': npm:types-react@19.0.0-rc.0 - react: 19.0.0-rc-6230622a1a-20240610 + react: 19.0.0-rc-20b6f4c0e8-20240607 peerDependenciesMeta: '@types/react': optional: true @@ -14576,7 +14588,7 @@ packages: use-sync-external-store@1.2.0: resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==} peerDependencies: - react: 19.0.0-rc-6230622a1a-20240610 + react: 19.0.0-rc-20b6f4c0e8-20240607 use@3.1.1: resolution: {integrity: sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==} @@ -16931,17 +16943,17 @@ snapshots: '@emotion/memoize@0.8.1': {} - '@emotion/react@11.11.1(react@19.0.0-rc-6230622a1a-20240610)(types-react@19.0.0-rc.0)': + '@emotion/react@11.11.1(react@19.0.0-rc-20b6f4c0e8-20240607)(types-react@19.0.0-rc.0)': dependencies: '@babel/runtime': 7.22.5 '@emotion/babel-plugin': 11.11.0 '@emotion/cache': 11.11.0 '@emotion/serialize': 1.1.2 - '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@19.0.0-rc-6230622a1a-20240610) + '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@19.0.0-rc-20b6f4c0e8-20240607) '@emotion/utils': 1.2.1 '@emotion/weak-memoize': 0.3.1 hoist-non-react-statics: 3.3.2 - react: 19.0.0-rc-6230622a1a-20240610 + react: 19.0.0-rc-20b6f4c0e8-20240607 optionalDependencies: '@types/react': types-react@19.0.0-rc.0 @@ -16957,9 +16969,9 @@ snapshots: '@emotion/unitless@0.8.1': {} - '@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@19.0.0-rc-6230622a1a-20240610)': + '@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@19.0.0-rc-20b6f4c0e8-20240607)': dependencies: - react: 19.0.0-rc-6230622a1a-20240610 + react: 19.0.0-rc-20b6f4c0e8-20240607 '@emotion/utils@1.2.1': {} @@ -18321,6 +18333,12 @@ snapshots: transitivePeerDependencies: - supports-color + '@mdx-js/react@2.2.1(react@19.0.0-rc-20b6f4c0e8-20240607)': + dependencies: + '@types/mdx': 2.0.3 + '@types/react': types-react@19.0.0-rc.0 + react: 19.0.0-rc-20b6f4c0e8-20240607 + '@mdx-js/react@2.2.1(react@19.0.0-rc-6230622a1a-20240610)': dependencies: '@types/mdx': 2.0.3 @@ -19138,13 +19156,13 @@ snapshots: '@types/jest': 29.5.5 jest: 29.7.0(@types/node@20.12.3)(babel-plugin-macros@3.1.0) - '@testing-library/react@15.0.7(react-dom@19.0.0-rc-6230622a1a-20240610(react@19.0.0-rc-6230622a1a-20240610))(react@19.0.0-rc-6230622a1a-20240610)(types-react@19.0.0-rc.0)': + '@testing-library/react@15.0.7(react-dom@19.0.0-rc-20b6f4c0e8-20240607(react@19.0.0-rc-20b6f4c0e8-20240607))(react@19.0.0-rc-20b6f4c0e8-20240607)(types-react@19.0.0-rc.0)': dependencies: '@babel/runtime': 7.22.5 '@testing-library/dom': 10.1.0 '@types/react-dom': types-react-dom@19.0.0-rc.0 - react: 19.0.0-rc-6230622a1a-20240610 - react-dom: 19.0.0-rc-6230622a1a-20240610(react@19.0.0-rc-6230622a1a-20240610) + react: 19.0.0-rc-20b6f4c0e8-20240607 + react-dom: 19.0.0-rc-20b6f4c0e8-20240607(react@19.0.0-rc-20b6f4c0e8-20240607) optionalDependencies: '@types/react': types-react@19.0.0-rc.0 @@ -24147,7 +24165,7 @@ snapshots: hoist-non-react-statics@3.3.2: dependencies: - react-is: 19.0.0-rc-6230622a1a-20240610 + react-is: 19.0.0-rc-20b6f4c0e8-20240607 homedir-polyfill@1.0.3: dependencies: @@ -28563,25 +28581,25 @@ snapshots: '@jest/types': 24.9.0 ansi-regex: 4.1.0 ansi-styles: 3.2.1 - react-is: 19.0.0-rc-6230622a1a-20240610 + react-is: 19.0.0-rc-20b6f4c0e8-20240607 pretty-format@27.5.1: dependencies: ansi-regex: 5.0.1 ansi-styles: 5.2.0 - react-is: 19.0.0-rc-6230622a1a-20240610 + react-is: 19.0.0-rc-20b6f4c0e8-20240607 pretty-format@29.5.0: dependencies: '@jest/schemas': 29.4.3 ansi-styles: 5.2.0 - react-is: 19.0.0-rc-6230622a1a-20240610 + react-is: 19.0.0-rc-20b6f4c0e8-20240607 pretty-format@29.7.0: dependencies: '@jest/schemas': 29.6.3 ansi-styles: 5.2.0 - react-is: 19.0.0-rc-6230622a1a-20240610 + react-is: 19.0.0-rc-20b6f4c0e8-20240607 pretty-ms@7.0.0: dependencies: @@ -28638,7 +28656,7 @@ snapshots: dependencies: loose-envify: 1.4.0 object-assign: 4.1.1 - react-is: 19.0.0-rc-6230622a1a-20240610 + react-is: 19.0.0-rc-20b6f4c0e8-20240607 property-information@5.6.0: dependencies: @@ -28810,22 +28828,29 @@ snapshots: minimist: 1.2.6 strip-json-comments: 2.0.1 - react-dom@0.0.0-experimental-6230622a1a-20240610(react@19.0.0-rc-6230622a1a-20240610): + react-dom@0.0.0-experimental-20b6f4c0e8-20240607(react@19.0.0-rc-20b6f4c0e8-20240607): dependencies: - react: 19.0.0-rc-6230622a1a-20240610 - scheduler: 0.25.0-rc-6230622a1a-20240610 + react: 19.0.0-rc-20b6f4c0e8-20240607 + scheduler: 0.25.0-rc-20b6f4c0e8-20240607 - react-dom@17.0.2(react@19.0.0-rc-6230622a1a-20240610): + react-dom@17.0.2(react@19.0.0-rc-20b6f4c0e8-20240607): dependencies: loose-envify: 1.4.0 object-assign: 4.1.1 - react: 19.0.0-rc-6230622a1a-20240610 - scheduler: 0.25.0-rc-6230622a1a-20240610 + react: 19.0.0-rc-20b6f4c0e8-20240607 + scheduler: 0.25.0-rc-20b6f4c0e8-20240607 + + react-dom@19.0.0-rc-20b6f4c0e8-20240607(react@19.0.0-rc-20b6f4c0e8-20240607): + dependencies: + react: 19.0.0-rc-20b6f4c0e8-20240607 + scheduler: 0.25.0-rc-20b6f4c0e8-20240607 react-dom@19.0.0-rc-6230622a1a-20240610(react@19.0.0-rc-6230622a1a-20240610): dependencies: react: 19.0.0-rc-6230622a1a-20240610 - scheduler: 0.25.0-rc-6230622a1a-20240610 + scheduler: 0.25.0-rc-20b6f4c0e8-20240607 + + react-is@19.0.0-rc-20b6f4c0e8-20240607: {} react-is@19.0.0-rc-6230622a1a-20240610: {} @@ -28858,40 +28883,40 @@ snapshots: optionalDependencies: '@types/react': types-react@19.0.0-rc.0 - react-server-dom-turbopack@0.0.0-experimental-6230622a1a-20240610(react-dom@19.0.0-rc-6230622a1a-20240610(react@19.0.0-rc-6230622a1a-20240610))(react@19.0.0-rc-6230622a1a-20240610): + react-server-dom-turbopack@0.0.0-experimental-20b6f4c0e8-20240607(react-dom@19.0.0-rc-20b6f4c0e8-20240607(react@19.0.0-rc-20b6f4c0e8-20240607))(react@19.0.0-rc-20b6f4c0e8-20240607): dependencies: acorn-loose: 8.3.0 neo-async: 2.6.1 - react: 19.0.0-rc-6230622a1a-20240610 - react-dom: 19.0.0-rc-6230622a1a-20240610(react@19.0.0-rc-6230622a1a-20240610) + react: 19.0.0-rc-20b6f4c0e8-20240607 + react-dom: 19.0.0-rc-20b6f4c0e8-20240607(react@19.0.0-rc-20b6f4c0e8-20240607) - react-server-dom-turbopack@19.0.0-rc-6230622a1a-20240610(react-dom@19.0.0-rc-6230622a1a-20240610(react@19.0.0-rc-6230622a1a-20240610))(react@19.0.0-rc-6230622a1a-20240610): + react-server-dom-turbopack@19.0.0-rc-20b6f4c0e8-20240607(react-dom@19.0.0-rc-20b6f4c0e8-20240607(react@19.0.0-rc-20b6f4c0e8-20240607))(react@19.0.0-rc-20b6f4c0e8-20240607): dependencies: acorn-loose: 8.3.0 neo-async: 2.6.1 - react: 19.0.0-rc-6230622a1a-20240610 - react-dom: 19.0.0-rc-6230622a1a-20240610(react@19.0.0-rc-6230622a1a-20240610) + react: 19.0.0-rc-20b6f4c0e8-20240607 + react-dom: 19.0.0-rc-20b6f4c0e8-20240607(react@19.0.0-rc-20b6f4c0e8-20240607) - react-server-dom-webpack@0.0.0-experimental-6230622a1a-20240610(react-dom@19.0.0-rc-6230622a1a-20240610(react@19.0.0-rc-6230622a1a-20240610))(react@19.0.0-rc-6230622a1a-20240610)(webpack@5.90.0(@swc/core@1.6.13(@swc/helpers@0.5.12))): + react-server-dom-webpack@0.0.0-experimental-20b6f4c0e8-20240607(react-dom@19.0.0-rc-20b6f4c0e8-20240607(react@19.0.0-rc-20b6f4c0e8-20240607))(react@19.0.0-rc-20b6f4c0e8-20240607)(webpack@5.90.0(@swc/core@1.6.13(@swc/helpers@0.5.12))): dependencies: acorn-loose: 8.3.0 neo-async: 2.6.1 - react: 19.0.0-rc-6230622a1a-20240610 - react-dom: 19.0.0-rc-6230622a1a-20240610(react@19.0.0-rc-6230622a1a-20240610) + react: 19.0.0-rc-20b6f4c0e8-20240607 + react-dom: 19.0.0-rc-20b6f4c0e8-20240607(react@19.0.0-rc-20b6f4c0e8-20240607) webpack: 5.90.0(@swc/core@1.6.13(@swc/helpers@0.5.12)) - react-server-dom-webpack@19.0.0-rc-6230622a1a-20240610(react-dom@19.0.0-rc-6230622a1a-20240610(react@19.0.0-rc-6230622a1a-20240610))(react@19.0.0-rc-6230622a1a-20240610)(webpack@5.90.0(@swc/core@1.6.13(@swc/helpers@0.5.12))): + react-server-dom-webpack@19.0.0-rc-20b6f4c0e8-20240607(react-dom@19.0.0-rc-20b6f4c0e8-20240607(react@19.0.0-rc-20b6f4c0e8-20240607))(react@19.0.0-rc-20b6f4c0e8-20240607)(webpack@5.90.0(@swc/core@1.6.13(@swc/helpers@0.5.12))): dependencies: acorn-loose: 8.3.0 neo-async: 2.6.1 - react: 19.0.0-rc-6230622a1a-20240610 - react-dom: 19.0.0-rc-6230622a1a-20240610(react@19.0.0-rc-6230622a1a-20240610) + react: 19.0.0-rc-20b6f4c0e8-20240607 + react-dom: 19.0.0-rc-20b6f4c0e8-20240607(react@19.0.0-rc-20b6f4c0e8-20240607) webpack: 5.90.0(@swc/core@1.6.13(@swc/helpers@0.5.12)) - react-ssr-prepass@1.0.8(react-is@19.0.0-rc-6230622a1a-20240610)(react@19.0.0-rc-6230622a1a-20240610): + react-ssr-prepass@1.0.8(react-is@19.0.0-rc-6230622a1a-20240610)(react@19.0.0-rc-20b6f4c0e8-20240607): dependencies: object-is: 1.0.2 - react: 19.0.0-rc-6230622a1a-20240610 + react: 19.0.0-rc-20b6f4c0e8-20240607 react-is: 19.0.0-rc-6230622a1a-20240610 react-style-singleton@2.2.1(react@19.0.0-rc-6230622a1a-20240610)(types-react@19.0.0-rc.0): @@ -28912,24 +28937,26 @@ snapshots: transitivePeerDependencies: - '@types/react' - react-virtualized@9.22.3(react-dom@19.0.0-rc-6230622a1a-20240610(react@19.0.0-rc-6230622a1a-20240610))(react@19.0.0-rc-6230622a1a-20240610): + react-virtualized@9.22.3(react-dom@19.0.0-rc-20b6f4c0e8-20240607(react@19.0.0-rc-20b6f4c0e8-20240607))(react@19.0.0-rc-20b6f4c0e8-20240607): dependencies: '@babel/runtime': 7.22.5 clsx: 1.1.1 dom-helpers: 5.2.1 loose-envify: 1.4.0 prop-types: 15.8.1 - react: 19.0.0-rc-6230622a1a-20240610 - react-dom: 19.0.0-rc-6230622a1a-20240610(react@19.0.0-rc-6230622a1a-20240610) + react: 19.0.0-rc-20b6f4c0e8-20240607 + react-dom: 19.0.0-rc-20b6f4c0e8-20240607(react@19.0.0-rc-20b6f4c0e8-20240607) react-lifecycles-compat: 3.0.4 - react@0.0.0-experimental-6230622a1a-20240610: {} + react@0.0.0-experimental-20b6f4c0e8-20240607: {} react@17.0.2: dependencies: loose-envify: 1.4.0 object-assign: 4.1.1 + react@19.0.0-rc-20b6f4c0e8-20240607: {} + react@19.0.0-rc-6230622a1a-20240610: {} read-cache@1.0.0: @@ -29618,9 +29645,9 @@ snapshots: dependencies: xmlchars: 2.2.0 - scheduler@0.0.0-experimental-6230622a1a-20240610: {} + scheduler@0.0.0-experimental-20b6f4c0e8-20240607: {} - scheduler@0.25.0-rc-6230622a1a-20240610: {} + scheduler@0.25.0-rc-20b6f4c0e8-20240607: {} schema-utils@2.7.1: dependencies: @@ -30269,7 +30296,7 @@ snapshots: dependencies: inline-style-parser: 0.1.1 - styled-components@6.0.0-rc.3(react-dom@19.0.0-rc-6230622a1a-20240610(react@19.0.0-rc-6230622a1a-20240610))(react@19.0.0-rc-6230622a1a-20240610): + styled-components@6.0.0-rc.3(react-dom@19.0.0-rc-20b6f4c0e8-20240607(react@19.0.0-rc-20b6f4c0e8-20240607))(react@19.0.0-rc-20b6f4c0e8-20240607): dependencies: '@babel/cli': 7.21.5(@babel/core@7.22.5) '@babel/core': 7.22.5 @@ -30284,8 +30311,8 @@ snapshots: '@emotion/unitless': 0.8.1 css-to-react-native: 3.2.0 postcss: 8.4.31 - react: 19.0.0-rc-6230622a1a-20240610 - react-dom: 19.0.0-rc-6230622a1a-20240610(react@19.0.0-rc-6230622a1a-20240610) + react: 19.0.0-rc-20b6f4c0e8-20240607 + react-dom: 19.0.0-rc-20b6f4c0e8-20240607(react@19.0.0-rc-20b6f4c0e8-20240607) shallowequal: 1.1.0 stylis: 4.2.0 tslib: 2.5.3 @@ -30297,10 +30324,10 @@ snapshots: postcss: 7.0.32 postcss-load-plugins: 2.3.0 - styled-jsx@5.1.6(@babel/core@7.22.5)(babel-plugin-macros@3.1.0)(react@19.0.0-rc-6230622a1a-20240610): + styled-jsx@5.1.6(@babel/core@7.22.5)(babel-plugin-macros@3.1.0)(react@19.0.0-rc-20b6f4c0e8-20240607): dependencies: client-only: 0.0.1 - react: 19.0.0-rc-6230622a1a-20240610 + react: 19.0.0-rc-20b6f4c0e8-20240607 optionalDependencies: '@babel/core': 7.22.5 babel-plugin-macros: 3.1.0 @@ -30390,11 +30417,11 @@ snapshots: picocolors: 1.0.0 stable: 0.1.8 - swr@2.2.4(react@19.0.0-rc-6230622a1a-20240610): + swr@2.2.4(react@19.0.0-rc-20b6f4c0e8-20240607): dependencies: client-only: 0.0.1 - react: 19.0.0-rc-6230622a1a-20240610 - use-sync-external-store: 1.2.0(react@19.0.0-rc-6230622a1a-20240610) + react: 19.0.0-rc-20b6f4c0e8-20240607 + use-sync-external-store: 1.2.0(react@19.0.0-rc-20b6f4c0e8-20240607) symbol-observable@1.0.1: {} @@ -31083,9 +31110,9 @@ snapshots: unist-util-is: 5.2.0 unist-util-visit-parents: 5.1.3 - unistore@3.4.1(react@19.0.0-rc-6230622a1a-20240610): + unistore@3.4.1(react@19.0.0-rc-20b6f4c0e8-20240607): optionalDependencies: - react: 19.0.0-rc-6230622a1a-20240610 + react: 19.0.0-rc-20b6f4c0e8-20240607 universal-github-app-jwt@1.1.1: dependencies: @@ -31210,9 +31237,9 @@ snapshots: optionalDependencies: '@types/react': types-react@19.0.0-rc.0 - use-sync-external-store@1.2.0(react@19.0.0-rc-6230622a1a-20240610): + use-sync-external-store@1.2.0(react@19.0.0-rc-20b6f4c0e8-20240607): dependencies: - react: 19.0.0-rc-6230622a1a-20240610 + react: 19.0.0-rc-20b6f4c0e8-20240607 use@3.1.1: {} diff --git a/run-tests.js b/run-tests.js index 6d675fa4c18ab..7eb643f89b872 100644 --- a/run-tests.js +++ b/run-tests.js @@ -415,7 +415,8 @@ ${ENDGROUP}`) // a starter Next.js install to re-use to speed up tests // to avoid having to run yarn each time console.log(`${GROUP}Creating Next.js install for isolated tests`) - const reactVersion = process.env.NEXT_TEST_REACT_VERSION || '19.0.0-rc.0' + const reactVersion = + process.env.NEXT_TEST_REACT_VERSION || '19.0.0-rc-20b6f4c0e8-20240607' const { installDir, pkgPaths, tmpRepoDir } = await createNextInstall({ parentSpan: mockTrace(), dependencies: { diff --git a/test/.stats-app/package.json b/test/.stats-app/package.json index ede5427123315..34ab710a6442f 100644 --- a/test/.stats-app/package.json +++ b/test/.stats-app/package.json @@ -4,8 +4,8 @@ "license": "MIT", "dependencies": { "next": "latest", - "react": "19.0.0-rc-6230622a1a-20240610", - "react-dom": "19.0.0-rc-6230622a1a-20240610" + "react": "19.0.0-rc-20b6f4c0e8-20240607", + "react-dom": "19.0.0-rc-20b6f4c0e8-20240607" }, "engines": { "node": ">=18.18.0" From 714fa8617190e20ce89b2a9335290cc059e69f6c Mon Sep 17 00:00:00 2001 From: eps1lon Date: Thu, 13 Jun 2024 21:52:09 +0200 Subject: [PATCH 2/8] Update React from 20b6f4c0e8 to dfd30974ab --- .github/.react-version | 2 +- package.json | 34 +- .../cjs/react-dom-client.development.js | 62572 ++++++--------- .../cjs/react-dom-client.production.js | 470 +- .../cjs/react-dom-profiling.development.js | 63391 ++++++--------- .../cjs/react-dom-profiling.profiling.js | 514 +- ...t-dom-server-legacy.browser.development.js | 21073 +++-- ...ct-dom-server-legacy.browser.production.js | 96 +- ...eact-dom-server-legacy.node.development.js | 21073 +++-- ...react-dom-server-legacy.node.production.js | 96 +- .../react-dom-server.browser.development.js | 21987 +++--- .../react-dom-server.browser.production.js | 100 +- .../cjs/react-dom-server.bun.production.js | 100 +- .../cjs/react-dom-server.edge.development.js | 22008 +++--- .../cjs/react-dom-server.edge.production.js | 100 +- .../cjs/react-dom-server.node.development.js | 21745 +++--- .../cjs/react-dom-server.node.production.js | 99 +- .../react-dom-unstable_testing.development.js | 63721 ++++++---------- .../react-dom-unstable_testing.production.js | 470 +- .../cjs/react-dom.development.js | 1034 +- .../cjs/react-dom.production.js | 2 +- .../cjs/react-dom.react-server.development.js | 741 +- .../cjs/react-dom.react-server.production.js | 2 +- .../react-dom-experimental/package.json | 8 +- .../cjs/react-dom-client.development.js | 61752 ++++++--------- .../cjs/react-dom-client.production.js | 468 +- .../cjs/react-dom-profiling.development.js | 62677 ++++++--------- .../cjs/react-dom-profiling.profiling.js | 512 +- ...t-dom-server-legacy.browser.development.js | 19965 ++--- ...ct-dom-server-legacy.browser.production.js | 96 +- ...eact-dom-server-legacy.node.development.js | 19965 ++--- ...react-dom-server-legacy.node.production.js | 96 +- .../react-dom-server.browser.development.js | 20268 +++-- .../react-dom-server.browser.production.js | 100 +- .../cjs/react-dom-server.bun.production.js | 100 +- .../cjs/react-dom-server.edge.development.js | 20291 +++-- .../cjs/react-dom-server.edge.production.js | 100 +- .../cjs/react-dom-server.node.development.js | 20082 ++--- .../cjs/react-dom-server.node.production.js | 146 +- .../react-dom/cjs/react-dom.development.js | 1030 +- .../react-dom/cjs/react-dom.production.js | 2 +- .../cjs/react-dom.react-server.development.js | 737 +- .../cjs/react-dom.react-server.production.js | 2 +- .../next/src/compiled/react-dom/package.json | 8 +- .../cjs/react-compiler-runtime.development.js | 114 +- .../cjs/react-jsx-dev-runtime.development.js | 1139 +- ...sx-dev-runtime.react-server.development.js | 1202 +- .../cjs/react-jsx-runtime.development.js | 1162 +- ...ct-jsx-runtime.react-server.development.js | 1202 +- .../cjs/react.development.js | 3458 +- .../cjs/react.production.js | 2 +- .../cjs/react.react-server.development.js | 2711 +- .../cjs/react.react-server.production.js | 2 +- .../react-is/cjs/react-is.development.js | 305 +- .../next/src/compiled/react-is/package.json | 2 +- ...om-turbopack-client.browser.development.js | 5764 +- ...dom-turbopack-client.browser.production.js | 278 +- ...r-dom-turbopack-client.edge.development.js | 6250 +- ...er-dom-turbopack-client.edge.production.js | 281 +- ...r-dom-turbopack-client.node.development.js | 6167 +- ...er-dom-turbopack-client.node.production.js | 260 +- ...opack-client.node.unbundled.development.js | 6098 +- ...bopack-client.node.unbundled.production.js | 260 +- ...om-turbopack-server.browser.development.js | 9370 +-- ...dom-turbopack-server.browser.production.js | 136 +- ...r-dom-turbopack-server.edge.development.js | 9442 +-- ...er-dom-turbopack-server.edge.production.js | 136 +- ...r-dom-turbopack-server.node.development.js | 9663 +-- ...er-dom-turbopack-server.node.production.js | 136 +- ...opack-server.node.unbundled.development.js | 9558 +-- ...bopack-server.node.unbundled.production.js | 136 +- .../package.json | 4 +- ...om-turbopack-client.browser.development.js | 5155 +- ...dom-turbopack-client.browser.production.js | 278 +- ...r-dom-turbopack-client.edge.development.js | 5663 +- ...er-dom-turbopack-client.edge.production.js | 281 +- ...r-dom-turbopack-client.node.development.js | 5584 +- ...er-dom-turbopack-client.node.production.js | 260 +- ...opack-client.node.unbundled.development.js | 5469 +- ...bopack-client.node.unbundled.production.js | 260 +- ...om-turbopack-server.browser.development.js | 8636 +-- ...dom-turbopack-server.browser.production.js | 151 +- ...r-dom-turbopack-server.edge.development.js | 8659 +-- ...er-dom-turbopack-server.edge.production.js | 151 +- ...r-dom-turbopack-server.node.development.js | 8875 +-- ...er-dom-turbopack-server.node.production.js | 151 +- ...opack-server.node.unbundled.development.js | 8764 +-- ...bopack-server.node.unbundled.production.js | 151 +- .../react-server-dom-turbopack/package.json | 4 +- ...-dom-webpack-client.browser.development.js | 5800 +- ...r-dom-webpack-client.browser.production.js | 278 +- ...ver-dom-webpack-client.edge.development.js | 6253 +- ...rver-dom-webpack-client.edge.production.js | 281 +- ...ver-dom-webpack-client.node.development.js | 6170 +- ...rver-dom-webpack-client.node.production.js | 260 +- ...bpack-client.node.unbundled.development.js | 6098 +- ...ebpack-client.node.unbundled.production.js | 260 +- ...-dom-webpack-server.browser.development.js | 9442 +-- ...r-dom-webpack-server.browser.production.js | 136 +- ...ver-dom-webpack-server.edge.development.js | 9455 +-- ...rver-dom-webpack-server.edge.production.js | 136 +- ...ver-dom-webpack-server.node.development.js | 9678 +-- ...rver-dom-webpack-server.node.production.js | 136 +- ...bpack-server.node.unbundled.development.js | 9570 +-- ...ebpack-server.node.unbundled.production.js | 136 +- .../package.json | 4 +- ...-dom-webpack-client.browser.development.js | 5209 +- ...r-dom-webpack-client.browser.production.js | 278 +- ...ver-dom-webpack-client.edge.development.js | 5666 +- ...rver-dom-webpack-client.edge.production.js | 281 +- ...ver-dom-webpack-client.node.development.js | 5587 +- ...rver-dom-webpack-client.node.production.js | 260 +- ...bpack-client.node.unbundled.development.js | 5469 +- ...ebpack-client.node.unbundled.production.js | 260 +- ...-dom-webpack-server.browser.development.js | 8682 +-- ...r-dom-webpack-server.browser.production.js | 151 +- ...ver-dom-webpack-server.edge.development.js | 8668 +-- ...rver-dom-webpack-server.edge.production.js | 151 +- ...ver-dom-webpack-server.node.development.js | 8890 +-- ...rver-dom-webpack-server.node.production.js | 151 +- ...bpack-server.node.unbundled.development.js | 8776 +-- ...ebpack-server.node.unbundled.production.js | 151 +- .../react-server-dom-webpack/package.json | 4 +- .../cjs/react-compiler-runtime.development.js | 110 +- .../cjs/react-jsx-dev-runtime.development.js | 1859 +- ...sx-dev-runtime.react-server.development.js | 1904 +- .../cjs/react-jsx-runtime.development.js | 1873 +- ...ct-jsx-runtime.react-server.development.js | 1904 +- .../compiled/react/cjs/react.development.js | 4257 +- .../compiled/react/cjs/react.production.js | 2 +- .../cjs/react.react-server.development.js | 3131 +- .../cjs/react.react-server.production.js | 2 +- .../scheduler-unstable_mock.development.js | 1080 +- ...cheduler-unstable_post_task.development.js | 337 +- .../cjs/scheduler.development.js | 933 +- .../cjs/scheduler.native.development.js | 831 +- .../scheduler-unstable_mock.development.js | 1080 +- ...cheduler-unstable_post_task.development.js | 337 +- .../scheduler/cjs/scheduler.development.js | 933 +- .../cjs/scheduler.native.development.js | 831 +- .../next/src/compiled/unistore/unistore.js | 2 +- pnpm-lock.yaml | 475 +- run-tests.js | 2 +- test/.stats-app/package.json | 4 +- 144 files changed, 319548 insertions(+), 488631 deletions(-) diff --git a/.github/.react-version b/.github/.react-version index 59c8c14fbbb45..2818c978d4b77 100644 --- a/.github/.react-version +++ b/.github/.react-version @@ -1 +1 @@ -19.0.0-rc-20b6f4c0e8-20240607 \ No newline at end of file +19.0.0-rc-dfd30974ab-20240613 \ No newline at end of file diff --git a/package.json b/package.json index 894b6c6841c74..6546d17d7f829 100644 --- a/package.json +++ b/package.json @@ -200,19 +200,19 @@ "pretty-bytes": "5.3.0", "pretty-ms": "7.0.0", "random-seed": "0.3.0", - "react": "19.0.0-rc-20b6f4c0e8-20240607", + "react": "19.0.0-rc-dfd30974ab-20240613", "react-17": "npm:react@17.0.2", - "react-builtin": "npm:react@19.0.0-rc-20b6f4c0e8-20240607", - "react-dom": "19.0.0-rc-20b6f4c0e8-20240607", + "react-builtin": "npm:react@19.0.0-rc-dfd30974ab-20240613", + "react-dom": "19.0.0-rc-dfd30974ab-20240613", "react-dom-17": "npm:react-dom@17.0.2", - "react-dom-builtin": "npm:react-dom@19.0.0-rc-20b6f4c0e8-20240607", - "react-dom-experimental-builtin": "npm:react-dom@0.0.0-experimental-20b6f4c0e8-20240607", - "react-is-builtin": "npm:react-is@19.0.0-rc-20b6f4c0e8-20240607", - "react-experimental-builtin": "npm:react@0.0.0-experimental-20b6f4c0e8-20240607", - "react-server-dom-turbopack": "19.0.0-rc-20b6f4c0e8-20240607", - "react-server-dom-turbopack-experimental": "npm:react-server-dom-turbopack@0.0.0-experimental-20b6f4c0e8-20240607", - "react-server-dom-webpack": "19.0.0-rc-20b6f4c0e8-20240607", - "react-server-dom-webpack-experimental": "npm:react-server-dom-webpack@0.0.0-experimental-20b6f4c0e8-20240607", + "react-dom-builtin": "npm:react-dom@19.0.0-rc-dfd30974ab-20240613", + "react-dom-experimental-builtin": "npm:react-dom@0.0.0-experimental-dfd30974ab-20240613", + "react-experimental-builtin": "npm:react@0.0.0-experimental-dfd30974ab-20240613", + "react-is-builtin": "npm:react-is@19.0.0-rc-dfd30974ab-20240613", + "react-server-dom-turbopack": "19.0.0-rc-dfd30974ab-20240613", + "react-server-dom-turbopack-experimental": "npm:react-server-dom-turbopack@0.0.0-experimental-dfd30974ab-20240613", + "react-server-dom-webpack": "19.0.0-rc-dfd30974ab-20240613", + "react-server-dom-webpack-experimental": "npm:react-server-dom-webpack@0.0.0-experimental-dfd30974ab-20240613", "react-ssr-prepass": "1.0.8", "react-virtualized": "9.22.3", "relay-compiler": "13.0.2", @@ -222,8 +222,8 @@ "resolve-from": "5.0.0", "sass": "1.54.0", "satori": "0.10.9", - "scheduler-builtin": "npm:scheduler@0.25.0-rc-20b6f4c0e8-20240607", - "scheduler-experimental-builtin": "npm:scheduler@0.0.0-experimental-20b6f4c0e8-20240607", + "scheduler-builtin": "npm:scheduler@0.25.0-rc-dfd30974ab-20240613", + "scheduler-experimental-builtin": "npm:scheduler@0.0.0-experimental-dfd30974ab-20240613", "seedrandom": "3.0.5", "semver": "7.3.7", "shell-quote": "1.7.3", @@ -257,10 +257,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-20b6f4c0e8-20240607", - "react-dom": "19.0.0-rc-20b6f4c0e8-20240607", - "react-is": "19.0.0-rc-20b6f4c0e8-20240607", - "scheduler": "0.25.0-rc-20b6f4c0e8-20240607" + "react": "19.0.0-rc-dfd30974ab-20240613", + "react-dom": "19.0.0-rc-dfd30974ab-20240613", + "react-is": "19.0.0-rc-dfd30974ab-20240613", + "scheduler": "0.25.0-rc-dfd30974ab-20240613" }, "engines": { "node": ">=18.18.0", 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 75c6b45cbe59e..84110e87630bd 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 @@ -8,38420 +8,24710 @@ * LICENSE file in the root directory of this source tree. */ -'use strict'; - -if (process.env.NODE_ENV !== "production") { - (function() { -'use strict'; -if ( - typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' && - typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart === - 'function' -) { - __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error()); -} -var React = require("next/dist/compiled/react-experimental"); -var Scheduler = require("next/dist/compiled/scheduler-experimental"); -var ReactDOM = require('react-dom'); - -var ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE; - -// ----------------------------------------------------------------------------- -// Killswitch -// -// Flags that exist solely to turn off a change in case it causes a regression -// when it rolls out to prod. We should remove these as soon as possible. -// ----------------------------------------------------------------------------- -// ----------------------------------------------------------------------------- -// Land or remove (moderate effort) -// -// Flags that can be probably deleted or landed, but might require extra effort -// like migrating internal callers or performance testing. -// ----------------------------------------------------------------------------- -// TODO: Finish rolling out in www - -var favorSafetyOverHydrationPerf = true; -var enableAsyncActions = true; // Need to remove didTimeout argument from Scheduler before landing - -var disableDefaultPropsExceptForClasses = true; // ----------------------------------------------------------------------------- -// Slated for removal in the future (significant effort) -// -// These are experiments that didn't work out, and never shipped, but we can't -// delete from the codebase until we migrate internal callers. -// ----------------------------------------------------------------------------- -// Add a callback property to suspense to notify which promises are currently -// in the update queue. This allows reporting and tracing of what is causing -// the user to see a loading state. -// -// Also allows hydration callbacks to fire when a dehydrated boundary gets -// hydrated or deleted. -// -// This will eventually be replaced by the Transition Tracing proposal. - -var enableSuspenseCallback = false; // Experimental Scope support. - -var enableLazyContextPropagation = false; // FB-only usage. The new API has different semantics. - -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 - -var disableIEWorkarounds = true; // Filter certain DOM attributes (e.g. src, href) if their values are empty -// 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; // Make equivalent to instead of -// React DOM Chopping Block -// -// Similar to main Chopping Block but only flags related to React DOM. These are -// grouped because we will likely batch all of them into a single major release. -// ----------------------------------------------------------------------------- -// Disable support for comment nodes as React DOM containers. Already disabled -// in open source, but www codebase still relies on it. Need to remove. - -var disableCommentsAsDOMContainers = true; -// Debugging and DevTools -// ----------------------------------------------------------------------------- -// Adds user timing marks for e.g. state updates, suspense, and work loop stuff, -// for an experimental timeline tool. - -var enableSchedulingProfiler = true; // Helps identify side effects in render-phase lifecycle hooks and setState - -var enableProfilerTimer = true; // Record durations for commit and passive effects phases. - -var enableProfilerCommitHooks = true; // Phase param passed to onRender callback differentiates between an "update" and a "cascading-update". - -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, new Error('react-stack-top-frame')); +/* + Modernizr 3.0.0pre (Custom Build) | MIT +*/ +"use strict"; +"production" !== process.env.NODE_ENV && + (function () { + function findHook(fiber, id) { + for (fiber = fiber.memoizedState; null !== fiber && 0 < id; ) + (fiber = fiber.next), id--; + return fiber; + } + function copyWithSetImpl(obj, path, index, value) { + if (index >= path.length) return value; + var key = path[index], + updated = isArrayImpl(obj) ? obj.slice() : assign({}, obj); + updated[key] = copyWithSetImpl(obj[key], path, index + 1, value); + return updated; } - } -} -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, new Error('react-stack-top-frame')); + function copyWithRename(obj, oldPath, newPath) { + if (oldPath.length !== newPath.length) + warn("copyWithRename() expects paths of the same length"); + else { + for (var i = 0; i < newPath.length - 1; i++) + if (oldPath[i] !== newPath[i]) { + warn( + "copyWithRename() expects paths to be the same except for the deepest key" + ); + return; + } + return copyWithRenameImpl(obj, oldPath, newPath, 0); + } + } + function copyWithRenameImpl(obj, oldPath, newPath, index) { + var oldKey = oldPath[index], + updated = isArrayImpl(obj) ? obj.slice() : assign({}, obj); + index + 1 === oldPath.length + ? ((updated[newPath[index]] = updated[oldKey]), + isArrayImpl(updated) + ? updated.splice(oldKey, 1) + : delete updated[oldKey]) + : (updated[oldKey] = copyWithRenameImpl( + obj[oldKey], + oldPath, + newPath, + index + 1 + )); + return updated; } - } -} // eslint-disable-next-line react-internal/no-production-logging - -var supportsCreateTask = !!console.createTask; - -function printWarning(level, format, args, currentStack) { - // 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(currentStack); - - if (stack !== '') { - format += '%s'; - args = args.concat([stack]); - } + function copyWithDeleteImpl(obj, path, index) { + var key = path[index], + updated = isArrayImpl(obj) ? obj.slice() : assign({}, obj); + if (index + 1 === path.length) + return ( + isArrayImpl(updated) ? updated.splice(key, 1) : delete updated[key], + updated + ); + updated[key] = copyWithDeleteImpl(obj[key], path, index + 1); + return updated; } - - 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 - */ -var ELEMENT_NODE = 1; -var TEXT_NODE = 3; -var COMMENT_NODE = 8; -var DOCUMENT_NODE = 9; -var DOCUMENT_TYPE_NODE = 10; -var DOCUMENT_FRAGMENT_NODE = 11; - -function isValidContainer(node) { - return !!(node && (node.nodeType === ELEMENT_NODE || node.nodeType === DOCUMENT_NODE || node.nodeType === DOCUMENT_FRAGMENT_NODE || !disableCommentsAsDOMContainers )); -} // TODO: Remove this function which also includes comment nodes. - -/** - * `ReactInstanceMap` maintains a mapping from a public facing stateful - * instance (key) and the internal representation (value). This allows public - * methods to accept the user facing instance as an argument and map them back - * to internal methods. - * - * Note that this module is currently shared and assumed to be stateless. - * If this becomes an actual Map, that will break. - */ -function get(key) { - return key._reactInternals; -} -function set(key, value) { - key._reactInternals = value; -} - -var FunctionComponent = 0; -var ClassComponent = 1; -var HostRoot = 3; // Root of a host tree. Could be nested inside another node. - -var HostPortal = 4; // A subtree. Could be an entry point to a different renderer. - -var HostComponent = 5; -var HostText = 6; -var Fragment = 7; -var Mode = 8; -var ContextConsumer = 9; -var ContextProvider = 10; -var ForwardRef = 11; -var Profiler = 12; -var SuspenseComponent = 13; -var MemoComponent = 14; -var SimpleMemoComponent = 15; -var LazyComponent = 16; -var IncompleteClassComponent = 17; -var DehydratedFragment = 18; -var SuspenseListComponent = 19; -var ScopeComponent = 21; -var OffscreenComponent = 22; -var LegacyHiddenComponent = 23; -var CacheComponent = 24; -var TracingMarkerComponent = 25; -var HostHoistable = 26; -var HostSingleton = 27; -var IncompleteFunctionComponent = 28; - -// When adding new symbols to this file, -// Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols' -// The Symbol used to tag the ReactElement-like types. - -var REACT_LEGACY_ELEMENT_TYPE = Symbol.for('react.element'); -var REACT_ELEMENT_TYPE = Symbol.for('react.transitional.element') ; -var REACT_PORTAL_TYPE = Symbol.for('react.portal'); -var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment'); -var REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode'); -var REACT_PROFILER_TYPE = Symbol.for('react.profiler'); -var REACT_PROVIDER_TYPE = Symbol.for('react.provider'); // TODO: Delete with enableRenderableContext - -var REACT_CONSUMER_TYPE = Symbol.for('react.consumer'); -var REACT_CONTEXT_TYPE = Symbol.for('react.context'); -var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref'); -var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense'); -var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list'); -var REACT_MEMO_TYPE = Symbol.for('react.memo'); -var REACT_LAZY_TYPE = Symbol.for('react.lazy'); -var REACT_SCOPE_TYPE = Symbol.for('react.scope'); -var REACT_DEBUG_TRACING_MODE_TYPE = Symbol.for('react.debug_trace_mode'); -var REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen'); -var REACT_LEGACY_HIDDEN_TYPE = Symbol.for('react.legacy_hidden'); -var REACT_TRACING_MARKER_TYPE = Symbol.for('react.tracing_marker'); -var REACT_MEMO_CACHE_SENTINEL = Symbol.for('react.memo_cache_sentinel'); -var REACT_POSTPONE_TYPE = Symbol.for('react.postpone'); -var MAYBE_ITERATOR_SYMBOL = Symbol.iterator; -var FAUX_ITERATOR_SYMBOL = '@@iterator'; -function getIteratorFn(maybeIterable) { - if (maybeIterable === null || typeof maybeIterable !== 'object') { - return null; - } - - var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]; - - if (typeof maybeIterator === 'function') { - return maybeIterator; - } - - return null; -} -var ASYNC_ITERATOR = Symbol.asyncIterator; - -function getWrappedName$1(outerType, innerType, wrapperName) { - var displayName = outerType.displayName; - - if (displayName) { - return displayName; - } - - var functionName = innerType.displayName || innerType.name || ''; - return functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName; -} // Keep in sync with react-reconciler/getComponentNameFromFiber - - -function getContextName$1(type) { - return type.displayName || 'Context'; -} - -var REACT_CLIENT_REFERENCE = Symbol.for('react.client.reference'); // Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead. - -function getComponentNameFromType(type) { - if (type == null) { - // Host root, text node or just invalid type. - return null; - } - - if (typeof type === 'function') { - if (type.$$typeof === REACT_CLIENT_REFERENCE) { - // TODO: Create a convention for naming client references with debug info. + function shouldSuspendImpl() { + return !1; + } + function shouldErrorImpl() { return null; } - - return type.displayName || type.name || null; - } - - if (typeof type === 'string') { - return type; - } - - switch (type) { - case REACT_FRAGMENT_TYPE: - return 'Fragment'; - - case REACT_PORTAL_TYPE: - return 'Portal'; - - case REACT_PROFILER_TYPE: - return 'Profiler'; - - case REACT_STRICT_MODE_TYPE: - return 'StrictMode'; - - case REACT_SUSPENSE_TYPE: - return 'Suspense'; - - case REACT_SUSPENSE_LIST_TYPE: - return 'SuspenseList'; - - } - - if (typeof type === 'object') { - { - if (typeof type.tag === 'number') { - error('Received an unexpected object in getComponentNameFromType(). ' + 'This is likely a bug in React. Please file an issue.'); - } + function warnInvalidHookAccess() { + error$jscomp$0( + "Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. You can only call Hooks at the top level of your React function. For more information, see https://react.dev/link/rules-of-hooks" + ); } - - switch (type.$$typeof) { - case REACT_PROVIDER_TYPE: - { - return null; - } - - case REACT_CONTEXT_TYPE: - var context = type; - - { - return getContextName$1(context) + '.Provider'; - } - - case REACT_CONSUMER_TYPE: - { - var consumer = type; - return getContextName$1(consumer._context) + '.Consumer'; - } - - case REACT_FORWARD_REF_TYPE: - return getWrappedName$1(type, type.render, 'ForwardRef'); - - case REACT_MEMO_TYPE: - var outerName = type.displayName || null; - - if (outerName !== null) { - return outerName; - } - - return getComponentNameFromType(type.type) || 'Memo'; - - case REACT_LAZY_TYPE: - { - var lazyComponent = type; - var payload = lazyComponent._payload; - var init = lazyComponent._init; - - try { - return getComponentNameFromType(init(payload)); - } catch (x) { - return null; - } + function warnInvalidContextAccess() { + error$jscomp$0( + "Context can only be read while React is rendering. In classes, you can read it in the render method or getDerivedStateFromProps. In function components, you can read it directly in the function body, but not inside Hooks like useReducer() or useMemo()." + ); + } + function noop$2() {} + function warnForMissingKey() {} + function setToSortedString(set) { + var array = []; + set.forEach(function (value) { + array.push(value); + }); + return array.sort().join(", "); + } + function findHostInstancesForRefresh(root, families) { + var hostInstances = new Set(); + families = new Set( + families.map(function (family) { + return family.current; + }) + ); + findHostInstancesForMatchingFibersRecursively( + root.current, + families, + hostInstances + ); + return hostInstances; + } + function scheduleRoot(root, element) { + root.context === emptyContextObject && + (updateContainerSync(element, root, null, null), flushSyncWork$1()); + } + function scheduleRefresh(root, update) { + if (null !== resolveFamily) { + var staleFamilies = update.staleFamilies; + update = update.updatedFamilies; + flushPassiveEffects(); + scheduleFibersWithFamiliesRecursively( + root.current, + update, + staleFamilies + ); + flushSyncWork$1(); + } + } + function setRefreshHandler(handler) { + resolveFamily = handler; + } + function warn(format) { + if (!suppressWarning) { + for ( + var _len = arguments.length, + args = Array(1 < _len ? _len - 1 : 0), + _key = 1; + _key < _len; + _key++ + ) + args[_key - 1] = arguments[_key]; + printWarning("warn", format, args, Error("react-stack-top-frame")); + } + } + function error$jscomp$0(format) { + if (!suppressWarning) { + for ( + var _len2 = arguments.length, + args = Array(1 < _len2 ? _len2 - 1 : 0), + _key2 = 1; + _key2 < _len2; + _key2++ + ) + args[_key2 - 1] = arguments[_key2]; + printWarning("error", format, args, Error("react-stack-top-frame")); + } + } + function printWarning(level, format, args, currentStack) { + !supportsCreateTask && + ReactSharedInternals.getCurrentStack && + ((currentStack = ReactSharedInternals.getCurrentStack(currentStack)), + "" !== currentStack && + ((format += "%s"), (args = args.concat([currentStack])))); + args.unshift(format); + Function.prototype.apply.call(console[level], console, args); + } + function isValidContainer(node) { + return !( + !node || + (1 !== node.nodeType && 9 !== node.nodeType && 11 !== node.nodeType) + ); + } + function getIteratorFn(maybeIterable) { + if (null === maybeIterable || "object" !== typeof maybeIterable) + return null; + maybeIterable = + (MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL]) || + maybeIterable["@@iterator"]; + return "function" === typeof maybeIterable ? maybeIterable : null; + } + function getComponentNameFromType(type) { + if (null == type) return null; + if ("function" === typeof type) + return type.$$typeof === REACT_CLIENT_REFERENCE + ? null + : type.displayName || type.name || null; + if ("string" === typeof type) return type; + switch (type) { + case REACT_FRAGMENT_TYPE: + return "Fragment"; + case REACT_PORTAL_TYPE: + return "Portal"; + case REACT_PROFILER_TYPE: + return "Profiler"; + case REACT_STRICT_MODE_TYPE: + return "StrictMode"; + case REACT_SUSPENSE_TYPE: + return "Suspense"; + case REACT_SUSPENSE_LIST_TYPE: + return "SuspenseList"; + } + if ("object" === typeof type) + switch ( + ("number" === typeof type.tag && + error$jscomp$0( + "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue." + ), + type.$$typeof) + ) { + case REACT_CONTEXT_TYPE: + return (type.displayName || "Context") + ".Provider"; + case REACT_CONSUMER_TYPE: + return (type._context.displayName || "Context") + ".Consumer"; + case REACT_FORWARD_REF_TYPE: + var innerType = type.render; + type = type.displayName; + type || + ((type = innerType.displayName || innerType.name || ""), + (type = "" !== type ? "ForwardRef(" + type + ")" : "ForwardRef")); + return type; + case REACT_MEMO_TYPE: + return ( + (innerType = type.displayName || null), + null !== innerType + ? innerType + : getComponentNameFromType(type.type) || "Memo" + ); + case REACT_LAZY_TYPE: + innerType = type._payload; + type = type._init; + try { + return getComponentNameFromType(type(innerType)); + } catch (x) {} } + return null; } - } - - return null; -} - -function getWrappedName(outerType, innerType, wrapperName) { - var functionName = innerType.displayName || innerType.name || ''; - return outerType.displayName || (functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName); -} // Keep in sync with shared/getComponentNameFromType - - -function getContextName(type) { - return type.displayName || 'Context'; -} - -function getComponentNameFromOwner(owner) { - if (typeof owner.tag === 'number') { - return getComponentNameFromFiber(owner); - } - - if (typeof owner.name === 'string') { - return owner.name; - } - - return null; -} -function getComponentNameFromFiber(fiber) { - var tag = fiber.tag, - type = fiber.type; - - switch (tag) { - case CacheComponent: - return 'Cache'; - - case ContextConsumer: - { - var consumer = type; - return getContextName(consumer._context) + '.Consumer'; + function getComponentNameFromOwner(owner) { + return "number" === typeof owner.tag + ? getComponentNameFromFiber(owner) + : "string" === typeof owner.name + ? owner.name + : null; + } + function getComponentNameFromFiber(fiber) { + var type = fiber.type; + switch (fiber.tag) { + case 24: + return "Cache"; + case 9: + return (type._context.displayName || "Context") + ".Consumer"; + case 10: + return (type.displayName || "Context") + ".Provider"; + case 18: + return "DehydratedFragment"; + case 11: + return ( + (fiber = type.render), + (fiber = fiber.displayName || fiber.name || ""), + type.displayName || + ("" !== fiber ? "ForwardRef(" + fiber + ")" : "ForwardRef") + ); + case 7: + return "Fragment"; + case 26: + case 27: + case 5: + return type; + case 4: + return "Portal"; + case 3: + return "Root"; + case 6: + return "Text"; + case 16: + return getComponentNameFromType(type); + case 8: + return type === REACT_STRICT_MODE_TYPE ? "StrictMode" : "Mode"; + case 22: + return "Offscreen"; + case 12: + return "Profiler"; + case 21: + return "Scope"; + case 13: + return "Suspense"; + case 19: + return "SuspenseList"; + case 25: + return "TracingMarker"; + case 1: + case 0: + case 14: + case 15: + if ("function" === typeof type) + return type.displayName || type.name || null; + if ("string" === typeof type) return type; + break; + case 29: + type = fiber._debugInfo; + if (null != type) + for (var i = type.length - 1; 0 <= i; i--) + if ("string" === typeof type[i].name) return type[i].name; + if (null !== fiber.return) + return getComponentNameFromFiber(fiber.return); } - - case ContextProvider: - { - var _context = type; - return getContextName(_context) + '.Provider'; + return null; + } + function disabledLog() {} + function disableLogs() { + if (0 === disabledDepth) { + prevLog = console.log; + prevInfo = console.info; + prevWarn = console.warn; + prevError = console.error; + prevGroup = console.group; + prevGroupCollapsed = console.groupCollapsed; + prevGroupEnd = console.groupEnd; + var props = { + configurable: !0, + enumerable: !0, + value: disabledLog, + writable: !0 + }; + Object.defineProperties(console, { + info: props, + log: props, + warn: props, + error: props, + group: props, + groupCollapsed: props, + groupEnd: props + }); } - - case DehydratedFragment: - return 'DehydratedFragment'; - - case ForwardRef: - return getWrappedName(type, type.render, 'ForwardRef'); - - case Fragment: - return 'Fragment'; - - case HostHoistable: - case HostSingleton: - case HostComponent: - // Host component type is the display name (e.g. "div", "View") - return type; - - case HostPortal: - return 'Portal'; - - case HostRoot: - return 'Root'; - - case HostText: - return 'Text'; - - case LazyComponent: - // Name comes from the type in this case; we don't have a tag. - return getComponentNameFromType(type); - - case Mode: - if (type === REACT_STRICT_MODE_TYPE) { - // Don't be less specific than shared/getComponentNameFromType - return 'StrictMode'; + disabledDepth++; + } + function reenableLogs() { + disabledDepth--; + if (0 === disabledDepth) { + var props = { configurable: !0, enumerable: !0, writable: !0 }; + 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 }) + }); } + 0 > disabledDepth && + error$jscomp$0( + "disabledDepth fell below zero. This is a bug in React. Please file an issue." + ); + } + 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; + } + function describeNativeComponentFrame(fn, construct) { + if (!fn || reentry) return ""; + var frame = componentFrameCache.get(fn); + if (void 0 !== frame) return frame; + reentry = !0; + frame = Error.prepareStackTrace; + Error.prepareStackTrace = void 0; + var previousDispatcher = null; + previousDispatcher = ReactSharedInternals.H; + ReactSharedInternals.H = null; + disableLogs(); + 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 ( + sampleStack = _RunInRootFrame$Deter = 0; + _RunInRootFrame$Deter < sampleLines.length && + !sampleLines[_RunInRootFrame$Deter].includes( + "DetermineComponentFrameRoot" + ); - return 'Mode'; - - case OffscreenComponent: - return 'Offscreen'; - - case Profiler: - return 'Profiler'; - - case ScopeComponent: - return 'Scope'; - - case SuspenseComponent: - return 'Suspense'; - - case SuspenseListComponent: - return 'SuspenseList'; - - case TracingMarkerComponent: - return 'TracingMarker'; - // The display name for these tags come from the user-provided type: - - case IncompleteClassComponent: - case IncompleteFunctionComponent: - { - break; + ) + _RunInRootFrame$Deter++; + for ( + ; + sampleStack < controlLines.length && + !controlLines[sampleStack].includes("DetermineComponentFrameRoot"); + + ) + sampleStack++; + if ( + _RunInRootFrame$Deter === sampleLines.length || + sampleStack === controlLines.length + ) + for ( + _RunInRootFrame$Deter = sampleLines.length - 1, + sampleStack = controlLines.length - 1; + 1 <= _RunInRootFrame$Deter && + 0 <= sampleStack && + sampleLines[_RunInRootFrame$Deter] !== controlLines[sampleStack]; + + ) + sampleStack--; + for ( + ; + 1 <= _RunInRootFrame$Deter && 0 <= sampleStack; + _RunInRootFrame$Deter--, sampleStack-- + ) + if ( + sampleLines[_RunInRootFrame$Deter] !== controlLines[sampleStack] + ) { + if (1 !== _RunInRootFrame$Deter || 1 !== sampleStack) { + do + if ( + (_RunInRootFrame$Deter--, + sampleStack--, + 0 > sampleStack || + sampleLines[_RunInRootFrame$Deter] !== + controlLines[sampleStack]) + ) { + var _frame = + "\n" + + sampleLines[_RunInRootFrame$Deter].replace( + " at new ", + " at " + ); + fn.displayName && + _frame.includes("") && + (_frame = _frame.replace("", fn.displayName)); + "function" === typeof fn && + componentFrameCache.set(fn, _frame); + return _frame; + } + while (1 <= _RunInRootFrame$Deter && 0 <= sampleStack); + } + break; + } + } + } finally { + (reentry = !1), + (ReactSharedInternals.H = previousDispatcher), + reenableLogs(), + (Error.prepareStackTrace = frame); + } + sampleLines = (sampleLines = fn ? fn.displayName || fn.name : "") + ? describeBuiltInComponentFrame(sampleLines) + : ""; + "function" === typeof fn && componentFrameCache.set(fn, sampleLines); + return sampleLines; + } + function callComponentInDEV(Component, props, secondArg) { + var wasRendering = isRendering; + isRendering = !0; + try { + return Component(props, secondArg); + } finally { + isRendering = wasRendering; } - - // Fallthrough - - case ClassComponent: - case FunctionComponent: - case MemoComponent: - case SimpleMemoComponent: - if (typeof type === 'function') { - return type.displayName || type.name || null; + } + function callRenderInDEV(instance) { + var wasRendering = isRendering; + isRendering = !0; + try { + return instance.render(); + } finally { + isRendering = wasRendering; + } + } + function callLazyInitInDEV(lazy) { + var init = lazy._init; + return init(lazy._payload); + } + function isNotExternal(stackFrame) { + return !externalRegExp.test(stackFrame); + } + function filterDebugStack(error) { + error = error.stack; + error.startsWith("Error: react-stack-top-frame\n") && + (error = error.slice(29)); + error = error.split("\n").slice(1); + if (null === callComponentFrame) { + var stack = callComponentInDEV( + Error, + "react-stack-top-frame", + {} + ).stack, + startIdx = stack.startsWith("Error: react-stack-top-frame\n") + ? 29 + : 0, + endIdx = stack.indexOf("\n", startIdx); + callComponentFrame = + -1 === endIdx ? stack.slice(startIdx) : stack.slice(startIdx, endIdx); + } + stack = error.indexOf(callComponentFrame); + if ( + -1 === stack && + (null === callLazyInitFrame && + ((stack = callLazyInitInDEV({ + $$typeof: REACT_LAZY_TYPE, + _init: Error, + _payload: "react-stack-top-frame" + }).stack), + (startIdx = stack.startsWith("Error: react-stack-top-frame\n") + ? 29 + : 0), + (endIdx = stack.indexOf("\n", startIdx)), + (callLazyInitFrame = + -1 === endIdx + ? stack.slice(startIdx) + : stack.slice(startIdx, endIdx))), + (stack = error.indexOf(callLazyInitFrame)), + -1 === stack) + ) { + if (null === callIteratorFrame) + try { + callRenderInDEV({ render: null }), (callIteratorFrame = ""); + } catch (error$2) { + (stack = error$2.stack), + (startIdx = stack.startsWith("TypeError: ") + ? stack.indexOf("\n") + 1 + : 0), + (endIdx = stack.indexOf("\n", startIdx)), + (callIteratorFrame = + -1 === endIdx + ? stack.slice(startIdx) + : stack.slice(startIdx, endIdx)); + } + stack = error.indexOf(callIteratorFrame); + } + if (-1 !== stack) error.length = stack; + else return ""; + return error.filter(isNotExternal).join("\n"); + } + 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 ""; } - - if (typeof type === 'string') { - return type; + } + function getStackByFiberInDevAndProd(workInProgress) { + try { + var info = ""; + do { + info += describeFiber(workInProgress); + var debugInfo = workInProgress._debugInfo; + if (debugInfo) + for (var i = debugInfo.length - 1; 0 <= i; i--) { + var entry = debugInfo[i]; + if ("string" === typeof entry.name) { + var JSCompiler_temp_const = info, + env = entry.env; + var JSCompiler_inline_result = describeBuiltInComponentFrame( + entry.name + (env ? " (" + env + ")" : "") + ); + info = JSCompiler_temp_const + JSCompiler_inline_result; + } + } + workInProgress = workInProgress.return; + } while (workInProgress); + return info; + } catch (x) { + return "\nError generating stack: " + x.message + "\n" + x.stack; } - - break; - - } - - return null; -} - -var NoFlags$1 = -/* */ -0; -var PerformedWork = -/* */ -1; -var Placement = -/* */ -2; -var DidCapture = -/* */ -128; -var Hydrating = -/* */ -4096; // You can change the rest (and add more). - -var Update = -/* */ -4; -/* Skipped value: 0b0000000000000000000000001000; */ - -var ChildDeletion = -/* */ -16; -var ContentReset = -/* */ -32; -var Callback = -/* */ -64; -/* Used by DidCapture: 0b0000000000000000000010000000; */ - -var ForceClientRender = -/* */ -256; -var Ref = -/* */ -512; -var Snapshot = -/* */ -1024; -var Passive$1 = -/* */ -2048; -/* Used by Hydrating: 0b0000000000000001000000000000; */ - -var Visibility = -/* */ -8192; -var StoreConsistency = -/* */ -16384; // It's OK to reuse these bits because these flags are mutually exclusive for -// different fiber types. We should really be doing this for as many flags as -// possible, because we're about to run out of bits. - -var ScheduleRetry = StoreConsistency; -var ShouldSuspendCommit = Visibility; -var DidDefer = ContentReset; -var FormReset = Snapshot; - -var HostEffectMask = -/* */ -32767; // These are not really side effects, but we still reuse this field. - -var Incomplete = -/* */ -32768; -var ShouldCapture = -/* */ -65536; -var ForceUpdateForLegacySuspense = -/* */ -131072; -var Forked = -/* */ -1048576; // Static tags describe aspects of a fiber that are not specific to a render, -// e.g. a fiber uses a passive effect (even if there are no updates on this particular render). -// This enables us to defer more work in the unmount case, -// since we can defer traversing the tree during layout to look for Passive effects, -// and instead rely on the static flag as a signal that there may be cleanup work. - -var RefStatic = -/* */ -2097152; -var LayoutStatic = -/* */ -4194304; -var PassiveStatic = -/* */ -8388608; -var MaySuspendCommit = -/* */ -16777216; // Flag used to identify newly inserted fibers. It isn't reset after commit unlike `Placement`. - -var PlacementDEV = -/* */ -33554432; -var MountLayoutDev = -/* */ -67108864; -var MountPassiveDev = -/* */ -134217728; // Groups of flags that are used in the commit phase to skip over trees that -// don't contain effects, by checking subtreeFlags. - -var BeforeMutationMask = // TODO: Remove Update flag from before mutation phase by re-landing Visibility -// flag logic (see #20043) -Update | Snapshot | (0); -var MutationMask = Placement | Update | ChildDeletion | ContentReset | Ref | Hydrating | Visibility | FormReset; -var LayoutMask = Update | Callback | Ref | Visibility; // TODO: Split into PassiveMountMask and PassiveUnmountMask - -var PassiveMask = Passive$1 | Visibility | ChildDeletion; // Union of tags that don't get reset on clones. -// This allows certain concepts to persist without recalculating them, -// e.g. whether a subtree contains passive effects or portals. - -var StaticMask = LayoutStatic | PassiveStatic | RefStatic | MaySuspendCommit; - -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 */ + function describeFunctionComponentFrameWithoutLineNumber(fn) { + return (fn = fn ? fn.displayName || fn.name : "") + ? describeBuiltInComponentFrame(fn) + : ""; } - - if (disabledDepth < 0) { - error('disabledDepth fell below zero. ' + 'This is a bug in React. Please file an issue.'); + function getCurrentFiberOwnerNameInDevOrNull() { + if (null === current) return null; + var owner = current._debugOwner; + return null != owner ? getComponentNameFromOwner(owner) : null; } - } -} - -var prefix; -function describeBuiltInComponentFrame(name) { - { - if (prefix === undefined) { - // Extract the VM specific prefix used by each line. + function getCurrentParentStackInDev() { + return null === current ? "" : getStackByFiberInDevAndProd(current); + } + function getCurrentFiberStackInDev(stack) { + if (null === current) return ""; + var workInProgress = current; try { - throw Error(); + var info = ""; + if (stack) { + var formattedTopStack = filterDebugStack(stack); + "" !== formattedTopStack && (info += "\n" + formattedTopStack); + } + 6 === workInProgress.tag && (workInProgress = workInProgress.return); + switch (workInProgress.tag) { + case 26: + case 27: + case 5: + info += describeBuiltInComponentFrame(workInProgress.type); + break; + case 13: + info += describeBuiltInComponentFrame("Suspense"); + break; + case 19: + info += describeBuiltInComponentFrame("SuspenseList"); + break; + case 0: + case 15: + case 1: + workInProgress._debugOwner || + "" !== info || + (info += describeFunctionComponentFrameWithoutLineNumber( + workInProgress.type + )); + break; + case 11: + workInProgress._debugOwner || + "" !== info || + (info += describeFunctionComponentFrameWithoutLineNumber( + workInProgress.type.render + )); + } + for (stack = workInProgress; stack; ) + if ("number" === typeof stack.tag) { + workInProgress = stack; + stack = workInProgress._debugOwner; + var debugStack = workInProgress._debugStack; + stack && + debugStack && + ("string" !== typeof debugStack && + (workInProgress._debugStack = debugStack = + filterDebugStack(debugStack)), + "" !== debugStack && (info += "\n" + debugStack)); + } else if ("string" === typeof stack.stack) + "" !== stack.stack && (info += "\n" + stack.stack), + (stack = stack.owner); + else break; + var JSCompiler_inline_result = info; } catch (x) { - var match = x.stack.trim().match(/\n( *(at )?)/); - prefix = match && match[1] || ''; + JSCompiler_inline_result = + "\nError generating stack: " + x.message + "\n" + x.stack; } - } // 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; + return JSCompiler_inline_result; } - } - - 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; - + function runWithFiberInDEV(fiber, callback, arg0, arg1, arg2, arg3, arg4) { + var previousFiber = current; + ReactSharedInternals.getCurrentStack = + null === fiber ? null : getCurrentFiberStackInDev; + isRendering = !1; + current = fiber; 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 !== fiber && fiber._debugTask + ? fiber._debugTask.run( + callback.bind(null, arg0, arg1, arg2, arg3, arg4) + ) + : callback(arg0, arg1, arg2, arg3, arg4); + } finally { + current = previousFiber; } - - return [null, null]; + throw Error( + "runWithFiberInDEV should never be called in production. This is a bug in React." + ); } - }; // $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--; - } + function getNearestMountedFiber(fiber) { + var node = fiber, + nearestMounted = fiber; + if (fiber.alternate) for (; node.return; ) node = node.return; + else { + fiber = node; + do + (node = fiber), + 0 !== (node.flags & 4098) && (nearestMounted = node.return), + (fiber = node.return); + while (fiber); + } + return 3 === node.tag ? nearestMounted : null; + } + function getSuspenseInstanceFromFiber(fiber) { + if (13 === fiber.tag) { + var suspenseState = fiber.memoizedState; + null === suspenseState && + ((fiber = fiber.alternate), + null !== fiber && (suspenseState = fiber.memoizedState)); + if (null !== suspenseState) return suspenseState.dehydrated; } - - 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); + return null; + } + function assertIsMounted(fiber) { + if (getNearestMountedFiber(fiber) !== fiber) + throw Error("Unable to find node on an unmounted component."); + } + function findCurrentFiberUsingSlowPath(fiber) { + var alternate = fiber.alternate; + if (!alternate) { + alternate = getNearestMountedFiber(fiber); + if (null === alternate) + throw Error("Unable to find node on an unmounted component."); + return alternate !== fiber ? null : fiber; + } + for (var a = fiber, b = alternate; ; ) { + var parentA = a.return; + if (null === parentA) break; + var parentB = parentA.alternate; + if (null === parentB) { + b = parentA.return; + if (null !== b) { + a = b; + continue; } - break; } + if (parentA.child === parentB.child) { + for (parentB = parentA.child; parentB; ) { + if (parentB === a) return assertIsMounted(parentA), fiber; + if (parentB === b) return assertIsMounted(parentA), alternate; + parentB = parentB.sibling; + } + throw Error("Unable to find node on an unmounted component."); + } + if (a.return !== b.return) (a = parentA), (b = parentB); + else { + for (var didFindChild = !1, _child = parentA.child; _child; ) { + if (_child === a) { + didFindChild = !0; + a = parentA; + b = parentB; + break; + } + if (_child === b) { + didFindChild = !0; + b = parentA; + a = parentB; + break; + } + _child = _child.sibling; + } + if (!didFindChild) { + for (_child = parentB.child; _child; ) { + if (_child === a) { + didFindChild = !0; + a = parentB; + b = parentA; + break; + } + if (_child === b) { + didFindChild = !0; + b = parentB; + a = parentA; + break; + } + _child = _child.sibling; + } + if (!didFindChild) + throw Error( + "Child was not found in either parent set. This indicates a bug in React related to the return pointer. Please file an issue." + ); + } + } + if (a.alternate !== b) + throw Error( + "Return fibers should always be each others' alternates. This error is likely caused by a bug in React. Please file an issue." + ); + } + if (3 !== a.tag) + throw Error("Unable to find node on an unmounted component."); + return a.stateNode.current === a ? fiber : alternate; + } + function findCurrentHostFiber(parent) { + parent = findCurrentFiberUsingSlowPath(parent); + return null !== parent ? findCurrentHostFiberImpl(parent) : null; + } + function findCurrentHostFiberImpl(node) { + var tag = node.tag; + if (5 === tag || 26 === tag || 27 === tag || 6 === tag) return node; + for (node = node.child; null !== node; ) { + tag = findCurrentHostFiberImpl(node); + if (null !== tag) return tag; + node = node.sibling; } + return null; } - } 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); + function createCursor(defaultValue) { + return { current: defaultValue }; + } + function pop(cursor, fiber) { + 0 > index$jscomp$0 + ? error$jscomp$0("Unexpected pop.") + : (fiber !== fiberStack[index$jscomp$0] && + error$jscomp$0("Unexpected Fiber popped."), + (cursor.current = valueStack[index$jscomp$0]), + (valueStack[index$jscomp$0] = null), + (fiberStack[index$jscomp$0] = null), + index$jscomp$0--); + } + function push(cursor, value, fiber) { + index$jscomp$0++; + valueStack[index$jscomp$0] = cursor.current; + fiberStack[index$jscomp$0] = fiber; + cursor.current = value; + } + function requiredContext(c) { + null === c && + error$jscomp$0( + "Expected host context to exist. This error is likely caused by a bug in React. Please file an issue." + ); + return c; + } + function pushHostContainer(fiber, nextRootInstance) { + push(rootInstanceStackCursor, nextRootInstance, fiber); + push(contextFiberStackCursor, fiber, fiber); + push(contextStackCursor, null, fiber); + var nextRootContext = nextRootInstance.nodeType; + switch (nextRootContext) { + case 9: + case 11: + nextRootContext = 9 === nextRootContext ? "#document" : "#fragment"; + nextRootInstance = (nextRootInstance = + nextRootInstance.documentElement) + ? (nextRootInstance = nextRootInstance.namespaceURI) + ? getOwnHostContext(nextRootInstance) + : HostContextNamespaceNone + : HostContextNamespaceNone; + break; + default: + if ( + ((nextRootInstance = + 8 === nextRootContext + ? nextRootInstance.parentNode + : nextRootInstance), + (nextRootContext = nextRootInstance.tagName), + (nextRootInstance = nextRootInstance.namespaceURI)) + ) + (nextRootInstance = getOwnHostContext(nextRootInstance)), + (nextRootInstance = getChildHostContextProd( + nextRootInstance, + nextRootContext + )); + else + switch (nextRootContext) { + case "svg": + nextRootInstance = HostContextNamespaceSvg; + break; + case "math": + nextRootInstance = HostContextNamespaceMath; + break; + default: + nextRootInstance = HostContextNamespaceNone; + } + } + nextRootContext = nextRootContext.toLowerCase(); + nextRootContext = updatedAncestorInfoDev(null, nextRootContext); + nextRootContext = { + context: nextRootInstance, + ancestorInfo: nextRootContext + }; + pop(contextStackCursor, fiber); + push(contextStackCursor, nextRootContext, fiber); + } + function popHostContainer(fiber) { + pop(contextStackCursor, fiber); + pop(contextFiberStackCursor, fiber); + pop(rootInstanceStackCursor, fiber); + } + function getHostContext() { + return requiredContext(contextStackCursor.current); + } + function pushHostContext(fiber) { + null !== fiber.memoizedState && + push(hostTransitionProviderCursor, fiber, fiber); + var context = requiredContext(contextStackCursor.current); + var type = fiber.type; + var nextContext = getChildHostContextProd(context.context, type); + type = updatedAncestorInfoDev(context.ancestorInfo, type); + nextContext = { context: nextContext, ancestorInfo: type }; + context !== nextContext && + (push(contextFiberStackCursor, fiber, fiber), + push(contextStackCursor, nextContext, fiber)); + } + function popHostContext(fiber) { + contextFiberStackCursor.current === fiber && + (pop(contextStackCursor, fiber), pop(contextFiberStackCursor, fiber)); + hostTransitionProviderCursor.current === fiber && + (pop(hostTransitionProviderCursor, fiber), + (HostTransitionContext._currentValue = null)); + } + function typeName(value) { + return ( + ("function" === typeof Symbol && + Symbol.toStringTag && + value[Symbol.toStringTag]) || + value.constructor.name || + "Object" + ); } - } - - 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) { - var wasRendering = isRendering; - setIsRendering(true); - - try { - var result = Component(props, secondArg); - return result; - } finally { - setIsRendering(wasRendering); - } -} -/** @noinline */ - -function callRenderInDEV(instance) { - var wasRendering = isRendering; - setIsRendering(true); - - try { - var result = instance.render(); - return result; - } finally { - setIsRendering(wasRendering); - } -} -/** @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); + function willCoercionThrow(value) { + try { + return testStringCoercion(value), !1; + } catch (e) { + return !0; + } + } + function testStringCoercion(value) { + return "" + value; + } + function checkAttributeStringCoercion(value, attributeName) { + if (willCoercionThrow(value)) + return ( + error$jscomp$0( + "The provided `%s` attribute is an unsupported type %s. This value must be coerced to a string before using it here.", + attributeName, + typeName(value) + ), + testStringCoercion(value) + ); + } + function checkCSSPropertyStringCoercion(value, propName) { + if (willCoercionThrow(value)) + return ( + error$jscomp$0( + "The provided `%s` CSS property is an unsupported type %s. This value must be coerced to a string before using it here.", + propName, + typeName(value) + ), + testStringCoercion(value) + ); + } + function checkFormFieldValueStringCoercion(value) { + if (willCoercionThrow(value)) + return ( + error$jscomp$0( + "Form field values (value, checked, defaultValue, or defaultChecked props) must be strings, not %s. This value must be coerced to a string before using it here.", + typeName(value) + ), + testStringCoercion(value) + ); + } + function injectInternals(internals) { + if ("undefined" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) return !1; + var hook = __REACT_DEVTOOLS_GLOBAL_HOOK__; + if (hook.isDisabled) return !0; + if (!hook.supportsFiber) + return ( + error$jscomp$0( + "The installed version of React DevTools is too old and will not work with the current version of React. Please update React DevTools. https://react.dev/link/react-devtools" + ), + !0 + ); + try { + (internals = assign({}, internals, { + getLaneLabelMap: getLaneLabelMap, + injectProfilingHooks: injectProfilingHooks + })), + (rendererID = hook.inject(internals)), + (injectedHook = hook); + } catch (err) { + error$jscomp$0("React instrumentation encountered an error: %s.", err); + } + return hook.checkDCE ? !0 : !1; } - - 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(); + function onCommitRoot$1(root, eventPriority) { + if (injectedHook && "function" === typeof injectedHook.onCommitFiberRoot) + try { + var didError = 128 === (root.current.flags & 128); + switch (eventPriority) { + case DiscreteEventPriority: + var schedulerPriority = ImmediatePriority; + break; + case ContinuousEventPriority: + schedulerPriority = UserBlockingPriority; + break; + case DefaultEventPriority: + schedulerPriority = NormalPriority$1; + break; + case IdleEventPriority: + schedulerPriority = IdlePriority; + break; + default: + schedulerPriority = NormalPriority$1; + } + injectedHook.onCommitFiberRoot( + rendererID, + root, + schedulerPriority, + didError + ); + } catch (err) { + hasLoggedError || + ((hasLoggedError = !0), + error$jscomp$0( + "React instrumentation encountered an error: %s", + err + )); + } + } + function setIsStrictModeForDevtools(newIsStrictMode) { + "function" === typeof log$1 && + (unstable_setDisableYieldValue(newIsStrictMode), + (suppressWarning = newIsStrictMode)); + if (injectedHook && "function" === typeof injectedHook.setStrictMode) + try { + injectedHook.setStrictMode(rendererID, newIsStrictMode); + } catch (err) { + hasLoggedError || + ((hasLoggedError = !0), + error$jscomp$0( + "React instrumentation encountered an error: %s", + err + )); + } + } + function injectProfilingHooks(profilingHooks) { + injectedProfilingHooks = profilingHooks; + } + function getLaneLabelMap() { + for ( + var map = new Map(), lane = 1, index = 0; + index < TotalLanes; + index++ + ) { + var label = getLabelForLane(lane); + map.set(lane, label); + lane *= 2; + } + return map; + } + function markCommitStopped() { + null !== injectedProfilingHooks && + "function" === typeof injectedProfilingHooks.markCommitStopped && + injectedProfilingHooks.markCommitStopped(); + } + function markComponentRenderStarted(fiber) { + null !== injectedProfilingHooks && + "function" === + typeof injectedProfilingHooks.markComponentRenderStarted && + injectedProfilingHooks.markComponentRenderStarted(fiber); + } + function markComponentRenderStopped() { + null !== injectedProfilingHooks && + "function" === + typeof injectedProfilingHooks.markComponentRenderStopped && + injectedProfilingHooks.markComponentRenderStopped(); + } + function markComponentLayoutEffectUnmountStarted(fiber) { + null !== injectedProfilingHooks && + "function" === + typeof injectedProfilingHooks.markComponentLayoutEffectUnmountStarted && + injectedProfilingHooks.markComponentLayoutEffectUnmountStarted(fiber); + } + function markComponentLayoutEffectUnmountStopped() { + null !== injectedProfilingHooks && + "function" === + typeof injectedProfilingHooks.markComponentLayoutEffectUnmountStopped && + injectedProfilingHooks.markComponentLayoutEffectUnmountStopped(); + } + function markRenderStarted(lanes) { + null !== injectedProfilingHooks && + "function" === typeof injectedProfilingHooks.markRenderStarted && + injectedProfilingHooks.markRenderStarted(lanes); + } + function markRenderStopped() { + null !== injectedProfilingHooks && + "function" === typeof injectedProfilingHooks.markRenderStopped && + injectedProfilingHooks.markRenderStopped(); + } + function markStateUpdateScheduled(fiber, lane) { + null !== injectedProfilingHooks && + "function" === typeof injectedProfilingHooks.markStateUpdateScheduled && + injectedProfilingHooks.markStateUpdateScheduled(fiber, lane); + } + function clz32Fallback(x) { + x >>>= 0; + return 0 === x ? 32 : (31 - ((log(x) / LN2) | 0)) | 0; + } + function getLabelForLane(lane) { + if (lane & SyncHydrationLane) return "SyncHydrationLane"; + if (lane & SyncLane) return "Sync"; + if (lane & InputContinuousHydrationLane) + return "InputContinuousHydration"; + if (lane & InputContinuousLane) return "InputContinuous"; + if (lane & DefaultHydrationLane) return "DefaultHydration"; + if (lane & DefaultLane) return "Default"; + if (lane & TransitionHydrationLane) return "TransitionHydration"; + if (lane & TransitionLanes) return "Transition"; + if (lane & RetryLanes) return "Retry"; + if (lane & SelectiveHydrationLane) return "SelectiveHydration"; + if (lane & IdleHydrationLane) return "IdleHydration"; + if (lane & IdleLane) return "Idle"; + if (lane & OffscreenLane) return "Offscreen"; + if (lane & DeferredLane) return "Deferred"; + } + function getHighestPriorityLanes(lanes) { + var pendingSyncLanes = lanes & SyncUpdateLanes; + if (0 !== pendingSyncLanes) return pendingSyncLanes; + switch (lanes & -lanes) { + case SyncHydrationLane: + return SyncHydrationLane; + case SyncLane: + return SyncLane; + case InputContinuousHydrationLane: + return InputContinuousHydrationLane; + case InputContinuousLane: + return InputContinuousLane; + case DefaultHydrationLane: + return DefaultHydrationLane; + case DefaultLane: + return DefaultLane; + case TransitionHydrationLane: + return TransitionHydrationLane; + case 128: + case 256: + case 512: + case 1024: + case 2048: + case 4096: + case 8192: + case 16384: + case 32768: + case 65536: + case 131072: + case 262144: + case 524288: + case 1048576: + case 2097152: + return lanes & TransitionLanes; + case 4194304: + case 8388608: + case 16777216: + case 33554432: + return lanes & RetryLanes; + case SelectiveHydrationLane: + return SelectiveHydrationLane; + case IdleHydrationLane: + return IdleHydrationLane; + case IdleLane: + return IdleLane; + case OffscreenLane: + return OffscreenLane; + case DeferredLane: + return 0; + default: + return ( + error$jscomp$0( + "Should have found matching lanes. This is a bug in React." + ), + lanes + ); + } + } + function getNextLanes(root, wipLanes) { + var pendingLanes = root.pendingLanes; + if (0 === pendingLanes) return 0; + var nextLanes = 0, + suspendedLanes = root.suspendedLanes; + root = root.pingedLanes; + var nonIdlePendingLanes = pendingLanes & 134217727; + 0 !== nonIdlePendingLanes + ? ((pendingLanes = nonIdlePendingLanes & ~suspendedLanes), + 0 !== pendingLanes + ? (nextLanes = getHighestPriorityLanes(pendingLanes)) + : ((root &= nonIdlePendingLanes), + 0 !== root && (nextLanes = getHighestPriorityLanes(root)))) + : ((pendingLanes &= ~suspendedLanes), + 0 !== pendingLanes + ? (nextLanes = getHighestPriorityLanes(pendingLanes)) + : 0 !== root && (nextLanes = getHighestPriorityLanes(root))); + return 0 === nextLanes + ? 0 + : 0 !== wipLanes && + wipLanes !== nextLanes && + 0 === (wipLanes & suspendedLanes) && + ((suspendedLanes = nextLanes & -nextLanes), + (root = wipLanes & -wipLanes), + suspendedLanes >= root || + (suspendedLanes === DefaultLane && 0 !== (root & TransitionLanes))) + ? wipLanes + : nextLanes; + } + function computeExpirationTime(lane, currentTime) { + switch (lane) { + case SyncHydrationLane: + case SyncLane: + case InputContinuousHydrationLane: + case InputContinuousLane: + return currentTime + 250; + case DefaultHydrationLane: + case DefaultLane: + case TransitionHydrationLane: + case 128: + case 256: + case 512: + case 1024: + case 2048: + case 4096: + case 8192: + case 16384: + case 32768: + case 65536: + case 131072: + case 262144: + case 524288: + case 1048576: + case 2097152: + return currentTime + 5e3; + case 4194304: + case 8388608: + case 16777216: + case 33554432: + return -1; + case SelectiveHydrationLane: + case IdleHydrationLane: + case IdleLane: + case OffscreenLane: + case DeferredLane: + return -1; + default: + return ( + error$jscomp$0( + "Should have found matching lanes. This is a bug in React." + ), + -1 + ); + } + } + function getLanesToRetrySynchronouslyOnError( + root, + originallyAttemptedLanes + ) { + if (root.errorRecoveryDisabledLanes & originallyAttemptedLanes) return 0; + root = root.pendingLanes & ~OffscreenLane; + return 0 !== root ? root : root & OffscreenLane ? OffscreenLane : 0; + } + function claimNextTransitionLane() { + var lane = nextTransitionLane; + nextTransitionLane <<= 1; + 0 === (nextTransitionLane & TransitionLanes) && + (nextTransitionLane = 128); + return lane; + } + function claimNextRetryLane() { + var lane = nextRetryLane; + nextRetryLane <<= 1; + 0 === (nextRetryLane & RetryLanes) && (nextRetryLane = 4194304); + return lane; + } + function createLaneMap(initial) { + for (var laneMap = [], i = 0; i < TotalLanes; i++) laneMap.push(initial); + return laneMap; + } + function markRootFinished(root, remainingLanes, spawnedLane) { + var noLongerPendingLanes = root.pendingLanes & ~remainingLanes; + root.pendingLanes = remainingLanes; + root.suspendedLanes = 0; + root.pingedLanes = 0; + root.expiredLanes &= remainingLanes; + root.entangledLanes &= remainingLanes; + root.errorRecoveryDisabledLanes &= remainingLanes; + root.shellSuspendCounter = 0; + remainingLanes = root.entanglements; + for ( + var expirationTimes = root.expirationTimes, + hiddenUpdates = root.hiddenUpdates; + 0 < noLongerPendingLanes; + + ) { + var index = 31 - clz32(noLongerPendingLanes), + lane = 1 << index; + remainingLanes[index] = 0; + expirationTimes[index] = -1; + var hiddenUpdatesForLane = hiddenUpdates[index]; + if (null !== hiddenUpdatesForLane) + for ( + hiddenUpdates[index] = null, index = 0; + index < hiddenUpdatesForLane.length; + index++ + ) { + var update = hiddenUpdatesForLane[index]; + null !== update && (update.lane &= ~OffscreenLane); + } + noLongerPendingLanes &= ~lane; + } + 0 !== spawnedLane && markSpawnedDeferredLane(root, spawnedLane, 0); + } + function markSpawnedDeferredLane(root, spawnedLane, entangledLanes) { + root.pendingLanes |= spawnedLane; + root.suspendedLanes &= ~spawnedLane; + var spawnedLaneIndex = 31 - clz32(spawnedLane); + root.entangledLanes |= spawnedLane; + root.entanglements[spawnedLaneIndex] = + root.entanglements[spawnedLaneIndex] | + DeferredLane | + (entangledLanes & UpdateLanes); + } + function markRootEntangled(root, entangledLanes) { + var rootEntangledLanes = (root.entangledLanes |= entangledLanes); + for (root = root.entanglements; rootEntangledLanes; ) { + var index = 31 - clz32(rootEntangledLanes), + lane = 1 << index; + (lane & entangledLanes) | (root[index] & entangledLanes) && + (root[index] |= entangledLanes); + rootEntangledLanes &= ~lane; + } + } + function addFiberToLanesMap(root, fiber, lanes) { + if (isDevToolsPresent) + for (root = root.pendingUpdatersLaneMap; 0 < lanes; ) { + var index = 31 - clz32(lanes), + lane = 1 << index; + root[index].add(fiber); + lanes &= ~lane; + } + } + function movePendingFibersToMemoized(root, lanes) { + if (isDevToolsPresent) + for ( + var pendingUpdatersLaneMap = root.pendingUpdatersLaneMap, + memoizedUpdaters = root.memoizedUpdaters; + 0 < lanes; + + ) { + var index = 31 - clz32(lanes); + root = 1 << index; + index = pendingUpdatersLaneMap[index]; + 0 < index.size && + (index.forEach(function (fiber) { + var alternate = fiber.alternate; + (null !== alternate && memoizedUpdaters.has(alternate)) || + memoizedUpdaters.add(fiber); + }), + index.clear()); + lanes &= ~root; + } + } + function lanesToEventPriority(lanes) { + lanes &= -lanes; + return 0 !== DiscreteEventPriority && DiscreteEventPriority < lanes + ? 0 !== ContinuousEventPriority && ContinuousEventPriority < lanes + ? 0 !== (lanes & 134217727) + ? DefaultEventPriority + : IdleEventPriority + : ContinuousEventPriority + : DiscreteEventPriority; + } + function resolveUpdatePriority() { + var updatePriority = ReactDOMSharedInternals.p; + if (0 !== updatePriority) return updatePriority; + updatePriority = window.event; + return void 0 === updatePriority + ? DefaultEventPriority + : getEventPriority(updatePriority.type); + } + function runWithPriority(priority, fn) { + var previousPriority = ReactDOMSharedInternals.p; + try { + return (ReactDOMSharedInternals.p = priority), fn(); + } finally { + ReactDOMSharedInternals.p = previousPriority; + } + } + function detachDeletedInstance(node) { + delete node[internalInstanceKey]; + delete node[internalPropsKey]; + delete node[internalEventHandlersKey]; + delete node[internalEventHandlerListenersKey]; + delete node[internalEventHandlesSetKey]; + } + function getClosestInstanceFromNode(targetNode) { + var targetInst = targetNode[internalInstanceKey]; + if (targetInst) return targetInst; + for (var parentNode = targetNode.parentNode; parentNode; ) { + if ( + (targetInst = + parentNode[internalContainerInstanceKey] || + parentNode[internalInstanceKey]) + ) { + parentNode = targetInst.alternate; + if ( + null !== targetInst.child || + (null !== parentNode && null !== parentNode.child) + ) + for ( + targetNode = getParentSuspenseInstance(targetNode); + null !== targetNode; + + ) { + if ((parentNode = targetNode[internalInstanceKey])) + return parentNode; + targetNode = getParentSuspenseInstance(targetNode); + } + return targetInst; + } + targetNode = parentNode; + parentNode = targetNode.parentNode; + } + return null; } - - lastFrameIdx = frames.indexOf(callLazyInitFrame); - - if (lastFrameIdx === -1) { - if (callIteratorFrame === null) { - callIteratorFrame = initCallRenderFrame(); + function getInstanceFromNode(node) { + if ( + (node = node[internalInstanceKey] || node[internalContainerInstanceKey]) + ) { + var tag = node.tag; + if ( + 5 === tag || + 6 === tag || + 13 === tag || + 26 === tag || + 27 === tag || + 3 === tag + ) + return node; } - - lastFrameIdx = frames.indexOf(callIteratorFrame); + return null; } - } - - if (lastFrameIdx !== -1) { - // Cut off everything after our "callComponent" slot since it'll be Fiber internals. - frames.length = lastFrameIdx; - } else { - // We didn't find any internal callsite out to user space. - // This means that this was called outside an owner or the owner is fully internal. - // To keep things light we exclude the entire trace in this case. - return ''; - } - - 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); - } + function getNodeFromInstance(inst) { + var tag = inst.tag; + if (5 === tag || 26 === tag || 27 === tag || 6 === tag) + return inst.stateNode; + throw Error("getNodeFromInstance: Invalid argument."); + } + function getResourcesFromRoot(root) { + var resources = root[internalRootNodeResourcesKey]; + resources || + (resources = root[internalRootNodeResourcesKey] = + { hoistableStyles: new Map(), hoistableScripts: new Map() }); + return resources; + } + function markNodeAsHoistable(node) { + node[internalHoistableMarker] = !0; + } + function registerTwoPhaseEvent(registrationName, dependencies) { + registerDirectEvent(registrationName, dependencies); + registerDirectEvent(registrationName + "Capture", dependencies); + } + function registerDirectEvent(registrationName, dependencies) { + registrationNameDependencies[registrationName] && + error$jscomp$0( + "EventRegistry: More than one plugin attempted to publish the same registration name, `%s`.", + registrationName + ); + registrationNameDependencies[registrationName] = dependencies; + var lowerCasedName = registrationName.toLowerCase(); + possibleRegistrationNames[lowerCasedName] = registrationName; + "onDoubleClick" === registrationName && + (possibleRegistrationNames.ondblclick = registrationName); + for ( + registrationName = 0; + registrationName < dependencies.length; + registrationName++ + ) + allNativeEvents.add(dependencies[registrationName]); + } + function checkControlledValueProps(tagName, props) { + hasReadOnlyValue[props.type] || + props.onChange || + props.onInput || + props.readOnly || + props.disabled || + null == props.value || + ("select" === tagName + ? error$jscomp$0( + "You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set `onChange`." + ) + : error$jscomp$0( + "You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`." + )); + props.onChange || + props.readOnly || + props.disabled || + null == props.checked || + error$jscomp$0( + "You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`." + ); + } + function isAttributeNameSafe(attributeName) { + if (hasOwnProperty.call(validatedAttributeNameCache, attributeName)) + return !0; + if (hasOwnProperty.call(illegalAttributeNameCache, attributeName)) + return !1; + if (VALID_ATTRIBUTE_NAME_REGEX.test(attributeName)) + return (validatedAttributeNameCache[attributeName] = !0); + illegalAttributeNameCache[attributeName] = !0; + error$jscomp$0("Invalid attribute name: `%s`", attributeName); + return !1; + } + function getValueForAttributeOnCustomComponent(node, name, expected) { + if (isAttributeNameSafe(name)) { + if (!node.hasAttribute(name)) { + switch (typeof expected) { + case "symbol": + case "object": + return expected; + case "function": + return expected; + case "boolean": + if (!1 === expected) return expected; + } + return void 0 === expected ? void 0 : null; + } + node = node.getAttribute(name); + if ("" === node && !0 === expected) return !0; + checkAttributeStringCoercion(expected, name); + return node === "" + expected ? expected : node; + } + } + function setValueForAttribute(node, name, value) { + if (isAttributeNameSafe(name)) + if (null === value) node.removeAttribute(name); + else { + switch (typeof value) { + case "undefined": + case "function": + case "symbol": + node.removeAttribute(name); + return; + case "boolean": + var prefix = name.toLowerCase().slice(0, 5); + if ("data-" !== prefix && "aria-" !== prefix) { + node.removeAttribute(name); + return; + } } + checkAttributeStringCoercion(value, name); + node.setAttribute(name, "" + value); } - } // $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, topStack) { - - try { - var info = ''; - - if (topStack) { - // Prefix with a filtered version of the currently executing - // stack. This information will be available in the native - // stack regardless but it's hidden since we're reprinting - // the stack on top of it. - var formattedTopStack = formatOwnerStack(topStack); - - if (formattedTopStack !== '') { - info += '\n' + formattedTopStack; - } } - - 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 === '') { - // Only if we have no other data about the callsite do we add - // the component name as the single stack frame. - info += describeFunctionComponentFrameWithoutLineNumber(workInProgress.type); + function setValueForKnownAttribute(node, name, value) { + if (null === value) node.removeAttribute(name); + else { + switch (typeof value) { + case "undefined": + case "function": + case "symbol": + case "boolean": + node.removeAttribute(name); + return; } - - break; - - case ForwardRef: - if (!workInProgress._debugOwner && info === '') { - info += describeFunctionComponentFrameWithoutLineNumber(workInProgress.type.render); + checkAttributeStringCoercion(value, name); + node.setAttribute(name, "" + value); + } + } + function setValueForNamespacedAttribute(node, namespace, name, value) { + if (null === value) node.removeAttribute(name); + else { + switch (typeof value) { + case "undefined": + case "function": + case "symbol": + case "boolean": + node.removeAttribute(name); + return; } - - break; + checkAttributeStringCoercion(value, name); + node.setAttributeNS(namespace, name, "" + value); + } } - - 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); + function getToStringValue(value) { + switch (typeof value) { + case "bigint": + case "boolean": + case "number": + case "string": + case "undefined": + return value; + case "object": + return checkFormFieldValueStringCoercion(value), value; + default: + return ""; + } + } + function isCheckable(elem) { + var type = elem.type; + return ( + (elem = elem.nodeName) && + "input" === elem.toLowerCase() && + ("checkbox" === type || "radio" === type) + ); + } + function trackValueOnNode(node) { + var valueField = isCheckable(node) ? "checked" : "value", + descriptor = Object.getOwnPropertyDescriptor( + node.constructor.prototype, + valueField + ); + checkFormFieldValueStringCoercion(node[valueField]); + var currentValue = "" + node[valueField]; + if ( + !node.hasOwnProperty(valueField) && + "undefined" !== typeof descriptor && + "function" === typeof descriptor.get && + "function" === typeof descriptor.set + ) { + var get = descriptor.get, + set = descriptor.set; + Object.defineProperty(node, valueField, { + configurable: !0, + get: function () { + return get.call(this); + }, + set: function (value) { + checkFormFieldValueStringCoercion(value); + currentValue = "" + value; + set.call(this, value); } - - if (debugStack !== '') { - info += '\n' + debugStack; + }); + Object.defineProperty(node, valueField, { + enumerable: descriptor.enumerable + }); + return { + getValue: function () { + return currentValue; + }, + setValue: function (value) { + checkFormFieldValueStringCoercion(value); + currentValue = "" + value; + }, + stopTracking: function () { + node._valueTracker = null; + delete node[valueField]; } - } - } 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; + function track(node) { + node._valueTracker || (node._valueTracker = trackValueOnNode(node)); + } + function updateValueIfChanged(node) { + if (!node) return !1; + var tracker = node._valueTracker; + if (!tracker) return !0; + var lastValue = tracker.getValue(); + var value = ""; + node && + (value = isCheckable(node) + ? node.checked + ? "true" + : "false" + : node.value); + node = value; + return node !== lastValue ? (tracker.setValue(node), !0) : !1; + } + function getActiveElement(doc) { + doc = doc || ("undefined" !== typeof document ? document : void 0); + if ("undefined" === typeof doc) return null; + try { + return doc.activeElement || doc.body; + } catch (e) { + return doc.body; + } } - - var owner = current._debugOwner; - - if (owner != null) { - return getComponentNameFromOwner(owner); + function escapeSelectorAttributeValueInsideDoubleQuotes(value) { + return value.replace( + escapeSelectorAttributeValueInsideDoubleQuotesRegex, + function (ch) { + return "\\" + ch.charCodeAt(0).toString(16) + " "; + } + ); } - } - - return null; -} -function getCurrentParentStackInDev() { - // This is used to get the parent stack even with owner stacks turned on. - { - if (current === null) { - return ''; + function validateInputProps(element, props) { + void 0 === props.checked || + void 0 === props.defaultChecked || + didWarnCheckedDefaultChecked || + (error$jscomp$0( + "%s contains an input of type %s with both checked and defaultChecked props. Input elements must be either controlled or uncontrolled (specify either the checked prop, or the defaultChecked prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props. More info: https://react.dev/link/controlled-components", + getCurrentFiberOwnerNameInDevOrNull() || "A component", + props.type + ), + (didWarnCheckedDefaultChecked = !0)); + void 0 === props.value || + void 0 === props.defaultValue || + didWarnValueDefaultValue$1 || + (error$jscomp$0( + "%s contains an input of type %s with both value and defaultValue props. Input elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props. More info: https://react.dev/link/controlled-components", + getCurrentFiberOwnerNameInDevOrNull() || "A component", + props.type + ), + (didWarnValueDefaultValue$1 = !0)); + } + function updateInput( + element, + value, + defaultValue, + lastDefaultValue, + checked, + defaultChecked, + type, + name + ) { + element.name = ""; + null != type && + "function" !== typeof type && + "symbol" !== typeof type && + "boolean" !== typeof type + ? (checkAttributeStringCoercion(type, "type"), (element.type = type)) + : element.removeAttribute("type"); + if (null != value) + if ("number" === type) { + if ((0 === value && "" === element.value) || element.value != value) + element.value = "" + getToStringValue(value); + } else + element.value !== "" + getToStringValue(value) && + (element.value = "" + getToStringValue(value)); + else + ("submit" !== type && "reset" !== type) || + element.removeAttribute("value"); + null != value + ? setDefaultValue(element, type, getToStringValue(value)) + : null != defaultValue + ? setDefaultValue(element, type, getToStringValue(defaultValue)) + : null != lastDefaultValue && element.removeAttribute("value"); + null == checked && + null != defaultChecked && + (element.defaultChecked = !!defaultChecked); + null != checked && + (element.checked = + checked && + "function" !== typeof checked && + "symbol" !== typeof checked); + null != name && + "function" !== typeof name && + "symbol" !== typeof name && + "boolean" !== typeof name + ? (checkAttributeStringCoercion(name, "name"), + (element.name = "" + getToStringValue(name))) + : element.removeAttribute("name"); + } + function initInput( + element, + value, + defaultValue, + checked, + defaultChecked, + type, + name, + isHydrating + ) { + null != type && + "function" !== typeof type && + "symbol" !== typeof type && + "boolean" !== typeof type && + (checkAttributeStringCoercion(type, "type"), (element.type = type)); + if (null != value || null != defaultValue) { + if ( + !( + ("submit" !== type && "reset" !== type) || + (void 0 !== value && null !== value) + ) + ) + return; + defaultValue = + null != defaultValue ? "" + getToStringValue(defaultValue) : ""; + value = null != value ? "" + getToStringValue(value) : defaultValue; + isHydrating || value === element.value || (element.value = value); + element.defaultValue = value; + } + checked = null != checked ? checked : defaultChecked; + checked = + "function" !== typeof checked && + "symbol" !== typeof checked && + !!checked; + element.checked = isHydrating ? element.checked : !!checked; + element.defaultChecked = !!checked; + null != name && + "function" !== typeof name && + "symbol" !== typeof name && + "boolean" !== typeof name && + (checkAttributeStringCoercion(name, "name"), (element.name = name)); + } + function setDefaultValue(node, type, value) { + ("number" === type && getActiveElement(node.ownerDocument) === node) || + node.defaultValue === "" + value || + (node.defaultValue = "" + value); + } + function validateOptionProps(element, props) { + null == props.value && + ("object" === typeof props.children && null !== props.children + ? React.Children.forEach(props.children, function (child) { + null == child || + "string" === typeof child || + "number" === typeof child || + "bigint" === typeof child || + didWarnInvalidChild || + ((didWarnInvalidChild = !0), + error$jscomp$0( + "Cannot infer the option value of complex children. Pass a `value` prop or use a plain string as children to