valyrian.js 7.2.11 → 8.0.0

package/dist/index.js

@@ -21,13 +21,15 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var lib_exports = {};
 __export(lib_exports, {
   Vnode: () => Vnode,
-  createDomElement: () => createDomElement,
+  createElement: () => createElement,
   current: () => current,
+  debouncedUpdate: () => debouncedUpdate,
   directive: () => directive,
   directives: () => directives,
-  domToVnode: () => domToVnode,
+  hidrateDomToVnode: () => hidrateDomToVnode,
   isComponent: () => isComponent,
   isNodeJs: () => isNodeJs,
+  isPOJOComponent: () => isPOJOComponent,
   isVnode: () => isVnode,
   isVnodeComponent: () => isVnodeComponent,
   mount: () => mount,
@@ -35,9 +37,9 @@ __export(lib_exports, {
   onMount: () => onMount,
   onUnmount: () => onUnmount,
   onUpdate: () => onUpdate,
-  patch: () => patch,
   reservedProps: () => reservedProps,
   setAttribute: () => setAttribute,
+  setPropNameReserved: () => setPropNameReserved,
   trust: () => trust,
   unmount: () => unmount,
   update: () => update,
@@ -46,176 +48,129 @@ __export(lib_exports, {
   v: () => v
 });
 module.exports = __toCommonJS(lib_exports);
-var textTag = "#text";
 var isNodeJs = Boolean(typeof process !== "undefined" && process.versions && process.versions.node);
-function createDomElement(tag, isSVG = false) {
-  return isSVG ? document.createElementNS("http://www.w3.org/2000/svg", tag) : document.createElement(tag);
-}
-var Vnode = function Vnode2(tag, props, children) {
-  this.tag = tag;
-  this.props = props;
-  this.children = children;
-};
-function isComponent(component) {
-  return Boolean(
-    component && (typeof component === "function" || typeof component === "object" && "view" in component)
-  );
-}
-var isVnode = (object) => {
-  return object instanceof Vnode;
+var Vnode = class {
+  constructor(tag, props, children, dom, isSVG) {
+    this.tag = tag;
+    this.props = props;
+    this.children = children;
+    this.dom = dom;
+    this.isSVG = isSVG;
+  }
 };
+var isPOJOComponent = (component) => Boolean(component && typeof component === "object" && "view" in component);
+var isComponent = (component) => Boolean(typeof component === "function" || isPOJOComponent(component));
+var isVnode = (object) => object instanceof Vnode;
 var isVnodeComponent = (object) => {
   return isVnode(object) && isComponent(object.tag);
 };
-function domToVnode(dom) {
+function v(tagOrComponent, props, ...children) {
+  return new Vnode(tagOrComponent, props, children);
+}
+v.fragment = (_, ...children) => children;
+function hidrateDomToVnode(dom) {
   if (dom.nodeType === 3) {
-    let vnode2 = new Vnode(textTag, {}, [dom.nodeValue]);
-    vnode2.dom = dom;
-    return vnode2;
+    return dom.nodeValue;
   }
-  let children = [];
-  for (let i = 0, l = dom.childNodes.length; i < l; i++) {
-    let childDom = dom.childNodes[i];
-    if (childDom.nodeType === 1 || childDom.nodeType === 3) {
-      children.push(domToVnode(childDom));
+  if (dom.nodeType === 1) {
+    const tag = dom.nodeName.toLowerCase();
+    const props = {};
+    const children = [];
+    for (let i = 0, l = dom.childNodes.length; i < l; i++) {
+      const childDom = dom.childNodes[i];
+      if (childDom.nodeType === 3) {
+        children.push(childDom.nodeValue);
+      } else if (childDom.nodeType === 1) {
+        const childVnode = hidrateDomToVnode(childDom);
+        children.push(childVnode);
+      }
     }
+    const attributes = dom.attributes;
+    for (let i = 0, l = attributes.length; i < l; i++) {
+      const attr = attributes[i];
+      props[attr.nodeName] = attr.nodeValue;
+    }
+    const vnode = new Vnode(tag, props, children);
+    vnode.dom = dom;
+    vnode.isSVG = tag === "svg";
+    return vnode;
   }
-  let props = {};
-  for (let i = 0, l = dom.attributes.length; i < l; i++) {
-    let attr = dom.attributes[i];
-    props[attr.nodeName] = attr.nodeValue;
-  }
-  let vnode = new Vnode(dom.tagName.toLowerCase(), props, children);
-  vnode.dom = dom;
-  return vnode;
 }
 function trust(htmlString) {
-  let div = createDomElement("div");
+  const div = document.createElement("div");
   div.innerHTML = htmlString.trim();
-  return [].map.call(div.childNodes, (item) => domToVnode(item));
+  return Array.from(div.childNodes).map(hidrateDomToVnode);
 }
 var mainComponent = null;
 var mainVnode = null;
 var isMounted = false;
 var current = {
   vnode: null,
-  oldVnode: null,
   component: null,
   event: null
 };
-var reservedProps = {
-  key: true,
-  state: true,
-  "v-keep": true,
-  // Built in directives
-  "v-if": true,
-  "v-unless": true,
-  "v-for": true,
-  "v-show": true,
-  "v-class": true,
-  "v-html": true,
-  "v-model": true,
-  "v-create": true,
-  "v-update": true,
-  "v-cleanup": true
-};
+var reservedProps = /* @__PURE__ */ new Set([
+  "key",
+  "state",
+  "v-keep",
+  "v-text",
+  "v-if",
+  "v-for",
+  "v-show",
+  "v-class",
+  "v-html",
+  "v-model",
+  "v-create",
+  "v-update",
+  "v-cleanup"
+]);
 var onCleanupSet = /* @__PURE__ */ new Set();
 var onMountSet = /* @__PURE__ */ new Set();
 var onUpdateSet = /* @__PURE__ */ new Set();
 var onUnmountSet = /* @__PURE__ */ new Set();
-function onMount(callback) {
-  if (!isMounted) {
-    onMountSet.add(callback);
-  }
-}
-function onUpdate(callback) {
-  onUpdateSet.add(callback);
-}
-function onCleanup(callback) {
-  onCleanupSet.add(callback);
-}
-function onUnmount(callback) {
-  if (!isMounted) {
-    onUnmountSet.add(callback);
-  }
-}
-function callSet(set) {
-  for (let callback of set) {
+var onMount = (callback) => !isMounted && onMountSet.add(callback);
+var onUpdate = (callback) => onUpdateSet.add(callback);
+var onCleanup = (callback) => onCleanupSet.add(callback);
+var onUnmount = (callback) => !isMounted && onUnmountSet.add(callback);
+var callSet = (set) => {
+  for (const callback of set) {
     callback();
   }
   set.clear();
-}
-var eventListenerNames = {};
-function eventListener(e) {
-  current.event = e;
-  let dom = e.target;
-  let name = `v-on${e.type}`;
-  while (dom) {
-    if (dom[name]) {
-      dom[name](e, dom);
-      if (!e.defaultPrevented) {
-        update();
-      }
-      return;
-    }
-    dom = dom.parentNode;
-  }
-  current.event = null;
-}
-var hideDirective = (test) => (bool, vnode, oldnode) => {
-  let value = test ? bool : !bool;
-  if (value) {
-    let newdom = document.createTextNode("");
-    if (oldnode && oldnode.dom && oldnode.dom.parentNode) {
-      oldnode.dom.parentNode.replaceChild(newdom, oldnode.dom);
-    }
-    vnode.tag = "#text";
-    vnode.children = [];
-    vnode.props = {};
-    vnode.dom = newdom;
-    return false;
-  }
 };
 var directives = {
-  // The "v-if" directive hides an element if the given condition is false
-  "v-if": hideDirective(false),
-  // The "v-unless" directive hides an element if the given condition is true
-  "v-unless": hideDirective(true),
-  // The "v-for" directive creates a loop and applies a callback function to each item in the loop
-  "v-for": (set, vnode) => {
-    let newChildren = [];
-    let callback = vnode.children[0];
-    for (let i = 0, l = set.length; i < l; i++) {
-      newChildren.push(callback(set[i], i));
-    }
-    vnode.children = newChildren;
+  "v-if": (value, vnode) => {
+    if (!Boolean(value)) {
+      const parentNode = vnode.dom?.parentNode;
+      if (parentNode) {
+        parentNode.replaceChild(document.createTextNode(""), vnode.dom);
+      }
+      return false;
+    }
   },
-  // The "v-show" directive shows or hides an element by setting the "display" style property
-  "v-show": (bool, vnode) => {
+  "v-show": (value, vnode) => {
+    const bool = Boolean(value);
     vnode.dom.style.display = bool ? "" : "none";
   },
-  // The "v-class" directive adds or removes class names from an element based on a condition
-  "v-class": (classes, vnode) => {
-    for (let name in classes) {
-      vnode.dom.classList.toggle(name, classes[name]);
-    }
-  },
-  // The "v-html" directive sets the inner HTML of an element to the given HTML string
-  "v-html": (html, vnode) => {
-    vnode.children = [trust(html)];
+  "v-html": (value, vnode) => {
+    vnode.children = trust(value);
   },
   // The "v-model" directive binds the value of an input element to a model property
-  "v-model": ([model, property, event], vnode, oldVnode) => {
+  "v-model": (model, vnode) => {
+    if ("name" in vnode.props === false) {
+      return;
+    }
     let value;
+    const property = vnode.props.name;
+    let event = "oninput";
     let handler = (e) => model[property] = e.target.value;
     if (vnode.tag === "input") {
-      event = event || "oninput";
       switch (vnode.props.type) {
         case "checkbox": {
           if (Array.isArray(model[property])) {
             handler = (e) => {
-              let val = e.target.value;
-              let idx = model[property].indexOf(val);
+              const val = e.target.value;
+              const idx = model[property].indexOf(val);
               if (idx === -1) {
                 model[property].push(val);
               } else {
@@ -248,12 +203,12 @@ var directives = {
         }
       }
     } else if (vnode.tag === "select") {
-      event = event || "onclick";
+      event = "onclick";
       if (vnode.props.multiple) {
         handler = (e) => {
-          let val = e.target.value;
+          const val = e.target.value;
           if (e.ctrlKey) {
-            let idx = model[property].indexOf(val);
+            const idx = model[property].indexOf(val);
             if (idx === -1) {
               model[property].push(val);
             } else {
@@ -266,23 +221,22 @@ var directives = {
         };
         vnode.children.forEach((child) => {
           if (child.tag === "option") {
-            let value2 = "value" in child.props ? child.props.value : child.children.join("").trim();
+            const value2 = "value" in child.props ? child.props.value : child.children.join("").trim();
             child.props.selected = model[property].indexOf(value2) !== -1;
           }
         });
       } else {
         vnode.children.forEach((child) => {
           if (child.tag === "option") {
-            let value2 = "value" in child.props ? child.props.value : child.children.join("").trim();
+            const value2 = "value" in child.props ? child.props.value : child.children.join("").trim();
             child.props.selected = value2 === model[property];
           }
         });
       }
     } else if (vnode.tag === "textarea") {
-      event = event || "oninput";
       vnode.children = [model[property]];
     }
-    let prevHandler = vnode.props[event];
+    const prevHandler = vnode.props[event];
     sharedSetAttribute(
       event,
       (e) => {
@@ -291,266 +245,383 @@ var directives = {
           prevHandler(e);
         }
       },
-      vnode,
-      oldVnode
+      vnode
     );
   },
-  // The "v-create" directive is called when a new virtual node is created.
-  // The provided callback function is called with the new virtual node as an argument.
-  // This directive is only called once per virtual node, when it is first created.
-  // eslint-disable-next-line no-unused-vars
-  "v-create": (callback, vnode, oldVnode) => {
-    if (!oldVnode) {
-      let cleanup = callback(vnode);
+  "v-create": (callback, vnode, oldProps) => {
+    if (!oldProps) {
+      const cleanup = callback(vnode);
       if (typeof cleanup === "function") {
         onCleanup(cleanup);
       }
     }
   },
-  // The "v-update" directive is called when an existing virtual node is updated.
-  // The provided callback function is called with the new and old virtual nodes as arguments.
-  // This directive is only called once per virtual node update.
-  "v-update": (callback, vnode, oldVnode) => {
-    if (oldVnode) {
-      let cleanup = callback(vnode, oldVnode);
+  "v-update": (callback, vnode, oldProps) => {
+    if (oldProps) {
+      const cleanup = callback(vnode, oldProps);
       if (typeof cleanup === "function") {
         onCleanup(cleanup);
       }
     }
   },
-  // The "v-cleanup" directive is called when the update is cleaned up.
-  // The provided callback function is called with the old virtual node as an argument.
-  // This directive is only called once per virtual node, when the update is cleaned up.
-  "v-cleanup": (callback, vnode, oldVnode) => {
-    onCleanup(() => callback(vnode, oldVnode));
+  "v-cleanup": (callback, vnode) => {
+    onCleanup(() => callback(vnode));
+  },
+  "v-class": (value, vnode) => {
+    if (typeof value === "string") {
+      vnode.dom.className = value;
+    } else if (Array.isArray(value)) {
+      vnode.dom.className = value.join(" ");
+    } else if (typeof value === "object") {
+      const classList = vnode.dom.classList;
+      for (const name in value) {
+        const val = typeof value[name] === "function" ? value[name]() : value[name];
+        classList.toggle(name, val);
+      }
+    }
+  },
+  // Frequent used properties
+  class(value, vnode) {
+    if (vnode.dom.className !== value) {
+      vnode.dom.className = value;
+    }
+  },
+  className(value, vnode) {
+    directives.class(value, vnode, null);
+  },
+  id: (value, vnode) => {
+    vnode.dom.id = value;
+  },
+  style: (value, vnode) => {
+    if (typeof value === "string") {
+      vnode.dom.style = value;
+    } else if (typeof value === "object") {
+      vnode.dom.style = "";
+      const domStyle = vnode.dom.style;
+      for (const name in value) {
+        domStyle[name] = value[name];
+      }
+    }
   }
 };
 function directive(name, directive2) {
-  let directiveName = `v-${name}`;
+  const directiveName = `v-${name}`;
   directives[directiveName] = directive2;
-  reservedProps[directiveName] = true;
+  reservedProps.add(directiveName);
+}
+function setPropNameReserved(name) {
+  reservedProps.add(name);
+}
+var eventListenerNames = /* @__PURE__ */ new Set();
+function eventListener(e) {
+  current.event = e;
+  let dom = e.target;
+  const name = `on${e.type}`;
+  while (dom) {
+    const oldProps = dom.props;
+    if (oldProps && oldProps[name]) {
+      oldProps[name](e, dom);
+      if (!e.defaultPrevented) {
+        update();
+      }
+      return;
+    }
+    dom = dom.parentNode;
+  }
+  current.event = null;
 }
-function sharedSetAttribute(name, value, newVnode, oldVnode) {
+function sharedSetAttribute(name, value, newVnode) {
+  const newVnodeDom = newVnode.dom;
   if (typeof value === "function") {
-    if (name in eventListenerNames === false) {
+    if (!eventListenerNames.has(name)) {
       mainVnode.dom.addEventListener(name.slice(2), eventListener);
-      eventListenerNames[name] = true;
+      eventListenerNames.add(name);
     }
-    newVnode.dom[`v-${name}`] = value;
     return;
   }
-  if (name in newVnode.dom && newVnode.isSVG === false) {
-    if (newVnode.dom[name] != value) {
-      newVnode.dom[name] = value;
-    }
+  if (name in newVnodeDom) {
+    newVnodeDom[name] = value;
     return;
   }
-  if (!oldVnode || value !== oldVnode.props[name]) {
-    if (value === false) {
-      newVnode.dom.removeAttribute(name);
-    } else {
-      newVnode.dom.setAttribute(name, value);
-    }
+  if (value === false) {
+    newVnodeDom.removeAttribute(name);
+  } else {
+    newVnodeDom.setAttribute(name, value);
   }
 }
-function setAttribute(name, value, newVnode, oldVnode) {
-  if (name in reservedProps) {
-    return;
+function setAttribute(name, value, newVnode) {
+  if (!reservedProps.has(name)) {
+    newVnode.props[name] = value;
+    sharedSetAttribute(name, value, newVnode);
   }
-  newVnode.props[name] = value;
-  sharedSetAttribute(name, value, newVnode, oldVnode);
 }
-function updateAttributes(newVnode, oldVnode) {
-  if (oldVnode) {
-    for (let name in oldVnode.props) {
-      if (name in newVnode.props === false && name in eventListenerNames === false && name in reservedProps === false) {
-        if (name in newVnode.dom && newVnode.isSVG === false) {
-          newVnode.dom[name] = null;
+function updateAttributes(newVnode, oldProps) {
+  const vnodeDom = newVnode.dom;
+  const vnodeProps = newVnode.props;
+  if (oldProps) {
+    for (const name in oldProps) {
+      if (name in vnodeProps === false && !eventListenerNames.has(name) && !reservedProps.has(name)) {
+        if (name in vnodeDom) {
+          vnodeDom[name] = null;
         } else {
-          newVnode.dom.removeAttribute(name);
+          vnodeDom.removeAttribute(name);
         }
       }
     }
   }
-  for (let name in newVnode.props) {
-    if (name in reservedProps) {
-      if (name in directives && directives[name](newVnode.props[name], newVnode, oldVnode) === false) {
+  for (const name in vnodeProps) {
+    if (directives[name]) {
+      if (directives[name](vnodeProps[name], newVnode, oldProps) === false) {
         break;
       }
       continue;
     }
-    sharedSetAttribute(name, newVnode.props[name], newVnode, oldVnode);
+    if (!reservedProps.has(name)) {
+      sharedSetAttribute(name, vnodeProps[name], newVnode);
+    }
   }
 }
-function patch(newVnode, oldVnode) {
-  if (newVnode.children.length === 0) {
-    newVnode.dom.textContent = "";
-    return;
+function createElement(tag, isSVG) {
+  return isSVG ? document.createElementNS("http://www.w3.org/2000/svg", tag) : document.createElement(tag);
+}
+function flatTree(newVnode) {
+  current.vnode = newVnode;
+  if ("v-for" in newVnode.props) {
+    const children2 = [];
+    const set = newVnode.props["v-for"];
+    const l = set.length;
+    const callback = newVnode.children[0];
+    for (let i2 = 0; i2 < l; i2++) {
+      const newChild = callback(set[i2], i2);
+      if (newChild instanceof Vnode) {
+        newChild.props = newChild.props || {};
+        newChild.isSVG = newVnode.isSVG || newChild.tag === "svg";
+      }
+      children2[i2] = newChild;
+    }
+    return children2;
   }
-  let newTree = newVnode.children;
-  let oldTree = oldVnode?.children || [];
-  let oldTreeLength = oldTree.length;
-  if (oldTreeLength && newTree[0] instanceof Vnode && "key" in newTree[0].props && "key" in oldTree[0].props) {
-    let newTreeLength = newTree.length;
-    let oldKeyedList = {};
-    for (let i = 0; i < oldTreeLength; i++) {
-      oldKeyedList[oldTree[i].props.key] = i;
-    }
-    let newKeyedList = {};
-    for (let i = 0; i < newTreeLength; i++) {
-      newKeyedList[newTree[i].props.key] = i;
-    }
-    for (let i = 0; i < newTreeLength; i++) {
-      let newChild = newTree[i];
-      let oldChild = oldTree[oldKeyedList[newChild.props.key]];
-      let shouldPatch = true;
-      if (oldChild) {
-        newChild.dom = oldChild.dom;
-        if ("v-keep" in newChild.props && newChild.props["v-keep"] === oldChild.props["v-keep"]) {
-          newChild.children = oldChild.children;
-          shouldPatch = false;
-        } else {
-          updateAttributes(newChild, oldChild);
-        }
-      } else {
-        newChild.dom = createDomElement(newChild.tag, newChild.isSVG);
-        updateAttributes(newChild);
+  let i = 0;
+  const originalChildren = newVnode.children;
+  let children = originalChildren;
+  while (i < children.length) {
+    const newChild = children[i];
+    if (newChild == null) {
+      if (children === originalChildren) {
+        children = [...originalChildren];
       }
-      if (!newVnode.dom.childNodes[i]) {
-        newVnode.dom.appendChild(newChild.dom);
-      } else if (newVnode.dom.childNodes[i] !== newChild.dom) {
-        newVnode.dom.replaceChild(newChild.dom, newVnode.dom.childNodes[i]);
+      children.splice(i, 1);
+      continue;
+    }
+    if (Array.isArray(newChild)) {
+      if (children === originalChildren) {
+        children = [...originalChildren];
       }
-      shouldPatch && patch(newChild, oldChild);
+      children.splice(i, 1, ...newChild);
+      continue;
     }
-    for (let i = newTreeLength; i < oldTreeLength; i++) {
-      if (!newKeyedList[oldTree[i].props.key]) {
-        oldTree[i].dom.parentNode && oldTree[i].dom.parentNode.removeChild(oldTree[i].dom);
+    if (newChild instanceof Vnode) {
+      newChild.props = newChild.props || {};
+      newChild.isSVG = newVnode.isSVG || newChild.tag === "svg";
+      if (typeof newChild.tag !== "string") {
+        if (children === originalChildren) {
+          children = [...originalChildren];
+        }
+        const component = current.component = newChild.tag;
+        children[i] = (isPOJOComponent(component) ? component.view : component).bind(component)(
+          newChild.props,
+          newChild.children
+        );
+        continue;
       }
     }
+    i++;
+  }
+  return children;
+}
+function createNewElement(newChild, newVnode, oldChild) {
+  const dom = createElement(newChild.tag, newChild.isSVG);
+  if (oldChild) {
+    newVnode.dom.replaceChild(dom, oldChild);
+  } else {
+    newVnode.dom.appendChild(dom);
+  }
+  newChild.dom = dom;
+  updateAttributes(newChild, null);
+  newChild.dom.props = newChild.props;
+  if ("v-text" in newChild.props) {
+    newChild.dom.textContent = newChild.props["v-text"];
     return;
   }
-  if (newTree.length === 0) {
-    newVnode.dom.textContent = "";
+  const children = flatTree(newChild);
+  if (children.length === 0) {
+    newChild.dom.textContent = "";
     return;
   }
-  current.vnode = newVnode;
-  current.oldVnode = oldVnode;
-  for (let i = 0; i < newTree.length; i++) {
-    let newChild = newTree[i];
-    if (newChild instanceof Vnode) {
-      if (typeof newChild.tag !== "string") {
-        current.component = newChild.tag;
-        newTree.splice(
-          i--,
-          1,
-          ("view" in newChild.tag ? newChild.tag.view.bind(newChild.tag) : newChild.tag.bind(newChild.tag))(
-            newChild.props,
-            ...newChild.children
-          )
-        );
-      }
+  for (let i = 0, l = children.length; i < l; i++) {
+    if (children[i] instanceof Vnode === false) {
+      newChild.dom.appendChild(document.createTextNode(children[i]));
       continue;
     }
-    if (Array.isArray(newChild)) {
-      newTree.splice(i--, 1, ...newChild);
-      continue;
+    createNewElement(children[i], newChild, null);
+  }
+}
+function patchKeyed(newVnode, children) {
+  const oldTree = [...Array.from(newVnode.dom.childNodes)];
+  const childNodes = newVnode.dom.childNodes;
+  const oldKeyedList = {};
+  const newKeyedList = {};
+  for (let i = 0, l = oldTree.length; i < l; i++) {
+    const oldProps = oldTree[i].props;
+    if (oldProps) {
+      oldKeyedList[oldProps.key] = i;
     }
-    if (newChild === null || newChild === void 0) {
-      newTree.splice(i--, 1);
-      continue;
+    if (i < children.length && children[i] instanceof Vnode) {
+      newKeyedList[children[i].props.key] = i;
     }
-    newTree[i] = new Vnode(textTag, {}, [newChild]);
   }
-  for (let i = 0; i < newTree.length; i++) {
-    let newChild = newTree[i];
-    if (newChild.tag === textTag) {
-      if (i >= oldTreeLength) {
-        newChild.dom = document.createTextNode(newChild.children[0]);
-        newVnode.dom.appendChild(newChild.dom);
+  for (let i = 0, l = children.length; i < l; i++) {
+    const newChild = children[i];
+    const oldChild = oldTree[oldKeyedList[newChild.props.key]];
+    if (!oldChild) {
+      createNewElement(newChild, newVnode, childNodes[i]);
+      continue;
+    }
+    newChild.dom = oldChild;
+    const currentChild = childNodes[i];
+    if (!currentChild) {
+      newVnode.dom.appendChild(oldChild);
+    } else if (currentChild !== oldChild) {
+      newVnode.dom.replaceChild(oldChild, currentChild);
+    }
+    if ("v-keep" in newChild.props === false || oldChild.props["v-keep"] !== newChild.props["v-keep"]) {
+      updateAttributes(newChild, oldChild.props);
+      oldChild.props = newChild.props;
+      if ("v-text" in newChild.props) {
+        if (oldChild.textContent != newChild.props["v-text"]) {
+          oldChild.textContent = newChild.props["v-text"];
+        }
         continue;
       }
-      let oldChild2 = oldTree[i];
-      if (oldChild2.tag !== textTag) {
-        newChild.dom = document.createTextNode(newChild.children[0]);
-        newVnode.dom.replaceChild(newChild.dom, oldChild2.dom);
+      patch(newChild);
+    }
+  }
+  for (let i = children.length, l = childNodes.length; i < l; i++) {
+    childNodes[i]?.remove();
+  }
+}
+function patch(newVnode) {
+  const children = flatTree(newVnode);
+  const dom = newVnode.dom;
+  if (children.length === 0) {
+    if (dom.childNodes.length) {
+      dom.textContent = "";
+    }
+    return;
+  }
+  const oldDomChildren = dom.childNodes;
+  const oldChildrenLength = oldDomChildren.length;
+  if (oldChildrenLength > 0) {
+    const firstOldProps = oldDomChildren[0].props;
+    const firstVnode = children[0];
+    if (firstOldProps && firstVnode instanceof Vnode && "key" in firstVnode.props && "key" in firstOldProps) {
+      patchKeyed(newVnode, children);
+      return;
+    }
+  }
+  const childrenLength = children.length;
+  if (oldChildrenLength === 0) {
+    for (let i = 0; i < childrenLength; i++) {
+      if (children[i] instanceof Vnode === false) {
+        dom.appendChild(document.createTextNode(children[i]));
         continue;
       }
-      newChild.dom = oldChild2.dom;
-      if (newChild.children[0] != oldChild2.dom.textContent) {
-        oldChild2.dom.textContent = newChild.children[0];
+      createNewElement(children[i], newVnode, null);
+    }
+    return;
+  }
+  for (let i = 0; i < childrenLength; i++) {
+    const newChild = children[i];
+    const isText = newChild instanceof Vnode === false;
+    const oldChild = oldDomChildren[i];
+    if (!oldChild) {
+      if (isText) {
+        newVnode.dom.appendChild(document.createTextNode(newChild));
+        continue;
       }
+      createNewElement(newChild, newVnode, null);
       continue;
     }
-    newChild.isSVG = newVnode.isSVG || newChild.tag === "svg";
-    if (i >= oldTreeLength) {
-      newChild.dom = createDomElement(newChild.tag, newChild.isSVG);
-      updateAttributes(newChild);
-      newVnode.dom.appendChild(newChild.dom);
-      patch(newChild);
+    if (isText) {
+      if (oldChild.nodeType !== 3) {
+        newVnode.dom.replaceChild(document.createTextNode(newChild), oldChild);
+        continue;
+      }
+      if (oldChild.nodeValue != newChild) {
+        oldChild.nodeValue = newChild;
+      }
       continue;
     }
-    let oldChild = oldTree[i];
-    if (newChild.tag !== oldChild.tag) {
-      newChild.dom = createDomElement(newChild.tag, newChild.isSVG);
-      updateAttributes(newChild);
-      newVnode.dom.replaceChild(newChild.dom, oldChild.dom);
-      patch(newChild);
+    if ("v-keep" in newChild.props) {
+      if (oldChild.props && oldChild.props["v-keep"] === newChild.props["v-keep"]) {
+        continue;
+      }
+      const nextOldChild = oldDomChildren[i + 1];
+      if (nextOldChild && nextOldChild.props && nextOldChild.props["v-keep"] === newChild.props["v-keep"]) {
+        oldChild.remove();
+        continue;
+      }
+    }
+    if (newChild.tag !== oldChild.nodeName.toLowerCase()) {
+      createNewElement(newChild, newVnode, oldChild);
       continue;
     }
-    newChild.dom = oldChild.dom;
-    if ("v-keep" in newChild.props && newChild.props["v-keep"] === oldChild.props["v-keep"]) {
-      newChild.children = oldChild.children;
+    newChild.dom = oldChild;
+    updateAttributes(newChild, oldChild.props || null);
+    oldChild.props = newChild.props;
+    if ("v-text" in newChild.props) {
+      if (newChild.dom.textContent != newChild.props["v-text"]) {
+        newChild.dom.textContent = newChild.props["v-text"];
+      }
       continue;
     }
-    updateAttributes(newChild, oldChild);
-    patch(newChild, oldChild);
+    patch(newChild);
   }
-  for (let i = newTree.length; i < oldTreeLength; i++) {
-    newVnode.dom.removeChild(oldTree[i].dom);
+  for (let i = childrenLength, l = oldDomChildren.length; i < l; i++) {
+    oldDomChildren[i]?.remove();
   }
 }
+function updateVnode(vnode) {
+  callSet(onCleanupSet);
+  vnode.props = vnode.props || {};
+  patch(vnode);
+  callSet(isMounted ? onUpdateSet : onMountSet);
+  isMounted = true;
+  current.vnode = null;
+  current.component = null;
+}
 function update() {
   if (mainVnode) {
-    callSet(onCleanupSet);
-    let oldMainVnode = mainVnode;
-    mainVnode = new Vnode(oldMainVnode.tag, oldMainVnode.props, [mainComponent]);
-    mainVnode.dom = oldMainVnode.dom;
-    mainVnode.isSVG = oldMainVnode.isSVG;
-    patch(mainVnode, oldMainVnode);
-    callSet(isMounted ? onUpdateSet : onMountSet);
-    isMounted = true;
-    current.vnode = null;
-    current.oldVnode = null;
-    current.component = null;
+    mainVnode.children = [mainComponent];
+    updateVnode(mainVnode);
     if (isNodeJs) {
       return mainVnode.dom.innerHTML;
     }
   }
 }
-function updateVnode(vnode, oldVnode) {
-  callSet(onCleanupSet);
-  patch(vnode, oldVnode);
-  oldVnode.tag = vnode.tag;
-  oldVnode.props = { ...vnode.props };
-  oldVnode.children = [...vnode.children];
-  oldVnode.dom = vnode.dom;
-  oldVnode.isSVG = vnode.isSVG;
-  callSet(isMounted ? onUpdateSet : onMountSet);
-  isMounted = true;
-  current.vnode = null;
-  current.oldVnode = null;
-  current.component = null;
-  if (isNodeJs) {
-    return vnode.dom.innerHTML;
-  }
+var debouncedUpdateTimeout;
+var clearDebouncedUpdateMethod = isNodeJs ? clearTimeout : cancelAnimationFrame;
+var setDebouncedUpdateMethod = isNodeJs ? () => setTimeout(update, 5) : () => requestAnimationFrame(update);
+function debouncedUpdate() {
+  clearDebouncedUpdateMethod(debouncedUpdateTimeout);
+  debouncedUpdateTimeout = setDebouncedUpdateMethod();
 }
 function unmount() {
   if (mainVnode) {
-    mainComponent = new Vnode(() => null, {}, []);
-    let result = update();
+    mainComponent = v(() => null, {});
+    const result = update();
     callSet(onUnmountSet);
-    for (let name in eventListenerNames) {
+    for (const name in eventListenerNames) {
       mainVnode.dom.removeEventListener(name.slice(2).toLowerCase(), eventListener);
       Reflect.deleteProperty(eventListenerNames, name);
     }
@@ -558,22 +629,20 @@ function unmount() {
     mainVnode = null;
     isMounted = false;
     current.vnode = null;
-    current.oldVnode = null;
     current.component = null;
+    current.event = null;
     return result;
   }
 }
 function mount(dom, component) {
-  let container = typeof dom === "string" ? isNodeJs ? createDomElement(dom, dom === "svg") : document.querySelectorAll(dom)[0] : dom;
-  let vnodeComponent = isVnodeComponent(component) ? component : isComponent(component) ? new Vnode(component, {}, []) : new Vnode(() => component, {}, []);
-  if (mainComponent && mainComponent.tag !== vnodeComponent.tag) {
-    unmount();
+  const container = typeof dom === "string" ? isNodeJs ? createElement(dom, dom === "svg") : document.querySelector(dom) : dom;
+  if (isComponent(component)) {
+    mainComponent = v(component, {}, []);
+  } else if (isVnodeComponent(component)) {
+    mainComponent = component;
+  } else {
+    mainComponent = v(() => component, {}, []);
   }
-  mainComponent = vnodeComponent;
-  mainVnode = domToVnode(container);
+  mainVnode = hidrateDomToVnode(container);
   return update();
 }
-var v = (tagOrComponent, props = {}, ...children) => {
-  return new Vnode(tagOrComponent, props || {}, children);
-};
-v.fragment = (_, ...children) => children;