@wsxjs/wsx-core 0.0.8 → 0.0.10

package/src/utils/reactive.ts

@@ -49,7 +49,7 @@ class UpdateScheduler {
             try {
                 callback();
             } catch (error) {
-                console.error("[WSX Reactive] Error in callback:", error);
+                logger.error("[WSX Reactive] Error in callback:", error);
             }
         });
     }
@@ -58,6 +58,82 @@ class UpdateScheduler {
 // 全局调度器实例
 const scheduler = new UpdateScheduler();
 
+// Proxy 缓存：避免为同一个对象创建多个 Proxy
+// 使用 WeakMap 确保对象被垃圾回收时，对应的 Proxy 也被清理
+// Key: 原始对象, Value: Proxy
+const proxyCache = new WeakMap<object, unknown>();
+
+// 反向映射：从 Proxy 到原始对象
+// 用于在 set trap 中比较原始对象而不是 Proxy
+const originalCache = new WeakMap<object, object>();
+
+/**
+ * 递归展开 Proxy，返回完全干净的对象（不包含任何 Proxy）
+ * 用于 JSON.stringify 等需要序列化的场景
+ * 使用 WeakSet 防止循环引用导致的无限递归
+ */
+const unwrappingSet = new WeakSet<object>();
+
+function unwrapProxy(value: unknown): unknown {
+    if (value == null || typeof value !== "object") {
+        return value;
+    }
+
+    // 如果是 Proxy，获取原始对象
+    let original = value;
+    if (originalCache.has(value)) {
+        original = originalCache.get(value)!;
+    }
+
+    // 防止循环引用
+    if (unwrappingSet.has(original)) {
+        return null; // 循环引用时返回 null
+    }
+
+    unwrappingSet.add(original);
+
+    try {
+        if (Array.isArray(original)) {
+            return original.map((item) => unwrapProxy(item));
+        }
+
+        const result: Record<string, unknown> = {};
+        // 直接访问原始对象的属性，不通过 Proxy
+        for (const key in original) {
+            if (Object.prototype.hasOwnProperty.call(original, key)) {
+                const propValue = original[key];
+                // 如果属性值是 Proxy，先获取原始对象再递归
+                if (
+                    propValue != null &&
+                    typeof propValue === "object" &&
+                    originalCache.has(propValue)
+                ) {
+                    result[key] = unwrapProxy(originalCache.get(propValue)!);
+                } else {
+                    result[key] = unwrapProxy(propValue);
+                }
+            }
+        }
+
+        return result;
+    } finally {
+        unwrappingSet.delete(original);
+    }
+}
+
+/**
+ * 数组变异方法列表 - 这些方法会修改数组内容
+ */
+const ARRAY_MUTATION_METHODS = [
+    "push",
+    "pop",
+    "shift",
+    "unshift",
+    "splice",
+    "sort",
+    "reverse",
+] as const;
+
 /**
  * 创建响应式对象
  *
@@ -66,13 +142,34 @@ const scheduler = new UpdateScheduler();
  * @returns 响应式代理对象
  */
 export function reactive<T extends object>(obj: T, onChange: ReactiveCallback): T {
-    return new Proxy(obj, {
-        set(target: T, key: string | symbol, value: any): boolean {
+    // 检查缓存，避免为同一个对象创建多个 Proxy
+    if (proxyCache.has(obj)) {
+        return proxyCache.get(obj) as T;
+    }
+
+    // 检查是否为数组
+    const isArray = Array.isArray(obj);
+
+    const proxy = new Proxy(obj, {
+        set(target: T, key: string | symbol, value: unknown): boolean {
             const oldValue = target[key as keyof T];
 
-            // 只有值真正改变时才触发更新
-            if (oldValue !== value) {
-                target[key as keyof T] = value;
+            // 获取原始对象进行比较（如果 oldValue 是 Proxy）
+            const oldOriginal = originalCache.get(oldValue as object) || oldValue;
+            const newOriginal =
+                value != null && typeof value === "object"
+                    ? originalCache.get(value as object) || value
+                    : value;
+
+            // 只有值真正改变时才触发更新（比较原始对象）
+            if (oldOriginal !== newOriginal) {
+                // 如果新值是对象或数组，确保它也被包装为响应式
+                if (value != null && typeof value === "object") {
+                    const reactiveValue = reactive(value as object, onChange);
+                    target[key as keyof T] = reactiveValue as T[keyof T];
+                } else {
+                    target[key as keyof T] = value as T[keyof T];
+                }
 
                 // 调度更新
                 scheduler.schedule(onChange);
@@ -81,22 +178,62 @@ export function reactive<T extends object>(obj: T, onChange: ReactiveCallback):
             return true;
         },
 
-        get(target: T, key: string | symbol): any {
-            return target[key as keyof T];
+        get(target: T, key: string | symbol): unknown {
+            // 支持 toJSON，让 JSON.stringify 使用原始对象，避免触发 Proxy trap 递归
+            if (key === "toJSON") {
+                return function () {
+                    // 递归展开所有嵌套 Proxy，返回完全干净的对象
+                    return unwrapProxy(obj);
+                };
+            }
+
+            const value = target[key as keyof T];
+
+            // 如果是数组，拦截数组变异方法
+            if (
+                isArray &&
+                typeof key === "string" &&
+                ARRAY_MUTATION_METHODS.includes(key as (typeof ARRAY_MUTATION_METHODS)[number])
+            ) {
+                return function (this: unknown, ...args: unknown[]) {
+                    // 调用原始方法
+                    const arrayMethod = Array.prototype[key as keyof Array<unknown>] as (
+                        ...args: unknown[]
+                    ) => unknown;
+                    const result = arrayMethod.apply(target, args);
+
+                    // 数组内容已改变，触发更新
+                    scheduler.schedule(onChange);
+
+                    return result;
+                };
+            }
+
+            // 如果值是对象或数组，自动包装为响应式（支持嵌套对象）
+            if (value != null && typeof value === "object") {
+                // 先检查缓存，避免重复创建 Proxy
+                // 如果对象已经在缓存中，直接返回缓存的 Proxy（使用相同的 onChange）
+                if (proxyCache.has(value)) {
+                    return proxyCache.get(value);
+                }
+                // 否则创建新的 Proxy
+                return reactive(value, onChange);
+            }
+
+            return value;
         },
 
         has(target: T, key: string | symbol): boolean {
             return key in target;
         },
+    });
 
-        ownKeys(target: T): ArrayLike<string | symbol> {
-            return Reflect.ownKeys(target);
-        },
+    // 缓存 Proxy，避免重复创建
+    proxyCache.set(obj, proxy);
+    // 缓存反向映射：从 Proxy 到原始对象
+    originalCache.set(proxy, obj);
 
-        getOwnPropertyDescriptor(target: T, key: string | symbol): PropertyDescriptor | undefined {
-            return Reflect.getOwnPropertyDescriptor(target, key);
-        },
-    });
+    return proxy;
 }
 
 /**
@@ -128,18 +265,6 @@ export function createState<T>(
     return [getter, setter];
 }
 
-/**
- * 检查一个值是否为响应式对象
- */
-export function isReactive(value: any): boolean {
-    return (
-        value != null &&
-        typeof value === "object" &&
-        value.constructor === Object &&
-        typeof value.valueOf === "function"
-    );
-}
-
 /**
  * 开发模式下的调试工具
  */
@@ -149,7 +274,7 @@ export const ReactiveDebug = {
      */
     enable(): void {
         if (typeof window !== "undefined") {
-            (window as any).__WSX_REACTIVE_DEBUG__ = true;
+            (window as Window & { __WSX_REACTIVE_DEBUG__?: boolean }).__WSX_REACTIVE_DEBUG__ = true;
         }
     },
 
@@ -158,7 +283,8 @@ export const ReactiveDebug = {
      */
     disable(): void {
         if (typeof window !== "undefined") {
-            (window as any).__WSX_REACTIVE_DEBUG__ = false;
+            (window as Window & { __WSX_REACTIVE_DEBUG__?: boolean }).__WSX_REACTIVE_DEBUG__ =
+                false;
         }
     },
 
@@ -166,13 +292,17 @@ export const ReactiveDebug = {
      * 检查是否启用调试模式
      */
     isEnabled(): boolean {
-        return typeof window !== "undefined" && (window as any).__WSX_REACTIVE_DEBUG__ === true;
+        return (
+            typeof window !== "undefined" &&
+            (window as Window & { __WSX_REACTIVE_DEBUG__?: boolean }).__WSX_REACTIVE_DEBUG__ ===
+                true
+        );
     },
 
     /**
      * 调试日志
      */
-    log(message: string, ...args: any[]): void {
+    log(message: string, ...args: unknown[]): void {
         if (this.isEnabled()) {
             logger.info(`[WSX Reactive] ${message}`, ...args);
         }
@@ -188,9 +318,10 @@ export function reactiveWithDebug<T extends object>(
     debugName?: string
 ): T {
     const name = debugName || obj.constructor.name || "Unknown";
+    const isArray = Array.isArray(obj);
 
     return new Proxy(obj, {
-        set(target: T, key: string | symbol, value: any): boolean {
+        set(target: T, key: string | symbol, value: unknown): boolean {
             const oldValue = target[key as keyof T];
 
             if (oldValue !== value) {
@@ -200,15 +331,58 @@ export function reactiveWithDebug<T extends object>(
                     newValue: value,
                 });
 
-                target[key as keyof T] = value;
+                target[key as keyof T] = value as T[keyof T];
                 scheduler.schedule(onChange);
             }
 
             return true;
         },
 
-        get(target: T, key: string | symbol): any {
-            return target[key as keyof T];
+        get(target: T, key: string | symbol): unknown {
+            // 支持 toJSON，让 JSON.stringify 使用原始对象，避免触发 Proxy trap 递归
+            if (key === "toJSON") {
+                return function () {
+                    // 递归展开所有嵌套 Proxy，返回完全干净的对象
+                    return unwrapProxy(obj);
+                };
+            }
+
+            const value = target[key as keyof T];
+
+            // 如果是数组，拦截数组变异方法
+            if (
+                isArray &&
+                typeof key === "string" &&
+                ARRAY_MUTATION_METHODS.includes(key as (typeof ARRAY_MUTATION_METHODS)[number])
+            ) {
+                return function (this: unknown, ...args: unknown[]) {
+                    ReactiveDebug.log(`Array mutation in ${name}:`, {
+                        method: key,
+                        args,
+                    });
+
+                    // 调用原始方法
+                    const arrayMethod = Array.prototype[key as keyof Array<unknown>] as (
+                        ...args: unknown[]
+                    ) => unknown;
+                    const result = arrayMethod.apply(target, args);
+
+                    // 数组内容已改变，触发更新
+                    scheduler.schedule(onChange);
+
+                    return result;
+                };
+            }
+
+            // 如果值是对象或数组，自动包装为响应式（支持嵌套对象）
+            if (value != null && typeof value === "object") {
+                // 检查是否已经是响应式（通过检查是否有 Proxy 标记）
+                // 简单检查：如果值已经是 Proxy，直接返回
+                // 否则，递归包装为响应式
+                return reactiveWithDebug(value, onChange, `${name}.${String(key)}`);
+            }
+
+            return value;
         },
     });
 }

package/src/web-component.ts

@@ -11,24 +11,14 @@
 import { h, type JSXChildren } from "./jsx-factory";
 import { StyleManager } from "./styles/style-manager";
 import { BaseComponent, type BaseComponentConfig } from "./base-component";
+import { createLogger } from "./utils/logger";
 
-/**
- * Web Component 配置接口
- */
-export interface WebComponentConfig extends BaseComponentConfig {
-    preserveFocus?: boolean; // 是否在重渲染时保持焦点
-}
+const logger = createLogger("WebComponent");
 
 /**
- * Type for focus data saved during rerender
+ * Web Component 配置接口
  */
-interface FocusData {
-    tagName: string;
-    className: string;
-    value?: string;
-    selectionStart?: number;
-    selectionEnd?: number;
-}
+export type WebComponentConfig = BaseComponentConfig;
 
 /**
  * 通用 WSX Web Component 基础抽象类
@@ -36,13 +26,10 @@ interface FocusData {
 export abstract class WebComponent extends BaseComponent {
     declare shadowRoot: ShadowRoot;
     protected config!: WebComponentConfig; // Initialized by BaseComponent constructor
-    private _preserveFocus: boolean = true;
 
     constructor(config: WebComponentConfig = {}) {
         super(config);
         // BaseComponent already created this.config with getter for styles
-        // Just update preserveFocus property
-        this._preserveFocus = config.preserveFocus ?? true;
         this.attachShadow({ mode: "open" });
         // Styles are applied in connectedCallback for consistency with LightComponent
         // and to ensure all class properties (including getters) are initialized
@@ -62,9 +49,8 @@ export abstract class WebComponent extends BaseComponent {
         this.connected = true;
         try {
             // 应用CSS样式到Shadow DOM
-            // Using method call ensures styles are available when accessed
-            // This is consistent with LightComponent and avoids execution order issues
-            const stylesToApply = this._getAutoStyles?.() || this.config.styles;
+            // Check both _autoStyles getter and config.styles getter
+            const stylesToApply = this._autoStyles || this.config.styles;
             if (stylesToApply) {
                 const styleName = this.config.styleName || this.constructor.name;
                 StyleManager.applyStyles(this.shadowRoot, styleName, stylesToApply);
@@ -74,10 +60,13 @@ export abstract class WebComponent extends BaseComponent {
             const content = this.render();
             this.shadowRoot.appendChild(content);
 
+            // 初始化事件监听器
+            this.initializeEventListeners();
+
             // 调用子类的初始化钩子
             this.onConnected?.();
         } catch (error) {
-            console.error(`[${this.constructor.name}] Error in connectedCallback:`, error);
+            logger.error(`Error in connectedCallback:`, error);
             this.renderError(error);
         }
     }
@@ -87,6 +76,7 @@ export abstract class WebComponent extends BaseComponent {
      */
     disconnectedCallback(): void {
         this.connected = false;
+        this.cleanup(); // 清理资源（包括防抖定时器）
         this.onDisconnected?.();
     }
 
@@ -115,156 +105,79 @@ export abstract class WebComponent extends BaseComponent {
      */
     protected rerender(): void {
         if (!this.connected) {
-            console.warn(
-                `[${this.constructor.name}] Component is not connected, skipping rerender.`
-            );
+            logger.warn("Component is not connected, skipping rerender.");
             return;
         }
 
-        // 保存焦点状态（如果启用）
-        let focusData: FocusData | null = null;
-        if (this._preserveFocus && this.shadowRoot) {
-            const activeElement = this.shadowRoot.activeElement;
-            focusData = this.saveFocusState(activeElement);
-        }
+        // 1. 捕获焦点状态（在 DOM 替换之前）
+        const focusState = this.captureFocusState();
+        // 保存到实例变量，供 render() 使用（如果需要）
+        this._pendingFocusState = focusState;
 
         // 保存当前的 adopted stylesheets (jsdom may not support this)
         const adoptedStyleSheets = this.shadowRoot.adoptedStyleSheets || [];
 
-        // 清空现有内容但保留样式
-        this.shadowRoot.innerHTML = "";
-
-        // 恢复 adopted stylesheets (避免重新应用样式)
-        if (this.shadowRoot.adoptedStyleSheets) {
-            this.shadowRoot.adoptedStyleSheets = adoptedStyleSheets;
-        }
-
-        // 只有在没有 adopted stylesheets 时才重新应用样式
-        // Check both _autoStyles getter and config.styles getter
-        if (adoptedStyleSheets.length === 0) {
-            const stylesToApply = this._autoStyles || this.config.styles;
-            if (stylesToApply) {
-                const styleName = this.config.styleName || this.constructor.name;
-                StyleManager.applyStyles(this.shadowRoot, styleName, stylesToApply);
+        try {
+            // 只有在没有 adopted stylesheets 时才重新应用样式
+            // Check both _autoStyles getter and config.styles getter
+            if (adoptedStyleSheets.length === 0) {
+                const stylesToApply = this._autoStyles || this.config.styles;
+                if (stylesToApply) {
+                    const styleName = this.config.styleName || this.constructor.name;
+                    StyleManager.applyStyles(this.shadowRoot, styleName, stylesToApply);
+                }
             }
-        }
 
-        // 重新渲染JSX
-        try {
+            // 重新渲染JSX
             const content = this.render();
-            this.shadowRoot.appendChild(content);
-        } catch (error) {
-            console.error(`[${this.constructor.name}] Error in rerender:`, error);
-            this.renderError(error);
-        }
-
-        // 恢复焦点状态
-        if (this._preserveFocus && focusData && this.shadowRoot) {
-            this.restoreFocusState(focusData);
-        }
-    }
 
-    /**
-     * 保存焦点状态
-     */
-    private saveFocusState(activeElement: Element | null): FocusData | null {
-        if (!activeElement) {
-            return null;
-        }
-
-        const focusData: FocusData = {
-            tagName: activeElement.tagName.toLowerCase(),
-            className: activeElement.className,
-        };
-
-        // Save selection/cursor position
-        if (activeElement.hasAttribute("contenteditable")) {
-            const selection = window.getSelection();
-            if (selection && selection.rangeCount > 0) {
-                const range = selection.getRangeAt(0);
-                focusData.selectionStart = range.startOffset;
-                focusData.selectionEnd = range.endOffset;
+            // 在添加到 DOM 之前恢复值，避免浏览器渲染状态值
+            // 这样可以确保值在元素添加到 DOM 之前就是正确的
+            if (focusState && focusState.key && focusState.value !== undefined) {
+                // 在 content 树中查找目标元素
+                const target = content.querySelector(
+                    `[data-wsx-key="${focusState.key}"]`
+                ) as HTMLElement;
+
+                if (target) {
+                    if (
+                        target instanceof HTMLInputElement ||
+                        target instanceof HTMLTextAreaElement
+                    ) {
+                        target.value = focusState.value;
+                    }
+                }
             }
-        }
 
-        // Save input/select element state
-        if (
-            activeElement instanceof HTMLInputElement ||
-            activeElement instanceof HTMLSelectElement
-        ) {
-            focusData.value = activeElement.value;
-            if ("selectionStart" in activeElement) {
-                focusData.selectionStart = activeElement.selectionStart ?? undefined;
-                focusData.selectionEnd = activeElement.selectionEnd ?? undefined;
+            // 恢复 adopted stylesheets (避免重新应用样式)
+            if (this.shadowRoot.adoptedStyleSheets) {
+                this.shadowRoot.adoptedStyleSheets = adoptedStyleSheets;
             }
-        }
 
-        return focusData;
-    }
+            // 使用 requestAnimationFrame 批量执行 DOM 操作，减少重绘
+            // 在同一帧中完成添加和移除，避免中间状态
+            requestAnimationFrame(() => {
+                // 先添加新内容
+                this.shadowRoot.appendChild(content);
 
-    /**
-     * 恢复焦点状态
-     */
-    private restoreFocusState(focusData: FocusData): void {
-        if (!focusData) return;
-
-        try {
-            let targetElement: Element | null = null;
-
-            // Try to find by className first (most specific)
-            if (focusData.className) {
-                targetElement = this.shadowRoot.querySelector(
-                    `.${focusData.className.split(" ")[0]}`
+                // 立即移除旧内容（在同一帧中，浏览器会批量处理）
+                const oldChildren = Array.from(this.shadowRoot.children).filter(
+                    (child) => child !== content
                 );
-            }
-
-            // Fallback: find by tag name
-            if (!targetElement) {
-                targetElement = this.shadowRoot.querySelector(focusData.tagName);
-            }
-
-            if (targetElement) {
-                // Restore focus - prevent page scroll
-                (targetElement as HTMLElement).focus({ preventScroll: true });
-
-                // Restore selection/cursor position
-                if (focusData.selectionStart !== undefined) {
-                    if (targetElement instanceof HTMLInputElement) {
-                        targetElement.setSelectionRange(
-                            focusData.selectionStart,
-                            focusData.selectionEnd ?? focusData.selectionStart
-                        );
-                    } else if (targetElement instanceof HTMLSelectElement) {
-                        targetElement.value = focusData.value ?? "";
-                    } else if (targetElement.hasAttribute("contenteditable")) {
-                        this.setCursorPosition(targetElement, focusData.selectionStart);
-                    }
-                }
-            }
-        } catch {
-            // Silently handle focus restoration failure
-        }
-    }
-
-    /**
-     * 设置光标位置
-     */
-    private setCursorPosition(element: Element, position: number): void {
-        try {
-            const selection = window.getSelection();
-            if (selection) {
-                const range = document.createRange();
-                const textNode = element.childNodes[0];
-                if (textNode) {
-                    const maxPos = Math.min(position, textNode.textContent?.length || 0);
-                    range.setStart(textNode, maxPos);
-                    range.setEnd(textNode, maxPos);
-                    selection.removeAllRanges();
-                    selection.addRange(range);
-                }
-            }
-        } catch {
-            // Silently handle cursor position failure
+                oldChildren.forEach((child) => child.remove());
+
+                // 恢复焦点状态（在 DOM 替换之后）
+                // 值已经在添加到 DOM 之前恢复了，这里只需要恢复焦点和光标位置
+                // 使用另一个 requestAnimationFrame 确保 DOM 已完全更新
+                requestAnimationFrame(() => {
+                    this.restoreFocusState(focusState);
+                    // 清除待处理的焦点状态
+                    this._pendingFocusState = null;
+                });
+            });
+        } catch (error) {
+            logger.error("Error in rerender:", error);
+            this.renderError(error);
         }
     }