@wsxjs/wsx-core 0.0.22 → 0.0.24

package/dist/index.mjs

@@ -4,7 +4,7 @@ import {
   createLogger,
   h,
   shouldPreserveElement
-} from "./chunk-OXFZ575O.mjs";
+} from "./chunk-5Q2VEEUH.mjs";
 
 // src/styles/style-manager.ts
 var StyleManager = class {
@@ -401,6 +401,12 @@ var BaseComponent = class extends HTMLElement {
      * @internal
      */
     this._isRendering = false;
+    /**
+     * 已调度渲染标志（防止在同一事件循环中重复注册 requestAnimationFrame）
+     * 用于批量更新：同一事件循环中的多个状态变化只触发一次渲染
+     * @internal
+     */
+    this._hasScheduledRender = false;
     /**
      * 处理 blur 事件，在用户停止输入时执行待处理的重渲染
      * @internal
@@ -507,6 +513,9 @@ var BaseComponent = class extends HTMLElement {
     if (this._isRendering) {
       return;
     }
+    if (this._hasScheduledRender) {
+      return;
+    }
     const root = this.getActiveRoot();
     let activeElement = null;
     if (root instanceof ShadowRoot) {
@@ -532,8 +541,16 @@ var BaseComponent = class extends HTMLElement {
     if (this._pendingRerender) {
       this._pendingRerender = false;
     }
+    this._hasScheduledRender = true;
     requestAnimationFrame(() => {
+      console.warn("[scheduleRerender] RAF callback:", {
+        component: this.constructor.name,
+        connected: this.connected,
+        isRendering: this._isRendering
+      });
+      this._hasScheduledRender = false;
       if (this.connected && !this._isRendering) {
+        console.warn("[scheduleRerender] calling _rerender()");
         this._isRendering = true;
         this._rerender();
       } else if (!this.connected) {
@@ -790,6 +807,7 @@ var WebComponent = class extends BaseComponent {
         (child) => child instanceof HTMLElement && child.style.color === "red" && child.textContent?.includes("Component Error")
       );
       const hasActualContent = allChildren.length > styleElements.length + slotElements.length;
+      this.onConnected?.();
       if (hasActualContent && !hasErrorElement) {
       } else {
         this.shadowRoot.innerHTML = "";
@@ -801,7 +819,6 @@ var WebComponent = class extends BaseComponent {
         this.shadowRoot.appendChild(content);
       }
       this.initializeEventListeners();
-      this.onConnected?.();
       if (hasActualContent === false || hasErrorElement) {
         requestAnimationFrame(() => {
           this.onRendered?.();
@@ -853,8 +870,12 @@ var WebComponent = class extends BaseComponent {
     const focusState = this.captureFocusState();
     this._pendingFocusState = focusState;
     const adoptedStyleSheets = this.shadowRoot.adoptedStyleSheets || [];
+    const hasActualAdoptedStyles = this.shadowRoot.adoptedStyleSheets && this.shadowRoot.adoptedStyleSheets.length > 0;
+    const hasFallbackStyleElement = Array.from(this.shadowRoot.children).some(
+      (child) => child instanceof HTMLStyleElement
+    );
     try {
-      if (adoptedStyleSheets.length === 0) {
+      if (!hasActualAdoptedStyles && !hasFallbackStyleElement) {
         const stylesToApply = this._autoStyles || this.config.styles;
         if (stylesToApply) {
           const styleName = this.config.styleName || this.constructor.name;
@@ -872,31 +893,40 @@ var WebComponent = class extends BaseComponent {
           }
         }
       }
-      if (this.shadowRoot.adoptedStyleSheets) {
-        this.shadowRoot.adoptedStyleSheets = adoptedStyleSheets;
-      }
-      requestAnimationFrame(() => {
+      const isContentAlreadyInShadowRoot = content.parentNode === this.shadowRoot;
+      if (!isContentAlreadyInShadowRoot) {
         this.shadowRoot.appendChild(content);
-        const oldChildren = Array.from(this.shadowRoot.children).filter((child) => {
-          if (child === content) {
-            return false;
-          }
-          if (child instanceof HTMLStyleElement) {
-            return false;
-          }
-          if (shouldPreserveElement(child)) {
-            return false;
-          }
-          return true;
-        });
-        oldChildren.forEach((child) => child.remove());
-        requestAnimationFrame(() => {
-          this.restoreFocusState(focusState);
-          this._pendingFocusState = null;
-          this.onRendered?.();
-          this._isRendering = false;
-        });
+      }
+      const oldChildren = Array.from(this.shadowRoot.children).filter((child) => {
+        if (child === content) {
+          return false;
+        }
+        if (child instanceof HTMLStyleElement) {
+          return false;
+        }
+        if (shouldPreserveElement(child)) {
+          return false;
+        }
+        return true;
       });
+      oldChildren.forEach((child) => child.remove());
+      const hasStylesAfterDOM = this.shadowRoot.adoptedStyleSheets && this.shadowRoot.adoptedStyleSheets.length > 0;
+      const hasStyleElementAfterDOM = Array.from(this.shadowRoot.children).some(
+        (child) => child instanceof HTMLStyleElement
+      );
+      if (adoptedStyleSheets.length > 0) {
+        this.shadowRoot.adoptedStyleSheets = adoptedStyleSheets;
+      } else if (!hasStylesAfterDOM && !hasStyleElementAfterDOM) {
+        const stylesToApply = this._autoStyles || this.config.styles;
+        if (stylesToApply) {
+          const styleName = this.config.styleName || this.constructor.name;
+          StyleManager.applyStyles(this.shadowRoot, styleName, stylesToApply);
+        }
+      }
+      this.restoreFocusState(focusState);
+      this._pendingFocusState = null;
+      this.onRendered?.();
+      this._isRendering = false;
     } catch (error) {
       logger3.error("Error in _rerender:", error);
       this.renderError(error);
@@ -958,6 +988,7 @@ var LightComponent = class extends BaseComponent {
       const hasActualContent = Array.from(this.children).some(
         (child) => child !== styleElement && !(child instanceof HTMLSlotElement)
       );
+      this.onConnected?.();
       if (hasActualContent && !hasErrorElement) {
         this.markJSXChildren();
         if (styleElement && styleElement !== this.firstChild) {
@@ -975,7 +1006,6 @@ var LightComponent = class extends BaseComponent {
         }
       }
       this.initializeEventListeners();
-      this.onConnected?.();
       if (hasActualContent === false || hasErrorElement) {
         requestAnimationFrame(() => {
           this.onRendered?.();
@@ -1074,11 +1104,18 @@ var LightComponent = class extends BaseComponent {
           return true;
         });
         oldChildren.forEach((child) => child.remove());
-        if (stylesToApply && this.children.length > 1) {
-          const styleElement = this.querySelector(
+        if (stylesToApply) {
+          let styleElement = this.querySelector(
             `style[data-wsx-light-component="${styleName}"]`
           );
-          if (styleElement && styleElement !== this.firstChild) {
+          if (!styleElement) {
+            styleElement = document.createElement("style");
+            styleElement.setAttribute("data-wsx-light-component", styleName);
+            styleElement.textContent = stylesToApply;
+            this.insertBefore(styleElement, this.firstChild);
+          } else if (styleElement.textContent !== stylesToApply) {
+            styleElement.textContent = stylesToApply;
+          } else if (styleElement !== this.firstChild) {
             this.insertBefore(styleElement, this.firstChild);
           }
         }