one 1.26.0 → 2.0.0-beta.33.1

package/src/router/useScreens.test.tsx

@@ -137,3 +137,75 @@ describe('route SuspenseFallback', () => {
     expect(renderer!.toJSON()).toBeNull()
   })
 })
+
+describe('ErrorBoundary route identity', () => {
+  it('preserves page state across a re-render when the route exports ErrorBoundary', async () => {
+    let mounts = 0
+    function Page() {
+      const [count, setCount] = React.useState(0)
+      React.useEffect(() => {
+        mounts += 1
+      }, [])
+      return (
+        <button data-count={count} onClick={() => setCount((value) => value + 1)}>
+          {count}
+        </button>
+      )
+    }
+    function ErrorBoundary() {
+      return <div data-error="1" />
+    }
+
+    const node = createRouteNode('spa', 'onboarding', './auth/onboarding.tsx', () => ({
+      default: Page,
+      ErrorBoundary,
+    }))
+    const Route = getQualifiedRouteComponent(node)
+
+    function Harness({ tick }: { tick: number }) {
+      return <Route tick={tick} />
+    }
+
+    let renderer: TestRenderer.ReactTestRenderer
+    await act(async () => {
+      renderer = TestRenderer.create(<Harness tick={0} />)
+    })
+
+    const button = renderer!.root.findByType('button')
+    expect(button.props['data-count']).toBe(0)
+    await act(async () => {
+      button.props.onClick()
+    })
+    expect(renderer!.root.findByType('button').props['data-count']).toBe(1)
+    expect(mounts).toBe(1)
+
+    await act(async () => {
+      renderer.update(<Harness tick={1} />)
+    })
+
+    expect(renderer!.root.findByType('button').props['data-count']).toBe(1)
+    expect(mounts).toBe(1)
+  })
+
+  it('still renders the exported ErrorBoundary when the page throws', async () => {
+    function Page(): React.ReactNode {
+      throw new Error('boom')
+    }
+    function ErrorBoundary({ error }: { error: Error; retry: () => Promise<void> }) {
+      return <div data-caught={error.message} />
+    }
+
+    const node = createRouteNode('spa', 'broken', './broken.tsx', () => ({
+      default: Page,
+      ErrorBoundary,
+    }))
+    const Route = getQualifiedRouteComponent(node)
+
+    let renderer: TestRenderer.ReactTestRenderer
+    await act(async () => {
+      renderer = TestRenderer.create(<Route />)
+    })
+
+    expect(renderer!.root.findByProps({ 'data-caught': 'boom' })).toBeTruthy()
+  })
+})

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,
@@ -350,26 +351,16 @@ export function useSortedScreens(
 }
 
 function fromImport({ ErrorBoundary, SuspenseFallback, ...component }: LoadedRoute) {
-  if (ErrorBoundary) {
-    return {
-      default: React.forwardRef((props: any, ref: any) => {
-        const children = React.createElement(getPageExport(component) || EmptyRoute, {
-          ...props,
-          ref,
-        })
-        return <Try catch={ErrorBoundary}>{children}</Try>
-      }),
-      SuspenseFallback,
-    }
-  }
+  // keep ErrorBoundary on the returned module and wrap it in JSX below.
+  // a new forwardRef here remounts the route on every ScreenComponent render.
   if (process.env.NODE_ENV !== 'production') {
     const exported = getPageExport(component)
     if (exported && typeof exported === 'object' && Object.keys(exported).length === 0) {
-      return { default: EmptyRoute, SuspenseFallback }
+      return { default: EmptyRoute, ErrorBoundary, SuspenseFallback }
     }
   }
 
-  return { default: getPageExport(component), SuspenseFallback }
+  return { default: getPageExport(component), ErrorBoundary, SuspenseFallback }
 }
 
 function RouteSuspenseFallback({
@@ -422,9 +413,9 @@ export function getQualifiedRouteComponent(value: RouteNode) {
       }, [])
     }
 
