one 1.21.13 → 1.23.0

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',
   })

package/src/vite/one.ts

@@ -16,8 +16,10 @@ import { getViteMetroPluginOptions } from '../metro-config/getViteMetroPluginOpt
 import '../polyfills-server'
 import { setServerGlobals } from '../server/setServerGlobals'
 import { getRouterRootFromOneOptions } from '../utils/getRouterRootFromOneOptions'
+import { createRouteIndex } from '../utils/routeIndex'
 import { ensureTSConfig } from './ensureTsConfig'
 import { setOneOptions } from './loadConfig'
+import { bundledDevPlugin } from './plugins/bundledDevPlugin'
 import { clientTreeShakePlugin } from './plugins/clientTreeShakePlugin'
 import { createDevtoolsPlugin } from './plugins/devtoolsPlugin'
 import { createFileSystemRouterPlugin } from './plugins/fileSystemRouterPlugin'
@@ -25,6 +27,7 @@ import { fixDependenciesPlugin } from './plugins/fixDependenciesPlugin'
 import { generateFileSystemRouteTypesPlugin } from './plugins/generateFileSystemRouteTypesPlugin'
 import { criticalCSSPlugin } from './plugins/criticalCSSPlugin'
 import { imageDataPlugin } from './plugins/imageDataPlugin'
+import { createRouteModuleHmrPlugin } from './plugins/routeModuleHmrPlugin'
 import { sourceInspectorPlugin } from './plugins/sourceInspectorPlugin'
 import { SSRCSSPlugin } from './plugins/SSRCSSPlugin'
 import { virtualEntryId } from './plugins/virtualEntryConstants'
@@ -285,6 +288,8 @@ export function one(options: One.PluginOptions = {}): PluginOption {
       },
     },
 
+    bundledDevPlugin(!!options.web?.experimentalBundledDev),
+
     environmentGuardPlugin(options.environmentGuards),
 
     criticalCSSPlugin(),
@@ -707,63 +712,7 @@ export function one(options: One.PluginOptions = {}): PluginOption {
       },
     } satisfies Plugin,
 
-    {
-      name: 'route-module-hmr-fix',
-      hotUpdate({ server, modules, file }) {
-        const envName = this.environment?.name
-
-        // Check if this is an app file
-        const fileRelativePath = path.relative(server.config.root, file)
-        const fileRootDir = fileRelativePath.split(path.sep)[0]
-        const isAppFile = fileRootDir === 'app'
-
-        // For SSR environment, prevent full page reload for app files by returning empty array
-        // The SSR module runner will still pick up changes on next request
-        if (envName === 'ssr' && isAppFile) {
-          return []
-        }
-
-        let hasRouteUpdate = false
-
-        const result = modules.map((m) => {
-          const { id } = m
-          if (!id) return m
-
-          const relativePath = path.relative(server.config.root, id)
-          // Get the root dir from relativePath
-          const rootDir = relativePath.split(path.sep)[0]
-          if (rootDir === 'app') {
-            // If the file is a route, Vite might force a full-reload due to that file not being imported by any other modules (`!node.importers.size`) (see https://github.com/vitejs/vite/blob/v6.0.0-alpha.18/packages/vite/src/node/server/hmr.ts#L440-L443, https://github.com/vitejs/vite/blob/v6.0.0-alpha.18/packages/vite/src/node/server/hmr.ts#L427 and https://github.com/vitejs/vite/blob/v6.0.0-alpha.18/packages/vite/src/node/server/hmr.ts#L557-L566)
-            // Here we trick Vite to skip that check.
-            m.acceptedHmrExports = new Set()
-
-            // Check if this is a ROOT layout file - only root layouts need special handling
-            // because they're called as functions (not rendered as JSX) to support HTML elements
-            // Root layout patterns: app/_layout.tsx or app/(group)/_layout.tsx
-            const isRootLayout =
-              relativePath === path.join('app', '_layout.tsx') ||
-              /^app[\\/]\([^)]+\)[\\/]_layout\.tsx$/.test(relativePath)
-            if (isRootLayout) {
-              hasRouteUpdate = true
-            }
-          }
-
-          return m
-        })
-
-        // For root layout files, send a custom event to trigger re-render
-        // Root layouts are called as functions (not JSX) to support HTML elements, bypassing React's HMR
-        if (hasRouteUpdate) {
-          server.hot.send({
-            type: 'custom',
-            event: 'one:route-update',
-            data: { file: fileRelativePath },
-          })
-        }
-
-        return result
-      },
-    } satisfies Plugin,
+    createRouteModuleHmrPlugin(routerRoot),
 
     // Plugins may transform the source code and add imports of `react/jsx-dev-runtime`, which won't be discovered by Vite's initial `scanImports` since the implementation is using ESbuild where such plugins are not executed.
     // Thus, if the project has a valid `react/jsx-dev-runtime` import, we tell Vite to optimize it, so Vite won't only discover it on the next page load and trigger a full reload.
@@ -837,6 +786,10 @@ export function one(options: One.PluginOptions = {}): PluginOption {
   globalThis.__vxrnAddWebPluginsProd = devAndProdPlugins
 
   const flags: One.Flags = {}
+  const routeIndex = createRouteIndex({
+    routerRoot: path.resolve(root, routerRoot),
+    ignoredRouteFiles: options.router?.ignoredRouteFiles,
+  })
 
   // pass config to the rolldown native entry (createNativeDevEngine reads this)
   if (!nativeDisabled) {
@@ -868,9 +821,9 @@ export function one(options: One.PluginOptions = {}): PluginOption {
     /**
      * This is really the meat of one, where it handles requests:
      */
-    createFileSystemRouterPlugin(options),
+    createFileSystemRouterPlugin(options, routeIndex),
 
-    generateFileSystemRouteTypesPlugin(options),
+    generateFileSystemRouteTypesPlugin(options, routeIndex),
 
     fixDependenciesPlugin(options.patches),
 
@@ -878,6 +831,7 @@ export function one(options: One.PluginOptions = {}): PluginOption {
       ...options,
       flags,
       root: routerRoot,
+      routeIndex,
     }),
 
     {