one 1.2.20 → 1.2.22-1765155190908

package/src/cli/buildPage.ts

@@ -21,7 +21,8 @@ export async function buildPage(
   builtMiddlewares: Record<string, string>,
   serverJsPath: string,
   preloads: string[],
-  allCSS: string[]
+  allCSS: string[],
+  routePreloads: Record<string, string>
 ): Promise<One.RouteBuildInfo> {
   const render = await getRender(serverEntry)
   const htmlPath = `${path.endsWith('/') ? `${removeTrailingSlash(path)}/index` : path}.html`
@@ -34,12 +35,33 @@ export async function buildPage(
   let loaderData = {}
 
   try {
-    // todo await optimize
-    await FSExtra.writeFile(
-      join(clientDir, preloadPath),
-      preloads.map((preload) => `import "${preload}"`).join('\n')
+    // generate preload file with route module registration
+    const routeImports: string[] = []
+    const routeRegistrations: string[] = []
+    let routeIndex = 0
+
+    for (const [routeKey, bundlePath] of Object.entries(routePreloads)) {
+      const varName = `_r${routeIndex++}`
+      routeImports.push(`import * as ${varName} from "${bundlePath}"`)
+      routeRegistrations.push(`registerPreloadedRoute("${routeKey}", ${varName})`)
+    }
+
+    // Use window global for registration since ES module exports get tree-shaken
+    const registrationCalls = routeRegistrations.map((call) =>
+      call.replace('registerPreloadedRoute(', 'window.__oneRegisterPreloadedRoute(')
     )
 
+    const preloadContent = [
+      // import all route modules
+      ...routeImports,
+      // static imports for cache warming (original behavior)
+      ...preloads.map((preload) => `import "${preload}"`),
+      // register all route modules using window global
+      ...registrationCalls,
+    ].join('\n')
+
+    await FSExtra.writeFile(join(clientDir, preloadPath), preloadContent)
+
     const exported = await import(toAbsolute(serverJsPath))
 
     if (exported.loader) {
@@ -73,6 +95,7 @@ if (typeof document === 'undefined') globalThis.document = {}
           loaderData,
           css: allCSS,
           mode: 'ssg',
+          routePreloads,
         })
         await outputFile(htmlOutPath, html)
       } else if (foundRoute.type === 'spa') {

package/src/createApp.tsx

@@ -6,6 +6,7 @@ import { AppRegistry } from 'react-native'
 import { resolveClientLoader } from './clientLoaderResolver'
 import { Root } from './Root'
 import { render } from './render'
+import { registerPreloadedRoute } from './router/useViteRoutes'
 import { renderToString } from './server-render'
 import type { RenderAppProps } from './types'
 import { getServerHeadInsertions } from './useServerHeadInsertion'
@@ -25,7 +26,7 @@ export function createApp(options: CreateAppProps) {
     return {
       options,
       render: async (props: RenderAppProps) => {
-        let { loaderData, loaderProps, css, mode, loaderServerData } = props
+        let { loaderData, loaderProps, css, mode, loaderServerData, routePreloads } = props
 
         setServerContext({
           postRenderData: loaderServerData,
@@ -33,6 +34,7 @@ export function createApp(options: CreateAppProps) {
           loaderProps,
           mode,
           css,
+          routePreloads,
         })
 
         let renderId: string | undefined
@@ -116,29 +118,35 @@ export function createApp(options: CreateAppProps) {
     }
   }
 
-  // run their root layout before calling resolveClientLoader so they can register hook
-  const rootLayoutImport = options.routes[`/${options.routerRoot}/_layout.tsx`]?.()
+  const serverContext = getServerContext() || {}
+  const routePreloads = serverContext.routePreloads
 
-  return rootLayoutImport
+  // preload routes using build-time mapping (production SSG)
+  // for SPA/dev mode, fall back to importing root layout directly
+  const preloadPromises = routePreloads
+    ? Object.entries(routePreloads).map(async ([routeKey, bundlePath]) => {
+        const mod = await import(/* @vite-ignore */ bundlePath)
+        registerPreloadedRoute(routeKey, mod)
+        return mod
+      })
+    : [options.routes[`/${options.routerRoot}/_layout.tsx`]?.()]
+
+  return Promise.all(preloadPromises)
     .then(() => {
-      resolveClientLoader(getServerContext() || {})
-        .then(() => {
-          // on client we just render
-          render(
-            <Root
-              isClient
-              flags={options.flags}
-              routes={options.routes}
-              routerRoot={options.routerRoot}
-              path={window.location.href}
-            />
-          )
-        })
-        .catch((err) => {
-          console.error(`Error running client loader resolver "onClientLoaderResolve":`, err)
-        })
+      return resolveClientLoader(serverContext)
+    })
+    .then(() => {
+      render(
+        <Root
+          isClient
+          flags={options.flags}
+          routes={options.routes}
+          routerRoot={options.routerRoot}
+          path={window.location.href}
+        />
+      )
     })
     .catch((err) => {
-      console.error(`Error importing root layout on client`, err)
+      console.error(`Error during client initialization:`, err)
     })
 }

package/src/createHandleRequest.ts

@@ -25,6 +25,8 @@ type RequestHandlerProps<RouteExtraProps extends Object = {}> = {
 
 type RequestHandlerResponse = null | string | Response
 
+const debugRouter = process.env.ONE_DEBUG_ROUTER
+
 export async function runMiddlewares(
   handlers: RequestHandlers,
   request: Request,
@@ -40,6 +42,10 @@ export async function runMiddlewares(
     throw new Error(`No middleware handler configured`)
   }
 
+  if (debugRouter) {
+    console.info(`[one] 🔗 middleware chain (${middlewares.length}) for ${route.page}`)
+  }
+
   const context: MiddlewareContext = {}
 
   async function dispatch(index: number): Promise<Response> {
@@ -47,9 +53,16 @@ export async function runMiddlewares(
 
     // no more middlewares, finish
     if (!middlewareModule) {
+      if (debugRouter) {
+        console.info(`[one] ✓ middleware chain complete`)
+      }
       return await getResponse()
     }
 
+    if (debugRouter) {
+      console.info(`[one]   → middleware[${index}]: ${middlewareModule.contextKey}`)
+    }
+
     const exported = (await handlers.loadMiddleware!(middlewareModule))?.default as
       | Middleware
       | undefined
@@ -67,6 +80,9 @@ export async function runMiddlewares(
     const response = await exported({ request, next, context })
 
     if (response) {
+      if (debugRouter) {
+        console.info(`[one]   ← middleware[${index}] returned early (status: ${response.status})`)
+      }
       return response
     }
 
@@ -87,6 +103,10 @@ export async function resolveAPIRoute(
   const { pathname } = url
   const params = getRouteParams(pathname, route)
 
+  if (debugRouter) {
+    console.info(`[one] 📡 API ${request.method} ${pathname} → ${route.file}`, params)
+  }
+
   try {
     return resolveAPIEndpoint(
       () =>
@@ -128,6 +148,10 @@ export async function resolveLoaderRoute(
   url: URL,
   route: RouteInfoCompiled
 ) {
+  if (debugRouter) {
+    console.info(`[one] 📦 loader ${url.pathname} → ${route.file}`)
+  }
+
   return await runMiddlewares(handlers, request, route, async () => {
     return await resolveResponse(async () => {
       const headers = new Headers()
@@ -171,6 +195,10 @@ export async function resolvePageRoute(
 ) {
   const { pathname, search } = url
 
+  if (debugRouter) {
+    console.info(`[one] 📄 page ${pathname} → ${route.file} (${route.type})`)
+  }
+
   return resolveResponse(async () => {
     const resolved = await runMiddlewares(handlers, request, route, async () => {
       return await handlers.handlePage!({
@@ -241,6 +269,9 @@ export function createHandleRequest(
           return route.compiledRegex.test(pathname)
         })
         if (apiRoute) {
+          if (debugRouter) {
+            console.info(`[one] ⚡ ${pathname} → matched API route: ${apiRoute.page}`)
+          }
           return await resolveAPIRoute(handlers, request, url, apiRoute)
         }
       }
@@ -291,6 +322,9 @@ export function createHandleRequest(
           if (!route.compiledRegex.test(pathname)) {
             continue
           }
+          if (debugRouter) {
+            console.info(`[one] ⚡ ${pathname} → matched page route: ${route.page} (${route.type})`)
+          }
           return resolvePageRoute(handlers, request, url, route)
         }
       }

package/src/fork/NavigationContainer.tsx

@@ -164,6 +164,14 @@ function NavigationContainerInner(
 
   const [isResolved, initialState] = useThenable(getInitialState)
 
+  if (process.env.ONE_DEBUG_ROUTER) {
+    console.info(
+      `[one] 🏠 NavigationContainer isResolved=${isResolved} initialState=`,
+      JSON.stringify(initialState, null, 2)
+    )
+    console.info(`[one] 🏠 NavigationContainer rest.initialState=`, rest.initialState)
+  }
+
   React.useImperativeHandle(ref, () => refContainer.current!)
 
   const isLinkingReady = rest.initialState != null || !isLinkingEnabled || isResolved

package/src/fork/createMemoryHistory.tsx

@@ -82,6 +82,10 @@ export function createMemoryHistory() {
       items.push({ path, state, id })
       index = items.length - 1
 
+      if (process.env.ONE_DEBUG_ROUTER) {
+        console.info(`[one] 📜 history.push path=${path}`)
+      }
+
       // We pass empty string for title because it's ignored in all browsers except safari
       // We don't store state object in history.state because:
       // - browsers have limits on how big it can be, and we don't control the size
@@ -117,6 +121,10 @@ export function createMemoryHistory() {
         items[index] = { path, state, id }
       }
 
+      if (process.env.ONE_DEBUG_ROUTER) {
+        console.info(`[one] 📜 history.replace path=${pathWithHash}`)
+      }
+
       window.history.replaceState({ id }, '', pathWithHash)
     },
 

package/src/fork/extractPathFromURL.ts

@@ -82,6 +82,12 @@ function fromDeepLink(url: string): string {
      * - It has a valid App scheme, but the scheme isn't a valid URL scheme (e.g. `my_app://`)
      */
 
+    // If `url` is already a path (starts with `/`), return it as-is
+    // This prevents incorrect rewrites when URL is in query params (e.g. `/?url=https://example.com`)
+    if (url.startsWith('/')) {
+      return url
+    }
+
     /**
      * App schemes are not valid URL schemes, so they will fail to parse.
      * We need to strip the scheme from these URLs

package/src/fork/getPathFromState-mods.ts

@@ -6,7 +6,7 @@
 
 import type { Route } from '@react-navigation/core'
 
-import { matchDeepDynamicRouteName, matchDynamicName, matchGroupName } from '../router/matchers'
+import { matchDynamicName, matchGroupName } from '../router/matchers'
 import { getParamName } from './_shared'
 
 export type AdditionalOptions = {
@@ -136,12 +136,7 @@ export function appendBaseUrl(
 }
 
 function segmentMatchesConvention(segment: string): boolean {
-  return (
-    segment === 'index' ||
-    matchDynamicName(segment) != null ||
-    matchGroupName(segment) != null ||
-    matchDeepDynamicRouteName(segment) != null
-  )
+  return segment === 'index' || matchDynamicName(segment) != null || matchGroupName(segment) != null
 }
 
 function encodeURISegment(str: string, { preserveBrackets = false } = {}) {

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'
@@ -156,9 +157,18 @@ export function useLinking(
     (state: ResultState) => {
       const navigation = ref.current
       const rootState = navigation?.getRootState()
+      // @modified - start
+      // Fix for back/forward button navigation: if routeNames is undefined (stale state),
+      // don't reject the navigation. This can happen during browser back/forward.
+      // See: https://github.com/expo/expo/pull/37747
+      const routeNames = rootState?.routeNames
+      if (!routeNames) {
+        return false // Don't reject navigation if we can't validate
+      }
+      // @modified - end
       // 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) => !routeNames.includes(r.name))
     },
     [ref]
   )
@@ -180,8 +190,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 +240,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 +255,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 +276,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 +289,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 +306,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 +338,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 +366,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 +394,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 +443,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 +457,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