@wsxjs/wsx-base-components 0.0.16 → 0.0.18

package/src/ReactiveCounter.css

@@ -1,304 +0,0 @@
-.reactive-counter {
-    max-width: 500px;
-    margin: 20px auto;
-    padding: 24px;
-    border-radius: 12px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    transition: all 0.3s ease;
-}
-
-.theme-light {
-    background: #ffffff;
-    color: #333333;
-    border: 1px solid #e1e5e9;
-}
-
-.theme-dark {
-    background: #1a1a1a;
-    color: #ffffff;
-    border: 1px solid #333333;
-}
-
-.theme-blue {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: #ffffff;
-    border: 1px solid #5a67d8;
-}
-
-.header {
-    text-align: center;
-    margin-bottom: 24px;
-}
-
-.header h3 {
-    margin: 0 0 8px 0;
-    font-size: 24px;
-    font-weight: 600;
-}
-
-.subtitle {
-    margin: 0;
-    opacity: 0.8;
-    font-size: 14px;
-}
-
-.counter-display {
-    text-align: center;
-    margin-bottom: 32px;
-}
-
-.count-value {
-    font-size: 48px;
-    font-weight: bold;
-    line-height: 1;
-    margin-bottom: 8px;
-    font-variant-numeric: tabular-nums;
-}
-
-.step-info {
-    font-size: 14px;
-    opacity: 0.7;
-}
-
-.controls {
-    display: flex;
-    gap: 12px;
-    justify-content: center;
-    margin-bottom: 24px;
-    flex-wrap: wrap;
-}
-
-.btn {
-    padding: 10px 20px;
-    border: none;
-    border-radius: 8px;
-    font-size: 16px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    min-width: 60px;
-}
-
-.btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-.btn-primary {
-    background: #4299e1;
-    color: white;
-}
-
-.btn-primary:hover:not(:disabled) {
-    background: #3182ce;
-    transform: translateY(-1px);
-}
-
-.btn-secondary {
-    background: #718096;
-    color: white;
-}
-
-.btn-secondary:hover:not(:disabled) {
-    background: #4a5568;
-    transform: translateY(-1px);
-}
-
-.btn-warning {
-    background: #ed8936;
-    color: white;
-}
-
-.btn-warning:hover:not(:disabled) {
-    background: #dd6b20;
-    transform: translateY(-1px);
-}
-
-.btn-success {
-    background: #48bb78;
-    color: white;
-}
-
-.btn-success:hover:not(:disabled) {
-    background: #38a169;
-    transform: translateY(-1px);
-}
-
-.btn-danger {
-    background: #f56565;
-    color: white;
-}
-
-.btn-danger:hover:not(:disabled) {
-    background: #e53e3e;
-    transform: translateY(-1px);
-}
-
-.btn-sm {
-    padding: 6px 12px;
-    font-size: 14px;
-    min-width: auto;
-}
-
-.step-controls,
-.auto-controls,
-.theme-controls,
-.message-controls {
-    margin-bottom: 20px;
-    text-align: center;
-}
-
-.step-controls label {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 12px;
-    font-size: 14px;
-}
-
-.step-controls input[type="range"] {
-    flex: 0 0 150px;
-}
-
-.step-controls span {
-    font-weight: bold;
-    min-width: 20px;
-}
-
-.theme-controls select,
-.message-controls input {
-    padding: 8px 12px;
-    border: 1px solid #cbd5e0;
-    border-radius: 6px;
-    font-size: 14px;
-    margin-left: 8px;
-}
-
-.theme-dark .theme-controls select,
-.theme-dark .message-controls input {
-    background: #2d3748;
-    border-color: #4a5568;
-    color: #ffffff;
-}
-
-.theme-blue .theme-controls select,
-.theme-blue .message-controls input {
-    background: rgba(255, 255, 255, 0.1);
-    border-color: rgba(255, 255, 255, 0.2);
-    color: #ffffff;
-}
-
-.message-controls input {
-    width: 250px;
-    max-width: 100%;
-}
-
-.history {
-    margin-top: 24px;
-    padding: 16px;
-    background: rgba(0, 0, 0, 0.05);
-    border-radius: 8px;
-}
-
-.theme-dark .history {
-    background: rgba(255, 255, 255, 0.05);
-}
-
-.theme-blue .history {
-    background: rgba(255, 255, 255, 0.1);
-}
-
-.history h4 {
-    margin: 0 0 12px 0;
-    font-size: 16px;
-}
-
-.history-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin-bottom: 12px;
-}
-
-.history-item {
-    padding: 4px 8px;
-    background: rgba(66, 153, 225, 0.1);
-    border: 1px solid rgba(66, 153, 225, 0.2);
-    border-radius: 4px;
-    font-size: 12px;
-    font-weight: 500;
-}
-
-.debug-info {
-    margin-top: 24px;
-    font-size: 12px;
-}
-
-.debug-info details {
-    border: 1px solid #e2e8f0;
-    border-radius: 6px;
-    padding: 8px;
-}
-
-.theme-dark .debug-info details {
-    border-color: #4a5568;
-}
-
-.theme-blue .debug-info details {
-    border-color: rgba(255, 255, 255, 0.2);
-}
-
-.debug-info summary {
-    cursor: pointer;
-    font-weight: 500;
-    margin-bottom: 8px;
-}
-
-.debug-info pre {
-    margin: 0;
-    padding: 8px;
-    background: rgba(0, 0, 0, 0.05);
-    border-radius: 4px;
-    overflow-x: auto;
-    font-size: 11px;
-    line-height: 1.4;
-}
-
-.theme-dark .debug-info pre {
-    background: rgba(255, 255, 255, 0.05);
-}
-
-.theme-blue .debug-info pre {
-    background: rgba(255, 255, 255, 0.1);
-}
-
-/* 响应式设计 */
-@media (max-width: 600px) {
-    .reactive-counter {
-        margin: 10px;
-        padding: 16px;
-    }
-
-    .count-value {
-        font-size: 36px;
-    }
-
-    .controls {
-        flex-direction: column;
-        align-items: center;
-    }
-
-    .btn {
-        width: 200px;
-    }
-
-    .step-controls label {
-        flex-direction: column;
-        gap: 8px;
-    }
-
-    .message-controls input {
-        width: 100%;
-    }
-}

