@wsxjs/wsx-core 0.0.21 → 0.0.22

package/src/utils/element-update.ts

@@ -8,7 +8,7 @@
 import { shouldUseSVGNamespace, getSVGAttributeName } from "./svg-utils";
 import { flattenChildren, type JSXChildren } from "./dom-utils";
 import { setSmartProperty, isFrameworkInternalProp } from "./props-utils";
-import { shouldPreserveElement } from "./element-marking";
+import { shouldPreserveElement, getElementCacheKey } from "./element-marking";
 import type { DOMCacheManager } from "../dom-cache-manager";
 
 /**
@@ -189,16 +189,38 @@ export function updateProps(
             continue;
         }
 
-        // 深度比较：对于对象和数组，进行浅比较
+        // 如果 oldValue 是 undefined，说明是新增属性，需要设置
+        if (oldValue === undefined) {
+            applySingleProp(element, key, newValue, tag, isSVG);
+            continue;
+        }
+
+        // 深度比较：对于对象和数组，使用 JSON.stringify 进行深度比较
+        // 注意：JSON.stringify 会进行完整的深度比较，不仅仅是第一层
+        // 关键修复：即使 JSON.stringify 结果相同，如果引用不同，也应该更新
+        // 因为对象可能包含函数、Symbol 等无法序列化的内容，或者对象引用变化意味着需要更新
         if (
             typeof oldValue === "object" &&
             oldValue !== null &&
             typeof newValue === "object" &&
             newValue !== null
         ) {
-            // 浅比较：只比较第一层属性
-            if (JSON.stringify(oldValue) === JSON.stringify(newValue)) {
-                continue;
+            // 深度比较：使用 JSON.stringify 比较整个对象结构
+            // 这样可以检测到嵌套对象（如 navigation.items[].label）的变化
+            try {
+                const oldJson = JSON.stringify(oldValue);
+                const newJson = JSON.stringify(newValue);
+                if (oldJson === newJson) {
+                    // JSON 字符串相同，但引用不同
+                    // 对于自定义元素的属性（如 navigation），即使 JSON 相同，引用变化也可能需要更新
+                    // 因为 setter 可能会触发其他逻辑
+                    // 但是，为了性能，我们只在 JSON 不同时才更新
+                    // 如果 JSON 相同但引用不同，可能是同一个对象的不同引用，不需要更新
+                    continue;
+                }
+            } catch {
+                // 如果 JSON.stringify 失败（如循环引用），认为对象已变化
+                // 继续执行，更新属性
             }
         }
 
@@ -223,83 +245,201 @@ export function updateChildren(
     const minLength = Math.min(flatOld.length, flatNew.length);
 
     // 更新现有子节点
+    // 关键：直接使用 oldChild 作为 oldNode（如果它是元素），因为它已经在 DOM 中
+    // 对于文本节点，按顺序匹配（跳过应该保留的元素节点）
+    let domIndex = 0; // DOM 中的实际索引，用于匹配文本节点
     for (let i = 0; i < minLength; i++) {
         const oldChild = flatOld[i];
         const newChild = flatNew[i];
 
+        // 找到与 oldChild 对应的实际 DOM 节点
+        // 关键：oldChild 是上次渲染的元素引用，如果它在 DOM 中，直接使用它
+        let oldNode: Node | null = null;
+        if (oldChild instanceof HTMLElement || oldChild instanceof SVGElement) {
+            // 元素节点：检查 oldChild 是否在 DOM 中
+            // 如果 oldChild 的 parentNode 是当前 element，说明它在 DOM 中
+            if (oldChild.parentNode === element) {
+                // 关键修复：确保 oldChild 不是应该保留的元素（手动创建的元素、第三方库注入的元素）
+                // 如果 oldChild 是应该保留的元素，不应该在"更新现有子节点"循环中处理它
+                if (!shouldPreserveElement(oldChild)) {
+                    oldNode = oldChild;
+                }
+            } else {
+                // oldChild 不在 DOM 中，尝试通过 cache key 找到对应的 DOM 节点
+                // 这可以处理元素被替换但 cache key 相同的情况
+                const oldCacheKey = getElementCacheKey(oldChild);
+                if (oldCacheKey) {
+                    // 遍历 DOM 中的子节点，找到具有相同 cache key 的节点
+                    for (let j = 0; j < element.childNodes.length; j++) {
+                        const domChild = element.childNodes[j];
+                        if (domChild instanceof HTMLElement || domChild instanceof SVGElement) {
+                            // 跳过应该保留的元素（手动创建的元素、第三方库注入的元素）
+                            if (shouldPreserveElement(domChild)) {
+                                continue;
+                            }
+                            const domCacheKey = getElementCacheKey(domChild);
+                            if (domCacheKey === oldCacheKey) {
+                                oldNode = domChild;
+                                break;
+                            }
+                        }
+                    }
+                }
+            }
+            // 如果 oldChild 不在 DOM 中且找不到对应的节点，oldNode 保持为 null
+        } else if (typeof oldChild === "string" || typeof oldChild === "number") {
+            // 文本节点：按顺序找到对应的文本节点（跳过所有元素节点）
+            // 关键：跳过应该保留的元素节点（手动创建的元素、第三方库注入的元素）
+            while (domIndex < element.childNodes.length) {
+                const node = element.childNodes[domIndex];
+                if (node.nodeType === Node.TEXT_NODE) {
+                    oldNode = node;
+                    domIndex++;
+                    break;
+                } else if (node.nodeType === Node.ELEMENT_NODE) {
+                    // 跳过所有元素节点（不管是保留的还是框架管理的）
+                    // 因为元素节点会在自己的迭代中处理
+                    // 注意：手动创建的元素会被 shouldPreserveElement 保护，不会被移除
+                    domIndex++;
+                } else {
+                    // 跳过其他类型的节点
+                    domIndex++;
+                }
+            }
+        }
+
         // 如果是文本节点，更新文本内容
         if (typeof oldChild === "string" || typeof oldChild === "number") {
             if (typeof newChild === "string" || typeof newChild === "number") {
-                const textNode = element.childNodes[i];
-                if (textNode && textNode.nodeType === Node.TEXT_NODE) {
-                    textNode.textContent = String(newChild);
+                const oldText = String(oldChild);
+                const newText = String(newChild);
+
+                // 关键修复：始终检查 DOM 中的实际文本内容，而不仅仅依赖 oldChild
+                // 这样可以确保即使元数据不同步，也能正确更新
+                const needsUpdate =
+                    oldText !== newText ||
+                    (oldNode &&
+                        oldNode.nodeType === Node.TEXT_NODE &&
+                        oldNode.textContent !== newText);
+
+                if (!needsUpdate) {
+                    // 文本内容确实相同，跳过更新
+                    continue;
+                }
+
+                if (oldNode && oldNode.nodeType === Node.TEXT_NODE) {
+                    // 更新现有文本节点
+                    oldNode.textContent = newText;
                 } else {
-                    // 替换为新的文本节点
-                    const newTextNode = document.createTextNode(String(newChild));
-                    if (textNode) {
-                        element.replaceChild(newTextNode, textNode);
+                    // 创建新的文本节点
+                    const newTextNode = document.createTextNode(newText);
+                    if (oldNode && !shouldPreserveElement(oldNode)) {
+                        element.replaceChild(newTextNode, oldNode);
                     } else {
-                        element.appendChild(newTextNode);
+                        element.insertBefore(newTextNode, oldNode || null);
                     }
                 }
             } else {
-                // 类型变化：替换节点
-                const textNode = element.childNodes[i];
-                if (textNode) {
-                    // 检查是否应该保留旧节点
-                    if (!shouldPreserveElement(textNode)) {
-                        element.removeChild(textNode);
-                    }
-                    // 如果应该保留，不删除（但可能仍需要添加新节点）
+                // 类型变化：文本 -> 元素
+                if (oldNode && !shouldPreserveElement(oldNode)) {
+                    element.removeChild(oldNode);
                 }
-                if (typeof newChild === "string" || typeof newChild === "number") {
-                    element.appendChild(document.createTextNode(String(newChild)));
-                } else if (newChild instanceof HTMLElement || newChild instanceof SVGElement) {
-                    element.appendChild(newChild);
+                if (newChild instanceof HTMLElement || newChild instanceof SVGElement) {
+                    if (newChild.parentNode !== element) {
+                        element.insertBefore(newChild, oldNode || null);
+                    }
                 } else if (newChild instanceof DocumentFragment) {
-                    element.appendChild(newChild);
+                    element.insertBefore(newChild, oldNode || null);
                 }
             }
         } else if (oldChild instanceof HTMLElement || oldChild instanceof SVGElement) {
+            // 关键修复：如果 oldNode 是应该保留的元素（手动创建的元素、第三方库注入的元素），跳过处理
+            // 这些元素不在 oldChildren 或 newChildren 中，应该在第二步被保留
+            if (oldNode && shouldPreserveElement(oldNode)) {
+                // 跳过应该保留的元素，继续处理下一个
+                continue;
+            }
+
             // 如果是元素节点，检查是否是同一个元素
             if (newChild === oldChild) {
-                // 同一个元素，不需要更新
+                // 同一个元素，不需要更新（元素内容会在 updateElement 中更新）
                 continue;
             } else if (newChild instanceof HTMLElement || newChild instanceof SVGElement) {
-                // 不同的元素，替换
-                const oldNode = element.childNodes[i];
+                // 不同的元素引用，需要替换
+                // 检查 cache key：如果 cache key 相同，说明是同一个逻辑位置，应该替换
+                const oldCacheKey =
+                    oldNode && (oldNode instanceof HTMLElement || oldNode instanceof SVGElement)
+                        ? getElementCacheKey(oldNode)
+                        : null;
+                const newCacheKey = getElementCacheKey(newChild);
+                const hasSameCacheKey = oldCacheKey && newCacheKey && oldCacheKey === newCacheKey;
+
                 if (oldNode) {
-                    // 检查是否应该保留旧节点
+                    // oldNode 存在（oldChild 在 DOM 中）
                     if (!shouldPreserveElement(oldNode)) {
-                        // 只有当新子元素不在当前位置时才替换
+                        // 可以替换
                         if (oldNode !== newChild) {
-                            element.replaceChild(newChild, oldNode);
+                            // 如果 newChild 已经在 DOM 中，需要先移除它（避免重复）
+                            if (newChild.parentNode === element) {
+                                // newChild 已经在当前 element 中
+                                // 如果 cache key 相同，说明是同一个逻辑位置，应该替换 oldNode
+                                if (hasSameCacheKey) {
+                                    // 如果 newChild 就是 oldNode，不需要替换
+                                    if (newChild !== oldNode) {
+                                        // 替换旧元素（replaceChild 会自动从 newChild 的旧位置移除它）
+                                        // 但是，如果 newChild 在 oldNode 之后，replaceChild 会先移除 newChild，然后替换 oldNode
+                                        // 这会导致 newChild 移动到 oldNode 的位置，这是正确的
+                                        // 如果 newChild 在 oldNode 之前，replaceChild 也会将 newChild 移动到 oldNode 的位置
+                                        // 所以，无论 newChild 在哪里，replaceChild 都会将其移动到 oldNode 的位置
+                                        element.replaceChild(newChild, oldNode);
+                                    }
+                                } else {
+                                    // cache key 不同，说明 newChild 在错误的位置
+                                    // 先移除 newChild（它可能在错误的位置）
+                                    element.removeChild(newChild);
+                                    // 然后替换 oldNode
+                                    element.replaceChild(newChild, oldNode);
+                                }
+                            } else if (newChild.parentNode) {
+                                // newChild 在其他父元素中，先移除
+                                newChild.parentNode.removeChild(newChild);
+                                // 然后替换 oldNode
+                                element.replaceChild(newChild, oldNode);
+                            } else {
+                                // newChild 不在 DOM 中，直接替换
+                                element.replaceChild(newChild, oldNode);
+                            }
                         }
                     } else {
                         // 应该保留旧节点，只添加新节点（不替换）
                         if (newChild.parentNode !== element) {
-                            element.appendChild(newChild);
+                            // 如果 newChild 在其他父元素中，先移除
+                            if (newChild.parentNode) {
+                                newChild.parentNode.removeChild(newChild);
+                            }
+                            element.insertBefore(newChild, oldNode.nextSibling);
                         }
                     }
                 } else {
+                    // oldNode 不存在（oldChild 不在 DOM 中），直接添加新元素
                     if (newChild.parentNode !== element) {
+                        // 如果 newChild 在其他父元素中，先移除
+                        if (newChild.parentNode) {
+                            newChild.parentNode.removeChild(newChild);
+                        }
                         element.appendChild(newChild);
                     }
                 }
             } else {
-                // 类型变化：替换节点
-                const oldNode = element.childNodes[i];
-                if (oldNode) {
-                    // 检查是否应该保留旧节点
-                    if (!shouldPreserveElement(oldNode)) {
-                        element.removeChild(oldNode);
-                    }
-                    // 如果应该保留，不删除（但可能仍需要添加新节点）
+                // 类型变化：元素 -> 文本
+                if (oldNode && !shouldPreserveElement(oldNode)) {
+                    element.removeChild(oldNode);
                 }
                 if (typeof newChild === "string" || typeof newChild === "number") {
-                    element.appendChild(document.createTextNode(String(newChild)));
+                    const newTextNode = document.createTextNode(String(newChild));
+                    element.insertBefore(newTextNode, oldNode?.nextSibling || null);
                 } else if (newChild instanceof DocumentFragment) {
-                    element.appendChild(newChild);
+                    element.insertBefore(newChild, oldNode?.nextSibling || null);
                 }
             }
         }
@@ -316,11 +456,26 @@ export function updateChildren(
             element.appendChild(document.createTextNode(String(newChild)));
         } else if (newChild instanceof HTMLElement || newChild instanceof SVGElement) {
             // 确保子元素正确添加到当前父容器
-            // appendChild 会自动从旧父容器移除并添加到新父容器
-            // 但我们需要确保不重复添加已存在的子元素
-            if (newChild.parentNode !== element) {
-                element.appendChild(newChild);
+            // 如果 newChild 已经在 DOM 中，需要检查它是否在正确的位置
+            if (newChild.parentNode === element) {
+                // newChild 已经在当前 element 中
+                // 检查它是否在正确的位置（应该在最后，因为这是"添加新子节点"部分）
+                const currentIndex = Array.from(element.childNodes).indexOf(newChild);
+                const expectedIndex = element.childNodes.length - 1;
+                if (currentIndex !== expectedIndex) {
+                    // 位置不对，移动到正确位置（末尾）
+                    element.removeChild(newChild);
+                    element.appendChild(newChild);
+                }
+                // 如果位置正确，跳过（避免重复添加）
+                // 注意：元素内容会在 updateElement 中更新，所以这里只需要确保位置正确
+                continue;
+            } else if (newChild.parentNode) {
+                // newChild 在其他父元素中，先移除
+                newChild.parentNode.removeChild(newChild);
             }
+            // 添加 newChild 到当前 element 的末尾
+            element.appendChild(newChild);
         } else if (newChild instanceof DocumentFragment) {
             element.appendChild(newChild);
         }
@@ -328,14 +483,113 @@ export function updateChildren(
 
     // 移除多余子节点（阶段 5：正确处理元素保留）
     // 关键：需要跳过"应该保留"的元素（第三方库注入的元素）
+    // 以及已经在 newChildren 中的元素（通过元素引用或 cache key 匹配）
     const nodesToRemove: Node[] = [];
-    for (let i = flatNew.length; i < element.childNodes.length; i++) {
+    const newChildSet = new Set<HTMLElement | SVGElement | DocumentFragment>();
+    const newChildCacheKeyMap = new Map<string, HTMLElement | SVGElement>();
+    // 只将元素节点添加到 Set 中（文本节点不能直接比较）
+    for (const child of flatNew) {
+        if (
+            child instanceof HTMLElement ||
+            child instanceof SVGElement ||
+            child instanceof DocumentFragment
+        ) {
+            newChildSet.add(child);
+            // 同时收集 cache key 到 Map，用于匹配（即使元素引用不同，cache key 相同也认为是同一个元素）
+            // 注意：DocumentFragment 没有 cache key，只能通过引用匹配
+            if (child instanceof HTMLElement || child instanceof SVGElement) {
+                const cacheKey = getElementCacheKey(child);
+                if (cacheKey) {
+                    // 如果 cache key 已存在，保留最新的元素（newChild）
+                    newChildCacheKeyMap.set(cacheKey, child);
+                }
+            }
+        }
+    }
+
+    // 第一步：处理重复的 cache key（如果 DOM 中有多个元素具有相同的 cache key，只保留 newChild）
+    // 注意：需要从后往前遍历，避免在循环中修改 DOM 导致索引问题
+    // 关键：这个步骤在"更新现有子节点"循环之后执行，所以需要处理那些在"更新现有子节点"循环中没有处理的重复元素
+    const processedCacheKeys = new Set<string>();
+    // 构建 newChild 到其在 flatNew 中索引的映射，用于确定正确位置
+    const newChildToIndexMap = new Map<HTMLElement | SVGElement, number>();
+    for (let i = 0; i < flatNew.length; i++) {
+        const child = flatNew[i];
+        if (child instanceof HTMLElement || child instanceof SVGElement) {
+            newChildToIndexMap.set(child, i);
+        }
+    }
+
+    for (let i = element.childNodes.length - 1; i >= 0; i--) {
+        const child = element.childNodes[i];
+        if (child instanceof HTMLElement || child instanceof SVGElement) {
+            // 关键修复：跳过应该保留的元素（第三方库注入的元素）
+            if (shouldPreserveElement(child)) {
+                continue;
+            }
+            const cacheKey = getElementCacheKey(child);
+            if (
+                cacheKey &&
+                newChildCacheKeyMap.has(cacheKey) &&
+                !processedCacheKeys.has(cacheKey)
+            ) {
+                processedCacheKeys.add(cacheKey);
+                const newChild = newChildCacheKeyMap.get(cacheKey)!;
+                // 如果 child 不是 newChild，说明是旧元素，应该被移除或替换
+                if (child !== newChild) {
+                    // 如果 newChild 已经在 DOM 中，移除旧元素
+                    if (newChild.parentNode === element) {
+                        // newChild 已经在 DOM 中，移除旧元素
+                        // 注意：newChild 已经在 DOM 中，所以不需要再次添加
+                        // 但需要确保 newChild 在正确的位置（通过 replaceChild 移动到旧元素的位置）
+                        // 这样可以确保 newChild 在正确的位置，而不是在错误的位置
+                        // 但是，如果 newChild 在 child 之后，replaceChild 会先移除 newChild，然后替换 child
+                        // 这会导致 newChild 移动到 child 的位置，这是正确的
+                        // 如果 newChild 在 child 之前，replaceChild 也会将 newChild 移动到 child 的位置
+                        // 所以，无论 newChild 在哪里，replaceChild 都会将其移动到 child 的位置
+                        element.replaceChild(newChild, child);
+                    } else {
+                        // newChild 不在 DOM 中，替换旧元素
+                        element.replaceChild(newChild, child);
+                    }
+                } else {
+                    // child === newChild，说明是同一个元素，不需要处理
+                    // 但需要确保它在正确的位置（这应该在"更新现有子节点"循环中处理）
+                }
+            }
+        }
+    }
+
+    // 第二步：移除不在 newChildren 中的元素
+    for (let i = 0; i < element.childNodes.length; i++) {
         const child = element.childNodes[i];
-        if (!shouldPreserveElement(child)) {
-            // 只有不应该保留的节点才添加到移除列表
-            nodesToRemove.push(child);
+
+        // 跳过应该保留的元素（第三方库注入的元素）
+        if (shouldPreserveElement(child)) {
+            continue;
+        }
+
+        // 跳过已经在 newChildren 中的元素（通过元素引用或 cache key 匹配）
+        if (child instanceof HTMLElement || child instanceof SVGElement) {
+            // 方法 1: 直接元素引用匹配
+            if (newChildSet.has(child)) {
+                continue;
+            }
+            // 方法 2: cache key 匹配（用于处理语言切换等场景，元素引用可能不同但 cache key 相同）
+            const cacheKey = getElementCacheKey(child);
+            if (cacheKey && newChildCacheKeyMap.has(cacheKey)) {
+                // 已经在第一步处理过了，跳过
+                continue;
+            }
+        } else if (child instanceof DocumentFragment) {
+            // DocumentFragment 只能通过引用匹配
+            if (newChildSet.has(child)) {
+                continue;
+            }
         }
-        // 如果应该保留，跳过（不添加到移除列表）
+
+        // 只有不应该保留且不在 newChildren 中的节点才添加到移除列表
+        nodesToRemove.push(child);
     }
 
     // 统一移除（从后往前移除，避免索引变化）
@@ -363,15 +617,17 @@ export function updateElement(
     const oldProps = (oldMetadata?.props as Record<string, unknown>) || null;
     const oldChildren = (oldMetadata?.children as JSXChildren[]) || [];
 
+    // 关键修复：在更新 DOM 之前先保存新的元数据
+    // 这样可以防止竞态条件：如果在更新过程中触发了另一个渲染，
+    // 新渲染会读取到正确的元数据，而不是过时的数据
+    cacheManager.setMetadata(element, {
+        props: newProps || {},
+        children: newChildren,
+    });
+
     // 更新 props
     updateProps(element, oldProps, newProps, tag);
 
     // 更新 children
     updateChildren(element, oldChildren, newChildren);
-
-    // 保存新的元数据
-    cacheManager.setMetadata(element, {
-        props: newProps || {},
-        children: newChildren,
-    });
 }

package/src/web-component.ts

@@ -12,6 +12,7 @@ import { h, type JSXChildren } from "./jsx-factory";
 import { StyleManager } from "./styles/style-manager";
 import { BaseComponent, type BaseComponentConfig } from "./base-component";
 import { RenderContext } from "./render-context";
+import { shouldPreserveElement } from "./utils/element-marking";
 import { createLogger } from "@wsxjs/wsx-logger";
 
 const logger = createLogger("WebComponent");
@@ -100,7 +101,9 @@ export abstract class WebComponent extends BaseComponent {
                 // 渲染JSX内容到Shadow DOM
                 // render() 应该返回包含 slot 元素的内容（如果需要）
                 // 浏览器会自动将 Light DOM 中的内容分配到 slot
-                const content = this.render();
+                // 关键修复：使用 RenderContext.runInContext() 确保 h() 能够获取上下文
+                // 否则，首次渲染时创建的元素不会被标记 __wsxCacheKey，导致重复元素问题
+                const content = RenderContext.runInContext(this, () => this.render());
                 this.shadowRoot.appendChild(content);
             }
 
@@ -212,10 +215,24 @@ export abstract class WebComponent extends BaseComponent {
                 // 添加新内容
                 this.shadowRoot.appendChild(content);
 
-                // 移除旧内容
-                const oldChildren = Array.from(this.shadowRoot.children).filter(
-                    (child) => child !== content
-                );
+                // 移除旧内容（保留样式元素和未标记元素）
+                // 关键修复：使用 shouldPreserveElement() 来保护第三方库注入的元素
+                const oldChildren = Array.from(this.shadowRoot.children).filter((child) => {
+                    // 保留新添加的内容
+                    if (child === content) {
+                        return false;
+                    }
+                    // 保留样式元素
+                    if (child instanceof HTMLStyleElement) {
+                        return false;
+                    }
+                    // 保留未标记的元素（第三方库注入的元素、自定义元素）
+                    // 这是 RFC 0037 Phase 5 的核心：保护未标记元素
+                    if (shouldPreserveElement(child)) {
+                        return false;
+                    }
+                    return true;
+                });
                 oldChildren.forEach((child) => child.remove());
 
                 // 恢复焦点状态