Pass RouteTree into navigation function

RouteTree is the client version of FlightRouterState. It's the same
representation of the route tree, but it structured for optimized
lookups of the client cache. The plan is the make this the primary/only
type used for dealing with routes on the client; FlightRouterState will
be used a transport format only.

Author: acdlite

packages/next/src/client/components/router-reducer/create-initial-router-state.ts

@@ -6,6 +6,8 @@ import { extractPathFromFlightRouterState } from './compute-changed-path'
 import type { AppRouterState } from './router-reducer-types'
 import { getFlightDataPartsFromPath } from '../../flight-data-helpers'
 import { createInitialCacheNodeForHydration } from './ppr-navigations'
+import { convertRootFlightRouterStateToRouteTree } from '../segment-cache/cache'
+import type { NormalizedSearch } from '../segment-cache/cache-key'
 
 export interface InitialRouterStateParameters {
   navigatedAt: number
@@ -44,11 +46,22 @@ export function createInitialRouterState({
         createHrefFromUrl(location)
       : initialCanonicalUrl
 
+  // Conver the initial FlightRouterState into the RouteTree type.
+  // NOTE: The metadataVaryPath isn't used for anything currently because the
+  // head is embedded into the CacheNode tree, but eventually we'll lift it out
+  // and store it on the top-level state object.
+  const acc = { metadataVaryPath: null }
+  const initialRouteTree = convertRootFlightRouterStateToRouteTree(
+    initialTree,
+    initialRenderedSearch as NormalizedSearch,
+    acc
+  )
+
   const initialState = {
     tree: initialTree,
     cache: createInitialCacheNodeForHydration(
       navigatedAt,
-      initialTree,
+      initialRouteTree,
       initialSeedData,
       initialHead
     ),

packages/next/src/client/components/router-reducer/is-navigating-to-new-root-layout.ts

@@ -1,12 +1,13 @@
 import type { FlightRouterState } from '../../../shared/lib/app-router-types'
+import type { RouteTree } from '../segment-cache/cache'
 
 export function isNavigatingToNewRootLayout(
   currentTree: FlightRouterState,
-  nextTree: FlightRouterState
+  nextTree: RouteTree
 ): boolean {
   // Compare segments
   const currentTreeSegment = currentTree[0]
-  const nextTreeSegment = nextTree[0]
+  const nextTreeSegment = nextTree.segment
 
   // If any segment is different before we find the root layout, the root layout has changed.
   // E.g. /same/(group1)/layout.js -> /same/(group2)/layout.js
@@ -27,17 +28,22 @@ export function isNavigatingToNewRootLayout(
   // Current tree root layout found
   if (currentTree[4]) {
     // If the next tree doesn't have the root layout flag, it must have changed.
-    return !nextTree[4]
+    return !nextTree.isRootLayout
   }
   // Current tree didn't have its root layout here, must have changed.
-  if (nextTree[4]) {
+  if (nextTree.isRootLayout) {
     return true
   }
-  // We can't assume it's `parallelRoutes.children` here in case the root layout is `app/@something/layout.js`
-  // But it's not possible to be more than one parallelRoutes before the root layout is found
-  // TODO-APP: change to traverse all parallel routes
-  const currentTreeChild = Object.values(currentTree[1])[0]
-  const nextTreeChild = Object.values(nextTree[1])[0]
-  if (!currentTreeChild || !nextTreeChild) return true
-  return isNavigatingToNewRootLayout(currentTreeChild, nextTreeChild)
+
+  const slots = nextTree.slots
+  if (slots !== null) {
+    for (const slot in slots) {
+      const nextTreeChild = slots[slot]
+      if (isNavigatingToNewRootLayout(currentTree, nextTreeChild)) {
+        return true
+      }
+    }
+  }
+
+  return false
 }