@wsxjs/wsx-core 0.0.19 → 0.0.21

package/dist/jsx.js

@@ -25,6 +25,170 @@ __export(jsx_exports, {
 });
 module.exports = __toCommonJS(jsx_exports);
 
+// 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 {
+      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) {
+    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 POSITION_ID_KEY = "__wsxPositionId";
+var INDEX_KEY = "__wsxIndex";
+var componentElementCounters = /* @__PURE__ */ new WeakMap();
+var componentIdCache = /* @__PURE__ */ new WeakMap();
+function generateCacheKey(tag, props, componentId, component) {
+  const positionId = props?.[POSITION_ID_KEY];
+  const userKey = props?.key;
+  const index = props?.[INDEX_KEY];
+  if (userKey !== void 0 && userKey !== null) {
+    return `${componentId}:${tag}:key-${String(userKey)}`;
+  }
+  if (index !== void 0 && index !== null) {
+    return `${componentId}:${tag}:idx-${String(index)}`;
+  }
+  if (positionId !== void 0 && positionId !== null && positionId !== "no-id") {
+    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 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 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 true;
+  }
+  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([
@@ -137,62 +301,301 @@ function getSVGAttributeName(attributeName) {
   return SVG_ATTRIBUTE_MAP.get(attributeName) || attributeName;
 }
 
-// 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 || "";
+// 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/jsx-factory.ts
-function h(tag, props = {}, ...children) {
-  if (typeof tag === "function") {
-    return tag(props, children);
+// src/utils/props-utils.ts
+var logger2 = createLogger("Props Utilities");
+function isFrameworkInternalProp(key) {
+  if (key === "key") {
+    return true;
   }
-  const element = createElement(tag);
-  if (props) {
-    const isSVG = shouldUseSVGNamespace(tag);
-    Object.entries(props).forEach(([key, value]) => {
-      if (value === null || value === void 0 || value === false) {
-        return;
-      }
-      if (key === "ref" && typeof value === "function") {
-        value(element);
-      } else if (key === "className" || key === "class") {
-        if (isSVG) {
-          element.setAttribute("class", value);
-        } else {
-          element.className = value;
+  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`
+          );
         }
-      } else if (key === "style" && typeof value === "string") {
-        element.setAttribute("style", value);
-      } else if (key.startsWith("on") && typeof value === "function") {
-        const eventName = key.slice(2).toLowerCase();
-        element.addEventListener(eventName, value);
-      } else if (typeof value === "boolean") {
-        if (value) {
-          element.setAttribute(key, "");
+        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 if (key === "value") {
-        if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement) {
-          element.value = String(value);
+      } 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 {
-          const attributeName = isSVG ? getSVGAttributeName(key) : key;
           element.setAttribute(attributeName, String(value));
         }
-      } else {
-        const attributeName = isSVG ? getSVGAttributeName(key) : key;
-        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 || value === false) {
+    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();
+    element.addEventListener(eventName, value);
+    return;
   }
+  if (typeof value === "boolean") {
+    if (value) {
+      element.setAttribute(key, "");
+    }
+    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) {
@@ -206,60 +609,278 @@ function h(tag, props = {}, ...children) {
       element.appendChild(child);
     }
   });
+}
+function createElementWithPropsAndChildren(tag, props, children) {
+  const element = createElement(tag);
+  applyPropsToElement(element, props, tag);
+  appendChildrenToElement(element, children);
   return element;
 }
-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);
+
+// src/utils/element-update.ts
+function removeProp(element, key, oldValue, tag) {
+  const isSVG = shouldUseSVGNamespace(tag);
+  if (key === "ref") {
+    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") {
+    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 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"
-    );
+function applySingleProp2(element, key, value, tag, isSVG) {
+  if (value === null || value === void 0 || value === false) {
+    return;
   }
-  const result = [];
-  for (const child of children) {
-    if (child === null || child === void 0 || child === false) {
+  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();
+    element.addEventListener(eventName, value);
+    return;
+  }
+  if (typeof value === "boolean") {
+    if (value) {
+      element.setAttribute(key, "");
+    }
+    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;
-    } 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);
-              }
+    }
+    if (typeof oldValue === "object" && oldValue !== null && typeof newValue === "object" && newValue !== null) {
+      if (JSON.stringify(oldValue) === JSON.stringify(newValue)) {
+        continue;
+      }
+    }
+    applySingleProp2(element, key, newValue, tag, isSVG);
+  }
+}
+function updateChildren(element, oldChildren, newChildren) {
+  const flatOld = flattenChildren(oldChildren);
+  const flatNew = flattenChildren(newChildren);
+  const minLength = Math.min(flatOld.length, flatNew.length);
+  for (let i = 0; i < minLength; i++) {
+    const oldChild = flatOld[i];
+    const newChild = flatNew[i];
+    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);
+          }
+        }
+      } 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);
+        } else if (newChild instanceof DocumentFragment) {
+          element.appendChild(newChild);
+        }
+      }
+    } else if (oldChild instanceof HTMLElement || oldChild instanceof SVGElement) {
+      if (newChild === oldChild) {
+        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 {
-            result.push(child);
+            if (newChild.parentNode !== element) {
+              element.appendChild(newChild);
+            }
+          }
+        } else {
+          if (newChild.parentNode !== element) {
+            element.appendChild(newChild);
           }
-        } catch (error) {
-          console.warn("[WSX] Failed to parse HTML string, treating as text:", error);
-          result.push(child);
         }
       } else {
-        result.push(child);
+        const oldNode = element.childNodes[i];
+        if (oldNode) {
+          if (!shouldPreserveElement(oldNode)) {
+            element.removeChild(oldNode);
+          }
+        }
+        if (typeof newChild === "string" || typeof newChild === "number") {
+          element.appendChild(document.createTextNode(String(newChild)));
+        } else if (newChild instanceof DocumentFragment) {
+          element.appendChild(newChild);
+        }
       }
-    } else {
-      result.push(child);
     }
   }
-  return result;
+  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);
+    }
+  }
+}
+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
+  });
+}
+
+// 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);
+  }
+  return createElementWithPropsAndChildren(tag, props, children);
+}
+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);
+      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 {
+  }
+  return createElementWithPropsAndChildren(tag, props, children);
 }
 function Fragment(_props, children) {
   const fragment = document.createDocumentFragment();