weifuwu 0.31.1 → 0.32.0

package/dist/react/index.js

@@ -1,12 +1,116 @@
 // src/react/index.ts
-import { Fragment as Fragment2 } from "react";
+import { createElement as createElement2 } from "react";
+import { renderToReadableStream } from "react-dom/server";
 
-// src/react/render.ts
-import {
-  createElement,
-  Fragment
-} from "react";
-import { renderToString, renderToReadableStream } from "react-dom/server";
+// src/react/compile.ts
+import { mkdir, writeFile, readFile } from "node:fs/promises";
+import { resolve, join, dirname } from "node:path";
+import { createHash } from "node:crypto";
+import { existsSync } from "node:fs";
+var EXTERNAL_PKGS = [
+  "react",
+  "react/jsx-runtime",
+  "react-dom",
+  "react-dom/server",
+  "react-dom/client",
+  "weifuwu",
+  "weifuwu/react"
+];
+var FRAMEWORK_IMPORTS = [
+  "react",
+  "react/jsx-runtime",
+  "react-dom",
+  "react-dom/server",
+  "react-dom/client",
+  "weifuwu",
+  "weifuwu/react"
+];
+var memCache = /* @__PURE__ */ new Map();
+function buildResolveMap() {
+  const map = {};
+  for (const spec of FRAMEWORK_IMPORTS) {
+    try {
+      map[spec] = import.meta.resolve(spec);
+    } catch {
+    }
+  }
+  return map;
+}
+var _resolveMap = null;
+function resolveMap() {
+  if (!_resolveMap) _resolveMap = buildResolveMap();
+  return _resolveMap;
+}
+function rewriteImports(code) {
+  const map = resolveMap();
+  let result = code;
+  for (const [spec, url] of Object.entries(map)) {
+    const quoted = JSON.stringify(spec);
+    const escaped = quoted.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    result = result.replace(new RegExp(`(from\\s+)${escaped}`, "g"), `$1${JSON.stringify(url)}`).replace(new RegExp(`(import\\s+)${escaped}(\\s*;)`, "g"), `$1${JSON.stringify(url)}$2`).replace(new RegExp(`(export\\s+.*?from\\s+)${escaped}`, "g"), `$1${JSON.stringify(url)}`);
+  }
+  return result;
+}
+var _cacheDir = null;
+function setReactCacheDir(dir) {
+  _cacheDir = dir;
+}
+function getCacheDir() {
+  if (_cacheDir) return _cacheDir;
+  _cacheDir = join(process.cwd(), "node_modules", ".weifuwu", "react");
+  return _cacheDir;
+}
+async function loadTsxModule(entryPath) {
+  const abs = resolve(entryPath);
+  let source;
+  try {
+    source = await readFile(abs, "utf-8");
+  } catch {
+    throw new Error(`Cannot read file: ${entryPath}`);
+  }
+  const sourceHash = createHash("sha256").update(source).digest("hex").slice(0, 16);
+  const memCached = memCache.get(abs);
+  if (memCached && memCached.sourceHash === sourceHash) {
+    return memCached.mod;
+  }
+  const tmpDir = getCacheDir();
+  const tmpFile = join(tmpDir, `${sourceHash}.mjs`);
+  if (existsSync(tmpFile)) {
+    try {
+      const mod2 = await import(tmpFile + "?" + sourceHash);
+      memCache.set(abs, { sourceHash, mod: mod2 });
+      return mod2;
+    } catch {
+    }
+  }
+  const esbuild = await import("esbuild");
+  const result = await esbuild.build({
+    entryPoints: [abs],
+    bundle: true,
+    write: false,
+    format: "esm",
+    platform: "node",
+    jsx: "automatic",
+    external: EXTERNAL_PKGS,
+    logLevel: "silent"
+  });
+  let code = result.outputFiles[0]?.text ?? "";
+  if (!code) throw new Error(`esbuild produced empty output for ${entryPath}`);
+  code = rewriteImports(code);
+  await mkdir(dirname(tmpFile), { recursive: true });
+  await writeFile(tmpFile, code);
+  const mod = await import(tmpFile + "?" + sourceHash);
+  memCache.set(abs, { sourceHash, mod });
+  return mod;
+}
+async function loadTsxComponent(entryPath) {
+  const mod = await loadTsxModule(entryPath);
+  if (mod.default && typeof mod.default === "function") return mod.default;
+  for (const [, val] of Object.entries(mod)) {
+    if (typeof val === "function") return val;
+  }
+  throw new Error(`No component export found in ${entryPath}. Export a default or named component function.`);
+}
 
 // src/react/context.ts
 import { createContext } from "react";
@@ -21,322 +125,786 @@ function getServerDataContext() {
 }
 var ServerDataContext = getServerDataContext();
 
