react-server-dom-webpack 19.0.0-rc-99da76f23a-20240606 → 19.0.0-rc-cc1ec60d0d-20240607

package/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);

package/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) {