react-server-dom-webpack 18.3.0-canary-14898b6a9-20240318 → 18.3.0-canary-4b84f1161-20240318

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

@@ -33,48 +33,6 @@ function readFinalStringChunk(decoder, buffer) {
   return decoder.decode(buffer);
 }
 
-var badgeFormat = '%c%s%c '; // Same badge styling as DevTools.
-
-var badgeStyle = // We use a fixed background if light-dark is not supported, otherwise
-// we use a transparent background.
-'background: #e6e6e6;' + 'background: light-dark(rgba(0,0,0,0.1), rgba(255,255,255,0.25));' + 'color: #000000;' + 'color: light-dark(#000000, #ffffff);' + 'border-radius: 2px';
-var resetStyle = '';
-var pad = ' ';
-function printToConsole(methodName, args, badgeName) {
-  var offset = 0;
-
-  switch (methodName) {
-    case 'dir':
-    case 'dirxml':
-    case 'groupEnd':
-    case 'table':
-      {
-        // These methods cannot be colorized because they don't take a formatting string.
-        // eslint-disable-next-line react-internal/no-production-logging
-        console[methodName].apply(console, args);
-        return;
-      }
-
-    case 'assert':
-      {
-        // assert takes formatting options as the second argument.
-        offset = 1;
-      }
-  }
-
-  var newArgs = args.slice(0);
-
-  if (typeof newArgs[offset] === 'string') {
-    newArgs.splice(offset, 1, badgeFormat + newArgs[offset], badgeStyle, pad + badgeName + pad, resetStyle);
-  } else {
-    newArgs.splice(offset, 0, badgeFormat, badgeStyle, pad + badgeName + pad, resetStyle);
-  } // eslint-disable-next-line react-internal/no-production-logging
-
-
-  console[methodName].apply(console, newArgs);
-  return;
-}
-
 // This is the parsed shape of the wire format which is why it is
 // condensed to only the essentialy information
 var ID = 0;
