@wsxjs/wsx-core 0.0.8 → 0.0.10

package/dist/jsx-runtime.js

@@ -167,6 +167,13 @@ function h(tag, props = {}, ...children) {
         if (value) {
           element.setAttribute(key, "");
         }
+      } else if (key === "value") {
+        if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement) {
+          element.value = String(value);
+        } else {
+          const attributeName = isSVG ? getSVGAttributeName(key) : key;
+          element.setAttribute(attributeName, String(value));
+        }
       } else {
         const attributeName = isSVG ? getSVGAttributeName(key) : key;
         element.setAttribute(attributeName, String(value));

package/dist/jsx-runtime.mjs

@@ -2,7 +2,7 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-VZQT7HU5.mjs";
+} from "./chunk-CZII6RG2.mjs";
 export {
   Fragment,
   jsx,

package/dist/jsx.js

@@ -166,6 +166,13 @@ function h(tag, props = {}, ...children) {
         if (value) {
           element.setAttribute(key, "");
         }
+      } else if (key === "value") {
+        if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement) {
+          element.value = String(value);
+        } else {
+          const attributeName = isSVG ? getSVGAttributeName(key) : key;
+          element.setAttribute(attributeName, String(value));
+        }
       } else {
         const attributeName = isSVG ? getSVGAttributeName(key) : key;
         element.setAttribute(attributeName, String(value));

package/dist/jsx.mjs

@@ -1,7 +1,7 @@
 import {
   Fragment,
   h
-} from "./chunk-VZQT7HU5.mjs";
+} from "./chunk-CZII6RG2.mjs";
 export {
   Fragment,
   h

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wsxjs/wsx-core",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "Core WSX Framework - Web Components with JSX syntax",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/base-component.ts

@@ -18,6 +18,19 @@ 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
  */
@@ -47,6 +60,24 @@ export abstract class BaseComponent extends HTMLElement {
      */
     protected _autoStyles?: string;
 
+    /**
+     * 当前捕获的焦点状态（用于在 render 时使用捕获的值）
+     * @internal - 由 rerender() 方法管理
+     */
+    protected _pendingFocusState: FocusState | null = null;
+
+    /**
+     * 防抖定时器，用于延迟重渲染（当用户正在输入时）
+     * @internal
+     */
+    private _rerenderDebounceTimer: number | null = null;
+
+    /**
+     * 待处理的重渲染标志（当用户正在输入时，标记需要重渲染但延迟执行）
+     * @internal
+     */
+    private _pendingRerender: boolean = false;
+
     /**
      * 子类应该重写这个方法来定义观察的属性
      * @returns 要观察的属性名数组
@@ -95,6 +126,35 @@ export abstract class BaseComponent extends HTMLElement {
      */
     protected onConnected?(): void;
 
+    /**
+     * 处理 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._pendingRerender = false;
+                        this.rerender();
+                    }
+                });
+            }
+        }
+    };
+
     /**
      * 可选生命周期钩子：组件已断开
      */
@@ -157,11 +217,99 @@ export abstract class BaseComponent extends HTMLElement {
     /**
      * 调度重渲染
      * 这个方法被响应式系统调用，开发者通常不需要直接调用
+     * 使用 queueMicrotask 进行异步调度，与 reactive() 系统保持一致
      */
     protected scheduleRerender(): void {
-        if (this.connected) {
-            this.rerender();
+        if (!this.connected) {
+            // 如果组件已断开，清除定时器
+            if (this._rerenderDebounceTimer !== null) {
+                clearTimeout(this._rerenderDebounceTimer);
+                this._rerenderDebounceTimer = null;
+            }
+            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) {
+            const isInputElement =
+                activeElement instanceof HTMLInputElement ||
+                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 属性的输入元素，继续执行重渲染（不跳过）
+        }
+
+        // 没有焦点元素，立即重渲染（使用 queueMicrotask 批量处理）
+        // 如果有待处理的重渲染，也立即执行
+        if (this._pendingRerender) {
+            this._pendingRerender = false;
+        }
+        queueMicrotask(() => {
+            if (this.connected) {
+                this.rerender();
+            }
+        });
+    }
+
+    /**
+     * 清理资源（在组件断开连接时调用）
+     * @internal
+     */
+    protected cleanup(): void {
+        // 清除防抖定时器
+        if (this._rerenderDebounceTimer !== null) {
+            clearTimeout(this._rerenderDebounceTimer);
+            this._rerenderDebounceTimer = null;
+        }
+
+        // 移除 blur 事件监听器
+        document.removeEventListener("blur", this.handleGlobalBlur, true);
+
+        // 清除待处理的重渲染标志
+        this._pendingRerender = false;
+    }
+
+    /**
+     * 初始化事件监听器（在组件连接时调用）
+     * @internal
+     */
+    protected initializeEventListeners(): void {
+        // 添加 blur 事件监听器，在用户停止输入时执行待处理的重渲染
+        document.addEventListener("blur", this.handleGlobalBlur, true);
     }
 
     /**
@@ -236,4 +384,183 @@ export abstract class BaseComponent extends HTMLElement {
     protected cleanupReactiveStates(): void {
         this._reactiveStates.clear();
     }
+
+    /**
+     * 获取当前活动的 DOM 根（Shadow DOM 或 Light DOM）
+     * @returns 活动的 DOM 根元素
+     */
+    protected getActiveRoot(): ShadowRoot | HTMLElement {
+        // WebComponent 使用 shadowRoot，LightComponent 使用自身
+        if ("shadowRoot" in this && this.shadowRoot) {
+            return this.shadowRoot;
+        }
+        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/jsx-factory.ts

@@ -89,6 +89,21 @@ export function h(
                     element.setAttribute(key, "");
                 }
             }
+            // 特殊处理 input/textarea/select 的 value 属性
+            // 使用 .value 而不是 setAttribute，因为 .value 是当前值，setAttribute 是初始值
+            else if (key === "value") {
+                if (
+                    element instanceof HTMLInputElement ||
+                    element instanceof HTMLTextAreaElement ||
+                    element instanceof HTMLSelectElement
+                ) {
+                    element.value = String(value);
+                } else {
+                    // 对于其他元素，使用 setAttribute
+                    const attributeName = isSVG ? getSVGAttributeName(key) : key;
+                    element.setAttribute(attributeName, String(value));
+                }
+            }
             // 处理其他属性
             else {
                 // 对SVG元素使用正确的属性名

package/src/light-component.ts

@@ -57,6 +57,9 @@ export abstract class LightComponent extends BaseComponent {
             const content = this.render();
             this.appendChild(content);
 
+            // 初始化事件监听器
+            this.initializeEventListeners();
+
             // 调用子类的初始化钩子
             this.onConnected?.();
         } catch (error) {
@@ -69,6 +72,8 @@ export abstract class LightComponent extends BaseComponent {
      * Web Component生命周期：从DOM断开
      */
     disconnectedCallback(): void {
+        this.connected = false;
+        this.cleanup(); // 清理资源（包括防抖定时器）
         this.cleanupReactiveStates();
         this.cleanupStyles();
         this.onDisconnected?.();
@@ -105,36 +110,97 @@ export abstract class LightComponent extends BaseComponent {
             return;
         }
 
-        // 清空现有内容（包括样式元素）
-        this.innerHTML = "";
+        // 1. 捕获焦点状态（在 DOM 替换之前）
+        const focusState = this.captureFocusState();
+        // 保存到实例变量，供 render() 使用（如果需要）
+        this._pendingFocusState = focusState;
 
-        // 重新应用样式（必须在内容之前添加，确保样式优先）
-        if (this.config.styles) {
-            const styleName = this.config.styleName || this.constructor.name;
-            // 直接创建并添加样式元素，不检查是否存在（因为 innerHTML = "" 已经清空了）
-            const styleElement = document.createElement("style");
-            styleElement.setAttribute("data-wsx-light-component", styleName);
-            styleElement.textContent = this.config.styles;
-            // 使用 prepend 或 insertBefore 确保样式在第一个位置
-            // 由于 innerHTML = "" 后 firstChild 是 null，使用 appendChild 然后调整顺序
-            this.appendChild(styleElement);
-        }
-
-        // 重新渲染JSX内容
         try {
+            // 重新渲染JSX内容
             const content = this.render();
-            this.appendChild(content);
 
-            // 确保样式元素在内容之前（如果样式存在）
-            if (this.config.styles && this.children.length > 1) {
-                const styleElement = this.querySelector(
-                    `style[data-wsx-light-component="${this.config.styleName || this.constructor.name}"]`
-                );
-                if (styleElement && styleElement !== this.firstChild) {
-                    // 将样式元素移到第一个位置
+            // 在添加到 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;
+                    }
+                }
+            }
+
+            // 确保样式元素存在
+            const stylesToApply = this._autoStyles || this.config.styles;
+            if (stylesToApply) {
+                const styleName = this.config.styleName || this.constructor.name;
+                let styleElement = this.querySelector(
+                    `style[data-wsx-light-component="${styleName}"]`
+                ) as HTMLStyleElement;
+
+                if (!styleElement) {
+                    // 创建样式元素
+                    styleElement = document.createElement("style");
+                    styleElement.setAttribute("data-wsx-light-component", styleName);
+                    styleElement.textContent = stylesToApply;
                     this.insertBefore(styleElement, this.firstChild);
+                } else if (styleElement.textContent !== stylesToApply) {
+                    // 更新样式内容
+                    styleElement.textContent = stylesToApply;
                 }
             }
+
+            // 使用 requestAnimationFrame 批量执行 DOM 操作，减少重绘
+            // 在同一帧中完成添加和移除，避免中间状态
+            requestAnimationFrame(() => {
+                // 先添加新内容
+                this.appendChild(content);
+
+                // 立即移除旧内容（在同一帧中，浏览器会批量处理）
+                const oldChildren = Array.from(this.children).filter((child) => {
+                    // 保留新添加的内容
+                    if (child === content) {
+                        return false;
+                    }
+                    // 保留样式元素（如果存在）
+                    if (
+                        stylesToApply &&
+                        child instanceof HTMLStyleElement &&
+                        child.getAttribute("data-wsx-light-component") ===
+                            (this.config.styleName || this.constructor.name)
+                    ) {
+                        return false;
+                    }
+                    return true;
+                });
+                oldChildren.forEach((child) => child.remove());
+
+                // 确保样式元素在第一个位置
+                if (stylesToApply && this.children.length > 1) {
+                    const styleElement = this.querySelector(
+                        `style[data-wsx-light-component="${this.config.styleName || this.constructor.name}"]`
+                    );
+                    if (styleElement && styleElement !== this.firstChild) {
+                        this.insertBefore(styleElement, this.firstChild);
+                    }
+                }
+
+                // 恢复焦点状态（在 DOM 替换之后）
+                // 值已经在添加到 DOM 之前恢复了，这里只需要恢复焦点和光标位置
+                // 使用另一个 requestAnimationFrame 确保 DOM 已完全更新
+                requestAnimationFrame(() => {
+                    this.restoreFocusState(focusState);
+                    // 清除待处理的焦点状态
+                    this._pendingFocusState = null;
+                });
+            });
         } catch (error) {
             logger.error(`[${this.constructor.name}] Error in rerender:`, error);
             this.renderError(error);

package/src/reactive-decorator.ts

@@ -53,11 +53,24 @@ export function state(target: unknown, propertyKey: string | symbol | unknown):
     } else {
         const propertyKeyStr = String(propertyKey);
         if (propertyKeyStr === "[object Object]") {
-            // Invalid propertyKey - likely a build configuration issue
+            // Invalid propertyKey - Babel plugin was not configured
             throw new Error(
-                `@state decorator: Invalid propertyKey. ` +
-                    `This usually means the build tool doesn't support decorators properly. ` +
-                    `Please ensure Babel plugin is configured in vite.config.ts`
+                `@state decorator: Invalid propertyKey detected. ` +
+                    `\n\n` +
+                    `The @state decorator MUST be processed by Babel plugin at compile time. ` +
+                    `It appears the Babel plugin is not configured in your build setup.` +
+                    `\n\n` +
+                    `To fix this, please:` +
+                    `\n1. Install @wsxjs/wsx-vite-plugin: npm install @wsxjs/wsx-vite-plugin` +
+                    `\n2. Configure it in vite.config.ts:` +
+                    `\n   import { wsx } from '@wsxjs/wsx-vite-plugin';` +
+                    `\n   export default defineConfig({ plugins: [wsx()] });` +
+                    `\n3. Configure TypeScript (recommended: use @wsxjs/wsx-tsconfig):` +
+                    `\n   npm install --save-dev @wsxjs/wsx-tsconfig` +
+                    `\n   Then in tsconfig.json: { "extends": "@wsxjs/wsx-tsconfig/tsconfig.base.json" }` +
+                    `\n   Or manually: { "compilerOptions": { "experimentalDecorators": true, "useDefineForClassFields": false } }` +
+                    `\n\n` +
+                    `See: https://github.com/wsxjs/wsxjs#setup for more details.`
             );
         }
         normalizedPropertyKey = propertyKeyStr;
@@ -71,8 +84,22 @@ export function state(target: unknown, propertyKey: string | symbol | unknown):
                 : normalizedPropertyKey.toString();
         throw new Error(
             `@state decorator: Cannot access property "${propertyKeyStr}". ` +
-                `Target is ${target === null ? "null" : "undefined"}. ` +
-                `Please ensure Babel plugin is configured in vite.config.ts`
+                `Target is ${target === null ? "null" : "undefined"}.` +
+                `\n\n` +
+                `The @state decorator MUST be processed by Babel plugin at compile time. ` +
+                `It appears the Babel plugin is not configured in your build setup.` +
+                `\n\n` +
+                `To fix this, please:` +
+                `\n1. Install @wsxjs/wsx-vite-plugin: npm install @wsxjs/wsx-vite-plugin` +
+                `\n2. Configure it in vite.config.ts:` +
+                `\n   import { wsx } from '@wsxjs/wsx-vite-plugin';` +
+                `\n   export default defineConfig({ plugins: [wsx()] });` +
+                `\n3. Configure TypeScript (recommended: use @wsxjs/wsx-tsconfig):` +
+                `\n   npm install --save-dev @wsxjs/wsx-tsconfig` +
+                `\n   Then in tsconfig.json: { "extends": "@wsxjs/wsx-tsconfig/tsconfig.base.json" }` +
+                `\n   Or manually: { "compilerOptions": { "experimentalDecorators": true, "useDefineForClassFields": false } }` +
+                `\n\n` +
+                `See: https://github.com/wsxjs/wsxjs#setup for more details.`
         );
     }