@wsxjs/wsx-base-components 0.0.7 → 0.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wsxjs/wsx-base-components",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Base UI components built with WSX Framework",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -18,7 +18,7 @@
     "!**/test"
   ],
   "dependencies": {
-    "@wsxjs/wsx-core": "0.0.7"
+    "@wsxjs/wsx-core": "0.0.8"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^8.37.0",
@@ -28,8 +28,8 @@
     "tsup": "^8.0.0",
     "typescript": "^5.0.0",
     "vite": "^5.4.19",
-    "@wsxjs/eslint-plugin-wsx": "0.0.7",
-    "@wsxjs/wsx-vite-plugin": "0.0.7"
+    "@wsxjs/wsx-vite-plugin": "0.0.8",
+    "@wsxjs/eslint-plugin-wsx": "0.0.8"
   },
   "keywords": [
     "wsx",

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,
         });