@wsxjs/wsx-base-components 0.0.5

package/src/ColorPickerUtils.ts

@@ -0,0 +1,116 @@
+/**
+ * 插件类型定义
+ */
+export type PluginType = "text" | "marker";
+
+/**
+ * 节流函数类型定义
+ */
+export type ThrottleFunction<T extends unknown[]> = (...args: T) => void;
+
+const TEXT_COLOR_CACHE = "editor-js-text-color-cache";
+
+/**
+ * 检查是否为CSS变量
+ * @param value 待检查的值
+ * @returns 是否为CSS变量
+ */
+function isColorVariable(value: string): boolean {
+    return value.startsWith("var(") && value.endsWith(")");
+}
+
+/**
+ * 提取CSS变量名
+ * @param variable CSS变量字符串
+ * @returns 变量名
+ */
+function extractVariableName(variable: string): string {
+    return variable.slice(4, -1).trim();
+}
+
+/**
+ * 获取CSS属性值
+ * @param propertyName CSS属性名
+ * @returns CSS属性值
+ */
+function getCSSPropertyValue(propertyName: string): string {
+    const computedStyle = getComputedStyle(document.documentElement);
+    return computedStyle.getPropertyValue(propertyName).trim() || propertyName;
+}
+
+/**
+ * Convert CSS variables to color string.
+ * @param colorValue original value provided by users
+ * @returns string color string
+ */
+export function handleCSSVariables(colorValue: string): string {
+    if (isColorVariable(colorValue)) {
+        const variableName = extractVariableName(colorValue);
+        return getCSSPropertyValue(variableName);
+    }
+    return colorValue;
+}
+
+/**
+ * Cache the latest text/marker color
+ * @param defaultColor 默认颜色值
+ * @param pluginType 插件类型
+ * @returns 返回设置的默认颜色
+ */
+export function setDefaultColorCache(defaultColor: string, pluginType: PluginType): string {
+    sessionStorage.setItem(`${TEXT_COLOR_CACHE}-${pluginType}`, JSON.stringify(defaultColor));
+    return defaultColor;
+}
+
+/**
+ * Cache custom color
+ * @param customColor 自定义颜色值
+ * @param pluginType 插件类型
+ */
+export function setCustomColorCache(customColor: string, pluginType: PluginType): void {
+    sessionStorage.setItem(`${TEXT_COLOR_CACHE}-${pluginType}-custom`, JSON.stringify(customColor));
+}
+
+/**
+ * Get cached custom color
+ * @param pluginType 插件类型
+ * @returns 缓存的自定义颜色值或null
+ */
+export function getCustomColorCache(pluginType: PluginType): string | null {
+    const cachedCustomColor = sessionStorage.getItem(`${TEXT_COLOR_CACHE}-${pluginType}-custom`);
+    return cachedCustomColor ? JSON.parse(cachedCustomColor) : null;
+}
+
+/**
+ * Throttle function
+ * @param fn 要节流的函数
+ * @param delay 延迟时间（毫秒）
+ * @returns 节流后的函数
+ */
+export function throttle<T extends unknown[]>(
+    fn: ThrottleFunction<T>,
+    delay: number
+): (...args: T) => void {
+    let id: NodeJS.Timeout | null = null;
+    return (...args: T) => {
+        if (!id) {
+            id = setTimeout(() => {
+                fn(...args);
+                id = null;
+            }, delay);
+        }
+    };
+}
+/**
+ * Get cached text/marker color
+ * @param defaultColor 默认颜色值
+ * @param pluginType 插件类型
+ * @returns 缓存的颜色值或默认颜色
+ */
+export function getDefaultColorCache(defaultColor: string, pluginType: PluginType): string {
+    const cachedDefaultColor = sessionStorage.getItem(`${TEXT_COLOR_CACHE}-${pluginType}`);
+    return cachedDefaultColor ? JSON.parse(cachedDefaultColor) : defaultColor;
+}
+
+export const CONVERTER_BTN = "ce-inline-toolbar__dropdown";
+export const CONVERTER_PANEL = "ce-conversion-toolbar--showed";

package/src/ReactiveCounter.css

@@ -0,0 +1,304 @@
+.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

@@ -0,0 +1,244 @@
+/** @jsxImportSource @wsxjs/wsx-core */
+/**
+ * 响应式计数器组件 - 展示 WSX 响应式状态系统
+ *
+ * 这个组件演示了：
+ * - 自动重渲染：状态变化时无需手动调用 rerender()
+ * - 批量更新：多个状态变化会被合并为一次重渲染
+ * - 原生性能：基于浏览器 Proxy API，零运行时开销
+ */
+
+import { ReactiveWebComponent, autoRegister, createLogger } from "@wsxjs/wsx-core";
+import styles from "./ReactiveCounter.css?inline";
+
+const logger = createLogger("ReactiveCounter");
+
+@autoRegister({ tagName: "reactive-counter" })
+export default class ReactiveCounter extends ReactiveWebComponent {
+    // 使用响应式对象 - 任何属性变化都会自动触发重渲染
+    private state = this.reactive({
+        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];
+
+    constructor() {
+        super({
+            styles,
+            debug: true, // 启用调试模式
+        });
+
+        logger.info("ReactiveCounter initialized");
+    }
+
+    render() {
+        const theme = this.getTheme();
+        const history = this.getHistory();
+
+        return (
+            <div class={`reactive-counter theme-${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={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>
+
+                {history.length > 0 && (
+                    <div class="history">
+                        <h4>History (last 10):</h4>
+                        <div class="history-list">
+                            {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.getTheme(),
+                                    historyLength: this.getHistory().length,
+                                    stateSnapshot: this.getStateSnapshot(),
+                                },
+                                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.setTheme(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) {
+        const history = this.getHistory();
+        this.setHistory([...history, value]);
+    }
+
+    private clearHistory = () => {
+        this.setHistory([]);
+    };
+
+    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

@@ -0,0 +1,58 @@
+/** @jsxImportSource @wsxjs/wsx-core */
+/**
+ * 简单的响应式演示组件
+ * 展示 WSX 响应式状态系统的基本功能
+ */
+
+import { ReactiveWebComponent, 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({
+        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()！
+    };
+}