@wsxjs/wsx-base-components 0.0.6 → 0.0.8

package/package.json

@@ -1,57 +1,57 @@
 {
-    "name": "@wsxjs/wsx-base-components",
-    "version": "0.0.6",
-    "description": "Base UI components built with WSX Framework",
-    "type": "module",
-    "main": "./dist/index.cjs",
-    "module": "./dist/index.js",
-    "exports": {
-        ".": {
-            "import": "./dist/index.js",
-            "require": "./dist/index.cjs"
-        }
-    },
-    "files": [
-        "dist",
-        "src",
-        "!**/__tests__",
-        "!**/test"
-    ],
-    "scripts": {
-        "build": "vite build",
-        "build:dev": "NODE_ENV=development vite build",
-        "dev": "NODE_ENV=development vite build --watch",
-        "clean": "rm -rf dist",
-        "typecheck": "tsc --noEmit",
-        "lint": "eslint .",
-        "lint:fix": "eslint . --fix"
-    },
-    "dependencies": {
-        "@wsxjs/wsx-core": "workspace:*"
-    },
-    "devDependencies": {
-        "@wsxjs/eslint-plugin-wsx": "workspace:*",
-        "@wsxjs/wsx-vite-plugin": "workspace:*",
-        "@typescript-eslint/eslint-plugin": "^8.37.0",
-        "@typescript-eslint/parser": "^8.37.0",
-        "eslint": "^9.31.0",
-        "http-server": "^14.1.1",
-        "tsup": "^8.0.0",
-        "typescript": "^5.0.0",
-        "vite": "^5.4.19"
-    },
-    "keywords": [
-        "wsx",
-        "web-components",
-        "ui-components",
-        "typescript",
-        "jsx"
-    ],
-    "author": "WSX Framework Team",
-    "license": "MIT",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/wsxjs/wsxjs.git",
-        "directory": "packages/base-components"
+  "name": "@wsxjs/wsx-base-components",
+  "version": "0.0.8",
+  "description": "Base UI components built with WSX Framework",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     }
-}
+  },
+  "files": [
+    "dist",
+    "src",
+    "!**/__tests__",
+    "!**/test"
+  ],
+  "dependencies": {
+    "@wsxjs/wsx-core": "0.0.8"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^8.37.0",
+    "@typescript-eslint/parser": "^8.37.0",
+    "eslint": "^9.31.0",
+    "http-server": "^14.1.1",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.4.19",
+    "@wsxjs/wsx-vite-plugin": "0.0.8",
+    "@wsxjs/eslint-plugin-wsx": "0.0.8"
+  },
+  "keywords": [
+    "wsx",
+    "web-components",
+    "ui-components",
+    "typescript",
+    "jsx"
+  ],
+  "author": "WSX Framework Team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wsxjs/wsxjs.git",
+    "directory": "packages/base-components"
+  },
+  "scripts": {
+    "build": "vite build",
+    "build:dev": "NODE_ENV=development vite build",
+    "dev": "NODE_ENV=development vite build --watch",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  }
+}

package/src/ColorPicker.wsx

@@ -10,7 +10,6 @@
  */
 
 import { WebComponent, autoRegister, createLogger } from "@wsxjs/wsx-core";
