@wsxjs/wsx-core 0.0.28 → 0.0.30

package/src/light-component.ts

@@ -10,8 +10,8 @@
 import { h, type JSXChildren } from "./jsx-factory";
 import { BaseComponent, type BaseComponentConfig } from "./base-component";
 import { RenderContext } from "./render-context";
-import { shouldPreserveElement } from "./utils/element-marking";
 import { createLogger } from "@wsxjs/wsx-logger";
+import { reconcileElement } from "./utils/element-update";
 
 const logger = createLogger("LightComponent");
 
@@ -156,6 +156,10 @@ export abstract class LightComponent extends BaseComponent {
         return HTMLElement.prototype.querySelectorAll.call(this, selector) as NodeListOf<T>;
     }
 
+    /**
+     * 递归协调子元素
+     * 更新现有子元素的属性和内容，而不是替换整个子树
+     */
     /**
      * 内部重渲染实现
      * 包含从 rerender() 方法迁移的实际渲染逻辑
@@ -180,11 +184,11 @@ export abstract class LightComponent extends BaseComponent {
 
         try {
             // 3. 重新渲染JSX内容
-            const content = RenderContext.runInContext(this, () => this.render());
+            const newContent = RenderContext.runInContext(this, () => this.render());
 
             // 4. 在添加到 DOM 之前恢复值，避免浏览器渲染状态值
             if (focusState && focusState.key && focusState.value !== undefined) {
-                const target = content.querySelector(
+                const target = newContent.querySelector(
                     `[data-wsx-key="${focusState.key}"]`
                 ) as HTMLElement;
 
@@ -220,17 +224,9 @@ export abstract class LightComponent extends BaseComponent {
 
             // 6. 使用 requestAnimationFrame 批量执行 DOM 操作
             requestAnimationFrame(() => {
-                // 先添加新内容
-                this.appendChild(content);
-
-                // 移除旧内容（保留 JSX children、样式元素和未标记元素）
-                // 关键修复：使用 shouldPreserveElement() 来保护手动创建的元素（如第三方库注入的元素）
+                // 获取当前的 children（排除样式元素和 JSX children）
                 const oldChildren = Array.from(this.children).filter((child) => {
-                    // 保留新添加的内容
-                    if (child === content) {
-                        return false;
-                    }
-                    // 保留样式元素
+                    // 排除样式元素
                     if (
                         stylesToApply &&
                         child instanceof HTMLStyleElement &&
@@ -238,38 +234,72 @@ export abstract class LightComponent extends BaseComponent {
                     ) {
                         return false;
                     }
-                    // 保留 JSX children（通过 JSX factory 直接添加的 children）
+                    // 排除 JSX children
                     if (child instanceof HTMLElement && jsxChildren.includes(child)) {
                         return false;
                     }
-                    // 保留未标记的元素（手动创建的元素、第三方库注入的元素）
-                    // 这是 RFC 0037 Phase 5 的核心：保护未标记元素
-                    if (shouldPreserveElement(child)) {
-                        return false;
-                    }
                     return true;
                 });
-                oldChildren.forEach((child) => child.remove());
+
+                // 🔥 关键修复：实现真正的 DOM reconciliation
+                // 而不是简单的删除+添加，我们需要：
+                // 1. 如果新旧内容是相同类型的元素，更新其属性
+                // 2. 如果类型不同，才替换元素
+
+                if (oldChildren.length === 1 && newContent instanceof HTMLElement) {
+                    const oldElement = oldChildren[0];
+
+                    // 如果旧元素和新元素是相同类型的标签，更新属性而不是替换
+                    if (
+                        oldElement instanceof HTMLElement &&
+                        oldElement.tagName === newContent.tagName
+                    ) {
+                        // 更新属性
+                        // 1. 移除旧属性
+                        Array.from(oldElement.attributes).forEach((attr) => {
+                            if (!newContent.hasAttribute(attr.name)) {
+                                oldElement.removeAttribute(attr.name);
+                            }
+                        });
+
+                        // 2. 设置/更新新属性
+                        Array.from(newContent.attributes).forEach((attr) => {
+                            if (oldElement.getAttribute(attr.name) !== attr.value) {
+                                oldElement.setAttribute(attr.name, attr.value);
+                            }
+                        });
+
+                        // 3. 递归更新子元素
+                        reconcileElement(oldElement, newContent);
+                    } else {
+                        // 类型不同，直接替换
+                        oldElement.remove();
+                        this.appendChild(newContent);
+                    }
+                } else {
+                    // 数量不匹配或者不是单个元素，使用简单替换
+                    oldChildren.forEach((child) => child.remove());
+                    this.appendChild(newContent);
+                }
 
                 // 确保样式元素存在并在第一个位置
-                // 关键修复：在元素复用场景中，如果 _autoStyles 存在但样式元素被意外移除，需要重新创建
                 if (stylesToApply) {
-                    let styleElement = this.querySelector(
+                    let styleEl = this.querySelector(
                         `style[data-wsx-light-component="${styleName}"]`
                     ) as HTMLStyleElement | null;
 
-                    if (!styleElement) {
+                    if (!styleEl) {
                         // 样式元素被意外移除，重新创建
-                        styleElement = document.createElement("style");
-                        styleElement.setAttribute("data-wsx-light-component", styleName);
-                        styleElement.textContent = stylesToApply;
-                        this.insertBefore(styleElement, this.firstChild);
-                    } else if (styleElement.textContent !== stylesToApply) {
+                        styleEl = document.createElement("style");
+                        styleEl.setAttribute("data-wsx-light-component", styleName);
+                        styleEl.textContent = stylesToApply;
+                        this.insertBefore(styleEl, this.firstChild);
+                    } else if (styleEl.textContent !== stylesToApply) {
                         // 样式内容已变化，更新
-                        styleElement.textContent = stylesToApply;
-                    } else if (styleElement !== this.firstChild) {
+                        styleEl.textContent = stylesToApply;
+                    } else if (styleEl !== this.firstChild) {
                         // 样式元素存在但不在第一个位置，移动到第一个位置
-                        this.insertBefore(styleElement, this.firstChild);
+                        this.insertBefore(styleEl, this.firstChild);
                     }
                 }
 

package/src/utils/dom-utils.ts

@@ -51,9 +51,15 @@ export function parseHTMLToNodes(html: string): (HTMLElement | SVGElement | stri
     // Text nodes are converted to strings, elements are kept as-is
     return Array.from(temp.childNodes).map((node) => {
         if (node instanceof HTMLElement || node instanceof SVGElement) {
+            // 关键修复：标记解析出的元素为框架管理
+            // 这确保了 shouldPreserveElement 不会错误地保留这些元素
+            // 从而防止了在频繁重渲染（如 Markdown 输入）时的元素堆积
+            (node as any).__wsxManaged = true;
             return node;
         } else {
             // Convert text nodes and other node types to strings
+            // Note: When these strings are processed by appendChildrenToElement,
+            // they will be wraped in managed text nodes.
             return node.textContent || "";
         }
     });
@@ -79,7 +85,13 @@ export function isHTMLString(str: string): boolean {
     const looksLikeMath = /^[^<]*<[^>]*>[^>]*$/.test(trimmed) && !htmlTagPattern.test(trimmed);
     if (looksLikeMath) return false;
 
-    return htmlTagPattern.test(trimmed);
+    const result = htmlTagPattern.test(trimmed);
+    if (result) {
+        console.log(`[WSX Debug] isHTMLString("${trimmed.substring(0, 50)}..."): ${result}`, {
+            looksLikeMath,
+        });
+    }
+    return result;
 }
 
 /**

package/src/utils/element-marking.ts

@@ -68,15 +68,17 @@ export function shouldPreserveElement(element: Node): boolean {
     }
 
     // 规则 2: 没有标记的元素保留（自定义元素、第三方库注入）
-    if (!isCreatedByH(element)) {
+    // 关键修正：除了检查是否由 h() 创建，还要检查是否被框架显式标记为托管 (__wsxManaged)
+    // 这主要用于处理从 HTML 字符串解析出的元素 (parseHTMLToNodes)
+    if (!isCreatedByH(element) && (element as any).__wsxManaged !== true) {
         return true;
     }
 
     // 规则 3: 显式标记保留
-    if (element.hasAttribute("data-wsx-preserve")) {
+    if (element instanceof HTMLElement && element.hasAttribute("data-wsx-preserve")) {
         return true;
     }
 
-    // 规则 4: 由 h() 创建的元素 → 不保留（由框架管理）
+    // 规则 4: 由 h() 创建或被标记为托管的元素 → 不保留（由框架管理）
     return false;
 }

package/src/utils/element-update.ts

@@ -23,6 +23,7 @@ import {
     removeNodes,
     reinsertPreservedElements,
     flattenChildrenSafe,
+    replaceOrInsertElementAtPosition,
 } from "./update-children-helpers";
 
 /**
@@ -435,21 +436,16 @@ export function updateChildren(
                         ? element.childNodes[insertionIndex.value]
                         : null;
 
-                // 即使 newChild === oldNode，如果位置不对也需要移动
-                // 使用 insertBeforeNode 确保它在正确的位置
-                if (newChild === oldNode) {
-                    if (newChild.nextSibling !== insertBeforeNode) {
-                        element.insertBefore(newChild, insertBeforeNode);
-                    }
-                } else {
-                    // RFC 0053 关键修复：直接使用 insertBefore 确保插入到正确位置
-                    // replaceOrInsertElement 会尝试基于 oldNode (此处为 insertBeforeNode) 的 nextSibling 插入，
-                    // 这对于旨在基于位置插入的场景会导致 Off-By-One 错误（插入到了后面）
-                    element.insertBefore(newChild, insertBeforeNode);
-                }
+                // 甚至 newChild === oldNode，如果位置不对也需要移动
+                // 使用 helper 处理元素替换和插入，支持 HTML 解析内容的自动等价性匹配
+                replaceOrInsertElementAtPosition(
+                    element,
+                    newChild as HTMLElement | SVGElement,
+                    oldNode,
+                    insertBeforeNode,
+                    processedNodes
+                );
 
-                // 标记新元素为已处理
-                processedNodes.add(newChild);
                 insertionIndex.value++;
             } else {
                 // 类型变化：元素 -> 文本/Fragment
@@ -538,3 +534,85 @@ export function updateElement(
     // 更新 children
     updateChildren(element, oldChildren, newChildren, cacheManager);
 }
+
+/**
+ * Recursively reconciles an old element to match a new element's structure.
+ * This is a pure function that updates the oldParent in-place to match newParent.
+ *
+ * Used by LightComponent to update DOM without full replacement, preserving:
+ * - Element references (important for event listeners, focus state)
+ * - User-added JSX children
+ * - Third-party library injected elements
+ *
+ * @param oldParent - The existing DOM element to update
+ * @param newParent - The new element structure to match
+ */
+export function reconcileElement(oldParent: HTMLElement, newParent: HTMLElement): void {
+    const oldChildren = Array.from(oldParent.childNodes);
+    const newChildren = Array.from(newParent.childNodes);
+
+    const maxLength = Math.max(oldChildren.length, newChildren.length);
+
+    for (let i = 0; i < maxLength; i++) {
+        const oldChild = oldChildren[i];
+        const newChild = newChildren[i];
+
+        if (!newChild) {
+            // 新的子节点不存在，删除旧的
+            oldChild?.remove();
+        } else if (!oldChild) {
+            // 旧的子节点不存在，添加新的
+            oldParent.appendChild(newChild.cloneNode(true));
+        } else if (oldChild.nodeType !== newChild.nodeType) {
+            // 节点类型不同，替换
+            oldParent.replaceChild(newChild.cloneNode(true), oldChild);
+        } else if (oldChild.nodeType === Node.TEXT_NODE) {
+            // 文本节点，更新内容
+            if (oldChild.textContent !== newChild.textContent) {
+                oldChild.textContent = newChild.textContent;
+            }
+        } else if (oldChild.nodeType === Node.ELEMENT_NODE) {
+            const oldEl = oldChild as HTMLElement;
+            const newEl = newChild as HTMLElement;
+
+            // 元素节点
+            if (oldEl.tagName !== newEl.tagName) {
+                // 标签不同，替换
+                oldParent.replaceChild(newEl.cloneNode(true), oldEl);
+            } else {
+                // 标签相同，更新属性
+                // 1. 移除旧属性
+                Array.from(oldEl.attributes).forEach((attr) => {
+                    if (!newEl.hasAttribute(attr.name)) {
+                        oldEl.removeAttribute(attr.name);
+                    }
+                });
+
+                // 2. 设置/更新新属性
+                Array.from(newEl.attributes).forEach((attr) => {
+                    if (oldEl.getAttribute(attr.name) !== attr.value) {
+                        oldEl.setAttribute(attr.name, attr.value);
+                    }
+                });
+
+                // 3. 特殊处理：className 是 property，不是 attribute
+                if (oldEl.className !== newEl.className) {
+                    oldEl.className = newEl.className;
+                }
+
+                // 4. 特殊处理：对于 input 元素，更新 checked 和 value 属性
+                if (oldEl instanceof HTMLInputElement && newEl instanceof HTMLInputElement) {
+                    if (oldEl.checked !== newEl.checked) {
+                        oldEl.checked = newEl.checked;
+                    }
+                    if (oldEl.value !== newEl.value) {
+                        oldEl.value = newEl.value;
+                    }
+                }
+
+                // 5. 递归更新子元素
+                reconcileElement(oldEl, newEl);
+            }
+        }
+    }
+}

