@wsxjs/wsx-core 0.0.5

package/src/jsx-factory.ts

@@ -0,0 +1,222 @@
+/**
+ * 纯原生JSX工厂 - 零依赖的EditorJS Web Component支持
+ *
+ * 特点：
+ * - 完全独立，不依赖React或任何框架
+ * - 支持标准JSX语法
+ * - 原生DOM操作，性能优异
+ * - 完全通用，适用于任何Web Components
+ * - TypeScript类型安全
+ */
+
+// JSX 类型声明已移至 types/wsx-types.d.ts
+
+import { createElement, shouldUseSVGNamespace, getSVGAttributeName } from "./utils/svg-utils";
+
+// JSX子元素类型
+export type JSXChildren =
+    | string
+    | number
+    | HTMLElement
+    | SVGElement
+    | DocumentFragment
+    | JSXChildren[]
+    | null
+    | undefined
+    | boolean;
+
+/**
+ * 纯原生JSX工厂函数
+ *
+ * @param tag - HTML标签名或组件函数
+ * @param props - 属性对象
+ * @param children - 子元素
+ * @returns DOM元素
+ */
+export function h(
+    tag:
+        | string
+        | ((
+              props: Record<string, unknown> | null,
+              children: JSXChildren[]
+          ) => HTMLElement | SVGElement),
+    props: Record<string, unknown> | null = {},
+    ...children: JSXChildren[]
+): HTMLElement | SVGElement {
+    // 处理组件函数
+    if (typeof tag === "function") {
+        return tag(props, children);
+    }
+
+    // 创建DOM元素 - 自动检测SVG命名空间
+    const element = createElement(tag);
+
+    // 处理属性
+    if (props) {
+        const isSVG = shouldUseSVGNamespace(tag);
+
+        Object.entries(props).forEach(([key, value]) => {
+            if (value === null || value === undefined || value === false) {
+                return;
+            }
+
+            // 处理ref回调
+            if (key === "ref" && typeof value === "function") {
+                value(element);
+            }
+            // 处理className和class
+            else if (key === "className" || key === "class") {
+                if (isSVG) {
+                    // SVG元素使用class属性
+                    element.setAttribute("class", value as string);
+                } else {
+                    // HTML元素可以使用className
+                    (element as HTMLElement).className = value as string;
+                }
+            }
+            // 处理style
+            else if (key === "style" && typeof value === "string") {
+                element.setAttribute("style", value);
+            }
+            // 处理事件监听器
+            else if (key.startsWith("on") && typeof value === "function") {
+                const eventName = key.slice(2).toLowerCase();
+                element.addEventListener(eventName, value as EventListener);
+            }
+            // 处理布尔属性
+            else if (typeof value === "boolean") {
+                if (value) {
+                    element.setAttribute(key, "");
+                }
+            }
+            // 处理其他属性
+            else {
+                // 对SVG元素使用正确的属性名
+                const attributeName = isSVG ? getSVGAttributeName(key) : key;
+                element.setAttribute(attributeName, String(value));
+            }
+        });
+    }
+
+    // 处理子元素
+    const flatChildren = flattenChildren(children);
+    flatChildren.forEach((child) => {
+        if (child === null || child === undefined || child === false) {
+            return;
+        }
+
+        if (typeof child === "string" || typeof child === "number") {
+            element.appendChild(document.createTextNode(String(child)));
+        } else if (child instanceof HTMLElement || child instanceof SVGElement) {
+            element.appendChild(child);
+        } else if (child instanceof DocumentFragment) {
+            element.appendChild(child);
+        }
+    });
+
+    return element;
+}
+
+/**
+ * 扁平化子元素数组
+ */
+function flattenChildren(
+    children: JSXChildren[]
+): (string | number | HTMLElement | SVGElement | DocumentFragment | boolean | null | undefined)[] {
+    const result: (
+        | string
+        | number
+        | HTMLElement
+        | SVGElement
+        | DocumentFragment
+        | boolean
+        | null
+        | undefined
+    )[] = [];
+
+    for (const child of children) {
+        if (child === null || child === undefined || child === false) {
+            continue;
+        } else if (Array.isArray(child)) {
+            result.push(...flattenChildren(child));
+        } else {
+            result.push(child);
+        }
+    }
+
+    return result;
+}
+
+/**
+ * JSX Fragment支持 - 用于包装多个子元素
+ */
+export function Fragment(_props: unknown, children: JSXChildren[]): DocumentFragment {
+    const fragment = document.createDocumentFragment();
+    const flatChildren = flattenChildren(children);
+
+    flatChildren.forEach((child) => {
+        if (child === null || child === undefined || child === false) {
+            return;
+        }
+
+        if (typeof child === "string" || typeof child === "number") {
+            fragment.appendChild(document.createTextNode(String(child)));
+        } else if (child instanceof HTMLElement || child instanceof SVGElement) {
+            fragment.appendChild(child);
+        } else if (child instanceof DocumentFragment) {
+            fragment.appendChild(child);
+        }
+    });
+
+    return fragment;
+}
+
+/**
+ * JSX function for React's new JSX transform
+ * Handles the new format: jsx(tag, { children: child, ...props })
+ */
+export function jsx(
+    tag:
+        | string
+        | ((
+              props: Record<string, unknown> | null,
+              children: JSXChildren[]
+          ) => HTMLElement | SVGElement),
+    props: Record<string, unknown> | null
+): HTMLElement | SVGElement {
+    if (!props) {
+        return h(tag, null);
+    }
+
+    const { children, ...restProps } = props;
+    if (children !== undefined) {
+        return h(tag, restProps, children);
+    }
+    return h(tag, restProps);
+}
+
+/**
+ * JSX function for multiple children in React's new JSX transform
+ * Handles the new format: jsxs(tag, { children: [child1, child2], ...props })
+ */
+export function jsxs(
+    tag:
+        | string
+        | ((
+              props: Record<string, unknown> | null,
+              children: JSXChildren[]
+          ) => HTMLElement | SVGElement),
+    props: Record<string, unknown> | null
+): HTMLElement | SVGElement {
+    if (!props) {
+        return h(tag, null);
+    }
+
+    const { children, ...restProps } = props;
+    if (Array.isArray(children)) {
+        return h(tag, restProps, ...children);
+    } else if (children !== undefined) {
+        return h(tag, restProps, children);
+    }
+    return h(tag, restProps);
+}

