one 1.2.40 → 1.2.42

package/src/cli/build.ts

@@ -27,6 +27,7 @@ import { buildPage } from './buildPage'
 import { checkNodeVersion } from './checkNodeVersion'
 import { generateSitemap, type RouteSitemapData } from './generateSitemap'
 import { labelProcess } from './label-process'
+import { isRolldown } from '../utils/isRolldown'
 
 const { ensureDir, writeJSON } = FSExtra
 
@@ -625,6 +626,7 @@ export async function build(args: {
     preloads,
     cssPreloads,
     loaders,
+    useRolldown: await isRolldown(),
   }
 
   await writeJSON(toAbsolute(`dist/buildInfo.json`), buildInfoForWriting)
@@ -662,29 +664,196 @@ export async function build(args: {
       break
     }
 
-    //     case 'cloudflare': {
-    //       await FSExtra.writeFile(
-    //         join(options.root, 'dist', 'worker.js'),
-    //         `import { serve } from 'one/serve-worker'
+    case 'cloudflare': {
+      // Generate lazy import functions - modules load on-demand, not all upfront
+      // Uses find_additional_modules in wrangler config to keep modules separate
+      const pageRouteMap: string[] = []
+      const apiRouteMap: string[] = []
+      const middlewareRouteMap: string[] = []
+
+      // Generate lazy imports for SSR/SSG page server bundles
+      for (const [routeFile, info] of Object.entries(buildInfoForWriting.routeToBuildInfo)) {
+        if (info.serverJsPath) {
+          const importPath = './' + info.serverJsPath.replace(/^dist\//, '')
+          pageRouteMap.push(`  '${routeFile}': () => import('${importPath}')`)
+        }
+      }
 
-    // const buildInfo = ${JSON.stringify(buildInfoForWriting)}
+      // Generate lazy imports for API routes
+      for (const route of buildInfoForWriting.manifest.apiRoutes) {
+        if (route.file) {
+          // API files are built to dist/api/
+          // route.page is like "/api/hello", files are at "dist/api/api/hello.js"
+          // rolldown preserves brackets, esbuild replaces them with underscores
+          const apiFileName = buildInfoForWriting.useRolldown
+            ? route.page.slice(1)
+            : route.page.slice(1).replace(/\[/g, '_').replace(/\]/g, '_')
+          const importPath = `./api/${apiFileName}.js`
+          apiRouteMap.push(`  '${route.page}': () => import('${importPath}')`)
+        }
+      }
 
-    // const handler = await serve(buildInfo)
+      // Generate lazy imports for middlewares
+      // The key must match the contextKey used to look up the middleware (e.g., "dist/middlewares/_middleware.js")
+      for (const [middlewareFile, builtPath] of Object.entries(builtMiddlewares)) {
+        const importPath = './' + builtPath.replace(/^dist\//, '')
+        middlewareRouteMap.push(`  '${builtPath}': () => import('${importPath}')`)
+      }
 
-    // export default {
-    //   fetch: handler.fetch,
-    // }`
-    //       )
+      const workerSrcPath = join(options.root, 'dist', '_worker-src.js')
+      const workerCode = `// Polyfill MessageChannel for React SSR (not available in Cloudflare Workers by default)
+if (typeof MessageChannel === 'undefined') {
+  globalThis.MessageChannel = class MessageChannel {
+    constructor() {
+      this.port1 = { postMessage: () => {}, onmessage: null, close: () => {} }
+      this.port2 = { postMessage: () => {}, onmessage: null, close: () => {} }
+    }
+  }
+}
+
+import { serve, setFetchStaticHtml } from 'one/serve-worker'
+
+// Lazy import map - modules load on-demand when route is matched
+const lazyRoutes = {
+  serverEntry: () => import('./server/_virtual_one-entry.js'),
+  pages: {
+${pageRouteMap.join(',\n')}
+  },
+  api: {
+${apiRouteMap.join(',\n')}
+  },
+  middlewares: {
+${middlewareRouteMap.join(',\n')}
+  }
+}
 
-    //       await FSExtra.writeFile(
-    //         join(options.root, 'dist', 'wrangler.toml'),
-    //         `assets = { directory = "client" }
-    // compatibility_date = "2024-12-05"
-    // `
-    //       )
+const buildInfo = ${JSON.stringify(buildInfoForWriting)}
+
+let app
+
+export default {
+  async fetch(request, env, ctx) {
+    if (!app) {
+      app = await serve(buildInfo, lazyRoutes)
+    }
+
+    // Set up static HTML fetcher for this request (uses ASSETS binding)
+    if (env.ASSETS) {
+      setFetchStaticHtml(async (path) => {
+        try {
+          const url = new URL(request.url)
+          url.pathname = path
+          const assetResponse = await env.ASSETS.fetch(new Request(url))
+          if (assetResponse && assetResponse.ok) {
+            return await assetResponse.text()
+          }
+        } catch (e) {
+          // Asset not found
+        }
+        return null
+      })
+    }
+
+    try {
+      // Try the app first
+      const response = await app.fetch(request, env, ctx)
 
-    //       break
-    //     }
+      // If no route matched (404) or no response, try serving static assets
+      if (!response || response.status === 404) {
+        if (env.ASSETS) {
+          try {
+            const assetResponse = await env.ASSETS.fetch(request)
+            // If asset exists, return it
+            if (assetResponse && assetResponse.status !== 404) {
+              return assetResponse
+            }
+          } catch (e) {
+            // Asset not found, continue with original response
+          }
+        }
+      }
+
+      return response
+    } finally {
+      // Clean up per-request state
+      setFetchStaticHtml(null)
+    }
+  }
+}
+`
+      await FSExtra.writeFile(workerSrcPath, workerCode)
+
+      // Bundle the worker using Vite/esbuild
+      // Cloudflare Workers with nodejs_compat supports Node.js built-ins
+      console.info('\n [cloudflare] Bundling worker...')
+      await viteBuild({
+        root: options.root,
+        logLevel: 'warn',
+        build: {
+          outDir: 'dist',
+          emptyOutDir: false,
+          // Use SSR mode with node target for proper Node.js module resolution
+          ssr: workerSrcPath,
+          rollupOptions: {
+            external: [
+              // React Native dev tools - not needed in production
+              '@react-native/dev-middleware',
+              '@react-native/debugger-shell',
+              'metro',
+              'metro-core',
+              'metro-runtime',
+              // Native modules that can't run in workers
+              /\.node$/,
+            ],
+            output: {
+              entryFileNames: 'worker.js',
+              format: 'es',
+              // Keep dynamic imports separate for lazy loading
+              inlineDynamicImports: false,
+            },
+          },
+          minify: true,
+          target: 'esnext',
+        },
+        define: {
+          'process.env.NODE_ENV': JSON.stringify('production'),
+          'process.env.VITE_ENVIRONMENT': JSON.stringify('ssr'),
+        },
+        resolve: {
+          conditions: ['workerd', 'worker', 'node', 'module', 'default'],
+        },
+        ssr: {
+          target: 'node',
+          noExternal: true,
+        },
+      })
+
+      // Clean up temp file
+      await FSExtra.remove(workerSrcPath)
+
+      // Use jsonc for wrangler config (recommended for new projects)
+      // Use assets with run_worker_first so all requests go through worker (enables middleware on SSG pages)
+      const wranglerConfig = `{
+  "name": "one-app",
+  "main": "worker.js",
+  "compatibility_date": "2024-12-05",
+  "compatibility_flags": ["nodejs_compat"],
+  "find_additional_modules": true,
+  "rules": [
+    { "type": "ESModule", "globs": ["./server/**/*.js"], "fallthrough": true },
+    { "type": "ESModule", "globs": ["./api/**/*.js"], "fallthrough": true },
+    { "type": "ESModule", "globs": ["./middlewares/**/*.js"], "fallthrough": true }
+  ],
+  "assets": { "directory": "client", "binding": "ASSETS", "run_worker_first": true }
+}
+`
+      await FSExtra.writeFile(join(options.root, 'dist', 'wrangler.jsonc'), wranglerConfig)
+
+      postBuildLogs.push(`Cloudflare worker bundled at dist/worker.js`)
+      postBuildLogs.push(`To deploy: cd dist && wrangler deploy`)
+
+      break
+    }
   }
 
   if (process.env.VXRN_ANALYZE_BUNDLE) {

package/src/createHandleRequest.ts

@@ -107,39 +107,41 @@ export async function resolveAPIRoute(
     console.info(`[one] 📡 API ${request.method} ${pathname} → ${route.file}`, params)
   }
 
-  try {
-    return resolveAPIEndpoint(
-      () =>
-        handlers.handleAPI!({
-          request,
-          route,
-          url,
-          loaderProps: {
-            path: pathname,
-            search: url.search,
-            params,
-          },
-        }),
-      request,
-      params || {}
-    )
-  } catch (err) {
-    if (isResponse(err)) {
-      return err
-    }
+  return await runMiddlewares(handlers, request, route, async () => {
+    try {
+      return resolveAPIEndpoint(
+        () =>
+          handlers.handleAPI!({
+            request,
+            route,
+            url,
+            loaderProps: {
+              path: pathname,
+              search: url.search,
+              params,
+            },
+          }),
+        request,
+        params || {}
+      )
+    } catch (err) {
+      if (isResponse(err)) {
+        return err
+      }
 
-    if (process.env.NODE_ENV === 'development') {
-      console.error(`\n [one] Error importing API route at ${pathname}:
+      if (process.env.NODE_ENV === 'development') {
+        console.error(`\n [one] Error importing API route at ${pathname}:
 
-        ${err}
+          ${err}
 
-        If this is an import error, you can likely fix this by adding this dependency to
-        the "optimizeDeps.include" array in your vite.config.ts.
-      `)
-    }
+          If this is an import error, you can likely fix this by adding this dependency to
+          the "optimizeDeps.include" array in your vite.config.ts.
+        `)
+      }
 
-    throw err
-  }
+      throw err
+    }
+  })
 }
 
 export async function resolveLoaderRoute(

package/src/router/useScreens.tsx

@@ -29,6 +29,22 @@ import { sortRoutesWithInitial } from './sortRoutes'
 // do this hack.
 export const { Screen, Group } = createNavigatorFactory({} as any)()
 
+// Cache inline CSS elements at module load (before React hydrates).
+// Reads CSS content from SSR'd <style> elements and creates matching JSX
+// so hydration sees identical content without 100KB+ JSON payload.
+const cachedInlineCSSElements: React.ReactNode[] =
+  typeof document !== 'undefined'
+    ? Array.from(document.querySelectorAll<HTMLStyleElement>('style[id^="__one_css_"]')).map(
+        (el, i) => (
+          <style
+            key={`inline-css-${i}`}
+            id={el.id}
+            dangerouslySetInnerHTML={{ __html: el.innerHTML }}
+          />
+        )
+      )
+    : []
+
 export type ScreenProps<
   TOptions extends Record<string, any> = Record<string, any>,
   State extends NavigationState = NavigationState,
@@ -205,10 +221,17 @@ export function getQualifiedRouteComponent(value: RouteNode) {
                 __html: `globalThis['global'] = globalThis`,
               }}
             />
-            {serverContext?.cssContents
-              ? serverContext.cssContents.map((content, i) =>
-                  content ? <style key={i} dangerouslySetInnerHTML={{ __html: content }} /> : null
-                )
+            {serverContext?.cssContents?.length || serverContext?.cssInlineCount
+              ? // Inline CSS: SSR renders fresh, client uses cached elements from module load
+                serverContext?.cssContents
+                ? serverContext.cssContents.map((content, i) => (
+                    <style
+                      key={`inline-css-${i}`}
+                      id={`__one_css_${i}`}
+                      dangerouslySetInnerHTML={{ __html: content }}
+                    />
+                  ))
+                : cachedInlineCSSElements
               : serverContext?.css?.map((file) => <link key={file} rel="stylesheet" href={file} />)}
             <ServerContextScript />
             {headChildren}

package/src/serve-worker.ts

@@ -1,23 +1,40 @@
 import { Hono } from 'hono'
-import { createProdServer } from 'vxrn/serve'
-import { oneServe } from './server/oneServe'
 import { setServerGlobals } from './server/setServerGlobals'
 import { setupBuildInfo } from './server/setupBuildOptions'
 import { ensureExists } from './utils/ensureExists'
 import type { One } from './vite/types'
 
-export async function serve(buildInfo: One.BuildInfo) {
+// Re-export static HTML fetcher utilities for worker use
+export { setFetchStaticHtml, getFetchStaticHtml } from './server/staticHtmlFetcher'
+
+/**
+ * Lazy import functions for route modules.
+ * Modules are loaded on-demand when a route is matched, not all upfront.
+ */
+export type LazyRoutes = {
+  serverEntry: () => Promise<{ default: { render: (props: any) => any } }>
+  pages: Record<string, () => Promise<any>>
+  api: Record<string, () => Promise<any>>
+  middlewares: Record<string, () => Promise<any>>
+}
+
+/**
+ * Creates a Hono app for edge/worker environments (Cloudflare Workers, etc.)
+ * Static assets should be handled by the platform (e.g., wrangler's [assets] config)
+ * This only sets up the dynamic routes (SSR, API, loaders)
+ *
+ * @param buildInfo - Build configuration and route metadata
+ * @param lazyRoutes - Lazy import functions for route modules (loaded on-demand)
+ */
+export async function serve(buildInfo: One.BuildInfo, lazyRoutes?: LazyRoutes) {
   setupBuildInfo(buildInfo)
   ensureExists(buildInfo.oneOptions)
   setServerGlobals()
 
-  const serverOptions = buildInfo.oneOptions.server || {}
-
   const app = new Hono()
 
-  await createProdServer(app, serverOptions)
-
-  await oneServe(buildInfo.oneOptions, buildInfo, app)
+  const { oneServe } = await import('./server/oneServe')
+  await oneServe(buildInfo.oneOptions, buildInfo, app, { lazyRoutes })
 
   return app
 }

package/src/serve.ts

@@ -23,7 +23,7 @@ export async function serve(args: VXRNOptions['server'] & { app?: Hono } = {}) {
   // to avoid loading the CACHE_KEY before we set it use async imports:
   const { labelProcess } = await import('./cli/label-process')
   const { removeUndefined } = await import('./utils/removeUndefined')
-  const { loadEnv, serve: vxrnServe } = await import('vxrn/serve')
+  const { loadEnv, serve: vxrnServe, serveStaticAssets } = await import('vxrn/serve')
   const { oneServe } = await import('./server/oneServe')
 
   labelProcess('serve')
@@ -44,7 +44,7 @@ export async function serve(args: VXRNOptions['server'] & { app?: Hono } = {}) {
     }),
 
     async beforeRegisterRoutes(options, app) {
-      await oneServe(oneOptions, buildInfo, app)
+      await oneServe(oneOptions, buildInfo, app, { serveStaticAssets })
     },
 
     async afterRegisterRoutes(options, app) {},

package/src/server/ServerContextScript.tsx

@@ -21,9 +21,15 @@ export function ServerContextScript() {
     const context = useServerContext()
     const cssUrls = context?.css || []
 
-    // Exclude cssContents from client context - CSS is already inlined in <style> tags
-    // Including it would duplicate 100KB+ of CSS as JSON, blocking the main thread
-    const { cssContents: _, ...clientContext } = context || {}
+    // Strip cssContents from JSON payload - we'll read it from DOM instead.
+    // This avoids duplicating 100KB+ of CSS as JSON in the HTML.
+    // The CSSPrehydrateScript reads the actual <style> elements' innerHTML
+    // and stores them in globalThis.__oneCSSContents for hydration matching.
+    const { cssContents, ...restContext } = context || {}
+    const clientContext = {
+      ...restContext,
+      cssInlineCount: cssContents?.length || 0,
+    }
 
     return (
       <script

package/src/server/oneServe.ts

@@ -1,9 +1,7 @@
-import { default as FSExtra } from 'fs-extra'
 import type { Hono, MiddlewareHandler } from 'hono'
 import type { BlankEnv } from 'hono/types'
-import { extname, join } from 'node:path'
-import { serveStaticAssets } from 'vxrn'
-import { getServerEntry } from 'vxrn/serve'
+import { readFile } from 'node:fs/promises'
+import { extname, join, resolve } from 'node:path'
 import {
   CSS_PRELOAD_JS_POSTFIX,
   LOADER_JS_POSTFIX_UNCACHED,
@@ -17,14 +15,33 @@ import {
 } from '../createHandleRequest'
 import type { RenderAppProps } from '../types'
 import { getPathFromLoaderPath } from '../utils/cleanUrl'
-import { isRolldown } from '../utils/isRolldown'
 import { toAbsolute } from '../utils/toAbsolute'
 import type { One } from '../vite/types'
 import type { RouteInfoCompiled } from './createRoutesManifest'
+import { getFetchStaticHtml } from './staticHtmlFetcher'
 
 const debugRouter = process.env.ONE_DEBUG_ROUTER
 
-export async function oneServe(oneOptions: One.PluginOptions, buildInfo: One.BuildInfo, app: Hono) {
+/**
+ * Lazy import functions for route modules.
+ * Modules are loaded on-demand when a route is matched, not all upfront.
+ */
+type LazyRoutes = {
+  serverEntry: () => Promise<{ default: { render: (props: any) => any } }>
+  pages: Record<string, () => Promise<any>>
+  api: Record<string, () => Promise<any>>
+  middlewares: Record<string, () => Promise<any>>
+}
+
+export async function oneServe(
+  oneOptions: One.PluginOptions,
+  buildInfo: One.BuildInfo,
+  app: Hono,
+  options?: {
+    serveStaticAssets?: (ctx: { context: any }) => Promise<Response | undefined>
+    lazyRoutes?: LazyRoutes
+  }
+) {
   const { resolveAPIRoute, resolveLoaderRoute, resolvePageRoute } = await import(
     '../createHandleRequest'
   )
@@ -61,29 +78,58 @@ export async function oneServe(oneOptions: One.PluginOptions, buildInfo: One.Bui
     root: '.',
   }
 
-  const entryServer = getServerEntry(serverOptions)
-  const entry = await import(entryServer)
-
-  const render = entry.default.render as (props: RenderAppProps) => any
   const apiCJS = oneOptions.build?.api?.outputFormat === 'cjs'
 
-  const useRolldown = await isRolldown()
+  // useRolldown is determined at build time and stored in buildInfo
+  const useRolldown = buildInfo.useRolldown ?? false
+
+  // Lazy load server entry only when needed for SSR
+  let render: ((props: RenderAppProps) => any) | null = null
+  async function getRender() {
+    if (!render) {
+      // Use lazy import if available (workers), otherwise dynamic import (Node.js)
+      const entry = options?.lazyRoutes?.serverEntry
+        ? await options.lazyRoutes.serverEntry()
+        : await import(
+            resolve(
+              process.cwd(),
+              `${serverOptions.root}/dist/server/_virtual_one-entry.${typeof oneOptions.build?.server === 'object' && oneOptions.build.server.outputFormat === 'cjs' ? 'c' : ''}js`
+            )
+          )
+      render = entry.default.render as (props: RenderAppProps) => any
+    }
+    return render
+  }
 
   const requestHandlers: RequestHandlers = {
     async handleAPI({ route }) {
+      // Use lazy import if available (workers), otherwise dynamic import (Node.js)
+      if (options?.lazyRoutes?.api?.[route.page]) {
+        return await options.lazyRoutes.api[route.page]()
+      }
       const fileName = useRolldown
-        ? route.page.slice(1) // rolldown doesn't replace brackets
-        : route.page.slice(1).replace(/\[/g, '_').replace(/\]/g, '_') // esbuild replaces brackets with underscores
+        ? route.page.slice(1)
+        : route.page.slice(1).replace(/\[/g, '_').replace(/\]/g, '_')
       const apiFile = join(process.cwd(), 'dist', 'api', fileName + (apiCJS ? '.cjs' : '.js'))
       return await import(apiFile)
     },
 
     async loadMiddleware(route) {
+      // Use lazy import if available (workers), otherwise dynamic import (Node.js)
+      if (options?.lazyRoutes?.middlewares?.[route.contextKey]) {
+        return await options.lazyRoutes.middlewares[route.contextKey]()
+      }
       return await import(toAbsolute(route.contextKey))
     },
 
-    async handleLoader({ request, route, url, loaderProps }) {
-      const exports = await import(toAbsolute(join('./', 'dist/server', route.file)))
+    async handleLoader({ route, loaderProps }) {
+      // Use lazy import if available (workers), otherwise dynamic import (Node.js)
+      // For workers, look up by routeFile (original file path like "./dynamic/[id]+ssr.tsx")
+      // For Node.js, use route.file which may be loaderServerPath
+      const routeFile = (route as any).routeFile || route.file
+      const exports = options?.lazyRoutes?.pages?.[routeFile]
+        ? await options.lazyRoutes.pages[routeFile]()
+        : await import(toAbsolute(join('./', 'dist/server', route.file)))
 
       const { loader } = exports
 
@@ -109,13 +155,16 @@ export async function oneServe(oneOptions: One.PluginOptions, buildInfo: One.Bui
         }
 
         try {
-          const exported = await import(toAbsolute(buildInfo.serverJsPath))
+          // Use lazy import if available (workers), otherwise dynamic import (Node.js)
+          const exported = options?.lazyRoutes?.pages?.[route.file]
+            ? await options.lazyRoutes.pages[route.file]()
+            : await import(toAbsolute(buildInfo.serverJsPath))
           const loaderData = await exported.loader?.(loaderProps)
 
           const headers = new Headers()
           headers.set('content-type', 'text/html')
 
-          const rendered = await render({
+          const rendered = await (await getRender())({
             mode: route.type,
             loaderData,
             loaderProps,
@@ -142,10 +191,28 @@ url: ${url}`)
         const htmlPath = routeMap[url.pathname] || routeMap[buildInfo?.cleanPath]
 
         if (htmlPath) {
-          const html = await FSExtra.readFile(join('dist/client', htmlPath), 'utf-8')
-          const headers = new Headers()
-          headers.set('content-type', 'text/html')
-          return new Response(html, { headers, status: route.isNotFound ? 404 : 200 })
+          // Try Worker ASSETS binding first (for Cloudflare Workers), fall back to filesystem
+          const fetchStaticHtml = getFetchStaticHtml()
+          let html: string | null = null
+
+          if (fetchStaticHtml) {
+            html = await fetchStaticHtml(htmlPath)
+          }
+
+          if (!html) {
+            // Fall back to filesystem (Node.js)
+            try {
+              html = await readFile(join('dist/client', htmlPath), 'utf-8')
+            } catch {
+              // File not found
+            }
+          }
+
+          if (html) {
+            const headers = new Headers()
+            headers.set('content-type', 'text/html')
+            return new Response(html, { headers, status: route.isNotFound ? 404 : 200 })
+          }
         }
       }
     },
@@ -161,14 +228,17 @@ url: ${url}`)
           // But if we handle every matching static asset here, it seems to break some of the static routes.
           // So we only handle it if there's a matching not-found or dynamic route, to prevent One from taking over the static asset.
           // 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.
-          const staticAssetResponse = await serveStaticAssets({ context })
-          if (staticAssetResponse) {
-            return await runMiddlewares(
-              requestHandlers,
-              request,
-              route,
-              async () => staticAssetResponse
-            )
+          // Note: serveStaticAssets is optional - workers handle static assets via platform config
+          if (options?.serveStaticAssets) {
+            const staticAssetResponse = await options.serveStaticAssets({ context })
+            if (staticAssetResponse) {
+              return await runMiddlewares(
+                requestHandlers,
+                request,
+                route,
+                async () => staticAssetResponse
+              )
+            }
           }
         }
 
@@ -321,6 +391,7 @@ url: ${url}`)
         // for now just change this
         const loaderRoute = {
           ...route,
+          routeFile: route.file, // preserve original for lazy route lookup
           file: route.loaderServerPath || c.req.path,
         }
 

package/src/server/staticHtmlFetcher.ts

@@ -0,0 +1,10 @@
+// Global function for fetching static HTML in Workers (set per-request)
+let _fetchStaticHtml: ((path: string) => Promise<string | null>) | null = null
+
+export function setFetchStaticHtml(fn: ((path: string) => Promise<string | null>) | null) {
+  _fetchStaticHtml = fn
+}
+
+export function getFetchStaticHtml() {
+  return _fetchStaticHtml
+}

package/src/useLoader.ts

@@ -92,7 +92,7 @@ export function useLoaderState<
   // (the pathname is already resolved like /docs/getting-started, not /docs/[slug])
   const currentPath = pathname.replace(/\/index$/, '').replace(/\/$/, '') || '/'
 
-  // server-side
+  // server-side only - typeof window check ensures this never runs on client
   if (typeof window === 'undefined' && loader) {
     const serverData = useAsyncFn(
       loader,