one 1.2.52 → 1.2.54

package/src/serve-worker.ts

@@ -5,7 +5,7 @@ import { ensureExists } from './utils/ensureExists'
 import type { One } from './vite/types'
 
 // Re-export static HTML fetcher utilities for worker use
-export { setFetchStaticHtml, getFetchStaticHtml } from './server/staticHtmlFetcher'
+export { getFetchStaticHtml, setFetchStaticHtml } from './server/staticHtmlFetcher'
 
 /**
  * Lazy import functions for route modules.

package/src/server/getServerManifest.ts

@@ -237,7 +237,9 @@ function getPathMeta(route: string) {
           cleanedKey = getSafeRouteKey()
         }
 
-        urlPathParts.push({ content: repeat ? '/*' : `/:${name}${optional ? '?' : ''}` })
+        urlPathParts.push({
+          content: repeat ? '/*' : `/:${name}${optional ? '?' : ''}`,
+        })
         routeKeys[cleanedKey] = name
 
         return repeat

package/src/server/oneServe.ts

@@ -1,7 +1,7 @@
-import type { Hono, MiddlewareHandler } from 'hono'
-import type { BlankEnv } from 'hono/types'
 import { readFile } from 'node:fs/promises'
 import { extname, join, resolve } from 'node:path'
+import type { Hono, MiddlewareHandler } from 'hono'
+import type { BlankEnv } from 'hono/types'
 import {
   CSS_PRELOAD_JS_POSTFIX,
   LOADER_JS_POSTFIX_UNCACHED,
@@ -232,7 +232,10 @@ url: ${url}`)
           if (html) {
             const headers = new Headers()
             headers.set('content-type', 'text/html')
-            return new Response(html, { headers, status: route.isNotFound ? 404 : 200 })
+            return new Response(html, {
+              headers,
+              status: route.isNotFound ? 404 : 200,
+            })
           }
         }
       }
@@ -256,7 +259,9 @@ url: ${url}`)
           // If there's no matching not-found or dynamic route, it's very likely that One won't handle it and will fallback to VxRN serving the static asset so it will also work.
           // Note: serveStaticAssets is optional - workers handle static assets via platform config
           if (options?.serveStaticAssets) {
-            const staticAssetResponse = await options.serveStaticAssets({ context })
+            const staticAssetResponse = await options.serveStaticAssets({
+              context,
+            })
             if (staticAssetResponse) {
               return await runMiddlewares(
                 requestHandlers,

package/src/typed-routes/generateRouteTypes.ts

@@ -2,12 +2,12 @@ import { writeFile } from 'node:fs/promises'
 import { dirname, join } from 'node:path'
 import FSExtra from 'fs-extra'
 import micromatch from 'micromatch'
+import { removeSupportedExtensions } from '../router/matchers'
 import { globbedRoutesToRouteContext } from '../router/useViteRoutes'
 import { globDir } from '../utils/globDir'
 import type { One } from '../vite/types'
 import { getTypedRoutesDeclarationFile } from './getTypedRoutesDeclarationFile'
-import { injectRouteHelpers, type InjectMode } from './injectRouteHelpers'
-import { removeSupportedExtensions } from '../router/matchers'
+import { type InjectMode, injectRouteHelpers } from './injectRouteHelpers'
 
 export async function generateRouteTypes(
   outFile: string,

package/src/typed-routes/injectRouteHelpers.ts

@@ -1,5 +1,5 @@
-import { readFile, writeFile } from 'node:fs/promises'
 import { existsSync } from 'node:fs'
+import { readFile, writeFile } from 'node:fs/promises'
 
 export type InjectMode = 'type' | 'runtime'
 

package/src/ui/Slot.tsx

@@ -1,10 +1,10 @@
 import { Slot as RUISlot } from '@radix-ui/react-slot'
 import {
-  forwardRef,
-  useMemo,
-  type ForwardRefExoticComponent,
   type Component,
+  type ForwardRefExoticComponent,
+  forwardRef,
   type RefAttributes,
+  useMemo,
 } from 'react'
 import { StyleSheet, type ViewProps } from 'react-native'
 

package/src/ui/TabList.tsx

@@ -1,5 +1,5 @@
-import type { ReactElement, ComponentProps } from 'react'
-import { View, StyleSheet, type ViewProps } from 'react-native'
+import type { ComponentProps, ReactElement } from 'react'
+import { StyleSheet, View, type ViewProps } from 'react-native'
 
 import { ViewSlot } from './common'
 

package/src/ui/TabRouter.tsx

@@ -1,11 +1,11 @@
 import {
   type CommonNavigationAction,
   type ParamListBase,
+  type TabActionType as RNTabActionType,
   TabRouter as RNTabRouter,
+  type TabRouterOptions as RNTabRouterOptions,
   type Router,
-  type TabActionType as RNTabActionType,
   type TabNavigationState,
-  type TabRouterOptions as RNTabRouterOptions,
 } from '@react-navigation/native'
 
 import type { TriggerMap } from './common'

package/src/ui/TabSlot.tsx

@@ -1,10 +1,9 @@
 import { type ComponentProps, type ReactElement, useState } from 'react'
 import { Platform, StyleSheet } from 'react-native'
-import { ScreenContainer, Screen } from 'react-native-screens'
-
+import { Screen, ScreenContainer } from 'react-native-screens'
+import { useNavigatorContext } from '../views/Navigator'
 import { TabContext, type TabsDescriptor } from './TabContext'
 import type { TabListProps } from './TabList'
-import { useNavigatorContext } from '../views/Navigator'
 
 export type TabSlotProps = ComponentProps<typeof ScreenContainer> & {
   /**

package/src/ui/TabTrigger.tsx

@@ -1,27 +1,26 @@
 import { Slot } from '@radix-ui/react-slot'
 import type { TabNavigationState } from '@react-navigation/native'
 import {
+  type ComponentProps,
+  type ReactElement,
   type ReactNode,
   use,
-  type ReactElement,
-  type ComponentProps,
   useCallback,
 } from 'react'
 import {
-  type View,
-  StyleSheet,
+  type GestureResponderEvent,
   Pressable,
   type PressableProps,
-  type GestureResponderEvent,
+  StyleSheet,
+  type View,
 } from 'react-native'
-
-import { TabTriggerMapContext } from './TabContext'
-import type { TriggerMap } from './common'
 import { appendBaseUrl } from '../fork/getPathFromState-mods'
+import type { OneRouter } from '../interfaces/router'
 import { router } from '../router/imperative-api'
 import { stripGroupSegmentsFromPath } from '../router/matchers'
-import type { OneRouter } from '../interfaces/router'
 import { useNavigatorContext } from '../views/Navigator'
+import type { TriggerMap } from './common'
+import { TabTriggerMapContext } from './TabContext'
 
 type PressablePropsWithoutFunctionChildren = Omit<PressableProps, 'children'> & {
   children?: ReactNode | undefined

package/src/ui/Tabs.tsx

@@ -1,3 +1,4 @@
+import type { RouterFactory } from '@react-navigation/native'
 import {
   type DefaultNavigatorOptions,
   LinkingContext,
@@ -11,33 +12,31 @@ import {
   Children,
   type ComponentProps,
   Fragment,
+  isValidElement,
+  type PropsWithChildren,
   type ReactElement,
   type ReactNode,
-  isValidElement,
   use,
   useMemo,
-  type PropsWithChildren,
 } from 'react'
-import { StyleSheet, type ViewProps, View } from 'react-native'
-
+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,
-  TabTriggerMapContext,
   type TabsContextValue,
+  TabTriggerMapContext,
 } from './TabContext'
 import { isTabList } from './TabList'
 import { ExpoTabRouter, type ExpoTabRouterOptions } from './TabRouter'
 import { isTabSlot } from './TabSlot'
 import { isTabTrigger } from './TabTrigger'
-import { ViewSlot, type ScreenTrigger, triggersToScreens } from './common'
 import { useComponent } from './useComponent'
-import { useRouteNode, useContextKey } from '../router/Route'
-import { useRouteInfo } from '../hooks'
-import { resolveHref } from '../link/href'
-import { shouldLinkExternally } from '../utils/url'
-import { NavigatorContext } from '../views/Navigator'
-import type { RouterFactory } from '@react-navigation/native'
 
 type NavigatorContextValue = {
   contextKey: string
@@ -140,7 +139,10 @@ export type UseTabsWithTriggersOptions = UseTabsOptions & {
  */
 export function useTabsWithChildren(options: UseTabsWithChildrenOptions) {
   const { children, ...rest } = options
-  return useTabsWithTriggers({ triggers: parseTriggersFromChildren(children), ...rest })
+  return useTabsWithTriggers({
+    triggers: parseTriggersFromChildren(children),
+    ...rest,
+  })
 }
 
 /**

package/src/ui/common.tsx

@@ -4,19 +4,18 @@ import type {
   PartialRoute,
   Route,
 } from '@react-navigation/native'
-
-import type { ExpoTabActionType } from './TabRouter'
+import type { OneRouter } from '../interfaces/router'
+import { resolveHref } from '../link/href'
 import type { UrlObject } from '../router/getNormalizedStatePath'
 import type { RouteNode } from '../router/Route'
-import { resolveHref } from '../link/href'
 import { sortRoutesWithInitial } from '../router/sortRoutes'
-import type { OneRouter } from '../interfaces/router'
-import { Slot } from './Slot'
 import {
-  Screen,
   createGetIdForRoute,
   getQualifiedRouteComponent,
+  Screen,
 } from '../router/useScreens'
+import { Slot } from './Slot'
+import type { ExpoTabActionType } from './TabRouter'
 
 export const ViewSlot = Slot
 

package/src/ui/useComponent.tsx

@@ -1,4 +1,4 @@
-import { useRef, forwardRef, useEffect, type JSX } from 'react'
+import { forwardRef, type JSX, useEffect, useRef } from 'react'
 
 /**
  * Copied from @react-navigation/core

package/src/useLoader.ts

@@ -71,6 +71,10 @@ export async function refetchLoader(pathname: string): Promise<void> {
   }
 }
 
+if (typeof window !== 'undefined') {
+  ;(window as any).__oneRefetchLoader = refetchLoader
+}
+
 export function useLoaderState<
   Loader extends Function = any,
   Returned = Loader extends (p: any) => any ? ReturnType<Loader> : unknown,

package/src/utils/cleanUrl.ts

@@ -1,6 +1,6 @@
 import {
-  isNative,
   CSS_PRELOAD_JS_POSTFIX,
+  isNative,
   LOADER_JS_POSTFIX,
   LOADER_JS_POSTFIX_REGEX,
   PRELOAD_JS_POSTFIX,

package/src/utils/promiseWithResolvers.ts

@@ -1,7 +1,7 @@
 export function promiseWithResolvers<T>() {
   let a
   let b
-  let c = new Promise<T>((resolve, reject) => {
+  const c = new Promise<T>((resolve, reject) => {
     a = resolve
     b = reject
   })

package/src/utils/trackLoaderDependencies.ts

@@ -0,0 +1,53 @@
+import { AsyncLocalStorage } from 'node:async_hooks'
+import { _registerWatchFileImpl } from './watchFile'
+
+export type LoaderResult<T> = {
+  result: T
+  dependencies: Set<string>
+}
+
+const LOADER_DEPS_KEY = '__oneLoaderDepsContext'
+
+type LoaderDepsStore = {
+  deps: Set<string>
+}
+
+const LOADER_DEPS_STORE = {
+  get current(): AsyncLocalStorage<LoaderDepsStore> {
+    if (globalThis[LOADER_DEPS_KEY]) return globalThis[LOADER_DEPS_KEY]
+    const als = new AsyncLocalStorage<LoaderDepsStore>()
+    globalThis[LOADER_DEPS_KEY] = als
+    return als
+  },
+}
+
+const debugLoaderDeps = process.env.ONE_DEBUG_LOADER_DEPS
+
+function watchFileImpl(path: string): void {
+  const store = LOADER_DEPS_STORE.current.getStore()
+  if (store) {
+    store.deps.add(path)
+  }
+}
+
+_registerWatchFileImpl(watchFileImpl)
+
+export async function trackLoaderDependencies<T>(
+  fn: () => T | Promise<T>
+): Promise<LoaderResult<Awaited<T>>> {
+  const deps = new Set<string>()
+  const context = LOADER_DEPS_STORE.current
+
+  const result = await context.run({ deps }, async () => {
+    return await fn()
+  })
+
+  if (debugLoaderDeps && deps.size > 0) {
+    console.info('[loader-deps] tracked dependencies:', [...deps])
+  }
+
+  return {
+    result,
+    dependencies: deps,
+  }
+}

package/src/utils/watchFile.ts

@@ -0,0 +1,19 @@
+const WATCH_FILE_KEY = '__oneWatchFile'
+
+/**
+ * Register a file dependency for loader HMR.
+ * No-op on client, registers file path for watching on server.
+ */
+export function watchFile(path: string): void {
+  if (typeof window !== 'undefined') return
+
+  const impl = globalThis[WATCH_FILE_KEY] as ((path: string) => void) | undefined
+  if (impl) {
+    impl(path)
+  }
+}
+
+/** @internal */
+export function _registerWatchFileImpl(impl: (path: string) => void): void {
+  globalThis[WATCH_FILE_KEY] = impl
+}

