weifuwu 0.1.0 → 0.2.1

package/AGENTS.md

@@ -9,7 +9,7 @@ This is the weifuwu HTTP framework — pure Node.js, no build step.
 ## TypeScript rules
 
 - All imports must use explicit `.ts` extensions (e.g. `import { x } from './foo.ts'`)
-- Node.js v26+ supports TypeScript natively with `--experimental-strip-types`
+- Node.js v24+ supports TypeScript natively (no `--experimental-strip-types` needed)
 - No `tsc` compiler needed for runtime (native TS via Node.js)
 
 ## Code conventions
@@ -28,9 +28,67 @@ This is the weifuwu HTTP framework — pure Node.js, no build step.
 - `graphql` + `@graphql-tools/schema` for GraphQL
 - `ai` (Vercel AI SDK) for AI streaming
 - `zod` for request validation
+- `react` + `react-dom` for `.tsx()` SSR + hydration
+- `esbuild` for hydration bundle compilation
 - Node.js built-in `WebSocket` for WebSocket clients
 - Node.js built-in `zlib` for response compression
 
+## tsx() — React SSR + Auto Hydration
+
+`tsx({ dir })` — creates a Router from a React pages directory:
+
+```ts
+type TsxRoute = {
+  component: React.ComponentType<any>
+  props?: Record<string, any>       // custom props (merged with params + query)
+  source?: string                   // component source path → enables hydration
+}
+
+type TsxHandler = (
+  req: Request,
+  ctx: Context,
+) => TsxRoute | Promise<TsxRoute>
+```
+
+- SSR via `react-dom/server` `renderToReadableStream`
+- Props are serialized as `window.__WEIFUWU_PROPS` in HTML
+- Hydration: esbuild lazily compiles source → client bundle served at `/_wfw/client/`
+- Props passed to component: `{ ...props, params, query }` (never `req`/`ctx`)
+
+### File conventions
+
+```
+pages/
+  page.tsx              → GET /           (React component, default export)
+  layout.tsx            → root layout     (wraps all pages)
+  about/page.tsx        → GET /about
+  blog/[slug]/
+    page.tsx            → GET /blog/:slug
+    load.ts             → data fetching   (server-only, default export)
+    route.ts            → POST /blog/:slug (API, named exports GET/POST/...)
+  blog/layout.tsx       → /blog/* layout  (auto-wraps blog pages)
+```
+
+- `page.tsx` — default export = React component, receives `{ params, query }` + load data
+- `load.ts` — default export = async function `({ params, query }) => props`, server-only
+- `layout.tsx` — default export = React component with `{ children }`, auto-nested by directory level
+- `route.ts` — named exports `GET`/`POST`/`PUT`/`DELETE`/`PATCH`, standard Handler signature
+
+### Usage
+
+```ts
+import { serve, Router } from 'weifuwu'
+import { tsx } from 'weifuwu/tsx'
+
+const r = new Router()
+r.use('/', await tsx({ dir: './pages/' }))
+
+// Other features coexist
+r.ws('/chat', { message(ws, _, data) { ws.send(data) } })
+
+serve(r.handler())
+```
+
 ## Testing
 
 ```ts#test/example.test.ts

package/compress.ts

@@ -60,7 +60,7 @@ export function compress(options?: CompressOptions): Middleware {
     headers.delete('Content-Range')
     headers.set('Vary', 'Accept-Encoding')
 
-    return new Response(compressed, {
+    return new Response(compressed as BodyInit, {
       status: res.status,
       statusText: res.statusText,
       headers,

package/index.ts

@@ -3,6 +3,8 @@ export { serve } from './serve.ts'
 export type { ServeOptions, Server } from './serve.ts'
 export { Router } from './router.ts'
 export type { WebSocketHandler, GraphQLOptions, AIHandler } from './router.ts'
+export { tsx } from './tsx.ts'
+export type { TsxOptions } from './tsx.ts'
 export { auth, cors, logger } from './middleware.ts'
 export type { AuthOptions, CORSOptions, LoggerOptions } from './middleware.ts'
 export { serveStatic } from './static.ts'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "weifuwu",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Web-standard HTTP framework for Node.js — (req, ctx) => Response",
   "main": "index.ts",
   "scripts": {
@@ -9,13 +9,19 @@
   "dependencies": {
     "@graphql-tools/schema": "^10",
     "ai": "^6",
+    "esbuild": "^0.28.0",
     "graphql": "^16",
+    "react": "^19",
+    "react-dom": "^19",
     "ws": "^8",
     "zod": "^4.4.3"
   },
   "type": "module",
   "license": "MIT",
   "devDependencies": {
-    "@types/ws": "^8.18.1"
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@types/ws": "^8.18.1",
+    "typescript": "^6.0.3"
   }
 }

package/serve.ts

@@ -39,7 +39,7 @@ export function createRequest(req: IncomingMessage, body: Buffer): [Request, Rec
     method: req.method?.toUpperCase() ?? 'GET',
     headers,
     body: (req.method !== 'GET' && req.method !== 'HEAD' && body.length > 0)
-      ? body
+      ? body as BodyInit
       : null,
   })
 

package/static.ts

@@ -73,7 +73,7 @@ export function serveStatic(root: string, options?: ServeStaticOptions): Handler
       }
 
       const stream = fileHandle.readableWebStream()
-      return new Response(stream, { headers })
+      return new Response(stream as unknown as BodyInit, { headers })
     } catch (err) {
       if (fileHandle) await fileHandle.close().catch(() => {})
       if ((err as NodeJS.ErrnoException)?.code === 'ENOENT') {

package/test/fixtures/pages/about/page.tsx

@@ -0,0 +1,3 @@
+export default function About() {
+  return <h1>About</h1>
+}

package/test/fixtures/pages/blog/[slug]/load.ts

@@ -0,0 +1,3 @@
+export default async function load({ params }: { params: { slug: string } }) {
+  return { post: { title: `Post: ${params.slug}` } }
+}

package/test/fixtures/pages/blog/[slug]/page.tsx

@@ -0,0 +1,3 @@
+export default function Post({ post, params }: { post?: { title: string }; params: { slug: string } }) {
+  return <article><h1>{post?.title ?? params.slug}</h1></article>
+}

package/test/fixtures/pages/blog/[slug]/route.ts

@@ -0,0 +1,7 @@
+export async function GET(req: Request, ctx: { params: { slug: string } }) {
+  return Response.json({ method: 'GET', slug: ctx.params.slug })
+}
+
+export async function POST(req: Request, ctx: { params: { slug: string } }) {
+  return Response.json({ method: 'POST', slug: ctx.params.slug })
+}

package/test/fixtures/pages/blog/layout.tsx

@@ -0,0 +1,3 @@
+export default function BlogLayout({ children }: { children: any }) {
+  return <div className="blog-layout">{children}</div>
+}

package/test/fixtures/pages/layout.tsx

@@ -0,0 +1,12 @@
+export default function RootLayout({ children }: { children: any }) {
+  return (
+    <html>
+      <head>
+        <title>App</title>
+      </head>
+      <body>
+        <div id="__weifuwu_root">{children}</div>
+      </body>
+    </html>
+  )
+}

package/test/fixtures/pages/page.tsx

@@ -0,0 +1,3 @@
+export default function Home() {
+  return <h1>Home</h1>
+}

package/test/tsx.test.ts

@@ -0,0 +1,285 @@
+import { describe, it, before, after } from 'node:test'
+import assert from 'node:assert/strict'
+import { tsx } from '../tsx.ts'
+import { serve, Router } from '../index.ts'
+import type { Server } from '../serve.ts'
+
+const fixtures = './test/fixtures/pages'
+
+describe('tsx()', () => {
+  describe('SSR rendering', () => {
+    it('renders root page', async () => {
+      const r = await tsx({ dir: fixtures })
+      const res = await r.handler()(
+        new Request('http://localhost/'),
+        { params: {}, query: {} },
+      )
+      assert.equal(res.status, 200)
+
+      const html = await res.text()
+      assert.match(html, /<!DOCTYPE html>/)
+      assert.match(html, /<h1>Home<\/h1>/)
+    })
+
+    it('renders nested static page', async () => {
+      const r = await tsx({ dir: fixtures })
+      const res = await r.handler()(
+        new Request('http://localhost/about'),
+        { params: {}, query: {} },
+      )
+      assert.equal(res.status, 200)
+
+      const html = await res.text()
+      assert.match(html, /<h1>About<\/h1>/)
+    })
+
+    it('renders dynamic route with params', async () => {
+      const r = await tsx({ dir: fixtures })
+      const res = await r.handler()(
+        new Request('http://localhost/blog/hello-world'),
+        { params: { slug: 'hello-world' }, query: {} },
+      )
+      assert.equal(res.status, 200)
+
+      const html = await res.text()
+      assert.match(html, /hello-world/)
+    })
+
+    it('passes query params', async () => {
+      const r = await tsx({ dir: fixtures })
+      const res = await r.handler()(
+        new Request('http://localhost/?foo=bar'),
+        { params: {}, query: { foo: 'bar' } },
+      )
+      assert.equal(res.status, 200)
+      assert.equal((await res.text()).includes('Home'), true)
+    })
+
+    it('returns 404 for non-existent route', async () => {
+      const r = await tsx({ dir: fixtures })
+      const res = await r.handler()(
+        new Request('http://localhost/nonexistent'),
+        { params: {}, query: {} },
+      )
+      assert.equal(res.status, 404)
+    })
+  })
+
+  describe('data loading (load.ts)', () => {
+    it('calls load() and passes data as props', async () => {
+      const r = await tsx({ dir: fixtures })
+      const res = await r.handler()(
+        new Request('http://localhost/blog/my-post'),
+        { params: { slug: 'my-post' }, query: {} },
+      )
+      assert.equal(res.status, 200)
+
+      const html = await res.text()
+      assert.match(html, /Post: my-post/)
+    })
+
+    it('serializes props to __WEIFUWU_PROPS', async () => {
+      const r = await tsx({ dir: fixtures })
+      const res = await r.handler()(
+        new Request('http://localhost/blog/my-post'),
+        { params: { slug: 'my-post' }, query: {} },
+      )
+      const html = await res.text()
+      assert.match(html, /__WEIFUWU_PROPS/)
+      assert.match(html, /Post: my-post/)
+    })
+  })
+
+  describe('layout chain', () => {
+    it('wraps page with root layout', async () => {
+      const r = await tsx({ dir: fixtures })
+      const res = await r.handler()(
+        new Request('http://localhost/'),
+        { params: {}, query: {} },
+      )
+
+      const html = await res.text()
+      assert.match(html, /<html>/)
+      assert.match(html, /<title>App<\/title>/)
+      assert.match(html, /__weifuwu_root/)
+    })
+
+    it('wraps blog pages with nested layouts', async () => {
+      const r = await tsx({ dir: fixtures })
+      const res = await r.handler()(
+        new Request('http://localhost/blog/some-post'),
+        { params: { slug: 'some-post' }, query: {} },
+      )
+
+      const html = await res.text()
+      assert.match(html, /blog-layout/)
+    })
+  })
+
+  describe('route.ts API', () => {
+    it('GET returns SSR page, not route.ts', async () => {
+      const r = await tsx({ dir: fixtures })
+      const res = await r.handler()(
+        new Request('http://localhost/blog/my-route'),
+        { params: { slug: 'my-route' }, query: {} },
+      )
+      // GET is handled by page.tsx SSR, not route.ts
+      const html = await res.text()
+      assert.match(html, /<!DOCTYPE html>/)
+      assert.match(html, /my-route/)
+    })
+
+    it('handles POST from route.ts', async () => {
+      const r = await tsx({ dir: fixtures })
+      const res = await r.handler()(
+        new Request('http://localhost/blog/my-route', { method: 'POST' }),
+        { params: { slug: 'my-route' }, query: {} },
+      )
+
+      const data = await res.json() as any
+      assert.equal(data.method, 'POST')
+      assert.equal(data.slug, 'my-route')
+    })
+  })
+
+  describe('hydration', () => {
+    it('injects hydration scripts', async () => {
+      const r = await tsx({ dir: fixtures })
+      const res = await r.handler()(
+        new Request('http://localhost/'),
+        { params: {}, query: {} },
+      )
+
+      const html = await res.text()
+      assert.match(html, /<script type="module"/)
+      assert.match(html, /__wfw\/client\//)
+    })
+
+    it('serves hydration bundle', async () => {
+      const r = await tsx({ dir: fixtures })
+      const res1 = await r.handler()(
+        new Request('http://localhost/'),
+        { params: {}, query: {} },
+      )
+      const html = await res1.text()
+      const match = html.match(/src="(\/__wfw\/client\/[^"]+)"/)
+      assert.ok(match)
+
+      const res2 = await r.handler()(
+        new Request(`http://localhost${match[1]}`),
+        { params: {}, query: {} },
+      )
+      assert.equal(res2.status, 200)
+      const js = await res2.text()
+      assert.match(js, /hydrateRoot/)
+    })
+  })
+
+  describe('mounting via router.use()', () => {
+    it('works as sub-router', async () => {
+      const pages = await tsx({ dir: fixtures })
+      const main = new Router()
+      main.use('/app', pages)
+
+      const res = await main.handler()(
+        new Request('http://localhost/app/about'),
+        { params: {}, query: {} },
+      )
+      assert.equal(res.status, 200)
+      const html = await res.text()
+      assert.match(html, /<h1>About<\/h1>/)
+    })
+
+    it('coexists with other Router features', async () => {
+      const pages = await tsx({ dir: fixtures })
+      const main = new Router()
+      main.use('/app', pages)
+      main.get('/api/ping', () => Response.json({ ok: true }))
+
+      const res1 = await main.handler()(
+        new Request('http://localhost/app/about'),
+        { params: {}, query: {} },
+      )
+      assert.equal(res1.status, 200)
+      const html = await res1.text()
+      assert.match(html, /<h1>About<\/h1>/)
+
+      const res2 = await main.handler()(
+        new Request('http://localhost/api/ping'),
+        { params: {}, query: {} },
+      )
+      const data = await res2.json() as any
+      assert.equal(data.ok, true)
+    })
+  })
+
+  describe('end-to-end via serve()', () => {
+    let server: Server
+    let url: string
+
+    before(async () => {
+      const pages = await tsx({ dir: fixtures })
+      server = serve(pages.handler(), { port: 0 })
+      await server.ready
+      url = `http://localhost:${server.port}`
+    })
+
+    after(() => server.stop())
+
+    it('serves page via HTTP', async () => {
+      const res = await fetch(`${url}/about`)
+      assert.equal(res.status, 200)
+      const html = await res.text()
+      assert.match(html, /<h1>About<\/h1>/)
+    })
+
+    it('serves hydration bundle via HTTP', async () => {
+      const res = await fetch(`${url}/`)
+      const html = await res.text()
+      const match = html.match(/src="(\/__wfw\/client\/[^"]+)"/)
+      assert.ok(match)
+
+      const bundleRes = await fetch(`${url}${match[1]}`)
+      assert.equal(bundleRes.status, 200)
+      const js = await bundleRes.text()
+      assert.match(js, /hydrateRoot/)
+    })
+
+    it('serves dynamic route and API', async () => {
+      const res = await fetch(`${url}/blog/test-article`)
+      assert.equal(res.status, 200)
+      const html = await res.text()
+      assert.match(html, /Post: test-article/)
+    })
+  })
+
+  describe('edge cases', () => {
+    it('non-existent directory returns empty router', async () => {
+      const r = await tsx({ dir: './test/fixtures/nonexistent' })
+      const res = await r.handler()(
+        new Request('http://localhost/'),
+        { params: {}, query: {} },
+      )
+      assert.equal(res.status, 404)
+    })
+
+    it('empty directory returns empty router', async () => {
+      const r = await tsx({ dir: './test/fixtures/empty' })
+      const res = await r.handler()(
+        new Request('http://localhost/'),
+        { params: {}, query: {} },
+      )
+      assert.equal(res.status, 404)
+    })
+
+    it('handles page.ts without tsx extension', async () => {
+      // about/ has page.tsx only, but scanPages also checks page.ts
+      const r = await tsx({ dir: fixtures })
+      const res = await r.handler()(
+        new Request('http://localhost/about'),
+        { params: {}, query: {} },
+      )
+      assert.equal(res.status, 200)
+    })
+  })
+})

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "strict": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "allowImportingTsExtensions": true
+  },
+  "include": ["*.ts", "test/**/*.ts"]
+}

