@wsxjs/wsx-core 0.0.22 → 0.0.24

package/dist/index.js

@@ -112,6 +112,7 @@ var _RenderContext = class _RenderContext {
    * @param fn The function to execute (usually the render method).
    */
   static runInContext(component, fn) {
+    resetCounterForNewRenderCycle(component);
     const prev = _RenderContext.current;
     _RenderContext.current = component;
     try {
@@ -137,21 +138,20 @@ _RenderContext.current = null;
 var RenderContext = _RenderContext;
 
 // src/utils/cache-key.ts
-var POSITION_ID_KEY = "__wsxPositionId";
 var INDEX_KEY = "__wsxIndex";
 var componentElementCounters = /* @__PURE__ */ new WeakMap();
 var componentIdCache = /* @__PURE__ */ new WeakMap();
 function generateCacheKey(tag, props, componentId, component) {
-  const positionId = props?.[POSITION_ID_KEY];
   const userKey = props?.key;
   const index = props?.[INDEX_KEY];
+  const positionId = props?.__wsxPositionId;
   if (userKey !== void 0 && userKey !== null) {
     return `${componentId}:${tag}:key-${String(userKey)}`;
   }
   if (index !== void 0 && index !== null) {
     return `${componentId}:${tag}:idx-${String(index)}`;
   }
-  if (positionId !== void 0 && positionId !== null && positionId !== "no-id") {
+  if (positionId !== void 0 && positionId !== null) {
     return `${componentId}:${tag}:${String(positionId)}`;
   }
   if (component) {
@@ -162,6 +162,9 @@ function generateCacheKey(tag, props, componentId, component) {
   }
   return `${componentId}:${tag}:fallback-${Date.now()}-${Math.random()}`;
 }
+function resetCounterForNewRenderCycle(component) {
+  componentElementCounters.set(component, 0);
+}
 function getComponentId() {
   const component = RenderContext.getCurrentComponent();
   if (component) {
@@ -579,7 +582,9 @@ function applySingleProp(element, key, value, tag, isSVG) {
   }
   if (key.startsWith("on") && typeof value === "function") {
     const eventName = key.slice(2).toLowerCase();
+    const listenerKey = `__wsxListener_${eventName}`;
     element.addEventListener(eventName, value);
+    element[listenerKey] = value;
     return;
   }
   if (typeof value === "boolean") {
@@ -633,10 +638,269 @@ function createElementWithPropsAndChildren(tag, props, children) {
   return element;
 }
 
+// src/utils/update-children-helpers.ts
+function collectPreservedElements(element) {
+  const preserved = [];
+  for (let i = 0; i < element.childNodes.length; i++) {
+    const child = element.childNodes[i];
+    if (shouldPreserveElement(child)) {
+      preserved.push(child);
+    }
+  }
+  return preserved;
+}
+function findDOMNodeByReference(oldChild, parent) {
+  if (oldChild.parentNode === parent && !shouldPreserveElement(oldChild)) {
+    return oldChild;
+  }
+  return null;
+}
+function findDOMNodeByCacheKey(cacheKey, parent) {
+  for (let i = 0; i < parent.childNodes.length; i++) {
+    const child = parent.childNodes[i];
+    if (child instanceof HTMLElement || child instanceof SVGElement) {
+      if (shouldPreserveElement(child)) continue;
+      if (getElementCacheKey(child) === cacheKey) {
+        return child;
+      }
+    }
+  }
+  return null;
+}
+function findElementNode(oldChild, parent) {
+  const byRef = findDOMNodeByReference(oldChild, parent);
+  if (byRef) return byRef;
+  const cacheKey = getElementCacheKey(oldChild);
+  if (cacheKey) {
+    return findDOMNodeByCacheKey(cacheKey, parent);
+  }
+  return null;
+}
+function findTextNode(parent, domIndex) {
+  while (domIndex.value < parent.childNodes.length) {
+    const node = parent.childNodes[domIndex.value];
+    if (node.nodeType === Node.TEXT_NODE && node.parentNode === parent) {
+      const textNode = node;
+      domIndex.value++;
+      return textNode;
+    }
+    domIndex.value++;
+  }
+  return null;
+}
+function updateOrCreateTextNode(parent, oldNode, newText) {
+  if (oldNode && oldNode.nodeType === Node.TEXT_NODE) {
+    if (oldNode.textContent !== newText) {
+      oldNode.textContent = newText;
+    }
+    return oldNode;
+  } else {
+    if (!oldNode) {
+      for (let i = 0; i < parent.childNodes.length; i++) {
+        const node = parent.childNodes[i];
+        if (node.nodeType === Node.TEXT_NODE && node.parentNode === parent && node.textContent === newText) {
+          return node;
+        }
+      }
+    }
+    const newTextNode = document.createTextNode(newText);
+    if (oldNode && !shouldPreserveElement(oldNode)) {
+      parent.replaceChild(newTextNode, oldNode);
+    } else {
+      parent.insertBefore(newTextNode, oldNode || null);
+    }
+    return newTextNode;
+  }
+}
+function removeNodeIfNotPreserved(parent, node) {
+  if (node && !shouldPreserveElement(node) && node.parentNode === parent) {
+    parent.removeChild(node);
+  }
+}
+function replaceOrInsertElement(parent, newChild, oldNode) {
+  const targetNextSibling = oldNode && shouldPreserveElement(oldNode) ? oldNode : oldNode?.nextSibling || null;
+  replaceOrInsertElementAtPosition(parent, newChild, oldNode, targetNextSibling);
+}
+function replaceOrInsertElementAtPosition(parent, newChild, oldNode, targetNextSibling) {
+  if (newChild.parentNode && newChild.parentNode !== parent) {
+    newChild.parentNode.removeChild(newChild);
+  }
+  const isInCorrectPosition = newChild.parentNode === parent && newChild.nextSibling === targetNextSibling;
+  if (isInCorrectPosition) {
+    return;
+  }
+  if (newChild.parentNode === parent) {
+    parent.insertBefore(newChild, targetNextSibling);
+    return;
+  }
+  if (oldNode && oldNode.parentNode === parent && !shouldPreserveElement(oldNode)) {
+    if (oldNode !== newChild) {
+      parent.replaceChild(newChild, oldNode);
+    }
+  } else {
+    if (newChild.parentNode === parent) {
+      return;
+    }
+    const newChildCacheKey = getElementCacheKey(newChild);
+    if (!newChildCacheKey) {
+      const newChildContent = newChild.textContent || "";
+      const newChildTag = newChild.tagName.toLowerCase();
+      for (let i = 0; i < parent.childNodes.length; i++) {
+        const existingNode = parent.childNodes[i];
+        if (existingNode instanceof HTMLElement || existingNode instanceof SVGElement) {
+          const existingCacheKey = getElementCacheKey(existingNode);
+          if (!existingCacheKey && existingNode.tagName.toLowerCase() === newChildTag && existingNode.textContent === newChildContent && existingNode !== newChild) {
+            return;
+          }
+        }
+      }
+    }
+    parent.insertBefore(newChild, targetNextSibling);
+  }
+}
+function appendNewChild(parent, child, processedNodes) {
+  if (child === null || child === void 0 || child === false) {
+    return;
+  }
+  if (typeof child === "string" || typeof child === "number") {
+    const newTextNode = document.createTextNode(String(child));
+    parent.appendChild(newTextNode);
+    if (processedNodes) {
+      processedNodes.add(newTextNode);
+    }
+  } else if (child instanceof HTMLElement || child instanceof SVGElement) {
+    if (child.parentNode === parent) {
+      return;
+    }
+    if (child.parentNode && child.parentNode !== parent) {
+      child.parentNode.removeChild(child);
+    }
+    parent.appendChild(child);
+    if (processedNodes) {
+      processedNodes.add(child);
+    }
+  } else if (child instanceof DocumentFragment) {
+    parent.appendChild(child);
+  }
+}
+function buildNewChildrenMaps(flatNew) {
+  const elementSet = /* @__PURE__ */ new Set();
+  const cacheKeyMap = /* @__PURE__ */ new Map();
+  for (const child of flatNew) {
+    if (child instanceof HTMLElement || child instanceof SVGElement || child instanceof DocumentFragment) {
+      elementSet.add(child);
+      if (child instanceof HTMLElement || child instanceof SVGElement) {
+        const cacheKey = getElementCacheKey(child);
+        if (cacheKey) {
+          cacheKeyMap.set(cacheKey, child);
+        }
+      }
+    }
+  }
+  return { elementSet, cacheKeyMap };
+}
+function shouldRemoveNode(node, elementSet, cacheKeyMap, processedNodes) {
+  if (shouldPreserveElement(node)) {
+    return false;
+  }
+  if (node.nodeType === Node.TEXT_NODE && processedNodes && processedNodes.has(node)) {
+    return false;
+  }
+  if (node.nodeType === Node.TEXT_NODE && processedNodes) {
+    let parent = node.parentNode;
+    while (parent) {
+      if (processedNodes.has(parent) && parent.parentNode) {
+        return false;
+      }
+      parent = parent.parentNode;
+    }
+  }
+  if (node instanceof HTMLElement || node instanceof SVGElement || node instanceof DocumentFragment) {
+    if (elementSet.has(node)) {
+      return false;
+    }
+    if (node instanceof HTMLElement || node instanceof SVGElement) {
+      const cacheKey = getElementCacheKey(node);
+      if (cacheKey && cacheKeyMap.has(cacheKey)) {
+        return false;
+      }
+    }
+  }
+  return true;
+}
+function deduplicateCacheKeys(parent, cacheKeyMap) {
+  const processedCacheKeys = /* @__PURE__ */ new Set();
+  for (let i = parent.childNodes.length - 1; i >= 0; i--) {
+    const child = parent.childNodes[i];
+    if (child instanceof HTMLElement || child instanceof SVGElement) {
+      if (shouldPreserveElement(child)) {
+        continue;
+      }
+      const cacheKey = getElementCacheKey(child);
+      if (cacheKey && cacheKeyMap.has(cacheKey) && !processedCacheKeys.has(cacheKey)) {
+        processedCacheKeys.add(cacheKey);
+        const newChild = cacheKeyMap.get(cacheKey);
+        if (child !== newChild) {
+          parent.replaceChild(newChild, child);
+        }
+      } else if (cacheKey && cacheKeyMap.has(cacheKey) && processedCacheKeys.has(cacheKey)) {
+        const newChild = cacheKeyMap.get(cacheKey);
+        if (child !== newChild) {
+          parent.removeChild(child);
+        }
+      }
+    }
+  }
+}
+function collectNodesToRemove(parent, elementSet, cacheKeyMap, processedNodes) {
+  const nodesToRemove = [];
+  for (let i = 0; i < parent.childNodes.length; i++) {
+    const node = parent.childNodes[i];
+    if (shouldRemoveNode(node, elementSet, cacheKeyMap, processedNodes)) {
+      nodesToRemove.push(node);
+    }
+  }
+  return nodesToRemove;
+}
+function removeNodes(parent, nodes, cacheManager) {
+  for (let i = nodes.length - 1; i >= 0; i--) {
+    const node = nodes[i];
+    if (node.parentNode === parent) {
+      if (cacheManager && (node instanceof HTMLElement || node instanceof SVGElement)) {
+        const metadata = cacheManager.getMetadata(node);
+        const refCallback = metadata?.ref;
+        if (typeof refCallback === "function") {
+          try {
+            refCallback(null);
+          } catch {
+          }
+        }
+      }
+      parent.removeChild(node);
+    }
+  }
+}
+function reinsertPreservedElements(parent, preservedElements) {
+  for (const element of preservedElements) {
+    if (element.parentNode !== parent) {
+      parent.appendChild(element);
+    }
+  }
+}
+function flattenChildrenSafe(children) {
+  return flattenChildren(children);
+}
+
 // src/utils/element-update.ts
 function removeProp(element, key, oldValue, tag) {
   const isSVG = shouldUseSVGNamespace(tag);
   if (key === "ref") {
+    if (typeof oldValue === "function") {
+      try {
+        oldValue(null);
+      } catch {
+      }
+    }
     return;
   }
   if (key === "className" || key === "class") {
@@ -652,6 +916,13 @@ function removeProp(element, key, oldValue, tag) {
     return;
   }
   if (key.startsWith("on") && typeof oldValue === "function") {
+    const eventName = key.slice(2).toLowerCase();
+    const listenerKey = `__wsxListener_${eventName}`;
+    const savedListener = element[listenerKey];
+    if (savedListener) {
+      element.removeEventListener(eventName, savedListener);
+      delete element[listenerKey];
+    }
     return;
   }
   if (key === "value") {
@@ -695,7 +966,13 @@ function applySingleProp2(element, key, value, tag, isSVG) {
   }
   if (key.startsWith("on") && typeof value === "function") {
     const eventName = key.slice(2).toLowerCase();
+    const listenerKey = `__wsxListener_${eventName}`;
+    const oldListener = element[listenerKey];
+    if (oldListener) {
+      element.removeEventListener(eventName, oldListener);
+    }
     element.addEventListener(eventName, value);
+    element[listenerKey] = value;
     return;
   }
   if (typeof value === "boolean") {
@@ -750,49 +1027,36 @@ function updateProps(element, oldProps, newProps, tag) {
     applySingleProp2(element, key, newValue, tag, isSVG);
   }
 }
-function updateChildren(element, oldChildren, newChildren) {
-  const flatOld = flattenChildren(oldChildren);
-  const flatNew = flattenChildren(newChildren);
+function updateChildren(element, oldChildren, newChildren, _cacheManager) {
+  const flatOld = flattenChildrenSafe(oldChildren);
+  const flatNew = flattenChildrenSafe(newChildren);
+  const preservedElements = collectPreservedElements(element);
   const minLength = Math.min(flatOld.length, flatNew.length);
-  let domIndex = 0;
+  const domIndex = { value: 0 };
+  const processedNodes = /* @__PURE__ */ new Set();
   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;
-              }
-            }
-          }
+      oldNode = findElementNode(oldChild, element);
+      if (oldNode && oldNode.parentNode === element) {
+        const nodeIndex = Array.from(element.childNodes).indexOf(oldNode);
+        if (nodeIndex !== -1 && nodeIndex >= domIndex.value) {
+          domIndex.value = nodeIndex + 1;
         }
       }
     } 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++;
+      oldNode = findTextNode(element, domIndex);
+      if (!oldNode && element.childNodes.length > 0) {
+        const oldText = String(oldChild);
+        for (let j = domIndex.value; j < element.childNodes.length; j++) {
+          const node = element.childNodes[j];
+          if (node.nodeType === Node.TEXT_NODE && node.parentNode === element && node.textContent === oldText) {
+            oldNode = node;
+            domIndex.value = j + 1;
+            break;
+          }
         }
       }
     }
@@ -801,27 +1065,20 @@ function updateChildren(element, oldChildren, newChildren) {
         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;
+        if (needsUpdate) {
+          const updatedNode = updateOrCreateTextNode(element, oldNode, newText);
+          if (updatedNode && !processedNodes.has(updatedNode)) {
+            processedNodes.add(updatedNode);
+          }
         } else {
-          const newTextNode = document.createTextNode(newText);
-          if (oldNode && !shouldPreserveElement(oldNode)) {
-            element.replaceChild(newTextNode, oldNode);
-          } else {
-            element.insertBefore(newTextNode, oldNode || null);
+          if (oldNode && oldNode.parentNode === element) {
+            processedNodes.add(oldNode);
           }
         }
       } else {
-        if (oldNode && !shouldPreserveElement(oldNode)) {
-          element.removeChild(oldNode);
-        }
+        removeNodeIfNotPreserved(element, oldNode);
         if (newChild instanceof HTMLElement || newChild instanceof SVGElement) {
-          if (newChild.parentNode !== element) {
-            element.insertBefore(newChild, oldNode || null);
-          }
+          replaceOrInsertElement(element, newChild, oldNode);
         } else if (newChild instanceof DocumentFragment) {
           element.insertBefore(newChild, oldNode || null);
         }
@@ -830,54 +1087,48 @@ function updateChildren(element, oldChildren, newChildren) {
       if (oldNode && shouldPreserveElement(oldNode)) {
         continue;
       }
-      if (newChild === oldChild) {
-        continue;
-      } else if (newChild instanceof HTMLElement || newChild instanceof SVGElement) {
-        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) {
-              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) {
-              if (newChild.parentNode) {
-                newChild.parentNode.removeChild(newChild);
-              }
-              element.insertBefore(newChild, oldNode.nextSibling);
-            }
-          }
-        } else {
-          if (newChild.parentNode !== element) {
-            if (newChild.parentNode) {
-              newChild.parentNode.removeChild(newChild);
+      if (newChild instanceof HTMLElement || newChild instanceof SVGElement) {
+        let targetNextSibling = null;
+        let foundPreviousElement = false;
+        for (let j = i - 1; j >= 0; j--) {
+          const prevChild = flatNew[j];
+          if (prevChild instanceof HTMLElement || prevChild instanceof SVGElement) {
+            if (prevChild.parentNode === element) {
+              targetNextSibling = prevChild.nextSibling;
+              foundPreviousElement = true;
+              break;
             }
-            element.appendChild(newChild);
           }
         }
-      } else {
-        if (oldNode && !shouldPreserveElement(oldNode)) {
-          element.removeChild(oldNode);
+        if (!foundPreviousElement) {
+          const firstChild = Array.from(element.childNodes).find(
+            (node) => !shouldPreserveElement(node) && !processedNodes.has(node)
+          );
+          targetNextSibling = firstChild || null;
+        }
+        const isInCorrectPosition = newChild.parentNode === element && newChild.nextSibling === targetNextSibling;
+        if (newChild === oldChild && isInCorrectPosition) {
+          if (oldNode) processedNodes.add(oldNode);
+          processedNodes.add(newChild);
+          continue;
         }
+        const referenceNode = oldNode && oldNode.parentNode === element ? oldNode : null;
+        replaceOrInsertElementAtPosition(
+          element,
+          newChild,
+          referenceNode,
+          targetNextSibling
+        );
+        if (oldNode && oldNode !== newChild) {
+          processedNodes.delete(oldNode);
+        }
+        processedNodes.add(newChild);
+      } else {
+        removeNodeIfNotPreserved(element, oldNode);
         if (typeof newChild === "string" || typeof newChild === "number") {
           const newTextNode = document.createTextNode(String(newChild));
           element.insertBefore(newTextNode, oldNode?.nextSibling || null);
+          processedNodes.add(newTextNode);
         } else if (newChild instanceof DocumentFragment) {
           element.insertBefore(newChild, oldNode?.nextSibling || null);
         }
@@ -885,98 +1136,13 @@ function updateChildren(element, oldChildren, newChildren) {
     }
   }
   for (let i = minLength; i < flatNew.length; i++) {
-    const newChild = flatNew[i];
-    if (newChild === null || newChild === void 0 || newChild === false) {
-      continue;
-    }
-    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) {
-        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 = [];
-  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 (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) {
-      element.removeChild(node);
-    }
+    appendNewChild(element, flatNew[i], processedNodes);
   }
+  const { elementSet, cacheKeyMap } = buildNewChildrenMaps(flatNew);
+  deduplicateCacheKeys(element, cacheKeyMap);
+  const nodesToRemove = collectNodesToRemove(element, elementSet, cacheKeyMap, processedNodes);
+  removeNodes(element, nodesToRemove, _cacheManager);
+  reinsertPreservedElements(element, preservedElements);
 }
 function updateElement(element, newProps, newChildren, tag, cacheManager) {
   const oldMetadata = cacheManager.getMetadata(element);
@@ -987,7 +1153,7 @@ function updateElement(element, newProps, newChildren, tag, cacheManager) {
     children: newChildren
   });
   updateProps(element, oldProps, newProps, tag);
-  updateChildren(element, oldChildren, newChildren);
+  updateChildren(element, oldChildren, newChildren, cacheManager);
 }
 
 // src/jsx-factory.ts
@@ -1491,6 +1657,12 @@ var BaseComponent = class extends HTMLElement {
      * @internal
      */
     this._isRendering = false;
+    /**
+     * 已调度渲染标志（防止在同一事件循环中重复注册 requestAnimationFrame）
+     * 用于批量更新：同一事件循环中的多个状态变化只触发一次渲染
+     * @internal
+     */
+    this._hasScheduledRender = false;
     /**
      * 处理 blur 事件，在用户停止输入时执行待处理的重渲染
      * @internal
@@ -1597,6 +1769,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) {
@@ -1622,8 +1797,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) {
@@ -1880,6 +2063,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 = "";
@@ -1891,7 +2075,6 @@ var WebComponent = class extends BaseComponent {
         this.shadowRoot.appendChild(content);
       }
       this.initializeEventListeners();
-      this.onConnected?.();
       if (hasActualContent === false || hasErrorElement) {
         requestAnimationFrame(() => {
           this.onRendered?.();
@@ -1943,8 +2126,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;
@@ -1962,31 +2149,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) {
       logger6.error("Error in _rerender:", error);
       this.renderError(error);
@@ -2048,6 +2244,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) {
@@ -2065,7 +2262,6 @@ var LightComponent = class extends BaseComponent {
         }
       }
       this.initializeEventListeners();
-      this.onConnected?.();
       if (hasActualContent === false || hasErrorElement) {
         requestAnimationFrame(() => {
           this.onRendered?.();
@@ -2164,11 +2360,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);
           }
         }