@lytjs/adapter-web 6.0.0

package/dist/index.mjs

@@ -0,0 +1,1127 @@
+// src/web-host.ts
+import { SVG_NS, isSVGTag } from "@lytjs/common-dom";
+import { parseDuration } from "@lytjs/common-string";
+
+// src/web-patch-props.ts
+import {
+  patchClass as domPatchClass,
+  patchStyle as domPatchStyle,
+  patchProp as domPatchProp
+} from "@lytjs/common-dom";
+import { isOn } from "@lytjs/common-events";
+
+// src/web-patch-events.ts
+import {
+  normalizeEventName,
+  getEventKey,
+  parseEventModifier
+} from "@lytjs/common-events";
+var veiCache = /* @__PURE__ */ new WeakMap();
+var INVOKER_POOL_MAX_SIZE = 100;
+var invokerPool = [];
+var poolHitCount = 0;
+var poolMissCount = 0;
+function acquireInvoker() {
+  if (invokerPool.length > 0) {
+    poolHitCount++;
+    return invokerPool.pop();
+  }
+  poolMissCount++;
+  return null;
+}
+function releaseInvoker(invoker) {
+  if (invokerPool.length < INVOKER_POOL_MAX_SIZE) {
+    invoker.value = null;
+    invoker._parsed = void 0;
+    invokerPool.push(invoker);
+  }
+}
+function createInvoker(initialValue) {
+  const pooled = acquireInvoker();
+  if (pooled) {
+    pooled.value = initialValue;
+    return pooled;
+  }
+  const invoker = ((e) => {
+    const parsed = invoker._parsed;
+    if (parsed) {
+      if (parsed.stop) e.stopPropagation();
+      if (parsed.prevent) e.preventDefault();
+      if (parsed.self && e.target !== e.currentTarget) return;
+    }
+    if (invoker.value) {
+      invoker.value(e);
+    }
+  });
+  invoker.value = initialValue;
+  return invoker;
+}
+function patchEvent(el, rawName, nextValue, _prevValue) {
+  const actualNextValue = extractHandler(nextValue);
+  const eventKey = getEventKey(normalizeEventName(rawName));
+  const parsed = parseEventModifier(rawName);
+  let invokers = veiCache.get(el);
+  if (!invokers) {
+    invokers = {};
+    veiCache.set(el, invokers);
+  }
+  const existingInvoker = invokers[eventKey];
+  if (actualNextValue && existingInvoker) {
+    existingInvoker.value = actualNextValue;
+  } else if (actualNextValue && !existingInvoker) {
+    const invoker = createInvoker(actualNextValue);
+    invoker._parsed = parsed;
+    invokers[eventKey] = invoker;
+    const options = buildEventListenerOptions(parsed);
+    el.addEventListener(parsed.name, invoker, options);
+  } else if (!actualNextValue && existingInvoker) {
+    const removeOptions = buildEventListenerOptions(existingInvoker._parsed);
+    el.removeEventListener(
+      existingInvoker._parsed.name,
+      existingInvoker,
+      removeOptions
+    );
+    releaseInvoker(existingInvoker);
+    invokers[eventKey] = void 0;
+  }
+}
+function removeAllEventListeners(el) {
+  const invokers = veiCache.get(el);
+  if (!invokers) return;
+  for (const eventKey of Object.keys(invokers)) {
+    const invoker = invokers[eventKey];
+    if (invoker) {
+      const parsed = invoker._parsed;
+      const eventName = parsed?.name ?? normalizeEventName(eventKey);
+      const removeOptions = parsed ? buildEventListenerOptions(parsed) : void 0;
+      el.removeEventListener(eventName, invoker, removeOptions);
+      releaseInvoker(invoker);
+    }
+  }
+  veiCache.delete(el);
+}
+function extractHandler(value) {
+  if (typeof value === "function") return value;
+  if (value != null && typeof value === "object" && "handler" in value) {
+    const record = value;
+    const handler = record.handler;
+    if (typeof handler === "function") {
+      return handler;
+    }
+  }
+  return null;
+}
+function buildEventListenerOptions(parsed) {
+  if (parsed.capture || parsed.once || parsed.passive) {
+    const options = {};
+    if (parsed.capture) options.capture = true;
+    if (parsed.once) options.once = true;
+    if (parsed.passive) options.passive = true;
+    return options;
+  }
+  return void 0;
+}
+
+// src/web-patch-props.ts
+import { patchClass, patchStyle, patchAttr } from "@lytjs/common-dom";
+import { normalizeEventName as normalizeEventName2, getEventKey as getEventKey2, parseEventModifier as parseEventModifier2 } from "@lytjs/common-events";
+function patchProp(el, key, prevValue, nextValue, isSVG = false) {
+  if (key === "class") {
+    domPatchClass(el, prevValue, nextValue);
+  } else if (key === "style") {
+    domPatchStyle(el, prevValue, nextValue);
+  } else if (isOn(key)) {
+    patchEvent(
+      el,
+      key,
+      nextValue,
+      prevValue
+    );
+  } else if (isSVG && key.startsWith("xlink:")) {
+    if (nextValue == null || nextValue === false) {
+      el.removeAttributeNS("http://www.w3.org/1999/xlink", key.slice(6));
+    } else {
+      el.setAttributeNS("http://www.w3.org/1999/xlink", key, String(nextValue));
+    }
+  } else if (isSVG && key === "xml:lang") {
+    if (nextValue == null || nextValue === false) {
+      el.removeAttributeNS("http://www.w3.org/XML/1998/namespace", "lang");
+    } else {
+      el.setAttributeNS("http://www.w3.org/XML/1998/namespace", "xml:lang", String(nextValue));
+    }
+  } else if (isSVG && key === "xml:space") {
+    if (nextValue == null || nextValue === false) {
+      el.removeAttributeNS("http://www.w3.org/XML/1998/namespace", "space");
+    } else {
+      el.setAttributeNS("http://www.w3.org/XML/1998/namespace", "xml:space", String(nextValue));
+    }
+  } else {
+    domPatchProp(el, key, prevValue, nextValue, isSVG);
+  }
+}
+
+// src/web-event-wrap.ts
+function wrapDOMEvent(e) {
+  return {
+    get type() {
+      return e.type;
+    },
+    get target() {
+      return e.target;
+    },
+    get currentTarget() {
+      return e.currentTarget;
+    },
+    preventDefault() {
+      e.preventDefault();
+    },
+    stopPropagation() {
+      e.stopPropagation();
+    },
+    nativeEvent: e
+  };
+}
+
+// src/web-host.ts
+var reflowCache = /* @__PURE__ */ new WeakMap();
+var REFLOW_CACHE_DURATION = 16;
+var pendingReflowElements = /* @__PURE__ */ new Set();
+var isReflowScheduled = false;
+function scheduleForcedReflow(el) {
+  pendingReflowElements.add(el);
+  if (!isReflowScheduled) {
+    isReflowScheduled = true;
+    requestAnimationFrame(() => {
+      for (const element of pendingReflowElements) {
+        const height = element.offsetHeight;
+        const width = element.offsetWidth;
+        reflowCache.set(element, {
+          width,
+          height,
+          timestamp: Date.now()
+        });
+      }
+      pendingReflowElements.clear();
+      isReflowScheduled = false;
+    });
+  }
+}
+var _WebRendererHost = class _WebRendererHost {
+  constructor() {
+    // FIX: P0-03 渲染宿主标识符号，用于 createRenderer 精确类型检测
+    this.__isRendererHost = true;
+  }
+  static getWrappedHandler(el, event, handler) {
+    const elMap = _WebRendererHost.wrappedHandlerMap.get(el);
+    if (!elMap) return void 0;
+    const eventMap = elMap.get(event);
+    if (!eventMap) return void 0;
+    return eventMap.get(handler);
+  }
+  static setWrappedHandler(el, event, handler, wrapped) {
+    let elMap = _WebRendererHost.wrappedHandlerMap.get(el);
+    if (!elMap) {
+      elMap = /* @__PURE__ */ new Map();
+      _WebRendererHost.wrappedHandlerMap.set(el, elMap);
+    }
+    let eventMap = elMap.get(event);
+    if (!eventMap) {
+      eventMap = /* @__PURE__ */ new Map();
+      elMap.set(event, eventMap);
+    }
+    eventMap.set(handler, wrapped);
+  }
+  // ==========================================================
+  // 一、节点操作 (Node Operations)
+  // ==========================================================
+  /**
+   * 创建元素节点。
+   * SVG 标签使用 createElementNS，普通标签使用 createElement。
+   */
+  createElement(tag, isSVG) {
+    if (isSVG === true || isSVGTag(tag)) {
+      return document.createElementNS(SVG_NS, tag);
+    }
+    return document.createElement(tag);
+  }
+  /** 创建文本节点 */
+  createText(text) {
+    return document.createTextNode(text);
+  }
+  /** 创建注释节点 */
+  createComment(text) {
+    return document.createComment(text);
+  }
+  /** 设置元素文本内容（覆盖所有子节点） */
+  setElementText(node, text) {
+    node.textContent = text;
+  }
+  /** 设置文本/注释节点的内容 */
+  setText(node, text) {
+    node.nodeValue = text;
+  }
+  /**
+   * 在父节点的 anchor 前插入子节点。
+   * anchor 为 null 时追加到末尾。
+   */
+  insert(child, parent, anchor) {
+    parent.insertBefore(child, anchor ?? null);
+  }
+  /** 从父节点移除子节点 */
+  remove(child) {
+    const parent = child.parentNode;
+    if (parent) {
+      parent.removeChild(child);
+    }
+  }
+  /** 获取下一个兄弟节点 */
+  nextSibling(node) {
+    return node.nextSibling;
+  }
+  /** 获取父节点 */
+  parentNode(node) {
+    return node.parentNode;
+  }
+  /**
+   * 查询选择器。
+   */
+  querySelector(selector) {
+    return document.querySelector(selector);
+  }
+  // ==========================================================
+  // 二、属性操作 (Property Operations)
+  // ==========================================================
+  /**
+   * 统一属性 patch 入口。
+   * 委托给 web-patch-props.ts 处理 class/style/event/attr 分发。
+   */
+  patchProp(el, key, prevValue, nextValue, isSVG) {
+    patchProp(el, key, prevValue, nextValue, isSVG);
+  }
+  // ==========================================================
+  // 三、样式操作 (Style Operations)
+  // ==========================================================
+  /** 添加 CSS 类名 */
+  addClass(el, cls) {
+    el.classList.add(cls);
+  }
+  /** 移除 CSS 类名 */
+  removeClass(el, cls) {
+    el.classList.remove(cls);
+  }
+  /** 检查是否包含 CSS 类名 */
+  hasClass(el, cls) {
+    return el.classList.contains(cls);
+  }
+  /**
+   * 设置内联样式属性。
+   * value 为 null/undefined 时移除该样式属性。
+   * FIX: P2-v11-35 添加 SVG 元素兼容检查，
+   * SVG 元素的 style 属性是 CSSStyleDeclaration 但部分属性名不同，
+   * 使用 setProperty/removeProperty 统一处理
+   */
+  setStyle(el, key, value) {
+    const style = el.style;
+    if (value == null) {
+      style.removeProperty(key);
+    } else {
+      style.setProperty(key, value);
+    }
+  }
+  /**
+   * 移除内联样式属性
+   * FIX: P2-16 统一实现风格，与 setStyle 保持一致
+   */
+  removeStyle(el, key) {
+    const style = el.style;
+    style.removeProperty(key);
+  }
+  /**
+   * 获取计算样式。
+   */
+  getComputedStyle(el) {
+    const computed = window.getComputedStyle(el);
+    return {
+      getPropertyValue(prop) {
+        return computed.getPropertyValue(prop);
+      }
+    };
+  }
+  /**
+   * 强制回流/重排。
+   * 读取 offsetHeight 触发浏览器同步布局。
+   * FIX: P2-33 强制同步布局优化 - 添加缓存避免重复读取
+   */
+  forceReflow(el) {
+    scheduleForcedReflow(el);
+  }
+  /**
+   * 获取元素尺寸（带缓存）
+   * FIX: P2-33 强制同步布局优化
+   */
+  getElementSize(el) {
+    const cached = reflowCache.get(el);
+    if (cached && Date.now() - cached.timestamp < REFLOW_CACHE_DURATION) {
+      return { width: cached.width, height: cached.height };
+    }
+    const rect = el.getBoundingClientRect();
+    const size = { width: rect.width, height: rect.height };
+    reflowCache.set(el, { ...size, timestamp: Date.now() });
+    return size;
+  }
+  // ==========================================================
+  // 四、事件操作 (Event Operations)
+  // ==========================================================
+  /**
+   * 添加事件监听器。
+   * 将原生 DOM Event 包装为 HostEvent 后传递给 handler。
+   * 返回一个取消监听的函数。
+   */
+  addEventListener(el, event, handler, options) {
+    const wrappedHandler = (e) => {
+      handler(wrapDOMEvent(e));
+    };
+    _WebRendererHost.setWrappedHandler(el, event, handler, wrappedHandler);
+    el.addEventListener(event, wrappedHandler, options);
+    return () => {
+      el.removeEventListener(event, wrappedHandler, options);
+      const elMap = _WebRendererHost.wrappedHandlerMap.get(el);
+      if (elMap) {
+        const eventMap = elMap.get(event);
+        if (eventMap) {
+          eventMap.delete(handler);
+          if (eventMap.size === 0) elMap.delete(event);
+          if (elMap.size === 0) _WebRendererHost.wrappedHandlerMap.delete(el);
+        }
+      }
+    };
+  }
+  /**
+   * 移除事件监听器。
+   */
+  removeEventListener(el, event, handler, options) {
+    const wrappedHandler = _WebRendererHost.getWrappedHandler(el, event, handler);
+    if (wrappedHandler) {
+      el.removeEventListener(
+        event,
+        wrappedHandler,
+        options
+      );
+      const elMap = _WebRendererHost.wrappedHandlerMap.get(el);
+      if (elMap) {
+        const eventMap = elMap.get(event);
+        if (eventMap) {
+          eventMap.delete(handler);
+          if (eventMap.size === 0) elMap.delete(event);
+          if (elMap.size === 0) _WebRendererHost.wrappedHandlerMap.delete(el);
+        }
+      }
+    } else {
+      el.removeEventListener(
+        event,
+        handler,
+        options
+      );
+    }
+  }
+  // ==========================================================
+  // 五、过渡动画 (Transition Operations)
+  // ==========================================================
+  /**
+   * 获取元素的几何边界信息。
+   */
+  getBoundingClientRect(el) {
+    const rect = el.getBoundingClientRect();
+    return {
+      left: rect.left,
+      top: rect.top,
+      width: rect.width,
+      height: rect.height,
+      right: rect.right,
+      bottom: rect.bottom
+    };
+  }
+  /** 获取元素的指定属性值 */
+  getAttribute(el, key) {
+    return el.getAttribute(key);
+  }
+  /**
+   * 获取过渡/动画时长信息。
+   * 通过读取计算样式中的 transition-duration / animation-duration 获取。
+   */
+  getTransitionInfo(el, _type) {
+    const computed = window.getComputedStyle(el);
+    const transitionDuration = parseDuration(computed.getPropertyValue("transition-duration"));
+    const animationDuration = parseDuration(computed.getPropertyValue("animation-duration"));
+    const hasTransition = transitionDuration > 0;
+    const hasAnimation = animationDuration > 0;
+    const duration = hasTransition ? transitionDuration : animationDuration;
+    return { duration, hasTransition, hasAnimation };
+  }
+  // ==========================================================
+  // 六、时序调度 (Timing Operations)
+  // ==========================================================
+  /**
+   * 请求下一帧回调（双 rAF 确保浏览器已绘制）。
+   */
+  nextFrame(fn) {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(fn);
+    });
+  }
+  /**
+   * 延迟执行。
+   */
+  setTimeout(fn, ms) {
+    return window.setTimeout(fn, ms);
+  }
+  /** 取消延迟执行 */
+  clearTimeout(id) {
+    window.clearTimeout(id);
+  }
+  // ==========================================================
+  // 七、其他 (Miscellaneous)
+  // ==========================================================
+  /**
+   * 获取元素的 namespaceURI（用于 SVG 检测）。
+   */
+  getNamespaceURI(el) {
+    return el.namespaceURI;
+  }
+  /**
+   * 替换子节点（用于 hydration mismatch 处理）。
+   */
+  replaceChild(parent, newChild, oldChild) {
+    parent.replaceChild(newChild, oldChild);
+  }
+  /**
+   * 获取子节点列表（用于 hydration）。
+   */
+  getChildNodes(el) {
+    return Array.from(el.childNodes);
+  }
+  /**
+   * 获取节点类型（用于 hydration 判断）。
+   */
+  getNodeType(node) {
+    return node.nodeType;
+  }
+  /**
+   * 获取元素标签名（用于 hydration 匹配）。
+   * 返回小写标签名。
+   */
+  getTagName(el) {
+    return el.tagName.toLowerCase();
+  }
+};
+// FIX: P0-12 使用 WeakMap 存储包装后的 handler 映射，
+// 确保 removeEventListener 能正确找到并移除 addEventListener 时包装的 handler
+// FIX: P2-47 事件委托性能优化：WeakMap 自动 GC，无需手动清理
+_WebRendererHost.wrappedHandlerMap = /* @__PURE__ */ new WeakMap();
+var WebRendererHost = _WebRendererHost;
+
+// src/web-dom-renderer.ts
+import { createRenderer } from "@lytjs/vdom";
+import { withFirstRenderOptimization } from "@lytjs/reactivity";
+function createDOMRenderer(extraOptions) {
+  const vnodeMap = /* @__PURE__ */ new WeakMap();
+  const host = new WebRendererHost();
+  const options = {
+    createElement(tag) {
+      return host.createElement(tag);
+    },
+    setElementText(node, text) {
+      host.setElementText(node, text);
+    },
+    insert(child, parent, anchor) {
+      host.insert(child, parent, anchor);
+    },
+    remove(child) {
+      host.remove(child);
+    },
+    createText(text) {
+      return host.createText(text);
+    },
+    setText(node, text) {
+      host.setText(node, text);
+    },
+    nextSibling(node) {
+      return host.nextSibling(node);
+    },
+    parentNode(node) {
+      return host.parentNode(node);
+    },
+    patchProp(el, key, prevValue, nextValue) {
+      const isSVG = host.getNamespaceURI ? host.getNamespaceURI(el) === "http://www.w3.org/2000/svg" : false;
+      host.patchProp(el, key, prevValue, nextValue, isSVG);
+    },
+    createComment(text) {
+      return host.createComment(text);
+    },
+    querySelector(selector) {
+      return host.querySelector(selector);
+    },
+    ...extraOptions?.setupChildComponent ? { setupChildComponent: extraOptions.setupChildComponent } : {},
+    ...extraOptions?.normalizeProps ? { normalizeProps: extraOptions.normalizeProps } : {}
+  };
+  const renderer = createRenderer(options);
+  const vnodeResourceMap = /* @__PURE__ */ new WeakMap();
+  const cleanupVNodeResources = (vnode) => {
+    const resources = vnodeResourceMap.get(vnode);
+    if (resources) {
+      for (const cleanupFn of resources) {
+        try {
+          cleanupFn();
+        } catch (e) {
+          if (typeof console !== "undefined") {
+            console.warn("[lytjs/adapter-web] Error during VNode resource cleanup:", e);
+          }
+        }
+      }
+      resources.clear();
+      vnodeResourceMap.delete(vnode);
+    }
+  };
+  return {
+    render(vnode, container) {
+      if (vnode == null) {
+        const existing = vnodeMap.get(container);
+        if (existing) {
+          cleanupVNodeResources(existing);
+          renderer.unmount(existing);
+          vnodeMap.delete(container);
+        }
+        if (container.firstChild) {
+          if (typeof container.replaceChildren === "function") {
+            container.replaceChildren();
+          } else {
+            while (container.firstChild) {
+              container.removeChild(container.firstChild);
+            }
+          }
+        }
+      } else {
+        const existing = vnodeMap.get(container) ?? null;
+        if (existing === null) {
+          withFirstRenderOptimization(() => {
+            renderer.patch(null, vnode, container);
+          });
+        } else {
+          renderer.patch(existing, vnode, container);
+        }
+        vnodeMap.set(container, vnode);
+      }
+    },
+    patch: renderer.patch,
+    unmount(vnode) {
+      cleanupVNodeResources(vnode);
+      renderer.unmount(vnode);
+    },
+    mount: renderer.mount,
+    move(vnode, container, anchor, _parentComponent, _parentSuspense) {
+      renderer.move(vnode, container, anchor, _parentComponent ?? null, _parentSuspense ?? null);
+    }
+  };
+}
+
+// src/web-hydration.ts
+import { Fragment, Text, Comment, ShapeFlags } from "@lytjs/vdom";
+import { isArray, isFunction } from "@lytjs/common-is";
+import "@lytjs/common-error";
+function warnHydrationMismatch(type, expected, actual) {
+  if (false) {
+    warn(
+      `Hydration mismatch: expected ${type} "${expected}" but got "${actual}". The DOM has been patched to match the vnode.`
+    );
+  }
+}
+function hydrateFragment(vnode, parent, index, host) {
+  const { children } = vnode;
+  const childArray = isArray(children) ? children : [];
+  let currentIndex = index;
+  let hasMismatch = false;
+  for (let i = 0; i < childArray.length; i++) {
+    const child = childArray[i];
+    if (child != null) {
+      currentIndex = hydrateNode(child, parent, currentIndex, host);
+    }
+  }
+  if (childArray.length > 0) {
+    const childNodes = host.getChildNodes(parent);
+    const firstChild = childNodes[index] ?? null;
+    if (firstChild && childArray[0] && childArray[0].el === firstChild) {
+      vnode.el = firstChild;
+    } else if (childArray[0] && childArray[0].el) {
+      vnode.el = childArray[0].el;
+      hasMismatch = true;
+    } else {
+      vnode.el = null;
+    }
+  } else {
+    vnode.el = null;
+  }
+  if (hasMismatch && false) {
+    warn(
+      `Hydration mismatch in Fragment: some children could not be matched. The DOM has been patched to match the vnode.`
+    );
+  }
+  return currentIndex;
+}
+function hydrateText(vnode, parent, index, host) {
+  const { children } = vnode;
+  const childNodes = host.getChildNodes(parent);
+  const node = childNodes[index];
+  if (isFunction(children)) {
+    if (false) {
+      warn(
+        `Hydration: Text VNode children is a function, which is not supported during hydration. The function will be replaced with an empty string.`
+      );
+    }
+  }
+  const text = isFunction(children) ? "" : String(children ?? "");
+  if (node && host.getNodeType(node) === Node.TEXT_NODE) {
+    if (node.textContent !== text) {
+      warnHydrationMismatch("text content", text, node.textContent ?? "");
+      node.textContent = text;
+    }
+    vnode.el = node;
+  } else {
+    warnHydrationMismatch(
+      "node type",
+      `Text("${text}")`,
+      node && host.getNodeType(node) === Node.ELEMENT_NODE ? `Element(<${host.getTagName(node)}>)` : node ? `Node(type=${host.getNodeType(node)})` : "none"
+    );
+    const newNode = host.createText(text);
+    if (node) {
+      host.replaceChild(parent, newNode, node);
+    } else {
+      host.insert(newNode, parent);
+    }
+    vnode.el = newNode;
+  }
+  return index + 1;
+}
+function hydrateComment(vnode, parent, index, host) {
+  const { children } = vnode;
+  const childNodes = host.getChildNodes(parent);
+  const node = childNodes[index];
+  const text = isFunction(children) ? "" : String(children ?? "");
+  if (node && host.getNodeType(node) === Node.COMMENT_NODE) {
+    if (node.textContent !== text) {
+      warnHydrationMismatch("comment content", text, node.textContent ?? "");
+      node.textContent = text;
+    }
+    vnode.el = node;
+  } else {
+    warnHydrationMismatch(
+      "node type",
+      `Comment("${text}")`,
+      node ? host.getNodeType(node) === Node.TEXT_NODE ? `Text("${node.textContent}")` : `Element(<${host.getTagName(node)}>)` : "none"
+    );
+    const newNode = host.createComment(text);
+    if (node) {
+      host.replaceChild(parent, newNode, node);
+    } else {
+      host.insert(newNode, parent);
+    }
+    vnode.el = newNode;
+  }
+  return index + 1;
+}
+function hydrateMatchedElement(vnode, existingNode, host) {
+  const { shapeFlag, children, props } = vnode;
+  vnode.el = existingNode;
+  const isSVG = host.getNamespaceURI?.(existingNode) === "http://www.w3.org/2000/svg";
+  const vnodeProps = props ?? {};
+  for (const key of Object.keys(vnodeProps)) {
+    if (key === "key" || key === "ref") continue;
+    patchProp(existingNode, key, null, vnodeProps[key], isSVG);
+  }
+  let childIndex = 0;
+  if (shapeFlag & ShapeFlags.ARRAY_CHILDREN && isArray(children)) {
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      if (child != null) {
+        childIndex = hydrateNode(child, existingNode, childIndex, host);
+      }
+    }
+  } else if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
+    const text = String(children ?? "");
+    const elChildren2 = host.getChildNodes(existingNode);
+    const firstChild = elChildren2[0];
+    if (firstChild && host.getNodeType(firstChild) === Node.TEXT_NODE) {
+      if (firstChild.textContent !== text) {
+        firstChild.textContent = text;
+      }
+    } else {
+      existingNode.textContent = text;
+    }
+    childIndex = 1;
+  }
+  const elChildren = host.getChildNodes(existingNode);
+  while (elChildren.length > childIndex) {
+    host.remove(elChildren[elChildren.length - 1]);
+    elChildren.pop();
+  }
+  return childIndex;
+}
+function hydrateMismatchedElement(vnode, parent, existingNode, host) {
+  const { type, shapeFlag, children, props } = vnode;
+  const tag = type;
+  warnHydrationMismatch(
+    "element tag",
+    `<${tag}>`,
+    existingNode ? `<${host.getTagName(existingNode)}>` : "none"
+  );
+  const parentNamespace = host.getNamespaceURI?.(parent);
+  const isSVG = tag === "svg" || parentNamespace === "http://www.w3.org/2000/svg";
+  const newEl = host.createElement(tag, isSVG);
+  vnode.el = newEl;
+  const vnodeProps = props ?? {};
+  for (const key of Object.keys(vnodeProps)) {
+    if (key === "key" || key === "ref") continue;
+    patchProp(newEl, key, null, vnodeProps[key], isSVG);
+  }
+  if (shapeFlag & ShapeFlags.ARRAY_CHILDREN && isArray(children)) {
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      if (child != null) {
+        hydrateNode(child, newEl, i, host);
+      }
+    }
+  } else if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
+    host.setElementText(newEl, String(children ?? ""));
+  }
+  if (existingNode) {
+    host.replaceChild(parent, newEl, existingNode);
+  } else {
+    host.insert(newEl, parent);
+  }
+}
+function hydrateElement(vnode, parent, index, host) {
+  const { type } = vnode;
+  const tag = type;
+  const childNodes = host.getChildNodes(parent);
+  const existingNode = childNodes[index];
+  if (existingNode && host.getNodeType(existingNode) === Node.ELEMENT_NODE && host.getTagName(existingNode) === tag.toLowerCase()) {
+    hydrateMatchedElement(vnode, existingNode, host);
+  } else {
+    hydrateMismatchedElement(vnode, parent, existingNode, host);
+  }
+  return index + 1;
+}
+function hydrateNode(vnode, parent, index, host) {
+  const { type, shapeFlag } = vnode;
+  if (type === Fragment) {
+    return hydrateFragment(vnode, parent, index, host);
+  }
+  if (type === Text) {
+    return hydrateText(vnode, parent, index, host);
+  }
+  if (type === Comment) {
+    return hydrateComment(vnode, parent, index, host);
+  }
+  if (shapeFlag & ShapeFlags.ELEMENT) {
+    return hydrateElement(vnode, parent, index, host);
+  }
+  if (false) {
+    warn(`Hydration: unrecognized node type, skipping.`);
+  }
+  return index + 1;
+}
+function createHydrationFunctions(_rendererOptions, sharedVnodeMap) {
+  const host = new WebRendererHost();
+  const vnodeMap = sharedVnodeMap ?? /* @__PURE__ */ new WeakMap();
+  function hydrate(vnode, container) {
+    hydrateNode(vnode, container, 0, host);
+    vnodeMap.set(container, vnode);
+  }
+  return { hydrate };
+}
+
+// src/index.ts
+import { normalizeEventName as normalizeEventName3, getEventKey as getEventKey3, parseEventModifier as parseEventModifier3 } from "@lytjs/common-events";
+
+// src/web-host-extended.ts
+function detectHostCapabilities() {
+  const caps = {
+    shadowDOM: false,
+    customElements: false,
+    slots: false,
+    template: false,
+    cssVariables: false,
+    resizeObserver: false,
+    intersectionObserver: false,
+    mutationObserver: false,
+    webAnimations: false,
+    cssAnimations: false,
+    cssTransitions: false
+  };
+  if (typeof window === "undefined") {
+    return caps;
+  }
+  caps.shadowDOM = "attachShadow" in HTMLElement.prototype;
+  caps.customElements = "customElements" in window;
+  caps.slots = "HTMLSlotElement" in window;
+  caps.template = "HTMLTemplateElement" in window;
+  try {
+    caps.cssVariables = window.CSS && CSS.supports && CSS.supports("color", "var(--test)");
+  } catch {
+    caps.cssVariables = false;
+  }
+  caps.resizeObserver = "ResizeObserver" in window;
+  caps.intersectionObserver = "IntersectionObserver" in window;
+  caps.mutationObserver = "MutationObserver" in window;
+  caps.webAnimations = "animate" in Element.prototype;
+  caps.cssAnimations = true;
+  caps.cssTransitions = true;
+  return caps;
+}
+function createExtendedWebHost(options) {
+  const { baseHost } = options;
+  const extendedHost = {
+    ...baseHost,
+    // FIX: P2-v11-31 添加 Document 类型检查，
+    // Document 节点也支持 insertBefore/replaceChild 操作
+    insertBefore(parent, newChild, referenceNode) {
+      if (parent instanceof Element || parent instanceof DocumentFragment || parent instanceof Document) {
+        parent.insertBefore(newChild, referenceNode);
+      }
+    },
+    replaceChild(parent, newChild, oldChild) {
+      if (parent instanceof Element || parent instanceof DocumentFragment || parent instanceof Document) {
+        parent.replaceChild(newChild, oldChild);
+      }
+      return oldChild;
+    },
+    firstChild(node) {
+      const child = node.firstChild;
+      return child;
+    },
+    lastChild(node) {
+      const child = node.lastChild;
+      return child;
+    },
+    contains(parent, child) {
+      if (parent instanceof Element) {
+        return parent.contains(child);
+      }
+      return false;
+    },
+    // 扩展的属性操作
+    getAttributeNames(el) {
+      if (el instanceof Element) {
+        return Array.from(el.getAttributeNames());
+      }
+      return [];
+    },
+    setAttributes(el, attrs) {
+      if (el instanceof Element) {
+        Object.entries(attrs).forEach(([key, value]) => {
+          if (value == null) {
+            el.removeAttribute(key);
+          } else {
+            el.setAttribute(key, String(value));
+          }
+        });
+      }
+    },
+    removeAttributes(el, keys) {
+      if (el instanceof Element) {
+        keys.forEach((key) => el.removeAttribute(key));
+      }
+    },
+    // 扩展的样式操作
+    setStyles(el, styles) {
+      if (el instanceof HTMLElement) {
+        Object.entries(styles).forEach(([key, value]) => {
+          if (value == null) {
+            el.style.removeProperty(key);
+          } else {
+            el.style.setProperty(key, String(value));
+          }
+        });
+      }
+    },
+    getClassList(el) {
+      if (el instanceof Element) {
+        return Array.from(el.classList);
+      }
+      return [];
+    },
+    toggleClass(el, cls, force) {
+      if (el instanceof Element) {
+        return el.classList.toggle(cls, force);
+      }
+      return false;
+    },
+    // 扩展的事件操作
+    dispatchEvent(el, event, detail) {
+      if (el instanceof Element) {
+        let evt;
+        if (typeof event === "string") {
+          evt = detail !== void 0 ? new CustomEvent(event, { detail }) : new Event(event);
+        } else {
+          evt = event;
+        }
+        return el.dispatchEvent(evt);
+      }
+      return false;
+    },
+    onceEventListener(el, event, handler, options2) {
+      if (el instanceof Element) {
+        const wrappedHandler = (e) => {
+          const hostEvent = {
+            type: e.type,
+            nativeEvent: e,
+            target: e.target,
+            currentTarget: e.currentTarget,
+            preventDefault: () => e.preventDefault(),
+            stopPropagation: () => e.stopPropagation()
+          };
+          handler(hostEvent);
+          el.removeEventListener(event, wrappedHandler, options2);
+        };
+        el.addEventListener(event, wrappedHandler, options2);
+        return () => el.removeEventListener(event, wrappedHandler, options2);
+      }
+      return () => {
+      };
+    },
+    // 扩展的 DOM 查询
+    querySelectorAll(selector, context) {
+      const root = context ?? (typeof document !== "undefined" ? document : null);
+      if (root instanceof Element || root instanceof Document) {
+        return Array.from(root.querySelectorAll(selector));
+      }
+      return [];
+    },
+    getElementById(id) {
+      if (typeof document !== "undefined") {
+        return document.getElementById(id);
+      }
+      return null;
+    },
+    getElementsByClassName(className, context) {
+      const root = context ?? (typeof document !== "undefined" ? document.body : null);
+      if (root instanceof Element) {
+        return Array.from(root.getElementsByClassName(className));
+      }
+      return [];
+    },
+    getElementsByTagName(tag, context) {
+      const root = context ?? (typeof document !== "undefined" ? document.body : null);
+      if (root instanceof Element) {
+        return Array.from(root.getElementsByTagName(tag));
+      }
+      return [];
+    },
+    // 扩展的滚动操作
+    scrollIntoView(el, options2) {
+      if (el instanceof Element) {
+        el.scrollIntoView(options2);
+      }
+    },
+    getScrollPosition(el) {
+      if (el instanceof Element) {
+        return { scrollLeft: el.scrollLeft, scrollTop: el.scrollTop };
+      }
+      if (typeof window !== "undefined" && el === null) {
+        return {
+          scrollLeft: window.pageXOffset || document.documentElement.scrollLeft,
+          scrollTop: window.pageYOffset || document.documentElement.scrollTop
+        };
+      }
+      return { scrollLeft: 0, scrollTop: 0 };
+    },
+    setScrollPosition(el, left, top) {
+      if (el instanceof Element) {
+        el.scrollLeft = left;
+        el.scrollTop = top;
+      } else if (el === null && typeof window !== "undefined") {
+        window.scrollTo(left, top);
+      }
+    },
+    // 扩展的尺寸操作
+    getElementSize(el) {
+      if (el instanceof Element) {
+        const rect = el.getBoundingClientRect();
+        const isHTMLElement = el instanceof HTMLElement;
+        return {
+          width: rect.width,
+          height: rect.height,
+          clientWidth: isHTMLElement ? el.clientWidth : 0,
+          clientHeight: isHTMLElement ? el.clientHeight : 0,
+          scrollWidth: isHTMLElement ? el.scrollWidth : 0,
+          scrollHeight: isHTMLElement ? el.scrollHeight : 0
+        };
+      }
+      return {
+        width: 0,
+        height: 0,
+        clientWidth: 0,
+        clientHeight: 0,
+        scrollWidth: 0,
+        scrollHeight: 0
+      };
+    },
+    getElementOffset(el) {
+      if (el instanceof Element) {
+        const rect = el.getBoundingClientRect();
+        return {
+          left: rect.left + window.pageXOffset,
+          top: rect.top + window.pageYOffset
+        };
+      }
+      return { left: 0, top: 0 };
+    }
+  };
+  return extendedHost;
+}
+var cachedCapabilities = null;
+function supportsHostCapability(capability) {
+  if (!cachedCapabilities) {
+    cachedCapabilities = detectHostCapabilities();
+  }
+  return cachedCapabilities[capability];
+}
+function waitForHostReady() {
+  return new Promise((resolve) => {
+    if (typeof document !== "undefined") {
+      if (document.readyState === "complete") {
+        resolve();
+      } else {
+        window.addEventListener("load", () => resolve(), { once: true });
+      }
+    } else {
+      resolve();
+    }
+  });
+}
+
+// src/index.ts
+var WebRendererHost2 = WebRendererHost;
+function createWebHost() {
+  return new WebRendererHost2();
+}
+export {
+  WebRendererHost,
+  createDOMRenderer,
+  createExtendedWebHost,
+  createHydrationFunctions,
+  createInvoker,
+  createWebHost,
+  detectHostCapabilities,
+  getEventKey3 as getEventKey,
+  normalizeEventName3 as normalizeEventName,
+  parseEventModifier3 as parseEventModifier,
+  patchAttr,
+  patchClass,
+  patchEvent,
+  patchProp,
+  patchStyle,
+  removeAllEventListeners,
+  supportsHostCapability,
+  waitForHostReady,
+  wrapDOMEvent
+};