@wsxjs/wsx-core 0.0.5 → 0.0.6

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import {
   Fragment,
   h
-} from "./chunk-BV2V6BVN.mjs";
+} from "./chunk-VZQT7HU5.mjs";
 
 // src/styles/style-manager.ts
 var StyleManager = class {
@@ -209,30 +209,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") {
@@ -399,13 +375,268 @@ 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 = "";
+    try {
+      const content = this.render();
+      this.appendChild(content);
+    } 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;
   }
   /**
    * 创建响应式对象
@@ -443,6 +674,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 {
+    }
+  }
   /**
    * 获取所有响应式状态的快照（用于调试）
    */
@@ -505,6 +834,7 @@ function createReactiveComponent(ComponentClass, config) {
 }
 export {
   Fragment,
+  LightComponent,
   ReactiveDebug,
   ReactiveWebComponent,
   StyleManager,

package/dist/jsx-runtime.js

@@ -223,8 +223,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);
 }
@@ -235,7 +236,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);

package/dist/jsx-runtime.mjs

@@ -2,7 +2,7 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-BV2V6BVN.mjs";
+} from "./chunk-VZQT7HU5.mjs";
 export {
   Fragment,
   jsx,

package/dist/jsx.mjs

@@ -1,7 +1,7 @@
 import {
   Fragment,
   h
-} from "./chunk-BV2V6BVN.mjs";
+} from "./chunk-VZQT7HU5.mjs";
 export {
   Fragment,
   h

package/package.json

@@ -1,49 +1,49 @@
 {
-  "name": "@wsxjs/wsx-core",
-  "version": "0.0.5",
-  "description": "Core WSX Framework - Web Components with JSX syntax",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./types/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./types/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+    "name": "@wsxjs/wsx-core",
+    "version": "0.0.6",
+    "description": "Core WSX Framework - Web Components with JSX syntax",
+    "main": "./dist/index.js",
+    "module": "./dist/index.mjs",
+    "types": "./types/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./types/index.d.ts",
+            "import": "./dist/index.mjs",
+            "require": "./dist/index.js"
+        },
+        "./jsx-runtime": {
+            "types": "./types/jsx-runtime.d.ts",
+            "import": "./dist/jsx-runtime.mjs",
+            "require": "./dist/jsx-runtime.js"
+        }
     },
-    "./jsx-runtime": {
-      "types": "./types/jsx-runtime.d.ts",
-      "import": "./dist/jsx-runtime.mjs",
-      "require": "./dist/jsx-runtime.js"
+    "files": [
+        "dist",
+        "src",
+        "types",
+        "!**/__tests__",
+        "!**/test"
+    ],
+    "scripts": {
+        "build": "tsup src/index.ts src/jsx.ts src/jsx-runtime.ts --format cjs,esm",
+        "build:dev": "NODE_ENV=development tsup src/index.ts src/jsx.ts src/jsx-runtime.ts --format cjs,esm --sourcemap",
+        "dev": "NODE_ENV=development tsup src/index.ts src/jsx.ts src/jsx-runtime.ts --format cjs,esm --watch --sourcemap",
+        "test": "jest",
+        "typecheck": "tsc --noEmit",
+        "clean": "rm -rf dist"
+    },
+    "keywords": [
+        "web-components",
+        "jsx",
+        "typescript",
+        "custom-elements"
+    ],
+    "devDependencies": {
+        "tsup": "^8.0.0",
+        "typescript": "^5.0.0",
+        "@types/node": "^20.0.0"
+    },
+    "peerDependencies": {
+        "typescript": ">=4.7.0"
     }
-  },
-  "files": [
-    "dist",
-    "src",
-    "types",
-    "!**/__tests__",
-    "!**/test"
-  ],
-  "keywords": [
-    "web-components",
-    "jsx",
-    "typescript",
-    "custom-elements"
-  ],
-  "devDependencies": {
-    "tsup": "^8.0.0",
-    "typescript": "^5.0.0",
-    "@types/node": "^20.0.0"
-  },
-  "peerDependencies": {
-    "typescript": ">=4.7.0"
-  },
-  "scripts": {
-    "build": "tsup src/index.ts src/jsx.ts src/jsx-runtime.ts --format cjs,esm",
-    "build:dev": "NODE_ENV=development tsup src/index.ts src/jsx.ts src/jsx-runtime.ts --format cjs,esm --sourcemap",
-    "dev": "NODE_ENV=development tsup src/index.ts src/jsx.ts src/jsx-runtime.ts --format cjs,esm --watch --sourcemap",
-    "test": "jest",
-    "typecheck": "tsc --noEmit",
-    "clean": "rm -rf dist"
-  }
-}
+}

package/src/index.ts

@@ -1,5 +1,6 @@
 // Core exports
 export { WebComponent } from "./web-component";
+export { LightComponent } from "./light-component";
 export { autoRegister, registerComponent } from "./auto-register";
 export { h, h as jsx, h as jsxs, Fragment } from "./jsx-factory";
 export { StyleManager } from "./styles/style-manager";
@@ -11,6 +12,7 @@ export { ReactiveWebComponent, makeReactive, createReactiveComponent } from "./r
 
 // Type exports
 export type { WebComponentConfig } from "./web-component";
+export type { LightComponentConfig } from "./light-component";
 export type { JSXChildren } from "./jsx-factory";
 export type { Logger, LogLevel } from "./utils/logger";
 export type { ReactiveCallback } from "./utils/reactive";

package/src/jsx-factory.ts

@@ -189,8 +189,9 @@ export function jsx(
     }
 
     const { children, ...restProps } = props;
-    if (children !== undefined) {
-        return h(tag, restProps, children);
+    if (children !== undefined && children !== null) {
+        const childrenArray = Array.isArray(children) ? children : [children];
+        return h(tag, restProps, ...childrenArray);
     }
     return h(tag, restProps);
 }
@@ -215,8 +216,8 @@ export function jsxs(
     const { children, ...restProps } = props;
     if (Array.isArray(children)) {
         return h(tag, restProps, ...children);
-    } else if (children !== undefined) {
-        return h(tag, restProps, children);
+    } else if (children !== undefined && children !== null) {
+        return h(tag, restProps, children as JSXChildren);
     }
     return h(tag, restProps);
 }