npm - weifuwu - Versions diffs - 0.33.3 → 0.33.5 - Mend

weifuwu 0.33.3 → 0.33.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/README.md +143 -23
package/dist/client/app.d.ts +12 -0
package/dist/client/index.d.ts +1 -1
package/dist/client/index.js +67 -0
package/dist/client/jsx-runtime.d.ts +27 -0
package/dist/client/jsx-runtime.js +67 -0
package/dist/index.d.ts +1 -2
package/dist/index.js +87 -48
package/dist/ui/index.d.ts +31 -22
package/package.json +1 -1

package/README.md CHANGED Viewed

@@ -39,25 +39,24 @@ serve(app, { port: 3000 })
 ### Frontend
 ```tsx
-import { signal, Show, For, createApp, router, RouteView } from 'weifuwu/client'
+import { signal, createApp, api, auth, ws, router, RouteView, LoginForm } from 'weifuwu/client'
 import type { WfuiContext } from 'weifuwu/client'
-function HomePage(_props: {}, ctx: WfuiContext) {
+function AppShell(_props: {}, ctx: WfuiContext) {
+  if (!ctx.isAuthenticated) return <LoginForm />
   return (
     <div>
-      <h1>Hello weifuwu</h1>
-      <p>当前路径: {ctx.route.path}</p>
+      <nav><a onClick={() => ctx.app.navigate('/chat')}>聊天</a></nav>
+      <main><RouteView /></main>
     </div>
   )
 }
 const app = createApp()
-app.use(router({
-  routes: [
-    { path: '/', component: HomePage, title: '首页' },
-    { path: '/chat/:id', component: ChatPage, title: '聊天' },
-  ],
-}))
+app.use(api())              // ← ctx.api.get/post
+app.use(auth())             // ← ctx.user / ctx.login / ctx.logout
+app.use(ws())               // ← ctx.ws.send / onMessage
+app.use(router({ routes })) // ← ctx.route / 路由
 app.mount('#root', AppShell)
 ```
@@ -67,7 +66,7 @@ app.mount('#root', AppShell)
 ```
 ```js
