@wsxjs/wsx-core 0.0.27 → 0.0.30

package/dist/chunk-ZY36MEHX.mjs

@@ -0,0 +1,1306 @@
+// src/utils/dom-utils.ts
+function parseHTMLToNodes(html) {
+  if (!html) return [];
+  const temp = document.createElement("div");
+  temp.innerHTML = html;
+  return Array.from(temp.childNodes).map((node) => {
+    if (node instanceof HTMLElement || node instanceof SVGElement) {
+      return node;
+    } else {
+      return node.textContent || "";
+    }
+  });
+}
+function isHTMLString(str) {
+  const trimmed = str.trim();
+  if (!trimmed) return false;
+  const htmlTagPattern = /<[a-z][a-z0-9]*(\s[^>]*)?(\/>|>)/i;
+  const looksLikeMath = /^[^<]*<[^>]*>[^>]*$/.test(trimmed) && !htmlTagPattern.test(trimmed);
+  if (looksLikeMath) return false;
+  return htmlTagPattern.test(trimmed);
+}
+function flattenChildren(children, skipHTMLDetection = false, depth = 0) {
+  if (depth > 10) {
+    console.warn(
+      "[WSX] flattenChildren: Maximum depth exceeded, treating remaining children as text"
+    );
+    return children.filter(
+      (child) => typeof child === "string" || typeof child === "number"
+    );
+  }
+  const result = [];
+  for (const child of children) {
+    if (child === null || child === void 0 || child === false) {
+      continue;
+    } else if (Array.isArray(child)) {
+      result.push(...flattenChildren(child, skipHTMLDetection, depth + 1));
+    } else if (typeof child === "string") {
+      if (skipHTMLDetection) {
+        result.push(child);
+      } else if (isHTMLString(child)) {
+        try {
+          const nodes = parseHTMLToNodes(child);
+          if (nodes.length > 0) {
+            for (const node of nodes) {
+              if (typeof node === "string") {
+                result.push(node);
+              } else {
+                result.push(node);
+              }
+            }
+          } else {
+            result.push(child);
+          }
+        } catch (error) {
+          console.warn("[WSX] Failed to parse HTML string, treating as text:", error);
+          result.push(child);
+        }
+      } 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);
+    }
+  }
+  return result;
+}
+
+// src/render-context.ts
+var _RenderContext = class _RenderContext {
+  /**
+   * Executes a function within the context of a component.
+   * @param component The component instance currently rendering.
+   * @param fn The function to execute (usually the render method).
+   */
+  static runInContext(component, fn) {
+    resetCounterForNewRenderCycle(component);
+    const prev = _RenderContext.current;
+    _RenderContext.current = component;
+    try {
+      return fn();
+    } finally {
+      _RenderContext.current = prev;
+    }
+  }
+  /**
+   * Gets the currently rendering component.
+   */
+  static getCurrentComponent() {
+    return _RenderContext.current;
+  }
+  /**
+   * Gets the current component's DOM cache.
+   */
+  static getDOMCache() {
+    return _RenderContext.current?.getDomCache();
+  }
+};
+_RenderContext.current = null;
+var RenderContext = _RenderContext;
+
+// src/utils/cache-key.ts
+var INDEX_KEY = "__wsxIndex";
+var componentElementCounters = /* @__PURE__ */ new WeakMap();
+var componentIdCache = /* @__PURE__ */ new WeakMap();
+function generateCacheKey(tag, props, componentId, component) {
+  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) {
+    return `${componentId}:${tag}:${String(positionId)}`;
+  }
+  if (component) {
+    let counter = componentElementCounters.get(component) || 0;
+    counter++;
+    componentElementCounters.set(component, counter);
+    return `${componentId}:${tag}:auto-${counter}`;
+  }
+  return `${componentId}:${tag}:fallback-${Date.now()}-${Math.random()}`;
+}
+function resetCounterForNewRenderCycle(component) {
+  componentElementCounters.set(component, 0);
+}
+function getComponentId() {
+  const component = RenderContext.getCurrentComponent();
+  if (component) {
+    let cachedId = componentIdCache.get(component);
+    if (cachedId) {
+      return cachedId;
+    }
+    const instanceId = component._instanceId || "default";
+    cachedId = `${component.constructor.name}:${instanceId}`;
+    componentIdCache.set(component, cachedId);
+    return cachedId;
+  }
+  return "unknown";
+}
+
+// src/utils/element-marking.ts
+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;
+  }
+  return element[CACHE_KEY_PROP] !== void 0;
+}
+function shouldPreserveElement(element) {
+  if (!(element instanceof HTMLElement || element instanceof SVGElement)) {
+    return false;
+  }
+  if (!isCreatedByH(element)) {
+    return true;
+  }
+  if (element.hasAttribute("data-wsx-preserve")) {
+    return true;
+  }
+  return false;
+}
+
+// src/utils/svg-utils.ts
+var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+var SVG_ONLY_ELEMENTS = /* @__PURE__ */ new Set([
+  // 结构元素 (Structural elements)
+  "svg",
+  "defs",
+  "g",
+  "symbol",
+  "use",
+  // 图形元素 (Graphics elements)
+  "circle",
+  "ellipse",
+  "line",
+  "path",
+  "polygon",
+  "polyline",
+  "rect",
+  // 文本元素 (Text elements)
+  "textPath",
+  "tspan",
+  // 渐变和模式 (Gradients and patterns)
+  "linearGradient",
+  "radialGradient",
+  "stop",
+  "pattern",
+  // 滤镜 (Filter elements)
+  "filter",
+  "feBlend",
+  "feColorMatrix",
+  "feComponentTransfer",
+  "feComposite",
+  "feConvolveMatrix",
+  "feDiffuseLighting",
+  "feDisplacementMap",
+  "feDistantLight",
+  "feDropShadow",
+  "feFlood",
+  "feFuncA",
+  "feFuncB",
+  "feFuncG",
+  "feFuncR",
+  "feGaussianBlur",
+  "feImage",
+  "feMerge",
+  "feMergeNode",
+  "feMorphology",
+  "feOffset",
+  "fePointLight",
+  "feSpecularLighting",
+  "feSpotLight",
+  "feTile",
+  "feTurbulence",
+  // 动画元素 (Animation elements)
+  "animate",
+  "animateMotion",
+  "animateTransform",
+  "set",
+  // 其他元素 (Other elements)
+  "clipPath",
+  "foreignObject",
+  "marker",
+  "mask",
+  "metadata",
+  "switch",
+  "desc"
+]);
+var DUAL_ELEMENTS = /* @__PURE__ */ new Set(["image", "style", "title", "text"]);
+var FORCE_HTML_ELEMENTS = /* @__PURE__ */ new Set(["a"]);
+var SVG_ELEMENTS = /* @__PURE__ */ new Set([
+  ...SVG_ONLY_ELEMENTS,
+  ...DUAL_ELEMENTS,
+  ...FORCE_HTML_ELEMENTS
+]);
+var svgContext = false;
+function isSVGOnlyElement(tagName) {
+  return SVG_ONLY_ELEMENTS.has(tagName);
+}
+function isDualElement(tagName) {
+  return DUAL_ELEMENTS.has(tagName);
+}
+function isForceHTMLElement(tagName) {
+  return FORCE_HTML_ELEMENTS.has(tagName);
+}
+function setSVGContext(inSVG) {
+  svgContext = inSVG;
+}
+function createElement(tagName) {
+  if (isForceHTMLElement(tagName)) {
+    return document.createElement(tagName);
+  }
+  if (isSVGOnlyElement(tagName)) {
+    setSVGContext(true);
+    return document.createElementNS(SVG_NAMESPACE, tagName);
+  }
+  if (isDualElement(tagName)) {
+    if (svgContext) {
+      return document.createElementNS(SVG_NAMESPACE, tagName);
+    }
+  }
+  return document.createElement(tagName);
+}
+function shouldUseSVGNamespace(tagName) {
+  return isSVGOnlyElement(tagName) || isDualElement(tagName) && svgContext;
+}
+var SVG_ATTRIBUTE_MAP = /* @__PURE__ */ new Map([
+  ["className", "class"],
+  ["htmlFor", "for"]
+]);
+function getSVGAttributeName(attributeName) {
+  return SVG_ATTRIBUTE_MAP.get(attributeName) || attributeName;
+}
+
+// src/utils/logger.ts
+var WSXLogger = class {
+  constructor(prefix = "[WSX]", enabled = true, level = "info") {
+    this.prefix = prefix;
+    this.enabled = enabled;
+    this.level = level;
+  }
+  shouldLog(level) {
+    if (!this.enabled) return false;
+    const levels = ["debug", "info", "warn", "error"];
+    const currentLevelIndex = levels.indexOf(this.level);
+    const messageLevelIndex = levels.indexOf(level);
+    return messageLevelIndex >= currentLevelIndex;
+  }
+  debug(message, ...args) {
+    if (this.shouldLog("debug")) {
+      console.debug(`${this.prefix} ${message}`, ...args);
+    }
+  }
+  info(message, ...args) {
+    if (this.shouldLog("info")) {
+      console.info(`${this.prefix} ${message}`, ...args);
+    }
+  }
+  warn(message, ...args) {
+    if (this.shouldLog("warn")) {
+      console.warn(`${this.prefix} ${message}`, ...args);
+    }
+  }
+  error(message, ...args) {
+    if (this.shouldLog("error")) {
+      console.error(`${this.prefix} ${message}`, ...args);
+    }
+  }
+};
+var logger = new WSXLogger();
+function createLogger(componentName) {
+  return new WSXLogger(`[WSX:${componentName}]`);
+}
+
+// src/utils/props-utils.ts
+var logger2 = createLogger("Props Utilities");
+function isFrameworkInternalProp(key) {
+  if (key === "key") {
+    return true;
+  }
+  if (key === "__wsxPositionId" || key === "__wsxIndex") {
+    return true;
+  }
+  if (key === "__testId") {
+    return true;
+  }
+  if (key === "ref") {
+    return true;
+  }
+  return false;
+}
+function isStandardHTMLAttribute(key) {
+  const standardAttributes = /* @__PURE__ */ new Set([
+    // 全局属性
+    "id",
+    "class",
+    "className",
+    "style",
+    "title",
+    "lang",
+    "dir",
+    "hidden",
+    "tabindex",
+    "accesskey",
+    "contenteditable",
+    "draggable",
+    "spellcheck",
+    "translate",
+    "autocapitalize",
+    "autocorrect",
+    // 表单属性
+    "name",
+    "value",
+    "type",
+    "placeholder",
+    "required",
+    "disabled",
+    "readonly",
+    "checked",
+    "selected",
+    "multiple",
+    "min",
+    "max",
+    "step",
+    "autocomplete",
+    "autofocus",
+    "form",
+    "formaction",
+    "formenctype",
+    "formmethod",
+    "formnovalidate",
+    "formtarget",
+    // 链接属性
+    "href",
+    "target",
+    "rel",
+    "download",
+    "hreflang",
+    "ping",
+    // 媒体属性
+    "src",
+    "alt",
+    "width",
+    "height",
+    "poster",
+    "preload",
+    "controls",
+    "autoplay",
+    "loop",
+    "muted",
+    "playsinline",
+    "crossorigin",
+    // ARIA 属性（部分常见）
+    "role"
+  ]);
+  const lowerKey = key.toLowerCase();
+  if (standardAttributes.has(lowerKey)) {
+    return true;
+  }
+  if (lowerKey.startsWith("data-")) {
+    return true;
+  }
+  if (lowerKey.startsWith("aria-")) {
+    return true;
+  }
+  if (key.startsWith("xml:") || key.startsWith("xlink:")) {
+    return true;
+  }
+  return false;
+}
+function isSpecialProperty(key, value) {
+  return key === "ref" || key === "className" || key === "class" || key === "style" || key.startsWith("on") && typeof value === "function" || typeof value === "boolean" || key === "value";
+}
+function setSmartProperty(element, key, value, tag) {
+  const isSVG = shouldUseSVGNamespace(tag);
+  if (isSpecialProperty(key, value)) {
+    return;
+  }
+  if (isStandardHTMLAttribute(key)) {
+    const attributeName = isSVG ? getSVGAttributeName(key) : key;
+    if (typeof value === "object" && value !== null) {
+      try {
+        const serialized = JSON.stringify(value);
+        if (serialized.length > 1024 * 1024) {
+          logger2.warn(
+            `[WSX] Attribute "${key}" value too large, consider using a non-standard property name instead`
+          );
+        }
+        element.setAttribute(attributeName, serialized);
+      } catch (error) {
+        logger2.warn(`Cannot serialize attribute "${key}":`, error);
+      }
+    } else {
+      element.setAttribute(attributeName, String(value));
+    }
+    return;
+  }
+  if (element instanceof SVGElement) {
+    const attributeName = getSVGAttributeName(key);
+    if (typeof value === "object" && value !== null) {
+      try {
+        const serialized = JSON.stringify(value);
+        element.setAttribute(attributeName, serialized);
+      } catch (error) {
+        logger2.warn(`Cannot serialize SVG attribute "${key}":`, error);
+      }
+    } else {
+      element.setAttribute(attributeName, String(value));
+    }
+    return;
+  }
+  const hasProperty = key in element || Object.prototype.hasOwnProperty.call(element, key);
+  if (hasProperty) {
+    let isReadOnly = false;
+    try {
+      const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(element), key);
+      if (descriptor) {
+        isReadOnly = descriptor.get !== void 0 && descriptor.set === void 0 || descriptor.writable === false && descriptor.set === void 0;
+      }
+    } catch {
+    }
+    if (isReadOnly) {
+      const attributeName = isSVG ? getSVGAttributeName(key) : key;
+      if (typeof value === "object" && value !== null) {
+        try {
+          const serialized = JSON.stringify(value);
+          element.setAttribute(attributeName, serialized);
+        } catch (error) {
+          logger2.warn(`Cannot serialize readonly property "${key}":`, error);
+        }
+      } else {
+        element.setAttribute(attributeName, String(value));
+      }
+    } else {
+      try {
+        element[key] = value;
+      } catch {
+        const attributeName = isSVG ? getSVGAttributeName(key) : key;
+        if (typeof value === "object" && value !== null) {
+          try {
+            const serialized = JSON.stringify(value);
+            element.setAttribute(attributeName, serialized);
+          } catch (error) {
+            logger2.warn(
+              `[WSX] Cannot serialize property "${key}" for attribute:`,
+              error
+            );
+          }
+        } else {
+          element.setAttribute(attributeName, String(value));
+        }
+      }
+    }
+  } else {
+    const attributeName = isSVG ? getSVGAttributeName(key) : key;
+    if (typeof value === "object" && value !== null) {
+      try {
+        const serialized = JSON.stringify(value);
+        if (serialized.length > 1024 * 1024) {
+          logger2.warn(
+            `[WSX] Property "${key}" value too large for attribute, consider using a JavaScript property instead`
+          );
+        }
+        element.setAttribute(attributeName, serialized);
+      } catch (error) {
+        logger2.warn(`Cannot serialize property "${key}" for attribute:`, error);
+      }
+    } else {
+      element.setAttribute(attributeName, String(value));
+    }
+  }
+}
+
+// src/utils/element-creation.ts
+function applySingleProp(element, key, value, tag, isSVG) {
+  if (value === null || value === void 0) {
+    return;
+  }
+  if (key === "ref" && typeof value === "function") {
+    value(element);
+    return;
+  }
+  if (key === "className" || key === "class") {
+    if (isSVG) {
+      element.setAttribute("class", value);
+    } else {
+      element.className = value;
+    }
+    return;
+  }
+  if (key === "style" && typeof value === "string") {
+    element.setAttribute("style", value);
+    return;
+  }
+  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") {
+    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;
+  }
+  if (key === "value") {
+    if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement) {
+      element.value = String(value);
+    } else {
+      const attributeName = isSVG ? getSVGAttributeName(key) : key;
+      element.setAttribute(attributeName, String(value));
+    }
+    return;
+  }
+  if (isFrameworkInternalProp(key)) {
+    return;
+  }
+  setSmartProperty(element, key, value, tag);
+}
+function applyPropsToElement(element, props, tag) {
+  if (!props) {
+    return;
+  }
+  const isSVG = shouldUseSVGNamespace(tag);
+  Object.entries(props).forEach(([key, value]) => {
+    applySingleProp(element, key, value, tag, isSVG);
+  });
+}
+function appendChildrenToElement(element, children) {
+  const flatChildren = flattenChildren(children);
+  flatChildren.forEach((child) => {
+    if (child === null || child === void 0 || child === false) {
+      return;
+    }
+    if (typeof child === "string" || typeof child === "number") {
+      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) {
+      element.appendChild(child);
+    }
+  });
+}
+function createElementWithPropsAndChildren(tag, props, children) {
+  const element = createElement(tag);
+  applyPropsToElement(element, props, tag);
+  appendChildrenToElement(element, 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 (child.nodeType === Node.TEXT_NODE) {
+      continue;
+    }
+    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, 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)) {
+      return node;
+    }
+  }
+  return null;
+}
+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;
+    }
+    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, insertBeforeNode ?? null);
+    }
+    return newTextNode;
+  }
+}
+function removeNodeIfNotPreserved(parent, node) {
+  if (node && !shouldPreserveElement(node) && node.parentNode === parent) {
+    parent.removeChild(node);
+  }
+}
+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);
+    }
+  } 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) {
+    if (processedNodes) {
+      for (let i = 0; i < child.childNodes.length; i++) {
+        processedNodes.add(child.childNodes[i]);
+      }
+    }
+    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 (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 && isProcessed) {
+    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);
+        }
+      } 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];
+    const removed = shouldRemoveNode(node, elementSet, cacheKeyMap, processedNodes);
+    if (removed) {
+      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") {
+    if (isSVG) {
+      element.removeAttribute("class");
+    } else {
+      element.className = "";
+    }
+    return;
+  }
+  if (key === "style") {
+    element.removeAttribute("style");
+    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") {
+    if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement) {
+      element.value = "";
+    } else {
+      const attributeName2 = isSVG ? getSVGAttributeName(key) : key;
+      element.removeAttribute(attributeName2);
+    }
+    return;
+  }
+  if (isFrameworkInternalProp(key)) {
+    return;
+  }
+  const attributeName = isSVG ? getSVGAttributeName(key) : key;
+  element.removeAttribute(attributeName);
+  try {
+    delete element[key];
+  } catch {
+  }
+}
+function applySingleProp2(element, key, value, tag, isSVG) {
+  if (value === null || value === void 0) {
+    return;
+  }
+  if (key === "ref" && typeof value === "function") {
+    value(element);
+    return;
+  }
+  if (key === "className" || key === "class") {
+    if (isSVG) {
+      element.setAttribute("class", value);
+    } else {
+      element.className = value;
+    }
+    return;
+  }
+  if (key === "style" && typeof value === "string") {
+    element.setAttribute("style", value);
+    return;
+  }
+  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") {
+    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;
+  }
+  if (key === "value") {
+    if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement) {
+      element.value = String(value);
+    } else {
+      const attributeName = isSVG ? getSVGAttributeName(key) : key;
+      element.setAttribute(attributeName, String(value));
+    }
+    return;
+  }
+  if (isFrameworkInternalProp(key)) {
+    return;
+  }
+  setSmartProperty(element, key, value, tag);
+}
+function updateProps(element, oldProps, newProps, tag) {
+  const isSVG = shouldUseSVGNamespace(tag);
+  const old = oldProps || {};
+  const new_ = newProps || {};
+  for (const key in old) {
+    if (!(key in new_)) {
+      removeProp(element, key, old[key], tag);
+    }
+  }
+  for (const key in new_) {
+    const oldValue = old[key];
+    const newValue = new_[key];
+    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) {
+      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, _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 };
+  const insertionIndex = { 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) {
+      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") {
+      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 newText = String(newChild);
+        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 {
+        const targetNode = insertionIndex.value < element.childNodes.length ? element.childNodes[insertionIndex.value] : null;
+        if (newChild instanceof HTMLElement || newChild instanceof SVGElement) {
+          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) {
+          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) {
+      if (oldNode && shouldPreserveElement(oldNode)) {
+        continue;
+      }
+      if (newChild instanceof HTMLElement || newChild instanceof SVGElement) {
+        const insertBeforeNode = insertionIndex.value < element.childNodes.length ? element.childNodes[insertionIndex.value] : null;
+        if (newChild === oldNode) {
+          if (newChild.nextSibling !== insertBeforeNode) {
+            element.insertBefore(newChild, insertBeforeNode);
+          }
+        } else {
+          element.insertBefore(newChild, insertBeforeNode);
+        }
+        processedNodes.add(newChild);
+        insertionIndex.value++;
+      } else {
+        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));
+          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) {
+          if (processedNodes) {
+            for (let i2 = 0; i2 < newChild.childNodes.length; i2++) {
+              processedNodes.add(newChild.childNodes[i2]);
+            }
+          }
+          element.insertBefore(newChild, targetNode);
+          removeNodeIfNotPreserved(element, oldNode);
+        }
+      }
+    }
+  }
+  for (let i = minLength; i < flatNew.length; i++) {
+    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);
+  const oldProps = oldMetadata?.props || null;
+  const oldChildren = oldMetadata?.children || [];
+  cacheManager.setMetadata(element, {
+    props: newProps || {},
+    children: newChildren
+  });
+  updateProps(element, oldProps, newProps, tag);
+  updateChildren(element, oldChildren, newChildren, cacheManager);
+}
+
+// src/jsx-factory.ts
+var logger3 = createLogger("JSX Factory");
+function h(tag, props = {}, ...children) {
+  if (typeof tag === "function") {
+    return tag(props, children);
+  }
+  const context = RenderContext.getCurrentComponent();
+  const cacheManager = context ? RenderContext.getDOMCache() : null;
+  if (context && cacheManager) {
+    return tryUseCacheOrCreate(tag, props, children, context, cacheManager);
+  }
+  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 {
+    const componentId = getComponentId();
+    const cacheKey = generateCacheKey(tag, props, componentId, context);
+    const cachedElement = cacheManager.get(cacheKey);
+    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);
+    cacheManager.set(cacheKey, element);
+    markElement(element, cacheKey);
+    cacheManager.setMetadata(element, {
+      props: props || {},
+      children
+    });
+    return element;
+  } catch (error) {
+    return handleCacheError(error, tag, props, children);
+  }
+}
+function handleCacheError(error, 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") {
+      logger3.warn("[WSX DOM Cache] Cache error, falling back to create new element:", error);
+    }
+  } catch {
+  }
+  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();
+  const flatChildren = flattenChildren(children);
+  flatChildren.forEach((child) => {
+    if (child === null || child === void 0 || child === false) {
+      return;
+    }
+    if (typeof child === "string" || typeof child === "number") {
+      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) {
+      fragment.appendChild(child);
+    }
+  });
+  return fragment;
+}
+function jsx(tag, props) {
+  if (!props) {
+    return h(tag, null);
+  }
+  const { children, ...restProps } = props;
+  if (children !== void 0 && children !== null) {
+    const childrenArray = Array.isArray(children) ? children : [children];
+    return h(tag, restProps, ...childrenArray);
+  }
+  return h(tag, restProps);
+}
+function jsxs(tag, props) {
+  if (!props) {
+    return h(tag, null);
+  }
+  const { children, ...restProps } = props;
+  if (Array.isArray(children)) {
+    return h(tag, restProps, ...children);
+  } else if (children !== void 0 && children !== null) {
+    return h(tag, restProps, children);
+  }
+  return h(tag, restProps);
+}
+
+export {
+  RenderContext,
+  shouldPreserveElement,
+  createLogger,
+  h,
+  Fragment,
+  jsx,
+  jsxs
+};