react-server-dom-webpack 19.0.0-canary-fd0da3eef-20240404 → 19.0.0-canary-4c12339ce-20240408

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

@@ -455,6 +455,7 @@
   var ReactDOMCurrentDispatcher = ReactDOMSharedInternals.ReactDOMCurrentDispatcher;
   var previousDispatcher = ReactDOMCurrentDispatcher.current;
   ReactDOMCurrentDispatcher.current = {
+    flushSyncWork: previousDispatcher.flushSyncWork,
     prefetchDNS: prefetchDNS,
     preconnect: preconnect,
     preload: preload,
@@ -922,21 +923,34 @@
   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;
   }
@@ -1415,6 +1429,7 @@
   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
@@ -1635,33 +1650,56 @@
     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,
@@ -1752,7 +1790,8 @@
     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.
 
 
@@ -1764,7 +1803,7 @@
       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.
@@ -1802,7 +1841,8 @@
     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
@@ -1823,14 +1863,14 @@
     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
@@ -1848,11 +1888,11 @@
       // 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) {
@@ -1861,17 +1901,17 @@
             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);
           }
       }
     }
@@ -1950,6 +1990,10 @@
     return '$L' + id.toString(16);
   }
 
+  function serializeInfinitePromise() {
+    return '$@';
+  }
+
   function serializePromiseID(id) {
     return '$@' + id.toString(16);
   }
@@ -2114,6 +2158,12 @@
     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);
 
@@ -2290,7 +2340,7 @@
 
 
             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:
@@ -2388,6 +2438,11 @@
 
       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);
@@ -2649,14 +2704,216 @@
   }
 
   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++;