@wsxjs/wsx-core 0.0.26 → 0.0.28

package/dist/index.js

@@ -97,6 +97,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,7 +208,7 @@ function isCreatedByH(element) {
 }
 function shouldPreserveElement(element) {
   if (!(element instanceof HTMLElement || element instanceof SVGElement)) {
-    return true;
+    return false;
   }
   if (!isCreatedByH(element)) {
     return true;
@@ -561,7 +572,7 @@ function setSmartProperty(element, key, value, tag) {
 
 // src/utils/element-creation.ts
 function applySingleProp(element, key, value, tag, isSVG) {
-  if (value === null || value === void 0 || value === false) {
+  if (value === null || value === void 0) {
     return;
   }
   if (key === "ref" && typeof value === "function") {
@@ -590,6 +601,31 @@ function applySingleProp(element, key, value, tag, isSVG) {
   if (typeof value === "boolean") {
     if (value) {
       element.setAttribute(key, "");
+      if (element instanceof HTMLInputElement) {
+        if (key === "checked") {
+          element.checked = true;
+        } else if (key === "disabled") {
+          element.disabled = true;
+        } else if (key === "readonly") {
+          element.readOnly = true;
+        }
+      } else if (element instanceof HTMLOptionElement && key === "selected") {
+        element.selected = true;
+      }
+    } else {
+      const attributeName = isSVG ? getSVGAttributeName(key) : key;
+      element.removeAttribute(attributeName);
+      if (element instanceof HTMLInputElement) {
+        if (key === "checked") {
+          element.checked = false;
+        } else if (key === "disabled") {
+          element.disabled = false;
+        } else if (key === "readonly") {
+          element.readOnly = false;
+        }
+      } else if (element instanceof HTMLOptionElement && key === "selected") {
+        element.selected = false;
+      }
     }
     return;
   }
@@ -623,7 +659,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) {
@@ -643,6 +681,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);
     }
@@ -676,38 +717,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;
   }
@@ -717,53 +760,13 @@ 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) {
-  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));
+    newTextNode.__wsxManaged = true;
     parent.appendChild(newTextNode);
     if (processedNodes) {
       processedNodes.add(newTextNode);
@@ -780,6 +783,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);
   }
 }
@@ -800,21 +808,32 @@ function buildNewChildrenMaps(flatNew) {
   return { elementSet, cacheKeyMap };
 }
 function shouldRemoveNode(node, elementSet, cacheKeyMap, processedNodes) {
+  if (node.nodeType === Node.TEXT_NODE) {
+    if (node.__wsxManaged === true) {
+      if (processedNodes && processedNodes.has(node)) {
+        return false;
+      }
+      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 (shouldPreserveElement(node)) {
     return false;
   }
-  if (node.nodeType === Node.TEXT_NODE && processedNodes && processedNodes.has(node)) {
+  if (node.nodeType === Node.TEXT_NODE && isProcessed) {
     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;
@@ -856,7 +875,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);
     }
   }
@@ -945,7 +965,7 @@ function removeProp(element, key, oldValue, tag) {
   }
 }
 function applySingleProp2(element, key, value, tag, isSVG) {
-  if (value === null || value === void 0 || value === false) {
+  if (value === null || value === void 0) {
     return;
   }
   if (key === "ref" && typeof value === "function") {
@@ -978,6 +998,31 @@ function applySingleProp2(element, key, value, tag, isSVG) {
   if (typeof value === "boolean") {
     if (value) {
       element.setAttribute(key, "");
+      if (element instanceof HTMLInputElement) {
+        if (key === "checked") {
+          element.checked = true;
+        } else if (key === "disabled") {
+          element.disabled = true;
+        } else if (key === "readonly") {
+          element.readOnly = true;
+        }
+      } else if (element instanceof HTMLOptionElement && key === "selected") {
+        element.selected = true;
+      }
+    } else {
+      const attributeName = isSVG ? getSVGAttributeName(key) : key;
+      element.removeAttribute(attributeName);
+      if (element instanceof HTMLInputElement) {
+        if (key === "checked") {
+          element.checked = false;
+        } else if (key === "disabled") {
+          element.disabled = false;
+        } else if (key === "readonly") {
+          element.readOnly = false;
+        }
+      } else if (element instanceof HTMLOptionElement && key === "selected") {
+        element.selected = false;
+      }
     }
     return;
   }
@@ -1033,6 +1078,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];
@@ -1047,40 +1093,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);
-          }
+        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) {
@@ -1088,49 +1148,37 @@ 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;
-            }
+        const insertBeforeNode = insertionIndex.value < element.childNodes.length ? element.childNodes[insertionIndex.value] : null;
+        if (newChild === oldNode) {
+          if (newChild.nextSibling !== insertBeforeNode) {
+            element.insertBefore(newChild, insertBeforeNode);
           }
-        }
-        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);
+        } else {
+          element.insertBefore(newChild, insertBeforeNode);
         }
         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);
         }
       }
     }
@@ -1252,7 +1300,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) {
@@ -2153,7 +2203,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;
         }
@@ -2165,7 +2215,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

package/dist/index.mjs

@@ -4,7 +4,7 @@ import {
   createLogger,
   h,
   shouldPreserveElement
-} from "./chunk-5Q2VEEUH.mjs";
+} from "./chunk-34PNC5CJ.mjs";
 
 // src/styles/style-manager.ts
 var StyleManager = class {
@@ -897,7 +897,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;
         }
@@ -909,7 +909,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