@wsxjs/wsx-core 0.0.27 → 0.0.30

package/dist/index.js

@@ -32,6 +32,7 @@ __export(index_exports, {
   jsx: () => h,
   jsxs: () => h,
   logger: () => import_wsx_logger4.logger,
+  parseHTMLToNodes: () => parseHTMLToNodes,
   registerComponent: () => registerComponent,
   state: () => state
 });
@@ -44,6 +45,7 @@ function parseHTMLToNodes(html) {
   temp.innerHTML = html;
   return Array.from(temp.childNodes).map((node) => {
     if (node instanceof HTMLElement || node instanceof SVGElement) {
+      node.__wsxManaged = true;
       return node;
     } else {
       return node.textContent || "";
@@ -56,7 +58,13 @@ function isHTMLString(str) {
   const htmlTagPattern = /<[a-z][a-z0-9]*(\s[^>]*)?(\/>|>)/i;
   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;
 }
 function flattenChildren(children, skipHTMLDetection = false, depth = 0) {
   if (depth > 10) {
@@ -97,6 +105,17 @@ function flattenChildren(children, skipHTMLDetection = false, depth = 0) {
       } else {
         result.push(child);
       }
+    } else if (child instanceof DocumentFragment) {
+      const fragmentChildren = Array.from(child.childNodes);
+      for (const fragChild of fragmentChildren) {
+        if (fragChild instanceof HTMLElement || fragChild instanceof SVGElement) {
+          result.push(fragChild);
+        } else if (fragChild.nodeType === Node.TEXT_NODE) {
+          result.push(fragChild.textContent || "");
+        } else if (fragChild instanceof DocumentFragment) {
+          result.push(...flattenChildren([fragChild], skipHTMLDetection, depth + 1));
+        }
+      }
     } else {
       result.push(child);
     }
@@ -197,12 +216,12 @@ function isCreatedByH(element) {
 }
 function shouldPreserveElement(element) {
   if (!(element instanceof HTMLElement || element instanceof SVGElement)) {
-    return true;
+    return false;
   }
-  if (!isCreatedByH(element)) {
+  if (!isCreatedByH(element) && element.__wsxManaged !== true) {
     return true;
   }
-  if (element.hasAttribute("data-wsx-preserve")) {
+  if (element instanceof HTMLElement && element.hasAttribute("data-wsx-preserve")) {
     return true;
   }
   return false;
@@ -648,7 +667,9 @@ function appendChildrenToElement(element, children) {
       return;
     }
     if (typeof child === "string" || typeof child === "number") {
-      element.appendChild(document.createTextNode(String(child)));
+      const textNode = document.createTextNode(String(child));
+      textNode.__wsxManaged = true;
+      element.appendChild(textNode);
     } else if (child instanceof HTMLElement || child instanceof SVGElement) {
       element.appendChild(child);
     } else if (child instanceof DocumentFragment) {
@@ -668,6 +689,9 @@ function collectPreservedElements(element) {
   const preserved = [];
   for (let i = 0; i < element.childNodes.length; i++) {
     const child = element.childNodes[i];
+    if (child.nodeType === Node.TEXT_NODE) {
+      continue;
+    }
     if (shouldPreserveElement(child)) {
       preserved.push(child);
     }
@@ -701,38 +725,40 @@ function findElementNode(oldChild, 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;
+function findTextNode(parent, domIndex, processedNodes) {
+  for (let i = domIndex.value; i < parent.childNodes.length; i++) {
+    const node = parent.childNodes[i];
+    if (node.nodeType === Node.TEXT_NODE && node.__wsxManaged === true && !processedNodes.has(node)) {
+      domIndex.value = i + 1;
+      return node;
     }
-    domIndex.value++;
   }
   return null;
 }
-function updateOrCreateTextNode(parent, oldNode, newText) {
+function updateOrCreateTextNode(parent, oldNode, newText, insertBeforeNode) {
+  if (shouldPreserveElement(parent)) {
+    if (oldNode && oldNode.nodeType === Node.TEXT_NODE) {
+      return oldNode;
+    }
+    return document.createTextNode(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;
-        }
+    if (insertBeforeNode !== void 0) {
+      if (oldNode !== insertBeforeNode && oldNode.nextSibling !== insertBeforeNode) {
+        parent.insertBefore(oldNode, insertBeforeNode);
       }
     }
+    return oldNode;
+  } else {
     const newTextNode = document.createTextNode(newText);
+    newTextNode.__wsxManaged = true;
     if (oldNode && !shouldPreserveElement(oldNode)) {
       parent.replaceChild(newTextNode, oldNode);
     } else {
-      parent.insertBefore(newTextNode, oldNode || null);
+      parent.insertBefore(newTextNode, insertBeforeNode ?? null);
     }
     return newTextNode;
   }
@@ -742,25 +768,36 @@ function removeNodeIfNotPreserved(parent, node) {
     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) {
+function replaceOrInsertElementAtPosition(parent, newChild, oldNode, targetNextSibling, processedNodes) {
   if (newChild.parentNode && newChild.parentNode !== parent) {
     newChild.parentNode.removeChild(newChild);
   }
-  const isInCorrectPosition = newChild.parentNode === parent && newChild.nextSibling === targetNextSibling;
+  const isInCorrectPosition = newChild.parentNode === parent && (newChild.nextSibling === targetNextSibling || targetNextSibling === newChild);
   if (isInCorrectPosition) {
+    if (processedNodes) processedNodes.add(newChild);
     return;
   }
   if (newChild.parentNode === parent) {
     parent.insertBefore(newChild, targetNextSibling);
+    if (processedNodes) processedNodes.add(newChild);
     return;
   }
   if (oldNode && oldNode.parentNode === parent && !shouldPreserveElement(oldNode)) {
     if (oldNode !== newChild) {
+      const oldCacheKey = getElementCacheKey(oldNode);
+      const newCacheKey = getElementCacheKey(newChild);
+      if (!oldCacheKey && !newCacheKey && oldNode.__wsxManaged === true) {
+        const oldTag = oldNode.tagName.toLowerCase();
+        const newTag = newChild.tagName.toLowerCase();
+        if (oldTag === newTag && oldNode.textContent === newChild.textContent) {
+          if (processedNodes) processedNodes.add(oldNode);
+          return;
+        }
+      }
       parent.replaceChild(newChild, oldNode);
+      if (processedNodes) processedNodes.add(newChild);
+    } else {
+      if (processedNodes) processedNodes.add(newChild);
     }
   } else {
     if (newChild.parentNode === parent) {
@@ -775,6 +812,12 @@ function replaceOrInsertElementAtPosition(parent, newChild, oldNode, targetNextS
         if (existingNode instanceof HTMLElement || existingNode instanceof SVGElement) {
           const existingCacheKey = getElementCacheKey(existingNode);
           if (!existingCacheKey && existingNode.tagName.toLowerCase() === newChildTag && existingNode.textContent === newChildContent && existingNode !== newChild) {
+            console.log(
+              "[WSX Debug] Found duplicate content, keeping existing:",
+              existingNode.tagName,
+              existingNode.textContent
+            );
+            if (processedNodes) processedNodes.add(existingNode);
             return;
           }
         }
@@ -789,6 +832,7 @@ function appendNewChild(parent, child, processedNodes) {
   }
   if (typeof child === "string" || typeof child === "number") {
     const newTextNode = document.createTextNode(String(child));
+    newTextNode.__wsxManaged = true;
     parent.appendChild(newTextNode);
     if (processedNodes) {
       processedNodes.add(newTextNode);
@@ -805,6 +849,11 @@ function appendNewChild(parent, child, processedNodes) {
       processedNodes.add(child);
     }
   } else if (child instanceof DocumentFragment) {
+    if (processedNodes) {
+      for (let i = 0; i < child.childNodes.length; i++) {
+        processedNodes.add(child.childNodes[i]);
+      }
+    }
     parent.appendChild(child);
   }
 }
@@ -825,21 +874,32 @@ function buildNewChildrenMaps(flatNew) {
   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) {
+  if (node.nodeType === Node.TEXT_NODE) {
+    if (node.__wsxManaged === true) {
+      if (processedNodes && processedNodes.has(node)) {
         return false;
       }
-      parent = parent.parentNode;
+      return true;
+    }
+    const parent = node.parentNode;
+    if (parent && (parent instanceof HTMLElement || parent instanceof SVGElement)) {
+      if (shouldPreserveElement(parent)) {
+        return false;
+      }
+    }
+    return true;
+  } else {
+    if (shouldPreserveElement(node)) {
+      return false;
     }
   }
+  const isProcessed = processedNodes && processedNodes.has(node);
+  if (isProcessed) {
+    return false;
+  }
+  if (shouldPreserveElement(node)) {
+    return false;
+  }
   if (node instanceof HTMLElement || node instanceof SVGElement || node instanceof DocumentFragment) {
     if (elementSet.has(node)) {
       return false;
@@ -881,7 +941,8 @@ 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)) {
+    const removed = shouldRemoveNode(node, elementSet, cacheKeyMap, processedNodes);
+    if (removed) {
       nodesToRemove.push(node);
     }
   }
@@ -1083,6 +1144,7 @@ function updateChildren(element, oldChildren, newChildren, _cacheManager) {
   const preservedElements = collectPreservedElements(element);
   const minLength = Math.min(flatOld.length, flatNew.length);
   const domIndex = { value: 0 };
+  const insertionIndex = { value: 0 };
   const processedNodes = /* @__PURE__ */ new Set();
   for (let i = 0; i < minLength; i++) {
     const oldChild = flatOld[i];
@@ -1097,48 +1159,54 @@ function updateChildren(element, oldChildren, newChildren, _cacheManager) {
         }
       }
     } else if (typeof oldChild === "string" || typeof oldChild === "number") {
-      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;
+      if (shouldPreserveElement(element)) {
+        oldNode = null;
+      } else {
+        oldNode = findTextNode(element, domIndex, processedNodes);
+        if (oldNode) {
+          const nodeIndex = Array.from(element.childNodes).indexOf(oldNode);
+          if (nodeIndex !== -1 && nodeIndex >= domIndex.value) {
+            domIndex.value = nodeIndex + 1;
           }
         }
       }
     }
     if (typeof oldChild === "string" || typeof oldChild === "number") {
       if (typeof newChild === "string" || typeof newChild === "number") {
-        const oldText = String(oldChild);
         const newText = String(newChild);
-        const needsUpdate = oldText !== newText || 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 {
-          if (oldNode && oldNode.parentNode === element) {
-            processedNodes.add(oldNode);
-          } else if (!oldNode && oldText === newText) {
-            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 === newText && !processedNodes.has(node)) {
-                processedNodes.add(node);
-                break;
-              }
-            }
-          }
+        if (shouldPreserveElement(element)) {
+          continue;
+        }
+        const insertBeforeNode = insertionIndex.value < element.childNodes.length ? element.childNodes[insertionIndex.value] : null;
+        const updatedNode = updateOrCreateTextNode(
+          element,
+          oldNode,
+          newText,
+          insertBeforeNode
+        );
+        if (updatedNode) {
+          processedNodes.add(updatedNode);
+          insertionIndex.value++;
         }
       } else {
-        removeNodeIfNotPreserved(element, oldNode);
+        const targetNode = insertionIndex.value < element.childNodes.length ? element.childNodes[insertionIndex.value] : null;
         if (newChild instanceof HTMLElement || newChild instanceof SVGElement) {
-          replaceOrInsertElement(element, newChild, oldNode);
+          if (oldNode && oldNode === targetNode && oldNode.parentNode === element) {
+            element.replaceChild(newChild, oldNode);
+          } else {
+            element.insertBefore(newChild, targetNode);
+            removeNodeIfNotPreserved(element, oldNode);
+          }
+          processedNodes.add(newChild);
+          insertionIndex.value++;
         } else if (newChild instanceof DocumentFragment) {
-          element.insertBefore(newChild, oldNode || null);
+          if (processedNodes) {
+            for (let i2 = 0; i2 < newChild.childNodes.length; i2++) {
+              processedNodes.add(newChild.childNodes[i2]);
+            }
+          }
+          element.insertBefore(newChild, targetNode);
+          removeNodeIfNotPreserved(element, oldNode);
         }
       }
     } else if (oldChild instanceof HTMLElement || oldChild instanceof SVGElement) {
@@ -1146,49 +1214,36 @@ function updateChildren(element, oldChildren, newChildren, _cacheManager) {
         continue;
       }
       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;
-            }
-          }
-        }
-        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;
+        const insertBeforeNode = insertionIndex.value < element.childNodes.length ? element.childNodes[insertionIndex.value] : null;
         replaceOrInsertElementAtPosition(
           element,
           newChild,
-          referenceNode,
-          targetNextSibling
+          oldNode,
+          insertBeforeNode,
+          processedNodes
         );
-        if (oldNode && oldNode !== newChild) {
-          processedNodes.delete(oldNode);
-        }
-        processedNodes.add(newChild);
+        insertionIndex.value++;
       } else {
-        removeNodeIfNotPreserved(element, oldNode);
+        const targetNode = insertionIndex.value < element.childNodes.length ? element.childNodes[insertionIndex.value] : null;
         if (typeof newChild === "string" || typeof newChild === "number") {
           const newTextNode = document.createTextNode(String(newChild));
-          element.insertBefore(newTextNode, oldNode?.nextSibling || null);
+          newTextNode.__wsxManaged = true;
+          if (oldNode && oldNode === targetNode && oldNode.parentNode === element) {
+            element.replaceChild(newTextNode, oldNode);
+          } else {
+            element.insertBefore(newTextNode, targetNode);
+            removeNodeIfNotPreserved(element, oldNode);
+          }
           processedNodes.add(newTextNode);
+          insertionIndex.value++;
         } else if (newChild instanceof DocumentFragment) {
-          element.insertBefore(newChild, oldNode?.nextSibling || null);
+          if (processedNodes) {
+            for (let i2 = 0; i2 < newChild.childNodes.length; i2++) {
+              processedNodes.add(newChild.childNodes[i2]);
+            }
+          }
+          element.insertBefore(newChild, targetNode);
+          removeNodeIfNotPreserved(element, oldNode);
         }
       }
     }
@@ -1213,6 +1268,55 @@ function updateElement(element, newProps, newChildren, tag, cacheManager) {
   updateProps(element, oldProps, newProps, tag);
   updateChildren(element, oldChildren, newChildren, cacheManager);
 }
+function reconcileElement(oldParent, newParent) {
+  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;
+      const newEl = newChild;
+      if (oldEl.tagName !== newEl.tagName) {
+        oldParent.replaceChild(newEl.cloneNode(true), oldEl);
+      } else {
+        Array.from(oldEl.attributes).forEach((attr) => {
+          if (!newEl.hasAttribute(attr.name)) {
+            oldEl.removeAttribute(attr.name);
+          }
+        });
+        Array.from(newEl.attributes).forEach((attr) => {
+          if (oldEl.getAttribute(attr.name) !== attr.value) {
+            oldEl.setAttribute(attr.name, attr.value);
+          }
+        });
+        if (oldEl.className !== newEl.className) {
+          oldEl.className = newEl.className;
+        }
+        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;
+          }
+        }
+        reconcileElement(oldEl, newEl);
+      }
+    }
+  }
+}
 
 // src/jsx-factory.ts
 var logger3 = createLogger("JSX Factory");
@@ -1310,7 +1414,9 @@ function Fragment(_props, children) {
       return;
     }
     if (typeof child === "string" || typeof child === "number") {
-      fragment.appendChild(document.createTextNode(String(child)));
+      const textNode = document.createTextNode(String(child));
+      textNode.__wsxManaged = true;
+      fragment.appendChild(textNode);
     } else if (child instanceof HTMLElement || child instanceof SVGElement) {
       fragment.appendChild(child);
     } else if (child instanceof DocumentFragment) {
@@ -1841,7 +1947,7 @@ var BaseComponent = class extends HTMLElement {
       }
     }
     if (activeElement) {
-      const isInputElement = activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement || activeElement instanceof HTMLSelectElement || activeElement.hasAttribute("contenteditable");
+      const isInputElement = activeElement instanceof HTMLInputElement && activeElement.type !== "radio" && activeElement.type !== "checkbox" || activeElement instanceof HTMLTextAreaElement || activeElement instanceof HTMLSelectElement || activeElement.hasAttribute("contenteditable");
       const forceRender = activeElement.hasAttribute("data-wsx-force-render");
       if (isInputElement && !forceRender) {
         this._pendingRerender = true;
@@ -1857,14 +1963,8 @@ var BaseComponent = class extends HTMLElement {
     }
     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) {
@@ -1893,7 +1993,8 @@ var BaseComponent = class extends HTMLElement {
       clearTimeout(this._rerenderDebounceTimer);
       this._rerenderDebounceTimer = null;
     }
-    document.removeEventListener("blur", this.handleGlobalBlur, true);
+    const root = this.getActiveRoot();
+    root.removeEventListener("blur", this.handleGlobalBlur, true);
     this._pendingRerender = false;
   }
   /**
@@ -1901,7 +2002,8 @@ var BaseComponent = class extends HTMLElement {
    * @internal
    */
   initializeEventListeners() {
-    document.addEventListener("blur", this.handleGlobalBlur, true);
+    const root = this.getActiveRoot();
+    root.addEventListener("blur", this.handleGlobalBlur, true);
   }
   /**
    * 获取配置值
@@ -2211,7 +2313,7 @@ var WebComponent = class extends BaseComponent {
       if (!isContentAlreadyInShadowRoot) {
         this.shadowRoot.appendChild(content);
       }
-      const oldChildren = Array.from(this.shadowRoot.children).filter((child) => {
+      const oldNodes = Array.from(this.shadowRoot.childNodes).filter((child) => {
         if (child === content) {
           return false;
         }
@@ -2223,7 +2325,7 @@ var WebComponent = class extends BaseComponent {
         }
         return true;
       });
-      oldChildren.forEach((child) => child.remove());
+      oldNodes.forEach((node) => node.remove());
       const hasStylesAfterDOM = this.shadowRoot.adoptedStyleSheets && this.shadowRoot.adoptedStyleSheets.length > 0;
       const hasStyleElementAfterDOM = Array.from(this.shadowRoot.children).some(
         (child) => child instanceof HTMLStyleElement
@@ -2358,6 +2460,10 @@ var LightComponent = class extends BaseComponent {
   querySelectorAll(selector) {
     return HTMLElement.prototype.querySelectorAll.call(this, selector);
   }
+  /**
+   * 递归协调子元素
+   * 更新现有子元素的属性和内容，而不是替换整个子树
+   */
   /**
    * 内部重渲染实现
    * 包含从 rerender() 方法迁移的实际渲染逻辑
@@ -2374,9 +2480,9 @@ var LightComponent = class extends BaseComponent {
     this._pendingFocusState = focusState;
     const jsxChildren = this.getJSXChildren();
     try {
-      const content = RenderContext.runInContext(this, () => this.render());
+      const newContent = RenderContext.runInContext(this, () => this.render());
       if (focusState && focusState.key && focusState.value !== void 0) {
-        const target = content.querySelector(
+        const target = newContent.querySelector(
           `[data-wsx-key="${focusState.key}"]`
         );
         if (target) {
@@ -2401,36 +2507,50 @@ var LightComponent = class extends BaseComponent {
         }
       }
       requestAnimationFrame(() => {
-        this.appendChild(content);
         const oldChildren = Array.from(this.children).filter((child) => {
-          if (child === content) {
-            return false;
-          }
           if (stylesToApply && child instanceof HTMLStyleElement && child.getAttribute("data-wsx-light-component") === styleName) {
             return false;
           }
           if (child instanceof HTMLElement && jsxChildren.includes(child)) {
             return false;
           }
-          if (shouldPreserveElement(child)) {
-            return false;
-          }
           return true;
         });
-        oldChildren.forEach((child) => child.remove());
+        if (oldChildren.length === 1 && newContent instanceof HTMLElement) {
+          const oldElement = oldChildren[0];
+          if (oldElement instanceof HTMLElement && oldElement.tagName === newContent.tagName) {
+            Array.from(oldElement.attributes).forEach((attr) => {
+              if (!newContent.hasAttribute(attr.name)) {
+                oldElement.removeAttribute(attr.name);
+              }
+            });
+            Array.from(newContent.attributes).forEach((attr) => {
+              if (oldElement.getAttribute(attr.name) !== attr.value) {
+                oldElement.setAttribute(attr.name, attr.value);
+              }
+            });
+            reconcileElement(oldElement, newContent);
+          } else {
+            oldElement.remove();
+            this.appendChild(newContent);
+          }
+        } else {
+          oldChildren.forEach((child) => child.remove());
+          this.appendChild(newContent);
+        }
         if (stylesToApply) {
-          let styleElement = this.querySelector(
+          let styleEl = this.querySelector(
             `style[data-wsx-light-component="${styleName}"]`
           );
-          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);
+          if (!styleEl) {
+            styleEl = document.createElement("style");
+            styleEl.setAttribute("data-wsx-light-component", styleName);
+            styleEl.textContent = stylesToApply;
+            this.insertBefore(styleEl, this.firstChild);
+          } else if (styleEl.textContent !== stylesToApply) {
+            styleEl.textContent = stylesToApply;
+          } else if (styleEl !== this.firstChild) {
+            this.insertBefore(styleEl, this.firstChild);
           }
         }
         requestAnimationFrame(() => {
@@ -2634,6 +2754,7 @@ function state(targetOrContext, propertyKey) {
   jsx,
   jsxs,
   logger,
+  parseHTMLToNodes,
   registerComponent,
   state
 });