@wsxjs/wsx-core 0.0.6 → 0.0.8

package/package.json

@@ -1,49 +1,49 @@
 {
-    "name": "@wsxjs/wsx-core",
-    "version": "0.0.6",
-    "description": "Core WSX Framework - Web Components with JSX syntax",
-    "main": "./dist/index.js",
-    "module": "./dist/index.mjs",
-    "types": "./types/index.d.ts",
-    "exports": {
-        ".": {
-            "types": "./types/index.d.ts",
-            "import": "./dist/index.mjs",
-            "require": "./dist/index.js"
-        },
-        "./jsx-runtime": {
-            "types": "./types/jsx-runtime.d.ts",
-            "import": "./dist/jsx-runtime.mjs",
-            "require": "./dist/jsx-runtime.js"
-        }
+  "name": "@wsxjs/wsx-core",
+  "version": "0.0.8",
+  "description": "Core WSX Framework - Web Components with JSX syntax",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
     },
-    "files": [
-        "dist",
-        "src",
-        "types",
-        "!**/__tests__",
-        "!**/test"
-    ],
-    "scripts": {
-        "build": "tsup src/index.ts src/jsx.ts src/jsx-runtime.ts --format cjs,esm",
-        "build:dev": "NODE_ENV=development tsup src/index.ts src/jsx.ts src/jsx-runtime.ts --format cjs,esm --sourcemap",
-        "dev": "NODE_ENV=development tsup src/index.ts src/jsx.ts src/jsx-runtime.ts --format cjs,esm --watch --sourcemap",
-        "test": "jest",
-        "typecheck": "tsc --noEmit",
-        "clean": "rm -rf dist"
-    },
-    "keywords": [
-        "web-components",
-        "jsx",
-        "typescript",
-        "custom-elements"
-    ],
-    "devDependencies": {
-        "tsup": "^8.0.0",
-        "typescript": "^5.0.0",
-        "@types/node": "^20.0.0"
-    },
-    "peerDependencies": {
-        "typescript": ">=4.7.0"
+    "./jsx-runtime": {
+      "types": "./types/jsx-runtime.d.ts",
+      "import": "./dist/jsx-runtime.mjs",
+      "require": "./dist/jsx-runtime.js"
     }
-}
+  },
+  "files": [
+    "dist",
+    "src",
+    "types",
+    "!**/__tests__",
+    "!**/test"
+  ],
+  "keywords": [
+    "web-components",
+    "jsx",
+    "typescript",
+    "custom-elements"
+  ],
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "@types/node": "^20.0.0"
+  },
+  "peerDependencies": {
+    "typescript": ">=4.7.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts src/jsx.ts src/jsx-runtime.ts --format cjs,esm",
+    "build:dev": "NODE_ENV=development tsup src/index.ts src/jsx.ts src/jsx-runtime.ts --format cjs,esm --sourcemap",
+    "dev": "NODE_ENV=development tsup src/index.ts src/jsx.ts src/jsx-runtime.ts --format cjs,esm --watch --sourcemap",
+    "test": "jest",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}

package/src/base-component.ts

