one 1.22.0 → 1.23.0

package/src/ui/Tabs.tsx

@@ -1,102 +1,20 @@
-import type { RouterFactory } from '@react-navigation/native'
-import {
-  type DefaultNavigatorOptions,
-  LinkingContext,
-  type ParamListBase,
-  type TabActionHelpers,
-  type TabNavigationState,
-  type TabRouterOptions,
-  useNavigationBuilder,
-} from '@react-navigation/native'
-import {
-  Children,
-  type ComponentProps,
-  Fragment,
-  isValidElement,
-  type PropsWithChildren,
-  type ReactElement,
-  type ReactNode,
-  use,
-  useMemo,
-  useRef,
-} from 'react'
-import { StyleSheet, View, type ViewProps } from 'react-native'
-import { useRouteInfo } from '../hooks'
-import { resolveHref } from '../link/href'
-import { useContextKey, useRouteNode } from '../router/Route'
-import { shouldLinkExternally } from '../utils/url'
-import { NavigatorContext } from '../views/Navigator'
-import { type ScreenTrigger, triggersToScreens, ViewSlot } from './common'
-import {
-  type ExpoTabsScreenOptions,
-  type TabNavigationEventMap,
-  type TabsContextValue,
-  TabTriggerMapContext,
-} from './TabContext'
-import { isTabList } from './TabList'
-import { ExpoTabRouter, type ExpoTabRouterOptions } from './TabRouter'
-import { isTabSlot } from './TabSlot'
-import { isTabTrigger } from './TabTrigger'
-import { useComponent } from './useComponent'
+import { isValidElement, type ReactNode } from 'react'
+import { StyleSheet, View } from 'react-native'
 
-type NavigatorContextValue = {
-  contextKey: string
-  state: ReturnType<typeof useNavigationBuilder>['state']
-  navigation: ReturnType<typeof useNavigationBuilder>['navigation']
-  descriptorsRef: React.MutableRefObject<
-    ReturnType<typeof useNavigationBuilder>['descriptors']
-  >
-  router: RouterFactory<any, any, any>
-}
+import { ViewSlot } from './common'
+import { useTabsWithChildren, type TabsProps } from './Tabs.shared'
 
 export * from './TabContext'
 export * from './TabList'
 export * from './TabSlot'
 export * from './TabTrigger'
+export * from './Tabs.shared'
 