-    // native Fast Refresh: subscribe to the route-hot epoch (the routeHmr.native
-    // store bumps it when vxrn reports a route module update) so this component
-    // re-renders and re-runs loadRoute() to pick up the edited module's exports
+    // native Fast Refresh: subscribe to the route-hot epoch. route file patches
+    // are applied in place and do not bump it; a bump re-runs loadRoute() and
+    // remounts the screen.
     if (
       process.env.NODE_ENV === 'development' &&
       process.env.TAMAGUI_TARGET === 'native'
@@ -451,7 +442,8 @@ export function getQualifiedRouteComponent(value: RouteNode) {
     }
 
     const res = fromImport(value.loadRoute())
-    const Component = getPageExport(res) as React.ComponentType<any>
+    const Component = (res.default || EmptyRoute) as React.ComponentType<any>
+    const CatchBoundary = res.ErrorBoundary
     const LayoutSuspenseFallback =
       value.type === 'layout' ? res.SuspenseFallback : undefined
     const match =
@@ -491,9 +483,10 @@ export function getQualifiedRouteComponent(value: RouteNode) {
         />
       )
     } else {
+      const page = <Component {...props} {...slotProps} {...loaderDataProps} ref={ref} />
       rendered = (
         <RouteErrorBoundary routeName={value.route}>
-          <Component {...props} {...slotProps} {...loaderDataProps} ref={ref} />
+          {CatchBoundary ? <Try catch={CatchBoundary}>{page}</Try> : page}
         </RouteErrorBoundary>
       )
     }
@@ -638,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/useViteRoutes.tsx

@@ -227,17 +227,18 @@ export function globbedRoutesToRouteContext(
         })
       },
       clearFile: (file: string) => {
-        hmrVersion++
         const normalizedFile = file.replace(/\\/g, '/').replace(/^\//, '')
         const routeId = moduleKeys.find(
           (key) =>
             routePaths[key].replace(/\\/g, '/').replace(/^\//, '') === normalizedFile
         )
-        if (!routeId) return
+        if (!routeId) return false
 
+        hmrVersion++
         delete loadedRoutes[routeId]
         delete promises[routeId]
         delete preloadedModules[routePaths[routeId]]
+        return true
       },
       getVersion: () => hmrVersion,
     }

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>

package/src/router/web/__tests__/stackStateUtils.test.ts

@@ -27,7 +27,7 @@ function makeState(
     routes,
     type: 'stack',
     stale: false,
-    preloadedRoutes: [],
+    retainedRouteKeys: [],
   } as unknown as StackNavigationState<ParamListBase>
 }
 
@@ -131,6 +131,18 @@ describe('convertStackStateToNonOverlayState', () => {
     expect(out.routes).toHaveLength(0)
     expect(out.index).toBe(0)
   })
+
+  it('ignores preloaded routes after the focused index', () => {
+    const state = makeState(['home', 'sheet', 'preloaded'], 1)
+    const descriptors = makeDescriptors(['home', 'sheet', 'preloaded'], {
+      home: 'card',
+      sheet: 'formSheet',
+      preloaded: 'card',
+    })
+    const out = convertStackStateToNonOverlayState(state, descriptors)
+    expect(out.routes.map((route) => route.name)).toEqual(['home'])
+    expect(out.index).toBe(0)
+  })
 })
 
 describe('findLastNonOverlayIndex', () => {
@@ -150,4 +162,14 @@ describe('findLastNonOverlayIndex', () => {
     const descriptors = makeDescriptors(['sheet'], { sheet: 'formSheet' })
     expect(findLastNonOverlayIndex(state, descriptors)).toBe(-1)
   })
+
+  it('does not treat a preloaded card as focused', () => {
+    const state = makeState(['home', 'sheet', 'preloaded'], 1)
+    const descriptors = makeDescriptors(['home', 'sheet', 'preloaded'], {
+      home: 'card',
+      sheet: 'formSheet',
+      preloaded: 'card',
+    })
+    expect(findLastNonOverlayIndex(state, descriptors)).toBe(0)
+  })
 })

