Fix bug with reloading site tree (#35491)

lib/create-tree.js

@@ -71,6 +71,17 @@ export default async function createTree(originalPath, rootPath, previousTree) {
   // Create the root tree object on the first run, and create children recursively.
   const item = {
     page,
+    // This is only here for the sake of reloading the tree later which
+    // only happens in development mode.
+    // The reloading of the tree compares the list of children (array of
+    // strings) with what it might have been in the previous tree.
+    // Then it can use the "n'th" access to figure out what the
+    // "previous sub tree" was for each child.
+    // So if a writer edits the 'children:' frontmatter property
+    // this value now will be different from what it was before.
+    // It's not enough to rely on *length* of the array before and after
+    // because the change could have been to remove one and add another.
+    children: page.children,
   }
 
   // Process frontmatter children recursively.
@@ -78,14 +89,36 @@ export default async function createTree(originalPath, rootPath, previousTree) {
     assertUniqueChildren(item.page)
     item.childPages = (
       await Promise.all(
-        item.page.children.map(
-          async (child, i) =>
-            await createTree(
-              path.posix.join(originalPath, child),
-              basePath,
-              previousTree && previousTree.childPages && previousTree.childPages[i]
-            )
-        )
+        item.page.children.map(async (child, i) => {
+          let childPreviousTree
+          if (previousTree && previousTree.childPages) {
+            if (equalArray(item.page.children, previousTree.children)) {
+              // We can only safely rely on picking the same "n'th" item
+              // from the array if we're confident the names are the same
+              // as they were before.
+              // Otherwise, suppose you add an entry to `children:`
+              // and add another, then length would be the same but
+              // each position might relate to different child.
+              childPreviousTree = previousTree.childPages[i]
+            }
+          }
+          const subTree = await createTree(
+            path.posix.join(originalPath, child),
+            basePath,
+            childPreviousTree
+          )
+          if (!subTree) {
+            // Remove that children.
+            // For example, the 'early-access' might have been in the
+            // `children:` property but it was decided to be skipped
+            // (early exit instead of returning a tree). So let's
+            // mutate the `page.children` so we can benefit from the
+            // ability to reload the site tree on consective requests.
+            console.warn(`Remove ${child} from ${item.page.children}`)
+            item.page.children = item.page.children.filter((c) => c !== child)
+          }
+          return subTree
+        })
       )
     ).filter(Boolean)
   }
@@ -93,6 +126,10 @@ export default async function createTree(originalPath, rootPath, previousTree) {
   return item
 }
 
+function equalArray(arr1, arr2) {
+  return arr1.length === arr2.length && arr1.every((value, i) => value === arr2[i])
+}
+
 async function getMtime(filePath) {
   // Use mtimeMs, which is a regular floating point number, instead of the
   // mtime which is a Date based on that same number.