package/src/vercel/build/buildVercelOutputDirectory.ts

@@ -229,7 +229,7 @@ export { wrappedMiddlewareFunction as default }
       // Replace :param with capture groups for dynamic segments
       // The loader URL pattern uses the actual param value, not :param
       // e.g., /dynamic/123 -> /assets/dynamic_123_12345_vxrn_loader.js
-      let loaderPattern = cleanPath.replace(/:([^_]+)/g, '(?<$1>[^_]+)')
+      const loaderPattern = cleanPath.replace(/:([^_]+)/g, '(?<$1>[^_]+)')
 
       // Match the loader file pattern: {path}_{cacheKey}_vxrn_loader.js
       // Also handle _refetch_ pattern for cache busting

package/src/vercel/build/config/vc-build-output-config-base.ts

@@ -2,6 +2,8 @@
 //   https://vercel.com/docs/build-output-api/v3/configuration#config.json-supported-properties
 export const vercelBuildOutputConfigBase = {
   version: 3,
+  // Note: cleanUrls is NOT supported in the Build Output API config.json
+  // Users must add "cleanUrls": true to their vercel.json at project root
   // https://vercel.com/docs/build-output-api/v3/configuration#routes
   routes: [
     // Not sure if we really need this, but having this seems to break the 'rewrite's we will add to handle dynamic routes.

package/src/vite/DevHead.tsx

@@ -38,6 +38,29 @@ export function DevHead() {
     }
     // Dispatch a window event that triggers re-render in route components
     window.dispatchEvent(new CustomEvent('one-hmr-update'));
+  });`,
+          }}
+        />
+        <script
+          type="module"
+          dangerouslySetInnerHTML={{
+            __html: `import { createHotContext } from "/@vite/client";
+  const hot = createHotContext("/__one_loader_hmr");
+  hot.on("one:loader-data-update", async (data) => {
+    // Refetch loader data for all affected routes (no full page reload)
+    if (data?.routePaths && window.__oneRefetchLoader) {
+      const currentPath = window.location.pathname.replace(/\\/$/, '') || '/';
+      for (const routePath of data.routePaths) {
+        // Only refetch if we're on an affected route
+        if (routePath === currentPath) {
+          try {
+            await window.__oneRefetchLoader(routePath);
+          } catch (err) {
+            console.error('[one] Error refetching loader:', err);
+          }
+        }
+      }
+    }
   });`,
           }}
         />

package/src/vite/one.ts

@@ -1,11 +1,11 @@
+import events from 'node:events'
+import path from 'node:path'
 import { configureVXRNCompilerPlugin } from '@vxrn/compiler'
 import { resolvePath } from '@vxrn/resolve'
 import type {
   ExpoManifestRequestHandlerPluginPluginOptions,
   MetroPluginOptions,
 } from '@vxrn/vite-plugin-metro'
-import events from 'node:events'
-import path from 'node:path'
 import type { Plugin, PluginOption } from 'vite'
 import { barrel } from 'vite-plugin-barrel'
 import tsconfigPaths from 'vite-tsconfig-paths'
@@ -21,6 +21,7 @@ import { clientTreeShakePlugin } from './plugins/clientTreeShakePlugin'
 import { createFileSystemRouterPlugin } from './plugins/fileSystemRouterPlugin'
 import { fixDependenciesPlugin } from './plugins/fixDependenciesPlugin'
 import { generateFileSystemRouteTypesPlugin } from './plugins/generateFileSystemRouteTypesPlugin'
+import { imageDataPlugin } from './plugins/imageDataPlugin'
 import { SSRCSSPlugin } from './plugins/SSRCSSPlugin'
 import { virtualEntryId } from './plugins/virtualEntryConstants'
 import { createVirtualEntry } from './plugins/virtualEntryPlugin'
@@ -158,6 +159,8 @@ export function one(options: One.PluginOptions = {}): PluginOption {
             : ['@tamagui/lucide-icons'],
         }) as any),
 
+    imageDataPlugin(),
+
     {
       name: 'one-define-client-env',
       async config(userConfig) {

package/src/vite/plugins/SSRCSSPlugin.ts

@@ -17,7 +17,7 @@ export function SSRCSSPlugin(pluginOpts: { entries: string[] }): Plugin {
         if (req.url?.includes(VIRTUAL_SSR_CSS_HREF)) {
           invalidateModule(server, '\0' + VIRTUAL_SSR_CSS_ENTRY + '?direct')
 
-          let code = await collectStyle(server, pluginOpts.entries)
+          const code = await collectStyle(server, pluginOpts.entries)
 
           res.setHeader('Content-Type', 'text/css')
           res.setHeader('Cache-Control', 'no-store')
@@ -112,7 +112,7 @@ export async function collectStyle(server: ViteDevServer, entries: string[]) {
           buffer.byteLength
         )
 
-        let processed = transform({
+        const processed = transform({
           filename: 'code.css',
           code: codeOut,
           ...server.config.css.lightningcss,

package/src/vite/plugins/clientTreeShakePlugin.ts

@@ -51,7 +51,10 @@ export async function transformTreeShakeClient(code: string, id: string) {
   let ast: any
   try {
     // `as any` because babel-dead-code-elimination using @types and it conflicts :/
-    ast = parse(code, { sourceType: 'module', plugins: ['typescript', 'jsx'] }) as any
+    ast = parse(code, {
+      sourceType: 'module',
+      plugins: ['typescript', 'jsx'],
+    }) as any
   } catch (error) {
     // If there's a syntax error, skip transformation and let Vite handle the error
     // This prevents the dev server from crashing on syntax errors

package/src/vite/plugins/fileSystemRouterPlugin.tsx

@@ -11,6 +11,7 @@ import { getRouterRootFromOneOptions } from '../../utils/getRouterRootFromOneOpt
 import { isResponse } from '../../utils/isResponse'
 import { isStatusRedirect } from '../../utils/isStatus'
 import { promiseWithResolvers } from '../../utils/promiseWithResolvers'
+import { trackLoaderDependencies } from '../../utils/trackLoaderDependencies'
 import { LoaderDataCache } from '../../vite/constants'
 import { replaceLoader } from '../../vite/replaceLoader'
 import type { One } from '../../vite/types'
@@ -18,6 +19,7 @@ import { setServerContext } from '../one-server-only'
 import { virtalEntryIdClient, virtualEntryId } from './virtualEntryConstants'
 
 const debugRouter = process.env.ONE_DEBUG_ROUTER
+const debugLoaderDeps = process.env.ONE_DEBUG_LOADER_DEPS
 
 // server needs better dep optimization
 const USE_SERVER_ENV = false //!!process.env.USE_SERVER_ENV
@@ -28,6 +30,10 @@ export function createFileSystemRouterPlugin(options: One.PluginOptions): Plugin
   let runner: ModuleRunner
   let server: ViteDevServer
 
+  // Track file dependencies from loaders for hot reload
+  // Maps file path -> set of route paths that depend on it
+  const loaderFileDependencies = new Map<string, Set<string>>()
+
   let handleRequest = createRequestHandler()
   // handle only one at a time in dev mode to avoid "Detected multiple renderers concurrently" errors
   let renderPromise: Promise<void> | null = null
@@ -72,7 +78,28 @@ export function createFileSystemRouterPlugin(options: One.PluginOptions): Plugin
             globalThis['__vxrnresetState']?.()
 
             const exported = routeFile === '' ? {} : await runner.import(routeFile)
-            const loaderData = await exported.loader?.(loaderProps)
+
+            // Track file dependencies from loader for hot reload
+            let loaderData: any
+            if (exported.loader) {
+              const tracked = await trackLoaderDependencies(() =>
+                exported.loader(loaderProps)
+              )
+              loaderData = tracked.result
+
+              // Register dependencies: map file path -> route paths that depend on it
+              const routePath = loaderProps?.path || '/'
+              for (const dep of tracked.dependencies) {
+                if (!loaderFileDependencies.has(dep)) {
+                  loaderFileDependencies.set(dep, new Set())
+                  server?.watcher.add(dep)
+                  if (debugLoaderDeps) {
+                    console.info(` ⓵  [loader-dep] watching: ${dep}`)
+                  }
+                }
+                loaderFileDependencies.get(dep)!.add(routePath)
+              }
+            }
 
             // biome-ignore lint/security/noGlobalEval: needed to set server env at runtime
             eval(`process.env.TAMAGUI_IS_SERVER = '1'`)
@@ -164,7 +191,28 @@ export function createFileSystemRouterPlugin(options: One.PluginOptions): Plugin
           }
 
           const exported = await runner.import(routeFile)
-          const loaderData = await exported.loader?.(loaderProps)
+
+          // Track file dependencies from loader for hot reload
+          let loaderData: any
+          if (exported.loader) {
+            const tracked = await trackLoaderDependencies(() =>
+              exported.loader(loaderProps)
+            )
+            loaderData = tracked.result
+
+            // Register dependencies: map file path -> route paths that depend on it
+            const routePath = loaderProps?.path || '/'
+            for (const dep of tracked.dependencies) {
+              if (!loaderFileDependencies.has(dep)) {
+                loaderFileDependencies.set(dep, new Set())
+                server?.watcher.add(dep)
+                if (debugLoaderDeps) {
+                  console.info(` ⓵  [loader-dep] watching: ${dep}`)
+                }
+              }
+              loaderFileDependencies.get(dep)!.add(routePath)
+            }
+          }
 
           if (loaderData) {
             // add loader back in!
@@ -299,6 +347,7 @@ export function createFileSystemRouterPlugin(options: One.PluginOptions): Plugin
 
     configureServer(serverIn) {
       server = serverIn
+
       // change this to .server to test using the indepedently scoped env
       runner = createServerModuleRunner(
         USE_SERVER_ENV ? server.environments.server : server.environments.ssr
@@ -319,6 +368,28 @@ export function createFileSystemRouterPlugin(options: One.PluginOptions): Plugin
 
       server.watcher.addListener('all', fileWatcherChangeListener)
 
+      // Watch for changes to loader dependencies (files read via fs in loaders)
+      const loaderDepChangeListener = debounce((path: string) => {
+        const absolutePath = resolve(path)
+        const routePaths = loaderFileDependencies.get(absolutePath)
+        if (routePaths && routePaths.size > 0) {
+          if (debugLoaderDeps) {
+            console.info(
+              ` ⓵  [loader-dep] changed: ${absolutePath}, triggering loader refetch for routes:`,
+              [...routePaths]
+            )
+          }
+          // Send custom HMR event with affected route paths for hot reload (no full page reload)
+          server.hot.send({
+            type: 'custom',
+            event: 'one:loader-data-update',
+            data: { routePaths: [...routePaths] },
+          })
+        }
+      }, 100)
+
+      server.watcher.on('change', loaderDepChangeListener)
+
       // Instead of adding the middleware here, we return a function that Vite
       // will call after adding its own middlewares. We want our code to run after
       // Vite's transform middleware so that we can focus on handling the requests
@@ -347,7 +418,9 @@ export function createFileSystemRouterPlugin(options: One.PluginOptions): Plugin
                     console.info(`[one] ↪ redirect ${url.pathname} → ${destination}`)
                   }
 
-                  res.writeHead(redirect.permanent ? 301 : 302, { Location: destination })
+                  res.writeHead(redirect.permanent ? 301 : 302, {
+                    Location: destination,
+                  })
                   res.end()
                   return
                 }