one 1.21.7 → 1.21.9

package/src/cli.ts

@@ -79,9 +79,6 @@ const dev = defineCommand({
     port: {
       type: 'string',
     },
-    https: {
-      type: 'boolean',
-    },
     mode: {
       type: 'string',
       description:

package/src/image/getImageData.ts

@@ -16,10 +16,10 @@ export type ImageMeta = {
 
 let sharpWarned = false
 
-export async function getSharp(): Promise<typeof import('sharp') | null> {
+export async function getSharp(): Promise<(typeof import('sharp'))['default'] | null> {
   try {
     const sharpModule = await import('sharp')
-    return (sharpModule as any).default || sharpModule
+    return sharpModule.default
   } catch (e) {
     if (!sharpWarned) {
       sharpWarned = true

package/src/index.ts

@@ -187,6 +187,7 @@ export { LoadProgressBar } from './views/LoadProgressBar'
 export { Navigator, Slot } from './views/Navigator'
 export { ScrollBehavior } from './views/ScrollBehavior'
 export { SourceInspector, type SourceInspectorProps } from './views/SourceInspector'
+export type { SuspenseFallbackProps } from './views/SuspenseFallback'
 export type { ErrorBoundaryProps, ErrorRouteInfo } from './views/Try'
 // scroll position groups
 export { useScrollGroup } from './useScrollGroup'

package/src/layouts/Stack.tsx

@@ -46,10 +46,10 @@ function mapChildren(children: React.ReactNode): React.ReactNode {
 
       if (isChildOfType(child, Protected)) {
         // recursively process Protected children
-        return (
-          <Protected key={`protected-${index}`} guard={child.props.guard}>
-            {mapChildren(child.props.children)}
-          </Protected>
+        return React.cloneElement(
+          child,
+          { key: `protected-${index}` },
+          mapChildren(child.props.children)
         )
       }
 

package/src/layouts/withLayoutContext.test.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+import TestRenderer, { act } from 'react-test-renderer'
+import { describe, expect, it } from 'vitest'
+import { Protected } from '../views/Protected'
+import { Screen } from '../views/Screen'
+import { useFilterScreenChildren } from './withLayoutContext'
+
+function readGuardedRedirects(children: React.ReactNode) {
+  let result: ReturnType<typeof useFilterScreenChildren> | undefined
+
+  function Capture() {
+    result = useFilterScreenChildren(children)
+    return null
+  }
+
+  act(() => {
+    TestRenderer.create(<Capture />)
+  })
+
+  return result!.guardedRedirects
+}
+
+describe('Protected redirectTo', () => {
+  it('associates a failed guard redirect with each protected screen', () => {
+    const redirects = readGuardedRedirects(
+      <Protected guard={false} redirectTo="/login">
+        <Screen name="dashboard" />
+        <Screen name="settings" />
+      </Protected>
+    )
+
+    expect(Array.from(redirects)).toEqual([
+      ['dashboard', '/login'],
+      ['settings', '/login'],
+    ])
+  })
+
+  it('uses the innermost failing guard redirect', () => {
+    const redirects = readGuardedRedirects(
+      <Protected guard={false} redirectTo="/login">
+        <Protected guard={false} redirectTo="/subscribe">
+          <Screen name="premium" />
+        </Protected>
+      </Protected>
+    )
+
+    expect(redirects.get('premium')).toBe('/subscribe')
+  })
+
+  it('inherits a failed parent redirect through a passing child guard', () => {
+    const redirects = readGuardedRedirects(
+      <Protected guard={false} redirectTo="/login">
+        <Protected guard>
+          <Screen name="account" />
+        </Protected>
+      </Protected>
+    )
+
+    expect(redirects.get('account')).toBe('/login')
+  })
+
+  it('ignores redirectTo on a passing parent guard', () => {
+    const redirects = readGuardedRedirects(
+      <Protected guard redirectTo="/login">
+        <Protected guard={false}>
+          <Screen name="account" />
+        </Protected>
+      </Protected>
+    )
+
+    expect(redirects.has('account')).toBe(true)
+    expect(redirects.get('account')).toBeUndefined()
+  })
+})

package/src/layouts/withLayoutContext.tsx

@@ -1,8 +1,17 @@
 import type { EventMapBase, NavigationState } from '@react-navigation/native'
 import React from 'react'
-import { useContextKey } from '../router/Route'
-import { registerProtectedRoutes, unregisterProtectedRoutes } from '../router/router'
+import type { OneRouter } from '../interfaces/router'
+import { getContextKey, stripInvisibleSegmentsFromPath } from '../router/matchers'
+import { useContextKey, useRouteNode } from '../router/Route'
+import {
+  registerProtectedRoutes,
+  replace,
+  resolveProtectedHref,
+  routeInfo,
+  unregisterProtectedRoutes,
+} from '../router/router'
 import { type ScreenProps, useSortedScreens } from '../router/useScreens'
+import { sortRoutesWithInitial } from '../router/sortRoutes'
 import type { PickPartial } from '../types'
 import { withStaticProperties } from '../utils/withStaticProperties'
 import { isProtectedElement } from '../views/Protected'
@@ -24,12 +33,17 @@ export function useFilterScreenChildren(
     const customChildren: any[] = []
     const screens: any[] = []
     const protectedScreens = new Set<string>()
+    const guardedRedirects = new Map<string, OneRouter.Href | undefined>()
 
     /**
      * Recursively process children, handling Protected elements.
      * When exclude is true, all Screen children are added to protectedScreens instead of screens.
      */
-    function flattenChild(child: React.ReactNode, exclude = false) {
+    function flattenChild(
+      child: React.ReactNode,
+      exclude = false,
+      redirectTo?: OneRouter.Href
+    ) {
       // Handle Screen or StackScreen elements
       if (
         React.isValidElement(child) &&
@@ -61,6 +75,7 @@ export function useFilterScreenChildren(
         const screenProps = child.props as ScreenProps
         if (exclude && screenProps.name) {
           protectedScreens.add(screenProps.name)
+          guardedRedirects.set(screenProps.name, redirectTo)
         } else {
           screens.push(screenProps)
         }
@@ -69,10 +84,11 @@ export function useFilterScreenChildren(
 
       // Handle Protected elements - recursively process children with guard logic
       if (isProtectedElement(child)) {
-        // Key logic: exclude if parent excluded OR guard is false
-        const excludeChildren = exclude || !child.props.guard
+        const guardFails = !child.props.guard
+        const excludeChildren = exclude || guardFails
+        const childRedirectTo = guardFails ? child.props.redirectTo : redirectTo
         React.Children.forEach(child.props.children, (nested) => {
-          flattenChild(nested, excludeChildren)
+          flattenChild(nested, excludeChildren, childRedirectTo)
         })
         return
       }
@@ -102,10 +118,40 @@ export function useFilterScreenChildren(
       screens,
       children: customChildren,
       protectedScreens,
+      guardedRedirects,
     }
   }, [children, contextKey, isCustomNavigator])
 }
 
+export function useResolvedGuardedRedirects(
+  guardedRedirects: Map<string, OneRouter.Href | undefined>
+) {
+  const node = useRouteNode()
+
+  return React.useMemo(() => {
+    if (!node) {
+      return guardedRedirects
+    }
+
+    const defaultRoute = [...node.children]
+      .sort(sortRoutesWithInitial(node.initialRouteName))
+      .find((child) => {
+        const normalized = child.route.replace(/\/index$/, '')
+        return !(guardedRedirects.has(child.route) || guardedRedirects.has(normalized))
+      })
+    const defaultHref = defaultRoute
+      ? stripInvisibleSegmentsFromPath(getContextKey(defaultRoute.contextKey)) || '/'
+      : undefined
+
+    return new Map(
+      Array.from(guardedRedirects, ([name, redirectTo]) => [
+        name,
+        redirectTo ?? defaultHref,
+      ])
+    )
+  }, [guardedRedirects, node])
+}
+
 /** Return a navigator that automatically injects matched routes and renders nothing when there are no children. Return type with children prop optional */
 export function withLayoutContext<
   TOptions extends object,
@@ -124,20 +170,33 @@ export function withLayoutContext<
       (propsIn, ref) => {
         const { children, ...props } = propsIn as React.ComponentProps<T>
         const contextKey = useContextKey()
-        const { screens, protectedScreens } = useFilterScreenChildren(children, {
-          contextKey,
-        })
+        const { screens, protectedScreens, guardedRedirects } = useFilterScreenChildren(
+          children,
+          { contextKey }
+        )
+        const resolvedGuardedRedirects = useResolvedGuardedRedirects(guardedRedirects)
 
         // Register protected routes globally so linkTo can block navigation to them
         // Register immediately (not just in effect) to catch navigation attempts during first render
-        registerProtectedRoutes(contextKey, protectedScreens)
+        registerProtectedRoutes(contextKey, resolvedGuardedRedirects)
+
+        const currentPathname = routeInfo?.pathname
+        const protectedHref = currentPathname
+          ? resolveProtectedHref(currentPathname)
+          : currentPathname
 
         React.useEffect(() => {
-          registerProtectedRoutes(contextKey, protectedScreens)
+          registerProtectedRoutes(contextKey, resolvedGuardedRedirects)
           return () => {
             unregisterProtectedRoutes(contextKey)
           }
-        }, [contextKey, protectedScreens])
+        }, [contextKey, resolvedGuardedRedirects])
+
+        React.useEffect(() => {
+          if (currentPathname && protectedHref && protectedHref !== currentPathname) {
+            replace(protectedHref)
+          }
+        }, [currentPathname, protectedHref])
 
         const processed = processor ? processor(screens ?? ([] as any)) : screens
         const sorted = useSortedScreens((processed ?? []) as any, {

package/src/router/Route.tsx

@@ -1,6 +1,7 @@
 import React, { createContext, type ReactNode, useContext } from 'react'
 import { findFocusedRoute } from '../fork/findFocusedRoute'
 import type { ErrorBoundaryProps } from '../views/Try'
+import type { SuspenseFallbackProps } from '../views/SuspenseFallback'
 import type { LoaderProps } from '../types'
 import type { One } from '../vite/types'
 import type { ParamValidator, RouteValidationFn } from '../validateParams'
@@ -37,6 +38,7 @@ export type SlotConfig = {
 
 export type LoadedRoute = {
   ErrorBoundary?: React.ComponentType<ErrorBoundaryProps>
+  SuspenseFallback?: React.ComponentType<SuspenseFallbackProps>
   default?: React.ComponentType<any>
   unstable_settings?: Record<string, any>
   getNavOptions?: (args: any) => any
@@ -124,8 +126,14 @@ export const RouteParamsContext = createContext<
 
 const CurrentRouteContext = React.createContext<RouteNode | null>(null)
 
+/** Allows a layout to provide a Suspense fallback for its child routes. */
+export const SuspenseFallbackContext = createContext<
+  React.ComponentType<SuspenseFallbackProps> | undefined
+>(undefined)
+
 if (process.env.NODE_ENV !== 'production') {
   CurrentRouteContext.displayName = 'RouteNode'
+  SuspenseFallbackContext.displayName = 'SuspenseFallback'
 }
 
 /** Return the RouteNode at the current contextual boundary. */

package/src/router/protectedRoutes.test.ts

@@ -0,0 +1,35 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import {
+  isRouteProtected,
+  registerProtectedRoutes,
+  resolveProtectedHref,
+  unregisterProtectedRoutes,
+} from './router'
+
+const contextKey = '/account'
+
+afterEach(() => {
+  unregisterProtectedRoutes(contextKey)
+})
+
+describe('protected route redirects', () => {
+  it('resolves a protected href to its redirect target', () => {
+    registerProtectedRoutes(contextKey, new Map([['settings', '/login']]))
+
+    expect(isRouteProtected('/account/settings?tab=billing')).toBe(true)
+    expect(resolveProtectedHref('/account/settings?tab=billing')).toBe('/login')
+  })
+
+  it('blocks a protected href without an explicit target', () => {
+    registerProtectedRoutes(contextKey, new Map([['settings', undefined]]))
+
+    expect(resolveProtectedHref('/account/settings')).toBeUndefined()
+  })
+
+  it('leaves allowed and similarly prefixed routes unchanged', () => {
+    registerProtectedRoutes(contextKey, new Map([['settings', '/login']]))
+
+    expect(resolveProtectedHref('/account/profile')).toBe('/account/profile')
+    expect(resolveProtectedHref('/accounting/settings')).toBe('/accounting/settings')
+  })
+})

package/src/router/router.ts

@@ -75,9 +75,8 @@ export { getSafeWindowPathname } from './path'
 export let routeNode: RouteNode | null = null
 export let rootComponent: ComponentType
 
-// Global registry for protected routes
-// Key: contextKey (e.g., '/protected-test'), Value: Set of protected route names
-const protectedRouteRegistry = new Map<string, Set<string>>()
+// key: navigator context, value: guarded route names and their optional redirect targets.
+const protectedRouteRegistry = new Map<string, Map<string, OneRouter.Href | undefined>>()
 
 /**
  * Register protected routes for a navigator context.
@@ -85,12 +84,12 @@ const protectedRouteRegistry = new Map<string, Set<string>>()
  */
 export function registerProtectedRoutes(
   contextKey: string,
-  protectedScreens: Set<string>
+  guardedRedirects: Map<string, OneRouter.Href | undefined>
 ) {
-  if (protectedScreens.size === 0) {
+  if (guardedRedirects.size === 0) {
     protectedRouteRegistry.delete(contextKey)
   } else {
-    protectedRouteRegistry.set(contextKey, protectedScreens)
+    protectedRouteRegistry.set(contextKey, guardedRedirects)
   }
 }
 
@@ -106,26 +105,28 @@ export function unregisterProtectedRoutes(contextKey: string) {
  * Check if a route path is protected and should be blocked.
  * Returns true if the route is protected.
  */
-export function isRouteProtected(href: string): boolean {
-  // Normalize the href (remove leading/trailing slashes)
-  const normalizedHref = href.replace(/^\/+|\/+$/g, '')
+function getProtectedRedirect(href: string): OneRouter.Href | undefined | false {
+  const normalizedHref = extractPathnameFromHref(href).replace(/^\/+|\/+$/g, '')
 
-  // Check each navigator context to see if this route is protected
-  for (const [contextKey, protectedScreens] of protectedRouteRegistry) {
+  for (const [contextKey, guardedRedirects] of protectedRouteRegistry) {
     const normalizedContextKey = contextKey.replace(/^\/+|\/+$/g, '')
 
-    // Check if this href is under this context
-    if (normalizedHref.startsWith(normalizedContextKey)) {
-      // Get the route name relative to this context
+    if (
+      !normalizedContextKey ||
+      normalizedHref === normalizedContextKey ||
+      normalizedHref.startsWith(`${normalizedContextKey}/`)
+    ) {
       const relativePath = normalizedHref
         .slice(normalizedContextKey.length)
         .replace(/^\//, '')
       const routeName = relativePath.split('/')[0] || 'index'
-
-      // normalize /index suffix so e.g. "otp/[flow]" matches "otp/[flow]/index"
       const normalizedRouteName = routeName.replace(/\/index$/, '')
-      if (protectedScreens.has(routeName) || protectedScreens.has(normalizedRouteName)) {
-        return true
+
+      if (guardedRedirects.has(routeName)) {
+        return guardedRedirects.get(routeName)
+      }
+      if (guardedRedirects.has(normalizedRouteName)) {
+        return guardedRedirects.get(normalizedRouteName)
       }
     }
   }
@@ -133,6 +134,30 @@ export function isRouteProtected(href: string): boolean {
   return false
 }
 
+/** resolve a protected href to its allowed redirect target. */
+export function resolveProtectedHref(href: string): string | undefined {
+  let target = href
+  const visited = new Set<string>()
+
+  while (!visited.has(target)) {
+    visited.add(target)
+    const redirectTo = getProtectedRedirect(target)
+    if (redirectTo === false) {
+      return target
+    }
+    if (redirectTo === undefined) {
+      return undefined
+    }
+    target = resolveHref(redirectTo)
+  }
+
+  return undefined
+}
+
+export function isRouteProtected(href: string): boolean {
+  return getProtectedRedirect(href) !== false
+}
+
 export let hasAttemptedToHideSplash = false
 export let initialState: OneRouter.ResultState | undefined
 export let rootState: OneRouter.ResultState | undefined
@@ -1077,10 +1102,13 @@ export async function linkTo(
     return
   }
 
-  // Check if the route is protected and should be blocked
-  if (isRouteProtected(href)) {
+  const protectedHref = resolveProtectedHref(href)
+  if (!protectedHref) {
     return
   }
+  if (protectedHref !== href) {
+    return linkTo(protectedHref, 'REPLACE', options)
+  }
 
   // Check for intercepting routes (parallel routes with @slot)
   // This enables modal patterns where soft nav shows modal, hard nav shows full page

package/src/router/useScreens.test.tsx

@@ -0,0 +1,139 @@
+import React from 'react'
+import TestRenderer, { act } from 'react-test-renderer'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import type { LoadedRoute, RouteNode } from './Route'
+import { getQualifiedRouteComponent } from './useScreens'
+
+type FallbackProps = {
+  route: string
+  params: Record<string, string | string[]>
+}
+
+const pendingRoute = new Promise<void>(() => {})
+const previousTarget = process.env.TAMAGUI_TARGET
+const previousSuspendRoutesNative = process.env.ONE_SUSPEND_ROUTES_NATIVE
+const previousDisableSuspense = (globalThis as any).__ONE_DISABLE_SUSPENSE_ROUTES__
+
+function createRouteNode(
+  type: RouteNode['type'],
+  route: string,
+  contextKey: string,
+  loadRoute: () => Partial<LoadedRoute>
+): RouteNode {
+  return {
+    type,
+    route,
+    contextKey,
+    loadRoute,
+    children: [],
+    dynamic: null,
+  }
+}
+
+function SuspendingRoute(): React.ReactNode {
+  throw pendingRoute
+}
+
+beforeEach(() => {
+  process.env.TAMAGUI_TARGET = 'native'
+  delete process.env.ONE_SUSPEND_ROUTES_NATIVE
+  delete (globalThis as any).__ONE_DISABLE_SUSPENSE_ROUTES__
+})
+
+afterEach(() => {
+  if (previousTarget === undefined) {
+    delete process.env.TAMAGUI_TARGET
+  } else {
+    process.env.TAMAGUI_TARGET = previousTarget
+  }
+  if (previousSuspendRoutesNative === undefined) {
+    delete process.env.ONE_SUSPEND_ROUTES_NATIVE
+  } else {
+    process.env.ONE_SUSPEND_ROUTES_NATIVE = previousSuspendRoutesNative
+  }
+  if (previousDisableSuspense === undefined) {
+    delete (globalThis as any).__ONE_DISABLE_SUSPENSE_ROUTES__
+  } else {
+    ;(globalThis as any).__ONE_DISABLE_SUSPENSE_ROUTES__ = previousDisableSuspense
+  }
+})
+
+describe('route SuspenseFallback', () => {
+  it('inherits the layout fallback and passes the suspended route details', async () => {
+    const childNode = createRouteNode(
+      'spa',
+      'profile/[id]',
+      './(app)/profile/[id].tsx',
+      () => {
+        throw pendingRoute
+      }
+    )
+    const ChildRoute = getQualifiedRouteComponent(childNode)
+    const layoutNode = createRouteNode('layout', '(app)', './(app)/_layout.tsx', () => ({
+      default: () => <ChildRoute route={{ params: { id: '123' } }} />,
+      SuspenseFallback: ({ route, params }: FallbackProps) => (
+        <div data-fallback="layout">
+          {route}:{params.id}
+        </div>
+      ),
+    }))
+    const LayoutRoute = getQualifiedRouteComponent(layoutNode)
+
+    let renderer: TestRenderer.ReactTestRenderer
+    await act(async () => {
+      renderer = TestRenderer.create(<LayoutRoute />)
+    })
+
+    expect(renderer!.root.findByProps({ 'data-fallback': 'layout' }).children).toEqual([
+      './(app)/profile/[id].tsx',
+      ':',
+      '123',
+    ])
+  })
+
+  it('uses the nearest layout fallback', async () => {
+    const childNode = createRouteNode('spa', 'profile', './(app)/profile.tsx', () => ({
+      default: SuspendingRoute,
+    }))
+    const ChildRoute = getQualifiedRouteComponent(childNode)
+    const nestedLayoutNode = createRouteNode(
+      'layout',
+      '(app)',
+      './(app)/_layout.tsx',
+      () => ({
+        default: () => <ChildRoute />,
+        SuspenseFallback: () => <div data-fallback="nested" />,
+      })
+    )
+    const NestedLayoutRoute = getQualifiedRouteComponent(nestedLayoutNode)
+    const rootLayoutNode = createRouteNode('layout', '', './_layout.tsx', () => ({
+      default: () => <NestedLayoutRoute />,
+      SuspenseFallback: () => <div data-fallback="root" />,
+    }))
+    const RootLayoutRoute = getQualifiedRouteComponent(rootLayoutNode)
+
+    let renderer: TestRenderer.ReactTestRenderer
+    await act(async () => {
+      renderer = TestRenderer.create(<RootLayoutRoute />)
+    })
+
+    expect(renderer!.root.findAllByProps({ 'data-fallback': 'nested' })).toHaveLength(1)
+    expect(renderer!.root.findAllByProps({ 'data-fallback': 'root' })).toHaveLength(0)
+  })
+
+  it('ignores a SuspenseFallback exported from a leaf route', async () => {
+    const childNode = createRouteNode('spa', 'profile', './profile.tsx', () => ({
+      default: SuspendingRoute,
+      SuspenseFallback: () => <div data-fallback="leaf" />,
+    }))
+    const ChildRoute = getQualifiedRouteComponent(childNode)
+
+    let renderer: TestRenderer.ReactTestRenderer
+    await act(async () => {
+      renderer = TestRenderer.create(<ChildRoute />)
+    })
+
+    expect(renderer!.root.findAllByProps({ 'data-fallback': 'leaf' })).toHaveLength(0)
+    expect(renderer!.toJSON()).toBeNull()
+  })
+})