@@ -0,0 +1,239 @@
+/**
+ * Base Component for WSX Web Components
+ *
+ * Provides common functionality shared by WebComponent and LightComponent:
+ * - Reactive state management (reactive, useState, scheduleRerender)
+ * - Configuration management (getConfig, setConfig)
+ * - Attribute helpers (getAttr, setAttr, removeAttr, hasAttr)
+ * - Lifecycle hooks (onConnected, onDisconnected, onAttributeChanged)
+ */
+
+import { reactive as createReactive, createState, reactiveWithDebug } from "./utils/reactive";
+
+/**
+ * Type for reactive state storage
+ */
+interface ReactiveStateStorage {
+    getter: () => unknown;
+    setter: (value: unknown | ((prev: unknown) => unknown)) => void;
+}
+
+/**
+ * Base configuration interface
+ */
+export interface BaseComponentConfig {
+    styles?: string;
+    autoStyles?: string;
+    styleName?: string;
+    debug?: boolean;
+    [key: string]: unknown;
+}
+
+/**
+ * Base Component class with common functionality
+ *
+ * This class provides shared functionality for both WebComponent and LightComponent.
+ * It should not be used directly - use WebComponent or LightComponent instead.
+ */
+export abstract class BaseComponent extends HTMLElement {
+    protected config: BaseComponentConfig;
+    protected connected: boolean = false;
+    protected _isDebugEnabled: boolean = false;
+    protected _reactiveStates = new Map<string, ReactiveStateStorage>();
+
+    /**
+     * Auto-injected styles from Babel plugin (if CSS file exists)
+     * @internal - Managed by babel-plugin-wsx-style
+     */
+    protected _autoStyles?: string;
+
+    /**
+     * 子类应该重写这个方法来定义观察的属性
+     * @returns 要观察的属性名数组
+     */
+    static get observedAttributes(): string[] {
+        return [];
+    }
+
+    constructor(config: BaseComponentConfig = {}) {
+        super();
+
+        this._isDebugEnabled = config.debug ?? false;
+
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const host = this;
+
+        // Store original styles value to avoid infinite recursion in getter
+        const originalStyles = config.styles;
+
+        this.config = {
+            ...config,
+            get styles() {
+                // Auto-detect injected styles from class property
+                // Note: _defineProperty executes in constructor after super(),
+                // so we check _autoStyles dynamically via getter
+                // This works for both WebComponent and LightComponent
+                // Priority: originalStyles > _autoStyles
+                const result = originalStyles || host._autoStyles || "";
+                return result;
+            },
+            set styles(value: string) {
+                config.styles = value;
+            },
+        };
+    }
+
+    /**
+     * 抽象方法：子类必须实现JSX渲染
+     *
+     * @returns JSX元素
+     */
+    abstract render(): HTMLElement;
+
+    /**
+     * 可选生命周期钩子：组件已连接
+     */
+    protected onConnected?(): void;
+
+    /**
+     * 可选生命周期钩子：组件已断开
+     */
+    protected onDisconnected?(): void;
+
+    /**
+     * 可选生命周期钩子：属性已更改
+     */
+    protected onAttributeChanged?(name: string, oldValue: string, newValue: string): void;
+
+    /**
+     * Web Component生命周期：属性变化
+     */
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
+        this.onAttributeChanged?.(name, oldValue, newValue);
+    }
+
+    /**
+     * 创建响应式对象
+     *
+     * @param obj 要变为响应式的对象
+     * @param debugName 调试名称（可选）
+     * @returns 响应式代理对象
+     */
+    protected reactive<T extends object>(obj: T, debugName?: string): T {
+        const reactiveFn = this._isDebugEnabled ? reactiveWithDebug : createReactive;
+        const name = debugName || `${this.constructor.name}.reactive`;
+
+        return this._isDebugEnabled
+            ? reactiveFn(obj, () => this.scheduleRerender(), name)
+            : reactiveFn(obj, () => this.scheduleRerender());
+    }
+
+    /**
+     * 创建响应式状态
+     *
+     * @param key 状态标识符
+     * @param initialValue 初始值
+     * @returns [getter, setter] 元组
+     */
+    protected useState<T>(
+        key: string,
+        initialValue: T
+    ): [() => T, (value: T | ((prev: T) => T)) => void] {
+        if (!this._reactiveStates.has(key)) {
+            const [getter, setter] = createState(initialValue, () => this.scheduleRerender());
+            this._reactiveStates.set(key, {
+                getter: getter as () => unknown,
+                setter: setter as (value: unknown | ((prev: unknown) => unknown)) => void,
+            });
+        }
+
+        const state = this._reactiveStates.get(key);
+        if (!state) {
+            throw new Error(`State ${key} not found`);
+        }
+        return [state.getter as () => T, state.setter as (value: T | ((prev: T) => T)) => void];
+    }
+
+    /**
+     * 调度重渲染
+     * 这个方法被响应式系统调用，开发者通常不需要直接调用
+     */
+    protected scheduleRerender(): void {
+        if (this.connected) {
+            this.rerender();
+        }
+    }
+
+    /**
+     * 重新渲染组件（子类需要实现）
+     */
+    protected abstract rerender(): void;
+
+    /**
+     * 获取配置值
+     *
+     * @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);
+    }
+
+    /**
+     * 清理响应式状态
+     */
+    protected cleanupReactiveStates(): void {
+        this._reactiveStates.clear();
+    }
+}

package/src/index.ts

@@ -6,9 +6,8 @@ export { h, h as jsx, h as jsxs, Fragment } from "./jsx-factory";
 export { StyleManager } from "./styles/style-manager";
 export { WSXLogger, logger, createLogger } from "./utils/logger";
 
-// Reactive exports
-export { reactive, createState, ReactiveDebug } from "./utils/reactive";
-export { ReactiveWebComponent, makeReactive, createReactiveComponent } from "./reactive-component";
+// Reactive exports - Decorator-based API
+export { state } from "./reactive-decorator";
 
 // Type exports
 export type { WebComponentConfig } from "./web-component";
@@ -16,4 +15,3 @@ export type { LightComponentConfig } from "./light-component";
 export type { JSXChildren } from "./jsx-factory";
 export type { Logger, LogLevel } from "./utils/logger";
 export type { ReactiveCallback } from "./utils/reactive";
-export type { ReactiveWebComponentConfig } from "./reactive-component";

package/src/light-component.ts

@@ -8,7 +8,7 @@
  */
 
 import { h, type JSXChildren } from "./jsx-factory";
-import { reactive, createState, reactiveWithDebug } from "./utils/reactive";
+import { BaseComponent, type BaseComponentConfig } from "./base-component";
 import { createLogger } from "./utils/logger";
 
 const logger = createLogger("LightComponent");
@@ -16,35 +16,17 @@ const logger = createLogger("LightComponent");
 /**
  * Light DOM Component 配置接口
  */
