@wsxjs/wsx-core 0.0.6 → 0.0.8

package/src/reactive-decorator.ts

@@ -0,0 +1,105 @@
+/**
+ * Reactive Decorators for WSX Components
+ *
+ * Provides @state property decorator to mark properties as reactive state.
+ * WebComponent and LightComponent already have reactive() and useState() methods.
+ * Babel plugin handles @state initialization at compile time.
+ *
+ * @example
+ * ```typescript
+ * class Counter extends WebComponent {
+ *   @state private count = 0;
+ *   @state private user = { name: "John" };
+ * }
+ * ```
+ */
+
+/**
+ * State property decorator
+ *
+ * Marks a property as reactive state. Babel plugin processes this decorator at compile time
+ * and generates initialization code in the constructor.
+ *
+ * Automatically uses reactive() for objects/arrays and useState() for primitives.
+ *
+ * @param target - The class prototype
+ * @param propertyKey - The property name
+ *
+ * @example
+ * ```typescript
+ * class MyComponent extends WebComponent {
+ *   @state private count = 0;  // Auto-initialized by Babel plugin
+ *   @state private user = { name: "John" };  // Auto-initialized by Babel plugin
+ * }
+ * ```
+ */
+export function state(target: unknown, propertyKey: string | symbol | unknown): void {
+    /**
+     * @state decorator is a compile-time marker for Babel plugin.
+     * Babel plugin will:
+     * 1. Detect @state decorator on properties
+     * 2. Extract initial value from AST
+     * 3. Remove @state decorator
+     * 4. Generate initialization code in constructor (this.state = this.reactive(...) or useState)
+     *
+     * This runtime function only performs basic validation.
+     * If Babel plugin is not configured, this will throw an error.
+     */
+
+    // Normalize propertyKey
+    let normalizedPropertyKey: string | symbol;
+    if (typeof propertyKey === "string" || typeof propertyKey === "symbol") {
+        normalizedPropertyKey = propertyKey;
+    } else {
+        const propertyKeyStr = String(propertyKey);
+        if (propertyKeyStr === "[object Object]") {
+            // Invalid propertyKey - likely a build configuration issue
+            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`
+            );
+        }
+        normalizedPropertyKey = propertyKeyStr;
+    }
+
+    // Basic validation: ensure target is valid
+    if (target == null) {
+        const propertyKeyStr =
+            typeof normalizedPropertyKey === "string"
+                ? normalizedPropertyKey
+                : 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`
+        );
+    }
+
+    if (typeof target !== "object") {
+        const propertyKeyStr =
+            typeof normalizedPropertyKey === "string"
+                ? normalizedPropertyKey
+                : normalizedPropertyKey.toString();
+        throw new Error(
+            `@state decorator: Cannot be used on "${propertyKeyStr}". ` +
+                `@state is for properties only, not methods.`
+        );
+    }
+
+    // Validate that property has an initial value
+    const descriptor = Object.getOwnPropertyDescriptor(target, normalizedPropertyKey);
+    if (descriptor?.get) {
+        const propertyKeyStr =
+            typeof normalizedPropertyKey === "string"
+                ? normalizedPropertyKey
+                : normalizedPropertyKey.toString();
+        throw new Error(
+            `@state decorator cannot be used with getter properties. Property: "${propertyKeyStr}"`
+        );
+    }
+
+    // Note: We don't store metadata or remove the property here.
+    // Babel plugin handles everything at compile time.
+    // If this function is called at runtime, it means Babel plugin didn't process the decorator.
+}

package/src/web-component.ts

@@ -10,43 +10,42 @@
 
 import { h, type JSXChildren } from "./jsx-factory";
 import { StyleManager } from "./styles/style-manager";
+import { BaseComponent, type BaseComponentConfig } from "./base-component";
 
 /**
  * Web Component 配置接口
  */
-export interface WebComponentConfig {
-    styles?: string; // CSS内容
-    styleName?: string; // 样式名称，用于缓存
-    [key: string]: unknown;
+export interface WebComponentConfig extends BaseComponentConfig {
+    preserveFocus?: boolean; // 是否在重渲染时保持焦点
+}
+
+/**
+ * Type for focus data saved during rerender
+ */
+interface FocusData {
+    tagName: string;
+    className: string;
+    value?: string;
+    selectionStart?: number;
+    selectionEnd?: number;
 }
 
 /**
  * 通用 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
+    private _preserveFocus: boolean = true;
 
     constructor(config: WebComponentConfig = {}) {
-        super();
-
-        this.config = config;
+        super(config);
+        // BaseComponent already created this.config with getter for styles
+        // Just update preserveFocus property
+        this._preserveFocus = config.preserveFocus ?? true;
         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,6 +61,15 @@ export abstract class WebComponent extends HTMLElement {
     connectedCallback(): void {
         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;
+            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);
@@ -78,31 +86,10 @@ export abstract class WebComponent extends HTMLElement {
      * Web Component生命周期：从DOM断开
      */
     disconnectedCallback(): void {
+        this.connected = false;
         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内的元素
      *
@@ -133,6 +120,14 @@ export abstract class WebComponent extends HTMLElement {
             );
             return;
         }
+
+        // 保存焦点状态（如果启用）
+        let focusData: FocusData | null = null;
+        if (this._preserveFocus && this.shadowRoot) {
+            const activeElement = this.shadowRoot.activeElement;
+            focusData = this.saveFocusState(activeElement);
+        }
+
         // 保存当前的 adopted stylesheets (jsdom may not support this)
         const adoptedStyleSheets = this.shadowRoot.adoptedStyleSheets || [];
 
@@ -145,9 +140,13 @@ export abstract class WebComponent extends HTMLElement {
         }
 
         // 只有在没有 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);
+        // 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
@@ -158,6 +157,115 @@ export abstract class WebComponent extends HTMLElement {
             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;
+            }
+        }
+
+        // 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;
+            }
+        }
+
+        return focusData;
+    }
+
+    /**
+     * 恢复焦点状态
+     */
+    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]}`
+                );
+            }
+
+            // 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
+        }
     }
 
     /**
@@ -182,67 +290,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";

package/types/wsx-types.d.ts

@@ -2,10 +2,12 @@
  * WSX TypeScript 声明文件
  * 支持 JSX 语法和其他 WSX 特性
  */
-
+import { WebComponent, LightComponent } from "../src/index";
 // WSX 文件支持 - 将 .wsx 文件视为 TypeScript 模块
+// 标准类型声明：支持 WebComponent 和 LightComponent
 declare module "*.wsx" {
-    const Component: unknown;
+    // Allow any class that extends WebComponent or LightComponent
+    const Component: new (...args: unknown[]) => WebComponent | LightComponent;
     export default Component;
 }