package/src/jsx-runtime.ts

@@ -0,0 +1,6 @@
+/**
+ * JSX Runtime for TypeScript's new JSX transform
+ * This file is required when using jsx: "react-jsx" or "react-jsxdev"
+ */
+
+export { jsx, jsxs, Fragment } from "./jsx-factory";

package/src/jsx.ts

@@ -0,0 +1,90 @@
+/* eslint-disable @typescript-eslint/no-namespace */
+/**
+ * JSX 入口点
+ * 专门为 jsxImportSource 机制提供 JSX 工厂函数
+ */
+
+// 导入 JSX 工厂函数
+import { h, Fragment } from "./jsx-factory";
+
+// 全局 JSX 命名空间声明 - 这是 TypeScript jsxImportSource 机制的关键
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            // 标准HTML元素
+            div: HTMLAttributes<HTMLDivElement>;
+            button: HTMLAttributes<HTMLButtonElement>;
+            a: HTMLAttributes<HTMLAnchorElement>;
+            span: HTMLAttributes<HTMLSpanElement>;
+            input: HTMLAttributes<HTMLInputElement>;
+            p: HTMLAttributes<HTMLParagraphElement>;
+            h1: HTMLAttributes<HTMLHeadingElement>;
+            h2: HTMLAttributes<HTMLHeadingElement>;
+            h3: HTMLAttributes<HTMLHeadingElement>;
+            ul: HTMLAttributes<HTMLUListElement>;
+            li: HTMLAttributes<HTMLLIElement>;
+            section: HTMLAttributes<HTMLElement>;
+            // Web Components 元素
+            slot: HTMLAttributes<HTMLSlotElement>;
+        }
+
+        interface HTMLAttributes<T extends HTMLElement = HTMLElement> {
+            // 基础属性
+            className?: string;
+            class?: string;
+            id?: string;
+            style?: string;
+            disabled?: boolean;
+            title?: string;
+            type?: string;
+            value?: string;
+            placeholder?: string;
+            src?: string;
+            alt?: string;
+            href?: string | null;
+            target?: string;
+            rel?: string;
+            download?: string;
+
+            // Ref callback with proper typing
+            ref?: (element: T) => void;
+
+            // Data attributes
+            [dataAttr: `data-${string}`]: string;
+
+            // Event handlers
+            onClick?: (event: Event) => void;
+            onInput?: (event: Event) => void;
+            onChange?: (event: Event) => void;
+            onMouseOver?: (event: Event) => void;
+            onMouseOut?: (event: Event) => void;
+            onFocus?: (event: Event) => void;
+            onBlur?: (event: Event) => void;
+            onMouseDown?: (event: MouseEvent) => void;
+            onKeyDown?: (event: KeyboardEvent) => void;
+
+            // 允许任意属性
+            [key: string]: unknown;
+        }
+
+        // 核心 JSX 接口
+        type Element = HTMLElement;
+
+        interface ElementClass {
+            render(): Element;
+        }
+
+        interface ElementAttributesProperty {
+            props: object;
+        }
+
+        interface ElementChildrenAttribute {
+            children: object;
+        }
+
+        type LibraryManagedAttributes<_C, P> = P;
+    }
+}
+
+// 导出 JSX 工厂函数
+export { h, Fragment };

