react-server-dom-webpack 19.0.0-canary-48ec17b86-20240402 → 19.0.0-canary-7a2609eed-20240403

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

@@ -411,7 +411,7 @@ 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_CONTEXT_TYPE = Symbol.for('react.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');
@@ -1077,7 +1077,7 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
       }
 
       {
-        if (value.$$typeof === (REACT_PROVIDER_TYPE)) {
+        if (value.$$typeof === (REACT_CONTEXT_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));
@@ -1497,20 +1497,28 @@ function reportGlobalError(response, error) {
   });
 }
 
+function nullRefGetter() {
+  {
+    return null;
+  }
+}
+
 function createElement(type, key, props) {
   var element;
 
   {
+    // `ref` is non-enumerable in dev
     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
     };
+    Object.defineProperty(element, 'ref', {
+      enumerable: false,
+      get: nullRefGetter
+    });
   }
 
   {

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

@@ -430,7 +430,7 @@ 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_CONTEXT_TYPE = Symbol.for('react.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');
@@ -1096,7 +1096,7 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
       }
 
       {
-        if (value.$$typeof === (REACT_PROVIDER_TYPE)) {
+        if (value.$$typeof === (REACT_CONTEXT_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));
@@ -1750,20 +1750,28 @@ function reportGlobalError(response, error) {
   });
 }
 
+function nullRefGetter() {
+  {
+    return null;
+  }
+}
+
 function createElement(type, key, props) {
   var element;
 
   {
+    // `ref` is non-enumerable in dev
     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
     };
+    Object.defineProperty(element, 'ref', {
+      enumerable: false,
+      get: nullRefGetter
+    });
   }
 
   {

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

@@ -431,7 +431,7 @@ 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_CONTEXT_TYPE = Symbol.for('react.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');
@@ -1094,7 +1094,7 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
       }
 
       {
-        if (value.$$typeof === (REACT_PROVIDER_TYPE)) {
+        if (value.$$typeof === (REACT_CONTEXT_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));
@@ -1748,20 +1748,28 @@ function reportGlobalError(response, error) {
   });
 }
 
+function nullRefGetter() {
+  {
+    return null;
+  }
+}
+
 function createElement(type, key, props) {
   var element;
 
   {
+    // `ref` is non-enumerable in dev
     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
     };
+    Object.defineProperty(element, 'ref', {
+      enumerable: false,
+      get: nullRefGetter
+    });
   }
 
   {

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

@@ -384,7 +384,7 @@ 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_CONTEXT_TYPE = Symbol.for('react.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');
@@ -1047,7 +1047,7 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
       }
 
       {
-        if (value.$$typeof === (REACT_PROVIDER_TYPE)) {
+        if (value.$$typeof === (REACT_CONTEXT_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));
@@ -1701,20 +1701,28 @@ function reportGlobalError(response, error) {
   });
 }
 
+function nullRefGetter() {
+  {
+    return null;
+  }
+}
+
 function createElement(type, key, props) {
   var element;
 
   {
+    // `ref` is non-enumerable in dev
     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
     };
+    Object.defineProperty(element, 'ref', {
+      enumerable: false,
+      get: nullRefGetter
+    });
   }
 
   {

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

@@ -1034,10 +1034,6 @@ function use(usable) {
   }
 }
 