-// build.mjs
+// build.mjs — 可选，也可用 ctx.ui.js() 服务端动态编译
 esbuild.build({
   entryPoints: ['src/main.tsx'],
   jsx: 'automatic',
@@ -76,6 +75,11 @@ esbuild.build({
 })
 ```
+或用服务端动态编译（无需独立构建脚本）：
+```ts
+app.get('/static/app.js', async (req, ctx) => ctx.ui.js('./src/main.tsx'))
+```
 ### Environment Variables
 | Variable | Default | Used by |
@@ -127,6 +131,7 @@ esbuild.build({
 | `redis()` | Redis client (`ctx.redis`) |
 | `queue()` | Job queue + cron |
 | `createHub()` | WebSocket pub/sub |
+| `ui()` | SSR + SPA rendering (`ctx.ui.html`, `ctx.ui.js`, `ctx.ui.css`) |
 ### Frontend (weifuwu/client)
@@ -140,6 +145,11 @@ esbuild.build({
 | `<RouteView>` | Route outlet |
 | `createApp()` | App instance with middleware chain |
 | `router()` | Hash/history router with params + query |
+| `api()` | HTTP client (`ctx.api.get/post`) |
+| `auth()` | Auth state (`ctx.user/login/logout`) |
+| `ws()` | WebSocket (`ctx.ws.send/onMessage`) |
+| `LoginForm` | Login/register form component |
+| `Chat` | Real-time messaging component |
 | `domMount()` | Direct DOM mounting |
 ### Utilities
@@ -218,6 +228,106 @@ function AppShell(_, ctx) {
 ctx.route.path     // "/chat/123"
 ctx.route.params   // { id: "123" }
 ctx.route.query    // { tab: "settings" }
+### Middleware: api / auth / ws
+```tsx
+import { api, auth, ws } from 'weifuwu/client'
+app.use(api())    // ctx.api.get/post/put/patch/delete
+app.use(auth())   // ctx.user / ctx.login / ctx.logout / ctx.register
+app.use(ws())     // ctx.ws.send / onMessage / join / leave
+```
+`api()` creates a fetch client with automatic token injection.
+`auth()` persists sessions to localStorage, validates tokens on startup.
+`ws()` manages WebSocket connections with auto-reconnect.
+### Pre-built Components
+```tsx
+import { LoginForm, Chat } from 'weifuwu/client'
+// Login / Register form
+function LoginPage(_, ctx) {
+  if (ctx.isAuthenticated) return ctx.app.navigate('/')
+  return <LoginForm />
+}
+// Real-time chat
+function ChatPage(_, ctx) {
+  return <Chat conversationId="123" />
+}
+```
+### SSR & SPA (ctx.ui.html / ctx.ui.js / ctx.ui.css)
+```ts
+import { ui } from 'weifuwu'
+app.use(ui())
+// SSR page — ctx.ui.html`` returns complete HTML Response
+app.get('/blog/:slug', async (req, ctx) => ctx.ui.html`
+  <!DOCTYPE html>
+  <html>
+  <head>
+    <title>${post.title}</title>
+    <link rel="stylesheet" href="/static/style.css">
+  </head>
+  <body>
+    <div id="root">
+      <h1>${post.title}</h1>
+      <div>${ctx.ui.html.unsafe(post.body)}</div>
+      <div data-hydrate="like"></div>
+    </div>
+    <script>window.__WFUI_PROPS__=${ctx.ui.html.unsafe(JSON.stringify({ post }))}</script>
+    <script src="/static/app.js"></script>
+  </body>
+  </html>
+`)
+// Dynamic JS compilation — ctx.ui.js() compiles TSX on demand
+app.get('/static/app.js', async (req, ctx) => ctx.ui.js('./src/main.tsx'))
+// Dynamic CSS serving — ctx.ui.css() reads and serves CSS
+app.get('/static/style.css', async (req, ctx) => ctx.ui.css('./src/style.css'))
+// Client hydrates interactive sections, skips SSR content
+const app = createApp()
+app.use(api())
+const root = document.getElementById('root')
+if (root && root.children.length > 0) {
+  // SSR page — hydrate only interactive areas
+  app.hydrate('[data-hydrate="like"]', LikeButton)
+} else {
+  // SPA page — full mount
+  app.mount('#root', AppShell)
+}
+```
+### wrap() — Third-party Library Integration
+```tsx
+import { wrap, effect } from 'weifuwu/client'
+import * as echarts from 'echarts'
+// wrap(tagName, setup) creates a component:
+// - Creates a <div> container
+// - Calls setup(el, props, ctx) when element enters the document
+// - Runs cleanup when element is removed
+const PieChart = wrap('div', (el, props: { data: any[] }, ctx) => {
+  const chart = echarts.init(el)
+  chart.setOption({ series: [{ type: 'pie', data: props.data }] })
+  effect(() => chart.setOption({ series: [{ type: 'pie', data: props.data }] }))
+  return () => chart.dispose()
+})
+// Use in JSX like any component
+<Dashboard>
+  <PieChart data={salesData} />
+</Dashboard>
 ```
 ### Show / For
@@ -746,20 +856,30 @@ src/
 ├── queue/               ← Job queue + cron
 ├── graphql.ts           ← GraphQL
 ├── hub.ts               ← WebSocket hub
-├── client/              ← Frontend framework (signal, JSX, router)
-│   ├── index.ts
-│   ├── signal.ts
-│   ├── jsx-runtime.ts
-│   ├── app.ts
-│   ├── router.ts
-│   └── types.ts
-└── test/                ← 281 tests
+├── ui/                  ← ctx.ui.html / ctx.ui.js / ctx.ui.css
+├── client/              ← Frontend framework
+│   ├── index.ts         ← Entry (exports signal, wrap, createApp, ...)
+│   ├── signal.ts        ← Signal / effect / computed
+│   ├── jsx-runtime.ts   ← JSX → DOM / Show / For / wrap / onMount
+│   ├── app.ts           ← createApp / hydrate / middleware chain
+│   ├── router.ts        ← Route matching / RouteView
+│   ├── types.ts         ← WfuiContext / RouteDef
+│   ├── middleware/
+│   │   ├── api.ts       ← HTTP client
+│   │   ├── auth.ts      ← Login / logout / token
+│   │   └── ws.ts        ← WebSocket
+│   └── components/
+│       ├── LoginForm.ts ← Login / register form
+│       └── Chat.ts      ← Real-time messaging
+└── test/                ← Tests
 apps/demo/               ← Full-stack demo
-├── src/main.tsx
-├── public/index.html
-├── tsconfig.json
-└── scripts/build.mjs
+├── src/main.tsx          ← SPA + SSR hydrate demo pages
+├── server.ts             ← weifuwu server
+├── public/
+│   ├── index.html        ← HTML skeleton with placeholders
+│   └── style.css         ← Demo styles
+└── tsconfig.json
 docker-compose.yml       ← postgres (pgvector) + redis
 ```

package/dist/client/app.d.ts CHANGED Viewed

@@ -21,4 +21,16 @@ export declare function createApp(): {
     ctx: WfuiContext;
     use: (mw: AppMiddleware) => any;
     mount: (rootSelector: string, RootComponent: Component) => Promise<void>;
+    /**
+     * Hydrate 一个已由 SSR 渲染的区域。
+     * 不清除目标容器内的内容，只附加组件输出。
+     *
+     * ```ts
+     * const app = createApp()
+     * app.use(api())
+     * app.use(auth())
+     * app.hydrate('#comments', CommentSection, { postId: '123' })
+     * ```
+     */
+    hydrate: (selector: string, Component: Component, props?: Record<string, unknown>) => void;
 };

package/dist/client/index.d.ts CHANGED Viewed

@@ -15,7 +15,7 @@
  */
 export { signal, computed, effect, isSignal } from './signal.ts';
 export type { Signal } from './signal.ts';
-export { jsx, jsxs, jsxDEV, Fragment, Show, For, domMount } from './jsx-runtime.ts';
+export { jsx, jsxs, jsxDEV, Fragment, Show, For, domMount, wrap } from './jsx-runtime.ts';
 export type { Component } from './jsx-runtime.ts';
 export type { WfuiContext, AppMiddleware, RouteDef } from './types.ts';
 export { createApp } from './app.ts';

package/dist/client/index.js CHANGED Viewed

@@ -51,6 +51,60 @@ var currentCtx = null;
 function setCtx(ctx) {
   currentCtx = ctx;
 }
+var _entries = /* @__PURE__ */ new Map();
+function _ensure(el) {
+  let entry = _entries.get(el);
+  if (entry) return entry;
+  entry = {
+    mounted: document.contains(el),
+    observer: null,
+    mountFns: [],
+    disposeFns: []
+  };
+  _entries.set(el, entry);
+  const obs = new MutationObserver(() => {
+    const now = document.contains(el);
+    if (now && !entry.mounted) {
+      entry.mounted = true;
+      const fns = entry.mountFns.slice();
+      entry.mountFns = [];
+      for (const fn of fns) {
+        const dispose = fn();
+        if (typeof dispose === "function") {
+          entry.disposeFns.push(dispose);
+        }
+      }
+    } else if (!now && entry.mounted) {
+      entry.mounted = false;
+      for (const fn of entry.disposeFns) fn();
+      entry.disposeFns = [];
+      entry.mountFns = [];
+      obs.disconnect();
+      _entries.delete(el);
+    }
+  });
+  obs.observe(document.body, { childList: true, subtree: true });
+  entry.observer = obs;
+  return entry;
+}
+function onMount(el, fn) {
+  const entry = _ensure(el);
+  if (entry.mounted) {
+    const dispose = fn();
+    if (typeof dispose === "function") {
+      entry.disposeFns.push(dispose);
+    }
+  } else {
+    entry.mountFns.push(fn);
+  }
+}
+function wrap(tagName, setup) {
+  return (props, ctx) => {
+    const el = document.createElement(tagName);
+    onMount(el, () => setup(el, props, ctx));
+    return el;
+  };
+}
 function setProp(el, key, value) {
   if (key === "class" || key === "className") {
     if (isSignal(value)) {
@@ -223,6 +277,18 @@ function createApp() {
       const app = jsx(RootComponent, {});
       domMount(rootSelector, app);
       setCtx(null);
+    },
+    hydrate(selector, Component, props) {
+      const root = document.querySelector(selector);
+      if (!root) {
+        console.warn(`hydrate target not found: ${selector}`);
+        return;
+      }
+      const mergedProps = props ?? window.__WFUI_PROPS__ ?? {};
+      setCtx(ctx);
+      const vnode = jsx(Component, mergedProps);
+      root.appendChild(vnode);
+      setCtx(null);
     }
   };
 }
@@ -690,5 +756,6 @@ export {
   jsxs,
   router,
   signal,
+  wrap,
   ws
 };

package/dist/client/jsx-runtime.d.ts CHANGED Viewed

@@ -20,6 +20,33 @@ declare global {
 export declare function setCtx(ctx: WfuiContext | null): void;
 export declare function getCtx(): WfuiContext | null;
 export type Component<P = {}> = (props: P, ctx: WfuiContext) => Node;
+/**
+ * 包装第三方库为组件 — 元素挂载后执行 setup，返回函数在元素移除时自动清理。
+ *
+ * 自动创建容器元素 + 自动管理生命周期。
+ * 返回标准的 (props, ctx) => Node 组件。
+ *
+ * ```tsx
+ * const PieChart = wrap('div', (el, props: { data: any }, ctx) => {
+ *   el.style.cssText = 'width:100%;height:300px'
+ *   const chart = echarts.init(el)
+ *   chart.setOption(props.data)
+ *   effect(() => chart.setOption(props.data))
+ *   return () => chart.dispose()
+ * })
+ *
+ * const CanvasChart = wrap('canvas', (el, props, ctx) => {
+ *   const chart = new Chart(el, { type: 'line', data: props.data })
+ *   return () => chart.destroy()
+ * })
+ *
+ * // 在 JSX 中使用
+ * function Dashboard() {
+ *   return <div><PieChart data={salesData} /><CanvasChart data={trendData} /></div>
+ * }
+ * ```
+ */
+export declare function wrap<P = {}>(tagName: string, setup: (el: HTMLElement, props: P, ctx: WfuiContext) => (() => void) | void): Component<P>;
 export declare function jsx(type: string | Component, props: Record<string, unknown> | null, ...children: unknown[]): Node;
 export declare function jsxs(type: string | Component, props: Record<string, unknown> | null, ...children: unknown[]): Node;
 export declare function jsxDEV(type: string | Component, props: Record<string, unknown> | null, _key: string | null, _isStatic: boolean, _source: {

package/dist/client/jsx-runtime.js CHANGED Viewed

@@ -51,6 +51,60 @@ var currentCtx = null;
 function setCtx(ctx) {
   currentCtx = ctx;
 }
+var _entries = /* @__PURE__ */ new Map();
+function _ensure(el) {
+  let entry = _entries.get(el);
+  if (entry) return entry;
+  entry = {
+    mounted: document.contains(el),
+    observer: null,
+    mountFns: [],
+    disposeFns: []
+  };
+  _entries.set(el, entry);
+  const obs = new MutationObserver(() => {
+    const now = document.contains(el);
+    if (now && !entry.mounted) {
+      entry.mounted = true;
+      const fns = entry.mountFns.slice();
+      entry.mountFns = [];
+      for (const fn of fns) {
+        const dispose = fn();
+        if (typeof dispose === "function") {
+          entry.disposeFns.push(dispose);
+        }
+      }
+    } else if (!now && entry.mounted) {
+      entry.mounted = false;
+      for (const fn of entry.disposeFns) fn();
+      entry.disposeFns = [];
+      entry.mountFns = [];
+      obs.disconnect();
+      _entries.delete(el);
+    }
+  });
+  obs.observe(document.body, { childList: true, subtree: true });
+  entry.observer = obs;
+  return entry;
+}
+function onMount(el, fn) {
+  const entry = _ensure(el);
+  if (entry.mounted) {
+    const dispose = fn();
+    if (typeof dispose === "function") {
+      entry.disposeFns.push(dispose);
+    }
+  } else {
+    entry.mountFns.push(fn);
+  }
+}
+function wrap(tagName, setup) {
+  return (props, ctx) => {
+    const el = document.createElement(tagName);
+    onMount(el, () => setup(el, props, ctx));
+    return el;
+  };
+}
 function setProp(el, key, value) {
   if (key === "class" || key === "className") {
     if (isSignal(value)) {
@@ -223,6 +277,18 @@ function createApp() {
       const app = jsx(RootComponent, {});
       domMount(rootSelector, app);
       setCtx(null);
+    },
+    hydrate(selector, Component, props) {
+      const root = document.querySelector(selector);
+      if (!root) {
+        console.warn(`hydrate target not found: ${selector}`);
+        return;
+      }
+      const mergedProps = props ?? window.__WFUI_PROPS__ ?? {};
+      setCtx(ctx);
+      const vnode = jsx(Component, mergedProps);
+      root.appendChild(vnode);
+      setCtx(null);
     }
   };
 }
@@ -690,5 +756,6 @@ export {
   jsxs,
   router,
   signal,
+  wrap,
   ws
 };

package/dist/index.d.ts CHANGED Viewed

@@ -23,6 +23,7 @@ export { compress } from './middleware/compress.ts';
 export type { CompressOptions } from './middleware/compress.ts';
 export { helmet } from './middleware/helmet.ts';
 export type { HelmetOptions } from './middleware/helmet.ts';
+export { ui } from './ui/index.ts';
 export { graphql } from './graphql.ts';
 export type { GraphQLOptions, GraphQLHandler } from './graphql.ts';
 export { postgres, MIGRATIONS_TABLE } from './postgres/index.ts';
@@ -47,6 +48,4 @@ export type { CMSAPI, CMSOptions, Content, ContentStatus, ContentType, Tag, TagW
 export { kb, KB } from './kb/index.ts';
 export type { KBAPI, KBOptions, Document, Chunk, SearchResult, ImportOptions, SearchOptions, } from './kb/types.ts';
 export type { BaseAPI, BaseDef, BaseOptions, TableSchema, FieldSchema, FieldType, ColumnMap, CreateBaseInput, UpdateBaseInput, QueryOptions, } from './base/types.ts';
-export { ui } from './ui/index.ts';
-export type { UiOptions, UiRenderOptions } from './ui/index.ts';
 export { requireRole } from './user/types.ts';

package/dist/index.js CHANGED Viewed

@@ -225,14 +225,14 @@ function serve(router, options) {
     if (!server.listening) return;
     server.close();
     server.closeIdleConnections();
-    return new Promise((resolve3) => {
+    return new Promise((resolve4) => {
       const timer = setTimeout(() => {
         server.closeAllConnections();
-        resolve3();
+        resolve4();
       }, timeoutMs);
       server.on("close", () => {
         clearTimeout(timer);
-        resolve3();
+        resolve4();
       });
     });
   }
@@ -1384,6 +1384,90 @@ var DEFAULTS = {
   permissionsPolicy: "camera=(),display-capture=(),fullscreen=(),geolocation=(),microphone=()"
 };
+// src/ui/index.ts
+import { build } from "esbuild";
+import { readFile as readFile2 } from "node:fs/promises";
+import { resolve as resolve3 } from "node:path";
+var HtmlSafe = class {
+  constructor(value) {
+    this.value = value;
+  }
+  value;
+  toString() {
+    return this.value;
+  }
+};
+function escape(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function stringify(v) {
+  if (v == null || v === false || v === true) return "";
+  if (Array.isArray(v)) return v.map(stringify).join("");
+  if (v instanceof HtmlSafe) return v.value;
+  return escape(String(v));
+}
+function unsafe(s) {
+  return new HtmlSafe(s);
+}
+var jsCache = /* @__PURE__ */ new Map();
+var cssCache = /* @__PURE__ */ new Map();
+function ui() {
+  return async (_req, ctx, next) => {
+    function htmlTag(strings, ...values) {
+      let body = "";
+      for (let i = 0; i < strings.length; i++) {
+        body += strings[i];
+        if (i < values.length) body += stringify(values[i]);
+      }
+      return new Response(body, {
+        headers: { "Content-Type": "text/html; charset=utf-8" }
+      });
+    }
+    ctx.ui = {
+      html: Object.assign(htmlTag, { unsafe }),
+      async js(entryPath) {
+        const absPath = resolve3(entryPath);
+        const cached = jsCache.get(absPath);
+        if (cached) {
+          return new Response(cached.code, {
+            headers: { "Content-Type": "application/javascript" }
+          });
+        }
+        const result = await build({
+          entryPoints: [absPath],
+          bundle: true,
+          format: "esm",
+          platform: "browser",
+          jsx: "automatic",
+          jsxImportSource: "weifuwu/client",
+          write: false
+        });
+        const code = result.outputFiles[0].text;
+        jsCache.set(absPath, { code });
+        return new Response(code, {
+          headers: { "Content-Type": "application/javascript" }
+        });
+      },
+      async css(entryPath) {
+        const absPath = resolve3(entryPath);
+        const stat = await import("node:fs").then((fs) => fs.promises.stat(absPath));
+        const cached = cssCache.get(absPath);
+        if (cached && cached.mtime === stat.mtimeMs) {
+          return new Response(cached.code, {
+            headers: { "Content-Type": "text/css; charset=utf-8" }
+          });
+        }
+        const code = await readFile2(absPath, "utf-8");
+        cssCache.set(absPath, { code, mtime: stat.mtimeMs });
+        return new Response(code, {
+          headers: { "Content-Type": "text/css; charset=utf-8" }
+        });
+      }
+    };
+    return next(_req, ctx);
+  };
+}
 // src/graphql.ts
 import {
   buildSchema,
@@ -4316,51 +4400,6 @@ function kb(opts) {
   mw.__meta = { injects: ["kb"], depends: ["sql"] };
   return mw;
 }
-// src/ui/index.ts
-function defaultTemplate(title, script, propsJson) {
-  return `<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${escapeHtml(title)}</title>
-</head>
-<body>
-  <div id="root"></div>
-  ${propsJson ? `<script>window.__WFUI_PROPS__=${propsJson}</script>` : ""}
-  <script src="${escapeHtml(script)}"></script>
-</body>
-</html>`;
-}
-function escapeHtml(s) {
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-}
-function ui(opts = {}) {
-  const defaultTitle = opts.title ?? "weifuwu";
-  const defaultScript = opts.script ?? "/static/app.js";
-  const template = opts.template;
-  return async (req, ctx, next) => {
-    ctx.ui = {
-      html(renderOpts = {}) {
-        const title = renderOpts.title ?? defaultTitle;
-        const script = renderOpts.script ?? defaultScript;
-        let propsJson = "";
-        if (renderOpts.props) {
-          try {
-            propsJson = JSON.stringify(renderOpts.props);
-          } catch {
-          }
-        }
-        const body = template ? template.replace(/\{\{title\}\}/g, escapeHtml(title)).replace(/\{\{script\}\}/g, escapeHtml(script)).replace(/\{\{props\}\}/g, propsJson) : defaultTemplate(title, script, propsJson);
-        return new Response(body, {
-          headers: { "Content-Type": "text/html; charset=utf-8" }
-        });
-      }
-    };
-    return next(req, ctx);
-  };
-}
 export {
   Base,
   CMS,

package/dist/ui/index.d.ts CHANGED Viewed

@@ -1,37 +1,46 @@
 /**
- * ui 中间件 — 注入 ctx.ui.html()
+ * ui 中间件 — 注入 ctx.ui.html / ctx.ui.js / ctx.ui.css
  *
- * 返回 SPA HTML shell，加载前端 client bundle。
+ * ctx.ui.html  是 tagged template，返回完整 HTML Response。
+ * ctx.ui.js    编译 TSX 入口，返回 JS bundle Response。
+ * ctx.ui.css   读取/编译 CSS 入口，返回 CSS Response。
  *
  * ```ts
- * import { ui, serveStatic } from 'weifuwu'
+ * import { ui } from 'weifuwu'
  *
- * app.use(ui({ title: 'My App', script: '/static/app.js' }))
- * app.get('/static/*', serveStatic('./dist/client'))
- * app.get('*', async (req, ctx) => ctx.ui.html())
+ * app.use(ui())
+ *
+ * app.get('/blog/:slug', async (req, ctx) => ctx.ui.html`
+ *   <!DOCTYPE html>
+ *   <html>
+ *   <head><title>${post.title}</title></head>
+ *   <body>
+ *     <div id="root"><article>...</article></div>
+ *     <script src="/static/app.js"></script>
+ *   </body>
+ *   </html>
+ * `)
+ *
+ * app.get('/static/app.js', async (req, ctx) => ctx.ui.js('./src/main.tsx'))
+ * app.get('/static/style.css', async (req, ctx) => ctx.ui.css('./public/style.css'))
  * ```
  */
 import type { Middleware } from '../types.ts';
 declare module '../types.ts' {
     interface Context {
         ui: {
-            /** 返回 SPA HTML 页面 */
-            html: (opts?: UiRenderOptions) => Response;
+            /** Tagged template → HTML Response */
+            html: UiHtmlTag;
+            /** 编译 TSX → JS bundle Response */
+            js: (entryPath: string) => Promise<Response>;
+            /** 读取/编译 CSS → CSS Response */
+            css: (entryPath: string) => Promise<Response>;
         };
     }
 }
-export interface UiOptions {
-    /** 页面标题，默认 'weifuwu' */
-    title?: string;
-    /** Client bundle JS 路径，默认 '/static/app.js' */
-    script?: string;
-    /** 自定义 HTML 模板，覆盖默认 */
-    template?: string;
-}
-export interface UiRenderOptions {
-    title?: string;
-    script?: string;
-    /** 内嵌到页面的初始数据（通过 window.__WFUI_PROPS__ 访问） */
-    props?: Record<string, unknown>;
+interface UiHtmlTag {
+    (strings: TemplateStringsArray, ...values: unknown[]): Response;
+    unsafe: (s: string) => string;
 }
-export declare function ui(opts?: UiOptions): Middleware;
+export declare function ui(): Middleware;
+export {};

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "weifuwu",
   "type": "module",
-  "version": "0.33.3",
+  "version": "0.33.5",
   "description": "AI SaaS framework — (req, ctx) => Response",
   "exports": {
     ".": {