Test top level fragment inside lazy semantics (#28852)

This wasn't clearly articulated and tested why the code structure is like this but I think the logic is correct - or at least consistent with the weird semantics. We place this top-level fragment check inside the recursion so that you can resolve how many every Lazy or Usable wrappers you want and it still preserves the same semantics if they weren't there (which they might not be as a matter of a race condition). However, we don't actually recurse with the top-level fragment unwrapping itself because nesting a bunch of keyless fragments isn't the same as a single fragment/element. DiffTrain build for [4ca20fd](4ca20fd)
facebook · Apr 17, 2024 · 656e0f4 · 656e0f4
1 parent 1db2e35
commit 656e0f4
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 25 deletions.
diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION
@@ -1 +1 @@
-c0cf7c696cf454b49b35d8dae01ab111739dab46
+4ca20fd36b2444a74279e7022f89894710b1daab
diff --git a/compiled/facebook-www/ReactART-dev.classic.js b/compiled/facebook-www/ReactART-dev.classic.js
@@ -66,7 +66,7 @@ if (__DEV__) {
       return self;
     }
 
-    var ReactVersion = "19.0.0-www-classic-e168c427";
+    var ReactVersion = "19.0.0-www-classic-033703c4";
 
     var LegacyRoot = 0;
     var ConcurrentRoot = 1;
@@ -8329,14 +8329,17 @@ if (__DEV__) {
         lanes,
         debugInfo
       ) {
-        // This function is not recursive.
+        // This function is only recursive for Usables/Lazy and not nested arrays.
+        // That's so that using a Lazy wrapper is unobservable to the Fragment
+        // convention.
         // If the top level item is an array, we treat it as a set of children,
         // not as a fragment. Nested arrays on the other hand will be treated as
         // fragment nodes. Recursion happens at the normal flow.
         // Handle top level unkeyed fragments as if they were arrays.
         // This leads to an ambiguity between <>{[...]}</> and <>...</>.
         // We treat the ambiguous cases above the same.
-        // TODO: Let's use recursion like we do for Usable nodes?
+        // We don't use recursion here because a fragment inside a fragment
+        // is no longer considered "top level" for these purposes.
         var isUnkeyedTopLevelFragment =
           typeof newChild === "object" &&
           newChild !== null &&

diff --git a/compiled/facebook-www/ReactART-dev.modern.js b/compiled/facebook-www/ReactART-dev.modern.js
@@ -66,7 +66,7 @@ if (__DEV__) {
       return self;
     }
 
-    var ReactVersion = "19.0.0-www-modern-604f1bb4";
+    var ReactVersion = "19.0.0-www-modern-7fadda4f";
 
     var LegacyRoot = 0;
     var ConcurrentRoot = 1;
@@ -8080,14 +8080,17 @@ if (__DEV__) {
         lanes,
         debugInfo
       ) {
-        // This function is not recursive.
+        // This function is only recursive for Usables/Lazy and not nested arrays.
+        // That's so that using a Lazy wrapper is unobservable to the Fragment
+        // convention.
         // If the top level item is an array, we treat it as a set of children,
         // not as a fragment. Nested arrays on the other hand will be treated as
         // fragment nodes. Recursion happens at the normal flow.
         // Handle top level unkeyed fragments as if they were arrays.
         // This leads to an ambiguity between <>{[...]}</> and <>...</>.
         // We treat the ambiguous cases above the same.
-        // TODO: Let's use recursion like we do for Usable nodes?
+        // We don't use recursion here because a fragment inside a fragment
+        // is no longer considered "top level" for these purposes.
         var isUnkeyedTopLevelFragment =
           typeof newChild === "object" &&
           newChild !== null &&

diff --git a/compiled/facebook-www/ReactDOM-dev.classic.js b/compiled/facebook-www/ReactDOM-dev.classic.js
@@ -12892,14 +12892,17 @@ if (__DEV__) {
         lanes,
         debugInfo
       ) {
-        // This function is not recursive.
+        // This function is only recursive for Usables/Lazy and not nested arrays.
+        // That's so that using a Lazy wrapper is unobservable to the Fragment
+        // convention.
         // If the top level item is an array, we treat it as a set of children,
         // not as a fragment. Nested arrays on the other hand will be treated as
         // fragment nodes. Recursion happens at the normal flow.
         // Handle top level unkeyed fragments as if they were arrays.
         // This leads to an ambiguity between <>{[...]}</> and <>...</>.
         // We treat the ambiguous cases above the same.
-        // TODO: Let's use recursion like we do for Usable nodes?
+        // We don't use recursion here because a fragment inside a fragment
+        // is no longer considered "top level" for these purposes.
         var isUnkeyedTopLevelFragment =
           typeof newChild === "object" &&
           newChild !== null &&
@@ -36250,7 +36253,7 @@ if (__DEV__) {
       return root;
     }
 
-    var ReactVersion = "19.0.0-www-classic-ccb6967b";
+    var ReactVersion = "19.0.0-www-classic-509be4f1";
 
     function createPortal$1(
       children,

diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js
@@ -19679,14 +19679,17 @@ if (__DEV__) {
         lanes,
         debugInfo
       ) {
-        // This function is not recursive.
+        // This function is only recursive for Usables/Lazy and not nested arrays.
+        // That's so that using a Lazy wrapper is unobservable to the Fragment
+        // convention.
         // If the top level item is an array, we treat it as a set of children,
         // not as a fragment. Nested arrays on the other hand will be treated as
         // fragment nodes. Recursion happens at the normal flow.
         // Handle top level unkeyed fragments as if they were arrays.
         // This leads to an ambiguity between <>{[...]}</> and <>...</>.
         // We treat the ambiguous cases above the same.
-        // TODO: Let's use recursion like we do for Usable nodes?
+        // We don't use recursion here because a fragment inside a fragment
+        // is no longer considered "top level" for these purposes.
         var isUnkeyedTopLevelFragment =
           typeof newChild === "object" &&
           newChild !== null &&
@@ -45766,7 +45769,7 @@ if (__DEV__) {
       return root;
     }
 
-    var ReactVersion = "19.0.0-www-modern-f3e31fa4";
+    var ReactVersion = "19.0.0-www-modern-8b7a101a";
 
     function createPortal$1(
       children,

diff --git a/compiled/facebook-www/ReactDOMTesting-dev.classic.js b/compiled/facebook-www/ReactDOMTesting-dev.classic.js
@@ -13021,14 +13021,17 @@ if (__DEV__) {
         lanes,
         debugInfo
       ) {
-        // This function is not recursive.
+        // This function is only recursive for Usables/Lazy and not nested arrays.
+        // That's so that using a Lazy wrapper is unobservable to the Fragment
+        // convention.
         // If the top level item is an array, we treat it as a set of children,
         // not as a fragment. Nested arrays on the other hand will be treated as
         // fragment nodes. Recursion happens at the normal flow.
         // Handle top level unkeyed fragments as if they were arrays.
         // This leads to an ambiguity between <>{[...]}</> and <>...</>.
         // We treat the ambiguous cases above the same.
-        // TODO: Let's use recursion like we do for Usable nodes?
+        // We don't use recursion here because a fragment inside a fragment
+        // is no longer considered "top level" for these purposes.
         var isUnkeyedTopLevelFragment =
           typeof newChild === "object" &&
           newChild !== null &&
@@ -36866,7 +36869,7 @@ if (__DEV__) {
       return root;
     }
 
-    var ReactVersion = "19.0.0-www-classic-c52cc1c4";
+    var ReactVersion = "19.0.0-www-classic-9558ae95";
 
     function createPortal$1(
       children,

diff --git a/compiled/facebook-www/ReactDOMTesting-dev.modern.js b/compiled/facebook-www/ReactDOMTesting-dev.modern.js
@@ -19808,14 +19808,17 @@ if (__DEV__) {
         lanes,
         debugInfo
       ) {
-        // This function is not recursive.
+        // This function is only recursive for Usables/Lazy and not nested arrays.
+        // That's so that using a Lazy wrapper is unobservable to the Fragment
+        // convention.
         // If the top level item is an array, we treat it as a set of children,
         // not as a fragment. Nested arrays on the other hand will be treated as
         // fragment nodes. Recursion happens at the normal flow.
         // Handle top level unkeyed fragments as if they were arrays.
         // This leads to an ambiguity between <>{[...]}</> and <>...</>.
         // We treat the ambiguous cases above the same.
-        // TODO: Let's use recursion like we do for Usable nodes?
+        // We don't use recursion here because a fragment inside a fragment
+        // is no longer considered "top level" for these purposes.
         var isUnkeyedTopLevelFragment =
           typeof newChild === "object" &&
           newChild !== null &&
@@ -46514,7 +46517,7 @@ if (__DEV__) {
       return root;
     }
 
-    var ReactVersion = "19.0.0-www-modern-8a063592";
+    var ReactVersion = "19.0.0-www-modern-4ad61d22";
 
     function createPortal$1(
       children,

diff --git a/compiled/facebook-www/ReactTestRenderer-dev.classic.js b/compiled/facebook-www/ReactTestRenderer-dev.classic.js
@@ -7270,14 +7270,17 @@ if (__DEV__) {
         lanes,
         debugInfo
       ) {
-        // This function is not recursive.
+        // This function is only recursive for Usables/Lazy and not nested arrays.
+        // That's so that using a Lazy wrapper is unobservable to the Fragment
+        // convention.
         // If the top level item is an array, we treat it as a set of children,
         // not as a fragment. Nested arrays on the other hand will be treated as
         // fragment nodes. Recursion happens at the normal flow.
         // Handle top level unkeyed fragments as if they were arrays.
         // This leads to an ambiguity between <>{[...]}</> and <>...</>.
         // We treat the ambiguous cases above the same.
-        // TODO: Let's use recursion like we do for Usable nodes?
+        // We don't use recursion here because a fragment inside a fragment
+        // is no longer considered "top level" for these purposes.
         var isUnkeyedTopLevelFragment =
           typeof newChild === "object" &&
           newChild !== null &&
@@ -26707,7 +26710,7 @@ if (__DEV__) {
       return root;
     }
 
-    var ReactVersion = "19.0.0-www-classic-575c07cf";
+    var ReactVersion = "19.0.0-www-classic-a8d20193";
 
     /*
      * The `'' + value` pattern (used in perf-sensitive code) throws for Symbol

diff --git a/compiled/facebook-www/ReactTestRenderer-dev.modern.js b/compiled/facebook-www/ReactTestRenderer-dev.modern.js
@@ -7270,14 +7270,17 @@ if (__DEV__) {
         lanes,
         debugInfo
       ) {
-        // This function is not recursive.
+        // This function is only recursive for Usables/Lazy and not nested arrays.
+        // That's so that using a Lazy wrapper is unobservable to the Fragment
+        // convention.
         // If the top level item is an array, we treat it as a set of children,
         // not as a fragment. Nested arrays on the other hand will be treated as
         // fragment nodes. Recursion happens at the normal flow.
         // Handle top level unkeyed fragments as if they were arrays.
         // This leads to an ambiguity between <>{[...]}</> and <>...</>.
         // We treat the ambiguous cases above the same.
-        // TODO: Let's use recursion like we do for Usable nodes?
+        // We don't use recursion here because a fragment inside a fragment
+        // is no longer considered "top level" for these purposes.
         var isUnkeyedTopLevelFragment =
           typeof newChild === "object" &&
           newChild !== null &&
@@ -26707,7 +26710,7 @@ if (__DEV__) {
       return root;
     }
 
-    var ReactVersion = "19.0.0-www-modern-575c07cf";
+    var ReactVersion = "19.0.0-www-modern-a8d20193";
 
     /*
      * The `'' + value` pattern (used in perf-sensitive code) throws for Symbol
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		c0cf7c696cf454b49b35d8dae01ab111739dab46
		4ca20fd36b2444a74279e7022f89894710b1daab