-function createSignal() {
-  return new AbortController().signal;
-}
-
 function resolveCache() {
   var request = resolveRequest();
 
@@ -1049,17 +1045,6 @@ function resolveCache() {
 }
 
 var DefaultCacheDispatcher = {
-  getCacheSignal: function () {
-    var cache = resolveCache();
-    var entry = cache.get(createSignal);
-
-    if (entry === undefined) {
-      entry = createSignal();
-      cache.set(createSignal, entry);
-    }
-
-    return entry;
-  },
   getCacheForType: function (resourceType) {
     var cache = resolveCache();
     var entry = cache.get(resourceType);
@@ -1736,15 +1721,68 @@ function renderFragment(request, task, children) {
     }
   }
 
-  {
-    return children;
-  }
+  if (task.keyPath !== null) {
+    // We have a Server Component that specifies a key but we're now splitting
+    // the tree using a fragment.
+    var fragment = [REACT_ELEMENT_TYPE, REACT_FRAGMENT_TYPE, task.keyPath, {
+      children: children
+    }];
+
+    if (!task.implicitSlot) {
+      // If this was keyed inside a set. I.e. the outer Server Component was keyed
+      // then we need to handle reorders of the whole set. To do this we need to wrap
+      // this array in a keyed Fragment.
+      return fragment;
+    } // If the outer Server Component was implicit but then an inner one had a key
+    // we don't actually need to be able to move the whole set around. It'll always be
+    // in an implicit slot. The key only exists to be able to reset the state of the
+    // children. We could achieve the same effect by passing on the keyPath to the next
+    // set of components inside the fragment. This would also allow a keyless fragment
+    // reconcile against a single child.
+    // Unfortunately because of JSON.stringify, we can't call the recursive loop for
+    // each child within this context because we can't return a set with already resolved
+    // values. E.g. a string would get double encoded. Returning would pop the context.
+    // So instead, we wrap it with an unkeyed fragment and inner keyed fragment.
+
+
+    return [fragment];
+  } // Since we're yielding here, that implicitly resets the keyPath context on the
+  // way up. Which is what we want since we've consumed it. If this changes to
+  // be recursive serialization, we need to reset the keyPath and implicitSlot,
+  // before recursing here.
+
+
+  return children;
 }
 
 function renderClientElement(task, type, key, props) {
-  {
-    return [REACT_ELEMENT_TYPE, type, key, props];
-  } // We prepend the terminal client element that actually gets serialized with
+  // the keys of any Server Components which are not serialized.
+
+
+  var keyPath = task.keyPath;
+
+  if (key === null) {
+    key = keyPath;
+  } else if (keyPath !== null) {
+    key = keyPath + ',' + key;
+  }
+
+  var element = [REACT_ELEMENT_TYPE, type, key, props];
+
+  if (task.implicitSlot && key !== null) {
+    // The root Server Component had no key so it was in an implicit slot.
+    // If we had a key lower, it would end up in that slot with an explicit key.
+    // We wrap the element in a fragment to give it an implicit key slot with
+    // an inner explicit key.
+    return [element];
+  } // Since we're yielding here, that implicitly resets the keyPath context on the
+  // way up. Which is what we want since we've consumed it. If this changes to
+  // be recursive serialization, we need to reset the keyPath and implicitSlot,
+  // before recursing here. We also need to reset it once we render into an array
+  // or anything else too which we also get implicitly.
+
+
+  return element;
 } // The chunk ID we're currently rendering that we can assign debug data to.
 
 
@@ -1863,7 +1901,7 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) {
   if (typeof model === 'object' && model !== null) {
     // If we're about to write this into a new task we can assign it an ID early so that
     // any other references can refer to the value we're about to write.
-    {
+    if ((keyPath !== null || implicitSlot)) ; else {
       request.writtenObjects.set(model, id);
     }
   }
@@ -2194,7 +2232,7 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
           var _existingId = _writtenObjects.get(value);
 
           if (_existingId !== undefined) {
-            if (modelRoot === value) {
+            if ((task.keyPath !== null || task.implicitSlot)) ; else if (modelRoot === value) {
               // This is the ID we're currently emitting so we need to write it
               // once but if we discover it again, we refer to it by id.
               modelRoot = null;
@@ -2246,7 +2284,11 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
           var ref;
 
           {
-            ref = element.ref;
+            // TODO: This is a temporary, intermediate step. Once the feature
+            // flag is removed, we should get the ref off the props object right
+            // before using it.
+            var refProp = props.ref;
+            ref = refProp !== undefined ? refProp : null;
           } // Attempt to render the Server Component.
 
 
@@ -2295,7 +2337,14 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
 
     if (typeof value.then === 'function') {
       if (existingId !== undefined) {
-        if (modelRoot === value) {
+        if ((task.keyPath !== null || task.implicitSlot)) {
+          // If we're in some kind of context we can't reuse the result of this render or
+          // previous renders of this element. We only reuse Promises if they're not wrapped
+          // by another Server Component.
+          var _promiseId = serializeThenable(request, task, value);
+
+          return serializePromiseID(_promiseId);
+        } else if (modelRoot === value) {
           // This is the ID we're currently emitting so we need to write it
           // once but if we discover it again, we refer to it by id.
           modelRoot = null;

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

@@ -992,10 +992,6 @@ function use(usable) {
   }
 }
 
-function createSignal() {
-  return new AbortController().signal;
-}
-
 function resolveCache() {
   const request = resolveRequest();
 
@@ -1007,18 +1003,6 @@ function resolveCache() {
 }
 
 const DefaultCacheDispatcher = {
-  getCacheSignal() {
-    const cache = resolveCache();
-    let entry = cache.get(createSignal);
-
-    if (entry === undefined) {
-      entry = createSignal();
-      cache.set(createSignal, entry);
-    }
-
-    return entry;
-  },
-
   getCacheForType(resourceType) {
     const cache = resolveCache();
     let entry = cache.get(resourceType);
@@ -1512,15 +1496,68 @@ function renderFunctionComponent(request, task, key, Component, props) {
 
 function renderFragment(request, task, children) {
 
-  {
-    return children;
-  }
+  if (task.keyPath !== null) {
+    // We have a Server Component that specifies a key but we're now splitting
+    // the tree using a fragment.
+    const fragment = [REACT_ELEMENT_TYPE, REACT_FRAGMENT_TYPE, task.keyPath, {
+      children
+    }];
+
+    if (!task.implicitSlot) {
+      // If this was keyed inside a set. I.e. the outer Server Component was keyed
+      // then we need to handle reorders of the whole set. To do this we need to wrap
+      // this array in a keyed Fragment.
+      return fragment;
+    } // If the outer Server Component was implicit but then an inner one had a key
+    // we don't actually need to be able to move the whole set around. It'll always be
+    // in an implicit slot. The key only exists to be able to reset the state of the
+    // children. We could achieve the same effect by passing on the keyPath to the next
+    // set of components inside the fragment. This would also allow a keyless fragment
+    // reconcile against a single child.
+    // Unfortunately because of JSON.stringify, we can't call the recursive loop for
+    // each child within this context because we can't return a set with already resolved
+    // values. E.g. a string would get double encoded. Returning would pop the context.
+    // So instead, we wrap it with an unkeyed fragment and inner keyed fragment.
+
+
+    return [fragment];
+  } // Since we're yielding here, that implicitly resets the keyPath context on the
+  // way up. Which is what we want since we've consumed it. If this changes to
+  // be recursive serialization, we need to reset the keyPath and implicitSlot,
+  // before recursing here.
+
+
+  return children;
 }
 
 function renderClientElement(task, type, key, props) {
-  {
-    return [REACT_ELEMENT_TYPE, type, key, props];
-  } // We prepend the terminal client element that actually gets serialized with
+  // the keys of any Server Components which are not serialized.
+
+
+  const keyPath = task.keyPath;
+
+  if (key === null) {
+    key = keyPath;
+  } else if (keyPath !== null) {
+    key = keyPath + ',' + key;
+  }
+
+  const element = [REACT_ELEMENT_TYPE, type, key, props];
+
+  if (task.implicitSlot && key !== null) {
+    // The root Server Component had no key so it was in an implicit slot.
+    // If we had a key lower, it would end up in that slot with an explicit key.
+    // We wrap the element in a fragment to give it an implicit key slot with
+    // an inner explicit key.
+    return [element];
+  } // Since we're yielding here, that implicitly resets the keyPath context on the
+  // way up. Which is what we want since we've consumed it. If this changes to
+  // be recursive serialization, we need to reset the keyPath and implicitSlot,
+  // before recursing here. We also need to reset it once we render into an array
+  // or anything else too which we also get implicitly.
+
+
+  return element;
 } // The chunk ID we're currently rendering that we can assign debug data to.
 
 
@@ -1612,7 +1649,7 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) {
   if (typeof model === 'object' && model !== null) {
     // If we're about to write this into a new task we can assign it an ID early so that
     // any other references can refer to the value we're about to write.
-    {
+    if ((keyPath !== null || implicitSlot)) ; else {
       request.writtenObjects.set(model, id);
     }
   }
@@ -1921,7 +1958,7 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
           const existingId = writtenObjects.get(value);
 
           if (existingId !== undefined) {
-            if (modelRoot === value) {
+            if ((task.keyPath !== null || task.implicitSlot)) ; else if (modelRoot === value) {
               // This is the ID we're currently emitting so we need to write it
               // once but if we discover it again, we refer to it by id.
               modelRoot = null;
@@ -1956,7 +1993,11 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
           let ref;
 
           {
-            ref = element.ref;
+            // TODO: This is a temporary, intermediate step. Once the feature
+            // flag is removed, we should get the ref off the props object right
+            // before using it.
+            const refProp = props.ref;
+            ref = refProp !== undefined ? refProp : null;
           } // Attempt to render the Server Component.
 
 
@@ -1987,7 +2028,13 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
 
     if (typeof value.then === 'function') {
       if (existingId !== undefined) {
-        if (modelRoot === value) {
+        if ((task.keyPath !== null || task.implicitSlot)) {
+          // If we're in some kind of context we can't reuse the result of this render or
+          // previous renders of this element. We only reuse Promises if they're not wrapped
+          // by another Server Component.
+          const promiseId = serializeThenable(request, task, value);
+          return serializePromiseID(promiseId);
+        } else if (modelRoot === value) {
           // This is the ID we're currently emitting so we need to write it
           // once but if we discover it again, we refer to it by id.
           modelRoot = null;