weifuwu 0.36.1 → 0.36.2

package/README.md

@@ -345,21 +345,28 @@ function Counter(_props: {}, ctx: WfuiContext) {
 
 ### 生命周期 —— ref 回调
 
+`ref` 回调在 mount 时触发，接收 DOM 元素。返回的清理函数在 unmount 时由框架保证调用。
+
 ```tsx
 function MyComponent(_props: {}, ctx: WfuiContext) {
-  function onRef(el: HTMLElement | null) {
-    if (el) {
-      // mount: 加事件监听等
+  return (
+    <div ref={el => {
+      // mount: el 是 DOM 元素
       el.addEventListener('scroll', handler)
-    } else {
-      // unmount: 清理
-    }
-  }
-
-  return <div ref={onRef} />
+      // 返回清理函数，unmount 时框架保证调用
+      return () => el.removeEventListener('scroll', handler)
+    }} />
+  )
 }
 ```
 
+| 场景 | 写法 |
+|------|------|
+| 事件监听 | `ref={el => { el.addEventListener(...); return () => el.removeEventListener(...) }}` |
+| 定时器 | `ref={el => { const t = setInterval(f, 1000); return () => clearInterval(t) }}` |
+| 第三方库 | `ref={el => { const c = new Chart(el); return () => c.destroy() }}` |
+| 仅 mount | `ref={el => { init(el) }}` |
+
 ### 应用 —— createApp
 
 ```tsx

package/dist/client/index.js

@@ -56,7 +56,8 @@ function renderValue(v, ctx) {
     el.appendChild(renderValue(child, ctx));
   }
   if (vnode.props?.ref) {
-    queueMicrotask(() => vnode.props.ref(el));
+    const result = vnode.props.ref(el);
+    if (typeof result === "function") vnode._cleanup = result;
   }
   return el;
 }
@@ -140,7 +141,7 @@ function patchValue(parent, oldNode, oldInput, newInput, ctx) {
   }
   if (newInput == null) {
     if (oldNode) {
-      callRef(oldInput, null);
+      callRefCleanup(oldInput);
       oldNode.remove();
     }
     return null;
@@ -148,7 +149,7 @@ function patchValue(parent, oldNode, oldInput, newInput, ctx) {
   const oldType = typeOf(oldInput);
   const newType = typeOf(newInput);
   if (oldType !== newType) {
-    callRef(oldInput, null);
+    callRefCleanup(oldInput);
     const node = renderValue(newInput, ctx);
     if (oldNode?.parentNode) {
       oldNode.parentNode.replaceChild(node, oldNode);
@@ -181,7 +182,7 @@ function patchValue(parent, oldNode, oldInput, newInput, ctx) {
       patchProps(oldNode, oldV.props, newV.props);
       patchChildren(oldNode, oldV, newV, ctx);
     } else if (oldNode) {
-      callRef(oldInput, null);
+      callRefCleanup(oldInput);
       const node = renderValue(newInput, ctx);
       oldNode.parentNode?.replaceChild(node, oldNode);
       return node;
@@ -286,7 +287,7 @@ function patchSimpleChildren(parent, oldChildren, newChildren, ctx) {
       parent.appendChild(node);
     } else if (newChild === void 0) {
       if (existingNode) {
-        callRef(oldChild, null);
+        callRefCleanup(oldChild);
         existingNode.remove();
       }
     } else {
@@ -306,7 +307,7 @@ function patchKeyedChildren(parent, oldChildren, newChildren, ctx) {
   for (const key of oldKeyMap.keys()) {
     if (!newKeys.includes(key)) {
       const entry = oldKeyMap.get(key);
-      callRef(entry.vnode, null);
+      callRefCleanup(entry.vnode);
       entry.node?.remove();
       oldKeyMap.delete(key);
     }
@@ -316,7 +317,7 @@ function patchKeyedChildren(parent, oldChildren, newChildren, ctx) {
     if (key === void 0) {
       const node = parent.childNodes[i];
       if (node) {
-        callRef(oldChildren[i], null);
+        callRefCleanup(oldChildren[i]);
         node.remove();
       }
     }
@@ -337,13 +338,21 @@ function patchKeyedChildren(parent, oldChildren, newChildren, ctx) {
     }
   }
 }
-function callRef(input, el) {
+function runRefCleanup(vnode) {
+  if (vnode._cleanup) {
+    vnode._cleanup();
+    vnode._cleanup = void 0;
+  }
+  forEach(vnode.props?.children, (child) => {
+    if (child && typeof child === "object" && child._cleanup) {
+      runRefCleanup(child);
+    }
+  });
+}
+function callRefCleanup(input) {
   if (input == null || typeof input !== "object") return;
   const vnode = input;
-  if (typeof vnode.props?.ref === "function") {
-    vnode.props.ref(el);
-  }
-  forEach(vnode.props?.children, (child) => callRef(child, el));
+  if (vnode._cleanup) runRefCleanup(vnode);
 }
 
 // src/client/router.ts

package/dist/client/vnode.d.ts

@@ -16,6 +16,8 @@ export interface VNode {
     _$?: Record<string, any>;
     /** 子 VNode 缓存（用于 patchValue diff，避免重复执行组件） */
     _child?: any;
+    /** ref 回调返回的清理函数，卸载时由框架调用 */
+    _cleanup?: (() => void) | undefined;
 }
 export type Component<P = {}> = (props: P, ctx: WfuiContext) => VNode | null;
 export declare const Fragment: unique symbol;

package/package.json

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