@wsxjs/wsx-core 0.0.5 → 0.0.7

package/dist/{chunk-YNUVFDKT.mjs → chunk-VZQT7HU5.mjs}

@@ -195,8 +195,9 @@ function jsx(tag, props) {
     return h(tag, null);
   }
   const { children, ...restProps } = props;
-  if (children !== void 0) {
-    return h(tag, restProps, children);
+  if (children !== void 0 && children !== null) {
+    const childrenArray = Array.isArray(children) ? children : [children];
+    return h(tag, restProps, ...childrenArray);
   }
   return h(tag, restProps);
 }
@@ -207,7 +208,7 @@ function jsxs(tag, props) {
   const { children, ...restProps } = props;
   if (Array.isArray(children)) {
     return h(tag, restProps, ...children);
-  } else if (children !== void 0) {
+  } else if (children !== void 0 && children !== null) {
     return h(tag, restProps, children);
   }
   return h(tag, restProps);
@@ -219,4 +220,3 @@ export {
   jsx,
   jsxs
 };
-//# sourceMappingURL=chunk-YNUVFDKT.mjs.map

package/dist/index.js

@@ -21,6 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Fragment: () => Fragment,
+  LightComponent: () => LightComponent,
   ReactiveDebug: () => ReactiveDebug,
   ReactiveWebComponent: () => ReactiveWebComponent,
   StyleManager: () => StyleManager,
@@ -439,30 +440,6 @@ var WebComponent = class extends HTMLElement {
   }
 };
 
-// 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") {
@@ -629,13 +606,283 @@ function reactiveWithDebug(obj, onChange, debugName) {
   });
 }
 
