one 1.2.20 → 1.2.22

package/src/fork/getStateFromPath-mods.ts

@@ -16,35 +16,44 @@ export type AdditionalRouteConfig = {
   hasChildren: boolean
   expandedRouteNames: string[]
   parts: string[]
+  staticPartCount: number
+}
+
+interface UrlWithReactNavigationConcessions {
+  path: string
+  nonstandardPathname: string
+  hash: string
+  pathWithoutGroups: string
 }
 
 export function getUrlWithReactNavigationConcessions(
   path: string,
   baseUrl: string | undefined = process.env.EXPO_BASE_URL
-) {
-  let parsed: URL
+): UrlWithReactNavigationConcessions {
+  const pathWithoutGroups = stripGroupSegmentsFromPath(stripBaseUrl(path, baseUrl))
+
+  let pathname = ''
+  let hash = ''
   try {
-    parsed = new URL(path, 'https://phony.example')
+    // NOTE: This used to use a dummy base URL for parsing (phony.example)
+    // However, this seems to get flagged since it's preserved 1:1 in the output bytecode by certain scanners
+    // Instead, we use an empty `file:` URL. This will still perform `pathname` normalization, search parameter parsing
+    // encoding, and all other logic, except the logic that applies to hostnames and protocols, and also not leave a
+    // dummy URL in the output bytecode
+    const parsed = new URL(path, 'file:')
+    pathname = parsed.pathname
+    hash = parsed.hash
   } catch {
     // Do nothing with invalid URLs.
-    return {
-      path,
-      cleanUrl: '',
-      nonstandardPathname: '',
-      url: new URL('https://phony.example'),
-    }
   }
 
-  const pathname = parsed.pathname
   const withoutBaseUrl = stripBaseUrl(pathname, baseUrl)
-  const pathWithoutGroups = stripGroupSegmentsFromPath(stripBaseUrl(path, baseUrl))
-
-  // Make sure there is a trailing slash
   return {
-    // The slashes are at the end, not the beginning
     path,
+    // Make sure there is a trailing slash
+    // The slashes are at the end, not the beginning
     nonstandardPathname: withoutBaseUrl.replace(/^\/+/g, '').replace(/\/+$/g, '') + '/',
-    url: parsed,
+    hash,
     pathWithoutGroups,
   }
 }
@@ -145,6 +154,13 @@ export function getRouteConfigSorter(previousSegments: string[] = []) {
       return 1
     }
 
+    /*
+     * If the routes have any static segments, the one with the most static segments should be higher
+     */
+    if (a.staticPartCount !== b.staticPartCount) {
+      return b.staticPartCount - a.staticPartCount
+    }
+
     /*
      * If both are static/dynamic or a layout file, then we check group similarity
      */
