@wsxjs/wsx-core 0.0.16 → 0.0.18

package/dist/index.js

@@ -23,14 +23,15 @@ __export(index_exports, {
   Fragment: () => Fragment,
   LightComponent: () => LightComponent,
   StyleManager: () => StyleManager,
-  WSXLogger: () => WSXLogger,
+  WSXLogger: () => import_wsx_logger4.WSXLogger,
   WebComponent: () => WebComponent,
   autoRegister: () => autoRegister,
-  createLogger: () => createLogger,
+  createLogger: () => import_wsx_logger4.createLogger,
+  createLoggerWithConfig: () => import_wsx_logger4.createLoggerWithConfig,
   h: () => h,
   jsx: () => h,
   jsxs: () => h,
-  logger: () => logger,
+  logger: () => import_wsx_logger4.logger,
   registerComponent: () => registerComponent,
   state: () => state
 });
@@ -148,6 +149,20 @@ function getSVGAttributeName(attributeName) {
   return SVG_ATTRIBUTE_MAP.get(attributeName) || attributeName;
 }
 
+// src/utils/dom-utils.ts
+function parseHTMLToNodes(html) {
+  if (!html) return [];
+  const temp = document.createElement("div");
+  temp.innerHTML = html;
+  return Array.from(temp.childNodes).map((node) => {
+    if (node instanceof HTMLElement || node instanceof SVGElement) {
+      return node;
+    } else {
+      return node.textContent || "";
+    }
+  });
+}
+
 // src/jsx-factory.ts
 function h(tag, props = {}, ...children) {
   if (typeof tag === "function") {
@@ -205,13 +220,53 @@ function h(tag, props = {}, ...children) {
   });
   return element;
 }
-function flattenChildren(children) {
+function isHTMLString(str) {
+  const trimmed = str.trim();
+  if (!trimmed) return false;
+  const htmlTagPattern = /<[a-z][a-z0-9]*(\s[^>]*)?(\/>|>)/i;
+  const looksLikeMath = /^[^<]*<[^>]*>[^>]*$/.test(trimmed) && !htmlTagPattern.test(trimmed);
+  if (looksLikeMath) return false;
+  return htmlTagPattern.test(trimmed);
+}
+function flattenChildren(children, skipHTMLDetection = false, depth = 0) {
+  if (depth > 10) {
+    console.warn(
+      "[WSX] flattenChildren: Maximum depth exceeded, treating remaining children as text"
+    );
+    return children.filter(
+      (child) => typeof child === "string" || typeof child === "number"
+    );
+  }
   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));
+      result.push(...flattenChildren(child, skipHTMLDetection, depth + 1));
+    } else if (typeof child === "string") {
+      if (skipHTMLDetection) {
+        result.push(child);
+      } else if (isHTMLString(child)) {
+        try {
+          const nodes = parseHTMLToNodes(child);
+          if (nodes.length > 0) {
+            for (const node of nodes) {
+              if (typeof node === "string") {
+                result.push(node);
+              } else {
+                result.push(node);
+              }
+            }
+          } else {
+            result.push(child);
+          }
+        } catch (error) {
+          console.warn("[WSX] Failed to parse HTML string, treating as text:", error);
+          result.push(child);
+        }
+      } else {
+        result.push(child);
+      }
     } else {
       result.push(child);
     }
@@ -276,48 +331,9 @@ var StyleManager = class {
 };
 StyleManager.styleSheets = /* @__PURE__ */ new Map();
 
-// 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 import_wsx_logger = require("@wsxjs/wsx-logger");
+var logger = (0, import_wsx_logger.createLogger)("ReactiveSystem");
 var UpdateScheduler = class {
   constructor() {
     this.pendingCallbacks = /* @__PURE__ */ new Set();
@@ -346,7 +362,7 @@ var UpdateScheduler = class {
       try {
         callback();
       } catch (error) {
-        logger2.error("[WSX Reactive] Error in callback:", error);
+        logger.error("[WSX Reactive] Error in callback:", error);
       }
     });
   }
@@ -488,7 +504,7 @@ var ReactiveDebug = {
    */
   log(message, ...args) {
     if (this.isEnabled()) {
-      logger2.info(`[WSX Reactive] ${message}`, ...args);
+      logger.info(`[WSX Reactive] ${message}`, ...args);
     }
   }
 };
