one 1.22.0 → 1.23.0

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 }
 

package/src/views/RootErrorBoundary.tsx

@@ -1,7 +1,5 @@
 import React from 'react'
-import { Platform, Text, View } from 'react-native'
-import { checkSkewAndReload } from '../skewProtection'
-import { handleSkewError, isChunkLoadError } from '../utils/dynamicImport'
+import { Text, View } from 'react-native'
 
 type RootErrorBoundaryState = {
   hasError: boolean
@@ -29,40 +27,6 @@ export class RootErrorBoundary extends React.Component<
     console.error(
       `[One] Root error boundary caught error:\n${printError(error)}\n${info.componentStack}`
     )
-
-    // skew protection: chunk-load errors are unambiguous → reload immediately.
-    // for any other render error, do a one-shot version check and only reload
-    // if the deployed build actually changed. genuine bugs fall through to the
-    // fallback UI below.
-    if (
-      process.env.TAMAGUI_TARGET !== 'native' &&
-      process.env.NODE_ENV === 'production' &&
-      process.env.ONE_SKEW_PROTECTION !== 'false'
-    ) {
-      if (isChunkLoadError(error)) {
-        handleSkewError()
-      } else {
-        checkSkewAndReload()
-      }
-    }
-
-    // Dispatch error event for devtools (web only - CustomEvent doesn't exist on native)
-    if (typeof window !== 'undefined' && typeof CustomEvent !== 'undefined') {
-      window.dispatchEvent(
-        new CustomEvent('one-error', {
-          detail: {
-            error: {
-              message: error.message,
-              stack: error.stack,
-              name: error.name,
-            },
-            componentStack: info.componentStack,
-            timestamp: Date.now(),
-            type: 'render',
-          },
-        })
-      )
-    }
   }
 
   handleRetry = () => {
@@ -71,128 +35,8 @@ export class RootErrorBoundary extends React.Component<
 
   render() {
     if (this.state.hasError) {
-      const { error, componentStack } = this.state
-      const isDev = process.env.NODE_ENV === 'development'
-
-      // Web fallback UI
-      if (Platform.OS === 'web') {
-        return (
-          <div
-            style={{
-              minHeight: '100vh',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              backgroundColor: '#0a0a0f',
-              fontFamily:
-                '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
-              color: '#e8e8e8',
-              padding: 24,
-            }}
-          >
-            <div
-              style={{
-                maxWidth: 500,
-                width: '100%',
-                textAlign: 'center',
-              }}
-            >
-              <div
-                style={{
-                  width: 64,
-                  height: 64,
-                  backgroundColor: '#ef4444',
-                  borderRadius: '50%',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  margin: '0 auto 24px',
-                }}
-              >
-                <svg
-                  width="32"
-                  height="32"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="white"
-                  strokeWidth="2"
-                >
-                  <circle cx="12" cy="12" r="10" />
-                  <line x1="12" y1="8" x2="12" y2="12" />
-                  <line x1="12" y1="16" x2="12.01" y2="16" />
-                </svg>
-              </div>
-              <h1
-                style={{
-                  fontSize: 24,
-                  fontWeight: 600,
-                  marginBottom: 8,
-                }}
-              >
-                Something went wrong
-              </h1>
-              <p
-                style={{
-                  fontSize: 14,
-                  color: '#888',
-                  marginBottom: 24,
-                }}
-              >
-                {error?.message || 'An unexpected error occurred'}
-              </p>
-              <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
-                <button
-                  onClick={this.handleRetry}
-                  style={{
-                    padding: '12px 24px',
-                    backgroundColor: '#3b82f6',
-                    color: 'white',
-                    border: 'none',
-                    borderRadius: 8,
-                    fontSize: 14,
-                    fontWeight: 500,
-                    cursor: 'pointer',
-                  }}
-                >
-                  Try Again
-                </button>
-                <button
-                  onClick={() => {
-                    if (typeof window !== 'undefined') {
-                      window.location.href = '/'
-                    }
-                  }}
-                  style={{
-                    padding: '12px 24px',
-                    backgroundColor: 'transparent',
-                    color: '#888',
-                    border: '1px solid #3a3a5a',
-                    borderRadius: 8,
-                    fontSize: 14,
-                    fontWeight: 500,
-                    cursor: 'pointer',
-                  }}
-                >
-                  Go Home
-                </button>
-              </div>
-              {isDev && (
-                <p
-                  style={{
-                    fontSize: 11,
-                    color: '#666',
-                    marginTop: 24,
-                  }}
-                >
-                  Press Alt+E to view error details
-                </p>
-              )}
-            </div>
-          </div>
-        )
-      }
+      const { error } = this.state
 
-      // Native fallback UI
       return (
         <View
           style={{

package/src/views/RootErrorBoundary.web.tsx

@@ -0,0 +1,163 @@
+import React from 'react'
+import { checkSkewAndReload } from '../skewProtection'
+import { handleSkewError, isChunkLoadError } from '../utils/dynamicImport'
+
+type RootErrorBoundaryState = {
+  hasError: boolean
+  error: Error | null
+  componentStack: string | null
+}
+
+export class RootErrorBoundary extends React.Component<
+  { children: React.ReactNode },
+  RootErrorBoundaryState
+> {
+  state: RootErrorBoundaryState = {
+    hasError: false,
+    error: null,
+    componentStack: null,
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error }
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    this.setState({ componentStack: info.componentStack || null })
+
+    console.error(
+      `[One] Root error boundary caught error:\n${printError(error)}\n${info.componentStack}`
+    )
+
+    if (
+      process.env.NODE_ENV === 'production' &&
+      process.env.ONE_SKEW_PROTECTION !== 'false'
+    ) {
+      if (isChunkLoadError(error)) {
+        handleSkewError()
+      } else {
+        checkSkewAndReload()
+      }
+    }
+
+    window.dispatchEvent(
+      new CustomEvent('one-error', {
+        detail: {
+          error: {
+            message: error.message,
+            stack: error.stack,
+            name: error.name,
+          },
+          componentStack: info.componentStack,
+          timestamp: Date.now(),
+          type: 'render',
+        },
+      })
+    )
+  }
+
+  handleRetry = () => {
+    this.setState({ hasError: false, error: null, componentStack: null })
+  }
+
+  render() {
+    if (!this.state.hasError) {
+      return this.props.children
+    }
+
+    const { error } = this.state
+
+    return (
+      <div
+        style={{
+          minHeight: '100vh',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#0a0a0f',
+          fontFamily:
+            '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+          color: '#e8e8e8',
+          padding: 24,
+        }}
+      >
+        <div style={{ maxWidth: 500, width: '100%', textAlign: 'center' }}>
+          <div
+            style={{
+              width: 64,
+              height: 64,
+              backgroundColor: '#ef4444',
+              borderRadius: '50%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              margin: '0 auto 24px',
+            }}
+          >
+            <svg
+              width="32"
+              height="32"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="white"
+              strokeWidth="2"
+            >
+              <circle cx="12" cy="12" r="10" />
+              <line x1="12" y1="8" x2="12" y2="12" />
+              <line x1="12" y1="16" x2="12.01" y2="16" />
+            </svg>
+          </div>
+          <h1 style={{ fontSize: 24, fontWeight: 600, marginBottom: 8 }}>
+            Something went wrong
+          </h1>
+          <p style={{ fontSize: 14, color: '#888', marginBottom: 24 }}>
+            {error?.message || 'An unexpected error occurred'}
+          </p>
+          <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
+            <button
+              onClick={this.handleRetry}
+              style={{
+                padding: '12px 24px',
+                backgroundColor: '#3b82f6',
+                color: 'white',
+                border: 'none',
+                borderRadius: 8,
+                fontSize: 14,
+                fontWeight: 500,
+                cursor: 'pointer',
+              }}
+            >
+              Try Again
+            </button>
+            <button
+              onClick={() => {
+                window.location.href = '/'
+              }}
+              style={{
+                padding: '12px 24px',
+                backgroundColor: 'transparent',
+                color: '#888',
+                border: '1px solid #3a3a5a',
+                borderRadius: 8,
+                fontSize: 14,
+                fontWeight: 500,
+                cursor: 'pointer',
+              }}
+            >
+              Go Home
+            </button>
+          </div>
+          {process.env.NODE_ENV === 'development' && (
+            <p style={{ fontSize: 11, color: '#666', marginTop: 24 }}>
+              Press Alt+E to view error details
+            </p>
+          )}
+        </div>
+      </div>
+    )
+  }
+}
+
+function printError(err: unknown): string {
+  return err instanceof Error ? `${err.message}\n${err.stack}` : String(err)
+}

package/src/views/RouteErrorView.tsx

@@ -0,0 +1,66 @@
+import type { ErrorInfo } from 'react'
+import { SafeAreaView, ScrollView, Text, TouchableOpacity, View } from 'react-native'
+
+export type RouteErrorViewProps = {
+  routeName: string
+  error: unknown
+  errorInfo: ErrorInfo | null
+  onRetry: () => void
+}
+
+export function RouteErrorView({
+  routeName,
+  error,
+  errorInfo,
+  onRetry,
+}: RouteErrorViewProps) {
+  return (
+    <SafeAreaView style={{ backgroundColor: '#000' }}>
+      <View style={{ margin: 16, gap: 16 }}>
+        <Text
+          style={{
+            alignSelf: 'flex-start',
+            padding: 5,
+            margin: -5,
+            backgroundColor: 'red',
+            color: 'white',
+            fontSize: 20,
+            fontFamily: 'monospace',
+          }}
+        >
+          Error on route "{routeName}"
+        </Text>
+        <Text style={{ color: 'white', fontSize: 16, fontFamily: 'monospace' }}>
+          {error instanceof Error ? error.message : String(error)}
+        </Text>
+        <TouchableOpacity onPress={onRetry}>
+          <Text
+            style={{
+              alignSelf: 'flex-start',
+              margin: -6,
+              padding: 6,
+              backgroundColor: 'white',
+              color: 'black',
+              fontSize: 14,
+              fontFamily: 'monospace',
+            }}
+          >
+            Retry
+          </Text>
+        </TouchableOpacity>
+        <ScrollView contentContainerStyle={{ gap: 12 }}>
+          {error instanceof Error ? (
+            <Text style={{ color: 'white', fontSize: 12, fontFamily: 'monospace' }}>
+              {error.stack}
+            </Text>
+          ) : null}
+          {errorInfo?.componentStack ? (
+            <Text style={{ color: 'white', fontSize: 12, fontFamily: 'monospace' }}>
+              Component Stack: {errorInfo.componentStack}
+            </Text>
+          ) : null}
+        </ScrollView>
+      </View>
+    </SafeAreaView>
+  )
+}

package/src/views/RouteErrorView.web.tsx

@@ -0,0 +1,62 @@
+import type { RouteErrorViewProps } from './RouteErrorView'
+
+const mono = { color: 'white', fontFamily: 'monospace', margin: 0 } as const
+
+export function RouteErrorView({
+  routeName,
+  error,
+  errorInfo,
+  onRetry,
+}: RouteErrorViewProps) {
+  return (
+    <div style={{ backgroundColor: '#000', padding: 16 }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <div>
+          <span
+            style={{
+              padding: 5,
+              backgroundColor: 'red',
+              color: 'white',
+              fontSize: 20,
+              fontFamily: 'monospace',
+            }}
+          >
+            Error on route "{routeName}"
+          </span>
+        </div>
+        <pre style={{ ...mono, fontSize: 16, whiteSpace: 'pre-wrap' }}>
+          {error instanceof Error ? error.message : String(error)}
+        </pre>
+        <div>
+          <button
+            type="button"
+            onClick={onRetry}
+            style={{
+              padding: 6,
+              border: 'none',
+              backgroundColor: 'white',
+              color: 'black',
+              fontSize: 14,
+              fontFamily: 'monospace',
+              cursor: 'pointer',
+            }}
+          >
+            Retry
+          </button>
+        </div>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+          {error instanceof Error ? (
+            <pre style={{ ...mono, fontSize: 12, whiteSpace: 'pre-wrap' }}>
+              {error.stack}
+            </pre>
+          ) : null}
+          {errorInfo?.componentStack ? (
+            <pre style={{ ...mono, fontSize: 12, whiteSpace: 'pre-wrap' }}>
+              Component Stack: {errorInfo.componentStack}
+            </pre>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/views/Screen.tsx

@@ -1,4 +1,5 @@
 import { useIsomorphicLayoutEffect } from '@vxrn/use-isomorphic-layout-effect'
+import { NAVIGATOR_CONFIG } from '../headless/children'
 import { useNavigation } from '../router/useNavigation'
 
 export type ScreenProps<TOptions extends Record<string, any> = Record<string, any>> = {
@@ -34,3 +35,5 @@ export function Screen<TOptions extends object = object>({
 
   return null
 }
+
+Object.assign(Screen, { [NAVIGATOR_CONFIG]: true })

package/src/vite/getManifest.ts

@@ -1,18 +1,16 @@
-import micromatch from 'micromatch'
 import { createRoutesManifest } from '../server/createRoutesManifest'
-import { globDir } from '../utils/globDir'
+import { getRoutePaths } from '../utils/routeIndex'
 
 export function getManifest({
   routerRoot,
   ignoredRouteFiles,
+  routePaths: routePathsIn,
 }: {
   routerRoot: string
   ignoredRouteFiles?: string[]
+  routePaths?: string[]
 }) {
-  let routePaths = globDir(routerRoot)
-  if (ignoredRouteFiles?.length) {
-    routePaths = micromatch.not(routePaths, ignoredRouteFiles, { matchBase: true })
-  }
+  const routePaths = routePathsIn ?? getRoutePaths(routerRoot, ignoredRouteFiles)
   return createRoutesManifest(routePaths, {
     platform: 'web',
   })