@wsxjs/wsx-core 0.0.21 → 0.0.23

package/dist/index.js

@@ -182,6 +182,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;
@@ -629,6 +633,185 @@ 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) {
+      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;
+    }
+  } else {
+    const newTextNode = document.createTextNode(newText);
+    if (oldNode && !shouldPreserveElement(oldNode)) {
+      parent.replaceChild(newTextNode, oldNode);
+    } else {
+      parent.insertBefore(newTextNode, oldNode || null);
+    }
+  }
+}
+function removeNodeIfNotPreserved(parent, node) {
+  if (node && !shouldPreserveElement(node) && node.parentNode === parent) {
+    parent.removeChild(node);
+  }
+}
+function replaceOrInsertElement(parent, newChild, oldNode) {
+  if (newChild.parentNode && newChild.parentNode !== parent) {
+    newChild.parentNode.removeChild(newChild);
+  }
+  if (oldNode && !shouldPreserveElement(oldNode)) {
+    if (oldNode !== newChild) {
+      parent.replaceChild(newChild, oldNode);
+    }
+  } else if (newChild.parentNode !== parent) {
+    parent.insertBefore(newChild, oldNode || null);
+  }
+}
+function appendNewChild(parent, child) {
+  if (child === null || child === void 0 || child === false) {
+    return;
+  }
+  if (typeof child === "string" || typeof child === "number") {
+    parent.appendChild(document.createTextNode(String(child)));
+  } else if (child instanceof HTMLElement || child instanceof SVGElement) {
+    if (child.parentNode && child.parentNode !== parent) {
+      child.parentNode.removeChild(child);
+    }
+    if (child.parentNode !== parent) {
+      parent.appendChild(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) {
+  if (shouldPreserveElement(node)) {
+    return false;
+  }
+  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);
+        }
+      }
+    }
+  }
+}
+function collectNodesToRemove(parent, elementSet, cacheKeyMap) {
+  const nodesToRemove = [];
+  for (let i = 0; i < parent.childNodes.length; i++) {
+    const node = parent.childNodes[i];
+    if (shouldRemoveNode(node, elementSet, cacheKeyMap)) {
+      nodesToRemove.push(node);
+    }
+  }
+  return nodesToRemove;
+}
+function removeNodes(parent, nodes) {
+  for (let i = nodes.length - 1; i >= 0; i--) {
+    const node = nodes[i];
+    if (node.parentNode === parent) {
+      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);
@@ -729,123 +912,123 @@ 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);
   }
 }
-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);
+  const domIndex = { value: 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) {
+      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") {
+      oldNode = findTextNode(element, domIndex);
+      if (!oldNode && element.childNodes.length > 0) {
+        for (let j = domIndex.value; j < element.childNodes.length; j++) {
+          const node = element.childNodes[j];
+          if (node.nodeType === Node.TEXT_NODE) {
+            oldNode = node;
+            domIndex.value = j + 1;
+            break;
+          }
+        }
+      }
+    }
     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);
