react-dom 19.0.0-rc-6d3110b4d9-20240531 → 19.0.0-rc.0

package/cjs/react-dom-client.development.js

@@ -13873,15 +13873,39 @@ function useThenable(thenable) {
     thenableState = createThenableState();
   }
 
-  var result = trackUsedThenable(thenableState, thenable, index);
+  var result = trackUsedThenable(thenableState, thenable, index); // When something suspends with `use`, we replay the component with the
+  // "re-render" dispatcher instead of the "mount" or "update" dispatcher.
+  //
+  // But if there are additional hooks that occur after the `use` invocation
+  // that suspended, they wouldn't have been processed during the previous
+  // attempt. So after we invoke `use` again, we may need to switch from the
+  // "re-render" dispatcher back to the "mount" or "update" dispatcher. That's
+  // what the following logic accounts for.
+  //
+  // TODO: Theoretically this logic only needs to go into the rerender
+  // dispatcher. Could optimize, but probably not be worth it.
+  // This is the same logic as in updateWorkInProgressHook.
+
+  var workInProgressFiber = currentlyRenderingFiber$1;
+  var nextWorkInProgressHook = workInProgressHook === null ? // We're at the beginning of the list, so read from the first hook from
+  // the fiber.
+  workInProgressFiber.memoizedState : workInProgressHook.next;
+
+  if (nextWorkInProgressHook !== null) ; else {
+    // There are no remaining hooks from the previous attempt. We're no longer
+    // in "re-render" mode. Switch to the normal mount or update dispatcher.
+    //
+    // This is the same as the logic in renderWithHooks, except we don't bother
+    // to track the hook types debug information in this case (sufficient to
+    // only do that when nothing suspends).
+    var currentFiber = workInProgressFiber.alternate;
 
-  if (currentlyRenderingFiber$1.alternate === null && (workInProgressHook === null ? currentlyRenderingFiber$1.memoizedState === null : workInProgressHook.next === null)) {
-    // Initial render, and either this is the first time the component is
-    // called, or there were no Hooks called after this use() the previous
-    // time (perhaps because it threw). Subsequent Hook calls should use the
-    // mount dispatcher.
     {
-      ReactSharedInternals.H = HooksDispatcherOnMountInDEV;
+      if (currentFiber !== null && currentFiber.memoizedState !== null) {
+        ReactSharedInternals.H = HooksDispatcherOnUpdateInDEV;
+      } else {
+        ReactSharedInternals.H = HooksDispatcherOnMountInDEV;
+      }
     }
   }
 
@@ -14643,112 +14667,155 @@ function dispatchActionState(fiber, actionQueue, setPendingState, setState, payl
     throw new Error('Cannot update form state while rendering.');
   }
 
+  var currentAction = actionQueue.action;
+
+  if (currentAction === null) {
+    // An earlier action errored. Subsequent actions should not run.
+    return;
+  }
+
+  var actionNode = {
+    payload: payload,
+    action: currentAction,
+    next: null,
+    // circular
+    isTransition: true,
+    status: 'pending',
+    value: null,
+    reason: null,
+    listeners: [],
+    then: function (listener) {
+      // We know the only thing that subscribes to these promises is `use` so
+      // this implementation is simpler than a generic thenable. E.g. we don't
+      // bother to check if the thenable is still pending because `use` already
+      // does that.
+      actionNode.listeners.push(listener);
+    }
+  }; // Check if we're inside a transition. If so, we'll need to restore the
+  // transition context when the action is run.
+
+  var prevTransition = ReactSharedInternals.T;
+
+  if (prevTransition !== null) {
+    // Optimistically update the pending state, similar to useTransition.
+    // This will be reverted automatically when all actions are finished.
+    setPendingState(true); // `actionNode` is a thenable that resolves to the return value of
+    // the action.
+
+    setState(actionNode);
+  } else {
+    // This is not a transition.
+    actionNode.isTransition = false;
+    setState(actionNode);
+  }
+
   var last = actionQueue.pending;
 
   if (last === null) {
     // There are no pending actions; this is the first one. We can run
     // it immediately.
-    var newLast = {
-      payload: payload,
-      action: actionQueue.action,
-      next: null // circular
-
-    };
-    newLast.next = actionQueue.pending = newLast;
-    runActionStateAction(actionQueue, setPendingState, setState, newLast);
+    actionNode.next = actionQueue.pending = actionNode;
+    runActionStateAction(actionQueue, actionNode);
   } else {
     // There's already an action running. Add to the queue.
     var first = last.next;
-    var _newLast = {
-      payload: payload,
-      action: actionQueue.action,
-      next: first
-    };
-    actionQueue.pending = last.next = _newLast;
+    actionNode.next = first;
+    actionQueue.pending = last.next = actionNode;
   }
 }
 
