@wsxjs/wsx-core 0.0.21 → 0.0.22

package/dist/jsx.js

@@ -170,6 +170,10 @@ var CACHE_KEY_PROP = "__wsxCacheKey";
 function markElement(element, cacheKey) {
   element[CACHE_KEY_PROP] = cacheKey;
 }
+function getElementCacheKey(element) {
+  const key = element[CACHE_KEY_PROP];
+  return key !== void 0 ? String(key) : null;
+}
 function isCreatedByH(element) {
   if (!(element instanceof HTMLElement || element instanceof SVGElement)) {
     return false;
@@ -717,9 +721,18 @@ function updateProps(element, oldProps, newProps, tag) {
     if (oldValue === newValue) {
       continue;
     }
+    if (oldValue === void 0) {
+      applySingleProp2(element, key, newValue, tag, isSVG);
+      continue;
+    }
     if (typeof oldValue === "object" && oldValue !== null && typeof newValue === "object" && newValue !== null) {
-      if (JSON.stringify(oldValue) === JSON.stringify(newValue)) {
-        continue;
+      try {
+        const oldJson = JSON.stringify(oldValue);
+        const newJson = JSON.stringify(newValue);
+        if (oldJson === newJson) {
+          continue;
+        }
+      } catch {
       }
     }
     applySingleProp2(element, key, newValue, tag, isSVG);
@@ -729,68 +742,132 @@ function updateChildren(element, oldChildren, newChildren) {
   const flatOld = flattenChildren(oldChildren);
   const flatNew = flattenChildren(newChildren);
   const minLength = Math.min(flatOld.length, flatNew.length);
+  let domIndex = 0;
   for (let i = 0; i < minLength; i++) {
     const oldChild = flatOld[i];
     const newChild = flatNew[i];
+    let oldNode = null;
+    if (oldChild instanceof HTMLElement || oldChild instanceof SVGElement) {
+      if (oldChild.parentNode === element) {
+        if (!shouldPreserveElement(oldChild)) {
+          oldNode = oldChild;
+        }
+      } else {
+        const oldCacheKey = getElementCacheKey(oldChild);
+        if (oldCacheKey) {
+          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;
+              }
+            }
+          }
+        }
+      }
+    } 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) {
+          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);
+        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) {
+      if (oldNode && shouldPreserveElement(oldNode)) {
+        continue;
+      }
       if (newChild === oldChild) {
         continue;
       } else if (newChild instanceof HTMLElement || newChild instanceof SVGElement) {
-        const oldNode = element.childNodes[i];
+        const oldCacheKey = oldNode && (oldNode instanceof HTMLElement || oldNode instanceof SVGElement) ? getElementCacheKey(oldNode) : null;
+        const newCacheKey = getElementCacheKey(newChild);
+        const hasSameCacheKey = oldCacheKey && newCacheKey && oldCacheKey === newCacheKey;
         if (oldNode) {
           if (!shouldPreserveElement(oldNode)) {
             if (oldNode !== newChild) {
-              element.replaceChild(newChild, oldNode);
+              if (newChild.parentNode === element) {
+                if (hasSameCacheKey) {
+                  if (newChild !== oldNode) {
+                    element.replaceChild(newChild, oldNode);
+                  }
+                } else {
+                  element.removeChild(newChild);
+                  element.replaceChild(newChild, oldNode);
+                }
+              } else if (newChild.parentNode) {
+                newChild.parentNode.removeChild(newChild);
+                element.replaceChild(newChild, oldNode);
+              } else {
+                element.replaceChild(newChild, oldNode);
+              }
             }
           } else {
             if (newChild.parentNode !== element) {
-              element.appendChild(newChild);
+              if (newChild.parentNode) {
+                newChild.parentNode.removeChild(newChild);
+              }
+              element.insertBefore(newChild, oldNode.nextSibling);
             }
           }
         } else {
           if (newChild.parentNode !== element) {
+            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);
         }
       }
     }
@@ -803,20 +880,85 @@ function updateChildren(element, oldChildren, newChildren) {
     if (typeof newChild === "string" || typeof newChild === "number") {
       element.appendChild(document.createTextNode(String(newChild)));
     } else if (newChild instanceof HTMLElement || newChild instanceof SVGElement) {
-      if (newChild.parentNode !== element) {
-        element.appendChild(newChild);
+      if (newChild.parentNode === element) {
+        const currentIndex = Array.from(element.childNodes).indexOf(newChild);
+        const expectedIndex = element.childNodes.length - 1;
+        if (currentIndex !== expectedIndex) {
+          element.removeChild(newChild);
+          element.appendChild(newChild);
+        }
+        continue;
+      } else if (newChild.parentNode) {
+        newChild.parentNode.removeChild(newChild);
       }
+      element.appendChild(newChild);
     } else if (newChild instanceof DocumentFragment) {
       element.appendChild(newChild);
     }
   }
   const nodesToRemove = [];
-  for (let i = flatNew.length; i < element.childNodes.length; i++) {
+  const newChildSet = /* @__PURE__ */ new Set();
+  const newChildCacheKeyMap = /* @__PURE__ */ new Map();
+  for (const child of flatNew) {
+    if (child instanceof HTMLElement || child instanceof SVGElement || child instanceof DocumentFragment) {
+      newChildSet.add(child);
+      if (child instanceof HTMLElement || child instanceof SVGElement) {
+        const cacheKey = getElementCacheKey(child);
+        if (cacheKey) {
+          newChildCacheKeyMap.set(cacheKey, child);
+        }
+      }
+    }
+  }
+  const processedCacheKeys = /* @__PURE__ */ new Set();
+  const newChildToIndexMap = /* @__PURE__ */ new Map();
+  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 (!shouldPreserveElement(child)) {
-      nodesToRemove.push(child);
+    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);
+        if (child !== newChild) {
+          if (newChild.parentNode === element) {
+            element.replaceChild(newChild, child);
+          } else {
+            element.replaceChild(newChild, child);
+          }
+        } else {
+        }
+      }
     }
   }
