@wsxjs/wsx-core 0.0.7 → 0.0.9

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

@@ -10,43 +10,29 @@
 
 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";
+
+const logger = createLogger("WebComponent");
 
 /**
  * Web Component 配置接口
  */
-export interface WebComponentConfig {
-    styles?: string; // CSS内容
-    styleName?: string; // 样式名称，用于缓存
-    [key: string]: unknown;
-}
+export type WebComponentConfig = BaseComponentConfig;
 
 /**
  * 通用 WSX Web Component 基础抽象类
  */
-export abstract class WebComponent extends HTMLElement {
+export abstract class WebComponent extends BaseComponent {
     declare shadowRoot: ShadowRoot;
-    protected config: WebComponentConfig;
-    protected connected: boolean = false;
-
-    /**
-     * 子类应该重写这个方法来定义观察的属性
-     * @returns 要观察的属性名数组
-     */
-    static get observedAttributes(): string[] {
-        return [];
-    }
+    protected config!: WebComponentConfig; // Initialized by BaseComponent constructor
 
     constructor(config: WebComponentConfig = {}) {
-        super();
-
-        this.config = config;
+        super(config);
+        // BaseComponent already created this.config with getter for styles
         this.attachShadow({ mode: "open" });
-
-        // 自动应用CSS样式
-        if (config.styles) {
-            const styleName = config.styleName || this.constructor.name;
-            StyleManager.applyStyles(this.shadowRoot, styleName, config.styles);
-        }
+        // Styles are applied in connectedCallback for consistency with LightComponent
+        // and to ensure all class properties (including getters) are initialized
     }
 
     /**
@@ -62,14 +48,25 @@ export abstract class WebComponent extends HTMLElement {
     connectedCallback(): void {
         this.connected = true;
         try {
+            // 应用CSS样式到Shadow DOM
+            // 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);
+            }
+
             // 渲染JSX内容到Shadow DOM
             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);
         }
     }
@@ -78,31 +75,11 @@ export abstract class WebComponent extends HTMLElement {
      * Web Component生命周期：从DOM断开
      */
     disconnectedCallback(): void {
+        this.connected = false;
+        this.cleanup(); // 清理资源（包括防抖定时器）
         this.onDisconnected?.();
     }
 
-    /**
-     * Web Component生命周期：属性变化
-     */
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
-        this.onAttributeChanged?.(name, oldValue, newValue);
-    }
-
-    /**
-     * 可选生命周期钩子：组件已连接
-     */
-    protected onConnected?(): void;
-
-    /**
-     * 可选生命周期钩子：组件已断开
-     */
-    protected onDisconnected?(): void;
-
-    /**
-     * 可选生命周期钩子：属性已更改
-     */
-    protected onAttributeChanged?(name: string, oldValue: string, newValue: string): void;
-
     /**
      * 查找Shadow DOM内的元素
      *
@@ -128,34 +105,78 @@ export abstract class WebComponent extends HTMLElement {
      */
     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;
         }
-        // 保存当前的 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;
-        }
+        // 1. 捕获焦点状态（在 DOM 替换之前）
+        const focusState = this.captureFocusState();
+        // 保存到实例变量，供 render() 使用（如果需要）
+        this._pendingFocusState = focusState;
 
-        // 只有在没有 adopted stylesheets 时才重新应用样式
-        if (adoptedStyleSheets.length === 0 && this.config.styles) {
-            const styleName = this.config.styleName || this.constructor.name;
-            StyleManager.applyStyles(this.shadowRoot, styleName, this.config.styles);
-        }
+        // 保存当前的 adopted stylesheets (jsdom may not support this)
+        const adoptedStyleSheets = this.shadowRoot.adoptedStyleSheets || [];
 
-        // 重新渲染JSX
         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
             const content = this.render();
-            this.shadowRoot.appendChild(content);
+
+            // 在添加到 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;
+                    }
+                }
+            }
+
+            // 恢复 adopted stylesheets (避免重新应用样式)
+            if (this.shadowRoot.adoptedStyleSheets) {
+                this.shadowRoot.adoptedStyleSheets = adoptedStyleSheets;
+            }
+
+            // 使用 requestAnimationFrame 批量执行 DOM 操作，减少重绘
+            // 在同一帧中完成添加和移除，避免中间状态
+            requestAnimationFrame(() => {
+                // 先添加新内容
+                this.shadowRoot.appendChild(content);
+
+                // 立即移除旧内容（在同一帧中，浏览器会批量处理）
+                const oldChildren = Array.from(this.shadowRoot.children).filter(
+                    (child) => child !== content
+                );
+                oldChildren.forEach((child) => child.remove());
+
+                // 恢复焦点状态（在 DOM 替换之后）
+                // 值已经在添加到 DOM 之前恢复了，这里只需要恢复焦点和光标位置
+                // 使用另一个 requestAnimationFrame 确保 DOM 已完全更新
+                requestAnimationFrame(() => {
+                    this.restoreFocusState(focusState);
+                    // 清除待处理的焦点状态
+                    this._pendingFocusState = null;
+                });
+            });
         } catch (error) {
-            console.error(`[${this.constructor.name}] Error in rerender:`, error);
+            logger.error("Error in rerender:", error);
             this.renderError(error);
         }
     }
@@ -182,67 +203,6 @@ export abstract class WebComponent extends HTMLElement {
 
         this.shadowRoot.appendChild(errorElement);
     }
-
-    /**
-     * 获取配置值
-     *
-     * @param key - 配置键
-     * @param defaultValue - 默认值
-     * @returns 配置值
-     */
-    protected getConfig<T>(key: string, defaultValue?: T): T {
-        return (this.config[key] as T) ?? (defaultValue as T);
-    }
-
-    /**
-     * 设置配置值
-     *
-     * @param key - 配置键
-     * @param value - 配置值
-     */
-    protected setConfig(key: string, value: unknown): void {
-        this.config[key] = value;
-    }
-
-    /**
-     * 获取属性值
-     *
-     * @param name - 属性名
-     * @param defaultValue - 默认值
-     * @returns 属性值
-     */
-    protected getAttr(name: string, defaultValue = ""): string {
-        return this.getAttribute(name) || defaultValue;
-    }
-
-    /**
-     * 设置属性值
-     *
-     * @param name - 属性名
-     * @param value - 属性值
-     */
-    protected setAttr(name: string, value: string): void {
-        this.setAttribute(name, value);
-    }
-
-    /**
-     * 移除属性
-     *
-     * @param name - 属性名
-     */
-    protected removeAttr(name: string): void {
-        this.removeAttribute(name);
-    }
-
-    /**
-     * 检查是否有属性
-     *
-     * @param name - 属性名
-     * @returns 是否存在
-     */
-    protected hasAttr(name: string): boolean {
-        return this.hasAttribute(name);
-    }
 }
 
 // 导出JSX助手

package/types/index.d.ts

@@ -10,8 +10,8 @@ export type { JSXChildren } from "../src/jsx-factory";
 // 导出 WebComponent 类和配置
 export { WebComponent, type WebComponentConfig } from "../src/web-component";
 
-// 导出响应式 WebComponent 类和配置
-export { ReactiveWebComponent, type ReactiveWebComponentConfig } from "../src/reactive-component";
+// 导出响应式装饰器 (@state)
+export { state } from "../src/reactive-decorator";
 
 // 导出 LightComponent 类和配置
 export { LightComponent, type LightComponentConfig } from "../src/light-component";