package/src/ReactiveCounter.wsx

@@ -1,231 +0,0 @@
-/** @jsxImportSource @wsxjs/wsx-core */
-/**
- * 响应式计数器组件 - 展示 WSX 响应式状态系统
- *
- * 这个组件演示了：
- * - 自动重渲染：状态变化时无需手动调用 rerender()
- * - 批量更新：多个状态变化会被合并为一次重渲染
- * - 原生性能：基于浏览器 Proxy API，零运行时开销
- * - 使用 @state 装饰器：自动初始化响应式状态
- */
-
-import { WebComponent, state, autoRegister, createLogger } from "@wsxjs/wsx-core";
-
-const logger = createLogger("ReactiveCounter");
-
-@autoRegister({ tagName: "reactive-counter" })
-export default class ReactiveCounter extends WebComponent {
-    // 使用 @state 装饰器 - 自动初始化为响应式状态
-    @state private state = {
-        count: 0,
-        step: 1,
-        message: "Hello WSX Reactive!",
-        isRunning: false,
-    };
-
-    // 使用 @state 装饰器 - 基本类型自动使用 useState
-    @state private theme = "light";
-    @state private history: number[] = [];
-
-    constructor() {
-        super();
-
-        logger.info("ReactiveCounter initialized");
-    }
-
-    render() {
-        return (
-            <div class={`reactive-counter theme-${this.theme}`}>
-                <div class="header">
-                    <h3>🔄 Reactive Counter</h3>
-                    <p class="subtitle">{this.state.message}</p>
-                </div>
-
-                <div class="counter-display">
-                    <div class="count-value">{this.state.count}</div>
-                    <div class="step-info">Step: {this.state.step}</div>
-                </div>
-
-                <div class="controls">
-                    <button
-                        class="btn btn-primary"
-                        onClick={this.increment}
-                        disabled={this.state.isRunning}
-                    >
-                        +{this.state.step}
-                    </button>
-
-                    <button
-                        class="btn btn-secondary"
-                        onClick={this.decrement}
-                        disabled={this.state.isRunning}
-                    >
-                        -{this.state.step}
-                    </button>
-
-                    <button
-                        class="btn btn-warning"
-                        onClick={this.reset}
-                        disabled={this.state.isRunning}
-                    >
-                        Reset
-                    </button>
-                </div>
-
-                <div class="step-controls">
-                    <label>
-                        Step Size:
-                        <input
-                            type="range"
-                            min="1"
-                            max="10"
-                            value={this.state.step}
-                            onInput={this.handleStepChange}
-                        />
-                        <span>{this.state.step}</span>
-                    </label>
-                </div>
-
-                <div class="auto-controls">
-                    <button
-                        class={`btn ${this.state.isRunning ? "btn-danger" : "btn-success"}`}
-                        onClick={this.toggleAutoIncrement}
-                    >
-                        {this.state.isRunning ? "Stop" : "Start"} Auto Increment
-                    </button>
-                </div>
-
-                <div class="theme-controls">
-                    <label>
-                        Theme:
-                        <select value={this.theme} onChange={this.handleThemeChange}>
-                            <option value="light">Light</option>
-                            <option value="dark">Dark</option>
-                            <option value="blue">Blue</option>
-                        </select>
-                    </label>
-                </div>
-
-                <div class="message-controls">
-                    <input
-                        type="text"
-                        value={this.state.message}
-                        onInput={this.handleMessageChange}
-                        placeholder="Enter a message..."
-                    />
-                </div>
-
-                {this.history.length > 0 && (
-                    <div class="history">
-                        <h4>History (last 10):</h4>
-                        <div class="history-list">
-                            {this.history.slice(-10).map((value, index) => (
-                                <span key={index} class="history-item">
-                                    {value}
-                                </span>
-                            ))}
-                        </div>
-                        <button class="btn btn-sm" onClick={this.clearHistory}>
-                            Clear History
-                        </button>
-                    </div>
-                )}
-
-                <div class="debug-info">
-                    <details>
-                        <summary>Debug Info</summary>
-                        <pre>
-                            {JSON.stringify(
-                                {
-                                    state: this.state,
-                                    theme: this.theme,
-                                    historyLength: this.history.length,
-                                },
-                                null,
-                                2
-                            )}
-                        </pre>
-                    </details>
-                </div>
-            </div>
-        );
-    }
-
-    // 事件处理方法 - 直接修改状态，自动触发重渲染
-    private increment = () => {
-        this.state.count += this.state.step;
-        this.addToHistory(this.state.count);
-    };
-
-    private decrement = () => {
-        this.state.count -= this.state.step;
-        this.addToHistory(this.state.count);
-    };
-
-    private reset = () => {
-        this.state.count = 0;
-        this.addToHistory(0);
-    };
-
-    private handleStepChange = (event: Event) => {
-        const input = event.target as HTMLInputElement;
-        this.state.step = parseInt(input.value);
-    };
-
-    private handleThemeChange = (event: Event) => {
-        const select = event.target as HTMLSelectElement;
-        this.theme = select.value;
-    };
-
-    private handleMessageChange = (event: Event) => {
-        const input = event.target as HTMLInputElement;
-        this.state.message = input.value;
-    };
-
-    private toggleAutoIncrement = () => {
-        this.state.isRunning = !this.state.isRunning;
-
-        if (this.state.isRunning) {
-            this.startAutoIncrement();
-        }
-    };
-
-    private startAutoIncrement() {
-        const interval = setInterval(() => {
-            if (!this.state.isRunning) {
-                clearInterval(interval);
-                return;
-            }
-
-            this.increment();
-
-            // 演示批量更新：这些变化会被合并为一次重渲染
-            if (this.state.count % 5 === 0) {
-                this.state.message = `Count reached ${this.state.count}!`;
-            }
-        }, 200);
-    }
-
-    private addToHistory(value: number) {
-        this.history = [...this.history, value];
-    }
-
-    private clearHistory = () => {
-        this.history = [];
-    };
-
-    protected onConnected(): void {
-        logger.info("ReactiveCounter connected to DOM");
-
-        // 组件挂载时显示欢迎消息
-        setTimeout(() => {
-            this.state.message = "Ready to count! 🚀";
-        }, 500);
-    }
-
-    protected onDisconnected(): void {
-        logger.info("ReactiveCounter disconnected from DOM");
-        // 清理定时器等资源
-        this.state.isRunning = false;
-    }
-}

