@wsxjs/wsx-core 0.0.30 → 0.1.0

package/src/base-component.ts

@@ -19,19 +19,6 @@ interface ReactiveStateStorage {
     setter: (value: unknown | ((prev: unknown) => unknown)) => void;
 }
 
-/**
- * Focus state interface for focus preservation during rerender
- */
-interface FocusState {
-    key: string;
-    elementType: "input" | "textarea" | "select" | "contenteditable";
-    value?: string;
-    selectionStart?: number;
-    selectionEnd?: number;
-    scrollTop?: number; // For textarea
-    selectedIndex?: number; // For select
-}
-
 /**
  * Base configuration interface
  */
@@ -62,28 +49,18 @@ export abstract class BaseComponent extends HTMLElement {
     protected _autoStyles?: string;
 
     /**
-     * DOM Cache Manager for fine-grained updates (RFC 0037)
+     * Unique instance ID for this component
+     * Used for generating stable cache keys (RFC 0059)
+     * Can be manually set or auto-generated by cache-key.ts if missing
      * @internal
      */
-    protected _domCache = new DOMCacheManager();
+    public _wsxInstanceId?: string;
 
     /**
-     * 当前捕获的焦点状态（用于在 render 时使用捕获的值）
-     * @internal - 由 rerender() 方法管理
-     */
-    protected _pendingFocusState: FocusState | null = null;
-
-    /**
-     * 防抖定时器，用于延迟重渲染（当用户正在输入时）
-     * @internal
-     */
-    private _rerenderDebounceTimer: number | null = null;
-
-    /**
-     * 待处理的重渲染标志（当用户正在输入时，标记需要重渲染但延迟执行）
+     * DOM Cache Manager for fine-grained updates (RFC 0037)
      * @internal
      */
-    private _pendingRerender: boolean = false;
+    protected _domCache = new DOMCacheManager();
 
     /**
      * 正在渲染标志（防止在 _rerender() 执行期间再次触发 scheduleRerender()）
@@ -160,40 +137,6 @@ export abstract class BaseComponent extends HTMLElement {
         return this._domCache;
     }
 
-    /**
-     * 处理 blur 事件，在用户停止输入时执行待处理的重渲染
-     * @internal
-     */
-    private handleGlobalBlur = (event: FocusEvent): void => {
-        // 检查 blur 的元素是否在组件内
-        const root = this.getActiveRoot();
-        const target = event.target as HTMLElement;
-
-        if (target && root.contains(target)) {
-            // 用户停止输入，执行待处理的重渲染
-            if (this._pendingRerender && this.connected) {
-                // 清除防抖定时器
-                if (this._rerenderDebounceTimer !== null) {
-                    clearTimeout(this._rerenderDebounceTimer);
-                    this._rerenderDebounceTimer = null;
-                }
-
-                // 延迟一小段时间后重渲染，确保 blur 事件完全处理
-                requestAnimationFrame(() => {
-                    if (this._pendingRerender && this.connected && !this._isRendering) {
-                        this._pendingRerender = false;
-                        // 设置渲染标志，防止在 _rerender() 执行期间再次触发
-                        // 注意：_isRendering 标志会在 _rerender() 的 onRendered() 调用完成后清除
-                        this._isRendering = true;
-                        // 调用 _rerender() 执行实际渲染（不再调用 rerender()，避免循环）
-                        // _isRendering 标志会在 _rerender() 完成所有异步操作后清除
-                        this._rerender();
-                    }
-                });
-            }
-        }
-    };
-
     /**
      * 可选生命周期钩子：组件已断开
      */
@@ -260,11 +203,6 @@ export abstract class BaseComponent extends HTMLElement {
      */
     protected scheduleRerender(): void {
         if (!this.connected) {
-            // 如果组件已断开，清除定时器
-            if (this._rerenderDebounceTimer !== null) {
-                clearTimeout(this._rerenderDebounceTimer);
-                this._rerenderDebounceTimer = null;
-            }
             return;
         }
 
@@ -279,60 +217,6 @@ export abstract class BaseComponent extends HTMLElement {
             return;
         }
 
-        // 检查是否有需要持续输入的元素获得焦点（input、textarea、select、contenteditable）
-        // 按钮等其他元素应该立即重渲染，以反映状态变化
-        const root = this.getActiveRoot();
-        let activeElement: HTMLElement | null = null;
-
-        if (root instanceof ShadowRoot) {
-            activeElement = root.activeElement as HTMLElement | null;
-        } else {
-            const docActiveElement = document.activeElement;
-            if (docActiveElement && root.contains(docActiveElement)) {
-                activeElement = docActiveElement as HTMLElement;
-            }
-        }
-
-        // 只对需要持续输入的元素跳过重渲染（input、textarea、select、contenteditable）
-        // 按钮等其他元素应该立即重渲染
-        // 如果元素有 data-wsx-force-render 属性，即使是要持续输入的元素也强制重渲染
-        if (activeElement) {
-            // 检查是否是需要持续输入的元素
-            // 注意：radio 和 checkbox 不需要持续输入，应该立即重渲染
-            const isInputElement =
-                (activeElement instanceof HTMLInputElement &&
-                    activeElement.type !== "radio" &&
-                    activeElement.type !== "checkbox") ||
-                activeElement instanceof HTMLTextAreaElement ||
-                activeElement instanceof HTMLSelectElement ||
-                activeElement.hasAttribute("contenteditable");
-
-            // 检查是否有强制渲染属性
-            const forceRender = activeElement.hasAttribute("data-wsx-force-render");
-
-            // 如果是输入元素且没有强制渲染属性，跳过重渲染，等待 blur 事件
-            if (isInputElement && !forceRender) {
-                // 标记需要重渲染，但延迟到 blur 事件
-                this._pendingRerender = true;
-
-                // 清除之前的定时器（不再使用定时器，只等待 blur）
-                if (this._rerenderDebounceTimer !== null) {
-                    clearTimeout(this._rerenderDebounceTimer);
-                    this._rerenderDebounceTimer = null;
-                }
-
-                // 不执行重渲染，等待 blur 事件
-                return;
-            }
-            // 对于按钮等其他元素，或者有 data-wsx-force-render 属性的输入元素，继续执行重渲染（不跳过）
-        }
-
-        // 没有焦点元素，立即重渲染（使用 requestAnimationFrame 确保在下一个渲染帧执行）
-        // 如果有待处理的重渲染，也立即执行
-        if (this._pendingRerender) {
-            this._pendingRerender = false;
-        }
-
         // 标记已调度渲染（批量更新的关键）
         this._hasScheduledRender = true;
 
@@ -383,19 +267,7 @@ export abstract class BaseComponent extends HTMLElement {
      * @internal
      */
     protected cleanup(): void {
-        // 清除防抖定时器
-        if (this._rerenderDebounceTimer !== null) {
-            clearTimeout(this._rerenderDebounceTimer);
-            this._rerenderDebounceTimer = null;
-        }
-
-        // 移除 blur 事件监听器
-        const root = this.getActiveRoot();
-        // 注意：在 disconnectedCallback 中，shadowRoot 仍然可用
-        root.removeEventListener("blur", this.handleGlobalBlur as EventListener, true);
-
-        // 清除待处理的重渲染标志
-        this._pendingRerender = false;
+        // 清理逻辑已简化，不再需要清除定时器或事件监听器
     }
 
     /**
@@ -403,13 +275,7 @@ export abstract class BaseComponent extends HTMLElement {
      * @internal
      */
     protected initializeEventListeners(): void {
-        // 添加 blur 事件监听器，在用户停止输入时执行待处理的重渲染
-        // 关键修复：将监听器在这个组件的根节点上注册（ShadowRoot 或 Host Element）
-        // 而不是 document。因为 blur 事件在 Shadow DOM 中默认是不冒泡且不跨越边界的 (composed: false)
-        // 如果监听器在 document 上，它无法捕获到 Shadow DOM 内部元素的 blur 事件
-        // 使用 capture: true 确保我们在事件到达目标之前捕获它（对于 blur 主要是为了捕获）
-        const root = this.getActiveRoot();
-        root.addEventListener("blur", this.handleGlobalBlur as EventListener, true);
+        // 初始化逻辑已简化，不再需要添加 blur 监听器
     }
 
     /**
@@ -491,171 +357,4 @@ export abstract class BaseComponent extends HTMLElement {
         }
         return this;
     }
-
-    /**
-     * 捕获当前焦点状态（在重渲染之前调用）
-     * @returns 焦点状态，如果没有焦点元素则返回 null
-     */
-    protected captureFocusState(): FocusState | null {
-        const root = this.getActiveRoot();
-        let activeElement: Element | null = null;
-
-        // 获取活动元素
-        if (root instanceof ShadowRoot) {
-            // Shadow DOM: 使用 shadowRoot.activeElement
-            activeElement = root.activeElement;
-        } else {
-            // Light DOM: 检查 document.activeElement 是否在组件内
-            const docActiveElement = document.activeElement;
-            if (docActiveElement && root.contains(docActiveElement)) {
-                activeElement = docActiveElement;
-            }
-        }
-
-        if (!activeElement || !(activeElement instanceof HTMLElement)) {
-            return null;
-        }
-
-        // 检查元素是否有 data-wsx-key 属性
-        const key = activeElement.getAttribute("data-wsx-key");
-        if (!key) {
-            return null; // 元素没有 key，跳过焦点保持
-        }
-
-        const tagName = activeElement.tagName.toLowerCase();
-        const state: FocusState = {
-            key,
-            elementType: tagName as FocusState["elementType"],
-        };
-
-        // 处理 input 和 textarea
-        if (
-            activeElement instanceof HTMLInputElement ||
-            activeElement instanceof HTMLTextAreaElement
-        ) {
-            state.value = activeElement.value;
-            state.selectionStart = activeElement.selectionStart ?? undefined;
-            state.selectionEnd = activeElement.selectionEnd ?? undefined;
-
-            // 对于 textarea，保存滚动位置
-            if (activeElement instanceof HTMLTextAreaElement) {
-                state.scrollTop = activeElement.scrollTop;
-            }
-        }
-        // 处理 select
-        else if (activeElement instanceof HTMLSelectElement) {
-            state.elementType = "select";
-            state.selectedIndex = activeElement.selectedIndex;
-        }
-        // 处理 contenteditable
-        else if (activeElement.hasAttribute("contenteditable")) {
-            state.elementType = "contenteditable";
-            const selection = window.getSelection();
-            if (selection && selection.rangeCount > 0) {
-                const range = selection.getRangeAt(0);
-                state.selectionStart = range.startOffset;
-                state.selectionEnd = range.endOffset;
-            }
-        }
-
-        return state;
-    }
-
-    /**
-     * 恢复焦点状态（在重渲染之后调用）
-     * @param state - 之前捕获的焦点状态
-     */
-    protected restoreFocusState(state: FocusState | null): void {
-        if (!state || !state.key) {
-            return;
-        }
-
-        const root = this.getActiveRoot();
-        const target = root.querySelector(`[data-wsx-key="${state.key}"]`) as HTMLElement;
-
-        if (!target) {
-            return; // 元素未找到，跳过恢复
-        }
-
-        // 立即同步恢复值，避免闪烁
-        // 这必须在 appendChild 之后立即执行，在浏览器渲染之前
-        if (state.value !== undefined) {
-            if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
-                // 直接设置 value 属性，覆盖 render() 中设置的值
-                // 使用 .value 而不是 setAttribute，因为 .value 是当前值，setAttribute 是初始值
-                target.value = state.value;
-            }
-        }
-
-        // 恢复 select 状态
-        if (state.selectedIndex !== undefined && target instanceof HTMLSelectElement) {
-            target.selectedIndex = state.selectedIndex;
-        }
-
-        // 使用 requestAnimationFrame 恢复焦点和光标位置
-        // 这样可以确保 DOM 完全更新，但值已经同步恢复了
-        requestAnimationFrame(() => {
-            // 再次查找元素（确保元素仍然存在）
-            const currentTarget = root.querySelector(
-                `[data-wsx-key="${state.key}"]`
-            ) as HTMLElement;
-
-            if (!currentTarget) {
-                return;
-            }
-
-            // 再次确保值正确（防止被其他代码覆盖）
-            if (state.value !== undefined) {
-                if (
-                    currentTarget instanceof HTMLInputElement ||
-                    currentTarget instanceof HTMLTextAreaElement
-                ) {
-                    // 只有在值不同时才更新，避免触发额外的事件
-                    if (currentTarget.value !== state.value) {
-                        currentTarget.value = state.value;
-                    }
-                }
-            }
-
-            // 聚焦元素（防止页面滚动）
-            currentTarget.focus({ preventScroll: true });
-
-            // 恢复光标/选择位置
-            if (state.selectionStart !== undefined) {
-                if (
-                    currentTarget instanceof HTMLInputElement ||
-                    currentTarget instanceof HTMLTextAreaElement
-                ) {
-                    const start = state.selectionStart;
-                    const end = state.selectionEnd ?? start;
-                    currentTarget.setSelectionRange(start, end);
-
-                    // 恢复 textarea 滚动位置
-                    if (
-                        state.scrollTop !== undefined &&
-                        currentTarget instanceof HTMLTextAreaElement
-                    ) {
-                        currentTarget.scrollTop = state.scrollTop;
-                    }
-                } else if (currentTarget.hasAttribute("contenteditable")) {
-                    // 恢复 contenteditable 选择
-                    const selection = window.getSelection();
-                    if (selection) {
-                        const range = document.createRange();
-                        const textNode = currentTarget.childNodes[0];
-                        if (textNode && textNode.nodeType === Node.TEXT_NODE) {
-                            const maxPos = Math.min(
-                                state.selectionStart,
-                                textNode.textContent?.length || 0
-                            );
-                            range.setStart(textNode, maxPos);
-                            range.setEnd(textNode, state.selectionEnd ?? maxPos);
-                            selection.removeAllRanges();
-                            selection.addRange(range);
-                        }
-                    }
-                }
-            }
-        });
-    }
 }

package/src/index.ts

@@ -1,4 +1,5 @@
 // Core exports
+export * from "./base-component";
 export { WebComponent } from "./web-component";
 export { LightComponent } from "./light-component";
 export { autoRegister, registerComponent } from "./auto-register";

package/src/jsx-factory.ts

@@ -201,12 +201,14 @@ export function Fragment(_props: unknown, children: JSXChildren[]): DocumentFrag
 
         if (typeof child === "string" || typeof child === "number") {
             const textNode = document.createTextNode(String(child));
-            (textNode as any).__wsxManaged = true;
+            (textNode as Text & { __wsxManaged?: boolean }).__wsxManaged = true;
             fragment.appendChild(textNode);
         } else if (child instanceof HTMLElement || child instanceof SVGElement) {
             fragment.appendChild(child);
         } else if (child instanceof DocumentFragment) {
             fragment.appendChild(child);
+        } else if (child instanceof Node) {
+            fragment.appendChild(child);
         }
     });