@wsxjs/wsx-core 0.0.14 → 0.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wsxjs/wsx-core",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "Core WSX Framework - Web Components with JSX syntax",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/base-component.ts

@@ -119,7 +119,7 @@ export abstract class BaseComponent extends HTMLElement {
      *
      * @returns JSX元素
      */
-    abstract render(): HTMLElement;
+    abstract render(): HTMLElement | SVGElement;
 
     /**
      * 可选生命周期钩子：组件已连接

package/src/light-component.ts

@@ -34,10 +34,16 @@ export abstract class LightComponent extends BaseComponent {
      *
      * @returns JSX元素
      */
-    abstract render(): HTMLElement;
+    abstract render(): HTMLElement | SVGElement;
 
     /**
      * Web Component生命周期：连接到DOM
+     *
+     * 渲染策略：
+     * 1. 检查组件中是否已有实际内容（排除样式元素）
+     * 2. 如果有内容且完整，跳过渲染（避免重复元素和性能优化）
+     * 3. 如果没有内容或不完整，清空后重新渲染
+     * 4. 样式元素需要保留
      */
     connectedCallback(): void {
         this.connected = true;
@@ -48,19 +54,57 @@ export abstract class LightComponent extends BaseComponent {
             // So we need to check _autoStyles directly first, then fallback to config.styles getter
             // The getter will dynamically check _autoStyles when accessed
             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;
                 this.applyScopedStyles(styleName, stylesToApply);
             }
 
-            // 渲染JSX内容到Light DOM
-            const content = this.render();
-            this.appendChild(content);
+            // 检查是否有实际内容（排除样式元素）
+            // 错误元素：如果存在错误信息，需要重新渲染以恢复正常
+            const styleElement = this.querySelector(
+                `style[data-wsx-light-component="${styleName}"]`
+            ) as HTMLStyleElement | null;
+            const hasErrorElement = Array.from(this.children).some(
+                (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
+            );
+
+            // 如果有错误元素，需要重新渲染以恢复正常
+            // 如果有实际内容且没有错误，跳过渲染（避免重复元素）
+            if (hasActualContent && !hasErrorElement) {
+                // 已经有内容且没有错误，跳过渲染（避免重复元素）
+                // 但确保样式元素在正确位置
+                if (styleElement && styleElement !== this.firstChild) {
+                    this.insertBefore(styleElement, this.firstChild);
+                }
+            } else {
+                // 没有内容，需要渲染
+                // 清空旧内容（保留样式元素）
+                const childrenToRemove = Array.from(this.children).filter(
+                    (child) => child !== styleElement
+                );
+                childrenToRemove.forEach((child) => child.remove());
+
+                // 渲染JSX内容到Light DOM
+                const content = this.render();
+                this.appendChild(content);
+
+                // 确保样式元素在第一个位置（如果存在）
+                if (styleElement && styleElement !== this.firstChild) {
+                    this.insertBefore(styleElement, this.firstChild);
+                }
+            }
 
-            // 初始化事件监听器
+            // 初始化事件监听器（无论是否渲染，都需要重新初始化，因为 DOM 可能被移动）
             this.initializeEventListeners();
 
-            // 调用子类的初始化钩子
+            // 调用子类的初始化钩子（无论是否渲染，都需要调用，因为组件已连接）
             this.onConnected?.();
         } catch (error) {
             logger.error(`[${this.constructor.name}] Error in connectedCallback:`, error);

package/src/web-component.ts

@@ -40,25 +40,66 @@ export abstract class WebComponent extends BaseComponent {
      *
      * @returns JSX元素
      */
-    abstract render(): HTMLElement;
+    abstract render(): HTMLElement | SVGElement;
 
     /**
      * Web Component生命周期：连接到DOM
+     *
+     * 渲染策略：
+     * 1. 检查 Shadow DOM 中是否已有实际内容（排除样式和 slot）
+     * 2. 如果有内容，先清空再渲染（避免重复元素）
+     * 3. 如果没有内容，直接渲染
+     * 4. Slot 元素会被重新添加，浏览器会自动将 Light DOM 中的内容分配到 slot
      */
     connectedCallback(): void {
         this.connected = true;
         try {
-            // 应用CSS样式到Shadow DOM
-            // Check both _autoStyles getter and config.styles getter
+            // 应用CSS样式到Shadow DOM（先应用，因为样式可能使用 fallback 添加 style 元素）
             const stylesToApply = this._autoStyles || this.config.styles;
             if (stylesToApply) {
                 const styleName = this.config.styleName || this.constructor.name;
                 StyleManager.applyStyles(this.shadowRoot, styleName, stylesToApply);
             }
 
-            // 渲染JSX内容到Shadow DOM
-            const content = this.render();
-            this.shadowRoot.appendChild(content);
+            // 检查是否有实际内容（排除样式和 slot）
+            // 样式元素：可能由 StyleManager fallback 添加
+            // Slot 元素：不算"内容"，因为 slot 的内容在 Light DOM 中
+            // 错误元素：如果存在错误信息，需要重新渲染以恢复正常
+            const allChildren = Array.from(this.shadowRoot.children);
+            const styleElements = allChildren.filter((child) => child instanceof HTMLStyleElement);
+            const slotElements = allChildren.filter((child) => child instanceof HTMLSlotElement);
+            const hasErrorElement = allChildren.some(
+                (child) =>
+                    child instanceof HTMLElement &&
+                    child.style.color === "red" &&
+                    child.textContent?.includes("Component Error")
+            );
+            const hasActualContent =
+                allChildren.length > styleElements.length + slotElements.length;
+
+            // 如果有错误元素，需要重新渲染以恢复正常
+            // 如果有实际内容且没有错误，跳过渲染（避免重复元素）
+            if (hasActualContent && !hasErrorElement) {
+                // 已经有内容且没有错误，跳过渲染（避免重复元素）
+                // 样式已在上方应用（StyleManager.applyStyles 是幂等的）
+                // Slot 元素已存在，浏览器会自动将 Light DOM 中的内容分配到 slot
+            } else {
+                // 没有内容，需要渲染
+                // 清空 Shadow DOM（包括可能的旧内容）
+                this.shadowRoot.innerHTML = "";
+
+                // 重新应用样式（因为上面清空了）
+                if (stylesToApply) {
+                    const styleName = this.config.styleName || this.constructor.name;
+                    StyleManager.applyStyles(this.shadowRoot, styleName, stylesToApply);
+                }
+
+                // 渲染JSX内容到Shadow DOM
+                // render() 应该返回包含 slot 元素的内容（如果需要）
+                // 浏览器会自动将 Light DOM 中的内容分配到 slot
+                const content = this.render();
+                this.shadowRoot.appendChild(content);
+            }
 
             // 初始化事件监听器
             this.initializeEventListeners();