+// src/light-component.ts
+var logger3 = createLogger("LightComponent");
+var LightComponent = class extends HTMLElement {
+  constructor(config = {}) {
+    super();
+    this.connected = false;
+    this._isDebugEnabled = false;
+    this._reactiveStates = /* @__PURE__ */ new Map();
+    this.config = config;
+    this._isDebugEnabled = config.debug ?? false;
+  }
+  /**
+   * 子类应该重写这个方法来定义观察的属性
+   * @returns 要观察的属性名数组
+   */
+  static get observedAttributes() {
+    return [];
+  }
+  /**
+   * Web Component生命周期：连接到DOM
+   */
+  connectedCallback() {
+    this.connected = true;
+    try {
+      if (this.config.styles) {
+        const styleName = this.config.styleName || this.constructor.name;
+        this.applyScopedStyles(styleName, this.config.styles);
+      }
+      const content = this.render();
+      this.appendChild(content);
+      this.onConnected?.();
+    } catch (error) {
+      logger3.error(`[${this.constructor.name}] Error in connectedCallback:`, error);
+      this.renderError(error);
+    }
+  }
+  /**
+   * Web Component生命周期：从DOM断开
+   */
+  disconnectedCallback() {
+    this.cleanupReactiveStates();
+    this.cleanupStyles();
+    this.onDisconnected?.();
+  }
+  /**
+   * Web Component生命周期：属性变化
+   */
+  attributeChangedCallback(name, oldValue, newValue) {
+    this.onAttributeChanged?.(name, oldValue, newValue);
+  }
+  /**
+   * 查找组件内的元素
+   *
+   * @param selector - CSS选择器
+   * @returns 元素或null
+   */
+  querySelector(selector) {
+    return HTMLElement.prototype.querySelector.call(this, selector);
+  }
+  /**
+   * 查找组件内的所有匹配元素
+   *
+   * @param selector - CSS选择器
+   * @returns 元素列表
+   */
+  querySelectorAll(selector) {
+    return HTMLElement.prototype.querySelectorAll.call(this, selector);
+  }
+  /**
+   * 创建响应式对象
+   *
+   * @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();
+    }
+  }
+  /**
+   * 重新渲染组件
+   */
+  rerender() {
+    if (!this.connected) {
+      logger3.warn(
+        `[${this.constructor.name}] Component is not connected, skipping rerender.`
+      );
+      return;
+    }
+    this.innerHTML = "";
+    if (this.config.styles) {
+      const styleName = this.config.styleName || this.constructor.name;
+      const styleElement = document.createElement("style");
+      styleElement.setAttribute("data-wsx-light-component", styleName);
+      styleElement.textContent = this.config.styles;
+      this.appendChild(styleElement);
+    }
+    try {
+      const content = this.render();
+      this.appendChild(content);
+      if (this.config.styles && this.children.length > 1) {
+        const styleElement = this.querySelector(
+          `style[data-wsx-light-component="${this.config.styleName || this.constructor.name}"]`
+        );
+        if (styleElement && styleElement !== this.firstChild) {
+          this.insertBefore(styleElement, this.firstChild);
+        }
+      }
+    } catch (error) {
+      logger3.error(`[${this.constructor.name}] Error in rerender:`, error);
+      this.renderError(error);
+    }
+  }
+  /**
+   * 渲染错误信息
+   *
+   * @param error - 错误对象
+   */
+  renderError(error) {
+    this.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.appendChild(errorElement);
+  }
+  /**
+   * 为Light DOM组件应用样式
+   * 直接将样式注入到组件自身，避免全局污染
+   */
+  applyScopedStyles(styleName, cssText) {
+    const existingStyle = this.querySelector(`style[data-wsx-light-component="${styleName}"]`);
+    if (existingStyle) {
+      return;
+    }
+    const styleElement = document.createElement("style");
+    styleElement.setAttribute("data-wsx-light-component", styleName);
+    styleElement.textContent = cssText;
+    this.insertBefore(styleElement, this.firstChild);
+  }
+  /**
+   * 获取配置值
+   *
+   * @param key - 配置键
+   * @param defaultValue - 默认值
+   * @returns 配置值
+   */
+  getConfig(key, defaultValue) {
+    return this.config[key] ?? defaultValue;
+  }
+  /**
+   * 设置配置值
+   *
+   * @param key - 配置键
+   * @param value - 配置值
+   */
+  setConfig(key, value) {
+    this.config[key] = value;
+  }
+  /**
+   * 清理响应式状态
+   */
+  cleanupReactiveStates() {
+    this._reactiveStates.clear();
+  }
+  /**
+   * 清理组件样式
+   */
+  cleanupStyles() {
+    const styleName = this.config.styleName || this.constructor.name;
+    const existingStyle = this.querySelector(`style[data-wsx-light-component="${styleName}"]`);
+    if (existingStyle) {
+      existingStyle.remove();
+    }
+  }
+  /**
+   * 获取属性值
+   *
+   * @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/reactive-component.ts
 var ReactiveWebComponent = class extends WebComponent {
   constructor(config = {}) {
     super(config);
     this._isDebugEnabled = false;
+    this._preserveFocus = true;
     this._reactiveStates = /* @__PURE__ */ new Map();
     this._isDebugEnabled = config.debug ?? false;
+    this._preserveFocus = config.preserveFocus ?? true;
   }
   /**
    * 创建响应式对象
@@ -673,6 +920,104 @@ var ReactiveWebComponent = class extends WebComponent {
       this.rerender();
     }
   }
+  /**
+   * 重写 rerender 方法以支持焦点保持
+   */
+  rerender() {
+    if (!this.connected) {
+      return;
+    }
+    let focusData = null;
+    if (this._preserveFocus) {
+      const activeElement = this.shadowRoot.activeElement;
+      focusData = this.saveFocusState(activeElement);
+    }
+    super.rerender();
+    if (this._preserveFocus && focusData) {
+      this.restoreFocusState(focusData);
+    }
+  }
+  /**
+   * 保存焦点状态
+   */
+  saveFocusState(activeElement) {
+    if (!activeElement) {
+      return null;
+    }
+    const focusData = {
+      tagName: activeElement.tagName.toLowerCase(),
+      className: activeElement.className
+    };
+    if (activeElement.hasAttribute("contenteditable")) {
+      const selection = window.getSelection();
+      if (selection && selection.rangeCount > 0) {
+        const range = selection.getRangeAt(0);
+        focusData.selectionStart = range.startOffset;
+        focusData.selectionEnd = range.endOffset;
+      }
+    }
+    if (activeElement instanceof HTMLInputElement || activeElement instanceof HTMLSelectElement) {
+      focusData.value = activeElement.value;
+      if ("selectionStart" in activeElement) {
+        focusData.selectionStart = activeElement.selectionStart;
+        focusData.selectionEnd = activeElement.selectionEnd;
+      }
+    }
+    return focusData;
+  }
+  /**
+   * 恢复焦点状态
+   */
+  restoreFocusState(focusData) {
+    if (!focusData) return;
+    try {
+      let targetElement = null;
+      if (focusData.className) {
+        targetElement = this.shadowRoot.querySelector(
+          `.${focusData.className.split(" ")[0]}`
+        );
+      }
+      if (!targetElement) {
+        targetElement = this.shadowRoot.querySelector(focusData.tagName);
+      }
+      if (targetElement) {
+        targetElement.focus({ preventScroll: true });
+        if (focusData.selectionStart !== void 0) {
+          if (targetElement instanceof HTMLInputElement) {
+            targetElement.setSelectionRange(
+              focusData.selectionStart,
+              focusData.selectionEnd
+            );
+          } else if (targetElement instanceof HTMLSelectElement) {
+            targetElement.value = focusData.value;
+          } else if (targetElement.hasAttribute("contenteditable")) {
+            this.setCursorPosition(targetElement, focusData.selectionStart);
+          }
+        }
+      }
+    } catch {
+    }
+  }
+  /**
+   * 设置光标位置
+   */
+  setCursorPosition(element, position) {
+    try {
+      const selection = window.getSelection();
+      if (selection) {
+        const range = document.createRange();
+        const textNode = element.childNodes[0];
+        if (textNode) {
+          const maxPos = Math.min(position, textNode.textContent?.length || 0);
+          range.setStart(textNode, maxPos);
+          range.setEnd(textNode, maxPos);
+          selection.removeAllRanges();
+          selection.addRange(range);
+        }
+      }
+    } catch {
+    }
+  }
   /**
    * 获取所有响应式状态的快照（用于调试）
    */
@@ -736,6 +1081,7 @@ function createReactiveComponent(ComponentClass, config) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Fragment,
+  LightComponent,
   ReactiveDebug,
   ReactiveWebComponent,
   StyleManager,