@vobs/runtime 1.7.8 → 1.8.1

package/dist/ops.cjs

@@ -24,17 +24,22 @@ var ops_exports = {};
 __export(ops_exports, {
   SVG_NAMESPACE: () => SVG_NAMESPACE,
   addEventListener: () => addEventListener,
+  applyClassList: () => applyClassList,
   associateNodeOwner: () => associateNodeOwner,
+  bindSpreadProps: () => bindSpreadProps,
   clear: () => clear,
   createBlock: () => createBlock,
   createComment: () => createComment,
   createComponent: () => createComponent,
   createElement: () => createElement,
+  createSvgElement: () => createSvgElement,
   createText: () => createText,
   disposeNodeOwner: () => disposeNodeOwner,
   getRenderer: () => getRenderer,
   insertBefore: () => insertBefore,
+  parseClassList: () => parseClassList,
   registerSelectValueBinding: () => registerSelectValueBinding,
+  removeAttribute: () => removeAttribute,
   removeChild: () => removeChild,
   removeEventListener: () => removeEventListener,
   setAttribute: () => setAttribute,
@@ -54,6 +59,337 @@ function isVobsFragment(value) {
 }
 __name(isVobsFragment, "isVobsFragment");
 
+// packages/runtime/src/dom-props.ts
+var PROPERTY_NAMES = /* @__PURE__ */ new Set([
+  // 表单状态
+  "value",
+  "checked",
+  "selected",
+  "disabled",
+  "multiple",
+  "readOnly",
+  "required",
+  "defaultValue",
+  "defaultChecked",
+  "indeterminate",
+  /*
+   * `autoFocus` 用**驼峰**（与同表 readOnly/tabIndex/defaultChecked 一致），且必须走
+   * **property 通道**：`autofocus` 是**布尔属性**（只看存在与否、与值无关），
+   * 所以 `autoFocus={false}` 必须"移除属性"而不是写 `autofocus="false"`
+   * （attribute 通道只能把 false 序列化成字符串，属性照样存在 = 仍然聚焦）。
+   *
+   * ⚠️ 但 `setProperty` 必须把它映射成 **IDL 名 `autofocus`（全小写）** ——
+   * `Reflect.set(el, 'autoFocus', …)` 只会挂一个不反射的 expando，**静默无效**。
+   * 映射表见 ops.ts 的 `PROPERTY_IDL_NAMES`。实测（jsdom，与真实 DOM 同语义）：
+   *   IDL `autofocus` → 写 true 得 has=true/idl=true；写 false 得 has=false/idl=false ✓
+   *   JSX `autoFocus` → 属性与 IDL 都不变（只是 expando）                        ✗
+   */
+  "autoFocus",
+  "hidden",
+  "tabIndex",
+  "colSpan",
+  "rowSpan",
+  "open",
+  // 只能走 property 的（attribute 路径会静默无效）
+  "innerHTML",
+  "innerText",
+  "textContent",
+  // 媒体
+  "muted",
+  "volume",
+  "currentTime",
+  "playbackRate"
+]);
+var ATTRIBUTE_ALIASES = {
+  className: "class",
+  htmlFor: "for",
+  autoComplete: "autocomplete",
+  spellCheck: "spellcheck"
+};
+var SVG_KEBAB_ATTRIBUTES = /* @__PURE__ */ new Set([
+  // stroke
+  "strokeWidth",
+  "strokeLinecap",
+  "strokeLinejoin",
+  "strokeDasharray",
+  "strokeDashoffset",
+  "strokeMiterlimit",
+  "strokeOpacity",
+  // fill
+  "fillOpacity",
+  "fillRule",
+  // clip（注意 clipPathUnits 是结构属性，不在这里）
+  "clipPath",
+  "clipRule",
+  // 文本对齐
+  "textAnchor",
+  "dominantBaseline",
+  "alignmentBaseline",
+  "baselineShift",
+  // 字体
+  "fontFamily",
+  "fontSize",
+  "fontSizeAdjust",
+  "fontStretch",
+  "fontStyle",
+  "fontVariant",
+  "fontWeight",
+  "letterSpacing",
+  "wordSpacing",
+  // marker 的表现属性（markerWidth / markerHeight / markerUnits 是结构属性，不在这里）
+  "markerStart",
+  "markerMid",
+  "markerEnd",
+  // 颜色
+  "colorInterpolation",
+  "colorInterpolationFilters",
+  "colorProfile",
+  "colorRendering",
+  "floodColor",
+  "floodOpacity",
+  "lightingColor",
+  "stopColor",
+  "stopOpacity",
+  "glyphOrientationHorizontal",
+  "glyphOrientationVertical",
+  // 渲染与合成
+  "imageRendering",
+  "paintOrder",
+  "pointerEvents",
+  "shapeRendering",
+  "textDecoration",
+  "textRendering",
+  "transformOrigin",
+  "vectorEffect",
+  "writingMode"
+]);
+function isPropertyName(name) {
+  return PROPERTY_NAMES.has(name);
+}
+__name(isPropertyName, "isPropertyName");
+function domAttributeName(name) {
+  const alias = ATTRIBUTE_ALIASES[name];
+  if (alias !== void 0) return alias;
+  if (SVG_KEBAB_ATTRIBUTES.has(name)) return name.replace(/[A-Z]/gu, (letter) => `-${letter.toLowerCase()}`);
+  return name;
+}
+__name(domAttributeName, "domAttributeName");
+
+// packages/runtime/src/dom-events.ts
+var EVENT_NAME_ALIASES = {
+  // React 风格的 onDoubleClick 对应的 DOM 事件是 dblclick
+  doubleclick: "dblclick",
+  // 少数人按 addEventListener 的写法写成 onDblClick
+  dblclick: "dblclick"
+};
+function resolveEventName(attributeName) {
+  if (!attributeName.startsWith("on") || attributeName.length <= 2) return void 0;
+  const lowered = attributeName.slice(2).toLowerCase();
+  return EVENT_NAME_ALIASES[lowered] ?? lowered;
+}
+__name(resolveEventName, "resolveEventName");
+
+// packages/runtime/src/svg.ts
+var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+var SVG_TAGS = /* @__PURE__ */ new Set([
+  "animate",
+  "animateMotion",
+  "animateTransform",
+  "circle",
+  "clipPath",
+  "defs",
+  "desc",
+  "ellipse",
+  "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",
+  "filter",
+  "foreignObject",
+  "g",
+  "image",
+  "line",
+  "linearGradient",
+  "marker",
+  "mask",
+  "metadata",
+  "mpath",
+  "path",
+  "pattern",
+  "polygon",
+  "polyline",
+  "radialGradient",
+  "rect",
+  "set",
+  "stop",
+  "svg",
+  "switch",
+  "symbol",
+  "text",
+  "textPath",
+  "tspan",
+  "use",
+  "view"
+]);
+function isSvgTag(tag) {
+  return SVG_TAGS.has(tag);
+}
+__name(isSvgTag, "isSvgTag");
+
+// packages/runtime/src/error.ts
+var _VobsError = class _VobsError extends Error {
+  constructor(options) {
+    super(options.message);
+    this.name = "VobsError";
+    this.code = options.code;
+    this.severity = options.severity ?? "error";
+    this.layer = options.layer ?? "runtime";
+    this.cause = options.cause;
+    this.fix = options.fix;
+    this.location = options.location;
+    this.trace = options.trace;
+    this.example = options.example;
+    this.docs = options.docs;
+    this.codeFrame = options.codeFrame;
+  }
+};
+__name(_VobsError, "VobsError");
+var VobsError = _VobsError;
+function isVobsError(value) {
+  return value instanceof VobsError || Boolean(value && typeof value === "object" && typeof value.code === "string" && typeof value.message === "string");
+}
+__name(isVobsError, "isVobsError");
+function isForeignVobsError(value) {
+  return value instanceof Error && value.name === "VobsError" && typeof value.code === "string";
+}
+__name(isForeignVobsError, "isForeignVobsError");
+function describeUnknown(value) {
+  if (value === null || value === void 0) return String(value);
+  if (typeof value === "string") return value;
+  if (typeof value === "object") {
+    const message = value.message;
+    if (typeof message === "string" && message !== "") return message;
+    try {
+      return JSON.stringify(value) ?? String(value);
+    } catch {
+      return String(value);
+    }
+  }
+  return String(value);
+}
+__name(describeUnknown, "describeUnknown");
+function adoptVobsError(value, defaults) {
+  return new VobsError({
+    code: value.code,
+    message: value.message,
+    severity: value.severity ?? defaults.severity,
+    layer: value.layer ?? defaults.layer,
+    cause: value.cause ?? (value instanceof Error ? value : void 0),
+    fix: value.fix ?? defaults.fix,
+    location: value.location,
+    trace: value.trace,
+    example: value.example,
+    docs: value.docs,
+    codeFrame: value.codeFrame
+  });
+}
+__name(adoptVobsError, "adoptVobsError");
+function normalizeVobsError(value, defaults = {}) {
+  if (value instanceof VobsError) return value;
+  if (isForeignVobsError(value)) return adoptVobsError(value, defaults);
+  if (value instanceof Error) {
+    const metadata = value;
+    const code = defaults.code ?? (typeof metadata.vobsCode === "string" ? metadata.vobsCode : void 0);
+    if (code) {
+      defineErrorMetadata(value, "code", code);
+      if (value.code !== code) {
+        return new VobsError({
+          code,
+          message: value.message,
+          severity: defaults.severity ?? "error",
+          layer: defaults.layer ?? "runtime",
+          cause: value,
+          fix: defaults.fix ?? (typeof metadata.vobsHint === "string" ? metadata.vobsHint : void 0)
+        });
+      }
+    }
+    defineErrorMetadata(value, "severity", defaults.severity ?? "error");
+    defineErrorMetadata(value, "layer", defaults.layer ?? "runtime");
+    const fix = defaults.fix ?? (typeof metadata.vobsHint === "string" ? metadata.vobsHint : void 0);
+    if (fix) defineErrorMetadata(value, "fix", fix);
+    const source = metadata.vobsSource;
+    if (source && typeof source === "object" && typeof source.file === "string" && typeof source.line === "number" && typeof source.column === "number") {
+      defineErrorMetadata(value, "location", source);
+    }
+    return value;
+  }
+  if (isVobsError(value)) return adoptVobsError(value, defaults);
+  return new VobsError({
+    code: defaults.code ?? "VOBS_UNKNOWN",
+    message: describeUnknown(value),
+    severity: defaults.severity ?? "error",
+    layer: defaults.layer ?? "runtime",
+    cause: void 0,
+    fix: defaults.fix
+  });
+}
+__name(normalizeVobsError, "normalizeVobsError");
+function defineErrorMetadata(target, key, value) {
+  if (key in target) return;
+  try {
+    Object.defineProperty(target, key, { configurable: true, enumerable: false, value, writable: true });
+  } catch {
+  }
+}
+__name(defineErrorMetadata, "defineErrorMetadata");
+function formatVobsError(value, options = {}) {
+  const error = normalizeVobsError(value);
+  const code = error.code || "VOBS_UNKNOWN";
+  const severity = error.severity || "error";
+  if (options.environment === "production") return `[Vobs ${code}] ${error.message}`;
+  const lines = [`[Vobs ${capitalize(severity)}] ${error.message}`, `Code: ${code}`];
+  if (error.location) lines.push(`Location: ${error.location.file}:${error.location.line}:${error.location.column}`);
+  if (error.codeFrame) lines.push("", error.codeFrame);
+  if (error.cause !== void 0) lines.push(`Cause: ${formatCause(error.cause)}`);
+  if (error.trace?.length) lines.push("", `Trace: ${error.trace.join(" \u2192 ")}`);
+  if (error.fix) lines.push("", `Fix: ${error.fix}`);
+  if (error.example) lines.push("", `Example:
+${error.example}`);
+  if (error.docs) lines.push(`Docs: ${error.docs}`);
+  if (options.includeStack && error.stack) lines.push("", error.stack);
+  return lines.join("\n");
+}
+__name(formatVobsError, "formatVobsError");
+function formatCause(value) {
+  return value instanceof Error ? `${value.name}: ${value.message}` : String(value);
+}
+__name(formatCause, "formatCause");
+function capitalize(value) {
+  return value.slice(0, 1).toUpperCase() + value.slice(1);
+}
+__name(capitalize, "capitalize");
+
 // packages/runtime/src/debug.ts
 var activeRuntimeDebugHooks = null;
 function getRuntimeDebugHooks() {
@@ -119,15 +455,34 @@ __name(associateHmrInstance, "associateHmrInstance");
 
 // packages/runtime/src/ref.ts
 var import_reactivity2 = require("@vobs/reactivity");
+var refCleanups = /* @__PURE__ */ new WeakMap();
+function rememberRefCleanup(owner, target, cleanup) {
+  let byTarget = refCleanups.get(owner);
+  if (!byTarget) {
+    byTarget = /* @__PURE__ */ new WeakMap();
+    refCleanups.set(owner, byTarget);
+  }
+  const previous = byTarget.get(target);
+  if (previous) owner.removeCleanup(previous);
+  byTarget.set(target, cleanup);
+}
+__name(rememberRefCleanup, "rememberRefCleanup");
 function setRef(node, target) {
   if (!isRefTarget(target)) return;
   if (isSSRNode(node)) return;
   const owner = (0, import_reactivity2.getCurrentOwner)();
   assignRef(target, node);
-  owner?.onDispose(() => {
-    if (isObjectRef(target) && target.current !== node) return;
-    assignRef(target, null);
-  });
+  if (!owner) return;
+  const cleanup = /* @__PURE__ */ __name(() => {
+    try {
+      if (isObjectRef(target) && target.current !== node) return;
+      assignRef(target, null);
+    } catch (error) {
+      console.error(formatVobsError(error, { includeStack: true }));
+    }
+  }, "cleanup");
+  rememberRefCleanup(owner, target, cleanup);
+  owner.onDispose(cleanup);
 }
 __name(setRef, "setRef");
 function isSSRNode(value) {
@@ -147,7 +502,8 @@ function assignRef(target, value) {
   try {
     if (typeof target === "function") target(value);
     else target.current = value;
-  } catch {
+  } catch (error) {
+    console.error(formatVobsError(error, { includeStack: true }));
   }
 }
 __name(assignRef, "assignRef");
@@ -156,8 +512,22 @@ __name(assignRef, "assignRef");
 var currentRenderer = null;
 var nodeOwners = /* @__PURE__ */ new WeakMap();
 var eventBindings = /* @__PURE__ */ new WeakMap();
+var eventCleanupSlots = /* @__PURE__ */ new WeakMap();
+var eventCleanupNodeIds = /* @__PURE__ */ new WeakMap();
+var nextEventCleanupNodeId = 0;
+function eventCleanupKey(node, event) {
+  let id = eventCleanupNodeIds.get(node);
+  if (id === void 0) {
+    id = ++nextEventCleanupNodeId;
+    eventCleanupNodeIds.set(node, id);
+  }
+  return `${id}:${event}`;
+}
+__name(eventCleanupKey, "eventCleanupKey");
 function setRenderer(renderer) {
-  currentRenderer = renderer;
+  const previous = currentRenderer;
+  currentRenderer = renderer ?? null;
+  return previous;
 }
 __name(setRenderer, "setRenderer");
 function getRenderer() {
@@ -171,76 +541,20 @@ function createText(content) {
   return getRenderer().createText(content);
 }
 __name(createText, "createText");
-var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
-var SVG_TAGS = /* @__PURE__ */ new Set([
-  "animate",
-  "animateMotion",
-  "animateTransform",
-  "circle",
-  "clipPath",
-  "defs",
-  "desc",
-  "ellipse",
-  "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",
-  "filter",
-  "foreignObject",
-  "g",
-  "image",
-  "line",
-  "linearGradient",
-  "marker",
-  "mask",
-  "metadata",
-  "mpath",
-  "path",
-  "pattern",
-  "polygon",
-  "polyline",
-  "radialGradient",
-  "rect",
-  "set",
-  "stop",
-  "svg",
-  "switch",
-  "symbol",
-  "text",
-  "textPath",
-  "tspan",
-  "use",
-  "view"
-]);
 function createElement(tag) {
-  if (SVG_TAGS.has(tag)) {
+  if (isSvgTag(tag)) {
     const renderer = getRenderer();
     if (renderer.createSvgElement) return renderer.createSvgElement(tag);
   }
   return getRenderer().createElement(tag);
 }
 __name(createElement, "createElement");
+function createSvgElement(tag) {
+  const renderer = getRenderer();
+  if (renderer.createSvgElement) return renderer.createSvgElement(tag);
+  return renderer.createElement(tag);
+}
+__name(createSvgElement, "createSvgElement");
 function createComment(content) {
   return getRenderer().createComment(content);
 }
@@ -274,7 +588,7 @@ function syncSelectValue(parent) {
   while (current !== null) {
     if (current.nodeName === "SELECT") {
       const read = selectValueReaders.get(current);
-      if (read !== void 0) setProperty(current, "value", read());
+      if (read !== void 0) setProperty(current, "value", (0, import_reactivity3.untrack)(read));
       return;
     }
     current = current.parentNode;
@@ -282,9 +596,9 @@ function syncSelectValue(parent) {
 }
 __name(syncSelectValue, "syncSelectValue");
 function removeChild(parent, child) {
-  disposeNodeOwner(child);
   if (isVobsFragment(child)) {
     child.unmount(parent);
+    disposeNodeOwner(child);
     return;
   }
   getRenderer().removeChild(parent, child);
@@ -295,6 +609,7 @@ function removeChild(parent, child) {
       parent: describeDebugNode(parent)
     });
   }
+  disposeNodeOwner(child);
 }
 __name(removeChild, "removeChild");
 function setTextContent(node, content) {
@@ -312,7 +627,7 @@ function setTextContent(node, content) {
 __name(setTextContent, "setTextContent");
 function setProperty(node, key, value) {
   const previousValue = getRuntimeDebugHooks() ? readDebugValue(() => Reflect.get(node, key)) : void 0;
-  getRenderer().setProperty(node, key, value);
+  getRenderer().setProperty(node, PROPERTY_IDL_NAMES[key] ?? key, value);
   if (key === "value" && node.tagName === "SELECT") {
     scheduleSelectValueSync(node, value);
   }
@@ -333,12 +648,13 @@ function scheduleSelectValueSync(node, value) {
   pendingSelectValues.set(node, value);
   if (selectSyncScheduled.has(node)) return;
   selectSyncScheduled.add(node);
+  const renderer = getRenderer();
   queueMicrotask(() => {
     selectSyncScheduled.delete(node);
     if (!pendingSelectValues.has(node)) return;
     const pending = pendingSelectValues.get(node);
     pendingSelectValues.delete(node);
-    getRenderer().setProperty(node, "value", pending);
+    renderer.setProperty(node, "value", pending);
   });
 }
 __name(scheduleSelectValueSync, "scheduleSelectValueSync");
@@ -357,48 +673,131 @@ function setAttribute(node, key, value) {
 }
 __name(setAttribute, "setAttribute");
 function spreadProps(node, props) {
-  for (const [key, value] of Object.entries(props)) {
-    if (key === "key" || value === null || value === void 0) continue;
+  applySpreadProps(node, null, props);
+}
+__name(spreadProps, "spreadProps");
+function removeAttribute(node, key) {
+  const renderer = getRenderer();
+  if (renderer.removeAttribute) {
+    renderer.removeAttribute(node, key);
+    return;
+  }
+  renderer.setAttribute(node, key, "");
+}
+__name(removeAttribute, "removeAttribute");
+var BOOLEAN_PROPERTIES = /* @__PURE__ */ new Set([
+  "checked",
+  "selected",
+  "disabled",
+  "multiple",
+  "readOnly",
+  "required",
+  "hidden",
+  "open",
+  "indeterminate",
+  "defaultChecked",
+  "muted",
+  "autoFocus"
+]);
+var PROPERTY_IDL_NAMES = {
+  autoFocus: "autofocus"
+};
+function applySpreadProps(node, previous, next) {
+  for (const [key, value] of Object.entries(next)) {
+    if (key === "key") continue;
+    if (previous !== null && Object.is(previous[key], value)) continue;
+    if (key.startsWith("on")) {
+      const eventName = resolveEventName(key) ?? key.slice(2).toLowerCase();
+      const previousHandler = previous?.[key];
+      if (typeof previousHandler === "function") {
+        removeEventListener(node, eventName, previousHandler);
+      }
+      if (typeof value === "function") {
+        addEventListener(node, eventName, value);
+      }
+      continue;
+    }
     if (key === "ref") {
       setRef(node, value);
       continue;
     }
-    if (key.startsWith("on") && typeof value === "function") addEventListener(node, key.slice(2).toLowerCase(), value);
-    else if (isPropertyKey(key)) setProperty(node, key, value);
+    if (value === null || value === void 0) continue;
+    else if (isClassListKey(key)) applyClassList(node, value);
+    else if (isPropertyName(key)) setProperty(node, key, value);
     else if (value === false) continue;
     else setAttribute(node, domAttributeName(key), key === "style" && isStyleObject(value) ? formatStyle(value) : String(value));
   }
+  if (previous === null) return;
+  for (const key of Object.keys(previous)) {
+    if (key in next || key === "key") continue;
+    if (key.startsWith("on")) {
+      const eventName = resolveEventName(key) ?? key.slice(2).toLowerCase();
+      const previousHandler = previous[key];
+      if (typeof previousHandler === "function") {
+        removeEventListener(node, eventName, previousHandler);
+      }
+      continue;
+    }
+    if (key === "ref") continue;
+    if (isPropertyName(key)) setProperty(node, key, BOOLEAN_PROPERTIES.has(key) ? false : "");
+    else removeAttribute(node, domAttributeName(key));
+  }
 }
-__name(spreadProps, "spreadProps");
+__name(applySpreadProps, "applySpreadProps");
+var classListContributions = /* @__PURE__ */ new WeakMap();
+function parseClassList(value) {
+  const names = [];
+  const push = /* @__PURE__ */ __name((candidate) => {
+    if (typeof candidate === "string") {
+      for (const name of candidate.split(/\s+/u)) if (name !== "") names.push(name);
+    }
+  }, "push");
+  if (Array.isArray(value)) {
+    for (const entry of value) {
+      if (entry !== null && typeof entry === "object") {
+        for (const [name, on] of Object.entries(entry)) if (on) push(name);
+      } else push(entry);
+    }
+  } else if (value !== null && typeof value === "object") {
+    for (const [name, on] of Object.entries(value)) if (on) push(name);
+  } else push(value);
+  return names;
+}
+__name(parseClassList, "parseClassList");
+function applyClassList(node, value) {
+  const next = parseClassList(value);
+  const previous = classListContributions.get(node) ?? [];
+  classListContributions.set(node, next);
+  const base = (node.getAttribute("class") ?? "").split(/\s+/u).filter((name) => name !== "" && !previous.includes(name));
+  const merged = [.../* @__PURE__ */ new Set([...base, ...next])];
+  setAttribute(node, "class", merged.join(" "));
+}
+__name(applyClassList, "applyClassList");
+function isClassListKey(key) {
+  return key === "classList";
+}
+__name(isClassListKey, "isClassListKey");
+function bindSpreadProps(node, source) {
+  let previous = null;
+  (0, import_reactivity3.effect)(() => {
+    const next = source() ?? {};
+    const snapshot = { ...next };
+    applySpreadProps(node, previous, next);
+    previous = snapshot;
+  });
+}
+__name(bindSpreadProps, "bindSpreadProps");
 function setStaticProps(node, props) {
   for (const [key, value] of Object.entries(props)) {
     if (key === "key" || key === "ref" || key.startsWith("on")) continue;
     if (value === null || value === void 0) continue;
-    if (isPropertyKey(key)) setProperty(node, key, value);
+    if (isClassListKey(key)) applyClassList(node, value);
+    else if (isPropertyName(key)) setProperty(node, key, value);
     else if (value === false) continue;
     else setAttribute(node, domAttributeName(key), key === "style" && isStyleObject(value) ? formatStyle(value) : String(value));
   }
 }
 __name(setStaticProps, "setStaticProps");
-function isPropertyKey(key) {
-  return key === "value" || key === "checked" || key === "selected" || key === "disabled" || key === "multiple" || key === "readOnly" || key === "required" || key === "autofocus" || key === "hidden" || key === "tabIndex" || key === "colSpan" || key === "rowSpan";
-}
-__name(isPropertyKey, "isPropertyKey");
-function domAttributeName(key) {
-  switch (key) {
-    case "className":
-      return "class";
-    case "htmlFor":
-      return "for";
-    case "autoComplete":
-      return "autocomplete";
-    case "spellCheck":
-      return "spellcheck";
-    default:
-      return key;
-  }
-}
-__name(domAttributeName, "domAttributeName");
 function isStyleObject(value) {
   return Boolean(value) && typeof value === "object" && !Array.isArray(value);
 }
@@ -417,7 +816,9 @@ function addEventListener(node, event, handler) {
   }
   const previous = bindings.get(event);
   if (previous && previous.original === handler && previous.owner === owner) return;
-  if (previous) renderer.removeEventListener(node, event, previous.handler);
+  if (previous) {
+    renderer.removeEventListener(node, event, previous.handler);
+  }
   const listener = owner ? (reason) => {
     if (owner.disposed) return;
     try {
@@ -431,28 +832,66 @@ function addEventListener(node, event, handler) {
         handled,
         recovery: handled ? "handled" : "propagated"
       });
+      if (handled && getRuntimeDebugHooks()?.error === void 0) {
+        console.error(formatVobsError(error, { includeStack: true }));
+      }
       if (!handled) throw error;
     }
   } : handler;
   const binding = { handler: listener, owner, original: handler };
   bindings.set(event, binding);
   renderer.addEventListener(node, event, listener);
-  owner?.onDispose(() => {
-    if (bindings?.get(event) !== binding) return;
-    bindings.delete(event);
-    renderer.removeEventListener(node, event, listener);
+  if (!owner) return;
+  const key = eventCleanupKey(node, event);
+  let slots = eventCleanupSlots.get(owner);
+  if (!slots) {
+    slots = /* @__PURE__ */ new Map();
+    eventCleanupSlots.set(owner, slots);
+  }
+  const hasSlot = slots.has(key);
+  slots.set(key, binding);
+  if (hasSlot) return;
+  owner.onDispose(() => {
+    const current = eventCleanupSlots.get(owner)?.get(key);
+    if (!current) return;
+    eventCleanupSlots.get(owner)?.delete(key);
+    const map = eventBindings.get(node);
+    if (map?.get(event) === current) map.delete(event);
+    renderer.removeEventListener(node, event, current.handler);
   });
 }
 __name(addEventListener, "addEventListener");
 function removeEventListener(node, event, handler) {
   const renderer = getRenderer();
-  const binding = eventBindings.get(node)?.get(event);
+  const map = eventBindings.get(node);
+  const binding = map?.get(event);
+  if (binding) {
+    if (binding.handler !== handler) return;
+    map?.delete(event);
+  }
   renderer.removeEventListener(node, event, binding?.handler ?? handler);
-  eventBindings.get(node)?.delete(event);
 }
 __name(removeEventListener, "removeEventListener");
 function clear(container) {
+  let firstError;
+  const walk = /* @__PURE__ */ __name((node) => {
+    try {
+      disposeNodeOwner(node);
+    } catch (error) {
+      firstError ?? (firstError = error);
+    }
+    for (const child of Array.from(node.childNodes)) walk(child);
+  }, "walk");
+  for (const child of Array.from(container.childNodes)) walk(child);
   getRenderer().clear(container);
+  if (getRuntimeDebugHooks()) {
+    invokeRuntimeDebug("domMutation", {
+      operation: "clear",
+      target: describeDebugNode(container),
+      parent: describeDebugNode(container)
+    });
+  }
+  if (firstError) throw firstError;
 }
 __name(clear, "clear");
 function createComponent(component, props, source) {
@@ -474,15 +913,16 @@ function createComponent(component, props, source) {
     owner.onDispose(cleanup);
   }
   const renderScope = owner.mark();
-  let node;
+  let rendered;
   try {
-    node = owner.run(() => (0, import_reactivity3.untrack)(() => component(props)));
+    rendered = owner.run(() => (0, import_reactivity3.untrack)(() => component(props)));
   } catch (error) {
     owner.dispose();
     attachSourceLocation(error, source);
     attachComponentContext(error, componentName, owner.id);
     throw error;
   }
+  const node = isRenderableNode(rendered) ? rendered : createComment("vobs:empty");
   associateNodeOwner(node, owner);
   if (instance) {
     instance.node = node;
@@ -553,7 +993,16 @@ function createBlock(factory) {
   return node;
 }
 __name(createBlock, "createBlock");
+function isRenderableNode(value) {
+  return typeof value === "object" && value !== null || typeof value === "function";
+}
+__name(isRenderableNode, "isRenderableNode");
 function associateNodeOwner(node, owner) {
+  if (node === null || node === void 0 || typeof node !== "object" && typeof node !== "function") {
+    throw new Error(
+      `Vobs: associateNodeOwner \u6536\u5230\u975E\u8282\u70B9\u503C\uFF08${String(node)}\uFF09\u3002\u7EC4\u4EF6\u5FC5\u987B\u8FD4\u56DE VobsNode\uFF1B\u8FD4\u56DE null/undefined \u7531 createComponent \u8F6C\u6210\u7A7A\u6CE8\u91CA\u8282\u70B9\u3002`
+    );
+  }
   nodeOwners.set(node, owner);
 }
 __name(associateNodeOwner, "associateNodeOwner");
@@ -568,17 +1017,22 @@ __name(disposeNodeOwner, "disposeNodeOwner");
 0 && (module.exports = {
   SVG_NAMESPACE,
   addEventListener,
+  applyClassList,
   associateNodeOwner,
+  bindSpreadProps,
   clear,
   createBlock,
   createComment,
   createComponent,
   createElement,
+  createSvgElement,
   createText,
   disposeNodeOwner,
   getRenderer,
   insertBefore,
+  parseClassList,
   registerSelectValueBinding,
+  removeAttribute,
   removeChild,
   removeEventListener,
   setAttribute,