package/src/reactive-component.ts

@@ -0,0 +1,171 @@
+/**
+ * 响应式 WSX Web Component
+ *
+ * 扩展基础 WebComponent，提供响应式状态支持
+ * 遵循 WSX 理念：可选使用，不破坏现有组件
+ */
+
+import { WebComponent, type WebComponentConfig } from "./web-component";
+import { reactive, createState, reactiveWithDebug } from "./utils/reactive";
+
+/**
+ * 响应式 WebComponent 配置
+ */
+export interface ReactiveWebComponentConfig extends WebComponentConfig {
+    /** 是否启用响应式调试模式 */
+    debug?: boolean;
+}
+
+/**
+ * 响应式 WebComponent 基类
+ *
+ * 提供响应式状态管理能力，同时保持与标准 WebComponent 的完全兼容
+ */
+export abstract class ReactiveWebComponent extends WebComponent {
+    private _isDebugEnabled: boolean = false;
+    private _reactiveStates = new Map<string, any>();
+
+    constructor(config: ReactiveWebComponentConfig = {}) {
+        super(config);
+
+        this._isDebugEnabled = config.debug ?? false;
+    }
+
+    /**
+     * 创建响应式对象
+     *
+     * @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();
+        }
+    }
+
+    /**
+     * 获取所有响应式状态的快照（用于调试）
+     */
+    protected getStateSnapshot(): Record<string, any> {
+        const snapshot: Record<string, any> = {};
+
+        this._reactiveStates.forEach((state, key) => {
+            snapshot[key] = state.getter();
+        });
+
+        return snapshot;
+    }
+
+    /**
+     * 清理响应式状态（组件销毁时）
+     */
+    protected cleanupReactiveStates(): void {
+        this._reactiveStates.clear();
+    }
+
+    /**
+     * 重写 disconnectedCallback 以清理状态
+     */
+    disconnectedCallback(): void {
+        super.disconnectedCallback();
+        this.cleanupReactiveStates();
+    }
+
+    /**
+     * 启用调试模式
+     */
+    protected enableDebug(): void {
+        this._isDebugEnabled = true;
+    }
+
+    /**
+     * 禁用调试模式
+     */
+    protected disableDebug(): void {
+        this._isDebugEnabled = false;
+    }
+}
+
+/**
+ * 装饰器：自动使组件变为响应式
+ *
+ * @param debugMode 是否启用调试模式
+ */
+export function makeReactive(_debugMode: boolean = false) {
+    return function <T extends new (...args: any[]) => WebComponent>(constructor: T) {
+        return class ReactiveComponent extends constructor {
+            constructor(...args: any[]) {
+                super(...args);
+
+                // 如果不是 ReactiveWebComponent 的实例，则混入响应式能力
+                if (!(this instanceof ReactiveWebComponent)) {
+                    // 添加响应式方法
+                    (this as any).reactive = function <U extends object>(obj: U): U {
+                        return reactive(obj, () => (this as any).rerender());
+                    };
+                }
+            }
+
+            render(): HTMLElement {
+                // 抽象方法必须由子类实现
+                throw new Error("render() method must be implemented by subclass");
+            }
+        } as T;
+    };
+}
+
+/**
+ * 工具函数：创建响应式组件实例
+ */
+export function createReactiveComponent<T extends WebComponent>(
+    ComponentClass: new (...args: any[]) => T,
+    config?: ReactiveWebComponentConfig
+): T {
+    // 如果已经是响应式组件，直接创建实例
+    if (ComponentClass.prototype instanceof ReactiveWebComponent) {
+        return new ComponentClass(config);
+    }
+
+    // 否则使用装饰器包装
+    const ReactiveComponent = makeReactive(config?.debug)(ComponentClass);
+    return new ReactiveComponent(config);
+}
+
+// 导出响应式相关的所有功能
+export { reactive, createState, ReactiveDebug } from "./utils/reactive";
+export type { ReactiveCallback } from "./utils/reactive";