-        } else {
-          const newTextNode = document.createTextNode(String(newChild));
-          if (textNode) {
-            element.replaceChild(newTextNode, textNode);
-          } else {
-            element.appendChild(newTextNode);
-          }
+        const oldText = String(oldChild);
+        const newText = String(newChild);
+        const needsUpdate = oldText !== newText || oldNode && oldNode.nodeType === Node.TEXT_NODE && oldNode.textContent !== newText;
+        if (needsUpdate) {
+          updateOrCreateTextNode(element, oldNode, newText);
         }
       } else {
-        const textNode = element.childNodes[i];
-        if (textNode) {
-          if (!shouldPreserveElement(textNode)) {
-            element.removeChild(textNode);
-          }
-        }
-        if (typeof newChild === "string" || typeof newChild === "number") {
-          element.appendChild(document.createTextNode(String(newChild)));
-        } else if (newChild instanceof HTMLElement || newChild instanceof SVGElement) {
-          element.appendChild(newChild);
+        removeNodeIfNotPreserved(element, oldNode);
+        if (newChild instanceof HTMLElement || newChild instanceof SVGElement) {
+          replaceOrInsertElement(element, newChild, oldNode);
         } else if (newChild instanceof DocumentFragment) {
-          element.appendChild(newChild);
+          element.insertBefore(newChild, oldNode || null);
         }
       }
     } else if (oldChild instanceof HTMLElement || oldChild instanceof SVGElement) {
-      if (newChild === oldChild) {
+      if (oldNode && shouldPreserveElement(oldNode)) {
         continue;
-      } else if (newChild instanceof HTMLElement || newChild instanceof SVGElement) {
-        const oldNode = element.childNodes[i];
-        if (oldNode) {
-          if (!shouldPreserveElement(oldNode)) {
-            if (oldNode !== newChild) {
-              element.replaceChild(newChild, oldNode);
-            }
-          } else {
-            if (newChild.parentNode !== element) {
-              element.appendChild(newChild);
+      }
+      if (newChild === oldChild && (newChild instanceof HTMLElement || newChild instanceof SVGElement)) {
+        if (cacheManager) {
+          const childMetadata = cacheManager.getMetadata(newChild);
+          if (childMetadata) {
+            if (oldNode === newChild && newChild.parentNode === element) {
+              continue;
             }
           }
         } else {
-          if (newChild.parentNode !== element) {
-            element.appendChild(newChild);
+          if (oldNode === newChild && newChild.parentNode === element) {
+            continue;
           }
         }
-      } else {
-        const oldNode = element.childNodes[i];
-        if (oldNode) {
-          if (!shouldPreserveElement(oldNode)) {
-            element.removeChild(oldNode);
-          }
+      }
+      if (newChild instanceof HTMLElement || newChild instanceof SVGElement) {
+        if (newChild.parentNode === element && oldNode === newChild) {
+          continue;
         }
+        replaceOrInsertElement(element, newChild, oldNode);
+      } else {
+        removeNodeIfNotPreserved(element, 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);
         }
       }
     }
   }
   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) {
-        element.appendChild(newChild);
-      }
-    } else if (newChild instanceof DocumentFragment) {
-      element.appendChild(newChild);
-    }
-  }
-  const nodesToRemove = [];
-  for (let i = flatNew.length; i < element.childNodes.length; i++) {
-    const child = element.childNodes[i];
-    if (!shouldPreserveElement(child)) {
-      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]);
   }
+  const { elementSet, cacheKeyMap } = buildNewChildrenMaps(flatNew);
+  deduplicateCacheKeys(element, cacheKeyMap);
+  const nodesToRemove = collectNodesToRemove(element, elementSet, cacheKeyMap);
+  removeNodes(element, nodesToRemove);
+  reinsertPreservedElements(element, preservedElements);
 }
 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, cacheManager);
 }
 
 // src/jsx-factory.ts
@@ -859,7 +1042,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 {
@@ -869,6 +1081,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);
@@ -892,7 +1112,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();
@@ -1703,7 +1928,7 @@ var WebComponent = class extends BaseComponent {
           const styleName = this.config.styleName || this.constructor.name;
           StyleManager.applyStyles(this.shadowRoot, styleName, stylesToApply);
         }
-        const content = this.render();
+        const content = RenderContext.runInContext(this, () => this.render());
         this.shadowRoot.appendChild(content);
       }
       this.initializeEventListeners();
@@ -1783,9 +2008,18 @@ var WebComponent = class extends BaseComponent {
       }
       requestAnimationFrame(() => {
         this.shadowRoot.appendChild(content);
-        const oldChildren = Array.from(this.shadowRoot.children).filter(
-          (child) => child !== 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);
@@ -1965,6 +2199,9 @@ var LightComponent = class extends BaseComponent {
           if (child instanceof HTMLElement && jsxChildren.includes(child)) {
             return false;
           }
+          if (shouldPreserveElement(child)) {
+            return false;
+          }
           return true;
         });
         oldChildren.forEach((child) => child.remove());

package/dist/index.mjs

@@ -2,8 +2,9 @@ import {
   Fragment,
   RenderContext,
   createLogger,
-  h
-} from "./chunk-AR3DIDLV.mjs";
+  h,
+  shouldPreserveElement
+} from "./chunk-ESZYREJK.mjs";
 
 // src/styles/style-manager.ts
 var StyleManager = class {
@@ -796,7 +797,7 @@ var WebComponent = class extends BaseComponent {
           const styleName = this.config.styleName || this.constructor.name;
           StyleManager.applyStyles(this.shadowRoot, styleName, stylesToApply);
         }
-        const content = this.render();
+        const content = RenderContext.runInContext(this, () => this.render());
         this.shadowRoot.appendChild(content);
       }
       this.initializeEventListeners();
@@ -876,9 +877,18 @@ var WebComponent = class extends BaseComponent {
       }
       requestAnimationFrame(() => {
         this.shadowRoot.appendChild(content);
-        const oldChildren = Array.from(this.shadowRoot.children).filter(
-          (child) => child !== 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);
@@ -1058,6 +1068,9 @@ var LightComponent = class extends BaseComponent {
           if (child instanceof HTMLElement && jsxChildren.includes(child)) {
             return false;
           }
+          if (shouldPreserveElement(child)) {
+            return false;
+          }
           return true;
         });
         oldChildren.forEach((child) => child.remove());