@@ -558,6 +574,11 @@ var BaseComponent = class extends HTMLElement {
      * @internal
      */
     this._pendingRerender = false;
+    /**
+     * 正在渲染标志（防止在 _rerender() 执行期间再次触发 scheduleRerender()）
+     * @internal
+     */
+    this._isRendering = false;
     /**
      * 处理 blur 事件，在用户停止输入时执行待处理的重渲染
      * @internal
@@ -572,9 +593,10 @@ var BaseComponent = class extends HTMLElement {
             this._rerenderDebounceTimer = null;
           }
           requestAnimationFrame(() => {
-            if (this._pendingRerender && this.connected) {
+            if (this._pendingRerender && this.connected && !this._isRendering) {
               this._pendingRerender = false;
-              this.rerender();
+              this._isRendering = true;
+              this._rerender();
             }
           });
         }
@@ -653,6 +675,9 @@ var BaseComponent = class extends HTMLElement {
       }
       return;
     }
+    if (this._isRendering) {
+      return;
+    }
     const root = this.getActiveRoot();
     let activeElement = null;
     if (root instanceof ShadowRoot) {
@@ -678,12 +703,27 @@ var BaseComponent = class extends HTMLElement {
     if (this._pendingRerender) {
       this._pendingRerender = false;
     }
-    queueMicrotask(() => {
-      if (this.connected) {
-        this.rerender();
+    requestAnimationFrame(() => {
+      if (this.connected && !this._isRendering) {
+        this._isRendering = true;
+        this._rerender();
+      } else if (!this.connected) {
+        this._isRendering = false;
       }
     });
   }
+  /**
+   * 调度重渲染（公开 API）
+   *
+   * 与 scheduleRerender() 对齐：所有重渲染都通过统一的调度机制
+   * 使用异步调度机制，自动处理防抖和批量更新
+   *
+   * 注意：此方法现在是异步的，使用调度机制
+   * 如果需要同步执行，使用 _rerender()（不推荐，仅内部使用）
+   */
+  rerender() {
+    this.scheduleRerender();
+  }
   /**
    * 清理资源（在组件断开连接时调用）
    * @internal
@@ -889,7 +929,8 @@ var BaseComponent = class extends HTMLElement {
 };
 
 // src/web-component.ts
-var logger3 = createLogger("WebComponent");
+var import_wsx_logger2 = require("@wsxjs/wsx-logger");
+var logger2 = (0, import_wsx_logger2.createLogger)("WebComponent");
 var WebComponent = class extends BaseComponent {
   // Initialized by BaseComponent constructor
   constructor(config = {}) {
@@ -932,8 +973,13 @@ var WebComponent = class extends BaseComponent {
       }
       this.initializeEventListeners();
       this.onConnected?.();
+      if (hasActualContent === false || hasErrorElement) {
+        requestAnimationFrame(() => {
+          this.onRendered?.();
+        });
+      }
     } catch (error) {
-      logger3.error(`Error in connectedCallback:`, error);
+      logger2.error(`Error in connectedCallback:`, error);
       this.renderError(error);
     }
   }
@@ -964,11 +1010,15 @@ var WebComponent = class extends BaseComponent {
     return this.shadowRoot.querySelectorAll(selector);
   }
   /**
-   * 重新渲染组件
+   * 内部重渲染实现
+   * 包含从 rerender() 方法迁移的实际渲染逻辑
+   * WebComponent 使用 Shadow DOM，不存在 JSX children 问题
+   *
+   * @override
    */
-  rerender() {
+  _rerender() {
     if (!this.connected) {
-      logger3.warn("Component is not connected, skipping rerender.");
+      this._isRendering = false;
       return;
     }
     const focusState = this.captureFocusState();
@@ -1005,11 +1055,14 @@ var WebComponent = class extends BaseComponent {
         requestAnimationFrame(() => {
           this.restoreFocusState(focusState);
           this._pendingFocusState = null;
+          this.onRendered?.();
+          this._isRendering = false;
         });
       });
     } catch (error) {
-      logger3.error("Error in rerender:", error);
+      logger2.error("Error in _rerender:", error);
       this.renderError(error);
+      this._isRendering = false;
     }
   }
   /**
@@ -1034,7 +1087,8 @@ var WebComponent = class extends BaseComponent {
 };
 
 // src/light-component.ts
-var logger4 = createLogger("LightComponent");
+var import_wsx_logger3 = require("@wsxjs/wsx-logger");
+var logger3 = (0, import_wsx_logger3.createLogger)("LightComponent");
 var LightComponent = class extends BaseComponent {
   // Initialized by BaseComponent constructor
   constructor(config = {}) {
@@ -1064,9 +1118,10 @@ var LightComponent = class extends BaseComponent {
         (child) => child instanceof HTMLElement && child !== styleElement && child.style.color === "red" && child.textContent?.includes("Component Error")
       );
       const hasActualContent = Array.from(this.children).some(
-        (child) => child !== styleElement
+        (child) => child !== styleElement && !(child instanceof HTMLSlotElement)
       );
       if (hasActualContent && !hasErrorElement) {
+        this.markJSXChildren();
         if (styleElement && styleElement !== this.firstChild) {
           this.insertBefore(styleElement, this.firstChild);
         }
@@ -1083,8 +1138,13 @@ var LightComponent = class extends BaseComponent {
       }
       this.initializeEventListeners();
       this.onConnected?.();
+      if (hasActualContent === false || hasErrorElement) {
+        requestAnimationFrame(() => {
+          this.onRendered?.();
+        });
+      }
     } catch (error) {
-      logger4.error(`[${this.constructor.name}] Error in connectedCallback:`, error);
+      logger3.error(`[${this.constructor.name}] Error in connectedCallback:`, error);
       this.renderError(error);
     }
   }
@@ -1117,17 +1177,20 @@ var LightComponent = class extends BaseComponent {
     return HTMLElement.prototype.querySelectorAll.call(this, selector);
   }
   /**
-   * 重新渲染组件
+   * 内部重渲染实现
+   * 包含从 rerender() 方法迁移的实际渲染逻辑
+   * 处理 JSX children 的保留（Light DOM 特有）
+   *
+   * @override
    */