-// src/react/render.ts
-var encoder = new TextEncoder();
-var decoder = new TextDecoder();
-function escapeAttr(s) {
-  return s.replace(/&/g, "&").replace(/"/g, """);
+// src/middleware/tailwind-dev.ts
+import { resolve as resolve2 } from "node:path";
+import { stat, readFile as readFile2, glob } from "node:fs/promises";
+function escapeHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
-function buildHeadTags(head) {
-  if (!head) return "";
-  const tags = [];
-  if (head.title) tags.push(`<title>${escapeAttr(head.title)}</title>`);
-  if (head.meta) {
-    for (const [name, content] of Object.entries(head.meta)) {
-      tags.push(`<meta name="${escapeAttr(name)}" content="${escapeAttr(content)}">`);
+function defaultErrorTemplate(errors) {
+  return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Tailwind Build Error</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: system-ui; background: #1a1a2e; color: #e0e0e0; padding: 2rem; }
+    .overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
+    .card { background: #16213e; border: 1px solid #06b6d4; border-radius: 12px; padding: 2rem; max-width: 800px; width: 100%; box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
+    h1 { color: #06b6d4; font-size: 1.5rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
+    pre { background: #0f0f23; padding: 1.5rem; border-radius: 8px; overflow: auto; font-size: 0.85rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
+  </style>
+</head>
+<body>
+  <div class="overlay">
+    <div class="card">
+      <h1>\u{1F3A8} Tailwind CSS Build Error</h1>
+      <pre>${escapeHtml(errors)}</pre>
+    </div>
+  </div>
+</body>
+</html>`;
+}
+var TW_CANDIDATE_RE = /[a-z][\w-]*(?::[a-z][\w-]*)*(?:-\[[^\]]*\])*(?:\/[0-9]+)?/gi;
+var CLASS_CONTEXT_RE = /(?:class(?:Name)?\s*[=:]\s*["'`]([^"'`]+)["'`]|["'`]([^"'`\n]{2,})["'`])/g;
+async function extractCandidates(patterns, root) {
+  const seen = /* @__PURE__ */ new Set();
+  for (const pattern of patterns) {
+    const resolved = resolve2(root, pattern);
+    try {
+      for await (const file of glob(resolved)) {
+        try {
+          const content = await readFile2(file, "utf-8");
+          for (const m of content.matchAll(CLASS_CONTEXT_RE)) {
+            const str = m[1] ?? m[2];
+            if (!str) continue;
+            for (const c of str.matchAll(TW_CANDIDATE_RE)) {
+              seen.add(c[0]);
+            }
+          }
+        } catch {
+        }
+      }
+    } catch {
     }
   }
-  if (head.links) {
-    for (const link of head.links) {
-      const attrs = Object.entries(link).map(([k, v]) => `${k}="${escapeAttr(v)}"`).join(" ");
-      tags.push(`<link ${attrs}>`);
+  return [...seen];
+}
+async function collectFileMtimes(files) {
+  const map = /* @__PURE__ */ new Map();
+  await Promise.all(
+    files.map(async (f) => {
+      try {
+        const s = await stat(f);
+        map.set(f, s.mtimeMs);
+      } catch {
+      }
+    })
+  );
+  return map;
+}
+function isCacheValid(cached) {
+  return Promise.all(
+    [...cached.files].map(async ([file, mtime]) => {
+      try {
+        const s = await stat(file);
+        return s.mtimeMs === mtime;
+      } catch {
+        return false;
+      }
+    })
+  ).then((results) => results.every(Boolean));
+}
+function tailwindDev(opts) {
+  const cacheMode = opts.cache ?? "memory";
+  const errorTemplate = opts.errorTemplate ?? defaultErrorTemplate;
+  const entries = Object.entries(opts.entries).map(([p, e]) => {
+    const path = p.startsWith("/") ? p : "/" + p;
+    const config = typeof e === "string" ? { entry: e } : e;
+    return { path, config };
+  });
+  const cacheStore = /* @__PURE__ */ new Map();
+  let compileFn = null;
+  let loadError = null;
+  async function getCompile() {
+    if (compileFn) return compileFn;
+    try {
+      const mod = await import("@tailwindcss/node");
+      compileFn = mod.compile;
+      return compileFn;
+    } catch (err) {
+      loadError = `@tailwindcss/node is not installed. Run: npm install -D tailwindcss @tailwindcss/node
+
+${String(err)}`;
+      throw new Error(loadError, { cause: err });
     }
   }
-  if (head.scripts) {
-    for (const script of head.scripts) {
-      const entries = Object.entries(script).filter(([, v]) => v !== void 0);
-      const attrs = entries.map(([k, v]) => `${k}="${escapeAttr(v)}"`).join(" ");
-      tags.push(`<script ${attrs}></script>`);
+  async function compileCss(entry) {
+    const compile = await getCompile();
+    const entryAbs = resolve2(entry.entry);
+    const cssSource = await readFile2(entryAbs, "utf-8");
+    const baseDir = resolve2(entry.entry, "..");
+    const deps = [entryAbs];
+    const result = await compile(cssSource, {
+      base: baseDir,
+      onDependency: (p) => {
+        if (!deps.includes(p)) deps.push(p);
+      }
+    });
+    const contentPatterns = entry.content ?? [];
+    for (const src of result.sources) {
+      if (!src.negated) {
+        contentPatterns.push(resolve2(src.base, src.pattern));
+      }
     }
-  }
-  return tags.join("");
-}
-function injectHeadIntoHtml(html, headTags) {
-  if (!headTags) return html;
-  let result = html;
-  if (headTags.includes("<title>")) {
-    const titleMatch = headTags.match(/<title>[^<]*<\/title>/);
-    if (titleMatch) {
-      result = result.replace(/<title>[^<]*<\/title>/, titleMatch[0]);
-      headTags = headTags.replace(titleMatch[0], "");
+    let candidates = [];
+    if (contentPatterns.length > 0) {
+      candidates = await extractCandidates(contentPatterns, baseDir);
     }
-  }
-  if (headTags) {
-    result = result.replace("</head>", headTags + "</head>");
-  }
-  return result;
-}
-function injectHeadIntoStream(sourceStream, headTags) {
-  if (!headTags) return sourceStream;
-  let titleTag = "";
-  let rest = headTags;
-  const titleMatch = headTags.match(/<title>[^<]*<\/title>/);
-  if (titleMatch) {
-    titleTag = titleMatch[0];
-    rest = headTags.replace(titleMatch[0], "");
-  }
-  let titleInjected = !titleTag;
-  let headInjected = !rest;
-  return new ReadableStream({
-    async start(controller) {
-      const reader = sourceStream.getReader();
-      let buffer = "";
+    const css = result.build(candidates);
+    for (const pattern of contentPatterns) {
       try {
-        while (true) {
-          const { done, value } = await reader.read();
-          if (done) break;
-          buffer += decoder.decode(value, { stream: true });
-          if (!titleInjected) {
-            const idx = buffer.indexOf("<title>");
-            const endIdx = buffer.indexOf("</title>", idx);
-            if (idx !== -1 && endIdx !== -1) {
-              controller.enqueue(
-                encoder.encode(buffer.slice(0, idx) + titleTag + buffer.slice(endIdx + 8))
-              );
-              buffer = "";
-              titleInjected = true;
-              continue;
-            }
-          }
-          if (!headInjected) {
-            const idx = buffer.indexOf("</head>");
-            if (idx !== -1) {
-              controller.enqueue(
-                encoder.encode(buffer.slice(0, idx) + rest + buffer.slice(idx))
-              );
-              buffer = "";
-              headInjected = true;
-              continue;
+        for await (const file of glob(resolve2(baseDir, pattern))) {
+          if (!deps.includes(file)) deps.push(file);
+        }
+      } catch {
+      }
+    }
+    const etag = `"tw-${hashCode(css)}"`;
+    return { css, etag, files: deps };
+  }
+  return async (req, ctx, next) => {
+    const url = new URL(req.url);
+    const pathname = url.pathname;
+    const matched = entries.find((e) => e.path === pathname);
+    if (!matched) return next(req, ctx);
+    const { config } = matched;
+    try {
+      if (cacheMode === "memory") {
+        const cached = cacheStore.get(pathname);
+        if (cached) {
+          const valid = await isCacheValid(cached);
+          if (valid) {
+            if (req.headers.get("if-none-match") === cached.etag) {
+              return new Response(null, { status: 304 });
             }
+            return new Response(cached.css, {
+              headers: {
+                "Content-Type": "text/css; charset=utf-8",
+                ETag: cached.etag,
+                "Cache-Control": "no-cache"
+              }
+            });
           }
-          if (titleInjected && headInjected && buffer) {
-            controller.enqueue(encoder.encode(buffer));
-            buffer = "";
-          }
+          cacheStore.delete(pathname);
         }
-        if (buffer) controller.enqueue(encoder.encode(buffer));
-        controller.close();
-      } catch (err) {
-        controller.error(err);
       }
+      const { css, etag, files } = await compileCss(config);
+      if (cacheMode === "memory") {
+        const mtimes = await collectFileMtimes(files);
+        cacheStore.set(pathname, { css, etag, files: mtimes });
+      }
+      return new Response(css, {
+        headers: {
+          "Content-Type": "text/css; charset=utf-8",
+          ETag: etag,
+          "Cache-Control": "no-cache"
+        }
+      });
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      const html = errorTemplate(message);
+      return new Response(html, {
+        status: 500,
+        headers: { "Content-Type": "text/html; charset=utf-8" }
+      });
     }
-  });
+  };
 }
-function wrapElement(element, layouts, data) {
-  let wrapped = element;
-  for (let i = layouts.length - 1; i >= 0; i--) {
-    wrapped = createElement(layouts[i], null, wrapped);
-  }
-  const json = JSON.stringify(data).replace(/</g, "\\u003c");
-  const dataScript = createElement("script", {
-    id: "__WEIFUWU_DATA__",
-    type: "application/json",
-    dangerouslySetInnerHTML: { __html: json }
-  });
-  return createElement(
-    ServerDataContext.Provider,
-    { value: data },
-    createElement(Fragment, null, wrapped, dataScript)
-  );
+function hashCode(s) {
+  let hash = 0;
+  for (let i = 0; i < s.length; i++) {
+    const ch = s.charCodeAt(i);
+    hash = (hash << 5) - hash + ch;
+    hash |= 0;
+  }
+  return Math.abs(hash).toString(36);
 }
-function render(element, layouts, options = {}) {
-  const data = options.data ?? {};
-  const wrapped = wrapElement(element, layouts, data);
-  let html = renderToString(wrapped);
-  const headTags = buildHeadTags(options.head);
-  html = injectHeadIntoHtml(html, headTags);
-  return new Response("<!DOCTYPE html>\n" + html, {
-    status: options.status ?? 200,
-    headers: {
-      "content-type": "text/html; charset=utf-8",
-      ...options.headers
-    }
-  });
+
+// src/middleware/esbuild-dev.ts
+import { resolve as resolve3, relative, dirname as dirname2 } from "node:path";
+import { stat as stat2, readFile as readFile3, realpath } from "node:fs/promises";
+function escapeHtml2(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
-async function renderStream(element, layouts, options = {}) {
-  const data = options.data ?? {};
-  const wrapped = wrapElement(element, layouts, data);
-  const headTags = buildHeadTags(options.head);
-  let stream = await renderToReadableStream(wrapped);
-  stream = injectHeadIntoStream(stream, headTags);
-  const doctype = encoder.encode("<!DOCTYPE html>\n");
-  const combined = new ReadableStream({
-    async start(controller) {
-      controller.enqueue(doctype);
-      try {
-        const reader = stream.getReader();
-        while (true) {
-          const { done, value } = await reader.read();
-          if (done) {
-            controller.close();
+function defaultErrorTemplate2(errors) {
+  return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Build Error</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: system-ui; background: #1a1a2e; color: #e0e0e0; padding: 2rem; }
+    .overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
+    .card { background: #16213e; border: 1px solid #e74c3c; border-radius: 12px; padding: 2rem; max-width: 800px; width: 100%; box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
+    h1 { color: #e74c3c; font-size: 1.5rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
+    pre { background: #0f0f23; padding: 1.5rem; border-radius: 8px; overflow: auto; font-size: 0.85rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
+  </style>
+</head>
+<body>
+  <div class="overlay">
+    <div class="card">
+      <h1>\u26A0 esbuild Build Error</h1>
+      <pre>${escapeHtml2(errors)}</pre>
+    </div>
+  </div>
+</body>
+</html>`;
+}
+async function collectDeps(entryPath) {
+  const files = /* @__PURE__ */ new Map();
+  const visited = /* @__PURE__ */ new Set();
+  const queue = [entryPath];
+  while (queue.length > 0) {
+    const p = queue.shift();
+    try {
+      const real = await realpath(p);
+      if (visited.has(real)) continue;
+      visited.add(real);
+      const s = await stat2(real);
+      files.set(real, s.mtimeMs);
+    } catch {
+      continue;
+    }
+    try {
+      const content = await readFile3(p, "utf-8");
+      const importRe = /from\s+['"]([^'"]+)['"]|import\s+['"]([^'"]+)['"]/g;
+      let m;
+      while ((m = importRe.exec(content)) !== null) {
+        const spec = m[1] ?? m[2];
+        if (spec.startsWith(".") || spec.startsWith("/")) {
+          const dir = dirname2(p);
+          const resolved = resolve3(dir, spec);
+          for (const ext of ["", ".ts", ".tsx", ".js", ".jsx", ".mjs", "/index.ts", "/index.tsx", "/index.js"]) {
+            const candidate = resolved + ext;
+            if (!visited.has(candidate)) {
+              queue.push(candidate);
+              break;
+            }
             break;
           }
-          controller.enqueue(value);
+          queue.push(resolved);
         }
-      } catch (err) {
-        controller.error(err);
       }
+    } catch {
     }
+  }
+  return files;
+}
+function esbuildDev(opts) {
+  const cache = opts.cache ?? "memory";
+  const importmap = opts.importmap ?? false;
+  const importmapOverrides = opts.importmapOverrides ?? {};
+  const errorTemplate = opts.errorTemplate ?? defaultErrorTemplate2;
+  const entries = Object.entries(opts.entries).map(([p, e]) => {
+    const path = p.startsWith("/") ? p : "/" + p;
+    const config = typeof e === "string" ? { entry: e } : e;
+    return { path, config };
   });
-  return new Response(combined, {
-    status: options.status ?? 200,
-    headers: {
-      "content-type": "text/html; charset=utf-8",
-      "transfer-encoding": "chunked",
-      ...options.headers
+  const cacheStore = /* @__PURE__ */ new Map();
+  const chunkMap = /* @__PURE__ */ new Map();
+  let esbuild_ = null;
+  let esbuildLoadError = null;
+  async function getEsbuild() {
+    if (esbuild_) return esbuild_;
+    try {
+      esbuild_ = await import("esbuild");
+      return esbuild_;
+    } catch (err) {
+      esbuildLoadError = `esbuild is not installed. Run: npm install -D esbuild
+
+${String(err)}`;
+      throw new Error(esbuildLoadError, { cause: err });
     }
-  });
+  }
+  let importmapScript = null;
+  function buildImportmap() {
+    const mappings = {};
+    Object.assign(mappings, importmapOverrides);
+    for (const { path, config } of entries) {
+      const entryName = path.split("/").pop() ?? "";
+      if (entryName.includes("vendor") || config.external && config.external.length === 0 || !config.external && config.bundle !== false) {
+        if (!mappings["react"]) mappings["react"] = path;
+        if (!mappings["react/jsx-runtime"]) mappings["react/jsx-runtime"] = path;
+        if (!mappings["react-dom/client"]) mappings["react-dom/client"] = path;
+        if (!mappings["react-dom"]) mappings["react-dom"] = path;
+      }
+    }
+    const json = JSON.stringify({ imports: mappings });
+    return `<script type="importmap">${json}</script>`;
+  }
+  async function compile(entry) {
+    const esbuild = await getEsbuild();
+    const isClientRouter = !!entry.clientRouter;
+    let entryAbs;
+    let buildOpts;
+    if (isClientRouter) {
+      const cr = entry.clientRouter;
+      const virtualModule = "weifuwu:client-entry";
+      entryAbs = virtualModule;
+      const layoutImport = `import * as _layout from '${cr.layout}'
+const _lx = Object.entries(_layout).filter(([,v]) => typeof v === 'function')
+const Layout = _layout.default || (_lx[0]?.[1])`;
+      let routesCode;
+      if (cr.pages) {
+        const entries2 = Object.entries(cr.pages).map(
+          ([path, component]) => `  '${path}': () => import('${component}'),`
+        );
+        routesCode = `const routes = {
+${entries2.join("\n")}
+}`;
+      } else if (cr.routes) {
+        routesCode = `import { routes } from '${cr.routes}'`;
+      } else {
+        routesCode = "const routes = {}";
+      }
+      const fallbackLine = cr.fallback ? `const fallback = () => import('${cr.fallback}')` : "";
+      const fallbackOpt = cr.fallback ? "  fallback," : "";
+      const generatedCode = [
+        `import { createBrowserRouter } from 'weifuwu/react/client'`,
+        layoutImport,
+        routesCode,
+        fallbackLine,
+        "",
+        "createBrowserRouter({",
+        "  layout: Layout,",
+        "  routes,",
+        fallbackOpt,
+        "})"
+      ].filter(Boolean).join("\n");
+      buildOpts = {
+        entryPoints: [virtualModule],
+        bundle: entry.bundle ?? true,
+        external: entry.external ?? [],
+        minify: entry.minify ?? true,
+        platform: entry.platform ?? "browser",
+        format: entry.format ?? "esm",
+        sourcemap: entry.sourcemap ?? false,
+        splitting: entry.splitting ?? false,
+        ...entry.splitting ? { outdir: resolve3(".weifuwu-esbuild-out") } : {},
+        define: entry.define,
+        loader: entry.loader,
+        write: false,
+        logLevel: "silent",
+        plugins: [{
+          name: "weifuwu-client-router",
+          setup(build) {
+            build.onResolve({ filter: new RegExp(`^${virtualModule.replace(/:/g, "\\:")}$`) }, () => ({
+              path: virtualModule,
+              namespace: "weifuwu-client"
+            }));
+            build.onLoad({ filter: /.*/, namespace: "weifuwu-client" }, () => ({
+              contents: generatedCode,
+              loader: "ts",
+              resolveDir: process.cwd()
+            }));
+          }
+        }]
+      };
+    } else {
+      entryAbs = resolve3(entry.entry);
+      buildOpts = {
+        entryPoints: [entryAbs],
+        bundle: entry.bundle ?? true,
+        external: entry.external ?? [],
+        minify: entry.minify ?? true,
+        platform: entry.platform ?? "browser",
+        format: entry.format ?? "esm",
+        sourcemap: entry.sourcemap ?? false,
+        splitting: entry.splitting ?? false,
+        ...entry.splitting ? { outdir: dirname2(entryAbs) } : {},
+        define: entry.define,
+        loader: entry.loader,
+        write: false,
+        logLevel: "silent"
+      };
+    }
+    const result = await esbuild.build(buildOpts);
+    const msgs = [];
+    for (const w of result.warnings) {
+      const loc = w.location ? ` at ${relative(".", w.location.file ?? "")}:${w.location.line}:${w.location.column}` : "";
+      msgs.push(`[warn] ${w.text}${loc}`);
+    }
+    for (const e of result.errors) {
+      const loc = e.location ? ` at ${relative(".", e.location.file ?? "")}:${e.location.line}:${e.location.column}` : "";
+      msgs.push(`[error] ${e.text}${loc}`);
+    }
+    if (result.errors.length > 0) {
+      throw new Error(msgs.join("\n"));
+    }
+    const outputFiles = result.outputFiles;
+    const entryFile = outputFiles.find((f) => f.path === entryAbs) ?? outputFiles[0];
+    const code = entryFile?.text ?? "";
+    let chunks;
+    if (outputFiles.length > 1) {
+      chunks = /* @__PURE__ */ new Map();
+      for (const f of outputFiles) {
+        if (f === entryFile) continue;
+        const chunkName = f.path.split("/").pop() ?? f.path;
+        chunks.set(chunkName, { code: f.text, etag: `"esbuild-${hashCode2(f.text)}"` });
+      }
+    }
+    const etag = `"esbuild-${hashCode2(code)}"`;
+    if (msgs.length > 0) {
+      console.error("[esbuildDev]", msgs.join("\n"));
+    }
+    return { code, etag, chunks };
+  }
+  function isCacheValid2(cached) {
+    return Promise.all(
+      [...cached.files].map(async ([file, mtime]) => {
+        try {
+          const s = await stat2(file);
+          return s.mtimeMs === mtime;
+        } catch {
+          return false;
+        }
+      })
+    ).then((results) => results.every(Boolean));
+  }
+  return async (req, ctx, next) => {
+    const url = new URL(req.url);
+    const pathname = url.pathname;
+    if (importmap && pathname === "/assets/importmap") {
+      if (!importmapScript) importmapScript = buildImportmap();
+      return new Response(importmapScript, {
+        headers: {
+          "Content-Type": "application/javascript; charset=utf-8",
+          "Cache-Control": "no-cache"
+        }
+      });
+    }
+    const matched = entries.find((e) => e.path === pathname);
+    const chunkName = pathname.split("/").pop() ?? "";
+    const chunkOwner = chunkMap.get(chunkName);
+    if (!matched && !chunkOwner) return next(req, ctx);
+    if (!matched && chunkOwner) {
+      const ownerCache = cacheStore.get(chunkOwner);
+      const chunk = ownerCache?.chunks?.get(chunkName);
+      if (chunk) {
+        if (req.headers.get("if-none-match") === chunk.etag) {
+          return new Response(null, { status: 304 });
+        }
+        return new Response(chunk.code, {
+          headers: {
+            "Content-Type": "text/javascript; charset=utf-8",
+            ETag: chunk.etag,
+            "Cache-Control": "no-cache"
+          }
+        });
+      }
+      return next(req, ctx);
+    }
+    const { config } = matched;
+    try {
+      if (cache === "memory") {
+        const cached = cacheStore.get(pathname);
+        if (cached) {
+          const valid = await isCacheValid2(cached);
+          if (valid) {
+            if (req.headers.get("if-none-match") === cached.etag) {
+              return new Response(null, { status: 304 });
+            }
+            return new Response(cached.code, {
+              headers: {
+                "Content-Type": "text/javascript; charset=utf-8",
+                ETag: cached.etag,
+                "Cache-Control": "no-cache"
+              }
+            });
+          }
+          for (const [cn] of cached.chunks ?? []) chunkMap.delete(cn);
+          cacheStore.delete(pathname);
+        }
+      }
+      const { code, etag, chunks } = await compile(config);
+      const depEntry = config.clientRouter?.routes ?? (config.clientRouter?.pages ? Object.values(config.clientRouter.pages)[0] : void 0) ?? config.entry;
+      const deps = await collectDeps(resolve3(depEntry));
+      if (cache === "memory") {
+        cacheStore.set(pathname, { code, etag, files: deps, chunks });
+        if (chunks) {
+          for (const [cn] of chunks) chunkMap.set(cn, pathname);
+        }
+      }
+      return new Response(code, {
+        headers: {
+          "Content-Type": "text/javascript; charset=utf-8",
+          ETag: etag,
+          "Cache-Control": "no-cache"
+        }
+      });
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      const html = errorTemplate(message);
+      return new Response(html, {
+        status: 500,
+        headers: { "Content-Type": "text/html; charset=utf-8" }
+      });
+    }
+  };
 }
-
-// src/react/hooks.ts
-import { useContext } from "react";
-function useServerData() {
-  return useContext(ServerDataContext);
+function hashCode2(s) {
+  let hash = 0;
+  for (let i = 0; i < s.length; i++) {
+    const ch = s.charCodeAt(i);
+    hash = (hash << 5) - hash + ch;
+    hash |= 0;
+  }
+  return Math.abs(hash).toString(36);
 }
 
-// src/react/navigation.ts
-import {
-  createElement as createElement2,
-  createContext as createContext2,
-  useContext as useContext2
-} from "react";
-
 // src/react/error-boundary.ts
-import { Component } from "react";
+import { createElement, Component } from "react";
 var ErrorBoundary = class extends Component {
-  state = { error: null };
+  state = { hasError: false, error: null };
   static getDerivedStateFromError(error) {
-    return { error };
+    return { hasError: true, error };
   }
-  componentDidCatch(error, info) {
-    this.props.onError?.(error, info);
+  componentDidCatch(error) {
+    this.props.onError?.(error);
   }
   render() {
-    if (this.state.error) {
-      return this.props.fallback;
+    if (this.state.hasError) {
+      if (this.props.fallback) return this.props.fallback;
+      return createElement(
+        "div",
+        { style: { padding: "2rem", textAlign: "center" } },
+        createElement("h1", null, "Something went wrong"),
+        createElement("p", null, this.state.error?.message ?? "Unknown error")
+      );
     }
     return this.props.children;
   }
 };
 
-// src/react/navigation.ts
-var RouterContext = createContext2(null);
-RouterContext.displayName = "ClientRouter";
-function useParams() {
-  return useContext2(RouterContext)?.params ?? {};
-}
-function useNavigate() {
-  const ctx = useContext2(RouterContext);
-  if (!ctx) throw new Error("useNavigate() must be used within a client router");
-  return ctx.navigate;
-}
-function useNavigation() {
-  const ctx = useContext2(RouterContext);
-  return { state: ctx?.state ?? "idle" };
+// src/react/hooks.ts
+import { useContext } from "react";
+function useServerData() {
+  return useContext(ServerDataContext);
 }
-function Link({ href, children, ...props }) {
-  const router = useContext2(RouterContext);
-  const isExternal = href.startsWith("http://") || href.startsWith("https://") || href.startsWith("//") || href.startsWith("mailto:") || href.startsWith("tel:");
-  if (!router || isExternal || props.target !== void 0) {
-    return createElement2("a", { href, ...props }, children);
-  }
-  const handleClick = (e) => {
-    if (e.ctrlKey || e.metaKey || e.altKey || e.shiftKey) return;
-    if (e.button !== 0) return;
-    e.preventDefault();
-    router.navigate(href);
-  };
-  return createElement2("a", { href, onClick: handleClick, ...props }, children);
+
+// src/react/index.ts
+function HtmlShell({ children, importMap, stylesheets, data }) {
+  const headChildren = [
+    createElement2("meta", { charSet: "utf-8", key: "charset" }),
+    createElement2("meta", { name: "viewport", content: "width=device-width, initial-scale=1", key: "viewport" })
+  ];
+  if (stylesheets) {
+    for (const href of stylesheets) {
+      headChildren.push(
+        createElement2("link", { rel: "stylesheet", href, key: `css-${href}` })
+      );
+    }
+  }
+  if (importMap) {
+    headChildren.push(
+      createElement2("script", {
+        type: "importmap",
+        key: "importmap",
+        dangerouslySetInnerHTML: { __html: JSON.stringify(importMap) }
+      })
+    );
+  }
+  const bodyChildren = [
+    createElement2("div", { id: "root", key: "root" }, children)
+  ];
+  if (data && Object.keys(data).length > 0) {
+    bodyChildren.push(
+      createElement2("script", {
+        id: "__WEIFUWU_DATA__",
+        type: "application/json",
+        key: "weifuwu-data",
+        dangerouslySetInnerHTML: { __html: JSON.stringify(data).replace(/</g, "\\u003c") }
+      })
+    );
+  }
+  return createElement2(
+    "html",
+    { lang: "en" },
+    createElement2("head", null, ...headChildren),
+    createElement2("body", null, ...bodyChildren)
+  );
 }
-function useRevalidate() {
-  const ctx = useContext2(RouterContext);
-  if (!ctx) throw new Error("useRevalidate() must be used within a client router");
-  return ctx.revalidate;
+async function renderComponent(Component2, data, layout, renderOpts) {
+  let element = createElement2(Component2, renderOpts.props ?? {});
+  if (layout) {
+    element = createElement2(layout, { children: element });
+  }
+  element = createElement2(ServerDataContext.Provider, { value: data }, element);
+  const page = createElement2(HtmlShell, {
+    children: element,
+    importMap: renderOpts.importMap,
+    stylesheets: renderOpts.stylesheets,
+    data: Object.keys(data).length > 0 ? data : void 0
+  });
+  const rstream = await renderToReadableStream(page, {
+    bootstrapScripts: renderOpts.bootstrapScripts,
+    bootstrapModules: renderOpts.bootstrapModules
+  });
+  if (renderOpts.stream === false) {
+    await rstream.allReady;
+  }
+  return new Response(rstream, {
+    status: renderOpts.status ?? 200,
+    headers: { "content-type": "text/html; charset=utf-8", ...renderOpts.headers }
+  });
 }
-function Form({ method = "post", action, children, ...props }) {
-  const router = useContext2(RouterContext);
-  if (!router) {
-    return createElement2("form", { method, action, ...props }, children);
-  }
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    const form = e.target;
-    const formData = new FormData(form);
-    const url = action || window.location.pathname;
-    const fetchMethod = method === "get" ? "GET" : method.toUpperCase();
+function react(opts) {
+  if (opts && "pages" in opts) {
+    return (app) => createFullReactApp(app, opts);
+  }
+  if (opts?.cacheDir) setReactCacheDir(opts.cacheDir);
+  let LayoutComponent = null;
+  let layoutLoaded = false;
+  let layoutLoadError = null;
+  async function getLayout() {
+    if (!opts?.layout) return null;
+    if (layoutLoaded) {
+      if (layoutLoadError) throw layoutLoadError;
+      return LayoutComponent;
+    }
     try {
-      const res = await fetch(url, {
-        method: fetchMethod,
-        body: fetchMethod === "GET" ? void 0 : formData,
-        redirect: "manual"
-      });
-      if (res.status >= 300 && res.status < 400) {
-        const loc = res.headers.get("Location");
-        if (loc) {
-          router.navigate(loc);
-          return;
-        }
-      }
-      await router.revalidate();
+      LayoutComponent = await loadTsxComponent(opts.layout);
+      layoutLoaded = true;
+      return LayoutComponent;
     } catch (err) {
-      console.error("[weifuwu/react] Form submit failed:", err);
+      layoutLoadError = err instanceof Error ? err : new Error(String(err));
+      layoutLoaded = true;
+      throw layoutLoadError;
     }
+  }
+  return async (_req, ctx, next) => {
+    ctx.render = async (path, renderOpts) => {
+      let data = renderOpts?.data ?? {};
+      if (renderOpts?.loader) {
+        const loaderData = await renderOpts.loader(ctx);
+        data = { ...data, ...loaderData };
+      }
+      const Component2 = await loadTsxComponent(path);
+      const layout = await getLayout();
+      return renderComponent(Component2, data, layout, renderOpts ?? {});
+    };
+    return next(_req, ctx);
   };
-  return createElement2(
-    "form",
-    { method, action, ...props, onSubmit: handleSubmit },
-    children
-  );
 }
-
-// src/react/index.ts
-var LAYOUTS_KEY = /* @__PURE__ */ Symbol.for("weifuwu:react:layouts");
-var SETUP_KEY = /* @__PURE__ */ Symbol.for("weifuwu:react:setup");
-function bag(ctx) {
-  return ctx;
+async function resolveLoader(modulePath) {
+  const mod = await loadTsxModule(modulePath);
+  return typeof mod.loader === "function" ? mod.loader : null;
 }
-function isDataRequest(req) {
+async function callLoader(loader, ctx, data, rethrow = true) {
+  if (!loader) return data;
   try {
-    return new URL(req.url).searchParams.has("_data");
-  } catch {
-    return false;
+    return { ...data, ...await loader(ctx) };
+  } catch (err) {
+    if (rethrow) throw err;
+    return data;
   }
 }
-function react(opts = {}) {
-  const layout = opts.layout ?? Fragment2;
-  const mw = (req, ctx, next) => {
-    const b = bag(ctx);
-    const layouts = b[LAYOUTS_KEY] ?? [];
-    b[LAYOUTS_KEY] = layouts;
-    layouts.push(layout);
-    if (!b[SETUP_KEY]) {
-      b[SETUP_KEY] = true;
-      ctx.render = (element, renderOpts) => {
-        if (renderOpts?.data && isDataRequest(req)) {
-          return Promise.resolve(Response.json(renderOpts.data));
-        }
-        return Promise.resolve(render(element, layouts, renderOpts));
-      };
-      ctx.renderStream = (element, renderOpts) => {
-        if (renderOpts?.data && isDataRequest(req)) {
-          return Promise.resolve(Response.json(renderOpts.data));
+function createFullReactApp(app, opts) {
+  const stylesheets = [...opts.stylesheets ?? []];
+  if (opts.tailwind) {
+    const twPath = opts.tailwind.path ?? "/assets/tailwind.css";
+    const twEntry = opts.tailwind.entry ?? "./styles/input.css";
+    app.use(tailwindDev({ entries: { [twPath]: { entry: twEntry } } }));
+    if (!stylesheets.includes(twPath)) stylesheets.push(twPath);
+  }
+  app.use(react({ layout: opts.layout, cacheDir: opts.cacheDir }));
+  const layoutLoaderP = resolveLoader(opts.layout);
+  const notFoundLoaderP = opts.notFound ? resolveLoader(opts.notFound) : Promise.resolve(null);
+  const clientCfg = typeof opts.client === "object" ? opts.client : {};
+  const clientPath = clientCfg.path ?? "/assets/client.js";
+  const bootstrapModules = [...opts.bootstrapModules ?? []];
+  if (opts.client !== false && !bootstrapModules.includes(clientPath)) {
+    bootstrapModules.push(clientPath);
+  }
+  const renderOpts = {
+    stylesheets: stylesheets.length > 0 ? stylesheets : void 0,
+    bootstrapModules: bootstrapModules.length > 0 ? bootstrapModules : void 0,
+    stream: opts.stream
+  };
+  for (const [path, component] of Object.entries(opts.pages)) {
+    app.get(path, async (_req, ctx) => {
+      let data = {};
+      data = await callLoader(await layoutLoaderP, ctx, data);
+      const pageLoader = opts.loaders?.[path] ?? await resolveLoader(component);
+      data = await callLoader(pageLoader, ctx, data);
+      return ctx.render(component, { ...renderOpts, data });
+    });
+  }
+  if (opts.notFound) {
+    const notFoundPath = opts.notFound;
+    app.onError(async (err, _req, ctx) => {
+      const status = typeof err === "object" && err !== null && "status" in err ? err.status : 500;
+      if (ctx.render) {
+        let data = { error: String(err) };
+        data = await callLoader(await layoutLoaderP, ctx, data, false);
+        data = await callLoader(await notFoundLoaderP, ctx, data, false);
+        return ctx.render(notFoundPath, { ...renderOpts, status, data });
+      }
+      return new Response("Internal Server Error", { status });
+    });
+  }
+  if (opts.client !== false) {
+    app.use(esbuildDev({
+      entries: {
+        [clientPath]: {
+          clientRouter: {
+            pages: opts.pages,
+            layout: opts.layout,
+            fallback: opts.notFound
+          },
+          bundle: true,
+          splitting: clientCfg.splitting ?? true,
+          minify: clientCfg.minify ?? false
         }
-        return renderStream(element, layouts, renderOpts);
-      };
+      }
+    }));
+  }
+}
+function extractImportPath(fn) {
+  const src = fn.toString();
+  const m = src.match(/import\s*\(\s*['"]([^'"]+)['"]\s*\)/);
+  if (!m) throw new Error(`Cannot extract import path from: ${src}`);
+  return m[1];
+}
+function reactRouter(app, routes, opts = {}) {
+  let LayoutComponent = null;
+  let layoutPromise = null;
+  async function getLayout() {
+    if (!opts.layout) return null;
+    if (LayoutComponent) return LayoutComponent;
+    if (!layoutPromise) {
+      layoutPromise = loadTsxComponent(opts.layout).then((c) => {
+        LayoutComponent = c;
+        return c;
+      });
     }
-    return next(req, ctx);
-  };
-  return mw;
+    return layoutPromise;
+  }
+  for (const [path, importer] of Object.entries(routes)) {
+    app.get(path, async (_req, ctx) => {
+      const cmpPath = extractImportPath(importer);
+      const Component2 = await loadTsxComponent(cmpPath);
+      const layout = await getLayout();
+      let data = {};
+      const loader = opts.loaders?.[path];
+      if (loader) {
+        data = await loader(ctx);
+      }
+      return renderComponent(Component2, data, layout, opts);
+    });
+  }
+}
+function Link({ href, children, ...props }) {
+  return createElement2("a", { href, ...props }, children);
 }
 export {
   ErrorBoundary,
-  Form,
   Link,
   ServerDataContext,
   react,
-  useNavigate,
-  useNavigation,
-  useParams,
-  useRevalidate,
+  reactRouter,
   useServerData
 };