+  for (let i = 0; i < element.childNodes.length; i++) {
+    const child = element.childNodes[i];
+    if (shouldPreserveElement(child)) {
+      continue;
+    }
+    if (child instanceof HTMLElement || child instanceof SVGElement) {
+      if (newChildSet.has(child)) {
+        continue;
+      }
+      const cacheKey = getElementCacheKey(child);
+      if (cacheKey && newChildCacheKeyMap.has(cacheKey)) {
+        continue;
+      }
+    } else if (child instanceof DocumentFragment) {
+      if (newChildSet.has(child)) {
+        continue;
+      }
+    }
+    nodesToRemove.push(child);
+  }
   for (let i = nodesToRemove.length - 1; i >= 0; i--) {
     const node = nodesToRemove[i];
     if (node.parentNode === element) {
@@ -828,12 +970,12 @@ function updateElement(element, newProps, newChildren, tag, cacheManager) {
   const oldMetadata = cacheManager.getMetadata(element);
   const oldProps = oldMetadata?.props || null;
   const oldChildren = oldMetadata?.children || [];
-  updateProps(element, oldProps, newProps, tag);
-  updateChildren(element, oldChildren, newChildren);
   cacheManager.setMetadata(element, {
     props: newProps || {},
     children: newChildren
   });
+  updateProps(element, oldProps, newProps, tag);
+  updateChildren(element, oldChildren, newChildren);
 }
 
 // src/jsx-factory.ts
@@ -847,7 +989,36 @@ function h(tag, props = {}, ...children) {
   if (context && cacheManager) {
     return tryUseCacheOrCreate(tag, props, children, context, cacheManager);
   }
-  return createElementWithPropsAndChildren(tag, props, children);
+  try {
+    const nodeEnv = typeof globalThis.process !== "undefined" && // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    globalThis.process.env?.NODE_ENV;
+    if (nodeEnv === "development") {
+      if (!context) {
+        logger3.debug(
+          `h() called without render context. Tag: "${tag}", ComponentId: "${getComponentId()}"`,
+          {
+            tag,
+            props: props ? Object.keys(props) : [],
+            hasCacheManager: !!cacheManager
+          }
+        );
+      } else if (!cacheManager) {
+        logger3.debug(
+          `h() called with context but no cache manager. Tag: "${tag}", Component: "${context.constructor.name}"`,
+          {
+            tag,
+            component: context.constructor.name
+          }
+        );
+      }
+    }
+  } catch {
+  }
+  const element = createElementWithPropsAndChildren(tag, props, children);
+  const componentId = getComponentId();
+  const cacheKey = generateCacheKey(tag, props, componentId, context || void 0);
+  markElement(element, cacheKey);
+  return element;
 }
 function tryUseCacheOrCreate(tag, props, children, context, cacheManager) {
   try {
@@ -857,6 +1028,14 @@ function tryUseCacheOrCreate(tag, props, children, context, cacheManager) {
     if (cachedElement) {
       const element2 = cachedElement;
       updateElement(element2, props, children, tag, cacheManager);
+      const isCustomElement = tag.includes("-") && customElements.get(tag);
+      if (isCustomElement && element2.isConnected) {
+        const parent = element2.parentNode;
+        if (parent) {
+          parent.removeChild(element2);
+          parent.appendChild(element2);
+        }
+      }
       return element2;
     }
     const element = createElementWithPropsAndChildren(tag, props, children);
@@ -880,7 +1059,12 @@ function handleCacheError(error, tag, props, children) {
     }
   } catch {
   }
-  return createElementWithPropsAndChildren(tag, props, children);
+  const element = createElementWithPropsAndChildren(tag, props, children);
+  const context = RenderContext.getCurrentComponent();
+  const componentId = getComponentId();
+  const cacheKey = generateCacheKey(tag, props, componentId, context || void 0);
+  markElement(element, cacheKey);
+  return element;
 }
 function Fragment(_props, children) {
   const fragment = document.createDocumentFragment();

package/dist/jsx.mjs

@@ -1,7 +1,7 @@
 import {
   Fragment,
   h
-} from "./chunk-AR3DIDLV.mjs";
+} from "./chunk-OXFZ575O.mjs";
 export {
   Fragment,
   h

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wsxjs/wsx-core",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "description": "Core WSXJS - Web Components with JSX syntax",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -48,7 +48,7 @@
     "custom-elements"
   ],
   "dependencies": {
-    "@wsxjs/wsx-logger": "0.0.21"
+    "@wsxjs/wsx-logger": "0.0.22"
   },
   "devDependencies": {
     "tsup": "^8.0.0",

package/src/jsx-factory.ts

@@ -56,7 +56,44 @@ export function h(
     }
 
     // 无上下文：使用旧逻辑（向后兼容）
-    return createElementWithPropsAndChildren(tag, props, children);
+    // 关键修复：即使没有上下文，也要标记元素，以便框架能够正确管理它
+    // 否则，未标记的元素会被 shouldPreserveElement() 保留，导致重复元素
+    // 调试日志：记录上下文丢失的情况，帮助定位问题（仅在开发环境输出）
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const nodeEnv = (typeof (globalThis as any).process !== "undefined" &&
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            (globalThis as any).process.env?.NODE_ENV) as string | undefined;
+        if (nodeEnv === "development") {
+            if (!context) {
+                logger.debug(
+                    `h() called without render context. Tag: "${tag}", ComponentId: "${getComponentId()}"`,
+                    {
+                        tag,
+                        props: props ? Object.keys(props) : [],
+                        hasCacheManager: !!cacheManager,
+                    }
+                );
+            } else if (!cacheManager) {
+                logger.debug(
+                    `h() called with context but no cache manager. Tag: "${tag}", Component: "${context.constructor.name}"`,
+                    {
+                        tag,
+                        component: context.constructor.name,
+                    }
+                );
+            }
+        }
+    } catch {
+        // 忽略环境变量检查错误
+    }
+
+    const element = createElementWithPropsAndChildren(tag, props, children);
+    // 生成一个简单的 cache key（即使没有上下文）
+    const componentId = getComponentId();
+    const cacheKey = generateCacheKey(tag, props, componentId, context || undefined);
+    markElement(element, cacheKey);
+    return element;
 }
 
 /**
@@ -79,7 +116,28 @@ function tryUseCacheOrCreate(
             // 缓存键已经确保了唯一性（componentId + tag + position/key/index）
             // 不需要再检查标签名（可能导致错误复用）
             const element = cachedElement as HTMLElement | SVGElement;
+
             updateElement(element, props, children, tag, cacheManager);
+
+            // 关键修复（RFC-0039）：检测自定义元素（Web Components）并重新触发生命周期
+            // 自定义元素有 connectedCallback 和 disconnectedCallback 方法
+            // 当它们被缓存复用时，需要模拟断开/重连以触发初始化逻辑
+            // 这确保了即使组件缺少 super.onConnected() 调用，框架层面也能保证正确的生命周期
+            const isCustomElement = tag.includes("-") && customElements.get(tag);
+            if (isCustomElement && element.isConnected) {
+                // 临时从 DOM 断开以触发 disconnectedCallback
+                const parent = element.parentNode;
+                if (parent) {
+                    parent.removeChild(element);
+                    // disconnectedCallback 会在 removeChild 时自动调用
+
+                    // 立即重新添加以触发 connectedCallback
+                    // 这确保生命周期在返回元素之前就已经完成
+                    parent.appendChild(element);
+                    // connectedCallback 会在 appendChild 时自动调用
+                }
+            }
+
             return element;
         }
 
@@ -120,7 +178,13 @@ function handleCacheError(
     } catch {
         // 忽略环境变量检查错误
     }
-    return createElementWithPropsAndChildren(tag, props, children);
+    // 关键修复：即使缓存失败，也要标记元素，以便框架能够正确管理它
+    const element = createElementWithPropsAndChildren(tag, props, children);
+    const context = RenderContext.getCurrentComponent();
+    const componentId = getComponentId();
+    const cacheKey = generateCacheKey(tag, props, componentId, context || undefined);
+    markElement(element, cacheKey);
+    return element;
 }
 
 /**

package/src/light-component.ts

@@ -10,6 +10,7 @@
 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";
 
 const logger = createLogger("LightComponent");
@@ -222,7 +223,8 @@ export abstract class LightComponent extends BaseComponent {
                 // 先添加新内容
                 this.appendChild(content);
 
-                // 移除旧内容（保留 JSX children 和样式元素）
+                // 移除旧内容（保留 JSX children、样式元素和未标记元素）
+                // 关键修复：使用 shouldPreserveElement() 来保护手动创建的元素（如第三方库注入的元素）
                 const oldChildren = Array.from(this.children).filter((child) => {
                     // 保留新添加的内容
                     if (child === content) {
@@ -236,10 +238,15 @@ export abstract class LightComponent extends BaseComponent {
                     ) {
                         return false;
                     }
-                    // 保留 JSX children（关键修复）
+                    // 保留 JSX children（通过 JSX factory 直接添加的 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());