valyrian.js 7.2.11 → 8.0.0

package/lib/index.ts

@@ -1,369 +1,168 @@
-/* eslint-disable no-use-before-define */
-/* eslint-disable indent */
-/* eslint-disable sonarjs/cognitive-complexity */
-/* eslint-disable complexity */
+/* eslint-disable */
+declare global {
+  var document: Document;
+  namespace JSX {
+    interface IntrinsicElements extends DefaultRecord {}
+  }
+}
 
 interface DefaultRecord extends Record<string | number | symbol, any> {}
 
-// The VnodeProperties interface represents properties that can be passed to a virtual node.
 export interface VnodeProperties extends DefaultRecord {
-  // A unique key for the virtual node, which can be a string or a number.
-  // This is useful for optimizing updates in a list of nodes.
   key?: string | number;
-  // A state object that is associated with the virtual node.
-  state?: any;
 }
 
-// The DomElement interface extends the Element interface with an index signature.
-// This allows for any additional properties to be added to DOM elements.
 export interface DomElement extends Element, DefaultRecord {}
 
-// The VnodeInterface represents a virtual node. It has a number of optional fields,
-// including a tag, props, children, and a DOM element.
-export interface VnodeInterface extends DefaultRecord {
-  // The constructor for the virtual node. It takes a tag, props, and children as arguments.
-  // The tag can be a string, a component, or a POJO component.
-  // eslint-disable-next-line no-unused-vars
-  new (tag: string | Component | POJOComponent, props: VnodeProperties, children: Children): VnodeInterface;
-  // The tag for the virtual node. It can be a string, a component, or a POJO component.
-  tag: string | Component | POJOComponent;
-  // The props for the virtual node.
-  props: VnodeProperties;
-  // The children for the virtual node.
-  children: Children;
-  // A boolean indicating whether the virtual node is an SVG element.
-  isSVG?: boolean;
-  // The DOM element that corresponds to the virtual node.
-  dom?: DomElement;
-  // A boolean indicating whether the virtual node has been processed in the keyed diffing algorithm.
-  processed?: boolean;
-}
-
-// The VnodeWithDom interface represents a virtual node that has a DOM element associated with it.
-export interface VnodeWithDom extends VnodeInterface {
-  dom: DomElement;
-}
-
-// The Component interface represents a function that returns a virtual node or a list of virtual nodes.
-// It can also have additional properties.
 export interface Component extends DefaultRecord {
-  // The function that returns a virtual node or a list of virtual nodes.
-  // It can take props and children as arguments.
-  // eslint-disable-next-line no-unused-vars
-  (props?: VnodeProperties | null, ...children: any[]): VnodeInterface | Children | any;
+  (props: VnodeProperties, children: any[]): Vnode | any;
 }
 
-// The POJOComponent interface represents a "plain old JavaScript object" (POJO) component.
-// It has a view function that returns a virtual node or a list of virtual nodes,
-// as well as optional props and children.
-// It can be used also to identify class instance components.
 export interface POJOComponent extends DefaultRecord {
-  // The view function that returns a virtual node or a list of virtual nodes.
   view: Component;
-  // The props for the component.
-  props?: VnodeProperties | null;
-  // The children for the component.
-  children?: any[];
 }
 