package/src/utils/update-children-helpers.ts

@@ -207,7 +207,8 @@ export function replaceOrInsertElementAtPosition(
     parent: HTMLElement | SVGElement,
     newChild: HTMLElement | SVGElement,
     oldNode: Node | null,
-    targetNextSibling: Node | null
+    targetNextSibling: Node | null,
+    processedNodes?: Set<Node>
 ): void {
     // 如果新元素已经在其他父元素中，先移除
     if (newChild.parentNode && newChild.parentNode !== parent) {
@@ -215,11 +216,15 @@ export function replaceOrInsertElementAtPosition(
     }
 
     // 检查元素是否已经在正确位置
+    // 1. 如果 newChild.nextSibling === targetNextSibling，说明在正确位置的前面
+    // 2. 关键修复：如果 targetNextSibling === newChild，说明 newChild 就在目标位置（它本身就是下一个节点）
     const isInCorrectPosition =
-        newChild.parentNode === parent && newChild.nextSibling === targetNextSibling;
+        newChild.parentNode === parent &&
+        (newChild.nextSibling === targetNextSibling || targetNextSibling === newChild);
 
     if (isInCorrectPosition) {
         // 已经在正确位置，不需要移动
+        if (processedNodes) processedNodes.add(newChild);
         return;
     }
 
@@ -227,25 +232,40 @@ export function replaceOrInsertElementAtPosition(
     if (newChild.parentNode === parent) {
         // insertBefore 会自动处理：如果元素已经在 DOM 中，会先移除再插入到新位置
         parent.insertBefore(newChild, targetNextSibling);
+        if (processedNodes) processedNodes.add(newChild);
         return;
     }
 
-    // 元素不在 parent 中，需要插入或替换
+    // 元素不在 parent 中，或者需要替换
     if (oldNode && oldNode.parentNode === parent && !shouldPreserveElement(oldNode)) {
         if (oldNode !== newChild) {
+            // RFC 0048 & RFC 0053 关键修正：特殊处理从 HTML 字符串解析出的元素
+            // 如果旧节点和新节点都没有 cache key (说明是 HTML 解析出的) 且内容相同
+            // 则保留旧节点，不进行替换。这解决了 Markdown 渲染中的 DOM 抖动。
+            const oldCacheKey = getElementCacheKey(oldNode as HTMLElement | SVGElement);
+            const newCacheKey = getElementCacheKey(newChild);
+
+            if (!oldCacheKey && !newCacheKey && (oldNode as any).__wsxManaged === true) {
+                const oldTag = (oldNode as HTMLElement | SVGElement).tagName.toLowerCase();
+                const newTag = newChild.tagName.toLowerCase();
+                if (oldTag === newTag && oldNode.textContent === newChild.textContent) {
+                    // 内容相同，逻辑上旧节点已经“处理”过了
+                    if (processedNodes) processedNodes.add(oldNode);
+                    return;
+                }
+            }
+
             // 关键修复：在替换元素之前，标记旧元素内的所有文本节点为已处理
-            // 这样可以防止在移除阶段被误删
-            // 注意：这里只标记直接子文本节点，不递归处理嵌套元素内的文本节点
-            // 因为 replaceChild 会一起处理元素及其所有子节点
             parent.replaceChild(newChild, oldNode);
+            if (processedNodes) processedNodes.add(newChild);
+        } else {
+            // 已经是同一个节点
+            if (processedNodes) processedNodes.add(newChild);
         }
     } else {
-        // RFC 0048 关键修复：在插入元素之前，检查是否已经存在相同内容的元素
-        // 如果 newChild 已经在 parent 中，不应该再次插入
-        // 如果 parent 中已经存在相同标签名和内容的元素，也不应该插入
-        // 这样可以防止重复插入相同的元素（特别是从 HTML 字符串解析而来的元素）
+        // ... 继续原有的插入逻辑 ...
         if (newChild.parentNode === parent) {
-            // 元素已经在 parent 中，不需要再次插入
+            // 已经在正确位置，不需要再次插入
             return;
         }
         // RFC 0048 关键修复：检查是否已经存在相同内容的元素
@@ -272,6 +292,13 @@ export function replaceOrInsertElementAtPosition(
                     ) {
                         // 找到相同内容的元素（且都没有 cache key），不需要插入 newChild
                         // 这是从 HTML 字符串解析而来的重复元素
+                        // 关键修复：必须将其标记为已处理，否则会被 shouldRemoveNode 移除
+                        console.log(
+                            "[WSX Debug] Found duplicate content, keeping existing:",
+                            existingNode.tagName,
+                            existingNode.textContent
+                        );
+                        if (processedNodes) processedNodes.add(existingNode);
                         return;
                     }
                 }
@@ -405,11 +432,11 @@ export function shouldRemoveNode(
 
     const isProcessed = processedNodes && processedNodes.has(node);
 
-    if (shouldPreserveElement(node)) {
+    if (isProcessed) {
         return false;
     }
 
-    if (node.nodeType === Node.TEXT_NODE && isProcessed) {
+    if (shouldPreserveElement(node)) {
         return false;
     }