one 1.21.13 → 1.23.0

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/useLoader.ts

@@ -54,8 +54,12 @@ const recordLoaderTiming =
         if (loaderTimingHistory.length > MAX_TIMING_HISTORY) {
           loaderTimingHistory.pop()
         }
-        // Dispatch event for devtools (web only - CustomEvent doesn't exist on native)
-        if (typeof window !== 'undefined' && typeof CustomEvent !== 'undefined') {
+        // dispatch event for web devtools only
+        if (
+          process.env.TAMAGUI_TARGET !== 'native' &&
+          typeof window !== 'undefined' &&
+          typeof CustomEvent !== 'undefined'
+        ) {
           window.dispatchEvent(new CustomEvent('one-loader-timing', { detail: entry }))
 
           // Also dispatch error event if there was an error

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>

package/src/utils/style.ts

@@ -1,4 +1,25 @@
-import type { TextStyle } from 'react-native'
+import type { StyleProp, TextStyle } from 'react-native'
+
+/**
+ * Merge a style prop into a single object. Replaces `StyleSheet.flatten` so the
+ * web graph doesn't import react-native just to read a style value.
+ */
+export function flattenStyle<T extends object>(style: StyleProp<T>): T | undefined {
+  if (!style) {
+    return undefined
+  }
+  if (!Array.isArray(style)) {
+    return style as T
+  }
+  let result: T | undefined
+  for (const item of style) {
+    const flat = flattenStyle(item as StyleProp<T>)
+    if (flat) {
+      result = { ...(result as object), ...(flat as object) } as T
+    }
+  }
+  return result
+}
 
 /**
  * Convert numeric font weights to string format for React Navigation compatibility.

package/src/views/LoadProgressBar.web.tsx

@@ -0,0 +1,135 @@
+import * as React from 'react'
+import type { ViewProps } from 'react-native'
+import { router } from '../router/imperative-api'
+
+export type LoadProgressBarProps = {
+  /** How long after a navigation to wait before showing the progress bar (in ms) */
+  startDelay?: number
+  /** How long after a navigation completes to wait before hiding the progress bar (in ms) */
+  finishDelay?: number
+  /** The starting percent it should show the loading state at */
+  initialPercent?: number
+  /** How often the progress bar should update (in ms) */
+  updateInterval?: number
+  /** How often to skip an update (checked each during the loop) */
+  sporadicness?: number
+  /** Pass style to the inner View */
+  style?: ViewProps['style']
+  /** Pass onLayout to the inner View */
+  onLayout?: ViewProps['onLayout']
+  /** Pass children to the inner View */
+  children?: ViewProps['children']
+}
+
+export const LoadProgressBar = ({
+  startDelay = 500,
+  finishDelay = 50,
+  initialPercent = 20,
+  updateInterval = 300,
+  sporadicness = 3,
+  style,
+  onLayout,
+  ...props
+}: LoadProgressBarProps) => {
+  const [loaded, setLoaded] = React.useState(0)
+  const [width, setWidth] = React.useState(0)
+  const elementRef = React.useRef<HTMLDivElement>(null)
+
+  React.useEffect(() => {
+    let loadInterval: ReturnType<typeof setTimeout>
+
+    const dispose = router.onLoadState((state) => {
+      clearTimeout(loadInterval)
+
+      switch (state) {
+        case 'loading': {
+          loadInterval = setTimeout(() => {
+            setLoaded(initialPercent)
+            let intervalCount = 0
+
+            loadInterval = setInterval(() => {
+              intervalCount++
+              if (intervalCount % sporadicness === 0) {
+                return
+              }
+
+              setLoaded((previous) => {
+                const increment =
+                  (100 - previous) * (previous > 80 ? 0.05 : 0.1) * Math.random()
+                return Math.min(previous + increment, 100)
+              })
+            }, updateInterval)
+          }, startDelay)
+          break
+        }
+        case 'loaded': {
+          setLoaded(100)
+          clearInterval(loadInterval)
+          setTimeout(() => {
+            setLoaded(0)
+          }, finishDelay)
+          break
+        }
+      }
+    })
+
+    return () => {
+      dispose()
+      clearInterval(loadInterval)
+    }
+  }, [finishDelay, initialPercent, sporadicness, startDelay, updateInterval])
+
+  React.useEffect(() => {
+    const element = elementRef.current
+    if (!element) return
+
+    const updateLayout = () => {
+      const rect = element.getBoundingClientRect()
+      setWidth(rect.width)
+      onLayout?.({
+        nativeEvent: {
+          layout: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+        },
+      } as Parameters<NonNullable<ViewProps['onLayout']>>[0])
+    }
+
+    updateLayout()
+    const observer = new ResizeObserver(updateLayout)
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [onLayout])
+
+  const flattenedStyle = React.useMemo<React.CSSProperties>(() => {
+    const styleValue: unknown = style
+    const styleValues: unknown[] = Array.isArray(styleValue)
+      ? styleValue.flat(Number.POSITIVE_INFINITY)
+      : [styleValue]
+    return styleValues.reduce<React.CSSProperties>(
+      (result, value) =>
+        value && typeof value === 'object'
+          ? Object.assign(result, value as React.CSSProperties)
+          : result,
+      {}
+    )
+  }, [style])
+
+  return (
+    <div
+      {...(props as React.HTMLAttributes<HTMLDivElement>)}
+      ref={elementRef}
+      style={{
+        display: loaded === 0 ? 'none' : 'flex',
+        height: 1,
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        backgroundColor: 'rgba(60, 100, 200, 0.65)',
+        width: '100%',
+        transform: `translateX(${-(1 - loaded * 0.01) * width}px)`,
+        zIndex: Number.MAX_SAFE_INTEGER,
+        ...flattenedStyle,
+      }}
+    />
+  )
+}

package/src/views/Protected.tsx

@@ -1,10 +1,11 @@
 import { createNavigatorFactory } from '@react-navigation/core'
 import {
   type FunctionComponent,
+  isValidElement,
   type ReactElement,
   type ReactNode,
-  isValidElement,
 } from 'react'
+import { NAVIGATOR_CONFIG } from '../headless/children'
 import type { OneRouter } from '../interfaces/router'
 
 // Get Group component directly from react-navigation core
@@ -46,6 +47,8 @@ export type ProtectedProps = {
  */
 export const Protected = Group as FunctionComponent<ProtectedProps>
 
+Object.assign(Protected, { [NAVIGATOR_CONFIG]: true })
+
 // Export Group for use in isProtectedElement check
 export { Group }