@@ -312,15 +328,23 @@ export function createConfigItemAdditionalProperties(
 ): Omit<AdditionalRouteConfig, 'isInitial'> {
   const parts: string[] = []
   let isDynamic = false
+  let staticPartCount = 0
   const isIndex = screen === 'index' || screen.endsWith('/index')
 
   for (const part of pattern.split('/')) {
     if (part) {
       // If any part is dynamic, then the route is dynamic
-      isDynamic ||= part.startsWith(':') || part.startsWith('*') || part.includes('*not-found')
+      const isDynamicPart =
+        part.startsWith(':') || part.startsWith('*') || part.includes('*not-found')
+
+      isDynamic ||= isDynamicPart
 
       if (!matchGroupName(part)) {
         parts.push(part)
+
+        if (!isDynamicPart) {
+          staticPartCount++
+        }
       }
     }
   }
@@ -330,6 +354,7 @@ export function createConfigItemAdditionalProperties(
 
   if (isIndex) {
     parts.push('index')
+    staticPartCount++
   }
 
   return {
@@ -337,6 +362,7 @@ export function createConfigItemAdditionalProperties(
     isIndex,
     hasChildren,
     parts,
+    staticPartCount,
     userReadableName: [...routeNames.slice(0, -1), config.path || screen].join('/'),
     expandedRouteNames: routeNames.flatMap((name) => {
       return name.split('/')
@@ -350,7 +376,7 @@ export function parseQueryParamsExtended(
   parseConfig?: Record<string, (value: string) => any>,
   hash?: string
 ) {
-  const searchParams = new URL(path, 'https://phony.example').searchParams
+  const searchParams = new URL(path, 'file:').searchParams
   const params: Record<string, string | string[]> = Object.create(null)
 
   if (hash) {

package/src/fork/getStateFromPath.ts

@@ -723,7 +723,7 @@ const createNestedStateObject = (
     path,
     route,
     flatConfig ? findParseConfigForRoute(route.name, flatConfig) : undefined,
-    restPathData.url.hash
+    restPathData.hash
   )
   // @modified - end
 

package/src/fork/useLinking.native.ts

@@ -189,7 +189,7 @@ export function useLinking(
         // If the link were handled, it gets cleared in NavigationContainer
         onUnhandledLinking(extractPathFromURL(prefixes, url))
         const rootState = navigation.getRootState()
-        if (state.routes.some((r) => !rootState?.routeNames.includes(r.name))) {
+        if (state.routes.some((r) => !rootState?.routeNames?.includes(r.name))) {
           return
         }
 

package/src/fork/useLinking.ts

@@ -22,6 +22,7 @@ import isEqual from 'fast-deep-equal'
 import * as React from 'react'
 // @modified - start
 // import { ServerContext } from '@react-navigation/web';
+import { rootState as routerRootState } from '../router/router'
 import { ServerLocationContext } from '../router/serverLocationContext'
 import { createMemoryHistory } from './createMemoryHistory'
 import { appendBaseUrl } from './getPathFromState-mods'
@@ -158,7 +159,7 @@ export function useLinking(
       const rootState = navigation?.getRootState()
       // Make sure that the routes in the state exist in the root navigator
       // Otherwise there's an error in the linking configuration
-      return state?.routes.some((r) => !rootState?.routeNames.includes(r.name))
+      return state?.routes.some((r) => !rootState?.routeNames?.includes(r.name))
     },
     [ref]
   )
@@ -180,8 +181,15 @@ export function useLinking(
 
       const path = location ? location.pathname + location.search : undefined
 
+      if (process.env.ONE_DEBUG_ROUTER) {
+        console.info(`[one] 🔍 getInitialState path=${path}`)
+      }
+
       if (path) {
         value = getStateFromPathRef.current(path, configRef.current)
+        if (process.env.ONE_DEBUG_ROUTER) {
+          console.info(`[one] 🔍 getInitialState result:`, JSON.stringify(value, null, 2))
+        }
       }
 
       // If the link were handled, it gets cleared in NavigationContainer
@@ -223,6 +231,12 @@ export function useLinking(
 
       const previousIndex = previousIndexRef.current ?? 0
 
+      if (process.env.ONE_DEBUG_ROUTER) {
+        console.info(
+          `[one] 📜 history.listen path=${path} index=${index} prevIndex=${previousIndex}`
+        )
+      }
+
       previousIndexRef.current = index
       pendingPopStatePathRef.current = path
 
@@ -232,12 +246,19 @@ export function useLinking(
       const record = history.get(index)
 
       if (record?.path === path && record?.state) {
+        if (process.env.ONE_DEBUG_ROUTER) {
+          console.info(`[one] 📜 history record found, resetRoot to:`, record.state)
+        }
         navigation.resetRoot(record.state)
         return
       }
 
       const state = getStateFromPathRef.current(path, configRef.current)
 
+      if (process.env.ONE_DEBUG_ROUTER) {
+        console.info(`[one] 📜 getStateFromPath result:`, state)
+      }
+
       // We should only dispatch an action when going forward
       // Otherwise the action will likely add items to history, which would mess things up
       if (state) {
@@ -246,6 +267,9 @@ export function useLinking(
         // Make sure that the routes in the state exist in the root navigator
         // Otherwise there's an error in the linking configuration
         if (validateRoutesNotExistInRootState(state)) {
+          if (process.env.ONE_DEBUG_ROUTER) {
+            console.info(`[one] 📜 routes not in root state, skipping`)
+          }
           return
         }
 
@@ -256,6 +280,10 @@ export function useLinking(
         ) {
           const action = getActionFromStateRef.current(state, configRef.current)
 
+          if (process.env.ONE_DEBUG_ROUTER) {
+            console.info(`[one] 📜 dispatching action:`, action)
+          }
+
           if (action !== undefined) {
             try {
               navigation.dispatch(action)
@@ -269,13 +297,22 @@ export function useLinking(
               )
             }
           } else {
+            if (process.env.ONE_DEBUG_ROUTER) {
+              console.info(`[one] 📜 no action, resetRoot`)
+            }
             navigation.resetRoot(state)
           }
         } else {
+          if (process.env.ONE_DEBUG_ROUTER) {
+            console.info(`[one] 📜 going back, resetRoot`)
+          }
           navigation.resetRoot(state)
         }
       } else {
         // if current path didn't return any state, we should revert to initial state
+        if (process.env.ONE_DEBUG_ROUTER) {
+          console.info(`[one] 📜 no state for path, resetRoot to undefined`)
+        }
         navigation.resetRoot(state)
       }
     })
@@ -292,6 +329,11 @@ export function useLinking(
     ): string => {
       let path
 
+      if (process.env.ONE_DEBUG_ROUTER) {
+        console.info(`[one] 📜 getPathForRoute - route:`, route)
+        console.info(`[one] 📜 getPathForRoute - state:`, JSON.stringify(state, null, 2))
+      }
+
       // If the `route` object contains a `path`, use that path as long as `route.name` and `params` still match
       // This makes sure that we preserve the original URL for wildcard routes
       if (route?.path) {
@@ -315,6 +357,9 @@ export function useLinking(
 
       if (path == null) {
         path = getPathFromStateRef.current(state, configRef.current)
+        if (process.env.ONE_DEBUG_ROUTER) {
+          console.info(`[one] 📜 getPathForRoute - computed from state:`, path)
+        }
       }
 
       // @modified - start: One will handle hashes itself, so these lines are not needed
@@ -340,14 +385,41 @@ export function useLinking(
     if (ref.current) {
       // We need to record the current metadata on the first render if they aren't set
       // This will allow the initial state to be in the history entry
-      const state = ref.current.getRootState()
+      // @modified - start: Use routerRootState instead of getRootState() to avoid stale state
+      // getRootState() can return incomplete state during initial render before children mount
+      // routerRootState is updated via navigation listener callbacks which only fire with complete state
+      const refState = ref.current.getRootState()
+      const state = (routerRootState || refState) as NavigationState | undefined
+
+      if (process.env.ONE_DEBUG_ROUTER) {
+        console.info(
+          `[one] 📜 useEffect initial state check - refState:`,
+          JSON.stringify(refState, null, 2)
+        )
+        console.info(
+          `[one] 📜 useEffect initial state check - routerRootState:`,
+          JSON.stringify(routerRootState, null, 2)
+        )
+      }
+      // @modified - end
 
       if (state) {
         const route = findFocusedRoute(state)
+
+        if (process.env.ONE_DEBUG_ROUTER) {
+          console.info(`[one] 📜 useEffect focused route:`, route)
+        }
+
         const path = getPathForRoute(route, state)
 
+        if (process.env.ONE_DEBUG_ROUTER) {
+          console.info(`[one] 📜 initial history.replace - state:`, JSON.stringify(state, null, 2))
+          console.info(`[one] 📜 initial history.replace - focusedRoute:`, route)
+          console.info(`[one] 📜 initial history.replace - computed path:`, path)
+        }
+
         if (previousStateRef.current === undefined) {
-          previousStateRef.current = state
+          previousStateRef.current = refState
         }
 
         history.replace({ path, state })
@@ -362,7 +434,10 @@ export function useLinking(
       }
 
       const previousState = previousStateRef.current
-      const state = navigation.getRootState()
+      // @modified - start: Use routerRootState for path calculation, refState for comparison
+      const refState = navigation.getRootState()
+      const state = (routerRootState || refState) as NavigationState | undefined
+      // @modified - end
 
       // root state may not available, for example when root navigators switch inside the container
       if (!state) {
@@ -373,7 +448,7 @@ export function useLinking(
       const route = findFocusedRoute(state)
       const path = getPathForRoute(route, state)
 
-      previousStateRef.current = state
+      previousStateRef.current = refState
       pendingPopStatePathRef.current = undefined
 
       // To detect the kind of state change, we need to:

package/src/getReactNavigationConfig.ts

@@ -1,4 +1,4 @@
-import { matchDeepDynamicRouteName, matchDynamicName } from './router/matchers'
+import { matchDynamicName } from './router/matchers'
 import type { RouteNode } from './router/Route'
 
 export type Screen =
@@ -22,14 +22,12 @@ function convertDynamicRouteToReactNavigation(segment: string): string {
     return '*not-found'
   }
 
-  const rest = matchDeepDynamicRouteName(segment)
-  if (typeof rest === 'string') {
-    return '*' + rest
-  }
-
-  const dynamicName = matchDynamicName(segment)
-  if (typeof dynamicName === 'string') {
-    return `:${dynamicName}`
+  const dynamicMatch = matchDynamicName(segment)
+  if (dynamicMatch) {
+    if (dynamicMatch.deep) {
+      return '*' + dynamicMatch.name
+    }
+    return `:${dynamicMatch.name}`
   }
 
   return segment

package/src/hooks.tsx

@@ -133,24 +133,26 @@ export function useParams<TParams extends Object = SearchParams>(): Partial<TPar
   const params = React.useContext(RouteParamsContext) ?? {}
 
   return Object.fromEntries(
-    Object.entries(params).map(([key, value]) => {
-      if (Array.isArray(value)) {
-        return [
-          key,
-          value.map((v) => {
-            try {
-              return decodeURIComponent(v)
-            } catch {
-              return v
-            }
-          }),
-        ]
-      }
-      try {
-        return [key, decodeURIComponent(value as string)]
-      } catch {
-        return [key, value]
-      }
-    })
+    Object.entries(params)
+      .filter(([_, value]) => value !== undefined)
+      .map(([key, value]) => {
+        if (Array.isArray(value)) {
+          return [
+            key,
+            value.map((v) => {
+              try {
+                return decodeURIComponent(v)
+              } catch {
+                return v
+              }
+            }),
+          ]
+        }
+        try {
+          return [key, decodeURIComponent(value as string)]
+        } catch {
+          return [key, value]
+        }
+      })
   ) as TParams
 }

package/src/router/getRoutes.ts

@@ -3,7 +3,6 @@ import { getPageExport } from '../utils/getPageExport'
 import type { One } from '../vite/types'
 import {
   matchArrayGroupName,
-  matchDeepDynamicRouteName,
   matchDynamicName,
   matchGroupName,
   removeSupportedExtensions,
@@ -479,11 +478,9 @@ export function generateDynamic(path: string): DynamicConvention[] | null {
         }
       }
 
-      const deepDynamicName = matchDeepDynamicRouteName(part)
-      const dynamicName = deepDynamicName ?? matchDynamicName(part)
-
-      if (!dynamicName) return null
-      return { name: dynamicName, deep: !!deepDynamicName }
+      const dynamicMatch = matchDynamicName(part)
+      if (!dynamicMatch) return null
+      return { name: dynamicMatch.name, deep: dynamicMatch.deep }
     })
     .filter((part): part is DynamicConvention => !!part)
 

package/src/router/matchers.test.ts

@@ -46,8 +46,8 @@ describe(matchDynamicName, () => {
   it(`matches`, () => {
     expect(matchDynamicName('[[...foobar]]')).toEqual(undefined)
     expect(matchDynamicName('[[foobar]]')).toEqual(undefined)
-    expect(matchDynamicName('[...foobar]')).toEqual(undefined)
-    expect(matchDynamicName('[foobar]')).toEqual('foobar')
+    expect(matchDynamicName('[...foobar]')).toEqual({ name: 'foobar', deep: true })
+    expect(matchDynamicName('[foobar]')).toEqual({ name: 'foobar', deep: false })
     expect(matchDynamicName('foobar')).toEqual(undefined)
   })
 })

package/src/router/matchers.ts

@@ -1,11 +1,27 @@
-/** Match `[page]` -> `page` */
-export function matchDynamicName(name: string): string | undefined {
-  // Don't match `...` or `[` or `]` inside the brackets
-  // eslint-disable-next-line no-useless-escape
-  return name.match(/^\[([^[\](?:...)]+?)\]$/)?.[1]
+/** Match `[page]` -> `page` or `[...page]` -> `page` with deep flag */
+const dynamicNameRe = /^\[([^[\]]+?)\]$/
+
+export interface DynamicNameMatch {
+  name: string
+  deep: boolean
+}
+
+/** Match `[page]` -> `{ name: 'page', deep: false }` or `[...page]` -> `{ name: 'page', deep: true }` */
+export function matchDynamicName(name: string): DynamicNameMatch | undefined {
+  const paramName = name.match(dynamicNameRe)?.[1]
+  if (paramName == null) {
+    return undefined
+  } else if (paramName.startsWith('...')) {
+    return { name: paramName.slice(3), deep: true }
+  } else {
+    return { name: paramName, deep: false }
+  }
 }
 
-/** Match `[...page]` -> `page` */
+/**
+ * Match `[...page]` -> `page`
+ * @deprecated Use matchDynamicName instead which returns {name, deep}
+ */
 export function matchDeepDynamicRouteName(name: string): string | undefined {
   return name.match(/^\[\.\.\.([^/]+?)\]$/)?.[1]
 }

package/src/router/router.ts

@@ -65,7 +65,7 @@ export function initialize(
     throw new Error('No routes found')
   }
 
-  if (process.env.NODE_ENV === 'development' && process.env.ONE_DEBUG_ROUTER && routeNode) {
+  if (process.env.ONE_DEBUG_ROUTER && routeNode) {
     const formatRouteTree = (node: RouteNode, indent = '', isLast = true): string => {
       const prefix = indent + (isLast ? '└─ ' : '├─ ')
       const childIndent = indent + (isLast ? '   ' : '│  ')
@@ -180,7 +180,7 @@ export function push(url: OneRouter.Href, options?: OneRouter.LinkToOptions) {
 }
 
 export function dismiss(count?: number) {
-  if (process.env.NODE_ENV === 'development' && process.env.ONE_DEBUG_ROUTER) {
+  if (process.env.ONE_DEBUG_ROUTER) {
     console.info(`[one] 🔙 dismiss${count ? ` (${count})` : ''}`)
   }
   navigationRef?.dispatch(StackActions.pop(count))
@@ -199,14 +199,14 @@ export function setParams(params: OneRouter.InpurRouteParamsGeneric = {}) {
 }
 
 export function dismissAll() {
-  if (process.env.NODE_ENV === 'development' && process.env.ONE_DEBUG_ROUTER) {
+  if (process.env.ONE_DEBUG_ROUTER) {
     console.info(`[one] 🔙 dismissAll`)
   }
   navigationRef?.dispatch(StackActions.popToTop())
 }
 
 export function goBack() {
-  if (process.env.NODE_ENV === 'development' && process.env.ONE_DEBUG_ROUTER) {
+  if (process.env.ONE_DEBUG_ROUTER) {
     console.info(`[one] 🔙 goBack`)
   }
   assertIsReady(navigationRef)
@@ -250,7 +250,7 @@ export function updateState(state: OneRouter.ResultState, nextStateParam = state
   const nextRouteInfo = getRouteInfo(state)
 
   if (!deepEqual(routeInfo, nextRouteInfo)) {
-    if (process.env.NODE_ENV === 'development' && process.env.ONE_DEBUG_ROUTER) {
+    if (process.env.ONE_DEBUG_ROUTER) {
       const from = routeInfo?.pathname || '(initial)'
       const to = nextRouteInfo.pathname
       const params = Object.keys(nextRouteInfo.params || {}).length
@@ -402,7 +402,7 @@ export function preloadRoute(href: string) {
 }
 
 export async function linkTo(href: string, event?: string, options?: OneRouter.LinkToOptions) {
-  if (process.env.NODE_ENV === 'development' && process.env.ONE_DEBUG_ROUTER) {
+  if (process.env.ONE_DEBUG_ROUTER) {
     console.info(`[one] 🔗 ${event || 'NAVIGATE'} ${href}`)
   }
 

package/src/router/useViteRoutes.tsx

@@ -26,6 +26,17 @@ export function useViteRoutes(
   return context
 }
 
+// store preloaded modules so resolve() can use them synchronously
+let preloadedModules: Record<string, any> = {}
+
+export function registerPreloadedRoute(key: string, module: any): void {
+  preloadedModules[key] = module
+}
+
+export function getPreloadedModule(key: string): any {
+  return preloadedModules[key]
+}
+
 export function loadRoutes(
   paths: GlobbedRouteImports,
   routerRoot: string,
@@ -77,6 +88,14 @@ export function globbedRoutesToRouteContext(
       return loadedRoutes[id]
     }
 
+    // check if this route was preloaded before hydration
+    const preloadKey = id.replace('./', `/${routerRoot}/`)
+    const preloaded = getPreloadedModule(preloadKey)
+    if (preloaded) {
+      loadedRoutes[id] = preloaded
+      return preloaded
+    }
+
     if (typeof routesSync[id] !== 'function') {
       return routesSync[id]
     }
@@ -98,23 +117,6 @@ export function globbedRoutesToRouteContext(
           console.error(`Error loading route`, id, err, new Error().stack)
           loadedRoutes[id] = {
             default: () => null,
-            // <View
-            //   style={{
-            //     position: 'absolute',
-            //     top: 0,
-            //     left: 0,
-            //     right: 0,
-            //     bottom: 0,
-            //     alignItems: 'center',
-            //     justifyContent: 'center',
-            //     backgroundColor: '#000',
-            //     gap: 20,
-            //   }}
-            // >
-            //   <Text style={{ fontSize: 24, color: '#fff' }}>Error loading route</Text>
-            //   <Text style={{ fontSize: 16, color: '#fff' }}>{id}</Text>
-            //   <Text style={{ fontSize: 18, color: '#fff', maxWidth: 800 }}>{`${err}`}</Text>
-            // </View>
           }
           delete promises[id]
         })

package/src/router/utils/getNavigateAction.ts

@@ -39,14 +39,15 @@ export function getNavigateAction(
     const childState = actionStateRoute.state
     const nextNavigationState = stateRoute.state
 
-    const dynamicName = matchDynamicName(actionStateRoute.name)
+    const dynamicMatch = matchDynamicName(actionStateRoute.name)
 
     const didActionAndCurrentStateDiverge =
       actionStateRoute.name !== stateRoute.name ||
       // !deepEqual(actionStateRoute.params, stateRoute.params) ||
       !childState ||
       !nextNavigationState ||
-      (dynamicName && actionStateRoute.params?.[dynamicName] !== stateRoute.params?.[dynamicName])
+      (dynamicMatch &&
+        actionStateRoute.params?.[dynamicMatch.name] !== stateRoute.params?.[dynamicMatch.name])
 
     if (didActionAndCurrentStateDiverge) {
       break

package/src/server/oneServe.ts

@@ -18,6 +18,8 @@ import { toAbsolute } from '../utils/toAbsolute'
 import type { One } from '../vite/types'
 import type { RouteInfoCompiled } from './createRoutesManifest'
 
+const debugRouter = process.env.ONE_DEBUG_ROUTER
+
 export async function oneServe(oneOptions: One.PluginOptions, buildInfo: One.BuildInfo, app: Hono) {
   const { resolveAPIRoute, resolveLoaderRoute, resolvePageRoute } = await import(
     '../createHandleRequest'
@@ -36,6 +38,9 @@ export async function oneServe(oneOptions: One.PluginOptions, buildInfo: One.Bui
           const paramName = param.substring(1)
           return context.req.param(paramName) || ''
         })
+        if (debugRouter) {
+          console.info(`[one] ↪ redirect ${context.req.path} → ${destinationUrl}`)
+        }
         return context.redirect(destinationUrl, redirect.permanent ? 301 : 302)
       })
     }
@@ -180,11 +185,19 @@ url: ${url}`)
 
           switch (route.type) {
             case 'api': {
+              if (debugRouter) {
+                console.info(`[one] ⚡ ${url.pathname} → matched API route: ${route.page}`)
+              }
               return resolveAPIRoute(requestHandlers, request, url, route)
             }
             case 'ssg':
             case 'spa':
             case 'ssr': {
+              if (debugRouter) {
+                console.info(
+                  `[one] ⚡ ${url.pathname} → matched page route: ${route.page} (${route.type})`
+                )
+              }
               return resolvePageRoute(requestHandlers, request, url, route)
             }
           }

package/src/types.ts

@@ -24,4 +24,5 @@ export type RenderAppProps = {
   loaderServerData?: any
   loaderData?: any
   loaderProps?: LoaderProps
+  routePreloads?: Record<string, string>
 }