weifuwu 0.40.0 → 0.50.0

package/dist/client/index.js

@@ -83,26 +83,12 @@ function renderValue(v, ctx) {
     ;
     el.value = String(selectValue);
   }
+  if (typeof vnode.props?.ref === "function") vnode.props.ref(el);
   return el;
 }
 function renderComponent(Comp, props, vnode, ctx) {
-  const prev$ = vnode._$;
-  if (!prev$) vnode._$ = {};
+  ;
   ctx.ui = ctx.ui ?? {};
-  const _target = vnode._$;
-  _target._hooks = { mount: [], unmount: [], update: [] };
-  ctx.ui.onmount = (fn) => {
-    _target._hooks.mount = [fn];
-  };
-  ctx.ui.onunmount = (fn) => {
-    _target._hooks.unmount = [fn];
-  };
-  ctx.ui.onupdate = (fn) => {
-    _target._hooks.update = [fn];
-  };
-  ctx.ui.onmounted = (fn) => {
-    _target._onmounted = fn;
-  };
   let childVNode;
   try {
     childVNode = Comp(props, ctx);
@@ -113,10 +99,6 @@ function renderComponent(Comp, props, vnode, ctx) {
     }
     vnode._render = childVNode;
     childVNode = childVNode(props);
-    if (!prev$) {
-      const mh = _target._hooks?.mount;
-      if (mh && mh[0]) mh[0]();
-    }
   } catch (e) {
     const errHandler = ctx.ui?._errorHandler;
     if (errHandler) {
@@ -132,12 +114,7 @@ function renderComponent(Comp, props, vnode, ctx) {
     return document.createTextNode("");
   }
   vnode._child = childVNode;
-  const rootNode = renderValue(childVNode, ctx);
-  if (_target._onmounted && !prev$) {
-    const cleanup = _target._onmounted(rootNode);
-    if (typeof cleanup === "function") vnode._cleanup = cleanup;
-  }
-  return rootNode;
+  return renderValue(childVNode, ctx);
 }
 function renderArray(arr, ctx) {
   const frag = document.createDocumentFragment();
@@ -259,34 +236,8 @@ function patchValue(parent, oldNode, oldInput, newInput, ctx) {
   const oldV = oldInput;
   if (typeof newV.type === "function") {
     const comp = newV.type;
-    if (oldV._$) newV._$ = oldV._$;
-    if (!newV._$) newV._$ = {};
     ctx.ui = ctx.ui ?? {};
-    const _tgt = newV._$;
     if (oldV._render) newV._render = oldV._render;
-    if (oldV._cleanup) newV._cleanup = oldV._cleanup;
-    if (_tgt._hooks) {
-      ;
-      ctx.ui.onmount = (fn) => {
-        _tgt._hooks.mount = [fn];
-      };
-      ctx.ui.onunmount = (fn) => {
-        _tgt._hooks.unmount = [fn];
-      };
-      ctx.ui.onupdate = (fn) => {
-        _tgt._hooks.update = [fn];
-      };
-    }
-    if (_tgt._onmounted) {
-      ;
-      ctx.ui.onmounted = (fn) => {
-        _tgt._onmounted = fn;
-      };
-    }
-    if (oldV._$) {
-      const uh = _tgt._hooks?.update;
-      if (uh && uh[0]) uh[0](oldV.props);
-    }
     let childNew;
     try {
       if (typeof newV._render === "function") {
@@ -310,10 +261,6 @@ function patchValue(parent, oldNode, oldInput, newInput, ctx) {
     }
     const _prevChild = oldV._child;
     newV._child = childNew;
-    if (childNew == null && _tgt._hooks?.unmount?.length) {
-      _tgt._hooks.unmount[0]?.();
-      _tgt._hooks.unmount = [];
-    }
     return patchValue(parent, oldNode, _prevChild, childNew, ctx);
   }
   if (newV.type === Fragment) {
@@ -322,6 +269,12 @@ function patchValue(parent, oldNode, oldInput, newInput, ctx) {
   }
   if (typeof newV.type === "string") {
     if (oldNode && oldNode.nodeType === 1) {
+      const oldRef = oldV.props?.ref;
+      const newRef = newV.props?.ref;
+      if (oldRef !== newRef) {
+        if (typeof oldRef === "function") oldRef(null);
+        if (typeof newRef === "function") newRef(oldNode);
+      }
       patchProps(oldNode, oldV.props, newV.props);
       patchChildren(oldNode, oldV, newV, ctx);
     } else if (oldNode) {
@@ -358,6 +311,7 @@ function patchProps(el, oldProps, newProps) {
   const newKeys = newProps ? Object.keys(newProps).filter((k) => k !== "children" && k !== "key" && k !== "innerHTML") : [];
   for (const key of oldKeys) {
     if (!newKeys.includes(key)) {
+      if (key === "ref") continue;
       if (key.startsWith("on") && typeof oldProps[key] === "function") {
         el.removeEventListener(key.slice(2).toLowerCase(), oldProps[key]);
       } else if (key === "value" && (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement)) {
@@ -369,6 +323,7 @@ function patchProps(el, oldProps, newProps) {
     }
   }
   for (const key of newKeys) {
+    if (key === "ref") continue;
     const oldVal = oldProps?.[key];
     const newVal = newProps?.[key];
     if (key === "innerHTML") {
@@ -442,13 +397,17 @@ function patchSimpleChildren(parent, oldChildren, newChildren, ctx) {
     }
   }
   const max = Math.max(oldChildren.length, newChildren.length);
+  const oldNodes = [];
+  for (let i = 0; i < max; i++) {
+    oldNodes.push(parent.childNodes[i] || null);
+  }
   for (let i = 0; i < max; i++) {
     const oldChild = oldChildren[i];
     const newChild = newChildren[i];
-    const existingNode = parent.childNodes[i] || null;
+    const existingNode = oldNodes[i];
     if (oldChild === void 0 && newChild !== void 0) {
       const node = renderValue(newChild, ctx);
-      parent.appendChild(node);
+      parent.insertBefore(node, oldNodes[i + 1] ?? null);
     } else if (oldChild !== void 0 && newChild !== void 0) {
       patchValue(parent, existingNode, oldChild, newChild, ctx);
     }
@@ -497,12 +456,6 @@ function patchKeyedChildren(parent, oldChildren, newChildren, ctx) {
     }
   }
 }
-function runRefCleanup(vnode) {
-  if (vnode._cleanup) {
-    vnode._cleanup();
-    vnode._cleanup = void 0;
-  }
-}
 function cleanupPortalChildren(vnode) {
   const child = vnode._child;
   if (child == null) return;
@@ -533,16 +486,12 @@ function callRefCleanup(input) {
       if (child && typeof child === "object") callRefCleanup(child);
     }
   }
-  if (vnode._$ && vnode._$._hooks?.unmount) {
-    vnode._$._hooks.unmount[0]?.();
-    vnode._$._hooks.unmount = [];
-  }
+  if (typeof vnode.props?.ref === "function") vnode.props.ref(null);
   if (vnode._portalEl) {
     cleanupPortalChildren(vnode);
     vnode._portalEl.remove();
     vnode._portalEl = void 0;
   }
-  if (vnode._cleanup) runRefCleanup(vnode);
 }
 
 // src/client/router.ts
@@ -737,18 +686,35 @@ function wrapComponent(Comp, _ctx) {
   return { type: Comp, props: {}, key: void 0 };
 }
 function createReactiveState(dirty) {
-  return new Proxy({}, {
-    set(target, key, value) {
-      const old = Reflect.get(target, key);
-      if (old === value) return true;
-      Reflect.set(target, key, value);
-      dirty();
-      return true;
-    },
-    get(target, key) {
-      return Reflect.get(target, key);
-    }
-  });
+  const proxyCache = /* @__PURE__ */ new WeakMap();
+  const reactive = (target) => {
+    if (target === null || typeof target !== "object") return target;
+    if (proxyCache.has(target)) return proxyCache.get(target);
+    const proxy = new Proxy(target, {
+      set(target2, key, value) {
+        const old = Reflect.get(target2, key);
+        if (old === value) return true;
+        Reflect.set(target2, key, value);
+        dirty();
+        return true;
+      },
+      get(target2, key) {
+        const value = Reflect.get(target2, key);
+        if (typeof value === "object" && value !== null) return reactive(value);
+        return value;
+      },
+      deleteProperty(target2, key) {
+        if (Reflect.has(target2, key)) {
+          Reflect.deleteProperty(target2, key);
+          dirty();
+        }
+        return true;
+      }
+    });
+    proxyCache.set(target, proxy);
+    return proxy;
+  };
+  return reactive({});
 }
 
 // src/client/types.ts

package/dist/client/render.d.ts

@@ -6,7 +6,7 @@
  *
  * 支持：
  *   - key 属性（keyed diff）
- *   - ctx.ui.onmount/onmounted/onunmount/onupdate 生命周期
+ *   - ref / keyed diff
  *
  * 状态管理：组件使用闭包变量 + ctx.ui.render() 手动触发重渲染。
  */

package/dist/client/types.d.ts

@@ -12,14 +12,6 @@ export interface WfuiContext {
         dirty: () => void;
         /** 创建响应式状态容器：$.x = val 自动触发 dirty()（微任务批量渲染） */
         $: () => Record<string, any>;
-        /** 组件首次渲染后触发（DOM 未创建） */
-        onmount: (fn: () => void) => void;
-        /** 组件 DOM 创建后触发，接收根元素，返回值作为 cleanup */
-        onmounted: (fn: (el: Element) => (() => void) | void) => void;
-        /** 组件移除前清理 */
-        onunmount: (fn: () => void) => void;
-        /** props 变化时触发，接收旧 props */
-        onupdate: (fn: (prevProps: any) => void) => void;
     };
     /** 路由（由 router 中间件注入） */
     route?: {

package/dist/client/vnode.d.ts

@@ -13,11 +13,8 @@ export interface VNode {
     props: Record<string, any>;
     key?: string;
     el?: Node;
-    _$?: Record<string, any>;
     /** 子 VNode 缓存（用于 patchValue diff，避免重复执行组件） */
     _child?: any;
-    /** ref 回调返回的清理函数，卸载时由框架调用 */
-    _cleanup?: (() => void) | undefined;
     /** Portal 子容器 DOM */
     _portalEl?: HTMLDivElement | undefined;
     /** 两阶段组件的 render 函数（mount 返回的函数） */

package/dist/components/Form/Form.d.ts

@@ -1,6 +1,22 @@
 import type { Component } from '../../client/vnode.ts';
+export interface ValidationRule {
+    required?: boolean;
+    pattern?: RegExp;
+    minLength?: number;
+    maxLength?: number;
+    message: string;
+    /** 自定义验证函数，返回 true = 通过，false/string = 失败（string 会覆盖 message） */
+    validator?: (value: any) => boolean | string | Promise<boolean | string>;
+}
 export interface FormProps {
-    onSubmit?: () => void | Promise<void>;
+    /** 提交回调，接收字段名→值的对象 */
+    onSubmit?: (values: Record<string, any>) => void | Promise<void>;
+    /** 验证规则：字段名 → 规则数组 */
+    validation?: Record<string, ValidationRule[]>;
+    /** 验证失败时回调，接收字段名→错误消息的对象 */
+    onError?: (errors: Record<string, string>) => void;
     children?: any;
 }
+/** 验证函数：字段值 → 验证规则 → 错误消息 */
+export declare function validateValues(values: Record<string, any>, rules: Record<string, ValidationRule[]>): Promise<Record<string, string>>;
 export declare const Form: Component<FormProps>;

package/dist/components/Modal/Modal.d.ts

@@ -8,5 +8,9 @@ export interface ModalProps {
     onClose?: () => void;
     children?: any;
     footer?: any;
+    /** 自定义宽度，如 '500px'、'80%'，默认 400px */
+    width?: string;
+    /** 是否显示关闭按钮，默认 true */
+    closable?: boolean;
 }
 export declare const Modal: Component<ModalProps>;

package/dist/components/Select/Select.d.ts

@@ -12,7 +12,11 @@ export interface SelectProps {
     required?: boolean;
     disabled?: boolean;
     error?: string;
-    onChange?: (e: Event) => void;
+    onChange?: (value: string) => void;
     children?: any;
+    /** 启用搜索过滤 */
+    searchable?: boolean;
+    /** 异步搜索回调，返回值作为新选项列表 */
+    onSearch?: (keyword: string) => SelectOption[] | Promise<SelectOption[]>;
 }
 export declare const Select: Component<SelectProps>;

package/dist/components/Skeleton/Skeleton.d.ts

@@ -2,7 +2,7 @@
  * weifuwu/components — Skeleton
  */
 import type { Component } from '../../client/vnode.ts';
-export type SkeletonVariant = 'text' | 'circle' | 'rect';
+export type SkeletonVariant = 'text' | 'circle' | 'rect' | 'image' | 'avatar' | 'table';
 export interface SkeletonProps {
     variant?: SkeletonVariant;
     lines?: number;

package/dist/components/Table/Table.d.ts

@@ -3,11 +3,24 @@ export interface TableColumn {
     key: string;
     label: string;
     width?: number | string;
+    /** 是否可排序 */
+    sortable?: boolean;
+    /** 自定义排序函数，默认按字符串比较 */
+    sorter?: (a: any, b: any) => number;
+    /** 自定义渲染 */
     render?: (value: any, row: any, index: number) => any;
 }
 export interface TableProps {
     data?: any[];
     columns: TableColumn[];
     onRowClick?: (row: any, index: number) => void;
+    /** 当前排序列的 key */
+    sortKey?: string;
+    /** 当前排序方向 */
+    sortOrder?: 'asc' | 'desc';
+    /** 排序变化回调 */
+    onSort?: (key: string, order: 'asc' | 'desc') => void;
+    /** 数据为空时显示的文本 */
+    emptyText?: string;
 }
 export declare const Table: Component<TableProps>;

package/dist/components/Toast/Toast.d.ts

@@ -1,12 +1,21 @@
 import type { Component } from '../../client/vnode.ts';
 export type ToastType = 'success' | 'error' | 'info' | 'warning';
+export type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center';
 export interface ToastItem {
     id: string;
     type: ToastType;
     message: string;
+    /** 此条目的自动消失时间（ms），覆盖 Toast 的默认 duration */
+    duration?: number;
 }
 export interface ToastProps {
     toasts?: ToastItem[];
     onRemove?: (id: string) => void;
+    /** 容器位置，默认 top-right */
+    position?: ToastPosition;
+    /** 全局默认自动消失时间（ms），0 = 不自动消失，默认 0 */
+    duration?: number;
+    /** 最大显示条数，超出时移除最早条目，默认 0 = 不限制 */
+    max?: number;
 }
 export declare const Toast: Component<ToastProps>;

package/dist/components/index.d.ts

@@ -50,7 +50,7 @@ export type { StatCardProps } from './StatCard/StatCard.ts';
 export { Steps } from './Steps/Steps.ts';
 export type { StepsProps, StepItem } from './Steps/Steps.ts';
 export { Form } from './Form/Form.ts';
-export type { FormProps } from './Form/Form.ts';
+export type { FormProps, ValidationRule } from './Form/Form.ts';
 export { Field } from './Field/Field.ts';
 export type { FieldProps } from './Field/Field.ts';
 export { Slider } from './Slider/Slider.ts';