package/src/router/web/stackStateUtils.ts

@@ -35,7 +35,8 @@ export function isTransparentOverlay(
 
 /**
  * Returns the underlying navigation state for NativeStackView with the
- * trailing overlay suffix removed.
+ * trailing overlay suffix removed. Routes after `state.index` are preloaded
+ * routes in React Navigation 8, so they are not part of the visible stack.
  *
  * Important: we only strip the suffix of overlay routes at the top of the
  * stack. Overlay routes that are SANDWICHED between cards (e.g. user
@@ -79,7 +80,7 @@ export function findLastNonOverlayIndex(
     options: NativeStackNavigationOptions | undefined | null
   ) => boolean = isOverlayPresentation
 ): number {
-  for (let i = state.routes.length - 1; i >= 0; i--) {
+  for (let i = state.index; i >= 0; i--) {
     if (!isOverlay(descriptors[state.routes[i]!.key]?.options)) {
       return i
     }

package/src/ui/README.md

@@ -1,14 +1,14 @@
 # One Headless UI Components
 
-Headless UI components for the One framework.
+Web-only headless UI components for the One framework.
 
 ## Overview
 
-The headless tabs system provides complete control over tab navigation UI while maintaining full integration with One's file-based routing system. Unlike traditional tabs that use `@react-navigation/bottom-tabs` with opinionated styling, these components are completely unstyled.
+The headless tabs system provides complete control over browser tab navigation UI while maintaining full integration with One's file-based routing system. These components render DOM elements and are completely unstyled. Use `Tabs` from `one` for React Navigation 8 tabs on iOS and Android.
 
 ## Installation
 
-The UI components are available through the `one/ui` submodule:
+The web UI components are available through the `one/ui` submodule. Put a React Navigation `Tabs` layout in the route's `.native.tsx` sibling when the same route runs on native.
 
 ```tsx
 import { Tabs, TabList, TabTrigger, TabSlot } from 'one/ui'
@@ -100,22 +100,14 @@ function CustomTabBar() {
   const profile = useTabTrigger({ name: 'profile' })
 
   return (
-    <View style={styles.customBar}>
-      <Pressable {...home.triggerProps}>
-        <Text style={home.trigger?.isFocused && styles.active}>
-          Home
-        </Text>
-      </Pressable>
-      <Pressable {...profile.triggerProps}>
-        <Text style={profile.trigger?.isFocused && styles.active}>
-          Profile
-        </Text>
-      </Pressable>
-    </View>
+    <nav>
+      <button {...home.triggerProps}>Home</button>
+      <button {...profile.triggerProps}>Profile</button>
+    </nav>
   )
 }
 ```
 
 ## Example
 
-See `/examples/one-basic/app/tabs/` for a working example with custom-styled tabs.
+See `/examples/one-basic/app/tabs/` for a working example with custom web tabs and an RN8 native sibling.

package/src/ui/Slot.tsx

@@ -1,43 +1,9 @@
 import { Slot as RUISlot } from '@radix-ui/react-slot'
-import {
-  type Component,
-  type ForwardRefExoticComponent,
-  forwardRef,
-  type RefAttributes,
-  useMemo,
-} from 'react'
-import { StyleSheet, type ViewProps } from 'react-native'
-
-/**
- * RadixUI has special logic to handle the merging of `style` and `className` props.
- * On the web styles are not allowed so Radix does not handle this scenario.
- * This could be fixed upstream (PR open), but it may not as RN is not their target
- * platform.
- *
- * This shim calls `StyleSheet.flatten` on the styles before we render the <Slot />
- *
- * @see https://github.com/expo/expo/issues/31352
- * @see https://github.com/radix-ui/primitives/issues/3107
- * @param Component
- * @returns
- */
-function ShimSlotForReactNative(Component: typeof RUISlot): typeof RUISlot {
-  return forwardRef(function RNSlotHOC({ style, ...props }, ref) {
-    if (process.env.NODE_ENV !== 'production') {
-      if (Array.isArray(style)) {
-        throw new Error(
-          'Slot does not support array styles. Use StyleSheet.flatten() or an object style instead.'
-        )
-      }
-    }
-    style = useMemo(() => StyleSheet.flatten(style), [style])
-    return <Component ref={ref} {...props} style={style} />
-  })
-}
+import type { ForwardRefExoticComponent, HTMLAttributes, RefAttributes } from 'react'
 
 export interface Slot<
-  Props = ViewProps,
-  Ref = Component<ViewProps>,
+  Props = HTMLAttributes<HTMLElement>,
+  Ref = HTMLElement,
 > extends ForwardRefExoticComponent<Props & RefAttributes<Ref>> {}
 
-export const Slot: Slot = ShimSlotForReactNative(RUISlot) as Slot
+export const Slot = RUISlot as Slot

package/src/ui/TabContext.tsx

@@ -24,7 +24,6 @@ export type ExpoTabsNavigatorScreenOptions = {
 
 export type ExpoTabsNavigatorOptions = DefaultNavigatorOptions<
   ParamListBase,
-  string | undefined,
   TabNavigationState<ParamListBase>,
   ExpoTabsScreenOptions,
   TabNavigationEventMap,
@@ -37,20 +36,16 @@ export type ExpoTabsNavigatorOptions = DefaultNavigatorOptions<
 export type ExpoTabsNavigationProp<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = keyof ParamList,
-  NavigatorID extends string | undefined = undefined,
 > = NavigationProp<
   ParamList,
   RouteName,
-  NavigatorID,
   TabNavigationState<ParamListBase>,
   ExpoTabsScreenOptions,
   TabNavigationEventMap
 >
 
-export type ExpoTabsScreenOptions = Pick<
-  BottomTabNavigationOptions,
-  'title' | 'lazy' | 'freezeOnBlur'
-> & {
+export type ExpoTabsScreenOptions = Pick<BottomTabNavigationOptions, 'title' | 'lazy'> & {
+  freezeOnBlur?: boolean
   params?: object
   title: string
   action: NavigationAction

package/src/ui/TabList.tsx

@@ -1,10 +1,9 @@
-import type { ComponentProps, ReactElement } from 'react'
-import { StyleSheet, View, type ViewProps } from 'react-native'
+import type { ComponentProps, HTMLAttributes, ReactElement } from 'react'
 
-import { ViewSlot } from './common'
+import { Slot } from './Slot'
 
-export type TabListProps = ViewProps & {
-  /** Forward props to child component and removes the extra `<View>`. Useful for custom wrappers. */
+export type TabListProps = HTMLAttributes<HTMLElement> & {
+  /** Forward props to child component and removes the extra `<nav>`. Useful for custom wrappers. */
   asChild?: boolean
 }
 
@@ -21,9 +20,9 @@ export type TabListProps = ViewProps & {
  * </Tabs>
  * ```
  */
-export function TabList({ asChild, style, ...props }: TabListProps) {
-  const Comp = asChild ? ViewSlot : View
-  return <Comp style={[styles.tabList, style]} {...props} />
+export function TabList({ asChild, ...props }: TabListProps) {
+  const Comp = asChild ? Slot : 'nav'
+  return <Comp {...props} />
 }
 
 /**
@@ -34,14 +33,3 @@ export function isTabList(
 ): child is ReactElement<ComponentProps<typeof TabList>> {
   return child.type === TabList
 }
-
-const styles = StyleSheet.create({
-  tabList: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  tabTrigger: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-})

package/src/ui/TabSlot.tsx

@@ -1,18 +1,12 @@
-import { type ComponentProps, type ReactElement, useState } from 'react'
-import { Platform, StyleSheet } from 'react-native'
-import { Screen, ScreenContainer } from 'react-native-screens'
+import { Activity, Fragment, type ReactElement, useState } from 'react'
 import { useNavigatorContext } from '../views/Navigator'
 import { TabContext, type TabsDescriptor } from './TabContext'
 import type { TabListProps } from './TabList'
 
-export type TabSlotProps = ComponentProps<typeof ScreenContainer> & {
-  /**
-   * Remove inactive screens.
-   */
+export type TabSlotProps = {
+  /** Remove inactive screens from the visible DOM tree. */
   detachInactiveScreens?: boolean
-  /**
-   * Override how the `Screen` component is rendered.
-   */
+  /** Override how each screen is rendered. */
   renderFn?: typeof defaultTabsSlotRender
 }
 
@@ -51,8 +45,7 @@ export type TabsSlotRenderOptions = {
  * ```
  */
 export function useTabSlot({
-  detachInactiveScreens = ['android', 'ios', 'web'].includes(Platform.OS),
-  style,
+  detachInactiveScreens = true,
   renderFn = defaultTabsSlotRender,
 }: TabSlotProps = {}) {
   const { state, descriptorsRef } = useNavigatorContext()
@@ -65,11 +58,7 @@ export function useTabSlot({
   }
 
   return (
-    <ScreenContainer
-      enabled={detachInactiveScreens}
-      hasTwoStates
-      style={[styles.screenContainer, style]}
-    >
+    <Fragment>
       {state.routes.map((route, index) => {
         const descriptor = descriptors[route.key] as unknown as TabsDescriptor
 
@@ -84,7 +73,7 @@ export function useTabSlot({
           </TabContext.Provider>
         )
       })}
-    </ScreenContainer>
+    </Fragment>
   )
 }
 
@@ -114,28 +103,20 @@ export function defaultTabsSlotRender(
   descriptor: TabsDescriptor,
   { isFocused, loaded, detachInactiveScreens }: TabsSlotRenderOptions
 ) {
-  const { lazy = true, unmountOnBlur, freezeOnBlur } = descriptor.options
+  const { lazy = true, unmountOnBlur } = descriptor.options
 
-  if (unmountOnBlur && !isFocused) {
-    return null
-  }
+  if ((unmountOnBlur || detachInactiveScreens) && !isFocused) return null
+  if (lazy && !loaded && !isFocused) return null
 
-  if (lazy && !loaded && !isFocused) {
-    // Don't render a lazy screen if we've never navigated to it
-    return null
+  if (!isFocused) {
+    return (
+      <Activity key={descriptor.route.key} mode="hidden">
+        {descriptor.render()}
+      </Activity>
+    )
   }
 
-  return (
-    <Screen
-      key={descriptor.route.key}
-      enabled={detachInactiveScreens}
-      activityState={isFocused ? 2 : 0}
-      freezeOnBlur={freezeOnBlur}
-      style={[styles.screen, isFocused ? styles.focused : styles.unfocused]}
-    >
-      {descriptor.render()}
-    </Screen>
-  )
+  return <Fragment key={descriptor.route.key}>{descriptor.render()}</Fragment>
 }
 
 /**
@@ -144,27 +125,3 @@ export function defaultTabsSlotRender(
 export function isTabSlot(child: ReactElement<any>): child is ReactElement<TabListProps> {
   return child.type === TabSlot
 }
-
-const styles = StyleSheet.create({
-  screen: {
-    flex: 1,
-    position: 'relative',
-    height: '100%',
-  },
-  screenContainer: {
-    flexShrink: 0,
-    flexGrow: 1,
-  },
-  focused: {
-    zIndex: 1,
-    display: 'flex',
-    flexShrink: 0,
-    flexGrow: 1,
-  },
-  unfocused: {
-    zIndex: -1,
-    display: 'none',
-    flexShrink: 1,
-    flexGrow: 0,
-  },
-})