@@ -413,12 +371,14 @@ function printWarning(level, format, args) {
 // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
 // The Symbol used to tag the ReactElement-like types.
 var REACT_ELEMENT_TYPE = Symbol.for('react.element');
-var REACT_PROVIDER_TYPE = Symbol.for('react.provider'); // TODO: Delete with enableRenderableContext
+var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
+var REACT_SERVER_CONTEXT_TYPE = Symbol.for('react.server_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_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED = Symbol.for('react.default_value');
 var MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
 var FAUX_ITERATOR_SYMBOL = '@@iterator';
 function getIteratorFn(maybeIterable) {
@@ -530,10 +490,6 @@ function describeValueForErrorMessage(value) {
           return '[...]';
         }
 
-        if (value !== null && value.$$typeof === CLIENT_REFERENCE_TAG) {
-          return describeClientReference();
-        }
-
         var name = objectName(value);
 
         if (name === 'Object') {
@@ -544,15 +500,7 @@ function describeValueForErrorMessage(value) {
       }
 
     case 'function':
-      {
-        if (value.$$typeof === CLIENT_REFERENCE_TAG) {
-          return describeClientReference();
-        }
-
-        var _name = value.displayName || value.name;
-
-        return _name ? 'function ' + _name : 'function';
-      }
+      return 'function';
 
     default:
       // eslint-disable-next-line react-internal/safe-string-coercion
@@ -598,12 +546,6 @@ function describeElementType(type) {
   return '';
 }
 
-var CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');
-
-function describeClientReference(ref) {
-  return 'client';
-}
-
 function describeObjectForErrorMessage(objectOrArray, expandedName) {
   var objKind = objectName(objectOrArray);
 
@@ -682,8 +624,6 @@ function describeObjectForErrorMessage(objectOrArray, expandedName) {
   } else {
     if (objectOrArray.$$typeof === REACT_ELEMENT_TYPE) {
       str = '<' + describeElementType(objectOrArray.type) + '/>';
-    } else if (objectOrArray.$$typeof === CLIENT_REFERENCE_TAG) {
-      return describeClientReference();
     } else if (jsxPropsParents.has(objectOrArray)) {
       // Print JSX
       var _type = jsxPropsParents.get(objectOrArray);
@@ -734,9 +674,9 @@ function describeObjectForErrorMessage(objectOrArray, expandedName) {
           str += ', ';
         }
 
-        var _name2 = _names[_i3];
-        str += describeKeyForErrorMessage(_name2) + ': ';
-        var _value3 = _object[_name2];
+        var _name = _names[_i3];
+        str += describeKeyForErrorMessage(_name) + ': ';
+        var _value3 = _object[_name];
 
         var _substr3 = void 0;
 
@@ -746,7 +686,7 @@ function describeObjectForErrorMessage(objectOrArray, expandedName) {
           _substr3 = describeValueForErrorMessage(_value3);
         }
 
-        if (_name2 === expandedName) {
+        if (_name === expandedName) {
           start = str.length;
           length = _substr3.length;
           str += _substr3;
@@ -971,7 +911,7 @@ function processReply(root, formFieldPrefix, resolve, reject) {
           error('React Element cannot be passed to Server Functions from the Client.%s', describeObjectForErrorMessage(parent, key));
         } else if (value.$$typeof === REACT_LAZY_TYPE) {
           error('React Lazy cannot be passed to Server Functions from the Client.%s', describeObjectForErrorMessage(parent, key));
-        } else if (value.$$typeof === (REACT_PROVIDER_TYPE)) {
+        } else if (value.$$typeof === REACT_PROVIDER_TYPE) {
           error('React Context Providers cannot be passed to Server Functions from the Client.%s', describeObjectForErrorMessage(parent, key));
         } else if (objectName(value) !== 'Object') {
           error('Only plain objects can be passed to Server Functions from the Client. ' + '%s objects are not supported.%s', objectName(value), describeObjectForErrorMessage(parent, key));
@@ -1075,12 +1015,12 @@ function processReply(root, formFieldPrefix, resolve, reject) {
   }
 }
 
-function registerServerReference(proxy, reference, encodeFormAction) {
+function registerServerReference(proxy, reference) {
 
   knownServerReferences.set(proxy, reference);
 } // $FlowFixMe[method-unbinding]
 
-function createServerReference(id, callServer, encodeFormAction) {
+function createServerReference(id, callServer) {
   var proxy = function () {
     // $FlowFixMe[method-unbinding]
     var args = Array.prototype.slice.call(arguments);
@@ -1094,6 +1034,57 @@ function createServerReference(id, callServer, encodeFormAction) {
   return proxy;
 }
 
+var ContextRegistry = ReactSharedInternals.ContextRegistry;
+function getOrCreateServerContext(globalName) {
+  if (!ContextRegistry[globalName]) {
+    var context = {
+      $$typeof: REACT_SERVER_CONTEXT_TYPE,
+      // As a workaround to support multiple concurrent renderers, we categorize
+      // some renderers as primary and others as secondary. We only expect
+      // there to be two concurrent renderers at most: React Native (primary) and
+      // Fabric (secondary); React DOM (primary) and React ART (secondary).
+      // Secondary renderers store their context values on separate fields.
+      _currentValue: REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED,
+      _currentValue2: REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED,
+      _defaultValue: REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED,
+      // Used to track how many concurrent renderers this context currently
+      // supports within in a single renderer. Such as parallel server rendering.
+      _threadCount: 0,
+      // These are circular
+      Provider: null,
+      Consumer: null,
+      _globalName: globalName
+    };
+    context.Provider = {
+      $$typeof: REACT_PROVIDER_TYPE,
+      _context: context
+    };
+
+    {
+      var hasWarnedAboutUsingConsumer;
+      context._currentRenderer = null;
+      context._currentRenderer2 = null;
+      Object.defineProperties(context, {
+        Consumer: {
+          get: function () {
+            if (!hasWarnedAboutUsingConsumer) {
+              error('Consumer pattern is not supported by ReactServerContext');
+
+              hasWarnedAboutUsingConsumer = true;
+            }
+
+            return null;
+          }
+        }
+      });
+    }
+
+    ContextRegistry[globalName] = context;
+  }
+
+  return ContextRegistry[globalName];
+}
+
 var ROW_ID = 0;
 var ROW_TAG = 1;
 var ROW_LENGTH = 2;
@@ -1112,10 +1103,6 @@ function Chunk(status, value, reason, response) {
   this.value = value;
   this.reason = reason;
   this._response = response;
-
-  {
-    this._debugInfo = null;
-  }
 } // We subclass Promise.prototype so that we get other methods like .catch
 
 
@@ -1392,20 +1379,17 @@ function reportGlobalError(response, error) {
 }
 
 function createElement(type, key, props) {
-  var element;
-
-  {
-    element = {
-      // This tag allows us to uniquely identify this as a React Element
-      $$typeof: REACT_ELEMENT_TYPE,
-      type: type,
-      key: key,
-      ref: null,
-      props: props,
-      // Record the component responsible for creating this element.
-      _owner: null
-    };
-  }
+  var element = {
+    // This tag allows us to uniquely identify this as a React Element
+    $$typeof: REACT_ELEMENT_TYPE,
+    // Built-in properties that belong on the element
+    type: type,
+    key: key,
+    ref: null,
+    props: props,
+    // Record the component responsible for creating this element.
+    _owner: null
+  };
 
   {
     // We don't really need to add any of these but keeping them for good measure.
@@ -1418,12 +1402,17 @@ function createElement(type, key, props) {
       writable: true,
       value: true // This element has already been validated on the server.
 
-    }); // debugInfo contains Server Component debug information.
-
-    Object.defineProperty(element, '_debugInfo', {
+    });
+    Object.defineProperty(element, '_self', {
       configurable: false,
       enumerable: false,
-      writable: true,
+      writable: false,
+      value: null
+    });
+    Object.defineProperty(element, '_source', {
+      configurable: false,
+      enumerable: false,
+      writable: false,
       value: null
     });
   }
@@ -1437,13 +1426,6 @@ function createLazyChunkWrapper(chunk) {
     _payload: chunk,
     _init: readChunk
   };
-
-  {
-    // Ensure we have a live array to track future debug info.
-    var chunkDebugInfo = chunk._debugInfo || (chunk._debugInfo = []);
-    lazyType._debugInfo = chunkDebugInfo;
-  }
-
   return lazyType;
 }
 
@@ -1579,11 +1561,6 @@ function parseModelString(response, parentObject, key, value) {
       case '@':
         {
           // Promise
-          if (value.length === 2) {
-            // Infinite promise that never resolves.
-            return new Promise(function () {});
-          }
-
           var _id = parseInt(value.slice(2), 16);
 
           var _chunk = getChunk(response, _id);
@@ -1597,6 +1574,12 @@ function parseModelString(response, parentObject, key, value) {
           return Symbol.for(value.slice(2));
         }
 
+      case 'P':
+        {
+          // Server Context Provider
+          return getOrCreateServerContext(value.slice(2)).Provider;
+        }
+
       case 'F':
         {
           // Server Reference
@@ -1666,23 +1649,6 @@ function parseModelString(response, parentObject, key, value) {
           return BigInt(value.slice(2));
         }
 
-      case 'E':
-        {
-          {
-            // In DEV mode we allow indirect eval to produce functions for logging.
-            // This should not compile to eval() because then it has local scope access.
-            try {
-              // eslint-disable-next-line no-eval
-              return (0, eval)(value.slice(2));
-            } catch (x) {
-              // We currently use this to express functions so we fail parsing it,
-              // let's just return a blank function as a place holder.
-              return function () {};
-            }
-          } // Fallthrough
-
-        }
-
       default:
         {
           // We assume that anything else is a reference ID.
@@ -1703,29 +1669,7 @@ function parseModelString(response, parentObject, key, value) {
 
           switch (_chunk2.status) {
             case INITIALIZED:
-              var chunkValue = _chunk2.value;
-
-              if (_chunk2._debugInfo) {
-                // If we have a direct reference to an object that was rendered by a synchronous
-                // server component, it might have some debug info about how it was rendered.
-                // We forward this to the underlying object. This might be a React Element or
-                // an Array fragment.
-                // If this was a string / number return value we lose the debug info. We choose
-                // that tradeoff to allow sync server components to return plain values and not
-                // use them as React Nodes necessarily. We could otherwise wrap them in a Lazy.
-                if (typeof chunkValue === 'object' && chunkValue !== null && (Array.isArray(chunkValue) || chunkValue.$$typeof === REACT_ELEMENT_TYPE) && !chunkValue._debugInfo) {
-                  // We should maybe use a unique symbol for arrays but this is a React owned array.
-                  // $FlowFixMe[prop-missing]: This should be added to elements.
-                  Object.defineProperty(chunkValue, '_debugInfo', {
-                    configurable: false,
-                    enumerable: false,
-                    writable: true,
-                    value: _chunk2._debugInfo
-                  });
-                }
-              }
-
-              return chunkValue;
+              return _chunk2.value;
 
             case PENDING:
             case BLOCKED:
@@ -1762,13 +1706,12 @@ function missingCall() {
   throw new Error('Trying to call a function from "use server" but the callServer option ' + 'was not implemented in your router runtime.');
 }
 
-function createResponse(bundlerConfig, moduleLoading, callServer, encodeFormAction, nonce) {
+function createResponse(bundlerConfig, moduleLoading, callServer, nonce) {
   var chunks = new Map();
   var response = {
     _bundlerConfig: bundlerConfig,
     _moduleLoading: moduleLoading,
     _callServer: callServer !== undefined ? callServer : missingCall,
-    _encodeFormAction: encodeFormAction,
     _nonce: nonce,
     _chunks: chunks,
     _stringDecoder: createStringDecoder(),
@@ -1865,24 +1808,6 @@ function resolveHint(response, code, model) {
   dispatchHint(code, hintModel);
 }
 
-function resolveDebugInfo(response, id, debugInfo) {
-
-  var chunk = getChunk(response, id);
-  var chunkDebugInfo = chunk._debugInfo || (chunk._debugInfo = []);
-  chunkDebugInfo.push(debugInfo);
-}
-
-function resolveConsoleEntry(response, value) {
-
-  var payload = parseModel(response, value);
-  var methodName = payload[0]; // TODO: Restore the fake stack before logging.
-  // const stackTrace = payload[1];
-
-  var env = payload[2];
-  var args = payload.slice(3);
-  printToConsole(methodName, args, env);
-}
-
 function processFullRow(response, id, tag, buffer, chunk) {
 
   var stringDecoder = response._stringDecoder;
@@ -1933,28 +1858,6 @@ function processFullRow(response, id, tag, buffer, chunk) {
         return;
       }
 
-    case 68
-    /* "D" */
-    :
-      {
-        {
-          var debugInfo = JSON.parse(row);
-          resolveDebugInfo(response, id, debugInfo);
-          return;
-        } // Fallthrough to share the error with Console entries.
-
-      }
-
-    case 87
-    /* "W" */
-    :
-      {
-        {
-          resolveConsoleEntry(response, row);
-          return;
-        }
-      }
-
     case 80
     /* "P" */
     :
@@ -2132,8 +2035,7 @@ function close(response) {
 }
 
 function createResponseFromOptions(options) {
-  return createResponse(null, null, options && options.callServer ? options.callServer : undefined, undefined, // encodeFormAction
-  undefined // nonce
+  return createResponse(null, null, options && options.callServer ? options.callServer : undefined, undefined // nonce
   );
 }
 

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

@@ -11,6 +11,7 @@
 'use strict';
 
 var ReactDOM = require('react-dom');
+var React = require('react');
 
 // -----------------------------------------------------------------------------
 const enableBinaryFlight = false;
@@ -324,7 +325,10 @@ function refineModel(code, model) {
 // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
 // The Symbol used to tag the ReactElement-like types.
 const REACT_ELEMENT_TYPE = Symbol.for('react.element');
+const REACT_PROVIDER_TYPE = Symbol.for('react.provider');
+const REACT_SERVER_CONTEXT_TYPE = Symbol.for('react.server_context');
 const REACT_LAZY_TYPE = Symbol.for('react.lazy');
+const REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED = Symbol.for('react.default_value');
 const MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
 const FAUX_ITERATOR_SYMBOL = '@@iterator';
 function getIteratorFn(maybeIterable) {
@@ -617,12 +621,12 @@ function processReply(root, formFieldPrefix, resolve, reject) {
   }
 }
 
-function registerServerReference(proxy, reference, encodeFormAction) {
+function registerServerReference(proxy, reference) {
 
   knownServerReferences.set(proxy, reference);
 } // $FlowFixMe[method-unbinding]
 
-function createServerReference(id, callServer, encodeFormAction) {
+function createServerReference(id, callServer) {
   const proxy = function () {
     // $FlowFixMe[method-unbinding]
     const args = Array.prototype.slice.call(arguments);
@@ -636,6 +640,40 @@ function createServerReference(id, callServer, encodeFormAction) {
   return proxy;
 }
 
+const ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+
+const ContextRegistry = ReactSharedInternals.ContextRegistry;
+function getOrCreateServerContext(globalName) {
+  if (!ContextRegistry[globalName]) {
+    const context = {
+      $$typeof: REACT_SERVER_CONTEXT_TYPE,
+      // As a workaround to support multiple concurrent renderers, we categorize
+      // some renderers as primary and others as secondary. We only expect
+      // there to be two concurrent renderers at most: React Native (primary) and
+      // Fabric (secondary); React DOM (primary) and React ART (secondary).
+      // Secondary renderers store their context values on separate fields.
+      _currentValue: REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED,
+      _currentValue2: REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED,
+      _defaultValue: REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED,
+      // Used to track how many concurrent renderers this context currently
+      // supports within in a single renderer. Such as parallel server rendering.
+      _threadCount: 0,
+      // These are circular
+      Provider: null,
+      Consumer: null,
+      _globalName: globalName
+    };
+    context.Provider = {
+      $$typeof: REACT_PROVIDER_TYPE,
+      _context: context
+    };
+
+    ContextRegistry[globalName] = context;
+  }
+
+  return ContextRegistry[globalName];
+}
+
 const ROW_ID = 0;
 const ROW_TAG = 1;
 const ROW_LENGTH = 2;
@@ -930,20 +968,17 @@ function reportGlobalError(response, error) {
 }
 
 function createElement(type, key, props) {
-  let element;
-
-  {
-    element = {
-      // This tag allows us to uniquely identify this as a React Element
-      $$typeof: REACT_ELEMENT_TYPE,
-      type,
-      key,
-      ref: null,
-      props,
-      // Record the component responsible for creating this element.
-      _owner: null
-    };
-  }
+  const element = {
+    // This tag allows us to uniquely identify this as a React Element
+    $$typeof: REACT_ELEMENT_TYPE,
+    // Built-in properties that belong on the element
+    type: type,
+    key: key,
+    ref: null,
+    props: props,
+    // Record the component responsible for creating this element.
+    _owner: null
+  };
 
   return element;
 }
@@ -954,7 +989,6 @@ function createLazyChunkWrapper(chunk) {
     _payload: chunk,
     _init: readChunk
   };
-
   return lazyType;
 }
 
@@ -1088,11 +1122,6 @@ function parseModelString(response, parentObject, key, value) {
       case '@':
         {
           // Promise
-          if (value.length === 2) {
-            // Infinite promise that never resolves.
-            return new Promise(() => {});
-          }
-
           const id = parseInt(value.slice(2), 16);
           const chunk = getChunk(response, id);
           return chunk;
@@ -1104,6 +1133,12 @@ function parseModelString(response, parentObject, key, value) {
           return Symbol.for(value.slice(2));
         }
 
+      case 'P':
+        {
+          // Server Context Provider
+          return getOrCreateServerContext(value.slice(2)).Provider;
+        }
+
       case 'F':
         {
           // Server Reference
@@ -1169,8 +1204,6 @@ function parseModelString(response, parentObject, key, value) {
           return BigInt(value.slice(2));
         }
 
-      case 'E':
-
       default:
         {
           // We assume that anything else is a reference ID.
@@ -1190,9 +1223,7 @@ function parseModelString(response, parentObject, key, value) {
 
           switch (chunk.status) {
             case INITIALIZED:
-              const chunkValue = chunk.value;
-
-              return chunkValue;
+              return chunk.value;
 
             case PENDING:
             case BLOCKED:
@@ -1227,13 +1258,12 @@ function missingCall() {
   throw new Error('Trying to call a function from "use server" but the callServer option ' + 'was not implemented in your router runtime.');
 }
 
-function createResponse(bundlerConfig, moduleLoading, callServer, encodeFormAction, nonce) {
+function createResponse(bundlerConfig, moduleLoading, callServer, nonce) {
   const chunks = new Map();
   const response = {
     _bundlerConfig: bundlerConfig,
     _moduleLoading: moduleLoading,
     _callServer: callServer !== undefined ? callServer : missingCall,
-    _encodeFormAction: encodeFormAction,
     _nonce: nonce,
     _chunks: chunks,
     _stringDecoder: createStringDecoder(),
@@ -1375,18 +1405,6 @@ function processFullRow(response, id, tag, buffer, chunk) {
         return;
       }
 
-    case 68
-    /* "D" */
-    :
-
-    case 87
-    /* "W" */
-    :
-      {
-
-        throw new Error('Failed to read a RSC payload created by a development version of React ' + 'on the server while using a production version on the client. Always use ' + 'matching versions on the server and the client.');
-      }
-
     case 80
     /* "P" */
     :
@@ -1563,8 +1581,7 @@ function close(response) {
 }
 
 function createResponseFromOptions(options) {
-  return createResponse(null, null, options && options.callServer ? options.callServer : undefined, undefined, // encodeFormAction
-  undefined // nonce
+  return createResponse(null, null, options && options.callServer ? options.callServer : undefined, undefined // nonce
   );
 }