-export interface LightComponentConfig {
-    styles?: string; // CSS内容
-    styleName?: string; // 样式名称，用于缓存
-    debug?: boolean; // 是否启用响应式调试模式
-    [key: string]: unknown;
-}
+export type LightComponentConfig = BaseComponentConfig;
 
 /**
  * Light DOM WSX Web Component 基类
  */
-export abstract class LightComponent extends HTMLElement {
-    protected config: LightComponentConfig;
-    protected connected: boolean = false;
-    private _isDebugEnabled: boolean = false;
-    private _reactiveStates = new Map<string, any>();
-
-    /**
-     * 子类应该重写这个方法来定义观察的属性
-     * @returns 要观察的属性名数组
-     */
-    static get observedAttributes(): string[] {
-        return [];
-    }
+export abstract class LightComponent extends BaseComponent {
+    protected config!: LightComponentConfig; // Initialized by BaseComponent constructor
 
     constructor(config: LightComponentConfig = {}) {
-        super();
-
-        this.config = config;
-        this._isDebugEnabled = config.debug ?? false;
+        super(config);
+        // BaseComponent already created this.config with getter for styles
     }
 
     /**
@@ -61,9 +43,14 @@ export abstract class LightComponent extends HTMLElement {
         this.connected = true;
         try {
             // 应用CSS样式到组件自身
-            if (this.config.styles) {
+            // CRITICAL: _defineProperty for class properties executes AFTER super() but BEFORE constructor body
+            // However, in practice, _defineProperty may execute AFTER the constructor body
+            // So we need to check _autoStyles directly first, then fallback to config.styles getter
+            // The getter will dynamically check _autoStyles when accessed
+            const stylesToApply = this._autoStyles || this.config.styles;
+            if (stylesToApply) {
                 const styleName = this.config.styleName || this.constructor.name;
-                this.applyScopedStyles(styleName, this.config.styles);
+                this.applyScopedStyles(styleName, stylesToApply);
             }
 
             // 渲染JSX内容到Light DOM
@@ -87,28 +74,6 @@ export abstract class LightComponent extends HTMLElement {
         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;
-
     /**
      * 查找组件内的元素
      *
@@ -129,53 +94,6 @@ export abstract class LightComponent extends HTMLElement {
         return HTMLElement.prototype.querySelectorAll.call(this, selector) as NodeListOf<T>;
     }
 
-    /**
-     * 创建响应式对象
-     *
-     * @param obj 要变为响应式的对象
-     * @param debugName 调试名称（可选）
-     * @returns 响应式代理对象
-     */
-    protected reactive<T extends object>(obj: T, debugName?: string): T {
-        const reactiveFn = this._isDebugEnabled ? reactiveWithDebug : reactive;
-        const name = debugName || `${this.constructor.name}.reactive`;
-
-        return this._isDebugEnabled
-            ? reactiveFn(obj, () => this.scheduleRerender(), name)
-            : reactiveFn(obj, () => this.scheduleRerender());
-    }
-
-    /**
-     * 创建响应式状态
-     *
-     * @param key 状态标识符
-     * @param initialValue 初始值
-     * @returns [getter, setter] 元组
-     */
-    protected useState<T>(
-        key: string,
-        initialValue: T
-    ): [() => T, (value: T | ((prev: T) => T)) => void] {
-        if (!this._reactiveStates.has(key)) {
-            const [getter, setter] = createState(initialValue, () => this.scheduleRerender());
-            this._reactiveStates.set(key, { getter, setter });
-        }
-
-        const state = this._reactiveStates.get(key);
-        return [state.getter, state.setter];
-    }
-
-    /**
-     * 调度重渲染
-     * 这个方法被响应式系统调用，开发者通常不需要直接调用
-     */
-    protected scheduleRerender(): void {
-        // 确保组件已连接到 DOM
-        if (this.connected) {
-            this.rerender();
-        }
-    }
-
     /**
      * 重新渲染组件
      */
@@ -187,13 +105,36 @@ export abstract class LightComponent extends HTMLElement {
             return;
         }
 
-        // 清空现有内容
+        // 清空现有内容（包括样式元素）
         this.innerHTML = "";
 
-        // 重新渲染JSX
+        // 重新应用样式（必须在内容之前添加，确保样式优先）
+        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 {
             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) {
+                    // 将样式元素移到第一个位置
+                    this.insertBefore(styleElement, this.firstChild);
+                }
+            }
         } catch (error) {
             logger.error(`[${this.constructor.name}] Error in rerender:`, error);
             this.renderError(error);
@@ -243,34 +184,6 @@ export abstract class LightComponent extends HTMLElement {
         this.insertBefore(styleElement, this.firstChild);
     }
 
-    /**
-     * 获取配置值
-     *
-     * @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;
-    }
-
-    /**
-     * 清理响应式状态
-     */
-    private cleanupReactiveStates(): void {
-        this._reactiveStates.clear();
-    }
-
     /**
      * 清理组件样式
      */
@@ -281,46 +194,6 @@ export abstract class LightComponent extends HTMLElement {
             existingStyle.remove();
         }
     }
-
-    /**
-     * 获取属性值
-     *
-     * @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助手