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

weifuwu 0.33.4 → 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 +81 -20
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

@@ -66,7 +66,7 @@ app.mount('#root', AppShell)
 ```
 ```js
-// build.mjs
+// build.mjs — 可选，也可用 ctx.ui.js() 服务端动态编译
 esbuild.build({
   entryPoints: ['src/main.tsx'],
   jsx: 'automatic',
@@ -75,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 |
@@ -126,7 +131,7 @@ esbuild.build({
 | `redis()` | Redis client (`ctx.redis`) |
 | `queue()` | Job queue + cron |
 | `createHub()` | WebSocket pub/sub |
-| `ui()` | SPA HTML shell (`ctx.ui.html()`) |
+| `ui()` | SSR + SPA rendering (`ctx.ui.html`, `ctx.ui.js`, `ctx.ui.css`) |
 ### Frontend (weifuwu/client)
@@ -255,19 +260,74 @@ function ChatPage(_, ctx) {
 }
 ```
-### Backend: ctx.ui.html()
+### SSR & SPA (ctx.ui.html / ctx.ui.js / ctx.ui.css)
 ```ts
-import { ui, serveStatic } from 'weifuwu'
+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'))
-app.use(ui({ title: 'My App', script: '/static/app.js' }))
-app.get('/static/*', serveStatic('./dist/client'))
+// 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)
+}
+```
-// SPA route
-app.get('/', async (req, ctx) => ctx.ui.html())
+### 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()
+})
-// With initial props (accessible via window.__WFUI_PROPS__):
-app.get('/', async (req, ctx) => ctx.ui.html({ title: 'Custom', props: { user: userData } }))
+// Use in JSX like any component
+<Dashboard>
+  <PieChart data={salesData} />
+</Dashboard>
 ```
 ### Show / For
@@ -796,12 +856,12 @@ src/
 ├── queue/               ← Job queue + cron
 ├── graphql.ts           ← GraphQL
 ├── hub.ts               ← WebSocket hub
-├── ui/                  ← SPA HTML shell (`ctx.ui.html()`)
-├── client/              ← Frontend framework (~600 lines)
-│   ├── index.ts         ← Entry
+├── 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
-│   ├── app.ts           ← createApp / middleware chain
+│   ├── 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/
@@ -811,14 +871,15 @@ src/
 │   └── components/
 │       ├── LoginForm.ts ← Login / register form
 │       └── Chat.ts      ← Real-time messaging
-└── test/                ← 281 tests
+└── test/                ← Tests
 apps/demo/               ← Full-stack demo
-├── src/main.tsx          ← SPA demo pages
+├── src/main.tsx          ← SPA + SSR hydrate demo pages
 ├── server.ts             ← weifuwu server
-├── public/index.html
-├── tsconfig.json
-└── scripts/build.mjs
+├── 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.4",
+  "version": "0.33.5",
   "description": "AI SaaS framework — (req, ctx) => Response",
   "exports": {
     ".": {