-/**
- * Options to provide to the Tab Router.
- */
-export type UseTabsOptions = Omit<
-  DefaultNavigatorOptions<
-    ParamListBase,
-    any,
-    TabNavigationState<any>,
-    ExpoTabsScreenOptions,
-    TabNavigationEventMap,
-    any
-  >,
-  'children'
-> & {
-  backBehavior?: TabRouterOptions['backBehavior']
-}
-
-export type TabsProps = ViewProps & {
-  /** Forward props to child component and removes the extra `<View>`. Useful for custom wrappers. */
-  asChild?: boolean
-  options?: UseTabsOptions
-}
-
-/**
- * Root component for the headless tabs.
- *
- * @see [`useTabsWithChildren`](#usetabswithchildrenoptions) for a hook version of this component.
- * @example
- * ```tsx
- * <Tabs>
- *  <TabSlot />
- *  <TabList>
- *   <TabTrigger name="home" href="/" />
- *  </TabList>
- * </Tabs>
- * ```
- */
 export function Tabs(props: TabsProps) {
   const { children, asChild, options, ...rest } = props
   const Comp = asChild ? ViewSlot : View
 
   const { NavigationContent } = useTabsWithChildren({
-    // asChild adds an extra layer, so we need to process the child's children
     children:
       asChild &&
       isValidElement(children) &&
@@ -115,214 +33,6 @@ export function Tabs(props: TabsProps) {
   )
 }
 
-// @docsMissing
-export type UseTabsWithChildrenOptions = PropsWithChildren<UseTabsOptions>
-
-// @docsMissing
-export type UseTabsWithTriggersOptions = UseTabsOptions & {
-  triggers: ScreenTrigger[]
-}
-
-/**
- * Hook version of `Tabs`. The returned NavigationContent component
- * should be rendered. Using the hook requires using the `<TabList />`
- * and `<TabTrigger />` components exported from One.
- *
- * The `useTabsWithTriggers()` hook can be used for custom components.
- *
- * @see [`Tabs`](#tabs) for the component version of this hook.
- * @example
- * ```tsx
- * export function MyTabs({ children }) {
- *  const { NavigationContent } = useTabsWithChildren({ children })
- *
- *  return <NavigationContent />
- * }
- * ```
- */
-export function useTabsWithChildren(options: UseTabsWithChildrenOptions) {
-  const { children, ...rest } = options
-  return useTabsWithTriggers({
-    triggers: parseTriggersFromChildren(children),
-    ...rest,
-  })
-}
-
-/**
- * Alternative hook version of `Tabs` that uses explicit triggers
- * instead of `children`.
- *
- * @see [`Tabs`](#tabs) for the component version of this hook.
- * @example
- * ```tsx
- * export function MyTabs({ children }) {
- *   const { NavigationContent } = useTabsWithChildren({ triggers: [] })
- *
- *   return <NavigationContent />
- * }
- * ```
- */
-export function useTabsWithTriggers(
-  options: UseTabsWithTriggersOptions
-): TabsContextValue {
-  const { triggers, ...rest } = options
-  // Ensure we extend the parent triggers, so we can trigger them as well
-  const parentTriggerMap = use(TabTriggerMapContext)
-  const routeNode = useRouteNode()
-  const contextKey = useContextKey()
-  const linking = use(LinkingContext).options
-  const routeInfo = useRouteInfo()
-
-  if (!routeNode || !linking) {
-    throw new Error('No RouteNode. This is likely a bug in one router.')
-  }
-
-  const initialRouteName = routeNode.initialRouteName
-
-  const { children, triggerMap } = triggersToScreens(
-    triggers,
-    routeNode,
-    linking,
-    initialRouteName,
-    parentTriggerMap,
-    routeInfo,
-    contextKey
-  )
-
-  const navigatorContext = useNavigationBuilder<
-    TabNavigationState<any>,
-    ExpoTabRouterOptions,
-    TabActionHelpers<ParamListBase>,
-    ExpoTabsScreenOptions,
-    TabNavigationEventMap
-  >(ExpoTabRouter, {
-    children,
-    ...rest,
-    triggerMap,
-    id: contextKey,
-    initialRouteName,
-  })
-
-  const {
-    state,
-    descriptors,
-    navigation,
-    describe,
-    NavigationContent: RNNavigationContent,
-  } = navigatorContext
-
-  // HYDRATION FIX: Use ref for descriptors to avoid context invalidation during hydration.
-  const descriptorsRef = useRef(descriptors)
-  descriptorsRef.current = descriptors
-
-  const navigatorContextValue = useMemo(
-    () => ({
-      state,
-      navigation,
-      contextKey,
-      router: ExpoTabRouter,
-      descriptorsRef,
-    }),
-    [state, navigation, contextKey, ExpoTabRouter]
-  ) as unknown as NavigatorContextValue
-
-  const NavigationContent = useComponent((children: React.ReactNode) => (
-    <TabTriggerMapContext.Provider value={triggerMap}>
-      <NavigatorContext.Provider value={navigatorContextValue}>
-        <RNNavigationContent>{children}</RNNavigationContent>
-      </NavigatorContext.Provider>
-    </TabTriggerMapContext.Provider>
-  )) as TabsContextValue['NavigationContent']
-
-  return { state, descriptors, navigation, NavigationContent, describe }
-}
-
-function parseTriggersFromChildren(
-  children: ReactNode,
-  screenTriggers: ScreenTrigger[] = [],
-  isInTabList = false
-) {
-  Children.forEach(children, (child) => {
-    if (!child || !isValidElement(child) || isTabSlot(child)) {
-      return
-    }
-
-    if (isFragment(child) && typeof child.props.children !== 'function') {
-      return parseTriggersFromChildren(
-        child.props.children,
-        screenTriggers,
-        isInTabList || isTabList(child)
-      )
-    }
-
-    if (isTabList(child) && typeof child.props.children !== 'function') {
-      let children = child.props.children
-
-      // <TabList asChild /> adds an extra layer. We need to parse the child's children
-      if (
-        child.props.asChild &&
-        isValidElement(children) &&
-        children.props &&
-        typeof children.props === 'object' &&
-        'children' in children.props
-      ) {
-        children = children.props.children as ReactNode
-      }
-
-      return parseTriggersFromChildren(
-        children,
-        screenTriggers,
-        isInTabList || isTabList(child)
-      )
-    }
-
-    // We should only process TabTriggers within the TabList. All other components will be ignored
-    if (!isInTabList || !isTabTrigger(child)) {
-      return
-    }
-
-    const { href, name } = child.props
-
-    if (!href) {
-      if (process.env.NODE_ENV === 'development') {
-        console.warn(
-          `<TabTrigger name={${name}}> does not have a 'href' prop. TabTriggers within a <TabList /> are required to have an href.`
-        )
-      }
-      return
-    }
-
-    const resolvedHref = resolveHref(href)
-
-    if (shouldLinkExternally(resolvedHref)) {
-      return screenTriggers.push({
-        type: 'external',
-        name,
-        href: resolvedHref,
-      })
-    }
-
-    if (!name) {
-      if (process.env.NODE_ENV === 'development') {
-        console.warn(
-          `<TabTrigger> does not have a 'name' prop. TabTriggers within a <TabList /> are required to have a name.`
-        )
-      }
-      return
-    }
-
-    return screenTriggers.push({ type: 'internal', href: resolvedHref, name })
-  })
-
-  return screenTriggers
-}
-
-function isFragment(
-  child: ReactElement<any>
-): child is ReactElement<ComponentProps<typeof Fragment>> {
-  return child.type === Fragment
-}
-
 const styles = StyleSheet.create({
   tabsRoot: {
     flex: 1,

package/src/ui/Tabs.web.tsx

@@ -0,0 +1,40 @@
+import { isValidElement, type HTMLAttributes, type ReactNode } from 'react'
+
+// runtime specifier must stay extensionless: the web build emits Slot.web.tsx as Slot.mjs
+import { Slot as SlotImpl } from './Slot'
+import type { Slot as WebSlot } from './Slot.web'
+
+const Slot = SlotImpl as unknown as WebSlot
+import { useTabsWithChildren, type TabsProps as SharedTabsProps } from './Tabs.shared'
+
+export * from './TabContext'
+export * from './TabList'
+export * from './TabSlot'
+export * from './TabTrigger'
+export * from './Tabs.shared'
+
+export type TabsProps = HTMLAttributes<HTMLDivElement> &
+  Pick<SharedTabsProps, 'asChild' | 'options'>
+
+export function Tabs(props: TabsProps) {
+  const { children, asChild, options, ...rest } = props
+  const Comp = asChild ? Slot : 'div'
+
+  const { NavigationContent } = useTabsWithChildren({
+    children:
+      asChild &&
+      isValidElement(children) &&
+      children.props &&
+      typeof children.props === 'object' &&
+      'children' in children.props
+        ? (children.props.children as ReactNode)
+        : children,
+    ...options,
+  })
+
+  return (
+    <Comp {...rest}>
+      <NavigationContent>{children}</NavigationContent>
+    </Comp>
+  )
+}

package/src/ui/useTabTrigger.ts

@@ -0,0 +1,182 @@
+import type { TabNavigationState } from '@react-navigation/native'
+import {
+  use,
+  useCallback,
+  type MouseEvent as ReactMouseEvent,
+  type ReactNode,
+  type RefAttributes,
+} from 'react'
+import type { GestureResponderEvent, PressableProps, View } from 'react-native'
+
+import { appendBaseUrl } from '../fork/getPathFromState-mods'
+import type { OneRouter } from '../interfaces/router'
+import { router } from '../router/imperative-api'
+import { stripGroupSegmentsFromPath } from '../router/matchers'
+import { useNavigatorContext } from '../views/Navigator'
+import type { TriggerMap } from './common'
+import { TabTriggerMapContext } from './TabContext'
+
+type PressablePropsWithoutFunctionChildren = Omit<PressableProps, 'children'> & {
+  children?: ReactNode | undefined
+}
+
+export type TabTriggerProps = PressablePropsWithoutFunctionChildren & {
+  /** Name of the tab. */
+  name: string
+  /** Link used when defining the trigger within a `TabList`. */
+  href?: OneRouter.Href
+  /** Forward props to the child component. */
+  asChild?: boolean
+  /** Reset the route when switching to the tab. */
+  resetOnFocus?: boolean
+}
+
+export type TabTriggerOptions = {
+  name: string
+  href: OneRouter.Href
+}
+
+export type TabTriggerSlotProps = PressablePropsWithoutFunctionChildren &
+  RefAttributes<View> & {
+    isFocused?: boolean
+    href?: string
+  }
+
+export type SwitchToOptions = {
+  resetOnFocus?: boolean
+}
+
+export type Trigger = TriggerMap[string] & {
+  isFocused: boolean
+  resolvedHref: string
+  route: TabNavigationState<any>['routes'][number]
+}
+
+export type UseTabTriggerResult = {
+  switchTab: (name: string, options: SwitchToOptions) => void
+  getTrigger: (name: string) => Trigger | undefined
+  trigger?: Trigger
+  triggerProps: TriggerProps
+}
+
+export type TriggerProps = {
+  isFocused: boolean
+  onPress: PressableProps['onPress']
+  onLongPress: PressableProps['onLongPress']
+}
+
+export function shouldHandleMouseEvent(
+  event?: ReactMouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
+): boolean {
+  if (!event) return true
+
+  if ('button' in event) {
+    return (
+      !event.metaKey &&
+      !event.altKey &&
+      !event.ctrlKey &&
+      !event.shiftKey &&
+      (event.button == null || event.button === 0) &&
+      [undefined, null, '', 'self'].includes((event.currentTarget as any).target)
+    )
+  }
+
+  return true
+}
+
+export function useTabTrigger(options: TabTriggerProps): UseTabTriggerResult {
+  const { state, navigation } = useNavigatorContext()
+  const { name, resetOnFocus, onPress, onLongPress } = options
+  const triggerMap = use(TabTriggerMapContext)
+
+  const getTrigger = useCallback(
+    (name: string) => {
+      const config = triggerMap[name]
+
+      if (!config) return
+
+      return {
+        isFocused: state.index === config.index,
+        route: state.routes[config.index],
+        resolvedHref: stripGroupSegmentsFromPath(appendBaseUrl(config.href)),
+        ...config,
+      }
+    },
+    [triggerMap, state]
+  )
+
+  const trigger = name !== undefined ? getTrigger(name) : undefined
+
+  const switchTab = useCallback(
+    (name: string, options?: SwitchToOptions) => {
+      const config = triggerMap[name]
+
+      if (config) {
+        if (config.type === 'external') {
+          return router.navigate(config.href)
+        }
+
+        return navigation?.dispatch({
+          ...config.action,
+          type: 'JUMP_TO',
+          payload: {
+            ...config.action.payload,
+            ...options,
+          },
+        })
+      }
+
+      return navigation?.dispatch({
+        type: 'JUMP_TO',
+        payload: { name },
+      })
+    },
+    [navigation, triggerMap]
+  )
+
+  const handleOnPress = useCallback<NonNullable<PressableProps['onPress']>>(
+    (event) => {
+      onPress?.(event)
+      if (!trigger || event?.isDefaultPrevented()) return
+
+      navigation?.emit({
+        type: 'tabPress',
+        target: trigger.type === 'internal' ? trigger.route.key : trigger.href,
+        canPreventDefault: true,
+      })
+
+      if (!shouldHandleMouseEvent(event) || trigger.isFocused) return
+
+      switchTab(name, { resetOnFocus })
+    },
+    [onPress, name, resetOnFocus, trigger, navigation, switchTab]
+  )
+
+  const handleOnLongPress = useCallback<NonNullable<PressableProps['onLongPress']>>(
+    (event) => {
+      onLongPress?.(event)
+      if (!trigger || event?.isDefaultPrevented()) return
+
+      navigation?.emit({
+        type: 'tabLongPress',
+        target: trigger.type === 'internal' ? trigger.route.key : trigger.href,
+      })
+
+      if (!shouldHandleMouseEvent(event)) return
+
+      switchTab(name, { resetOnFocus })
+    },
+    [onLongPress, name, resetOnFocus, trigger, navigation, switchTab]
+  )
+
+  return {
+    switchTab,
+    getTrigger,
+    trigger,
+    triggerProps: {
+      isFocused: Boolean(trigger?.isFocused),
+      onPress: handleOnPress,
+      onLongPress: handleOnLongPress,
+    },
+  }
+}

package/src/useBlocker.ts

@@ -1,5 +1,4 @@
 import * as React from 'react'
-import { Platform } from 'react-native'
 
 export type BlockerState = 'unblocked' | 'blocked' | 'proceeding'
 
@@ -214,7 +213,7 @@ export function useBlocker(shouldBlock: BlockerFunction | boolean): Blocker {
 
   React.useEffect(() => {
     // Only run on web
-    if (Platform.OS !== 'web' || typeof window === 'undefined') return
+    if (process.env.TAMAGUI_TARGET !== 'web' || typeof window === 'undefined') return
 
     setupListeners()
 
@@ -315,7 +314,7 @@ export function checkBlocker(
   nextLocation: string,
   historyAction: 'push' | 'pop' | 'replace' = 'push'
 ): boolean {
-  if (Platform.OS !== 'web' || typeof window === 'undefined') {
+  if (process.env.TAMAGUI_TARGET !== 'web' || typeof window === 'undefined') {
     return false
   }
 

package/src/utils/platform.ts

@@ -0,0 +1,7 @@
+import { Platform } from 'react-native'
+
+/**
+ * Current platform. On web this resolves to the `.web` sibling, which is a
+ * plain constant, so nothing in the web graph imports react-native for it.
+ */
+export const PLATFORM = Platform.OS

package/src/utils/platform.web.ts

@@ -0,0 +1 @@
+export const PLATFORM = 'web'

package/src/utils/routeIndex.test.ts

@@ -0,0 +1,55 @@
+import { mkdtempSync, mkdirSync, rmSync, writeFileSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { dirname, join } from 'node:path'
+import { afterEach, describe, expect, it } from 'vitest'
+import { createRouteIndex } from './routeIndex'
+
+let testDir: string | undefined
+
+function writeRoute(relativePath: string) {
+  testDir ||= mkdtempSync(join(tmpdir(), 'one-route-index-'))
+  const filePath = join(testDir, 'app', relativePath)
+  mkdirSync(dirname(filePath), { recursive: true })
+  writeFileSync(filePath, 'export default function Route() { return null }')
+  return filePath
+}
+
+afterEach(() => {
+  if (testDir) {
+    rmSync(testDir, { recursive: true, force: true })
+    testDir = undefined
+  }
+})
+
+describe(createRouteIndex, () => {
+  it('scans and filters the route tree once', () => {
+    writeRoute('index.tsx')
+    writeRoute('nested/page.ts')
+    writeRoute('nested/page.test.tsx')
+    writeRoute('routes.d.ts')
+
+    const routeIndex = createRouteIndex({
+      routerRoot: join(testDir!, 'app'),
+      ignoredRouteFiles: ['**/*.test.*'],
+    })
+
+    expect(routeIndex.getPaths()).toEqual(['./index.tsx', './nested/page.ts'])
+  })
+
+  it('updates route membership from watcher events', () => {
+    writeRoute('index.tsx')
+    const routeIndex = createRouteIndex({
+      routerRoot: join(testDir!, 'app'),
+      ignoredRouteFiles: ['**/*.test.*'],
+    })
+    const addedRoute = writeRoute('nested/new.tsx')
+    const ignoredRoute = writeRoute('nested/new.test.tsx')
+
+    expect(routeIndex.update('add', addedRoute)).toBe(true)
+    expect(routeIndex.update('add', ignoredRoute)).toBe(false)
+    expect(routeIndex.getPaths()).toEqual(['./index.tsx', './nested/new.tsx'])
+
+    expect(routeIndex.update('unlink', addedRoute)).toBe(true)
+    expect(routeIndex.getPaths()).toEqual(['./index.tsx'])
+  })
+})

package/src/utils/routeIndex.ts

@@ -0,0 +1,59 @@
+import micromatch from 'micromatch'
+import path from 'node:path'
+import { globDir } from './globDir'
+import { isPathInsideDirectory, isRouteFilePath } from './routeFileWatch'
+
+export function getRoutePaths(
+  routerRoot: string,
+  ignoredRouteFiles?: string[]
+): string[] {
+  const routePaths = globDir(routerRoot).filter(
+    (routePath) => !routePath.endsWith('.d.ts')
+  )
+  if (!ignoredRouteFiles?.length) return routePaths
+  return micromatch.not(routePaths, ignoredRouteFiles, { matchBase: true }) as string[]
+}
+
+export function createRouteIndex({
+  routerRoot,
+  ignoredRouteFiles,
+}: {
+  routerRoot: string
+  ignoredRouteFiles?: string[]
+}) {
+  const absoluteRouterRoot = path.resolve(routerRoot)
+  const routePaths = new Set(getRoutePaths(absoluteRouterRoot, ignoredRouteFiles))
+
+  return {
+    getPaths() {
+      return [...routePaths].sort()
+    },
+
+    update(event: string, filePath: string) {
+      if (event !== 'add' && event !== 'delete' && event !== 'unlink') return false
+      if (!isPathInsideDirectory(filePath, absoluteRouterRoot)) return false
+      if (!isRouteFilePath(filePath)) return false
+
+      const relativePath = path
+        .relative(absoluteRouterRoot, path.resolve(filePath))
+        .replaceAll('\\', '/')
+      const routePath = `./${relativePath}`
+      if (
+        ignoredRouteFiles?.length &&
+        micromatch.isMatch(routePath, ignoredRouteFiles, { matchBase: true })
+      ) {
+        return false
+      }
+
+      if (event === 'add') {
+        const size = routePaths.size
+        routePaths.add(routePath)
+        return routePaths.size !== size
+      }
+
+      return routePaths.delete(routePath)
+    },
+  }
+}
+
+export type RouteIndex = ReturnType<typeof createRouteIndex>