@wsxjs/wsx-core 0.0.5

package/dist/index.js

@@ -0,0 +1,755 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Fragment: () => Fragment,
+  ReactiveDebug: () => ReactiveDebug,
+  ReactiveWebComponent: () => ReactiveWebComponent,
+  StyleManager: () => StyleManager,
+  WSXLogger: () => WSXLogger,
+  WebComponent: () => WebComponent,
+  autoRegister: () => autoRegister,
+  createLogger: () => createLogger,
+  createReactiveComponent: () => createReactiveComponent,
+  createState: () => createState,
+  h: () => h,
+  jsx: () => h,
+  jsxs: () => h,
+  logger: () => logger,
+  makeReactive: () => makeReactive,
+  reactive: () => reactive,
+  registerComponent: () => registerComponent
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/utils/svg-utils.ts
+var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+var SVG_ONLY_ELEMENTS = /* @__PURE__ */ new Set([
+  // 结构元素 (Structural elements)
+  "svg",
+  "defs",
+  "g",
+  "symbol",
+  "use",
+  // 图形元素 (Graphics elements)
+  "circle",
+  "ellipse",
+  "line",
+  "path",
+  "polygon",
+  "polyline",
+  "rect",
+  // 文本元素 (Text elements)
+  "textPath",
+  "tspan",
+  // 渐变和模式 (Gradients and patterns)
+  "linearGradient",
+  "radialGradient",
+  "stop",
+  "pattern",
+  // 滤镜 (Filter elements)
+  "filter",
+  "feBlend",
+  "feColorMatrix",
+  "feComponentTransfer",
+  "feComposite",
+  "feConvolveMatrix",
+  "feDiffuseLighting",
+  "feDisplacementMap",
+  "feDistantLight",
+  "feDropShadow",
+  "feFlood",
+  "feFuncA",
+  "feFuncB",
+  "feFuncG",
+  "feFuncR",
+  "feGaussianBlur",
+  "feImage",
+  "feMerge",
+  "feMergeNode",
+  "feMorphology",
+  "feOffset",
+  "fePointLight",
+  "feSpecularLighting",
+  "feSpotLight",
+  "feTile",
+  "feTurbulence",
+  // 动画元素 (Animation elements)
+  "animate",
+  "animateMotion",
+  "animateTransform",
+  "set",
+  // 其他元素 (Other elements)
+  "clipPath",
+  "foreignObject",
+  "marker",
+  "mask",
+  "metadata",
+  "switch",
+  "desc"
+]);
+var DUAL_ELEMENTS = /* @__PURE__ */ new Set(["image", "style", "title", "text"]);
+var FORCE_HTML_ELEMENTS = /* @__PURE__ */ new Set(["a"]);
+var SVG_ELEMENTS = /* @__PURE__ */ new Set([
+  ...SVG_ONLY_ELEMENTS,
+  ...DUAL_ELEMENTS,
+  ...FORCE_HTML_ELEMENTS
+]);
+var svgContext = false;
+function isSVGOnlyElement(tagName) {
+  return SVG_ONLY_ELEMENTS.has(tagName);
+}
+function isDualElement(tagName) {
+  return DUAL_ELEMENTS.has(tagName);
+}
+function isForceHTMLElement(tagName) {
+  return FORCE_HTML_ELEMENTS.has(tagName);
+}
+function setSVGContext(inSVG) {
+  svgContext = inSVG;
+}
+function createElement(tagName) {
+  if (isForceHTMLElement(tagName)) {
+    return document.createElement(tagName);
+  }
+  if (isSVGOnlyElement(tagName)) {
+    setSVGContext(true);
+    return document.createElementNS(SVG_NAMESPACE, tagName);
+  }
+  if (isDualElement(tagName)) {
+    if (svgContext) {
+      return document.createElementNS(SVG_NAMESPACE, tagName);
+    }
+  }
+  return document.createElement(tagName);
+}
+function shouldUseSVGNamespace(tagName) {
+  return isSVGOnlyElement(tagName) || isDualElement(tagName) && svgContext;
+}
+var SVG_ATTRIBUTE_MAP = /* @__PURE__ */ new Map([
+  ["className", "class"],
+  ["htmlFor", "for"]
+]);
+function getSVGAttributeName(attributeName) {
+  return SVG_ATTRIBUTE_MAP.get(attributeName) || attributeName;
+}
+
+// src/jsx-factory.ts
+function h(tag, props = {}, ...children) {
+  if (typeof tag === "function") {
+    return tag(props, children);
+  }
+  const element = createElement(tag);
+  if (props) {
+    const isSVG = shouldUseSVGNamespace(tag);
+    Object.entries(props).forEach(([key, value]) => {
+      if (value === null || value === void 0 || value === false) {
+        return;
+      }
+      if (key === "ref" && typeof value === "function") {
+        value(element);
+      } else if (key === "className" || key === "class") {
+        if (isSVG) {
+          element.setAttribute("class", value);
+        } else {
+          element.className = value;
+        }
+      } 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);
+      } else if (typeof value === "boolean") {
+        if (value) {
+          element.setAttribute(key, "");
+        }
+      } else {
+        const attributeName = isSVG ? getSVGAttributeName(key) : key;
+        element.setAttribute(attributeName, String(value));
+      }
+    });
+  }
+  const flatChildren = flattenChildren(children);
+  flatChildren.forEach((child) => {
+    if (child === null || child === void 0 || 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) {
+  const result = [];
+  for (const child of children) {
+    if (child === null || child === void 0 || child === false) {
+      continue;
+    } else if (Array.isArray(child)) {
+      result.push(...flattenChildren(child));
+    } else {
+      result.push(child);
+    }
+  }
+  return result;
+}
+function Fragment(_props, children) {
+  const fragment = document.createDocumentFragment();
+  const flatChildren = flattenChildren(children);
+  flatChildren.forEach((child) => {
+    if (child === null || child === void 0 || 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;
+}
+
+// src/styles/style-manager.ts
+var StyleManager = class {
+  /**
+   * Create or get a cached CSSStyleSheet for a component
+   */
+  static getStyleSheet(componentName, cssText) {
+    if (this.styleSheets.has(componentName)) {
+      return this.styleSheets.get(componentName);
+    }
+    if ("adoptedStyleSheets" in Document.prototype && "CSSStyleSheet" in window) {
+      const styleSheet = new CSSStyleSheet();
+      styleSheet.replaceSync(cssText);
+      this.styleSheets.set(componentName, styleSheet);
+      return styleSheet;
+    } else {
+      throw new Error("Constructable StyleSheets not supported. Use fallback method.");
+    }
+  }
+  /**
+   * Apply styles to a shadow root using constructable stylesheets
+   */
+  static applyStyles(shadowRoot, componentName, cssText) {
+    try {
+      const styleSheet = this.getStyleSheet(componentName, cssText);
+      shadowRoot.adoptedStyleSheets = [styleSheet];
+    } catch {
+      this.applyStylesFallback(shadowRoot, cssText);
+    }
+  }
+  /**
+   * Fallback method for browsers that don't support constructable stylesheets
+   */
+  static applyStylesFallback(shadowRoot, cssText) {
+    const style = document.createElement("style");
+    style.textContent = cssText;
+    shadowRoot.appendChild(style);
+  }
+};
+StyleManager.styleSheets = /* @__PURE__ */ new Map();
+
+// src/web-component.ts
+var WebComponent = class extends HTMLElement {
+  constructor(config = {}) {
+    super();
+    this.connected = false;
+    this.config = config;
+    this.attachShadow({ mode: "open" });
+    if (config.styles) {
+      const styleName = config.styleName || this.constructor.name;
+      StyleManager.applyStyles(this.shadowRoot, styleName, config.styles);
+    }
+  }
+  /**
+   * 子类应该重写这个方法来定义观察的属性
+   * @returns 要观察的属性名数组
+   */
+  static get observedAttributes() {
+    return [];
+  }
+  /**
+   * Web Component生命周期：连接到DOM
+   */
+  connectedCallback() {
+    this.connected = true;
+    try {
+      const content = this.render();
+      this.shadowRoot.appendChild(content);
+      this.onConnected?.();
+    } catch (error) {
+      console.error(`[${this.constructor.name}] Error in connectedCallback:`, error);
+      this.renderError(error);
+    }
+  }
+  /**
+   * Web Component生命周期：从DOM断开
+   */
+  disconnectedCallback() {
+    this.onDisconnected?.();
+  }
+  /**
+   * Web Component生命周期：属性变化
+   */
+  attributeChangedCallback(name, oldValue, newValue) {
+    this.onAttributeChanged?.(name, oldValue, newValue);
+  }
+  /**
+   * 查找Shadow DOM内的元素
+   *
+   * @param selector - CSS选择器
+   * @returns 元素或null
+   */
+  querySelector(selector) {
+    return this.shadowRoot.querySelector(selector);
+  }
+  /**
+   * 查找Shadow DOM内的所有匹配元素
+   *
+   * @param selector - CSS选择器
+   * @returns 元素列表
+   */
+  querySelectorAll(selector) {
+    return this.shadowRoot.querySelectorAll(selector);
+  }
+  /**
+   * 重新渲染组件
+   */
+  rerender() {
+    if (!this.connected) {
+      console.warn(
+        `[${this.constructor.name}] Component is not connected, skipping rerender.`
+      );
+      return;
+    }
+    const adoptedStyleSheets = this.shadowRoot.adoptedStyleSheets || [];
+    this.shadowRoot.innerHTML = "";
+    if (this.shadowRoot.adoptedStyleSheets) {
+      this.shadowRoot.adoptedStyleSheets = adoptedStyleSheets;
+    }
+    if (adoptedStyleSheets.length === 0 && this.config.styles) {
+      const styleName = this.config.styleName || this.constructor.name;
+      StyleManager.applyStyles(this.shadowRoot, styleName, this.config.styles);
+    }
+    try {
+      const content = this.render();
+      this.shadowRoot.appendChild(content);
+    } catch (error) {
+      console.error(`[${this.constructor.name}] Error in rerender:`, error);
+      this.renderError(error);
+    }
+  }
+  /**
+   * 渲染错误信息
+   *
+   * @param error - 错误对象
+   */
+  renderError(error) {
+    this.shadowRoot.innerHTML = "";
+    const errorElement = h(
+      "div",
+      {
+        style: "color: red; padding: 10px; border: 1px solid red; background: #ffe6e6; font-family: monospace;"
+      },
+      [
+        h("strong", {}, `[${this.constructor.name}] Component Error:`),
+        h("pre", { style: "margin: 10px 0; white-space: pre-wrap;" }, String(error))
+      ]
+    );
+    this.shadowRoot.appendChild(errorElement);
+  }
+  /**
+   * 获取配置值
+   *
+   * @param key - 配置键
+   * @param defaultValue - 默认值
+   * @returns 配置值
+   */
+  getConfig(key, defaultValue) {
+    return this.config[key] ?? defaultValue;
+  }
+  /**
+   * 设置配置值
+   *
+   * @param key - 配置键
+   * @param value - 配置值
+   */
+  setConfig(key, value) {
+    this.config[key] = value;
+  }
+  /**
+   * 获取属性值
+   *
+   * @param name - 属性名
+   * @param defaultValue - 默认值
+   * @returns 属性值
+   */
+  getAttr(name, defaultValue = "") {
+    return this.getAttribute(name) || defaultValue;
+  }
+  /**
+   * 设置属性值
+   *
+   * @param name - 属性名
+   * @param value - 属性值
+   */
+  setAttr(name, value) {
+    this.setAttribute(name, value);
+  }
+  /**
+   * 移除属性
+   *
+   * @param name - 属性名
+   */
+  removeAttr(name) {
+    this.removeAttribute(name);
+  }
+  /**
+   * 检查是否有属性
+   *
+   * @param name - 属性名
+   * @returns 是否存在
+   */
+  hasAttr(name) {
+    return this.hasAttribute(name);
+  }
+};
+
+// src/auto-register.ts
+function autoRegister(options = {}) {
+  return function(constructor) {
+    const tagName = options.tagName || deriveTagName(constructor.name, options.prefix);
+    if (!customElements.get(tagName)) {
+      customElements.define(tagName, constructor);
+    }
+    return constructor;
+  };
+}
+function registerComponent(constructor, options = {}) {
+  const tagName = options.tagName || deriveTagName(constructor.name, options.prefix);
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, constructor);
+  }
+}
+function deriveTagName(className, prefix) {
+  let kebabCase = className.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+  if (!kebabCase.includes("-")) {
+    kebabCase = `${kebabCase}-component`;
+  }
+  return prefix ? `${prefix}${kebabCase}` : kebabCase;
+}
+
+// src/utils/logger.ts
+var WSXLogger = class {
+  constructor(prefix = "[WSX]", enabled = true, level = "info") {
+    this.prefix = prefix;
+    this.enabled = enabled;
+    this.level = level;
+  }
+  shouldLog(level) {
+    if (!this.enabled) return false;
+    const levels = ["debug", "info", "warn", "error"];
+    const currentLevelIndex = levels.indexOf(this.level);
+    const messageLevelIndex = levels.indexOf(level);
+    return messageLevelIndex >= currentLevelIndex;
+  }
+  debug(message, ...args) {
+    if (this.shouldLog("debug")) {
+      console.debug(`${this.prefix} ${message}`, ...args);
+    }
+  }
+  info(message, ...args) {
+    if (this.shouldLog("info")) {
+      console.info(`${this.prefix} ${message}`, ...args);
+    }
+  }
+  warn(message, ...args) {
+    if (this.shouldLog("warn")) {
+      console.warn(`${this.prefix} ${message}`, ...args);
+    }
+  }
+  error(message, ...args) {
+    if (this.shouldLog("error")) {
+      console.error(`${this.prefix} ${message}`, ...args);
+    }
+  }
+};
+var logger = new WSXLogger();
+function createLogger(componentName) {
+  return new WSXLogger(`[WSX:${componentName}]`);
+}
+
+// src/utils/reactive.ts
+var logger2 = createLogger("ReactiveSystem");
+var UpdateScheduler = class {
+  constructor() {
+    this.pendingCallbacks = /* @__PURE__ */ new Set();
+    this.isScheduled = false;
+  }
+  /**
+   * 调度一个更新回调
+   */
+  schedule(callback) {
+    this.pendingCallbacks.add(callback);
+    if (!this.isScheduled) {
+      this.isScheduled = true;
+      queueMicrotask(() => {
+        this.flush();
+      });
+    }
+  }
+  /**
+   * 执行所有待处理的回调
+   */
+  flush() {
+    const callbacks = Array.from(this.pendingCallbacks);
+    this.pendingCallbacks.clear();
+    this.isScheduled = false;
+    callbacks.forEach((callback) => {
+      try {
+        callback();
+      } catch (error) {
+        console.error("[WSX Reactive] Error in callback:", error);
+      }
+    });
+  }
+};
+var scheduler = new UpdateScheduler();
+function reactive(obj, onChange) {
+  return new Proxy(obj, {
+    set(target, key, value) {
+      const oldValue = target[key];
+      if (oldValue !== value) {
+        target[key] = value;
+        scheduler.schedule(onChange);
+      }
+      return true;
+    },
+    get(target, key) {
+      return target[key];
+    },
+    has(target, key) {
+      return key in target;
+    },
+    ownKeys(target) {
+      return Reflect.ownKeys(target);
+    },
+    getOwnPropertyDescriptor(target, key) {
+      return Reflect.getOwnPropertyDescriptor(target, key);
+    }
+  });
+}
+function createState(initialValue, onChange) {
+  let currentValue = initialValue;
+  const getter = () => currentValue;
+  const setter = (value) => {
+    const newValue = typeof value === "function" ? value(currentValue) : value;
+    if (currentValue !== newValue) {
+      currentValue = newValue;
+      scheduler.schedule(onChange);
+    }
+  };
+  return [getter, setter];
+}
+var ReactiveDebug = {
+  /**
+   * 启用调试模式
+   */
+  enable() {
+    if (typeof window !== "undefined") {
+      window.__WSX_REACTIVE_DEBUG__ = true;
+    }
+  },
+  /**
+   * 禁用调试模式
+   */
+  disable() {
+    if (typeof window !== "undefined") {
+      window.__WSX_REACTIVE_DEBUG__ = false;
+    }
+  },
+  /**
+   * 检查是否启用调试模式
+   */
+  isEnabled() {
+    return typeof window !== "undefined" && window.__WSX_REACTIVE_DEBUG__ === true;
+  },
+  /**
+   * 调试日志
+   */
+  log(message, ...args) {
+    if (this.isEnabled()) {
+      logger2.info(`[WSX Reactive] ${message}`, ...args);
+    }
+  }
+};
+function reactiveWithDebug(obj, onChange, debugName) {
+  const name = debugName || obj.constructor.name || "Unknown";
+  return new Proxy(obj, {
+    set(target, key, value) {
+      const oldValue = target[key];
+      if (oldValue !== value) {
+        ReactiveDebug.log(`State change in ${name}:`, {
+          key: String(key),
+          oldValue,
+          newValue: value
+        });
+        target[key] = value;
+        scheduler.schedule(onChange);
+      }
+      return true;
+    },
+    get(target, key) {
+      return target[key];
+    }
+  });
+}
+
+// src/reactive-component.ts
+var ReactiveWebComponent = class extends WebComponent {
+  constructor(config = {}) {
+    super(config);
+    this._isDebugEnabled = false;
+    this._reactiveStates = /* @__PURE__ */ new Map();
+    this._isDebugEnabled = config.debug ?? false;
+  }
+  /**
+   * 创建响应式对象
+   *
+   * @param obj 要变为响应式的对象
+   * @param debugName 调试名称（可选）
+   * @returns 响应式代理对象
+   */
+  reactive(obj, debugName) {
+    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] 元组
+   */
+  useState(key, initialValue) {
+    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];
+  }
+  /**
+   * 调度重渲染
+   * 这个方法被响应式系统调用，开发者通常不需要直接调用
+   */
+  scheduleRerender() {
+    if (this.connected) {
+      this.rerender();
+    }
+  }
+  /**
+   * 获取所有响应式状态的快照（用于调试）
+   */
+  getStateSnapshot() {
+    const snapshot = {};
+    this._reactiveStates.forEach((state, key) => {
+      snapshot[key] = state.getter();
+    });
+    return snapshot;
+  }
+  /**
+   * 清理响应式状态（组件销毁时）
+   */
+  cleanupReactiveStates() {
+    this._reactiveStates.clear();
+  }
+  /**
+   * 重写 disconnectedCallback 以清理状态
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.cleanupReactiveStates();
+  }
+  /**
+   * 启用调试模式
+   */
+  enableDebug() {
+    this._isDebugEnabled = true;
+  }
+  /**
+   * 禁用调试模式
+   */
+  disableDebug() {
+    this._isDebugEnabled = false;
+  }
+};
+function makeReactive(_debugMode = false) {
+  return function(constructor) {
+    return class ReactiveComponent extends constructor {
+      constructor(...args) {
+        super(...args);
+        if (!(this instanceof ReactiveWebComponent)) {
+          this.reactive = function(obj) {
+            return reactive(obj, () => this.rerender());
+          };
+        }
+      }
+      render() {
+        throw new Error("render() method must be implemented by subclass");
+      }
+    };
+  };
+}
+function createReactiveComponent(ComponentClass, config) {
+  if (ComponentClass.prototype instanceof ReactiveWebComponent) {
+    return new ComponentClass(config);
+  }
+  const ReactiveComponent = makeReactive(config?.debug)(ComponentClass);
+  return new ReactiveComponent(config);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Fragment,
+  ReactiveDebug,
+  ReactiveWebComponent,
+  StyleManager,
+  WSXLogger,
+  WebComponent,
+  autoRegister,
+  createLogger,
+  createReactiveComponent,
+  createState,
+  h,
+  jsx,
+  jsxs,
+  logger,
+  makeReactive,
+  reactive,
+  registerComponent
+});