package/src/styles/style-manager.ts

@@ -0,0 +1,54 @@
+/**
+ * Style Manager for TextColorTool Components
+ *
+ * This class manages CSS styles for Web Components using modern techniques:
+ * 1. CSS imports with Vite/bundler support
+ * 2. Constructable StyleSheets for better performance
+ * 3. Shared style sheets across component instances
+ */
+
+export class StyleManager {
+    private static styleSheets: Map<string, CSSStyleSheet> = new Map();
+
+    /**
+     * Create or get a cached CSSStyleSheet for a component
+     */
+    static getStyleSheet(componentName: string, cssText: string): CSSStyleSheet {
+        if (this.styleSheets.has(componentName)) {
+            return this.styleSheets.get(componentName) as CSSStyleSheet;
+        }
+
+        // Check if browser supports constructable stylesheets
+        if ("adoptedStyleSheets" in Document.prototype && "CSSStyleSheet" in window) {
+            const styleSheet = new CSSStyleSheet();
+            styleSheet.replaceSync(cssText);
+            this.styleSheets.set(componentName, styleSheet);
+            return styleSheet;
+        } else {
+            // Fallback for older browsers - this won't be cached but works
+            throw new Error("Constructable StyleSheets not supported. Use fallback method.");
+        }
+    }
+
+    /**
+     * Apply styles to a shadow root using constructable stylesheets
+     */
+    static applyStyles(shadowRoot: ShadowRoot, componentName: string, cssText: string): void {
+        try {
+            const styleSheet = this.getStyleSheet(componentName, cssText);
+            shadowRoot.adoptedStyleSheets = [styleSheet];
+        } catch {
+            // Fallback to traditional <style> element
+            this.applyStylesFallback(shadowRoot, cssText);
+        }
+    }
+
+    /**
+     * Fallback method for browsers that don't support constructable stylesheets
+     */
+    static applyStylesFallback(shadowRoot: ShadowRoot, cssText: string): void {
+        const style = document.createElement("style");
+        style.textContent = cssText;
+        shadowRoot.appendChild(style);
+    }
+}

package/src/utils/logger.ts

@@ -0,0 +1,69 @@
+/**
+ * WSX Framework Logger
+ *
+ * A lightweight logging utility for the WSX framework.
+ * Can be extended or replaced by consuming applications.
+ */
+
+export type LogLevel = "debug" | "info" | "warn" | "error";
+
+export interface Logger {
+    debug(message: string, ...args: unknown[]): void;
+    info(message: string, ...args: unknown[]): void;
+    warn(message: string, ...args: unknown[]): void;
+    error(message: string, ...args: unknown[]): void;
+}
+
+export class WSXLogger implements Logger {
+    private prefix: string;
+    private enabled: boolean;
+    private level: LogLevel;
+
+    constructor(prefix: string = "[WSX]", enabled: boolean = true, level: LogLevel = "info") {
+        this.prefix = prefix;
+        this.enabled = enabled;
+        this.level = level;
+    }
+
+    private shouldLog(level: LogLevel): boolean {
+        if (!this.enabled) return false;
+
+        const levels: LogLevel[] = ["debug", "info", "warn", "error"];
+        const currentLevelIndex = levels.indexOf(this.level);
+        const messageLevelIndex = levels.indexOf(level);
+
+        return messageLevelIndex >= currentLevelIndex;
+    }
+
+    debug(message: string, ...args: unknown[]): void {
+        if (this.shouldLog("debug")) {
+            console.debug(`${this.prefix} ${message}`, ...args);
+        }
+    }
+
+    info(message: string, ...args: unknown[]): void {
+        if (this.shouldLog("info")) {
+            console.info(`${this.prefix} ${message}`, ...args);
+        }
+    }
+
+    warn(message: string, ...args: unknown[]): void {
+        if (this.shouldLog("warn")) {
+            console.warn(`${this.prefix} ${message}`, ...args);
+        }
+    }
+
+    error(message: string, ...args: unknown[]): void {
+        if (this.shouldLog("error")) {
+            console.error(`${this.prefix} ${message}`, ...args);
+        }
+    }
+}
+
+// Default logger instance
+export const logger = new WSXLogger();
+
+// Factory function for creating component-specific loggers
+export function createLogger(componentName: string): Logger {
+    return new WSXLogger(`[WSX:${componentName}]`);
+}