package/src/SimpleReactiveDemo.wsx

@@ -1,59 +0,0 @@
-/** @jsxImportSource @wsxjs/wsx-core */
-/**
- * 简单的响应式演示组件
- * 展示 WSX 响应式状态系统的基本功能
- * 使用 @state 装饰器自动初始化响应式状态
- */
-
-import { WebComponent, state, autoRegister, createLogger } from "@wsxjs/wsx-core";
-
-const logger = createLogger("SimpleReactiveDemo");
-
-@autoRegister({ tagName: "simple-reactive-demo" })
-export default class SimpleReactiveDemo extends WebComponent {
-    // 使用 @state 装饰器 - 自动初始化为响应式状态
-    @state private state = {
-        count: 0,
-        message: "Click the button!",
-    };
-
-    constructor() {
-        super();
-        logger.info("SimpleReactiveDemo initialized");
-    }
-
-    render() {
-        return (
-            <div style="padding: 20px; border: 1px solid #ccc; border-radius: 8px; margin: 20px;">
-                <h3>📱 Simple Reactive Demo</h3>
-                <p>{this.state.message}</p>
-                <div style="font-size: 24px; margin: 16px 0;">
-                    Count: <strong>{this.state.count}</strong>
-                </div>
-                <div>
-                    <button onClick={this.increment} style="margin-right: 8px; padding: 8px 16px;">
-                        + Increment
-                    </button>
-                    <button onClick={this.reset} style="padding: 8px 16px;">
-                        🔄 Reset
-                    </button>
-                </div>
-                <div style="margin-top: 16px; font-size: 12px; color: #666;">
-                    💡 State changes automatically trigger re-renders!
-                </div>
-            </div>
-        );
-    }
-
-    private increment = () => {
-        this.state.count++;
-        this.state.message = `Clicked ${this.state.count} time${this.state.count === 1 ? "" : "s"}!`;
-        // 注意：不需要手动调用 this.rerender()！
-    };
-
-    private reset = () => {
-        this.state.count = 0;
-        this.state.message = "Reset! Click again!";
-        // 注意：这里也不需要手动调用 this.rerender()！
-    };
-}