-function runActionStateAction(actionQueue, setPendingState, setState, node) {
-  // This is a fork of startTransition
-  var prevTransition = ReactSharedInternals.T;
-  var currentTransition = {};
-  ReactSharedInternals.T = currentTransition;
-
-  {
-    ReactSharedInternals.T._updatedFibers = new Set();
-  } // Optimistically update the pending state, similar to useTransition.
-  // This will be reverted automatically when all actions are finished.
-
-
-  setPendingState(true); // `node.action` represents the action function at the time it was dispatched.
+function runActionStateAction(actionQueue, node) {
+  // `node.action` represents the action function at the time it was dispatched.
   // If this action was queued, it might be stale, i.e. it's not necessarily the
   // most current implementation of the action, stored on `actionQueue`. This is
   // intentional. The conceptual model for queued actions is that they are
   // queued in a remote worker; the dispatch happens immediately, only the
   // execution is delayed.
-
   var action = node.action;
   var payload = node.payload;
   var prevState = actionQueue.state;
 
-  try {
-    var returnValue = action(prevState, payload);
-    var onStartTransitionFinish = ReactSharedInternals.S;
+  if (node.isTransition) {
+    // The original dispatch was part of a transition. We restore its
+    // transition context here.
+    // This is a fork of startTransition
+    var prevTransition = ReactSharedInternals.T;
+    var currentTransition = {};
+    ReactSharedInternals.T = currentTransition;
 
-    if (onStartTransitionFinish !== null) {
-      onStartTransitionFinish(currentTransition, returnValue);
+    {
+      ReactSharedInternals.T._updatedFibers = new Set();
     }
 
-    if (returnValue !== null && typeof returnValue === 'object' && // $FlowFixMe[method-unbinding]
-    typeof returnValue.then === 'function') {
-      var thenable = returnValue; // Attach a listener to read the return state of the action. As soon as
-      // this resolves, we can run the next action in the sequence.
+    try {
+      var returnValue = action(prevState, payload);
+      var onStartTransitionFinish = ReactSharedInternals.S;
 
-      thenable.then(function (nextState) {
-        actionQueue.state = nextState;
-        finishRunningActionStateAction(actionQueue, setPendingState, setState);
-      }, function () {
-        return finishRunningActionStateAction(actionQueue, setPendingState, setState);
-      });
-      setState(thenable);
-    } else {
-      setState(returnValue);
-      var nextState = returnValue;
-      actionQueue.state = nextState;
-      finishRunningActionStateAction(actionQueue, setPendingState, setState);
-    }
-  } catch (error) {
-    // This is a trick to get the `useActionState` hook to rethrow the error.
-    // When it unwraps the thenable with the `use` algorithm, the error
-    // will be thrown.
-    var rejectedThenable = {
-      then: function () {},
-      status: 'rejected',
-      reason: error // $FlowFixMe: Not sure why this doesn't work
+      if (onStartTransitionFinish !== null) {
+        onStartTransitionFinish(currentTransition, returnValue);
+      }
 
-    };
-    setState(rejectedThenable);
-    finishRunningActionStateAction(actionQueue, setPendingState, setState);
-  } finally {
-    ReactSharedInternals.T = prevTransition;
+      handleActionReturnValue(actionQueue, node, returnValue);
+    } catch (error) {
+      onActionError(actionQueue, node, error);
+    } finally {
+      ReactSharedInternals.T = prevTransition;
 
-    {
-      if (prevTransition === null && currentTransition._updatedFibers) {
-        var updatedFibersCount = currentTransition._updatedFibers.size;
+      {
+        if (prevTransition === null && currentTransition._updatedFibers) {
+          var updatedFibersCount = currentTransition._updatedFibers.size;
 
-        currentTransition._updatedFibers.clear();
+          currentTransition._updatedFibers.clear();
 
-        if (updatedFibersCount > 10) {
-          warn('Detected a large number of updates inside startTransition. ' + 'If this is due to a subscription please re-write it to use React provided hooks. ' + 'Otherwise concurrent mode guarantees are off the table.');
+          if (updatedFibersCount > 10) {
+            warn('Detected a large number of updates inside startTransition. ' + 'If this is due to a subscription please re-write it to use React provided hooks. ' + 'Otherwise concurrent mode guarantees are off the table.');
+          }
         }
       }
     }
+  } else {
+    // The original dispatch was not part of a transition.
+    try {
+      var _returnValue = action(prevState, payload);
+
+      handleActionReturnValue(actionQueue, node, _returnValue);
+    } catch (error) {
+      onActionError(actionQueue, node, error);
+    }
   }
 }
 
-function finishRunningActionStateAction(actionQueue, setPendingState, setState) {
-  // The action finished running. Pop it from the queue and run the next pending
-  // action, if there are any.
+function handleActionReturnValue(actionQueue, node, returnValue) {
+  if (returnValue !== null && typeof returnValue === 'object' && // $FlowFixMe[method-unbinding]
+  typeof returnValue.then === 'function') {
+    var thenable = returnValue; // Attach a listener to read the return state of the action. As soon as
+    // this resolves, we can run the next action in the sequence.
+
+    thenable.then(function (nextState) {
+      onActionSuccess(actionQueue, node, nextState);
+    }, function (error) {
+      return onActionError(actionQueue, node, error);
+    });
+
+    {
+      if (!node.isTransition) {
+        error('An async function was passed to useActionState, but it was ' + 'dispatched outside of an action context. This is likely not ' + 'what you intended. Either pass the dispatch function to an ' + '`action` prop, or dispatch manually inside `startTransition`');
+      }
+    }
+  } else {
+    var nextState = returnValue;
+    onActionSuccess(actionQueue, node, nextState);
+  }
+}
+
+function onActionSuccess(actionQueue, actionNode, nextState) {
+  // The action finished running.
+  actionNode.status = 'fulfilled';
+  actionNode.value = nextState;
+  notifyActionListeners(actionNode);
+  actionQueue.state = nextState; // Pop the action from the queue and run the next pending action, if there
+  // are any.
+
   var last = actionQueue.pending;
 
   if (last !== null) {
@@ -14762,11 +14829,43 @@ function finishRunningActionStateAction(actionQueue, setPendingState, setState)
       var next = first.next;
       last.next = next; // Run the next action.
 
-      runActionStateAction(actionQueue, setPendingState, setState, next);
+      runActionStateAction(actionQueue, next);
     }
   }
 }
 
+function onActionError(actionQueue, actionNode, error) {
+  // Mark all the following actions as rejected.
+  var last = actionQueue.pending;
+  actionQueue.pending = null;
+
+  if (last !== null) {
+    var first = last.next;
+
+    do {
+      actionNode.status = 'rejected';
+      actionNode.reason = error;
+      notifyActionListeners(actionNode);
+      actionNode = actionNode.next;
+    } while (actionNode !== first);
+  } // Prevent subsequent actions from being dispatched.
+
+
+  actionQueue.action = null;
+}
+
+function notifyActionListeners(actionNode) {
+  // Notify React that the action has finished.
+  var listeners = actionNode.listeners;
+
+  for (var i = 0; i < listeners.length; i++) {
+    // This is always a React internal listener, so we don't need to worry
+    // about it throwing.
+    var listener = listeners[i];
+    listener();
+  }
+}
+
 function actionStateReducer(oldState, newState) {
   return newState;
 }
@@ -18537,14 +18636,22 @@ function updateHostComponent$1(current, workInProgress, renderLanes) {
 
 function updateHostHoistable(current, workInProgress, renderLanes) {
   markRef(current, workInProgress);
-  var currentProps = current === null ? null : current.memoizedProps;
-  var resource = workInProgress.memoizedState = getResource(workInProgress.type, currentProps, workInProgress.pendingProps);
 
   if (current === null) {
-    if (!getIsHydrating() && resource === null) {
-      // This is not a Resource Hoistable and we aren't hydrating so we construct the instance.
-      workInProgress.stateNode = createHoistableInstance(workInProgress.type, workInProgress.pendingProps, getRootHostContainer(), workInProgress);
+    var resource = getResource(workInProgress.type, null, workInProgress.pendingProps, null);
+
+    if (resource) {
+      workInProgress.memoizedState = resource;
+    } else {
+      if (!getIsHydrating()) {
+        // This is not a Resource Hoistable and we aren't hydrating so we construct the instance.
+        workInProgress.stateNode = createHoistableInstance(workInProgress.type, workInProgress.pendingProps, getRootHostContainer(), workInProgress);
+      }
     }
+  } else {
+    // Get Resource may or may not return a resource. either way we stash the result
+    // on memoized state.
+    workInProgress.memoizedState = getResource(workInProgress.type, current.memoizedProps, workInProgress.pendingProps, current.memoizedState);
   } // Resources never have reconciler managed children. It is possible for
   // the host implementation of getResource to consider children in the
   // resource construction but they will otherwise be discarded. In practice
@@ -26130,29 +26237,28 @@ function completeWork(current, workInProgress, renderLanes) {
               return null;
             }
           } else {
-            // We are updating.
-            var currentResource = current.memoizedState;
+            // This is an update.
+            if (nextResource) {
+              // This is a Resource
+              if (nextResource !== current.memoizedState) {
+                // we have a new Resource. we need to update
+                markUpdate(workInProgress); // This must come at the very end of the complete phase.
+
+                bubbleProperties(workInProgress); // This must come at the very end of the complete phase, because it might
+                // throw to suspend, and if the resource immediately loads, the work loop
+                // will resume rendering as if the work-in-progress completed. So it must
+                // fully complete.
 
-            if (nextResource !== currentResource) {
-              // We are transitioning to, from, or between Hoistable Resources
-              // and require an update
-              markUpdate(workInProgress);
-            }
-
-            if (nextResource !== null) {
-              // This is a Hoistable Resource
-              // This must come at the very end of the complete phase.
-              bubbleProperties(workInProgress);
-
-              if (nextResource === currentResource) {
-                workInProgress.flags &= ~MaySuspendCommit;
-              } else {
                 preloadResourceAndSuspendIfNeeded(workInProgress, nextResource);
+                return null;
+              } else {
+                // This must come at the very end of the complete phase.
+                bubbleProperties(workInProgress);
+                workInProgress.flags &= ~MaySuspendCommit;
+                return null;
               }
-
-              return null;
             } else {
-              // This is a Hoistable Instance
+              // This is an Instance
               // We may have props to update on the Hoistable instance.
               {
                 var oldProps = current.memoizedProps;
@@ -35200,7 +35306,7 @@ function preinitModuleScript(src, options) {
 } // This function is called in begin work and we should always have a currentDocument set
 
 
-function getResource(type, currentProps, pendingProps) {
+function getResource(type, currentProps, pendingProps, currentResource) {
   var resourceRoot = getCurrentResourceRoot();
 
   if (!resourceRoot) {
@@ -35273,10 +35379,34 @@ function getResource(type, currentProps, pendingProps) {
             }
           }
 
+          if (currentProps && currentResource === null) {
+            // This node was previously an Instance type and is becoming a Resource type
+            // For now we error because we don't support flavor changes
+            var diff = '';
+
+            {
+              diff = "\n\n  - " + describeLinkForResourceErrorDEV(currentProps) + "\n  + " + describeLinkForResourceErrorDEV(pendingProps);
+            }
+
+            throw new Error('Expected <link> not to update to be updated to a stylesheet with precedence.' + ' Check the `rel`, `href`, and `precedence` props of this component.' + ' Alternatively, check whether two different <link> components render in the same slot or share the same key.' + diff);
+          }
+
           return _resource;
-        }
+        } else {
+          if (currentProps && currentResource !== null) {
+            // This node was previously a Resource type and is becoming an Instance type
+            // For now we error because we don't support flavor changes
+            var _diff = '';
 
-        return null;
+            {
+              _diff = "\n\n  - " + describeLinkForResourceErrorDEV(currentProps) + "\n  + " + describeLinkForResourceErrorDEV(pendingProps);
+            }
+
+            throw new Error('Expected stylesheet with precedence to not be updated to a different kind of <link>.' + ' Check the `rel`, `href`, and `precedence` props of this component.' + ' Alternatively, check whether two different <link> components render in the same slot or share the same key.' + _diff);
+          }
+
+          return null;
+        }
       }
 
     case 'script':
@@ -35319,6 +35449,44 @@ function getResource(type, currentProps, pendingProps) {
   }
 }
 
+function describeLinkForResourceErrorDEV(props) {
+  {
+    var describedProps = 0;
+    var description = '<link';
+
+    if (typeof props.rel === 'string') {
+      describedProps++;
+      description += " rel=\"" + props.rel + "\"";
+    } else if (hasOwnProperty.call(props, 'rel')) {
+      describedProps++;
+      description += " rel=\"" + (props.rel === null ? 'null' : 'invalid type ' + typeof props.rel) + "\"";
+    }
+
+    if (typeof props.href === 'string') {
+      describedProps++;
+      description += " href=\"" + props.href + "\"";
+    } else if (hasOwnProperty.call(props, 'href')) {
+      describedProps++;
+      description += " href=\"" + (props.href === null ? 'null' : 'invalid type ' + typeof props.href) + "\"";
+    }
+
+    if (typeof props.precedence === 'string') {
+      describedProps++;
+      description += " precedence=\"" + props.precedence + "\"";
+    } else if (hasOwnProperty.call(props, 'precedence')) {
+      describedProps++;
+      description += " precedence={" + (props.precedence === null ? 'null' : 'invalid type ' + typeof props.precedence) + "}";
+    }
+
+    if (Object.getOwnPropertyNames(props).length > describedProps) {
+      description += ' ...';
+    }
+
+    description += ' />';
+    return description;
+  }
+}
+
 function styleTagPropsFromRawProps(rawProps) {
   return assign({}, rawProps, {
     'data-href': rawProps.href,
@@ -36246,7 +36414,7 @@ identifierPrefix, onUncaughtError, onCaughtError, onRecoverableError, transition
   return root;
 }
 
-var ReactVersion = '19.0.0-rc-6d3110b4d9-20240531';
+var ReactVersion = '19.0.0';
 
 // Might add PROFILE later.