package/tsx.ts

@@ -0,0 +1,354 @@
+import { createElement } from 'react'
+import { renderToReadableStream } from 'react-dom/server'
+import * as esbuild from 'esbuild'
+import { readdirSync, statSync, existsSync, mkdirSync } from 'node:fs'
+import { join, relative, resolve, sep, dirname } from 'node:path'
+import { pathToFileURL } from 'node:url'
+import { createHash } from 'node:crypto'
+import { Router } from './router.ts'
+import type { Handler } from './types.ts'
+
+export interface TsxOptions {
+  dir: string
+}
+
+type PageEntry = {
+  route: string
+  entryPath: string
+  loadPath?: string
+  layouts: string[]
+  routePath?: string
+}
+
+// ── helpers ────────────────────────────────────────────────────────────────
+
+function id(s: string): string {
+  return createHash('md5').update(s).digest('hex').slice(0, 8)
+}
+
+function concatUint8(chunks: Uint8Array[]): Uint8Array {
+  const len = chunks.reduce((a, c) => a + c.length, 0)
+  const out = new Uint8Array(len)
+  let off = 0
+  for (const c of chunks) {
+    out.set(c, off)
+    off += c.length
+  }
+  return out
+}
+
+async function readStream(stream: ReadableStream): Promise<string> {
+  const chunks: Uint8Array[] = []
+  const reader = stream.getReader()
+  while (true) {
+    const { done, value } = await reader.read()
+    if (done) break
+    chunks.push(value)
+  }
+  return new TextDecoder().decode(concatUint8(chunks))
+}
+
+// ── file scanning ──────────────────────────────────────────────────────────
+
+function scanPages(dir: string): PageEntry[] {
+  const pages: PageEntry[] = []
+
+  function walk(current: string) {
+    let entries: string[]
+    try {
+      entries = readdirSync(current)
+    } catch {
+      return
+    }
+
+    const dirs: string[] = []
+    for (const name of entries) {
+      const full = join(current, name)
+      const st = statSync(full)
+      if (st.isDirectory()) {
+        if (!name.startsWith('.')) dirs.push(full)
+      }
+    }
+
+    // Check for page.tsx in this directory
+    const pagePath = join(current, 'page.tsx')
+    const tsPagePath = join(current, 'page.ts')
+    let entryPath = ''
+    if (existsSync(pagePath)) {
+      entryPath = pagePath
+    } else if (existsSync(tsPagePath)) {
+      entryPath = tsPagePath
+    }
+
+    if (entryPath) {
+      let relPath = relative(dir, entryPath).replace(sep, '/')
+      // Remove page.tsx / page.ts suffix
+      relPath = relPath.replace(/\/page\.tsx?$/, '')
+      relPath = relPath.replace(/^page\.tsx?$/, '')
+
+      const route = filePathToRoute(relPath)
+      const layouts = resolveLayouts(current, dir)
+      const loadPath = existsSync(join(current, 'load.ts'))
+        ? join(current, 'load.ts') : undefined
+      const rPath = existsSync(join(current, 'route.ts'))
+        ? join(current, 'route.ts') : undefined
+
+      pages.push({
+        route,
+        entryPath,
+        loadPath,
+        layouts,
+        routePath: rPath,
+      })
+    }
+
+    for (const d of dirs) walk(d)
+  }
+
+  walk(dir)
+  return pages
+}
+
+function filePathToRoute(relPath: string): string {
+  let route = relPath.replace(/\\/g, '/')
+  // Remove page.tsx suffix => already done in scanPages
+  // [...rest] → *
+  route = route.replace(/\[\.\.\.(\w+)\]/g, '*')
+  // [slug] → :slug
+  route = route.replace(/\[(\w+)\]/g, ':$1')
+  return route.startsWith('/') ? route : '/' + route
+}
+
+function resolveLayouts(dir: string, pagesDir: string): string[] {
+  const layouts: string[] = []
+  let current = dir
+
+  while (current.startsWith(pagesDir)) {
+    const p = join(current, 'layout.tsx')
+    if (existsSync(p)) {
+      layouts.push(p)
+    }
+    const parent = dirname(current)
+    if (parent === current) break
+    current = parent
+  }
+
+  // Return outermost first
+  return layouts.reverse()
+}
+
+// ── compilation ────────────────────────────────────────────────────────────
+
+const esbId = '__weifuwu_tsx_build'
+
+async function compileAll(
+  files: string[],
+  outDir: string,
+  platform: 'node' | 'browser',
+): Promise<void> {
+  const entryPoints: Record<string, string> = {}
+  for (const f of files) {
+    entryPoints[id(f)] = f
+  }
+
+  await esbuild.build({
+    entryPoints,
+    outdir: outDir,
+    format: 'esm',
+    platform: platform === 'node' ? 'node' : 'browser',
+    jsx: 'automatic',
+    jsxImportSource: 'react',
+    bundle: platform === 'browser',
+    write: true,
+    allowOverwrite: true,
+  })
+}
+
+function compiledUrl(filePath: string, outDir: string): string {
+  const hash = id(join(outDir, id(filePath)))
+  const p = join(outDir, id(filePath) + '.js')
+  return pathToFileURL(p).href
+}
+
+// ── client bundle (lazy) ───────────────────────────────────────────────────
+
+const clientBundleCache = new Map<string, Uint8Array>()
+const clientRouteLog = new WeakMap<object, Set<string>>()
+
+async function getOrBuildClientBundle(
+  entryPath: string,
+  layoutPaths: string[],
+  pagesDir: string,
+  router: Router,
+): Promise<{ url: string } | null> {
+  const key = id(entryPath)
+  const url = `/__wfw/client/${key}.js`
+
+  if (!clientRouteLog.get(router)?.has(url)) {
+    let buf = clientBundleCache.get(key)
+
+    if (!buf) {
+      try {
+        const layoutsImport = layoutPaths.map((p, i) =>
+          `import L${i} from${JSON.stringify(p)};`,
+        ).join('')
+        const layoutsWrap = layoutPaths.map((_, i) => {
+          const idx = layoutPaths.length - 1 - i
+          return `el=createElement(L${idx},null,el);`
+        }).join('')
+
+        const code = [
+          `import{hydrateRoot}from'react-dom/client';`,
+          `import{createElement}from'react';`,
+          `import P from${JSON.stringify(entryPath)};`,
+          layoutsImport,
+          `const p=window.__WEIFUWU_PROPS;`,
+          `let el=createElement(P,p);`,
+          layoutsWrap,
+          `hydrateRoot(document.getElementById('__weifuwu_root'),el);`,
+        ].join('')
+
+        const result = await esbuild.build({
+          stdin: { contents: code, loader: 'tsx', resolveDir: pagesDir },
+          bundle: true,
+          format: 'esm',
+          jsx: 'automatic',
+          jsxImportSource: 'react',
+          write: false,
+          minify: true,
+        })
+
+        buf = result.outputFiles[0].contents
+        clientBundleCache.set(key, buf)
+      } catch (err) {
+        console.error('hydration bundle failed:', err)
+        return null
+      }
+    }
+
+    router.get(url, () => new Response(buf! as BodyInit, {
+      headers: { 'content-type': 'application/javascript; charset=utf-8' },
+    }))
+
+    const set = clientRouteLog.get(router) ?? new Set()
+    set.add(url)
+    clientRouteLog.set(router, set)
+  }
+
+  return { url }
+}
+
+// ── SSR handler ────────────────────────────────────────────────────────────
+
+function makeSsrHandler(
+  Component: any,
+  loadFn: any | undefined,
+  layouts: any[],
+  entryPath: string,
+  layoutPaths: string[],
+  pagesDir: string,
+  router: Router,
+): Handler {
+  return async (req, ctx) => {
+    const loadProps = loadFn ? await loadFn({ params: ctx.params, query: ctx.query }) : {}
+    const allProps = { ...loadProps, params: ctx.params, query: ctx.query }
+
+    let element = createElement(Component, allProps)
+    for (let i = layouts.length - 1; i >= 0; i--) {
+      element = createElement(layouts[i], null, element)
+    }
+
+    const stream = await renderToReadableStream(element)
+    const body = await readStream(stream)
+
+    const scripts: string[] = []
+    scripts.push(`<script>window.__WEIFUWU_PROPS=${JSON.stringify(allProps)}</script>`)
+
+    const bundle = await getOrBuildClientBundle(entryPath, layoutPaths, pagesDir, router)
+    if (bundle) {
+      scripts.push(`<script type="module" src="${bundle.url}"></script>`)
+    }
+
+    const html = `<!DOCTYPE html>\n${body}\n${scripts.join('\n')}`
+
+    return new Response(html, {
+      headers: { 'content-type': 'text/html; charset=utf-8' },
+    })
+  }
+}
+
+// ── main export ────────────────────────────────────────────────────────────
+
+export async function tsx(options: TsxOptions): Promise<Router> {
+  const pagesDir = resolve(options.dir)
+  const outDir = join(pagesDir, '..', '.weifuwu', 'ssr')
+  const clientDir = join(pagesDir, '..', '.weifuwu', 'client')
+
+  // 1. Scan
+  const pages = scanPages(pagesDir)
+  if (pages.length === 0) return new Router()
+
+  // 2. Collect all files to compile
+  const allFiles = new Set<string>()
+  const loadMap = new Map<string, string>()
+  const layoutMap = new Map<string, string[]>()
+
+  for (const p of pages) {
+    allFiles.add(p.entryPath)
+    if (p.loadPath) {
+      allFiles.add(p.loadPath)
+      loadMap.set(p.entryPath, p.loadPath)
+    }
+    for (const lp of p.layouts) allFiles.add(lp)
+    layoutMap.set(p.entryPath, [...p.layouts])
+
+    if (p.routePath) allFiles.add(p.routePath)
+  }
+
+  // 3. Compile for SSR
+  mkdirSync(outDir, { recursive: true })
+  await compileAll([...allFiles], outDir, 'node')
+
+  // 4. Import and register routes
+  const router = new Router()
+
+  for (const p of pages) {
+    const url = compiledUrl(p.entryPath, outDir)
+    const mod = await import(url)
+    const Component = mod.default
+
+    let loadFn: any
+    if (p.loadPath) {
+      const loadUrl = compiledUrl(p.loadPath, outDir)
+      const modLoad = await import(loadUrl)
+      loadFn = modLoad.default
+    }
+
+    const layoutComponents: any[] = []
+    for (const lp of p.layouts) {
+      const lUrl = compiledUrl(lp, outDir)
+      const modL = await import(lUrl)
+      layoutComponents.push(modL.default)
+    }
+
+    const handler = makeSsrHandler(
+      Component, loadFn, layoutComponents,
+      p.entryPath, p.layouts, pagesDir, router,
+    )
+    router.get(p.route, handler)
+
+    // route.ts — skip GET (handled by page.tsx SSR)
+    if (p.routePath) {
+      const rUrl = compiledUrl(p.routePath, outDir)
+      const modR = await import(rUrl)
+      const methods = (['POST', 'PUT', 'DELETE', 'PATCH', 'HEAD', 'OPTIONS'] as const)
+      for (const method of methods) {
+        if (modR[method]) {
+          router.route(method, p.route, modR[method])
+        }
+      }
+    }
+  }
+
+  return router
+}