-import styles from "./ColorPicker.css?inline";
 import {
     handleCSSVariables,
     setDefaultColorCache,
@@ -89,7 +88,6 @@ export default class ColorPicker extends WebComponent {
 
     constructor(config: ColorPickerConfig = {}) {
         super({
-            styles,
             styleName: "base-color-picker",
             ...config,
         });

package/src/ReactiveCounter.wsx

@@ -6,47 +6,36 @@
  * - 自动重渲染：状态变化时无需手动调用 rerender()
  * - 批量更新：多个状态变化会被合并为一次重渲染
  * - 原生性能：基于浏览器 Proxy API，零运行时开销
+ * - 使用 @state 装饰器：自动初始化响应式状态
  */
 
-import { ReactiveWebComponent, autoRegister, createLogger } from "@wsxjs/wsx-core";
-import styles from "./ReactiveCounter.css?inline";
+import { WebComponent, state, autoRegister, createLogger } from "@wsxjs/wsx-core";
 
 const logger = createLogger("ReactiveCounter");
 
 @autoRegister({ tagName: "reactive-counter" })
-export default class ReactiveCounter extends ReactiveWebComponent {
-    // 使用响应式对象 - 任何属性变化都会自动触发重渲染
-    private state = this.reactive({
+export default class ReactiveCounter extends WebComponent {
+    // 使用 @state 装饰器 - 自动初始化为响应式状态
+    @state private state = {
         count: 0,
         step: 1,
         message: "Hello WSX Reactive!",
         isRunning: false,
-    });
-
-    // 使用 useState API - 类似 React 的 useState
-    private themeState = this.useState("theme", "light");
-    private historyState = this.useState("history", [] as number[]);
+    };
 
-    private getTheme = this.themeState[0];
-    private setTheme = this.themeState[1];
-    private getHistory = this.historyState[0];
-    private setHistory = this.historyState[1];
+    // 使用 @state 装饰器 - 基本类型自动使用 useState
+    @state private theme = "light";
+    @state private history: number[] = [];
 
     constructor() {
-        super({
-            styles,
-            debug: true, // 启用调试模式
-        });
+        super();
 
         logger.info("ReactiveCounter initialized");
     }
 
     render() {
-        const theme = this.getTheme();
-        const history = this.getHistory();
-
         return (
-            <div class={`reactive-counter theme-${theme}`}>
+            <div class={`reactive-counter theme-${this.theme}`}>
                 <div class="header">
                     <h3>🔄 Reactive Counter</h3>
                     <p class="subtitle">{this.state.message}</p>
@@ -109,7 +98,7 @@ export default class ReactiveCounter extends ReactiveWebComponent {
                 <div class="theme-controls">
                     <label>
                         Theme:
-                        <select value={theme} onChange={this.handleThemeChange}>
+                        <select value={this.theme} onChange={this.handleThemeChange}>
                             <option value="light">Light</option>
                             <option value="dark">Dark</option>
                             <option value="blue">Blue</option>
@@ -126,11 +115,11 @@ export default class ReactiveCounter extends ReactiveWebComponent {
                     />
                 </div>
 
-                {history.length > 0 && (
+                {this.history.length > 0 && (
                     <div class="history">
                         <h4>History (last 10):</h4>
                         <div class="history-list">
-                            {history.slice(-10).map((value, index) => (
+                            {this.history.slice(-10).map((value, index) => (
                                 <span key={index} class="history-item">
                                     {value}
                                 </span>
@@ -149,9 +138,8 @@ export default class ReactiveCounter extends ReactiveWebComponent {
                             {JSON.stringify(
                                 {
                                     state: this.state,
-                                    theme: this.getTheme(),
-                                    historyLength: this.getHistory().length,
-                                    stateSnapshot: this.getStateSnapshot(),
+                                    theme: this.theme,
+                                    historyLength: this.history.length,
                                 },
                                 null,
                                 2
@@ -186,7 +174,7 @@ export default class ReactiveCounter extends ReactiveWebComponent {
 
     private handleThemeChange = (event: Event) => {
         const select = event.target as HTMLSelectElement;
-        this.setTheme(select.value);
+        this.theme = select.value;
     };
 
     private handleMessageChange = (event: Event) => {
@@ -219,12 +207,11 @@ export default class ReactiveCounter extends ReactiveWebComponent {
     }
 
     private addToHistory(value: number) {
-        const history = this.getHistory();
-        this.setHistory([...history, value]);
+        this.history = [...this.history, value];
     }
 
     private clearHistory = () => {
-        this.setHistory([]);
+        this.history = [];
     };
 
     protected onConnected(): void {

package/src/SimpleReactiveDemo.wsx

@@ -2,19 +2,20 @@
 /**
  * 简单的响应式演示组件
  * 展示 WSX 响应式状态系统的基本功能
+ * 使用 @state 装饰器自动初始化响应式状态
  */
 
-import { ReactiveWebComponent, autoRegister, createLogger } from "@wsxjs/wsx-core";
+import { WebComponent, state, autoRegister, createLogger } from "@wsxjs/wsx-core";
 
 const logger = createLogger("SimpleReactiveDemo");
 
 @autoRegister({ tagName: "simple-reactive-demo" })
-export default class SimpleReactiveDemo extends ReactiveWebComponent {
-    // 响应式状态 - 自动触发重渲染
-    private state = this.reactive({
+export default class SimpleReactiveDemo extends WebComponent {
+    // 使用 @state 装饰器 - 自动初始化为响应式状态
+    @state private state = {
         count: 0,
         message: "Click the button!",
-    });
+    };
 
     constructor() {
         super();

package/src/ThemeSwitcher.wsx

@@ -1,7 +1,6 @@
 /** @jsxImportSource @wsxjs/wsx-core */
 
 import { WebComponent, autoRegister } from "@wsxjs/wsx-core";
-import styles from "./ThemeSwitcher.css?inline";
 
 @autoRegister({ tagName: "theme-switcher" })
 export default class ThemeSwitcher extends WebComponent {
@@ -9,7 +8,6 @@ export default class ThemeSwitcher extends WebComponent {
 
     constructor() {
         super({
-            styles,
             styleName: "theme-switcher",
         });
 

package/src/XyButton.wsx

@@ -11,7 +11,6 @@
  */
 
 import { WebComponent, autoRegister } from "@wsxjs/wsx-core";
-import styles from "./XyButton.css?inline";
 
 export interface XyButtonConfig {
     disabled?: boolean;
@@ -71,7 +70,6 @@ export default class XyButton extends WebComponent {
 
     constructor(config: XyButtonConfig = {}) {
         super({
-            styles,
             styleName: "xy-button",
             ...config,
         });

package/src/XyButtonGroup.wsx

@@ -7,7 +7,6 @@
  */
 
 import { WebComponent, autoRegister } from "@wsxjs/wsx-core";
-import styles from "./XyButtonGroup.css?inline";
 
 export interface XyButtonGroupConfig {
     disabled?: boolean;
@@ -23,7 +22,6 @@ export default class XyButtonGroup extends WebComponent {
 
     constructor(config: XyButtonGroupConfig = {}) {
         super({
-            styles,
             styleName: "xy-button-group",
             ...config,
         });