-  rerender() {
+  _rerender() {
     if (!this.connected) {
-      logger4.warn(
-        `[${this.constructor.name}] Component is not connected, skipping rerender.`
-      );
+      this._isRendering = false;
       return;
     }
     const focusState = this.captureFocusState();
     this._pendingFocusState = focusState;
+    const jsxChildren = this.getJSXChildren();
     try {
       const content = this.render();
       if (focusState && focusState.key && focusState.value !== void 0) {
@@ -1141,8 +1204,8 @@ var LightComponent = class extends BaseComponent {
         }
       }
       const stylesToApply = this._autoStyles || this.config.styles;
+      const styleName = this.config.styleName || this.constructor.name;
       if (stylesToApply) {
-        const styleName = this.config.styleName || this.constructor.name;
         let styleElement = this.querySelector(
           `style[data-wsx-light-component="${styleName}"]`
         );
@@ -1161,7 +1224,10 @@ var LightComponent = class extends BaseComponent {
           if (child === content) {
             return false;
           }
-          if (stylesToApply && child instanceof HTMLStyleElement && child.getAttribute("data-wsx-light-component") === (this.config.styleName || this.constructor.name)) {
+          if (stylesToApply && child instanceof HTMLStyleElement && child.getAttribute("data-wsx-light-component") === styleName) {
+            return false;
+          }
+          if (child instanceof HTMLElement && jsxChildren.includes(child)) {
             return false;
           }
           return true;
@@ -1169,7 +1235,7 @@ var LightComponent = class extends BaseComponent {
         oldChildren.forEach((child) => child.remove());
         if (stylesToApply && this.children.length > 1) {
           const styleElement = this.querySelector(
-            `style[data-wsx-light-component="${this.config.styleName || this.constructor.name}"]`
+            `style[data-wsx-light-component="${styleName}"]`
           );
           if (styleElement && styleElement !== this.firstChild) {
             this.insertBefore(styleElement, this.firstChild);
@@ -1178,13 +1244,42 @@ var LightComponent = class extends BaseComponent {
         requestAnimationFrame(() => {
           this.restoreFocusState(focusState);
           this._pendingFocusState = null;
+          this.onRendered?.();
+          this._isRendering = false;
         });
       });
     } catch (error) {
-      logger4.error(`[${this.constructor.name}] Error in rerender:`, error);
+      logger3.error(`[${this.constructor.name}] Error in _rerender:`, error);
       this.renderError(error);
+      this._isRendering = false;
     }
   }
+  /**
+   * 获取 JSX children（通过 JSX factory 直接添加的 children）
+   *
+   * 在 Light DOM 中，JSX children 是通过 JSX factory 直接添加到组件元素的
+   * 这些 children 不是 render() 返回的内容，应该保留
+   */
+  getJSXChildren() {
+    const jsxChildren = Array.from(this.children).filter(
+      (child) => child instanceof HTMLElement && child.getAttribute("data-wsx-jsx-child") === "true"
+    ).map((child) => child);
+    return jsxChildren;
+  }
+  /**
+   * 标记 JSX children（在 connectedCallback 中调用）
+   */
+  markJSXChildren() {
+    const styleName = this.config.styleName || this.constructor.name;
+    const styleElement = this.querySelector(
+      `style[data-wsx-light-component="${styleName}"]`
+    );
+    Array.from(this.children).forEach((child) => {
+      if (child instanceof HTMLElement && child !== styleElement && !(child instanceof HTMLSlotElement)) {
+        child.setAttribute("data-wsx-jsx-child", "true");
+      }
+    });
+  }
   /**
    * 渲染错误信息
    *
@@ -1254,6 +1349,9 @@ function deriveTagName(className, prefix) {
   return prefix ? `${prefix}${kebabCase}` : kebabCase;
 }
 
+// src/index.ts
+var import_wsx_logger4 = require("@wsxjs/wsx-logger");
+
 // src/reactive-decorator.ts
 function createBabelPluginError(propertyName) {
   return `@state decorator on property "${propertyName}" MUST be processed by Babel plugin at compile time. It appears the Babel plugin is not configured in your build setup. 
@@ -1335,6 +1433,7 @@ function state(targetOrContext, propertyKey) {
   WebComponent,
   autoRegister,
   createLogger,
+  createLoggerWithConfig,
   h,
   jsx,
   jsxs,