one 1.26.1 → 2.0.0-beta.33.1

package/src/router/Route.tsx

@@ -124,7 +124,7 @@ export const RouteParamsContext = createContext<
   Record<string, string | undefined> | undefined
 >({})
 
-const CurrentRouteContext = React.createContext<RouteNode | null>(null)
+const CurrentRouteContext = React.createContext<RouteNode[]>([])
 
 /** Allows a layout to provide a Suspense fallback for its child routes. */
 export const SuspenseFallbackContext = createContext<
@@ -138,6 +138,11 @@ if (process.env.NODE_ENV !== 'production') {
 
 /** Return the RouteNode at the current contextual boundary. */
 export function useRouteNode(): RouteNode | null {
+  const nodes = useContext(CurrentRouteContext)
+  return nodes[nodes.length - 1] ?? null
+}
+
+export function useRouteNodes(): RouteNode[] {
   return useContext(CurrentRouteContext)
 }
 
@@ -189,6 +194,11 @@ export function Route({
   }
 }) {
   const parentParams = useContext(RouteParamsContext)
+  const parentRouteNodes = useContext(CurrentRouteContext)
+  const routeNodes = React.useMemo(
+    () => [...parentRouteNodes, node],
+    [node, parentRouteNodes]
+  )
 
   // url is the source of truth for path params. react navigation can provide
   // a `route` whose `params` are missing or stale for the dynamic segments
@@ -211,7 +221,7 @@ export function Route({
 
   return (
     <RouteParamsContext.Provider value={resolvedParams}>
-      <CurrentRouteContext.Provider value={node}>
+      <CurrentRouteContext.Provider value={routeNodes}>
         <RouteInfoContextProvider>{children}</RouteInfoContextProvider>
       </CurrentRouteContext.Provider>
     </RouteParamsContext.Provider>

package/src/router/findRouteNode.test.ts

@@ -0,0 +1,92 @@
+import { describe, expect, it } from 'vitest'
+import {
+  getReactNavigationRouteName,
+  resolveInitialRouteNameFromState,
+} from '../getReactNavigationConfig'
+import type { RouteNode } from './Route'
+import {
+  extractParamsFromState,
+  findAllRouteNodesFromState,
+  findRouteNodeFromState,
+} from './findRouteNode'
+import { resolveParentRouteName } from './useNavigation'
+
+function node(route: string, contextKey: string, children: RouteNode[] = []): RouteNode {
+  return {
+    type: children.length ? 'layout' : 'spa',
+    loadRoute: () => ({}),
+    children,
+    dynamic: null,
+    route,
+    contextKey,
+  }
+}
+
+describe('focused route state', () => {
+  const current = node('index', './index/index.tsx')
+  const preloaded = node('detail', './index/detail.tsx')
+  const layout = node('index', './index/_layout.tsx', [current, preloaded])
+  const root = node('', './_layout.tsx', [layout])
+  const state = {
+    index: 0,
+    routes: [
+      {
+        name: getReactNavigationRouteName(layout),
+        params: { layout: 'active' },
+        state: {
+          index: 0,
+          routes: [
+            { name: 'index', params: { page: 'current' } },
+            { name: 'detail', params: { page: 'preloaded' } },
+          ],
+        },
+      },
+      { name: 'other', params: { root: 'preloaded' } },
+    ],
+  }
+
+  it('finds the focused node through an internal layout name', () => {
+    expect(findRouteNodeFromState(state, root)).toBe(current)
+    expect(findAllRouteNodesFromState(state, root)).toEqual([layout, current])
+  })
+
+  it('collects params only from the focused route chain', () => {
+    expect(extractParamsFromState(state)).toEqual({
+      layout: 'active',
+      page: 'current',
+    })
+  })
+})
+
+describe('filesystem paths at React Navigation boundaries', () => {
+  const detail = node('detail', './index/detail.tsx')
+  const index = node('index', './index/index.tsx')
+  const collidingLayout = node('index', './index/_layout.tsx', [index, detail])
+  const root = node('', './_layout.tsx', [collidingLayout])
+
+  it('resolves absolute and relative parent paths to aliased screen names', () => {
+    const routeNodes = [root, collidingLayout, detail]
+    const routeName = getReactNavigationRouteName(collidingLayout)
+
+    expect(resolveParentRouteName(routeNodes, '/index/detail', '/index')).toBe(routeName)
+    expect(resolveParentRouteName(routeNodes, '/index/detail', '../')).toBe(routeName)
+    expect(resolveParentRouteName(routeNodes, '/index/detail', '/')).toBe('')
+  })
+
+  it('uses aliased layout names while resolving a late-mounted child', () => {
+    const state = {
+      index: 0,
+      routes: [
+        {
+          name: getReactNavigationRouteName(collidingLayout),
+          state: {
+            index: 1,
+            routes: [{ name: 'index' }, { name: 'detail' }],
+          },
+        },
+      ],
+    }
+
+    expect(resolveInitialRouteNameFromState('/index', state)).toBe('detail')
+  })
+})

package/src/router/findRouteNode.ts

@@ -1,11 +1,12 @@
 import type { RouteNode } from './Route'
+import { getReactNavigationRouteName } from '../getReactNavigationConfig'
 
 /**
  * Find a RouteNode from the route tree based on the navigation state.
  * Walks through the state's routes recursively to find the deepest matching route.
  */
 export function findRouteNodeFromState(
-  state: { routes: Array<{ name: string; state?: any }> } | undefined,
+  state: { index?: number; routes: Array<{ name: string; state?: any }> } | undefined,
   rootNode: RouteNode | null
 ): RouteNode | null {
   if (!state || !state.routes || !rootNode) {
@@ -13,7 +14,7 @@ export function findRouteNodeFromState(
   }
 
   // Get the current route from state (the active one based on index)
-  const currentRoute = state.routes[state.routes.length - 1]
+  const currentRoute = state.routes[state.index ?? state.routes.length - 1]
   if (!currentRoute) {
     return null
   }
@@ -41,7 +42,7 @@ export function findRouteNodeFromState(
  */
 function findNodeByRouteName(node: RouteNode, routeName: string): RouteNode | null {
   // Check if this node matches
-  if (node.route === routeName) {
+  if (getReactNavigationRouteName(node) === routeName) {
     return node
   }
 
@@ -58,11 +59,14 @@ function findNodeByRouteName(node: RouteNode, routeName: string): RouteNode | nu
 
 /**
  * Extract params from navigation state.
- * Collects params from all routes in the state hierarchy.
+ * Collects params from the focused route chain in the state hierarchy.
  */
 export function extractParamsFromState(
   state:
-    | { routes: Array<{ name: string; params?: Record<string, any>; state?: any }> }
+    | {
+        index?: number
+        routes: Array<{ name: string; params?: Record<string, any>; state?: any }>
+      }
     | undefined
 ): Record<string, string | string[]> {
   if (!state || !state.routes) {
@@ -71,15 +75,12 @@ export function extractParamsFromState(
 
   const params: Record<string, string | string[]> = {}
 
-  // Collect params from all routes in the state
-  for (const route of state.routes) {
-    if (route.params) {
-      Object.assign(params, route.params)
-    }
-    // Recurse into nested state
-    if (route.state) {
-      Object.assign(params, extractParamsFromState(route.state))
-    }
+  const route = state.routes[state.index ?? state.routes.length - 1]
+  if (route?.params) {
+    Object.assign(params, route.params)
+  }
+  if (route?.state) {
+    Object.assign(params, extractParamsFromState(route.state))
   }
 
   return params
@@ -132,7 +133,7 @@ export function extractPathnameFromHref(href: string): string {
  * This is used on native to build the full matches array including layouts.
  */
 export function findAllRouteNodesFromState(
-  state: { routes: Array<{ name: string; state?: any }> } | undefined,
+  state: { index?: number; routes: Array<{ name: string; state?: any }> } | undefined,
   rootNode: RouteNode | null
 ): RouteNode[] {
   if (!state || !state.routes || !rootNode) {
@@ -143,7 +144,10 @@ export function findAllRouteNodesFromState(
 
   function collectNodes(
     currentState:
-      | { routes: Array<{ name: string; state?: any; params?: Record<string, any> }> }
+      | {
+          index?: number
+          routes: Array<{ name: string; state?: any; params?: Record<string, any> }>
+        }
       | undefined,
     parentNode: RouteNode | null
   ) {
@@ -152,7 +156,8 @@ export function findAllRouteNodesFromState(
     }
 
     // get the current route from state (the active one based on index)
-    const currentRoute = currentState.routes[currentState.routes.length - 1]
+    const currentRoute =
+      currentState.routes[currentState.index ?? currentState.routes.length - 1]
     if (!currentRoute) {
       return
     }

package/src/router/getLinkingConfig.test.ts

@@ -27,6 +27,19 @@ describe('getLinkingConfig', () => {
       'threepunchconvo://app',
     ])
   })
+
+  it('assigns distinct navigation names to nested routes with the same file name', () => {
+    const routes = getRoutes(
+      getMockContext(['_layout.tsx', 'index/_layout.tsx', 'index/index.tsx'])
+    )!
+    const linking = getLinkingConfig(routes, true)
+    const state = linking.getStateFromPath!('/', linking.config as never)!
+    const parent = state.routes[0]!
+    const child = parent.state!.routes[0]!
+
+    expect(parent.name).not.toBe(child.name)
+    expect(linking.getPathFromState!(state, linking.config as never)).toBe('/')
+  })
 })
 
 describe('normalizeLinkingConfig', () => {

package/src/router/getRouteInfo.test.ts

@@ -30,4 +30,25 @@ describe('getRouteInfoFromState', () => {
     expect(info.pathname).toBe('/dev')
     expect(info.segments).toEqual(['dev'])
   })
+
+  it('uses the focused nested route when later routes are preloaded', () => {
+    const stateWithPreload = {
+      index: 0,
+      routes: [
+        {
+          name: '(site)',
+          state: {
+            index: 0,
+            routes: [{ name: 'index' }, { name: 'detail' }],
+          },
+        },
+      ],
+    } as any
+    const info = getRouteInfoFromState(
+      (_state, asPath) => ({ path: asPath ? '/(site)' : '/', params: {} }),
+      stateWithPreload
+    )
+
+    expect(info.isIndex).toBe(true)
+  })
 })

package/src/router/isIndexPath.ts

@@ -1,6 +1,9 @@
 import type { State } from '../fork/getPathFromState'
 
-type RouteLikeTree = { name: string; state?: { routes?: RouteLikeTree[] } }
+type RouteLikeTree = {
+  name: string
+  state?: { index?: number; routes?: RouteLikeTree[] }
+}
 
 export function isIndexPath(state: State) {
   if (!state.routes) {
@@ -31,7 +34,7 @@ export function isIndexPath(state: State) {
 function getActualLastRoute<A extends RouteLikeTree>(routeLike: A): A {
   if (routeLike.name[0] === '(' && routeLike.state?.routes) {
     const routes = routeLike.state.routes
-    return getActualLastRoute(routes[routes.length - 1]) as any
+    return getActualLastRoute(routes[routeLike.state.index ?? routes.length - 1]) as any
   }
   return routeLike
 }

package/src/router/isStateAwaitingNavigatorMount.ts

@@ -1,4 +1,5 @@
 import type { OneRouter } from '../interfaces/router'
+import { getReactNavigationRouteName } from '../getReactNavigationConfig'
 import type { RouteNode } from './Route'
 
 type PartialState = {
@@ -46,7 +47,9 @@ export function isStateAwaitingNavigatorMount(
     // direct children only: a directory with no `_layout` is flattened into the
     // parent navigator under a multi-segment route name, and that name is what
     // the state carries, so a recursive search would match the wrong depth
-    const child = node.children.find((candidate) => candidate.route === route.name)
+    const child = node.children.find(
+      (candidate) => getReactNavigationRouteName(candidate) === route.name
+    )
     if (!child) return false
 
     if (route.state) {

package/src/router/router.ts

@@ -7,6 +7,7 @@
 import type {
   NavigationContainerRefWithCurrent,
   NavigationState,
+  ParamListBase,
 } from '@react-navigation/core'
 import { StackActions } from '@react-navigation/native'
 import {
@@ -250,7 +251,7 @@ let cachedContext: One.RouteContext | null = null
 // Initialize function
 export function initialize(
   context: One.RouteContext,
-  ref: NavigationContainerRefWithCurrent<ReactNavigation.RootParamList>,
+  ref: NavigationContainerRefWithCurrent<ParamListBase>,
   initialLocation?: URL,
   linking?: OneLinkingConfig
 ) {
@@ -443,7 +444,7 @@ export function replace(url: OneRouter.Href, options?: OneRouter.LinkToOptions)
 export function setParams(params: OneRouter.InpurRouteParamsGeneric = {}) {
   assertIsReady(navigationRef)
   return navigationRef?.current?.setParams(
-    // @ts-expect-error
+    // @ts-ignore
     params
   )
 }
@@ -1350,7 +1351,7 @@ export async function linkTo(
   const currentRootState = navigationRef.getRootState()
 
   const hash = href.indexOf('#')
-  if (currentRootState.key && hash > 0) {
+  if (currentRootState?.key && hash > 0) {
     hashes[currentRootState.key] = href.slice(hash)
   }
 
@@ -1368,13 +1369,13 @@ export async function linkTo(
   // compute target at dispatch time to avoid stale state during first render/effects
   const freshRootState = navigationRef.getRootState() as NavigationState
   const currentRouteBeforeDispatch = navigationRef.getCurrentRoute()
+  const targetPathname = pendingNavigationPathname
+  const optimisticState = nextOptions ? { ...state, linkOptions: nextOptions } : state
+  updateState(optimisticState)
+  pendingNavigationPathname = targetPathname
+  notifyRootStateSubscribers(optimisticState)
 
   if (event === 'REPLACE') {
-    const targetPathname = pendingNavigationPathname
-    const optimisticState = nextOptions ? { ...state, linkOptions: nextOptions } : state
-    updateState(optimisticState)
-    pendingNavigationPathname = targetPathname
-    notifyRootStateSubscribers(optimisticState)
     navigationRef.resetRoot(state)
   } else {
     const action = getNavigateAction(state, freshRootState, event)
@@ -1393,7 +1394,7 @@ export async function linkTo(
     const currentFocusedName = currentFocusedRoute?.name
 
     if (isRootTarget && isGroupTarget && hasFreshRootState) {
-      const targetRoute = state.routes[state.routes.length - 1]
+      const targetRoute = state.routes[state.index ?? state.routes.length - 1]
       const targetRootName = targetRoute.name
 
       if (currentFocusedName === targetRootName) {

package/src/router/useInitializeOneRouter.ts

@@ -1,4 +1,4 @@
-import { useNavigationContainerRef } from '@react-navigation/core'
+import { type ParamListBase, useNavigationContainerRef } from '@react-navigation/core'
 import { resetLoaderState } from '../useLoader'
 import type { One } from '../vite/types'
 import type { OneLinkingConfig } from '../link/getLinking'
@@ -22,7 +22,7 @@ export function useInitializeOneRouter(
   initialLocation: URL | undefined,
   linking?: OneLinkingConfig
 ) {
-  const navigationRef = useNavigationContainerRef<ReactNavigation.RootParamList>()
+  const navigationRef = useNavigationContainerRef<ParamListBase>()
 
   // SSR: initialize route tree once, then compute per-request state via cache
   if (typeof window === 'undefined') {

package/src/router/useNavigation.ts

@@ -1,11 +1,13 @@
 import {
   type NavigationProp,
+  type ParamListBase,
   useNavigation as useUpstreamNavigation,
 } from '@react-navigation/native'
 import React from 'react'
 
-import { getNameFromFilePath } from './matchers'
-import { useContextKey } from './Route'
+import { getReactNavigationRouteName } from '../getReactNavigationConfig'
+import { getContextKey, getNameFromFilePath } from './matchers'
+import { type RouteNode, useContextKey, useRouteNodes } from './Route'
 
 /**
  * Returns the React Navigation navigation object for the current route.
@@ -21,25 +23,36 @@ import { useContextKey } from './Route'
  * navigation.setOptions({ title: 'My Screen' })
  * ```
  */
-export function useNavigation<T = NavigationProp<ReactNavigation.RootParamList>>(
-  parent?: string
-): T {
-  const navigation = useUpstreamNavigation<any>()
+export function useNavigation<T = NavigationProp<ParamListBase>>(parent?: string): T {
+  const navigation = useUpstreamNavigation() as any
 
   const contextKey = useContextKey()
+  const routeNodes = useRouteNodes()
   const normalizedParent = React.useMemo(() => {
     if (!parent) {
       return null
     }
-    const normalized = getNameFromFilePath(parent)
+    return resolveParentRouteName(routeNodes, contextKey, parent)
+  }, [contextKey, parent, routeNodes])
 
-    if (parent.startsWith('.')) {
-      return relativePaths(contextKey, parent)
-    }
-    return normalized
-  }, [contextKey, parent])
+  if (parent && normalizedParent === undefined) {
+    throw new Error(
+      `Could not find parent navigation with route "${parent}".` +
+        ` (normalized context: ${resolveParentId(contextKey, parent)})`
+    )
+  }
 
   if (normalizedParent != null) {
+    if (normalizedParent === '') {
+      let rootNavigation = navigation
+      let nextNavigation = rootNavigation.getParent()
+      while (nextNavigation) {
+        rootNavigation = nextNavigation
+        nextNavigation = rootNavigation.getParent()
+      }
+      return rootNavigation
+    }
+
     const parentNavigation = navigation.getParent(normalizedParent)
 
     if (!parentNavigation) {
@@ -62,9 +75,31 @@ export function resolveParentId(
   }
 
   if (parentId.startsWith('.')) {
-    return getNameFromFilePath(relativePaths(contextKey, parentId))
+    return normalizeContextPath(relativePaths(contextKey, parentId))
   }
-  return getNameFromFilePath(parentId)
+  return normalizeContextPath(parentId)
+}
+
+export function resolveParentRouteName(
+  routeNodes: RouteNode[],
+  contextKey: string,
+  parentId?: string | null
+): string | null | undefined {
+  const parentContextKey = resolveParentId(contextKey, parentId)
+  if (parentContextKey == null) return null
+  if (parentContextKey === '/') return ''
+
+  const parentRoute = routeNodes.find(
+    (node) => getContextKey(node.contextKey) === parentContextKey
+  )
+  return parentRoute ? getReactNavigationRouteName(parentRoute) : undefined
+}
+
+function normalizeContextPath(path: string): string {
+  const normalized = getNameFromFilePath(path)
+    .replace(/^\/+|\/+$/g, '')
+    .replace(/\/_layout$/, '')
+  return normalized ? `/${normalized}` : '/'
 }
 
 // Resolve a path like `../` relative to a path like `/foo/bar`

package/src/router/useScreens.tsx

@@ -20,6 +20,7 @@ import type { SuspenseFallbackProps } from '../views/SuspenseFallback'
 import { Try } from '../views/Try'
 import { DevHead } from '../vite/DevHead'
 import { getServerContext, useServerContext } from '../vite/one-server-only'
+import { getReactNavigationRouteName } from '../getReactNavigationConfig'
 import { filterRootHTML } from './filterRootHTML'
 import {
   type DynamicConvention,
@@ -630,13 +631,14 @@ function routeToScreen(
   route: RouteNode,
   { options, ...props }: Partial<ScreenProps> = {}
 ) {
+  const navigationRouteName = getReactNavigationRouteName(route)
   return (
     <Screen
       // Users can override the screen getId function.
       getId={createGetIdForRoute(route)}
       {...props}
-      name={route.route}
-      key={route.route}
+      name={navigationRouteName}
+      key={navigationRouteName}
       options={(args) => {
         // Only eager load generated components
         const staticOptions = route.generated ? route.loadRoute()?.getNavOptions : null

package/src/router/utils/getNavigateAction.test.ts

@@ -24,7 +24,7 @@ describe('getNavigateAction', () => {
             key: 'page-1-Gc-TeIdZmx_jAcRD-SGcs',
           },
         ],
-        preloadedRoutes: [],
+        retainedRouteKeys: [],
       }
 
       const action = getNavigateAction(actionState, navigationState)
@@ -36,6 +36,28 @@ describe('getNavigateAction', () => {
       })
     })
 
+    it('uses the focused route when the desired state includes a preloaded route', () => {
+      const actionState = {
+        index: 0,
+        routes: [{ name: 'page-2' }, { name: 'preloaded-page' }],
+      }
+      const navigationState = {
+        stale: false as const,
+        type: 'stack',
+        key: 'stack-pWRo04',
+        index: 0,
+        routeNames: ['page-1', 'page-2', 'preloaded-page'],
+        routes: [{ name: 'page-1', key: 'page-1-key' }],
+        retainedRouteKeys: [],
+      }
+
+      expect(getNavigateAction(actionState, navigationState)).toStrictEqual({
+        type: 'NAVIGATE',
+        target: 'stack-pWRo04',
+        payload: { key: undefined, name: 'page-2', params: {} },
+      })
+    })
+
     it('handles params', () => {
       const actionState = {
         routes: [
@@ -61,7 +83,7 @@ describe('getNavigateAction', () => {
             key: 'page-1-Gc-TeIdZmx_jAcRD-SGcs',
           },
         ],
-        preloadedRoutes: [],
+        retainedRouteKeys: [],
       }
 
       const action = getNavigateAction(actionState, navigationState)
@@ -115,7 +137,7 @@ describe('getNavigateAction', () => {
             key: 'index-Kyz4PdQ7ZAvE0XFhBWydM',
           },
         ],
-        preloadedRoutes: [],
+        retainedRouteKeys: [],
       }
 
       const action = getNavigateAction(actionState, navigationState)
@@ -184,7 +206,7 @@ describe('getNavigateAction', () => {
             key: 'index-Kyz4PdQ7ZAvE0XFhBWydM',
           },
         ],
-        preloadedRoutes: [],
+        retainedRouteKeys: [],
       }
 
       const action = getNavigateAction(actionState, navigationState)
@@ -276,7 +298,7 @@ describe('getNavigateAction', () => {
             },
           },
         ],
-        preloadedRoutes: [],
+        retainedRouteKeys: [],
       }
 
       const action = getNavigateAction(actionState, navigationState)
@@ -315,7 +337,7 @@ describe('getNavigateAction', () => {
             key: 'page-1-Gc-TeIdZmx_jAcRD-SGcs',
           },
         ],
-        preloadedRoutes: [],
+        retainedRouteKeys: [],
       }
 
       const action = getNavigateAction(actionState, navigationState, 'PUSH')

package/src/router/utils/getNavigateAction.ts

@@ -34,7 +34,8 @@ export function getNavigateAction(
   while (actionState && navigationState) {
     const stateRoute = navigationState.routes[navigationState.index]
 
-    actionStateRoute = actionState.routes[actionState.routes.length - 1]
+    actionStateRoute =
+      actionState.routes[actionState.index ?? actionState.routes.length - 1]
 
     const childState = actionStateRoute.state
     const nextNavigationState = stateRoute.state
@@ -54,7 +55,7 @@ export function getNavigateAction(
       break
     }
 
-    actionState = childState
+    actionState = childState as OneRouter.ResultState
     navigationState = nextNavigationState as NavigationState
   }
 
@@ -73,7 +74,9 @@ export function getNavigateAction(
     payload.params = { ...actionStateRoute.params }
 
     actionStateRoute =
-      actionStateRoute.state?.routes[actionStateRoute.state?.routes.length - 1]
+      actionStateRoute.state?.routes[
+        actionStateRoute.state.index ?? actionStateRoute.state.routes.length - 1
+      ]
 
     payload.params ??= {}
     payload = payload.params

package/src/router/web/WebStackView.tsx

@@ -103,7 +103,7 @@ function HeadlessStackView({
     state.routes.slice(0, lastBaseIndex + 1).map((route) => route.key)
   )
   const baseFocusedKey = state.routes[lastBaseIndex]?.key
-  const overlayRoutes = state.routes.slice(lastBaseIndex + 1)
+  const overlayRoutes = state.routes.slice(lastBaseIndex + 1, state.index + 1)
 
   return (
     <Fragment>