defuss 3.4.1 → 3.4.3

package/dist/index.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
 var dom = require('./dom-BzhVVZDv.cjs');
-var mount = require('./mount-BOeNgYt6.cjs');
 require('defuss-runtime');
+var mount = require('./mount-BOeNgYt6.cjs');
 
 const inDevMode = typeof process !== "undefined" && process.env ? process.env.NODE_ENV !== "production" : false;
 
@@ -145,6 +145,902 @@ const createTrans = (i18n) => ({
 const Trans = createTrans(i18n);
 const T = Trans;
 
+const CAPTURE_ONLY_EVENTS = /* @__PURE__ */ new Set([
+  "focus",
+  "blur",
+  "scroll",
+  "mouseenter",
+  "mouseleave"
+  // Note: focusin/focusout DO bubble, so they're not included here
+]);
+const elementHandlerMap = /* @__PURE__ */ new WeakMap();
+const bubbleDispatched = /* @__PURE__ */ new WeakMap();
+const captureDispatched = /* @__PURE__ */ new WeakMap();
+const activeDispatches = /* @__PURE__ */ new WeakMap();
+const parseEventPropName = (propName) => {
+  if (!propName.startsWith("on")) return null;
+  const raw = propName.slice(2);
+  if (!raw) return null;
+  const lower = raw.toLowerCase();
+  const isCapture = lower.endsWith("capture");
+  const eventType = isCapture ? lower.slice(0, -"capture".length) : lower;
+  if (!eventType) return null;
+  return { eventType, capture: isCapture };
+};
+const getOrCreateElementHandlers = (el) => {
+  const existing = elementHandlerMap.get(el);
+  if (existing) return existing;
+  const created = /* @__PURE__ */ new Map();
+  elementHandlerMap.set(el, created);
+  return created;
+};
+const getEventPath = (event) => {
+  const composedPath = event.composedPath?.();
+  if (composedPath && composedPath.length > 0) return composedPath;
+  const path = [];
+  let node = event.target;
+  while (node) {
+    path.push(node);
+    const maybeNode = node;
+    if (typeof maybeNode === "object" && maybeNode && "parentNode" in maybeNode) {
+      node = maybeNode.parentNode;
+      continue;
+    }
+    break;
+  }
+  const doc = event.target?.ownerDocument;
+  if (doc && path[path.length - 1] !== doc) path.push(doc);
+  const win = doc?.defaultView;
+  if (win && path[path.length - 1] !== win) path.push(win);
+  return path;
+};
+const createPhaseHandler = (eventType, phase) => {
+  const dispatched = phase === "capture" ? captureDispatched : bubbleDispatched;
+  return (event) => {
+    const path = getEventPath(event).filter(
+      (t) => typeof t === "object" && t !== null && t.nodeType === 1
+    );
+    const ordered = phase === "capture" ? [...path].reverse() : path;
+    for (const target of ordered) {
+      const handlersByEvent = elementHandlerMap.get(target);
+      if (!handlersByEvent) continue;
+      const entry = handlersByEvent.get(eventType);
+      if (!entry) continue;
+      let targets = dispatched.get(event);
+      if (targets?.has(target)) continue;
+      if (!targets) {
+        targets = /* @__PURE__ */ new WeakSet();
+        dispatched.set(event, targets);
+      }
+      targets.add(target);
+      const dispatchKey = `${eventType}:${phase}`;
+      let activeSet = activeDispatches.get(target);
+      if (activeSet?.has(dispatchKey)) continue;
+      if (!activeSet) {
+        activeSet = /* @__PURE__ */ new Set();
+        activeDispatches.set(target, activeSet);
+      }
+      activeSet.add(dispatchKey);
+      try {
+        if (phase === "capture") {
+          if (entry.capture) {
+            entry.capture.call(target, event);
+            if (event.cancelBubble)
+              return;
+          }
+          if (entry.captureSet) {
+            for (const handler of entry.captureSet) {
+              handler.call(target, event);
+              if (event.cancelBubble)
+                return;
+            }
+          }
+        } else {
+          if (entry.bubble) {
+            entry.bubble.call(target, event);
+            if (event.cancelBubble)
+              return;
+          }
+          if (entry.bubbleSet) {
+            for (const handler of entry.bubbleSet) {
+              handler.call(target, event);
+              if (event.cancelBubble)
+                return;
+            }
+          }
+        }
+      } finally {
+        activeSet.delete(dispatchKey);
+      }
+    }
+  };
+};
+const installedRootListeners = /* @__PURE__ */ new WeakMap();
+const ensureRootListener = (root, eventType) => {
+  const installed = installedRootListeners.get(root) ?? /* @__PURE__ */ new Set();
+  installedRootListeners.set(root, installed);
+  const captureKey = `${eventType}:capture`;
+  if (!installed.has(captureKey)) {
+    root.addEventListener(
+      eventType,
+      createPhaseHandler(eventType, "capture"),
+      true
+    );
+    installed.add(captureKey);
+  }
+  const bubbleKey = `${eventType}:bubble`;
+  if (!installed.has(bubbleKey)) {
+    root.addEventListener(
+      eventType,
+      createPhaseHandler(eventType, "bubble"),
+      false
+    );
+    installed.add(bubbleKey);
+  }
+};
+const getEventRoot = (element) => {
+  const root = element.getRootNode();
+  if (root && root.nodeType === 9) {
+    return root;
+  }
+  if (root && root.nodeType === 11 && "host" in root) {
+    return root;
+  }
+  return null;
+};
+const registerDelegatedEvent = (element, eventType, handler, options = {}) => {
+  const root = getEventRoot(element);
+  const capture = options.capture || CAPTURE_ONLY_EVENTS.has(eventType);
+  if (root) {
+    ensureRootListener(root, eventType);
+  } else if (element.ownerDocument) {
+    ensureRootListener(element.ownerDocument, eventType);
+  } else {
+    element.addEventListener(eventType, handler, capture);
+  }
+  const byEvent = getOrCreateElementHandlers(element);
+  const entry = byEvent.get(eventType) ?? {};
+  byEvent.set(eventType, entry);
+  if (options.multi) {
+    if (capture) {
+      if (!entry.captureSet) entry.captureSet = /* @__PURE__ */ new Set();
+      entry.captureSet.add(handler);
+    } else {
+      if (!entry.bubbleSet) entry.bubbleSet = /* @__PURE__ */ new Set();
+      entry.bubbleSet.add(handler);
+    }
+  } else {
+    if (capture) {
+      entry.capture = handler;
+    } else {
+      entry.bubble = handler;
+    }
+  }
+};
+const clearDelegatedEvents = (target) => {
+  const byEvent = elementHandlerMap.get(target);
+  if (!byEvent) return;
+  byEvent.clear();
+};
+const clearDelegatedEventsDeep = (root) => {
+  clearDelegatedEvents(root);
+  const doc = root.ownerDocument;
+  if (!doc) return;
+  const walker = doc.createTreeWalker(
+    root,
+    1
+    /* NodeFilter.SHOW_ELEMENT */
+  );
+  let node = walker.nextNode();
+  while (node) {
+    clearDelegatedEvents(node);
+    node = walker.nextNode();
+  }
+};
+const getRegisteredEventKeys = (element) => {
+  const byEvent = elementHandlerMap.get(element);
+  if (!byEvent) return /* @__PURE__ */ new Set();
+  const keys = /* @__PURE__ */ new Set();
+  for (const [eventType, entry] of byEvent) {
+    if (entry.bubble || entry.bubbleSet?.size) keys.add(`${eventType}:bubble`);
+    if (entry.capture || entry.captureSet?.size)
+      keys.add(`${eventType}:capture`);
+  }
+  return keys;
+};
+const removeDelegatedEventByKey = (element, eventType, phase) => {
+  const byEvent = elementHandlerMap.get(element);
+  if (!byEvent) return;
+  const entry = byEvent.get(eventType);
+  if (!entry) return;
+  if (phase === "capture") {
+    entry.capture = void 0;
+    entry.captureSet = void 0;
+  } else {
+    entry.bubble = void 0;
+    entry.bubbleSet = void 0;
+  }
+  const isEmpty = !entry.capture && !entry.bubble && (!entry.captureSet || entry.captureSet.size === 0) && (!entry.bubbleSet || entry.bubbleSet.size === 0);
+  if (isEmpty) byEvent.delete(eventType);
+};
+const queueCallback = (cb) => (...args) => queueMicrotask(() => cb(...args));
+const CLASS_ATTRIBUTE_NAME = "class";
+const XLINK_ATTRIBUTE_NAME = "xlink";
+const XMLNS_ATTRIBUTE_NAME = "xmlns";
+const REF_ATTRIBUTE_NAME = "ref";
+const DANGEROUSLY_SET_INNER_HTML_ATTRIBUTE = "dangerouslySetInnerHTML";
+const nsMap = {
+  [XMLNS_ATTRIBUTE_NAME]: "http://www.w3.org/2000/xmlns/",
+  [XLINK_ATTRIBUTE_NAME]: "http://www.w3.org/1999/xlink",
+  svg: "http://www.w3.org/2000/svg"
+};
+const isJSXComment = (node) => (
+  /* v8 ignore next */
+  node && typeof node === "object" && !node.attributes && !node.type && !node.children
+);
+const filterComments = (children) => children.filter((child) => !isJSXComment(child));
+const createInPlaceErrorMessageVNode = (error) => ({
+  type: "p",
+  attributes: {},
+  children: [`FATAL ERROR: ${error?.message || error}`]
+});
+const jsx = (type, attributes, key, sourceInfo) => {
+  attributes = { ...attributes };
+  if (typeof key !== "undefined") {
+    attributes.key = key;
+  }
+  let children = (attributes?.children != null ? [].concat(
+    attributes.children
+  ) : []).filter((c) => c !== null && c !== void 0 && typeof c !== "boolean");
+  delete attributes?.children;
+  children = filterComments(
+    // Implementation to flatten virtual node children structures like:
+    // [<p>1</p>, [<p>2</p>,<p>3</p>]] to: [<p>1</p>,<p>2</p>,<p>3</p>]
+    [].concat.apply(
+      [],
+      children
+    )
+  );
+  if (type === "fragment") {
+    return filterComments(children);
+  }
+  if (typeof type === "function" && type.constructor.name === "AsyncFunction") {
+    const fallback = attributes?.fallback;
+    const propsForAsyncFn = { ...attributes };
+    delete propsForAsyncFn.fallback;
+    const onMount = async (containerEl) => {
+      try {
+        const resolvedVNode = await type({
+          ...propsForAsyncFn,
+          children
+        });
+        if (containerEl && resolvedVNode) {
+          const globals = {
+            window: containerEl.ownerDocument?.defaultView ?? globalThis
+          };
+          updateDomWithVdom(containerEl, resolvedVNode, globals);
+        }
+      } catch (error) {
+        console.error("[defuss] Async component error:", error);
+        if (containerEl) {
+          containerEl.textContent = `Error: ${error?.message || error}`;
+        }
+      }
+    };
+    return {
+      type: "div",
+      attributes: {
+        key,
+        onMount
+      },
+      children: fallback ? [fallback] : [],
+      sourceInfo
+    };
+  }
+  if (typeof type === "function" && type.constructor.name !== "AsyncFunction") {
+    try {
+      const rendered = type({
+        children,
+        ...attributes
+      });
+      if (rendered && typeof rendered === "object" && !Array.isArray(rendered) && sourceInfo) {
+        if (!rendered.componentProps) {
+          rendered.componentProps = { ...attributes };
+        } else {
+        }
+      }
+      if (typeof key !== "undefined" && rendered && typeof rendered === "object") {
+        if ("attributes" in rendered) {
+          rendered.attributes = {
+            ...rendered.attributes,
+            key
+          };
+        } else if (Array.isArray(rendered) && rendered.length === 1) {
+          const only = rendered[0];
+          if (only && typeof only === "object" && "attributes" in only) {
+            only.attributes = {
+              ...only.attributes,
+              key
+            };
+          }
+        }
+      }
+      return rendered;
+    } catch (error) {
+      if (typeof error === "string") {
+        error = `[JsxError] in ${type.name}: ${error}`;
+      } else if (error instanceof Error) {
+        error.message = `[JsxError] in ${type.name}: ${error.message}`;
+      }
+      return createInPlaceErrorMessageVNode(error);
+    }
+  }
+  return {
+    type,
+    attributes,
+    children,
+    sourceInfo
+  };
+};
+const observeUnmount = (domNode, onUnmount) => {
+  if (!domNode || typeof onUnmount !== "function") {
+    throw new Error(
+      "Invalid arguments. Ensure domNode and onUnmount are valid."
+    );
+  }
+  if (typeof MutationObserver === "undefined") {
+    return;
+  }
+  let parentNode = domNode.parentNode;
+  if (!parentNode) {
+    throw new Error("The provided domNode does not have a parentNode.");
+  }
+  const observer = new MutationObserver((mutationsList) => {
+    for (const mutation of mutationsList) {
+      if (mutation.removedNodes.length > 0) {
+        for (const removedNode of mutation.removedNodes) {
+          if (removedNode === domNode) {
+            queueMicrotask(() => {
+              if (!domNode.isConnected) {
+                onUnmount();
+                observer.disconnect();
+                return;
+              }
+              const newParent = domNode.parentNode;
+              if (newParent && newParent !== parentNode) {
+                parentNode = newParent;
+                observer.disconnect();
+                observer.observe(parentNode, { childList: true });
+              }
+            });
+            return;
+          }
+        }
+      }
+    }
+  });
+  observer.observe(parentNode, { childList: true });
+};
+const handleLifecycleEventsForOnMount = (newEl) => {
+  if (typeof newEl?.$onMount === "function") {
+    newEl.$onMount(newEl);
+    newEl.$onMount = null;
+  }
+  if (typeof newEl?.$onUnmount === "function") {
+    observeUnmount(newEl, newEl.$onUnmount);
+  }
+};
+const getRenderer = (document2) => {
+  const renderer = {
+    hasElNamespace: (domElement) => domElement.namespaceURI === nsMap.svg,
+    hasSvgNamespace: (parentElement, type) => renderer.hasElNamespace(parentElement) && type !== "STYLE" && type !== "SCRIPT",
+    createElementOrElements: (virtualNode, parentDomElement) => {
+      if (Array.isArray(virtualNode)) {
+        return renderer.createChildElements(virtualNode, parentDomElement);
+      }
+      if (typeof virtualNode !== "undefined") {
+        return renderer.createElement(virtualNode, parentDomElement);
+      }
+      return renderer.createTextNode("", parentDomElement);
+    },
+    createElement: (virtualNode, parentDomElement) => {
+      let newEl;
+      try {
+        if (typeof virtualNode === "function" && virtualNode.constructor.name === "AsyncFunction") {
+          newEl = document2.createElement("div");
+        } else if (typeof virtualNode === "object" && virtualNode !== null && "type" in virtualNode) {
+          const vNode = virtualNode;
+          if (typeof vNode.type === "function") {
+            newEl = document2.createElement("div");
+            newEl.innerText = `FATAL ERROR: ${vNode.type._error}`;
+          } else if (
+            // SVG support
+            typeof vNode.type === "string" && vNode.type.toUpperCase() === "SVG" || parentDomElement && renderer.hasSvgNamespace(
+              parentDomElement,
+              typeof vNode.type === "string" ? vNode.type.toUpperCase() : ""
+            )
+          ) {
+            newEl = document2.createElementNS(nsMap.svg, vNode.type);
+          } else {
+            newEl = document2.createElement(vNode.type);
+          }
+          if (vNode.attributes) {
+            renderer.setAttributes(vNode, newEl);
+            if (vNode.attributes.dangerouslySetInnerHTML) {
+              newEl.innerHTML = vNode.attributes.dangerouslySetInnerHTML.__html;
+            }
+          }
+          if (vNode.children && !vNode.attributes?.dangerouslySetInnerHTML) {
+            renderer.createChildElements(vNode.children, newEl);
+          }
+        } else {
+          if (typeof virtualNode === "string" || typeof virtualNode === "number") {
+            newEl = document2.createElement(String(virtualNode));
+          }
+        }
+        if (newEl && parentDomElement) {
+          parentDomElement.appendChild(newEl);
+          handleLifecycleEventsForOnMount(newEl);
+        }
+      } catch (e) {
+        console.error(
+          "Fatal error! Error happend while rendering the VDOM!",
+          e,
+          virtualNode
+        );
+        throw e;
+      }
+      return newEl;
+    },
+    createTextNode: (text, domElement) => {
+      const node = document2.createTextNode(text.toString());
+      if (domElement) {
+        domElement.appendChild(node);
+      }
+      return node;
+    },
+    createChildElements: (virtualChildren, domElement) => {
+      const children = [];
+      for (let i = 0; i < virtualChildren.length; i++) {
+        const virtualChild = virtualChildren[i];
+        if (typeof virtualChild === "boolean") {
+          continue;
+        }
+        if (virtualChild === null || typeof virtualChild !== "object" && typeof virtualChild !== "function") {
+          children.push(
+            renderer.createTextNode(
+              (typeof virtualChild === "undefined" || virtualChild === null ? "" : virtualChild).toString(),
+              domElement
+            )
+          );
+        } else {
+          children.push(
+            renderer.createElement(virtualChild, domElement)
+          );
+        }
+      }
+      return children;
+    },
+    setAttribute: (name, value, domElement) => {
+      if (typeof value === "undefined") return;
+      if (name === DANGEROUSLY_SET_INNER_HTML_ATTRIBUTE) return;
+      if (name === "key") {
+        domElement._defussKey = String(value);
+        return;
+      }
+      if (name === REF_ATTRIBUTE_NAME && typeof value !== "function") {
+        const ref = value;
+        ref.current = domElement;
+        domElement._defussRef = value;
+        domElement.$onUnmount = queueCallback(() => {
+        });
+        if (domElement.parentNode) {
+          observeUnmount(domElement, domElement.$onUnmount);
+        } else {
+          queueMicrotask(() => {
+            if (domElement.parentNode) {
+              observeUnmount(domElement, domElement.$onUnmount);
+            }
+          });
+        }
+        return;
+      }
+      const parsed = parseEventPropName(name);
+      if (parsed && typeof value === "function") {
+        const { eventType, capture } = parsed;
+        if (eventType === "mount") {
+          domElement.$onMount = queueCallback(value);
+          return;
+        }
+        if (eventType === "unmount") {
+          if (domElement.$onUnmount) {
+            const existingUnmount = domElement.$onUnmount;
+            domElement.$onUnmount = () => {
+              existingUnmount();
+              value();
+            };
+          } else {
+            domElement.$onUnmount = queueCallback(value);
+          }
+          return;
+        }
+        registerDelegatedEvent(
+          domElement,
+          eventType,
+          value,
+          { capture }
+        );
+        return;
+      }
+      if (name === "className") {
+        name = CLASS_ATTRIBUTE_NAME;
+      }
+      if (name === CLASS_ATTRIBUTE_NAME && Array.isArray(value)) {
+        value = value.filter((val) => !!val).join(" ");
+      }
+      const nsEndIndex = name.match(/[A-Z]/)?.index;
+      if (renderer.hasElNamespace(domElement) && nsEndIndex) {
+        const ns = name.substring(0, nsEndIndex).toLowerCase();
+        const attrName = name.substring(nsEndIndex, name.length).toLowerCase();
+        const namespace = nsMap[ns] || null;
+        domElement.setAttributeNS(
+          namespace,
+          ns === XLINK_ATTRIBUTE_NAME || ns === XMLNS_ATTRIBUTE_NAME ? `${ns}:${attrName}` : name,
+          String(value)
+        );
+      } else if (name === "style" && typeof value !== "string") {
+        const styleObj = value;
+        for (const prop of Object.keys(styleObj)) {
+          domElement.style[prop] = String(
+            styleObj[prop]
+          );
+        }
+      } else if (typeof value === "boolean") {
+        domElement[name] = value;
+        if (value) {
+          domElement.setAttribute(name, "");
+        } else {
+          domElement.removeAttribute(name);
+        }
+      } else if (
+        // Controlled input props: use property assignment for live value,
+        // AND setAttribute so SSG serialization (w3c-xmlserializer) includes it
+        (name === "value" || name === "checked" || name === "selectedIndex") && (domElement.nodeName === "INPUT" || domElement.nodeName === "TEXTAREA" || domElement.nodeName === "SELECT")
+      ) {
+        domElement[name] = value;
+        if (name === "checked") {
+          if (value) {
+            domElement.setAttribute("checked", "");
+          } else {
+            domElement.removeAttribute("checked");
+          }
+        } else if (name === "value") {
+          domElement.setAttribute("value", String(value));
+        }
+      } else {
+        domElement.setAttribute(name, String(value));
+      }
+    },
+    setAttributes: (virtualNode, domElement) => {
+      const attrNames = Object.keys(virtualNode.attributes);
+      for (let i = 0; i < attrNames.length; i++) {
+        renderer.setAttribute(
+          attrNames[i],
+          virtualNode.attributes[attrNames[i]],
+          domElement
+        );
+      }
+    }
+  };
+  return renderer;
+};
+function isTextLike(value) {
+  return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+}
+function isVNode(value) {
+  return Boolean(
+    value && typeof value === "object" && "type" in value
+  );
+}
+function toValidChild(child) {
+  if (child == null) return child;
+  if (isTextLike(child)) return child;
+  if (isVNode(child)) return child;
+  return void 0;
+}
+function normalizeChildren(input) {
+  const raw = [];
+  const pushChild = (child) => {
+    if (Array.isArray(child)) {
+      child.forEach(pushChild);
+      return;
+    }
+    const valid = toValidChild(child);
+    if (typeof valid === "undefined") return;
+    if (isVNode(valid) && (valid.type === "fragment" || valid.type === "Fragment")) {
+      const nested = Array.isArray(valid.children) ? valid.children : [];
+      nested.forEach(pushChild);
+      return;
+    }
+    if (valid === null || typeof valid === "undefined" || typeof valid === "boolean")
+      return;
+    raw.push(valid);
+  };
+  pushChild(input);
+  const fused = [];
+  let buffer = null;
+  const flush = () => {
+    if (buffer !== null && buffer.length > 0) fused.push(buffer);
+    buffer = null;
+  };
+  for (const child of raw) {
+    if (typeof child === "string" || typeof child === "number" || typeof child === "boolean") {
+      buffer = (buffer ?? "") + String(child);
+      continue;
+    }
+    flush();
+    fused.push(child);
+  }
+  flush();
+  return fused;
+}
+function getVNodeMatchKey(child) {
+  if (!child || typeof child !== "object") return null;
+  const key = child.attributes?.key;
+  if (typeof key === "string" || typeof key === "number")
+    return `k:${String(key)}`;
+  const id = child.attributes?.id;
+  if (typeof id === "string" && id.length > 0) return `id:${id}`;
+  return null;
+}
+function getDomMatchKeys(node) {
+  if (node.nodeType !== Node.ELEMENT_NODE) return [];
+  const el = node;
+  const keys = [];
+  const internalKey = el._defussKey;
+  if (internalKey) keys.push(`k:${internalKey}`);
+  const attrKey = el.getAttribute("key");
+  if (attrKey) keys.push(`k:${attrKey}`);
+  const id = el.id;
+  if (id) keys.push(`id:${id}`);
+  return keys;
+}
+function areNodeAndChildMatching(domNode, child) {
+  if (typeof child === "string" || typeof child === "number" || typeof child === "boolean") {
+    return domNode.nodeType === Node.TEXT_NODE;
+  }
+  if (child && typeof child === "object") {
+    if (domNode.nodeType !== Node.ELEMENT_NODE) return false;
+    const el = domNode;
+    const oldTag = el.tagName.toLowerCase();
+    const newTag = typeof child.type === "string" ? child.type.toLowerCase() : "";
+    if (!newTag || oldTag !== newTag) return false;
+    return true;
+  }
+  return false;
+}
+function createDomFromChild(child, globals) {
+  const renderer = getRenderer(globals.window.document);
+  if (child == null) return void 0;
+  if (typeof child === "string" || typeof child === "number" || typeof child === "boolean") {
+    return [globals.window.document.createTextNode(String(child))];
+  }
+  const created = renderer.createElementOrElements(child);
+  if (!created) return void 0;
+  const nodes = Array.isArray(created) ? created : [created];
+  return nodes.filter(Boolean);
+}
+function shouldPreserveFormStateAttribute(el, attrName, vnode) {
+  const tag = el.tagName.toLowerCase();
+  const hasExplicit = Object.prototype.hasOwnProperty.call(
+    vnode.attributes ?? {},
+    attrName
+  );
+  if (hasExplicit) return false;
+  if (tag === "input") return attrName === "value" || attrName === "checked";
+  if (tag === "textarea") return attrName === "value";
+  if (tag === "select") return attrName === "value";
+  return false;
+}
+function patchElementInPlace(el, vnode, globals) {
+  const renderer = getRenderer(globals.window.document);
+  const existingAttrs = Array.from(el.attributes);
+  const nextAttrs = vnode.attributes ?? {};
+  for (const attr of existingAttrs) {
+    const { name } = attr;
+    if (name === "key") continue;
+    if (name.startsWith("on")) continue;
+    if (name === "class" && (Object.prototype.hasOwnProperty.call(nextAttrs, "class") || Object.prototype.hasOwnProperty.call(nextAttrs, "className"))) {
+      continue;
+    }
+    if (!Object.prototype.hasOwnProperty.call(nextAttrs, name)) {
+      if (shouldPreserveFormStateAttribute(el, name, vnode)) continue;
+      el.removeAttribute(name);
+    }
+  }
+  const registeredKeys = getRegisteredEventKeys(el);
+  const nextEventKeys = /* @__PURE__ */ new Set();
+  for (const propName of Object.keys(nextAttrs)) {
+    const parsed = parseEventPropName(propName);
+    if (parsed) {
+      const phase = parsed.capture ? "capture" : "bubble";
+      nextEventKeys.add(`${parsed.eventType}:${phase}`);
+    }
+  }
+  for (const key of registeredKeys) {
+    if (!nextEventKeys.has(key)) {
+      const [eventType, phase] = key.split(":");
+      removeDelegatedEventByKey(
+        el,
+        eventType,
+        phase
+      );
+    }
+  }
+  renderer.setAttributes(vnode, el);
+  handleLifecycleEventsForOnMount(el);
+  const d = vnode.attributes?.dangerouslySetInnerHTML;
+  if (d && typeof d === "object" && typeof d.__html === "string") {
+    el.innerHTML = d.__html;
+    return;
+  }
+  const tag = el.tagName.toLowerCase();
+  if (tag === "textarea") {
+    const isControlled = Object.prototype.hasOwnProperty.call(
+      nextAttrs,
+      "value"
+    );
+    const isActive = el.ownerDocument?.activeElement === el;
+    if (isActive && !isControlled) return;
+  }
+  morphDomDirect(el, vnode.children ?? [], globals);
+}
+function morphNode(domNode, child, globals) {
+  if (typeof child === "string" || typeof child === "number" || typeof child === "boolean") {
+    const text = String(child);
+    if (domNode.nodeType === Node.TEXT_NODE) {
+      if (domNode.nodeValue !== text) domNode.nodeValue = text;
+      return domNode;
+    }
+    const next = globals.window.document.createTextNode(text);
+    domNode.parentNode?.replaceChild(next, domNode);
+    return next;
+  }
+  if (child && typeof child === "object") {
+    const newType = typeof child.type === "string" ? child.type : null;
+    if (!newType) return domNode;
+    if (domNode.nodeType !== Node.ELEMENT_NODE) {
+      const created = createDomFromChild(child, globals);
+      const first = Array.isArray(created) ? created[0] : created;
+      if (!first) return null;
+      domNode.parentNode?.replaceChild(first, domNode);
+      handleLifecycleEventsForOnMount(first);
+      return first;
+    }
+    const el = domNode;
+    const oldTag = el.tagName.toLowerCase();
+    const newTag = newType.toLowerCase();
+    if (oldTag !== newTag) {
+      const created = createDomFromChild(child, globals);
+      const first = Array.isArray(created) ? created[0] : created;
+      if (!first) return null;
+      el.parentNode?.replaceChild(first, el);
+      handleLifecycleEventsForOnMount(first);
+      return first;
+    }
+    patchElementInPlace(el, child, globals);
+    return el;
+  }
+  domNode.parentNode?.removeChild(domNode);
+  return null;
+}
+const renderingNodes = /* @__PURE__ */ new WeakSet();
+const pendingMorphs = /* @__PURE__ */ new Map();
+function isAncestorRendering(el) {
+  let current = el.parentElement;
+  while (current) {
+    if (renderingNodes.has(current)) return true;
+    current = current.parentElement;
+  }
+  return false;
+}
+function flushPendingMorphs() {
+  if (pendingMorphs.size === 0) return;
+  const snapshot = [...pendingMorphs.entries()];
+  pendingMorphs.clear();
+  for (const [el, { vdom, globals }] of snapshot) {
+    if (!el.isConnected) continue;
+    updateDomWithVdom(el, vdom, globals);
+  }
+}
+function updateDomWithVdom(parentElement, newVDOM, globals) {
+  if (renderingNodes.has(parentElement) || isAncestorRendering(parentElement)) {
+    pendingMorphs.set(parentElement, { vdom: newVDOM, globals });
+    return;
+  }
+  renderingNodes.add(parentElement);
+  try {
+    morphDomDirect(parentElement, newVDOM, globals);
+  } finally {
+    renderingNodes.delete(parentElement);
+  }
+  flushPendingMorphs();
+}
+function morphDomDirect(parentElement, newVDOM, globals) {
+  const el = parentElement;
+  const isCustomElement = el.tagName.includes("-");
+  const targetRoot = el.shadowRoot && !isCustomElement ? el.shadowRoot : parentElement;
+  const nextChildren = normalizeChildren(newVDOM);
+  const existing = Array.from(targetRoot.childNodes);
+  const keyedPool = /* @__PURE__ */ new Map();
+  const nodeKeys = /* @__PURE__ */ new WeakMap();
+  const unkeyedPool = [];
+  for (const node of existing) {
+    const keys = getDomMatchKeys(node);
+    if (keys.length > 0) {
+      nodeKeys.set(node, keys);
+      for (const k of keys) {
+        if (!keyedPool.has(k)) keyedPool.set(k, node);
+      }
+    } else {
+      unkeyedPool.push(node);
+    }
+  }
+  const consumeKeyedNode = (node) => {
+    const keys = nodeKeys.get(node) ?? [];
+    for (const k of keys) keyedPool.delete(k);
+  };
+  const takeUnkeyedMatch = (child) => {
+    for (let i = 0; i < unkeyedPool.length; i++) {
+      const candidate = unkeyedPool[i];
+      if (areNodeAndChildMatching(candidate, child)) {
+        unkeyedPool.splice(i, 1);
+        return candidate;
+      }
+    }
+    return void 0;
+  };
+  let domIndex = 0;
+  for (const child of nextChildren) {
+    const key = getVNodeMatchKey(child);
+    let match;
+    if (key) {
+      match = keyedPool.get(key);
+      if (match) consumeKeyedNode(match);
+    } else {
+      match = takeUnkeyedMatch(child);
+    }
+    const anchor = targetRoot.childNodes[domIndex] ?? null;
+    if (match) {
+      if (match !== anchor) {
+        targetRoot.insertBefore(match, anchor);
+      }
+      morphNode(match, child, globals);
+      domIndex++;
+      continue;
+    }
+    const created = createDomFromChild(child, globals);
+    if (!created || Array.isArray(created) && created.length === 0) continue;
+    const nodes = Array.isArray(created) ? created : [created];
+    for (const node of nodes) {
+      targetRoot.insertBefore(node, anchor);
+      handleLifecycleEventsForOnMount(node);
+      domIndex++;
+    }
+  }
+  const remaining = /* @__PURE__ */ new Set();
+  for (const node of unkeyedPool) remaining.add(node);
+  for (const node of keyedPool.values()) remaining.add(node);
+  for (const node of remaining) {
+    if (node.parentNode === targetRoot) {
+      if (node instanceof HTMLElement) {
+        clearDelegatedEventsDeep(node);
+      }
+      targetRoot.removeChild(node);
+    }
+  }
+}
+
 const tokenizePath = (path) => {
   const paramNameRegexp = /:([a-zA-Z0-9_]+)|\*/g;
   const groups = {};
@@ -266,8 +1162,12 @@ const setupRouter = (config = {
     isReady: false,
     pendingResolvers: [],
     currentPath: "",
-    popAttached: false
+    popAttached: false,
+    lifecycleHooks: { beforeUnmount: [], unmount: [] }
   };
+  if (!state.lifecycleHooks) {
+    state.lifecycleHooks = { beforeUnmount: [], unmount: [] };
+  }
   const routeRegistrations = state.routeRegistrations;
   if (typeof window !== "undefined" && !windowImpl) {
     windowImpl = globalThis.__defuss_window || window;
@@ -314,6 +1214,9 @@ const setupRouter = (config = {
         { invokeHandler: false },
         windowImpl
       );
+      if (req.match) {
+        state.currentRequest = req;
+      }
       return req;
     },
     resolve(pathname) {
@@ -387,6 +1290,35 @@ const setupRouter = (config = {
         resolve();
       }
       state.pendingResolvers = [];
+    },
+    createRouteContext(request) {
+      return {
+        request,
+        onBeforeUnmount(fn) {
+          state.lifecycleHooks.beforeUnmount.push(fn);
+        },
+        onUnmount(fn) {
+          state.lifecycleHooks.unmount.push(fn);
+        }
+      };
+    },
+    async runBeforeUnmountHooks() {
+      for (const fn of state.lifecycleHooks.beforeUnmount) {
+        const result = await fn();
+        if (result === false) return false;
+      }
+      return true;
+    },
+    runUnmountHooks() {
+      for (const fn of state.lifecycleHooks.unmount) {
+        fn();
+      }
+    },
+    clearRouteLifecycle() {
+      const oldUnmountHooks = [...state.lifecycleHooks.unmount];
+      state.lifecycleHooks.beforeUnmount = [];
+      state.lifecycleHooks.unmount = [];
+      return { unmountHooks: oldUnmountHooks };
     }
   };
   const handlePopState = (event) => {
@@ -416,7 +1348,8 @@ if (!globalThis[ROUTER_STATE_KEY]) {
     isReady: false,
     pendingResolvers: [],
     currentPath: "",
-    popAttached: false
+    popAttached: false,
+    lifecycleHooks: { beforeUnmount: [], unmount: [] }
   };
 }
 const getRouterState = () => globalThis[ROUTER_STATE_KEY];
@@ -427,6 +1360,7 @@ const Route = ({
   path,
   exact,
   children,
+  component: Component,
   router = Router
 }) => {
   router.add({
@@ -435,6 +1369,15 @@ const Route = ({
   });
   const req = router.match(path);
   if (!req.match) return null;
+  if (Component) {
+    const routeContext = router.createRouteContext(req);
+    const isAsync = Component.constructor.name === "AsyncFunction";
+    const routeChildren = Array.isArray(children) ? children[0] : children;
+    if (isAsync && routeChildren) {
+      return /* @__PURE__ */ jsx(Component, { route: routeContext, fallback: routeChildren });
+    }
+    return /* @__PURE__ */ jsx(Component, { route: routeContext });
+  }
   return Array.isArray(children) ? children[0] : children || null;
 };
 
@@ -478,11 +1421,27 @@ const RouterSlot = ({
     router.onRouteChange(async () => {
       const currentPath = router.getRequest().path;
       const isSamePath = currentPath === lastPath;
+      if (!isSamePath) {
+        const allowed = await router.runBeforeUnmountHooks();
+        if (!allowed) {
+          window.history.pushState({}, "", lastPath);
+          router.resolve(lastPath);
+          return;
+        }
+        const { unmountHooks } = router.clearRouteLifecycle();
+        await dom.$(ref).update(
+          typeof RouterOutlet === "function" ? RouterOutlet() : [],
+          transitionConfig
+        );
+        for (const fn of unmountHooks) {
+          fn();
+        }
+      } else {
+        await dom.$(ref).update(
+          typeof RouterOutlet === "function" ? RouterOutlet() : []
+        );
+      }
       lastPath = currentPath;
-      await dom.$(ref).update(
-        typeof RouterOutlet === "function" ? RouterOutlet() : [],
-        isSamePath ? void 0 : transitionConfig
-      );
     });
   }
   if (document.getElementById(slotId)) {