-// The VnodeComponentInterface represents a virtual node that has a component as its tag.
-// It has props and children, just like a regular virtual node.
-export interface VnodeComponentInterface extends VnodeInterface {
-  tag: Component | POJOComponent;
-  props: VnodeProperties;
-  children: Children;
+export type ValyrianComponent = Component | POJOComponent;
+
+export interface VnodeComponentInterface extends Vnode {
+  tag: ValyrianComponent;
 }
 
-// The Children interface represents a list of virtual nodes or other values.
-export interface Children extends Array<VnodeInterface | VnodeComponentInterface | any> {}
+export interface Children extends Array<Vnode | VnodeComponentInterface | ValyrianComponent | any> {}
 
-// The Directive interface represents a function that can be applied to a virtual node.
-// It receives the value, virtual node, and old virtual node as arguments, and can return a boolean value.
-// If only the virtual node is passed, it means its the on create phase for the v-node.
-// If the old virtual node is also passed, it means its the on update phase for the v-node.
 export interface Directive {
-  // eslint-disable-next-line no-unused-vars
-  (value: any, vnode: VnodeWithDom, oldVnode?: VnodeWithDom): void | boolean;
+  (value: any, vnode: VnodeWithDom, oldProps: VnodeProperties | null): void | boolean;
 }
 
-// The Directives interface is a mapping of directive names to Directive functions.
-export interface Directives extends Record<string, Directive> {}
-
-// The ReservedProps interface is a mapping of reserved prop names to the value `true`.
-// These prop names cannot be used as custom prop names.
-export interface ReservedProps extends Record<string, true> {}
-
-// The Current interface represents the current component and virtual node that are being processed.
-export interface Current {
-  // The current component. It can be a component, a POJO component, or null.
-  component: Component | POJOComponent | null;
-  // The current virtual node. It must have a DOM element associated with it.
-  vnode: VnodeWithDom | null;
-  // The old virtual node. It must have a DOM element associated with it.
-  oldVnode?: VnodeWithDom | null;
-  // The current event. It can be an event or null.
-  event: Event | null;
-}
+export const isNodeJs = Boolean(typeof process !== "undefined" && process.versions && process.versions.node);
 
-// The V function is the main function for creating virtual nodes.
-// It takes a tag or component, props, and children as arguments, and returns a virtual node.
-export interface V {
-  // eslint-disable-next-line no-unused-vars, no-use-before-define
-  (tagOrComponent: string | Component | POJOComponent, props: VnodeProperties | null, ...children: Children):
-    | VnodeInterface
-    | VnodeComponentInterface;
-  // eslint-disable-next-line no-unused-vars, no-use-before-define
-  fragment(_: any, ...children: Children): Children;
+export class Vnode {
+  constructor(
+    public tag: string | Component | POJOComponent,
+    public props: null | VnodeProperties,
+    public children: Children,
+    public dom?: DomElement,
+    public isSVG?: boolean
+  ) {}
 }
 
-// 'textTag' is a constant string that is used to represent text nodes in the virtual DOM.
-const textTag = "#text";
-
-// 'isNodeJs' is a boolean that is true if the code is running in a Node.js environment and false otherwise.
-// It is determined by checking if the 'process' global object is defined and has a 'versions' property.
-export let isNodeJs = Boolean(typeof process !== "undefined" && process.versions && process.versions.node);
-
-// 'createDomElement' is a function that creates a new DOM element with the specified tag name.
-// If 'isSVG' is true, it creates an SVG element instead of a regular DOM element.
-export function createDomElement(tag: string, isSVG: boolean = false): DomElement {
-  return isSVG ? document.createElementNS("http://www.w3.org/2000/svg", tag) : document.createElement(tag);
+export interface VnodeWithDom extends Vnode {
+  tag: string;
+  dom: DomElement;
+  props: VnodeProperties;
 }
 
-// 'Vnode' is a class that represents a virtual DOM node.
-// It has three properties: 'tag', 'props', and 'children'.
-// 'Vnode' is exported as an object with a type of 'VnodeInterface'.
-// The 'as unknown as VnodeInterface' is used to tell TypeScript that the 'Vnode' function has the same type as 'VnodeInterface'.
-export const Vnode = function Vnode(this: VnodeInterface, tag: string, props: VnodeProperties, children: Children) {
-  // 'this' refers to the current instance of 'Vnode'.
-  this.tag = tag;
-  this.props = props;
-  this.children = children;
-} as unknown as VnodeInterface;
-
-// 'isComponent' is a function that returns true if the given 'component' is a valid component and false otherwise.
-// A component is either a function or an object with a 'view' function.
-export function isComponent(component: unknown): component is Component {
-  return Boolean(
-    component && (typeof component === "function" || (typeof component === "object" && "view" in component))
-  );
-}
+export const isPOJOComponent = (component: unknown): component is POJOComponent =>
+  Boolean(component && typeof component === "object" && "view" in component);
 
-// 'isVnode' is a function that returns true if the given 'object' is a 'Vnode' instance and false otherwise.
-export const isVnode = (object?: unknown | VnodeInterface): object is VnodeInterface => {
-  // Use the 'instanceof' operator to check if 'object' is an instance of 'Vnode'.
-  return object instanceof Vnode;
-};
+export const isComponent = (component: unknown): component is Component =>
+  Boolean(typeof component === "function" || isPOJOComponent(component));
+export const isVnode = (object?: unknown): object is Vnode => object instanceof Vnode;
 
-// 'isVnodeComponent' is a function that returns true if the given 'object' is a 'Vnode' instance with a 'tag' property that is a valid component.
-// It returns false otherwise.
-export const isVnodeComponent = (object?: unknown | VnodeComponentInterface): object is VnodeComponentInterface => {
-  // Check if 'object' is a 'Vnode' instance and its 'tag' property is a valid component.
+export const isVnodeComponent = (object?: unknown): object is VnodeComponentInterface => {
   return isVnode(object) && isComponent(object.tag);
 };
 
-// 'domToVnode' is a function that converts a DOM node to a 'Vnode' instance.
-export function domToVnode(dom: any): VnodeWithDom {
-  // If the child node is a text node, create a 'Vnode' instance with the 'textTag' constant as the 'tag' property.
-  // Set the 'dom' property of the 'Vnode' instance to the child DOM node.
-  // Push the 'Vnode' instance to the 'children' array.
+export function v(tagOrComponent: string | ValyrianComponent, props: VnodeProperties, ...children: Children) {
+  return new Vnode(tagOrComponent, props, children);
+}
+
+v.fragment = (_: VnodeProperties, ...children: Children) => children;
+
+export function hidrateDomToVnode(dom: any): VnodeWithDom | void {
   if (dom.nodeType === 3) {
-    let vnode = new Vnode(textTag, {}, [dom.nodeValue]);
-    vnode.dom = dom;
-    return vnode as VnodeWithDom;
+    return dom.nodeValue;
   }
 
-  let children: VnodeWithDom[] = [];
-  // Iterate through all child nodes of 'dom'.
-  for (let i = 0, l = dom.childNodes.length; i < l; i++) {
-    let childDom = dom.childNodes[i];
-    // If the child node is an element node, recursively call 'domToVnode' to convert it to a 'Vnode' instance.
-    // Push the 'Vnode' instance to the 'children' array.
-    if (childDom.nodeType === 1 || childDom.nodeType === 3) {
-      children.push(domToVnode(childDom));
+  if (dom.nodeType === 1) {
+    const tag = dom.nodeName.toLowerCase();
+    const props = {} as VnodeProperties;
+    const children = [] as 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);
+      }
     }
-  }
 
-  let props: VnodeProperties = {};
-  // Iterate through all attributes of 'dom'.
-  for (let i = 0, l = dom.attributes.length; i < l; i++) {
-    let attr = dom.attributes[i];
-    // Add the attribute to the 'props' object, using the attribute's name as the key and its value as the value.
-    props[attr.nodeName] = attr.nodeValue;
-  }
+    const attributes = dom.attributes;
+    for (let i = 0, l = attributes.length; i < l; i++) {
+      const attr = attributes[i];
+      props[attr.nodeName] = attr.nodeValue;
+    }
 
-  // Create a new 'Vnode' instance with the 'tag' property set to the lowercase version of the DOM node's tag name.
-  // Set the 'props' and 'children' properties to the 'props' and 'children' arrays respectively.
-  // Set the 'dom' property of the 'Vnode' instance to the DOM node.
-  let vnode = new Vnode(dom.tagName.toLowerCase(), props, children);
-  vnode.dom = dom;
-  return vnode as VnodeWithDom;
+    const vnode = new Vnode(tag, props, children);
+    vnode.dom = dom;
+    vnode.isSVG = tag === "svg";
+    return vnode as VnodeWithDom;
+  }
 }
 
-// This function takes in an HTML string and creates a virtual node representation of it
-// using the `domToVnode` function. It does this by creating a new `div` element, setting
-// its `innerHTML` to the provided HTML string, and then using `map` to iterate over the
-// `childNodes` of the `div` element, passing each one to `domToVnode` to create a virtual
-// node representation of it. The resulting array of virtual nodes is then returned.
 export function trust(htmlString: string) {
-  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);
 }
 
-/* ========================================================================== */
-/* Main Component implementation                                              */
-/* ========================================================================== */
-
-// These variables are used to store the main component, the main virtual node, and whether
-// the main component is currently mounted.
 let mainComponent: VnodeComponentInterface | null = null;
 let mainVnode: VnodeWithDom | null = null;
 let isMounted = false;
 
-// This object is used to store the current virtual node and component being rendered.
-export const current: Current = {
-  vnode: null,
-  oldVnode: null,
-  component: null,
-  event: null
-};
-
-/* Reserved props ----------------------------------------------------------- */
-// This object is used to store the names of reserved props, which are props that are reserved
-// for special purposes and should not be used as regular component props.
-export const reservedProps: Record<string, true> = {
-  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
+export const current = {
+  vnode: null as Vnode | null,
+  component: null as ValyrianComponent | null,
+  event: null as Event | null
 };
 
-/* Mounting, Updating, Cleanup and Unmounting ------------------------------- */
-// These sets are used to store callbacks for various lifecycle events: mounting, updating,
-// cleaning up, and unmounting.
-const onCleanupSet: Set<Function> = new Set();
-const onMountSet: Set<Function> = new Set();
-const onUpdateSet: Set<Function> = new Set();
-const onUnmountSet: Set<Function> = new Set();
-
-// These functions allow users to register callbacks for the corresponding lifecycle events.
-export function onMount(callback: Function) {
-  if (!isMounted) {
-    onMountSet.add(callback);
-  }
-}
-
-export function onUpdate(callback: Function) {
-  onUpdateSet.add(callback);
-}
-
-export function onCleanup(callback: Function) {
-  onCleanupSet.add(callback);
-}
-
-export function onUnmount(callback: Function) {
-  if (!isMounted) {
-    onUnmountSet.add(callback);
-  }
-}
-
-// This function is used to call all the callbacks in a given set.
-function callSet(set: Set<Function>) {
-  for (let callback of set) {
+export const reservedProps = new Set<string>([
+  "key",
+  "state",
+  "v-keep",
+  "v-text",
+  "v-if",
+  "v-for",
+  "v-show",
+  "v-class",
+  "v-html",
+  "v-model",
+  "v-create",
+  "v-update",
+  "v-cleanup"
+]);
+
+const onCleanupSet = new Set<Function>();
+const onMountSet = new Set<Function>();
+const onUpdateSet = new Set<Function>();
+const onUnmountSet = new Set<Function>();
+export const onMount = (callback: Function) => !isMounted && onMountSet.add(callback);
+export const onUpdate = (callback: Function) => onUpdateSet.add(callback);
+export const onCleanup = (callback: Function) => onCleanupSet.add(callback);
+export const onUnmount = (callback: Function) => !isMounted && onUnmountSet.add(callback);
+const callSet = (set: Set<Function>) => {
+  for (const callback of set) {
     callback();
   }
-
   set.clear();
-}
-
-/* Event listener ----------------------------------------------------------- */
-
-// This object stores the names of event listeners that have been added
-const eventListenerNames: Record<string, true> = {};
-
-// This function is called when an event occurs
-function eventListener(e: Event) {
-  // Set the current event to the event that occurred so that it can be prevented if necessary
-  current.event = e;
-
-  // Convert the target of the event to a DOM element
-  let dom = e.target as DomElement;
-
-  // Create the name of the event listener by adding "v-on" to the event type
-  let name = `v-on${e.type}`;
-
-  // Keep going up the DOM tree until we find an element with an event listener
-  // matching the event type
-  while (dom) {
-    if (dom[name]) {
-      // Call the event listener function
-      dom[name](e, dom);
-
-      // If the default action of the event hasn't been prevented, update the DOM
-      if (!e.defaultPrevented) {
-        update();
-      }
-      return;
-    }
-    dom = dom.parentNode as DomElement;
-  }
-
-  current.event = null;
-}
-
-/* Directives --------------------------------------------------------------- */
-
-// This function creates a directive that hides an element based on a condition
-let hideDirective = (test: boolean) => (bool: boolean, vnode: VnodeInterface, oldnode?: VnodeInterface) => {
-  // If test is true, use the value of bool. Otherwise, use the opposite of bool.
-  let value = test ? bool : !bool;
-
-  // If the value is true, hide the element by replacing it with a text node
-  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 as unknown as DomElement;
-    return false;
-  }
 };
 
-// This object stores all the available directives
-export const directives: 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),
+export const directives: Record<string, Directive> = {
+  "v-if": (value, vnode) => {
+    if (!Boolean(value)) {
+      const parentNode = vnode.dom?.parentNode;
+      if (parentNode) {
+        parentNode.replaceChild(document.createTextNode(""), vnode.dom);
+      }
 
-  // The "v-for" directive creates a loop and applies a callback function to each item in the loop
-  "v-for": (set: unknown[], vnode: VnodeWithDom) => {
-    let newChildren: VnodeInterface[] = [];
-    let callback = vnode.children[0];
-    for (let i = 0, l = set.length; i < l; i++) {
-      newChildren.push(callback(set[i], i));
+      return false;
     }
-    vnode.children = newChildren;
   },
 
-  // The "v-show" directive shows or hides an element by setting the "display" style property
-  "v-show": (bool: boolean, vnode: VnodeWithDom) => {
+  "v-show": (value, vnode) => {
+    const bool = Boolean(value);
     (
       vnode.dom as unknown as {
         style: { display: string };
@@ -371,37 +170,32 @@ export const directives: Directives = {
     ).style.display = bool ? "" : "none";
   },
 
-  // The "v-class" directive adds or removes class names from an element based on a condition
-  "v-class": (classes: { [x: string]: boolean }, vnode: VnodeWithDom) => {
-    // Loop through all the class names in the classes object
-    for (let name in classes) {
-      // Add or remove the class name from the element's class list based on the value in the classes object
-      (vnode.dom as DomElement).classList.toggle(name, classes[name]);
-    }
-  },
-
-  // The "v-html" directive sets the inner HTML of an element to the given HTML string
-  "v-html": (html: string, vnode: VnodeWithDom) => {
-    // Set the children of the vnode to a trusted version of the HTML string
-    vnode.children = [trust(html)];
+  "v-html": (value, vnode) => {
+    vnode.children = trust(value as string);
   },
 
   // The "v-model" directive binds the value of an input element to a model property
-  "v-model": ([model, property, event]: any[], vnode: VnodeWithDom, oldVnode?: VnodeWithDom) => {
+  "v-model": (model, vnode) => {
+    // eslint-disable-next-line prefer-const
+    if ("name" in vnode.props === false) {
+      return;
+    }
+
     let value;
+    const property = vnode.props.name;
+    let event = "oninput";
+
     // This function updates the model property when the input element's value changes
     let handler = (e: Event) => (model[property] = (e.target as DomElement & Record<string, any>).value);
     if (vnode.tag === "input") {
-      // If the element is an input, use the "input" event by default
-      event = event || "oninput";
       // Depending on the type of input element, use a different handler function
       switch (vnode.props.type) {
         case "checkbox": {
           if (Array.isArray(model[property])) {
             // If the model property is an array, add or remove the value from the array when the checkbox is checked or unchecked
             handler = (e: Event) => {
-              let val = (e.target as DomElement & Record<string, any>).value;
-              let idx = model[property].indexOf(val);
+              const val = (e.target as DomElement & Record<string, any>).value;
+              const idx = model[property].indexOf(val);
               if (idx === -1) {
                 model[property].push(val);
               } else {
@@ -444,14 +238,14 @@ export const directives: Directives = {
       }
     } else if (vnode.tag === "select") {
       // If the element is a select element, use the "click" event by default
-      event = event || "onclick";
+      event = "onclick";
       if (vnode.props.multiple) {
         // If the select element allows multiple selections, update the model property with an array of selected values
         handler = (e: Event & Record<string, any>) => {
-          let val = (e.target as DomElement & Record<string, any>).value;
+          const val = (e.target as DomElement & Record<string, any>).value;
           if (e.ctrlKey) {
             // If the Ctrl key is pressed, add or remove the value from the array
-            let idx = model[property].indexOf(val);
+            const idx = model[property].indexOf(val);
             if (idx === -1) {
               model[property].push(val);
             } else {
@@ -464,30 +258,28 @@ export const directives: Directives = {
           }
         };
         // Set the "selected" attribute on the options based on whether they are in the model property array
-        vnode.children.forEach((child: VnodeInterface) => {
+        vnode.children.forEach((child: VnodeWithDom) => {
           if (child.tag === "option") {
-            let value = "value" in child.props ? child.props.value : child.children.join("").trim();
+            const value = "value" in child.props ? child.props.value : child.children.join("").trim();
             child.props.selected = model[property].indexOf(value) !== -1;
           }
         });
       } else {
         // If the select element does not allow multiple selections, set the "selected" attribute on the options based on the value of the model property
-        vnode.children.forEach((child: VnodeInterface) => {
+        vnode.children.forEach((child: VnodeWithDom) => {
           if (child.tag === "option") {
-            let value = "value" in child.props ? child.props.value : child.children.join("").trim();
+            const value = "value" in child.props ? child.props.value : child.children.join("").trim();
             child.props.selected = value === model[property];
           }
         });
       }
     } else if (vnode.tag === "textarea") {
-      // If the element is a textarea, use the "input" event by default
-      event = event || "oninput";
       // Set the textarea's content to the value of the model property
       vnode.children = [model[property]];
     }
 
     // We assume that the prev handler if any will not be changed by the user across patchs
-    let prevHandler = vnode.props[event];
+    const prevHandler = vnode.props[event];
 
     // Set the event handler on the element
     // eslint-disable-next-line no-use-before-define
@@ -501,524 +293,492 @@ export const directives: 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: VnodeWithDom) => void, vnode: VnodeWithDom, oldVnode?: VnodeWithDom) => {
-    // If this is not an update, call the callback function with the new virtual node
-    if (!oldVnode) {
-      let cleanup = callback(vnode);
+  "v-create": (callback, vnode, oldProps) => {
+    if (!oldProps) {
+      const cleanup = callback(vnode);
 
-      // If the callback function returns a function, call it when the update is gonna be cleaned up
       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": (
-    // eslint-disable-next-line no-unused-vars
-    callback: (vnode: VnodeWithDom, oldVnode: VnodeWithDom) => void,
-    vnode: VnodeWithDom,
-    oldVnode?: VnodeWithDom
-  ) => {
-    // If this is an update, call the callback function with the new and old virtual nodes
-    if (oldVnode) {
-      let cleanup = callback(vnode, oldVnode);
-
-      // If the callback function returns a function, call it when the update is gonna be cleaned up
+  "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": (
-    // eslint-disable-next-line no-unused-vars
-    callback: (vnode: VnodeWithDom, oldVnode?: VnodeWithDom) => void,
-    vnode: VnodeWithDom,
-    oldVnode?: VnodeWithDom
-  ) => {
-    // Add the callback function to the list of cleanup functions to be called when the update is cleaned up
-    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] as Function)() : 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];
+      }
+    }
   }
 };
-// Add a directive to the global directives object, with the key being the name
-// preceded by "v-". Also add the name to the global reservedProps object.
+
 export function directive(name: string, directive: Directive) {
-  let directiveName = `v-${name}`;
+  const directiveName = `v-${name}`;
   directives[directiveName] = directive;
-  reservedProps[directiveName] = true;
+  reservedProps.add(directiveName);
+}
+
+export function setPropNameReserved(name: string) {
+  reservedProps.add(name);
+}
+
+const eventListenerNames = new Set<string>();
+
+function eventListener(e: Event) {
+  current.event = e;
+  let dom = e.target as DomElement;
+  const name = `on${e.type}`;
+
+  while (dom) {
+    const oldProps = dom.props;
+    if (oldProps && oldProps[name]) {
+      oldProps[name](e, dom);
+
+      if (!e.defaultPrevented) {
+        // eslint-disable-next-line no-use-before-define
+        update();
+      }
+      return;
+    }
+    dom = dom.parentNode as DomElement;
+  }
+
+  current.event = null;
 }
 
-// Set an attribute on a virtual DOM node and update the actual DOM element.
-// If the attribute value is a function, add an event listener for the attribute
-// name to the DOM element represented by mainVnode.
-// If oldVnode is provided, compare the new attribute value to the old value
-// and only update the attribute if the values are different.
-function sharedSetAttribute(name: string, value: any, newVnode: VnodeWithDom, oldVnode?: VnodeWithDom): void | boolean {
-  // If the attribute value is a function, add an event listener for the attribute
-  // name to the DOM element represented by mainVnode.
+function sharedSetAttribute(name: string, value: any, newVnode: VnodeWithDom): void | boolean {
+  const newVnodeDom = newVnode.dom;
   if (typeof value === "function") {
-    // Only add the event listener if it hasn't been added yet.
-    if (name in eventListenerNames === false) {
+    if (!eventListenerNames.has(name)) {
+      // We attach the delegated event listener to the main vnode dom element, which is the root of the component
       (mainVnode as VnodeWithDom).dom.addEventListener(name.slice(2), eventListener);
-      eventListenerNames[name] = true;
+      eventListenerNames.add(name);
     }
-    newVnode.dom[`v-${name}`] = value;
     return;
   }
 
-  // If the attribute is present on the DOM element and newVnode is not an SVG,
-  // update the attribute if the value has changed.
-  if (name in newVnode.dom && newVnode.isSVG === false) {
-    // eslint-disable-next-line eqeqeq
-    if (newVnode.dom[name] != value) {
-      newVnode.dom[name] = value;
-    }
+  if (name in newVnodeDom) {
+    newVnodeDom[name] = value;
     return;
   }
 
-  // If oldVnode is not provided or the attribute value has changed, update the
-  // attribute on the DOM element.
-  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);
   }
 }
 
-// Set an attribute on a virtual DOM node and update the actual DOM element.
-// Skip the attribute if it is in the reservedProps object.
-export function setAttribute(name: string, value: any, newVnode: VnodeWithDom, oldVnode?: VnodeWithDom): void {
-  if (name in reservedProps) {
-    return;
+export function setAttribute(name: string, value: any, newVnode: VnodeWithDom): void {
+  if (!reservedProps.has(name)) {
+    newVnode.props[name] = value;
+    sharedSetAttribute(name, value, newVnode);
   }
-  newVnode.props[name] = value;
-  sharedSetAttribute(name, value, newVnode as VnodeWithDom, oldVnode);
 }
 
-// Update the attributes on a virtual DOM node. If oldVnode is provided, remove
-// attributes from the DOM element that are not present in newVnode.props but are
-// present in oldVnode.props. Then, iterate over the attributes in newVnode.props
-// and update the DOM element with the attributes using the sharedSetAttribute
-// function. If an attribute is in the reservedProps object and has a corresponding
-// directive in the directives object, call the directive with the attribute value
-// and the two virtual DOM nodes as arguments. If the directive returns false, exit
-// the loop.
-export function updateAttributes(newVnode: VnodeWithDom, oldVnode?: VnodeWithDom): void {
-  // If oldVnode is provided, remove attributes from the DOM element that are not
-  // present in newVnode.props but are present in oldVnode.props.
-  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;
+export function updateAttributes(newVnode: VnodeWithDom, oldProps: VnodeProperties | null): void {
+  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);
         }
       }
     }
   }
 
-  // Iterate over the attributes in newVnode.props and update the DOM element with
-  // the attributes using the sharedSetAttribute function.
-  for (let name in newVnode.props) {
-    if (name in reservedProps) {
-      // If there is a directive for the attribute, call it with the attribute value
-      // and the two virtual DOM nodes as arguments. If the directive returns false,
-      // exit the loop.
-      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);
+    }
   }
 }
 
-/* patch ------------------------------------------------------------------- */
+export function createElement(tag: string, isSVG: boolean): DomElement {
+  return isSVG
+    ? document.createElementNS("http://www.w3.org/2000/svg", tag)
+    : (document.createElement(tag) as DomElement);
+}
 
-// Patch a DOM node with a new VNode tree
-export function patch(newVnode: VnodeWithDom, oldVnode?: VnodeWithDom): void {
-  // If the new tree has no children, set the text content of the parent DOM element to an empty string
-  if (newVnode.children.length === 0) {
-    newVnode.dom.textContent = "";
-    return;
+function flatTree(newVnode: VnodeWithDom) {
+  current.vnode = newVnode;
+
+  if ("v-for" in newVnode.props) {
+    const children = [];
+    const set = newVnode.props["v-for"];
+    const l = set.length;
+    const callback = newVnode.children[0];
+
+    for (let i = 0; i < l; i++) {
+      const newChild = callback(set[i], i);
+      if (newChild instanceof Vnode) {
+        newChild.props = newChild.props || {};
+        newChild.isSVG = newVnode.isSVG || newChild.tag === "svg";
+      }
+      children[i] = newChild;
+    }
+
+    return children;
   }
 
-  // Get the children of the new and old virtual DOM nodes
-  let newTree = newVnode.children;
-  let oldTree = oldVnode?.children || [];
-  // Get the length of the old tree
-  let oldTreeLength = oldTree.length;
-
-  // If the old tree has children and the first child of the new tree is a VNode with a "key"
-  // attribute and the first child of the old tree is a VNode with a "key" attribute, update
-  // the DOM element in place by comparing the keys of the nodes in the trees.
-  if (oldTreeLength && newTree[0] instanceof Vnode && "key" in newTree[0].props && "key" in oldTree[0].props) {
-    // Get the lengths of the new and old trees
-    let newTreeLength = newTree.length;
-
-    // Create an object that maps keys to indices in the old tree
-    let oldKeyedList: Record<string, number> = {};
-    for (let i = 0; i < oldTreeLength; i++) {
-      oldKeyedList[oldTree[i].props.key] = i;
+  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];
+      }
+      children.splice(i, 1);
+      continue;
     }
 
-    // Create an object that maps keys to indices in the new tree
-    let newKeyedList: Record<string, number> = {};
-    for (let i = 0; i < newTreeLength; i++) {
-      newKeyedList[newTree[i].props.key] = i;
+    if (Array.isArray(newChild)) {
+      if (children === originalChildren) {
+        children = [...originalChildren];
+      }
+      children.splice(i, 1, ...newChild);
+      continue;
     }
 
-    // Iterate over the new tree
-    for (let i = 0; i < newTreeLength; i++) {
-      // Get the current new child and the corresponding old child
-      let newChild = newTree[i];
-      let oldChild = oldTree[oldKeyedList[newChild.props.key]];
-      // Initialize a flag to determine whether to patch the child
-      let shouldPatch = true;
-
-      // If the old child exists, update the DOM element of the new child to match the old child's DOM element
-      if (oldChild) {
-        newChild.dom = oldChild.dom;
-        // If the new and old children have the same "v-keep" attribute value, update the children of the new child to match the old child's children
-        if ("v-keep" in newChild.props && newChild.props["v-keep"] === oldChild.props["v-keep"]) {
-          newChild.children = oldChild.children;
-          // Set the shouldPatch flag to false
-          shouldPatch = false;
-        } else {
-          updateAttributes(newChild, oldChild);
+    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];
         }
 
-        // If the old child does not exist, create a new DOM element for the new child and update its attributes
-      } else {
-        newChild.dom = createDomElement(newChild.tag, newChild.isSVG);
-        updateAttributes(newChild);
-      }
+        const component = (current.component = newChild.tag);
 
-      // If the new child's DOM element is not the i-th child of the parent DOM element, insert it
-      if (!newVnode.dom.childNodes[i]) {
-        newVnode.dom.appendChild(newChild.dom);
+        children[i] = (isPOJOComponent(component) ? component.view : component).bind(component)(
+          newChild.props,
+          newChild.children
+        );
 
-        // If the new child's DOM element is not the same as the i-th child of the parent DOM element, replace the i-th child with the new child's DOM element
-      } else if (newVnode.dom.childNodes[i] !== newChild.dom) {
-        newVnode.dom.replaceChild(newChild.dom, newVnode.dom.childNodes[i]);
+        continue;
       }
-
-      // If the shouldPatch flag is true, recursively call the patch function on the new child, passing in the old child as the second argument
-      shouldPatch && patch(newChild, oldChild);
     }
 
-    // For the rest of the children, we should remove them from the DOM
-    for (let i = newTreeLength; i < oldTreeLength; i++) {
-      // If the i-th child of the old tree does not have a corresponding key in the new tree, remove its DOM element from the parent DOM element
-      if (!newKeyedList[oldTree[i].props.key]) {
-        oldTree[i].dom.parentNode && oldTree[i].dom.parentNode.removeChild(oldTree[i].dom);
-      }
-    }
+    i++;
+  }
+
+  return children;
+}
+
+function createNewElement(newChild: VnodeWithDom, newVnode: VnodeWithDom, oldChild: DomElement | null) {
+  const dom = createElement(newChild.tag, newChild.isSVG as boolean);
+  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 the new tree has no children, set the text content of the parent DOM element to an empty string
-  if (newTree.length === 0) {
-    newVnode.dom.textContent = "";
+  const children = flatTree(newChild);
+  if (children.length === 0) {
+    newChild.dom.textContent = "";
     return;
   }
 
-  // Set the global current object to the new and old virtual DOM nodes
-  current.vnode = newVnode;
-  current.oldVnode = oldVnode;
+  for (let i = 0, l = children.length; i < l; i++) {
+    if (children[i] instanceof Vnode === false) {
+      newChild.dom.appendChild(document.createTextNode(children[i]));
+      continue;
+    }
+    createNewElement(children[i], newChild, null);
+  }
+}
 
-  // Flatten the new tree
-  // Take into account that is necessary to flatten the tree before the patch process
-  // to let the hooks and signals work properly
-  for (let i = 0; i < newTree.length; i++) {
-    let newChild = newTree[i];
+function patchKeyed(newVnode: VnodeWithDom, children: Children) {
+  const oldTree = [...Array.from(newVnode.dom.childNodes)] as unknown as DomElement[];
+  const childNodes = newVnode.dom.childNodes;
+  const oldKeyedList: Record<string, number> = {};
+  const newKeyedList: Record<string, number> = {};
 
-    // If the new child is a Vnode and is not a text node
-    if (newChild instanceof Vnode) {
-      // If the tag of the new child is not a string, it is a component
-      if (typeof newChild.tag !== "string") {
-        // Set the current component to the tag of the new child
-        current.component = newChild.tag;
-        // Replace the new child with the result of calling its view or bind method, passing in the props and children as arguments
-        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 = oldTree.length; i < l; i++) {
+    const oldProps = oldTree[i].props;
+    if (oldProps) {
+      oldKeyedList[oldProps.key as string] = i;
+    }
 
-      continue;
+    if (i < children.length && children[i] instanceof Vnode) {
+      newKeyedList[children[i].props.key as string] = i;
     }
+  }
 
-    // If the new child is an array, flatten it and continue the loop
-    if (Array.isArray(newChild)) {
-      newTree.splice(i--, 1, ...newChild);
+  for (let i = 0, l = children.length; i < l; i++) {
+    const newChild = children[i];
+    const oldChild = oldTree[oldKeyedList[newChild.props.key as string]];
+
+    if (!oldChild) {
+      createNewElement(newChild, newVnode, childNodes[i] as DomElement | null);
       continue;
     }
 
-    // If the new child is null or undefined, remove it from the new tree and continue the loop
-    if (newChild === null || newChild === undefined) {
-      newTree.splice(i--, 1);
-      continue;
+    newChild.dom = oldChild;
+    const currentChild = childNodes[i];
+    if (!currentChild) {
+      newVnode.dom.appendChild(oldChild);
+    } else if (currentChild !== oldChild) {
+      newVnode.dom.replaceChild(oldChild, currentChild);
     }
 
-    // If the new child is a Vnode, set the text of the Vnode to the text content of its dom property
-    newTree[i] = new Vnode(textTag, {}, [newChild]);
+    if ("v-keep" in newChild.props === false || oldChild.props["v-keep"] !== newChild.props["v-keep"]) {
+      updateAttributes(newChild as VnodeWithDom, oldChild.props);
+      oldChild.props = newChild.props;
+
+      if ("v-text" in newChild.props) {
+        // eslint-disable-next-line eqeqeq
+        if (oldChild.textContent != newChild.props["v-text"]) {
+          oldChild.textContent = newChild.props["v-text"];
+        }
+        continue;
+      }
+      // eslint-disable-next-line no-use-before-define
+      patch(newChild as VnodeWithDom);
+    }
+  }
+
+  for (let i = children.length, l = childNodes.length; i < l; i++) {
+    childNodes[i]?.remove();
   }
+}
+
+// eslint-disable-next-line complexity
+function patch(newVnode: VnodeWithDom): void {
+  const children = flatTree(newVnode);
+
+  const dom = newVnode.dom;
 
-  // Patch the the old tree
-  for (let i = 0; i < newTree.length; i++) {
-    let newChild = newTree[i];
-
-    if (newChild.tag === textTag) {
-      // If no old child exists at the same index
-      if (i >= oldTreeLength) {
-        // Create a new text node for the new child
-        newChild.dom = document.createTextNode(newChild.children[0]);
-        // Append the new text node to the dom
-        newVnode.dom.appendChild(newChild.dom);
+  if (children.length === 0) {
+    if (dom.childNodes.length) {
+      dom.textContent = "";
+    }
+    return;
+  }
+
+  const oldDomChildren = dom.childNodes as unknown as DomElement[];
+  const oldChildrenLength = oldDomChildren.length;
+  if (oldChildrenLength > 0) {
+    const firstOldProps = oldDomChildren[0].props;
+    const firstVnode = children[0] as VnodeWithDom;
+    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;
+      }
+      createNewElement(children[i], newVnode, null);
+    }
+    return;
+  }
+
+  for (let i = 0; i < childrenLength; i++) {
+    const newChild = children[i] as VnodeWithDom;
+    const isText = newChild instanceof Vnode === false;
+    const oldChild = oldDomChildren[i];
+
+    if (!oldChild) {
+      if (isText) {
+        newVnode.dom.appendChild(document.createTextNode(newChild as unknown as string));
         continue;
       }
 
-      // If there is an old child at the same index
-      let oldChild = oldTree[i];
+      createNewElement(newChild as VnodeWithDom, newVnode, null);
+      continue;
+    }
 
-      // If the old child is not a text node
-      if (oldChild.tag !== textTag) {
-        // Create a new text node for the new child
-        newChild.dom = document.createTextNode(newChild.children[0]);
-        // Replace the old child in the dom with the new text node
-        newVnode.dom.replaceChild(newChild.dom, oldChild.dom);
+    if (isText) {
+      if (oldChild.nodeType !== 3) {
+        newVnode.dom.replaceChild(document.createTextNode(newChild as unknown as string), oldChild);
         continue;
       }
 
-      // If the old child is a text node
-      // Set the dom property of the text Vnode to the dom property of the old child
-      newChild.dom = oldChild.dom;
-      // If the text content of the old child is different from the new child, update the text content of the old child
       // eslint-disable-next-line eqeqeq
-      if (newChild.children[0] != oldChild.dom.textContent) {
-        oldChild.dom.textContent = newChild.children[0];
+      if (oldChild.nodeValue != (newChild as unknown as string)) {
+        oldChild.nodeValue = newChild as unknown as string;
       }
       continue;
     }
 
-    // If the new child is not a text node
-    // Set the isSVG flag for the new child if it is an SVG element or if the parent is an SVG element
-    newChild.isSVG = newVnode.isSVG || newChild.tag === "svg";
-
-    // If there is no old child at the same index
-    if (i >= oldTreeLength) {
-      // Create a new dom element for the new child
-      newChild.dom = createDomElement(newChild.tag as string, newChild.isSVG);
-      // Update the attributes of the new child
-      updateAttributes(newChild as VnodeWithDom);
-      // Append the new child to the dom
-      newVnode.dom.appendChild(newChild.dom);
-      // Recursively patch the new child
-      patch(newChild as VnodeWithDom);
-      continue;
+    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 there is an old child at the same index
-    let oldChild = oldTree[i];
-
-    // If the tag of the new child is different from the tag of the old child
-    if (newChild.tag !== oldChild.tag) {
-      // Create a new dom element for the new child
-      newChild.dom = createDomElement(newChild.tag as string, newChild.isSVG);
-      // Update the attributes of the new child
-      updateAttributes(newChild as VnodeWithDom);
-      // Replace the old child in the dom with the new child
-      newVnode.dom.replaceChild(newChild.dom, oldChild.dom);
-      // Recursively patch the new child
-      patch(newChild as VnodeWithDom);
+    if (newChild.tag !== oldChild.nodeName.toLowerCase()) {
+      createNewElement(newChild, newVnode, oldChild);
       continue;
     }
 
-    // If the tag of the new child is the same as the tag of the old child
-    // Set the dom property of the new child to the dom property of the old child
-    newChild.dom = oldChild.dom;
-    // If the v-keep prop is the same for both the new and old child, set the children of the new child to the children of the old child
-    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) {
+      // eslint-disable-next-line eqeqeq
+      if (newChild.dom.textContent != newChild.props["v-text"]) {
+        newChild.dom.textContent = newChild.props["v-text"];
+      }
       continue;
     }
-
-    // Update the attributes of the new child based on the old child
-    updateAttributes(newChild as VnodeWithDom, oldChild);
-    // Recursively patch the new and old children
-    patch(newChild as VnodeWithDom, oldChild);
+    patch(newChild);
   }
 
-  // Remove any old children that are no longer present in the new tree
-  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();
   }
 }
 
-// Update the main Vnode
+export function updateVnode(vnode: VnodeWithDom): string | void {
+  callSet(onCleanupSet);
+  vnode.props = vnode.props || {};
+  patch(vnode);
+  callSet(isMounted ? onUpdateSet : onMountSet);
+  isMounted = true;
+  current.vnode = null;
+  current.component = null;
+}
+
 export function update(): void | string {
-  // If the main Vnode exists
   if (mainVnode) {
-    // Call any cleanup functions that are registered with the onCleanupSet set
-    callSet(onCleanupSet);
-    // Store a reference to the old main Vnode
-    let oldMainVnode = mainVnode;
-    // Create a new main Vnode with the main component as its only child
-    mainVnode = new Vnode(oldMainVnode.tag, oldMainVnode.props, [mainComponent]) as VnodeWithDom;
-    mainVnode.dom = oldMainVnode.dom;
-    mainVnode.isSVG = oldMainVnode.isSVG;
-
-    // Recursively patch the new and old main Vnodes
-    patch(mainVnode, oldMainVnode);
-
-    // Call any update or mount functions that are registered with the onUpdateSet or onMountSet set
-    callSet(isMounted ? onUpdateSet : onMountSet);
-
-    // Set the isMounted flag to true
-    isMounted = true;
-
-    // Reset the current vnode, oldVnode, and component properties
-    current.vnode = null;
-    current.oldVnode = null;
-    current.component = null;
-
-    // If the code is running in a Node.js environment, return the inner HTML of the main Vnode's dom element
+    mainVnode.children = [mainComponent];
+    updateVnode(mainVnode as VnodeWithDom);
     if (isNodeJs) {
       return mainVnode.dom.innerHTML;
     }
   }
 }
 
-// Update custom Vnode
-// It is assumed that a first mount has already occurred, so,
-// the oldVnode is not null and the dom property of the oldVnode is not null
-// You need to set the dom property of the newVnode to the dom property of the oldVnode
-// The same with the isSVG property
-// Prefer this function over patch to allow for cleanup, onUpdate and onMount sets to be called
-export function updateVnode(vnode: VnodeWithDom, oldVnode: VnodeWithDom): string | void {
-  // Call any cleanup functions that are registered with the onCleanupSet set
-  callSet(onCleanupSet);
-
-  // Recursively patch the new and old main Vnodes
-  patch(vnode, oldVnode);
+let debouncedUpdateTimeout: any;
 
-  // Set the oldVnode's tag, props, children, dom, and isSVG properties to the newVnode's tag, props, children, dom, and isSVG properties
-  // This is necessary to allow for the oldVnode to be used as the newVnode in the next update with the normal update function
-  oldVnode.tag = vnode.tag;
-  oldVnode.props = { ...vnode.props };
-  oldVnode.children = [...vnode.children];
-  oldVnode.dom = vnode.dom;
-  oldVnode.isSVG = vnode.isSVG;
+const clearDebouncedUpdateMethod = isNodeJs ? clearTimeout : cancelAnimationFrame;
+const setDebouncedUpdateMethod = isNodeJs ? () => setTimeout(update, 5) : () => requestAnimationFrame(update);
 
-  // Call any update or mount functions that are registered with the onUpdateSet or onMountSet set
-  callSet(isMounted ? onUpdateSet : onMountSet);
-
-  // Set the isMounted flag to true
-  isMounted = true;
-
-  // Reset the current vnode, oldVnode, and component properties
-  current.vnode = null;
-  current.oldVnode = null;
-  current.component = null;
-
-  if (isNodeJs) {
-    return vnode.dom.innerHTML;
-  }
+export function debouncedUpdate() {
+  clearDebouncedUpdateMethod(debouncedUpdateTimeout);
+  debouncedUpdateTimeout = setDebouncedUpdateMethod();
 }
 
-// Unmount the main Vnode
 export function unmount() {
-  // If the main Vnode exists
   if (mainVnode) {
-    // Set the main component to a null Vnode
-    mainComponent = new Vnode(() => null, {}, []) as VnodeComponentInterface;
-    // Update the main Vnode
-    let result = update();
-    // Call any unmount functions that are registered with the onUnmountSet set
+    mainComponent = v(() => null, {}) as VnodeComponentInterface;
+    const result = update();
     callSet(onUnmountSet);
-
-    // Remove any event listeners that were added to the main Vnode's dom element
-    for (let name in eventListenerNames) {
+    for (const name in eventListenerNames) {
       mainVnode.dom.removeEventListener(name.slice(2).toLowerCase(), eventListener);
       Reflect.deleteProperty(eventListenerNames, name);
     }
 
-    // Reset the main component and main Vnode
     mainComponent = null;
     mainVnode = null;
-    // Set the isMounted flag to false
     isMounted = false;
-    // Reset the current vnode, oldVnode, and component properties
     current.vnode = null;
-    current.oldVnode = null;
     current.component = null;
-    // Return the result of updating the main Vnode
+    current.event = null;
     return result;
   }
 }
-// This function takes in a DOM element or a DOM element selector and a component to be mounted on it.
-export function mount(dom: string | DomElement, component: any) {
-  // Check if the 'dom' argument is a string. If it is, select the first element that matches the given selector.
-  // Otherwise, use the 'dom' argument as the container.
-  let container =
-    typeof dom === "string"
-      ? isNodeJs
-        ? createDomElement(dom, dom === "svg")
-        : document.querySelectorAll(dom)[0]
-      : dom;
-
-  // Check if the 'component' argument is a Vnode component or a regular component.
-  // If it's a regular component, create a new Vnode component using the 'component' argument as the tag.
-  // If it's not a component at all, create a new Vnode component with the 'component' argument as the rendering function.
-  let vnodeComponent = isVnodeComponent(component)
-    ? component
-    : isComponent(component)
-    ? new Vnode(component, {}, [])
-    : new Vnode(() => component, {}, []);
-
-  // If a main component already exists and it's not the same as the current 'vnodeComponent', unmount it.
-  if (mainComponent && mainComponent.tag !== vnodeComponent.tag) {
-    unmount();
+
+export function mount(dom: string | DomElement, component: ValyrianComponent | VnodeComponentInterface | any) {
+  const container =
+    typeof dom === "string" ? (isNodeJs ? createElement(dom, dom === "svg") : document.querySelector(dom)) : dom;
+
+  if (isComponent(component)) {
+    mainComponent = v(component, {}, []) as VnodeComponentInterface;
+  } else if (isVnodeComponent(component)) {
+    mainComponent = component;
+  } else {
+    mainComponent = v(() => component, {}, []) as VnodeComponentInterface;
   }
 
-  // Set the 'vnodeComponent' as the main component.
-  mainComponent = vnodeComponent as VnodeComponentInterface;
-  // Convert the container element to a Vnode.
-  mainVnode = domToVnode(container);
-  // Update the DOM with the new component.
+  mainVnode = hidrateDomToVnode(container) as VnodeWithDom;
   return update();
 }
-
-// This is a utility function for creating Vnode objects.
-// It takes in a tag or component, and optional props and children arguments.
-export const v: V = (tagOrComponent, props = {}, ...children) => {
-  // Return a new Vnode object using the given arguments.
-  return new Vnode(tagOrComponent, props || {}, children);
-};
-
-// This utility function creates a fragment Vnode.
-// It takes in a placeholder and the children arguments, returns only the children.
-v.fragment = (_: VnodeProperties, ...children: Children) => children;