react-server-dom-webpack 19.0.0-canary-e3ebcd54b-20240405 → 19.0.0-canary-4c12339ce-20240408

package/cjs/react-server-dom-webpack-server.browser.development.js

@@ -458,6 +458,7 @@ var ReactDOMSharedInternals = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL
 var ReactDOMCurrentDispatcher = ReactDOMSharedInternals.ReactDOMCurrentDispatcher;
 var previousDispatcher = ReactDOMCurrentDispatcher.current;
 ReactDOMCurrentDispatcher.current = {
+  flushSyncWork: previousDispatcher.flushSyncWork,
   prefetchDNS: prefetchDNS,
   preconnect: preconnect,
   preload: preload,
@@ -925,21 +926,34 @@ function getSuspendedThenable() {
 var currentRequest$1 = null;
 var thenableIndexCounter = 0;
 var thenableState = null;
+var currentComponentDebugInfo = null;
 function prepareToUseHooksForRequest(request) {
   currentRequest$1 = request;
 }
 function resetHooksForRequest() {
   currentRequest$1 = null;
 }
-function prepareToUseHooksForComponent(prevThenableState) {
+function prepareToUseHooksForComponent(prevThenableState, componentDebugInfo) {
   thenableIndexCounter = 0;
   thenableState = prevThenableState;
+
+  {
+    currentComponentDebugInfo = componentDebugInfo;
+  }
 }
 function getThenableStateAfterSuspending() {
   // If you use() to Suspend this should always exist but if you throw a Promise instead,
   // which is not really supported anymore, it will be empty. We use the empty set as a
   // marker to know if this was a replay of the same component or first attempt.
   var state = thenableState || createThenableState();
+
+  {
+    // This is a hack but we stash the debug info here so that we don't need a completely
+    // different data structure just for this in DEV. Not too happy about it.
+    state._componentDebugInfo = currentComponentDebugInfo;
+    currentComponentDebugInfo = null;
+  }
+
   thenableState = null;
   return state;
 }
@@ -1418,6 +1432,7 @@ var SEEN_BUT_NOT_YET_OUTLINED = -1;
 var NEVER_OUTLINED = -2;
 var ReactCurrentCache = ReactSharedServerInternals.ReactCurrentCache;
 var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
+var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
 function defaultErrorHandler(error) {
   console['error'](error); // Don't transform to our wrapper
@@ -1638,33 +1653,56 @@ function createLazyWrapperAroundWakeable(wakeable) {
   return lazyType;
 }
 
-function renderFunctionComponent(request, task, key, Component, props) {
+function renderFunctionComponent(request, task, key, Component, props, owner) {
   // Reset the task's thenable state before continuing, so that if a later
   // component suspends we can reuse the same task object. If the same
   // component suspends again, the thenable state will be restored.
   var prevThenableState = task.thenableState;
   task.thenableState = null;
+  var componentDebugInfo = null;
 
   {
     if (debugID === null) {
       // We don't have a chunk to assign debug info. We need to outline this
       // component to assign it an ID.
       return outlineTask(request, task);
-    } else if (prevThenableState !== null) ; else {
+    } else if (prevThenableState !== null) {
+      // This is a replay and we've already emitted the debug info of this component
+      // in the first pass. We skip emitting a duplicate line.
+      // As a hack we stashed the previous component debug info on this object in DEV.
+      componentDebugInfo = prevThenableState._componentDebugInfo;
+    } else {
       // This is a new component in the same task so we can emit more debug info.
       var componentName = Component.displayName || Component.name || '';
       request.pendingChunks++;
-      emitDebugChunk(request, debugID, {
+      var componentDebugID = debugID;
+      componentDebugInfo = {
         name: componentName,
-        env: request.environmentName
-      });
+        env: request.environmentName,
+        owner: owner
+      }; // We outline this model eagerly so that we can refer to by reference as an owner.
+      // If we had a smarter way to dedupe we might not have to do this if there ends up
+      // being no references to this as an owner.
+
+      outlineModel(request, componentDebugInfo);
+      emitDebugChunk(request, componentDebugID, componentDebugInfo);
     }
   }
 
-  prepareToUseHooksForComponent(prevThenableState); // The secondArg is always undefined in Server Components since refs error early.
+  prepareToUseHooksForComponent(prevThenableState, componentDebugInfo); // The secondArg is always undefined in Server Components since refs error early.
 
   var secondArg = undefined;
-  var result = Component(props, secondArg);
+  var result;
+
+  {
+    ReactCurrentOwner.current = componentDebugInfo;
+
+    try {
+      result = Component(props, secondArg);
+    } finally {
+      ReactCurrentOwner.current = null;
+    }
+  }
 
   if (typeof result === 'object' && result !== null && typeof result.then === 'function') {
     // When the return value is in children position we can resolve it immediately,
@@ -1755,7 +1793,8 @@ function renderFragment(request, task, children) {
   return children;
 }
 
-function renderClientElement(task, type, key, props) {
+function renderClientElement(task, type, key, props, owner) // DEV-only
+{
   // the keys of any Server Components which are not serialized.
 
 
@@ -1767,7 +1806,7 @@ function renderClientElement(task, type, key, props) {
     key = keyPath + ',' + key;
   }
 
-  var element = [REACT_ELEMENT_TYPE, type, key, props];
+  var element = [REACT_ELEMENT_TYPE, type, key, props, owner] ;
 
   if (task.implicitSlot && key !== null) {
     // The root Server Component had no key so it was in an implicit slot.
@@ -1805,7 +1844,8 @@ function outlineTask(request, task) {
   return serializeLazyID(newTask.id);
 }
 
-function renderElement(request, task, type, key, ref, props) {
+function renderElement(request, task, type, key, ref, props, owner) // DEV only
+{
   if (ref !== null && ref !== undefined) {
     // When the ref moves to the regular props object this will implicitly
     // throw for functions. We could probably relax it to a DEV warning for other
@@ -1826,14 +1866,14 @@ function renderElement(request, task, type, key, ref, props) {
   if (typeof type === 'function') {
     if (isClientReference(type) || isTemporaryReference(type)) {
       // This is a reference to a Client Component.
-      return renderClientElement(task, type, key, props);
+      return renderClientElement(task, type, key, props, owner);
     } // This is a Server Component.
 
 
-    return renderFunctionComponent(request, task, key, type, props);
+    return renderFunctionComponent(request, task, key, type, props, owner);
   } else if (typeof type === 'string') {
     // This is a host element. E.g. HTML.
-    return renderClientElement(task, type, key, props);
+    return renderClientElement(task, type, key, props, owner);
   } else if (typeof type === 'symbol') {
     if (type === REACT_FRAGMENT_TYPE && key === null) {
       // For key-less fragments, we add a small optimization to avoid serializing
@@ -1851,11 +1891,11 @@ function renderElement(request, task, type, key, ref, props) {
     // Any built-in works as long as its props are serializable.
 
 
-    return renderClientElement(task, type, key, props);
+    return renderClientElement(task, type, key, props, owner);
   } else if (type != null && typeof type === 'object') {
     if (isClientReference(type)) {
       // This is a reference to a Client Component.
-      return renderClientElement(task, type, key, props);
+      return renderClientElement(task, type, key, props, owner);
     }
 
     switch (type.$$typeof) {
@@ -1864,17 +1904,17 @@ function renderElement(request, task, type, key, ref, props) {
           var payload = type._payload;
           var init = type._init;
           var wrappedType = init(payload);
-          return renderElement(request, task, wrappedType, key, ref, props);
+          return renderElement(request, task, wrappedType, key, ref, props, owner);
         }
 
       case REACT_FORWARD_REF_TYPE:
         {
-          return renderFunctionComponent(request, task, key, type.render, props);
+          return renderFunctionComponent(request, task, key, type.render, props, owner);
         }
 
       case REACT_MEMO_TYPE:
         {
-          return renderElement(request, task, type.type, key, ref, props);
+          return renderElement(request, task, type.type, key, ref, props, owner);
         }
     }
   }
@@ -1953,6 +1993,10 @@ function serializeLazyID(id) {
   return '$L' + id.toString(16);
 }
 
+function serializeInfinitePromise() {
+  return '$@';
+}
+
 function serializePromiseID(id) {
   return '$@' + id.toString(16);
 }
@@ -2117,6 +2161,12 @@ function serializeMap(request, map) {
   return '$Q' + id.toString(16);
 }
 
+function serializeFormData(request, formData) {
+  var entries = Array.from(formData.entries());
+  var id = outlineModel(request, entries);
+  return '$K' + id.toString(16);
+}
+
 function serializeSet(request, set) {
   var entries = Array.from(set);
 
@@ -2293,7 +2343,7 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
 
 
           return renderElement(request, task, element.type, // $FlowFixMe[incompatible-call] the key of an element is null | string
-          element.key, ref, props);
+          element.key, ref, props, element._owner );
         }
 
       case REACT_LAZY_TYPE:
@@ -2391,6 +2441,11 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
 
     if (value instanceof Set) {
       return serializeSet(request, value);
+    } // TODO: FormData is not available in old Node. Remove the typeof later.
+
+
+    if (typeof FormData === 'function' && value instanceof FormData) {
+      return serializeFormData(request, value);
     }
 
     var iteratorFn = getIteratorFn(value);
@@ -2652,14 +2707,216 @@ function emitModelChunk(request, id, json) {
 }
 
 function emitDebugChunk(request, id, debugInfo) {
+  // use the full serialization that requires a task.
+
+
+  var counter = {
+    objectCount: 0
+  };
 
+  function replacer(parentPropertyName, value) {
+    return renderConsoleValue(request, counter, this, parentPropertyName, value);
+  } // $FlowFixMe[incompatible-type] stringify can return null
 
-  var json = stringify(debugInfo);
+
+  var json = stringify(debugInfo, replacer);
   var row = serializeRowHeader('D', id) + json + '\n';
   var processedChunk = stringToChunk(row);
   request.completedRegularChunks.push(processedChunk);
 }
 
+function serializeEval(source) {
+
+  return '$E' + source;
+} // This is a forked version of renderModel which should never error, never suspend and is limited
+// in the depth it can encode.
+
+
+function renderConsoleValue(request, counter, parent, parentPropertyName, value) {
+  // Make sure that `parent[parentPropertyName]` wasn't JSONified before `value` was passed to us
+  // $FlowFixMe[incompatible-use]
+  var originalValue = parent[parentPropertyName];
+
+  if (value === null) {
+    return null;
+  }
+
+  if (typeof value === 'object') {
+    if (isClientReference(value)) {
+      // We actually have this value on the client so we could import it.
+      // This might be confusing though because on the Server it won't actually
+      // be this value, so if you're debugging client references maybe you'd be
+      // better with a place holder.
+      return serializeClientReference(request, parent, parentPropertyName, value);
+    }
+
+    if (counter.objectCount > 20) {
+      // We've reached our max number of objects to serialize across the wire so we serialize this
+      // object but no properties inside of it, as a place holder.
+      return Array.isArray(value) ? [] : {};
+    }
+
+    counter.objectCount++;
+    var writtenObjects = request.writtenObjects;
+    var existingId = writtenObjects.get(value); // $FlowFixMe[method-unbinding]
+
+    if (typeof value.then === 'function') {
+      if (existingId !== undefined) {
+        // We've seen this promise before, so we can just refer to the same result.
+        return serializePromiseID(existingId);
+      }
+
+      var thenable = value;
+
+      switch (thenable.status) {
+        case 'fulfilled':
+          {
+            return serializePromiseID(outlineConsoleValue(request, counter, thenable.value));
+          }
+
+        case 'rejected':
+          {
+            var x = thenable.reason;
+            request.pendingChunks++;
+            var errorId = request.nextChunkId++;
+
+            {
+              // We don't log these errors since they didn't actually throw into Flight.
+              var digest = '';
+              emitErrorChunk(request, errorId, digest, x);
+            }
+
+            return serializePromiseID(errorId);
+          }
+      } // If it hasn't already resolved (and been instrumented) we just encode an infinite
+      // promise that will never resolve.
+
+
+      return serializeInfinitePromise();
+    }
+
+    if (existingId !== undefined && existingId >= 0) {
+      // We've already emitted this as a real object, so we can
+      // just refer to that by its existing ID.
+      return serializeByValueID(existingId);
+    }
+
+    if (isArray(value)) {
+      return value;
+    }
+
+    if (value instanceof Map) {
+      return serializeMap(request, value);
+    }
+
+    if (value instanceof Set) {
+      return serializeSet(request, value);
+    } // TODO: FormData is not available in old Node. Remove the typeof later.
+
+
+    if (typeof FormData === 'function' && value instanceof FormData) {
+      return serializeFormData(request, value);
+    }
+
+    var iteratorFn = getIteratorFn(value);
+
+    if (iteratorFn) {
+      return Array.from(value);
+    } // $FlowFixMe[incompatible-return]
+
+
+    return value;
+  }
+
+  if (typeof value === 'string') {
+    if (value[value.length - 1] === 'Z') {
+      // Possibly a Date, whose toJSON automatically calls toISOString
+      if (originalValue instanceof Date) {
+        return serializeDateFromDateJSON(value);
+      }
+    }
+
+    if (value.length >= 1024) {
+      // For large strings, we encode them outside the JSON payload so that we
+      // don't have to double encode and double parse the strings. This can also
+      // be more compact in case the string has a lot of escaped characters.
+      return serializeLargeTextString(request, value);
+    }
+
+    return escapeStringValue(value);
+  }
+
+  if (typeof value === 'boolean') {
+    return value;
+  }
+
+  if (typeof value === 'number') {
+    return serializeNumber(value);
+  }
+
+  if (typeof value === 'undefined') {
+    return serializeUndefined();
+  }
+
+  if (typeof value === 'function') {
+    if (isClientReference(value)) {
+      return serializeClientReference(request, parent, parentPropertyName, value);
+    }
+
+    if (isTemporaryReference(value)) {
+      return serializeTemporaryReference(request, value);
+    } // Serialize the body of the function as an eval so it can be printed.
+    // $FlowFixMe[method-unbinding]
+
+
+    return serializeEval('(' + Function.prototype.toString.call(value) + ')');
+  }
+
+  if (typeof value === 'symbol') {
+    var writtenSymbols = request.writtenSymbols;
+
+    var _existingId3 = writtenSymbols.get(value);
+
+    if (_existingId3 !== undefined) {
+      return serializeByValueID(_existingId3);
+    } // $FlowFixMe[incompatible-type] `description` might be undefined
+
+
+    var name = value.description; // We use the Symbol.for version if it's not a global symbol. Close enough.
+
+    request.pendingChunks++;
+    var symbolId = request.nextChunkId++;
+    emitSymbolChunk(request, symbolId, name);
+    return serializeByValueID(symbolId);
+  }
+
+  if (typeof value === 'bigint') {
+    return serializeBigInt(value);
+  }
+
+  return 'unknown type ' + typeof value;
+}
+
+function outlineConsoleValue(request, counter, model) {
+
+  function replacer(parentPropertyName, value) {
+    try {
+      return renderConsoleValue(request, counter, this, parentPropertyName, value);
+    } catch (x) {
+      return 'unknown value';
+    }
+  } // $FlowFixMe[incompatible-type] stringify can return null
+
+
+  var json = stringify(model, replacer);
+  request.pendingChunks++;
+  var id = request.nextChunkId++;
+  var row = id.toString(16) + ':' + json + '\n';
+  var processedChunk = stringToChunk(row);
+  request.completedRegularChunks.push(processedChunk);
+  return id;
+}
+
 function forwardDebugInfo(request, id, debugInfo) {
   for (var i = 0; i < debugInfo.length; i++) {
     request.pendingChunks++;

package/cjs/react-server-dom-webpack-server.browser.production.js

@@ -410,6 +410,7 @@ const ReactDOMSharedInternals = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WI
 const ReactDOMCurrentDispatcher = ReactDOMSharedInternals.ReactDOMCurrentDispatcher;
 const previousDispatcher = ReactDOMCurrentDispatcher.current;
 ReactDOMCurrentDispatcher.current = {
+  flushSyncWork: previousDispatcher.flushSyncWork,
   prefetchDNS,
   preconnect,
   preload,
@@ -883,7 +884,7 @@ function prepareToUseHooksForRequest(request) {
 function resetHooksForRequest() {
   currentRequest$1 = null;
 }
-function prepareToUseHooksForComponent(prevThenableState) {
+function prepareToUseHooksForComponent(prevThenableState, componentDebugInfo) {
   thenableIndexCounter = 0;
   thenableState = prevThenableState;
 }
@@ -892,6 +893,7 @@ function getThenableStateAfterSuspending() {
   // which is not really supported anymore, it will be empty. We use the empty set as a
   // marker to know if this was a replay of the same component or first attempt.
   const state = thenableState || createThenableState();
+
   thenableState = null;
   return state;
 }
@@ -1446,7 +1448,7 @@ function createLazyWrapperAroundWakeable(wakeable) {
   return lazyType;
 }
 
-function renderFunctionComponent(request, task, key, Component, props) {
+function renderFunctionComponent(request, task, key, Component, props, owner) {
   // Reset the task's thenable state before continuing, so that if a later
   // component suspends we can reuse the same task object. If the same
   // component suspends again, the thenable state will be restored.
@@ -1456,7 +1458,11 @@ function renderFunctionComponent(request, task, key, Component, props) {
   prepareToUseHooksForComponent(prevThenableState); // The secondArg is always undefined in Server Components since refs error early.
 
   const secondArg = undefined;
-  let result = Component(props, secondArg);
+  let result;
+
+  {
+    result = Component(props, secondArg);
+  }
 
   if (typeof result === 'object' && result !== null && typeof result.then === 'function') {
     // When the return value is in children position we can resolve it immediately,
@@ -1530,7 +1536,8 @@ function renderFragment(request, task, children) {
   return children;
 }
 
-function renderClientElement(task, type, key, props) {
+function renderClientElement(task, type, key, props, owner) // DEV-only
+{
   // the keys of any Server Components which are not serialized.
 
 
@@ -1563,7 +1570,8 @@ function renderClientElement(task, type, key, props) {
 
 let debugID = null;
 
-function renderElement(request, task, type, key, ref, props) {
+function renderElement(request, task, type, key, ref, props, owner) // DEV only
+{
   if (ref !== null && ref !== undefined) {
     // When the ref moves to the regular props object this will implicitly
     // throw for functions. We could probably relax it to a DEV warning for other
@@ -1844,6 +1852,12 @@ function serializeMap(request, map) {
   return '$Q' + id.toString(16);
 }
 
+function serializeFormData(request, formData) {
+  const entries = Array.from(formData.entries());
+  const id = outlineModel(request, entries);
+  return '$K' + id.toString(16);
+}
+
 function serializeSet(request, set) {
   const entries = Array.from(set);
 
@@ -2080,6 +2094,11 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
 
     if (value instanceof Set) {
       return serializeSet(request, value);
+    } // TODO: FormData is not available in old Node. Remove the typeof later.
+
+
+    if (typeof FormData === 'function' && value instanceof FormData) {
+      return serializeFormData(request, value);
     }
 
     const iteratorFn = getIteratorFn(value);