@unsetsoft/ryunixjs 1.0.3 → 1.1.2

package/dist/Ryunix.js

@@ -79,10 +79,16 @@
 
   const createElement = (type, props, ...children) => {
     children = childArray(children, []);
+    const key =
+      props && props.key
+        ? props.key
+        : `${type}-${Math.random().toString(36).substring(2, 9)}`;
+
     return {
       type,
       props: {
         ...props,
+        key,
         children: children.map((child) =>
           typeof child === STRINGS.object ? child : createTextElement(child),
         ),
@@ -108,11 +114,12 @@
   };
 
   /**
-   * The function renders an element into a container using a work-in-progress root.
-   * @param element - The element parameter is the component or element that needs to be rendered in the
-   * container. It could be a Ryunix component or a DOM element.
-   * @param container - The container parameter is the DOM element where the rendered element will be
-   * appended to. this parameter is optional if you use createRoot().
+   * Renders an element into a container using a work-in-progress (WIP) root.
+   * @function render
+   * @param {Object|HTMLElement} element - The element to be rendered in the container. It can be a Ryunix component (custom element) or a standard DOM element.
+   * @param {HTMLElement} container - The container where the element will be rendered. This parameter is optional if `createRoot()` is used beforehand to set up the container.
+   * @description The function assigns the `container` to a work-in-progress root and sets up properties for reconciliation, including children and the reference to the current root.
+   * It also clears any scheduled deletions and establishes the next unit of work for incremental rendering.
    */
   const render = (element, container) => {
     vars.wipRoot = {
@@ -122,20 +129,24 @@
       },
       alternate: vars.currentRoot,
     };
+
     vars.deletions = [];
     vars.nextUnitOfWork = vars.wipRoot;
   };
 
   /**
-   * @description The function creates a reference to a DOM element with the specified ID. This will be used to initialize the app.
-   * @example Ryunix.init("root") -> <div id="root" />
-   * @param root - The parameter "root" is the id of the HTML element that will serve as the container
-   * for the root element.
+   * Initializes the application by creating a reference to a DOM element with the specified ID and rendering the main component.
+   * @function init
+   * @param {Object} MainElement - The main component to render, typically the root component of the application.
+   * @param {string} [root='__ryunix'] - The ID of the HTML element that serves as the container for the root element. Defaults to `'__ryunix'` if not provided.
+   * @example
+   * Ryunix.init(App, "__ryunix"); // Initializes and renders the App component into the <div id="__ryunix"></div> element.
+   * @description This function retrieves the container element by its ID and invokes the `render` function to render the main component into it.
    */
-  const init = (root) => {
-    const rootElement = root || '__ryunix';
-    vars.containerRoot = document.getElementById(rootElement);
-    return undefined
+  const init = (MainElement, root = '__ryunix') => {
+    vars.containerRoot = document.getElementById(root);
+
+    render(MainElement, vars.containerRoot);
   };
 
   /**
@@ -151,24 +162,19 @@
       vars.wipFiber.alternate.hooks[vars.hookIndex];
     const hook = {
       state: oldHook ? oldHook.state : initial,
-      queue: [],
+      queue: oldHook ? [...oldHook.queue] : [],
     };
 
-    const actions = oldHook ? oldHook.queue : [];
-    actions.forEach((action) => {
+    hook.queue.forEach((action) => {
       hook.state =
         typeof action === STRINGS.function ? action(hook.state) : action;
     });
 
-    /**
-     * The function `setState` updates the state of a component in Ryunix by adding an action to a queue
-     * and setting up a new work-in-progress root.
-     * @param action - The `action` parameter is an object that represents a state update to be performed
-     * on a component. It contains information about the type of update to be performed and any new data
-     * that needs to be applied to the component's state.
-     */
+    hook.queue = [];
+
     const setState = (action) => {
       hook.queue.push(action);
+
       vars.wipRoot = {
         dom: vars.currentRoot.dom,
         props: vars.currentRoot.props,
@@ -182,6 +188,7 @@
       vars.wipFiber.hooks.push(hook);
       vars.hookIndex++;
     }
+
     return [hook.state, setState]
   };
 
@@ -322,10 +329,31 @@
       }
     }, []);
 
-    const currentRoute = routes.find((route) => route.path === location);
-    const Children = () => (currentRoute ? currentRoute.component : null);
+    let currentRoute = routes.find((route) => route.path === location);
+    if (!currentRoute) {
+      currentRoute = {
+        component: routes.find((route) => route.NotFound)?.NotFound || null,
+      };
+    }
 
-    return { Children, navigate }
+    const Children = () =>
+      currentRoute.component ? currentRoute.component : null;
+
+    const NavLink = ({ to, ...props }) => {
+      const { children, ...restProps } = props;
+
+      const NewProps = {
+        href: to,
+        onClick: (e) => {
+          e.preventDefault();
+          navigate(to);
+        },
+        ...restProps,
+      };
+      return createElement('a', NewProps, children)
+    };
+
+    return { Children, navigate, NavLink }
   };
 
   const isEvent = (key) => key.startsWith('on');
@@ -486,9 +514,7 @@
    * @returns The function does not return anything, it performs side effects by manipulating the DOM.
    */
   const commitWork = (fiber) => {
-    if (!fiber) {
-      return
-    }
+    if (!fiber) return
 
     let domParentFiber = fiber.parent;
     while (!domParentFiber.dom) {
@@ -501,15 +527,19 @@
         domParent.appendChild(fiber.dom);
       }
       runEffects(fiber);
-    } else if (fiber.effectTag === EFFECT_TAGS.UPDATE) {
+    }
+
+    if (fiber.effectTag === EFFECT_TAGS.UPDATE) {
       cancelEffects(fiber);
       if (fiber.dom != undefined) {
         updateDom(fiber.dom, fiber.alternate.props, fiber.props);
       }
       runEffects(fiber);
-    } else if (fiber.effectTag === EFFECT_TAGS.DELETION) {
-      cancelEffects(fiber);
+    }
+
+    if (fiber.effectTag === EFFECT_TAGS.DELETION) {
       commitDeletion(fiber, domParent);
+      cancelEffects(fiber);
       return
     }
 
@@ -525,9 +555,9 @@
    * @param domParent - The parent DOM element from which the fiber's DOM element needs to be removed.
    */
   const commitDeletion = (fiber, domParent) => {
-    if (fiber && fiber.dom) {
+    if (fiber.dom) {
       domParent.removeChild(fiber.dom);
-    } else if (fiber && fiber.child) {
+    } else {
       commitDeletion(fiber.child, domParent);
     }
   };
@@ -551,25 +581,34 @@
   const reconcileChildren = (wipFiber, elements) => {
     let index = 0;
     let oldFiber = wipFiber.alternate && wipFiber.alternate.child;
-    let prevSibling;
+    let prevSibling = null;
+
+    const oldFibersMap = new Map();
+    while (oldFiber) {
+      const oldKey = oldFiber.props.key || oldFiber.type;
+      oldFibersMap.set(oldKey, oldFiber);
+      oldFiber = oldFiber.sibling;
+    }
 
-    while (index < elements.length || oldFiber != undefined) {
+    while (index < elements.length) {
       const element = elements[index];
-      let newFiber;
+      const key = element.props.key || element.type;
+      const oldFiber = oldFibersMap.get(key);
 
-      const sameType = oldFiber && element && element.type == oldFiber.type;
+      let newFiber;
+      const sameType = oldFiber && element && element.type === oldFiber.type;
 
       if (sameType) {
         newFiber = {
-          type: oldFiber ? oldFiber.type : undefined,
+          type: oldFiber.type,
           props: element.props,
-          dom: oldFiber ? oldFiber.dom : undefined,
+          dom: oldFiber.dom,
           parent: wipFiber,
           alternate: oldFiber,
           effectTag: EFFECT_TAGS.UPDATE,
         };
-      }
-      if (element && !sameType) {
+        oldFibersMap.delete(key);
+      } else if (element) {
         newFiber = {
           type: element.type,
           props: element.props,
@@ -579,18 +618,15 @@
           effectTag: EFFECT_TAGS.PLACEMENT,
         };
       }
-      if (oldFiber && !sameType) {
+
+      oldFibersMap.forEach((oldFiber) => {
         oldFiber.effectTag = EFFECT_TAGS.DELETION;
         vars.deletions.push(oldFiber);
-      }
-
-      if (oldFiber) {
-        oldFiber = oldFiber.sibling;
-      }
+      });
 
       if (index === 0) {
         wipFiber.child = newFiber;
-      } else if (element && prevSibling) {
+      } else if (prevSibling) {
         prevSibling.sibling = newFiber;
       }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unsetsoft/ryunixjs",
-  "version": "1.0.3",
+  "version": "1.1.2",
   "license": "MIT",
   "main": "./dist/Ryunix.js",
   "types": "./dist/Ryunix.d.ts",
@@ -23,7 +23,7 @@
     "rollup": "4.9.2"
   },
   "engines": {
-    "node": ">=18.16.0"
+    "node": "^18 || ^20 || ^22"
   },
   "keywords": [
     "ryunixjs"

package/src/lib/commits.js

@@ -22,9 +22,7 @@ const commitRoot = () => {
  * @returns The function does not return anything, it performs side effects by manipulating the DOM.
  */
 const commitWork = (fiber) => {
-  if (!fiber) {
-    return
-  }
+  if (!fiber) return
 
   let domParentFiber = fiber.parent
   while (!domParentFiber.dom) {
@@ -37,15 +35,19 @@ const commitWork = (fiber) => {
       domParent.appendChild(fiber.dom)
     }
     runEffects(fiber)
-  } else if (fiber.effectTag === EFFECT_TAGS.UPDATE) {
+  }
+
+  if (fiber.effectTag === EFFECT_TAGS.UPDATE) {
     cancelEffects(fiber)
     if (fiber.dom != undefined) {
       updateDom(fiber.dom, fiber.alternate.props, fiber.props)
     }
     runEffects(fiber)
-  } else if (fiber.effectTag === EFFECT_TAGS.DELETION) {
-    cancelEffects(fiber)
+  }
+
+  if (fiber.effectTag === EFFECT_TAGS.DELETION) {
     commitDeletion(fiber, domParent)
+    cancelEffects(fiber)
     return
   }
 
@@ -61,11 +63,10 @@ const commitWork = (fiber) => {
  * @param domParent - The parent DOM element from which the fiber's DOM element needs to be removed.
  */
 const commitDeletion = (fiber, domParent) => {
-  if (fiber && fiber.dom) {
+  if (fiber.dom) {
     domParent.removeChild(fiber.dom)
-  } else if (fiber && fiber.child) {
+  } else {
     commitDeletion(fiber.child, domParent)
   }
 }
-
 export { commitDeletion, commitWork, commitRoot }

package/src/lib/createElement.js

@@ -47,10 +47,16 @@ const cloneElement = (element, props) => {
 
 const createElement = (type, props, ...children) => {
   children = childArray(children, [])
+  const key =
+    props && props.key
+      ? props.key
+      : `${type}-${Math.random().toString(36).substring(2, 9)}`
+
   return {
     type,
     props: {
       ...props,
+      key,
       children: children.map((child) =>
         typeof child === STRINGS.object ? child : createTextElement(child),
       ),

package/src/lib/hooks.js

@@ -1,6 +1,6 @@
 import { RYUNIX_TYPES, STRINGS, vars } from '../utils/index'
 import { isEqual } from 'lodash'
-import { Fragment, createElement, cloneElement } from './createElement'
+import { createElement } from './createElement'
 /**
  * @description The function creates a state.
  * @param initial - The initial value of the state for the hook.
@@ -14,24 +14,19 @@ const useStore = (initial) => {
     vars.wipFiber.alternate.hooks[vars.hookIndex]
   const hook = {
     state: oldHook ? oldHook.state : initial,
-    queue: [],
+    queue: oldHook ? [...oldHook.queue] : [],
   }
 
-  const actions = oldHook ? oldHook.queue : []
-  actions.forEach((action) => {
+  hook.queue.forEach((action) => {
     hook.state =
       typeof action === STRINGS.function ? action(hook.state) : action
   })
 
-  /**
-   * The function `setState` updates the state of a component in Ryunix by adding an action to a queue
-   * and setting up a new work-in-progress root.
-   * @param action - The `action` parameter is an object that represents a state update to be performed
-   * on a component. It contains information about the type of update to be performed and any new data
-   * that needs to be applied to the component's state.
-   */
+  hook.queue = []
+
   const setState = (action) => {
     hook.queue.push(action)
+
     vars.wipRoot = {
       dom: vars.currentRoot.dom,
       props: vars.currentRoot.props,
@@ -45,6 +40,7 @@ const useStore = (initial) => {
     vars.wipFiber.hooks.push(hook)
     vars.hookIndex++
   }
+
   return [hook.state, setState]
 }
 
@@ -185,10 +181,31 @@ const useRouter = (routes) => {
     }
   }, [])
 
-  const currentRoute = routes.find((route) => route.path === location)
-  const Children = () => (currentRoute ? currentRoute.component : null)
+  let currentRoute = routes.find((route) => route.path === location)
+  if (!currentRoute) {
+    currentRoute = {
+      component: routes.find((route) => route.NotFound)?.NotFound || null,
+    }
+  }
+
+  const Children = () =>
+    currentRoute.component ? currentRoute.component : null
+
+  const NavLink = ({ to, ...props }) => {
+    const { children, ...restProps } = props
+
+    const NewProps = {
+      href: to,
+      onClick: (e) => {
+        e.preventDefault()
+        navigate(to)
+      },
+      ...restProps,
+    }
+    return createElement('a', NewProps, children)
+  }
 
-  return { Children, navigate }
+  return { Children, navigate, NavLink }
 }
 
 export {

package/src/lib/reconciler.js

@@ -12,25 +12,34 @@ import { EFFECT_TAGS, vars } from '../utils/index'
 const reconcileChildren = (wipFiber, elements) => {
   let index = 0
   let oldFiber = wipFiber.alternate && wipFiber.alternate.child
-  let prevSibling
+  let prevSibling = null
 
-  while (index < elements.length || oldFiber != undefined) {
+  const oldFibersMap = new Map()
+  while (oldFiber) {
+    const oldKey = oldFiber.props.key || oldFiber.type
+    oldFibersMap.set(oldKey, oldFiber)
+    oldFiber = oldFiber.sibling
+  }
+
+  while (index < elements.length) {
     const element = elements[index]
-    let newFiber
+    const key = element.props.key || element.type
+    const oldFiber = oldFibersMap.get(key)
 
-    const sameType = oldFiber && element && element.type == oldFiber.type
+    let newFiber
+    const sameType = oldFiber && element && element.type === oldFiber.type
 
     if (sameType) {
       newFiber = {
-        type: oldFiber ? oldFiber.type : undefined,
+        type: oldFiber.type,
         props: element.props,
-        dom: oldFiber ? oldFiber.dom : undefined,
+        dom: oldFiber.dom,
         parent: wipFiber,
         alternate: oldFiber,
         effectTag: EFFECT_TAGS.UPDATE,
       }
-    }
-    if (element && !sameType) {
+      oldFibersMap.delete(key)
+    } else if (element) {
       newFiber = {
         type: element.type,
         props: element.props,
@@ -40,18 +49,15 @@ const reconcileChildren = (wipFiber, elements) => {
         effectTag: EFFECT_TAGS.PLACEMENT,
       }
     }
-    if (oldFiber && !sameType) {
+
+    oldFibersMap.forEach((oldFiber) => {
       oldFiber.effectTag = EFFECT_TAGS.DELETION
       vars.deletions.push(oldFiber)
-    }
-
-    if (oldFiber) {
-      oldFiber = oldFiber.sibling
-    }
+    })
 
     if (index === 0) {
       wipFiber.child = newFiber
-    } else if (element && prevSibling) {
+    } else if (prevSibling) {
       prevSibling.sibling = newFiber
     }
 
@@ -59,4 +65,5 @@ const reconcileChildren = (wipFiber, elements) => {
     index++
   }
 }
+
 export { reconcileChildren }

package/src/lib/render.js

@@ -1,11 +1,18 @@
 import { vars } from '../utils/index'
 
+const clearContainer = (container) => {
+  while (container.firstChild) {
+    container.removeChild(container.firstChild)
+  }
+}
+
 /**
- * The function renders an element into a container using a work-in-progress root.
- * @param element - The element parameter is the component or element that needs to be rendered in the
- * container. It could be a Ryunix component or a DOM element.
- * @param container - The container parameter is the DOM element where the rendered element will be
- * appended to. this parameter is optional if you use createRoot().
+ * Renders an element into a container using a work-in-progress (WIP) root.
+ * @function render
+ * @param {Object|HTMLElement} element - The element to be rendered in the container. It can be a Ryunix component (custom element) or a standard DOM element.
+ * @param {HTMLElement} container - The container where the element will be rendered. This parameter is optional if `createRoot()` is used beforehand to set up the container.
+ * @description The function assigns the `container` to a work-in-progress root and sets up properties for reconciliation, including children and the reference to the current root.
+ * It also clears any scheduled deletions and establishes the next unit of work for incremental rendering.
  */
 const render = (element, container) => {
   vars.wipRoot = {
@@ -15,20 +22,24 @@ const render = (element, container) => {
     },
     alternate: vars.currentRoot,
   }
+
   vars.deletions = []
   vars.nextUnitOfWork = vars.wipRoot
 }
 
 /**
- * @description The function creates a reference to a DOM element with the specified ID. This will be used to initialize the app.
- * @example Ryunix.init("root") -> <div id="root" />
- * @param root - The parameter "root" is the id of the HTML element that will serve as the container
- * for the root element.
+ * Initializes the application by creating a reference to a DOM element with the specified ID and rendering the main component.
+ * @function init
+ * @param {Object} MainElement - The main component to render, typically the root component of the application.
+ * @param {string} [root='__ryunix'] - The ID of the HTML element that serves as the container for the root element. Defaults to `'__ryunix'` if not provided.
+ * @example
+ * Ryunix.init(App, "__ryunix"); // Initializes and renders the App component into the <div id="__ryunix"></div> element.
+ * @description This function retrieves the container element by its ID and invokes the `render` function to render the main component into it.
  */
-const init = (root) => {
-  const rootElement = root || '__ryunix'
-  vars.containerRoot = document.getElementById(rootElement)
-  return this
+const init = (MainElement, root = '__ryunix') => {
+  vars.containerRoot = document.getElementById(root)
+
+  render(MainElement, vars.containerRoot)
 }
 
 export { render, init }

package/dist/cj/Ryunix.js

@@ -1,702 +0,0 @@
-;(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined'
-    ? factory(exports)
-    : typeof define === 'function' && define.amd
-      ? define(['exports'], factory)
-      : ((global =
-          typeof globalThis !== 'undefined' ? globalThis : global || self),
-        factory((global.Ryunix = {})))
-})(this, function (exports) {
-  'use strict'
-
-  const vars = {
-    containerRoot: null,
-    nextUnitOfWork: null,
-    currentRoot: null,
-    wipRoot: null,
-    deletions: null,
-    wipFiber: null,
-    hookIndex: null,
-  }
-
-  const reg = /[A-Z]/g
-
-  const RYUNIX_TYPES = Object.freeze({
-    TEXT_ELEMENT: Symbol('text.element'),
-    RYUNIX_EFFECT: Symbol('ryunix.effect'),
-  })
-
-  const STRINGS = Object.freeze({
-    object: 'object',
-    function: 'function',
-    style: 'style',
-    className: 'className',
-    children: 'children',
-  })
-
-  const EFFECT_TAGS = Object.freeze({
-    PLACEMENT: Symbol(),
-    UPDATE: Symbol(),
-    DELETION: Symbol(),
-  })
-
-  /**
-   * The function creates a new element with the given type, props, and children.
-   * @param type - The type of the element to be created, such as "div", "span", "h1", etc.
-   * @param props - The `props` parameter is an object that contains the properties or attributes of the
-   * element being created. These properties can include things like `className`, `id`, `style`, and any
-   * other custom attributes that the user wants to add to the element. The `props` object is spread
-   * using the spread
-   * @param children - The `children` parameter is a rest parameter that allows the function to accept
-   * any number of arguments after the `props` parameter. These arguments will be treated as children
-   * elements of the created element. The `map` function is used to iterate over each child and create a
-   * new element if it is not
-   * @returns A JavaScript object with a `type` property and a `props` property. The `type` property is
-   * set to the `type` argument passed into the function, and the `props` property is an object that
-   * includes any additional properties passed in the `props` argument, as well as a `children` property
-   * that is an array of any child elements passed in the `...children` argument
-   */
-
-  const createElement = (type, props, ...children) => {
-    return {
-      type,
-      props: {
-        ...props,
-        children: children
-          .flat()
-          .map((child) =>
-            typeof child === STRINGS.object ? child : createTextElement(child),
-          ),
-      },
-    }
-  }
-
-  /**
-   * The function creates a text element with a given text value.
-   * @param text - The text content that will be used to create a new text element.
-   * @returns A JavaScript object with a `type` property set to `"TEXT_ELEMENT"` and a `props` property
-   * that contains a `nodeValue` property set to the `text` parameter and an empty `children` array.
-   */
-
-  const createTextElement = (text) => {
-    return {
-      type: RYUNIX_TYPES.TEXT_ELEMENT,
-      props: {
-        nodeValue: text,
-        children: [],
-      },
-    }
-  }
-
-  const Fragments = (props) => {
-    if (props.style) {
-      throw new Error('The style attribute is not supported')
-    }
-    if (props.className === '') {
-      throw new Error('className cannot be empty.')
-    }
-    return createElement('div', props, props.children)
-  }
-
-  /**
-   * The function renders an element into a container using a work-in-progress root.
-   * @param element - The element parameter is the component or element that needs to be rendered in the
-   * container. It could be a Ryunix component or a DOM element.
-   * @param container - The container parameter is the DOM element where the rendered element will be
-   * appended to. this parameter is optional if you use createRoot().
-   */
-  const render = (element, container) => {
-    vars.wipRoot = {
-      dom: vars.containerRoot || container,
-      props: {
-        children: [element],
-      },
-      alternate: vars.currentRoot,
-    }
-    vars.deletions = []
-    vars.nextUnitOfWork = vars.wipRoot
-  }
-
-  /**
-   * @description The function creates a reference to a DOM element with the specified ID. This will be used to initialize the app.
-   * @example Ryunix.init("root") -> <div id="root" />
-   * @param root - The parameter "root" is the id of the HTML element that will serve as the container
-   * for the root element.
-   */
-  const init = (root) => {
-    const rootElement = root || '__ryunix'
-    vars.containerRoot = document.getElementById(rootElement)
-  }
-
-  const isEvent = (key) => key.startsWith('on')
-  const isProperty = (key) => key !== STRINGS.children && !isEvent(key)
-  const isNew = (prev, next) => (key) => prev[key] !== next[key]
-  const isGone = (next) => (key) => !(key in next)
-  const hasDepsChanged = (prevDeps, nextDeps) =>
-    !prevDeps ||
-    !nextDeps ||
-    prevDeps.length !== nextDeps.length ||
-    prevDeps.some((dep, index) => dep !== nextDeps[index])
-
-  /**
-   * The function cancels all effect hooks in a given fiber.
-   * @param fiber - The "fiber" parameter is likely referring to a data structure used in React.js to
-   * represent a component and its state. It contains information about the component's props, state, and
-   * children, as well as metadata used by React to manage updates and rendering. The function
-   * "cancelEffects" is likely intended
-   */
-  const cancelEffects = (fiber) => {
-    if (fiber.hooks) {
-      fiber.hooks
-        .filter(
-          (hook) => hook.tag === RYUNIX_TYPES.RYUNIX_EFFECT && hook.cancel,
-        )
-        .forEach((effectHook) => {
-          effectHook.cancel()
-        })
-    }
-  }
-
-  /**
-   * The function runs all effect hooks in a given fiber.
-   * @param fiber - The "fiber" parameter is likely referring to a data structure used in the
-   * implementation of a fiber-based reconciliation algorithm, such as the one used in React. A fiber
-   * represents a unit of work that needs to be performed by the reconciliation algorithm, and it
-   * contains information about a component and its children, as
-   */
-  const runEffects = (fiber) => {
-    if (fiber.hooks) {
-      fiber.hooks
-        .filter(
-          (hook) => hook.tag === RYUNIX_TYPES.RYUNIX_EFFECT && hook.effect,
-        )
-        .forEach((effectHook) => {
-          effectHook.cancel = effectHook.effect()
-        })
-    }
-  }
-
-  /**
-   * @description The function creates a state.
-   * @param initial - The initial value of the state for the hook.
-   * @returns The `useStore` function returns an array with two elements: the current state value and a
-   * `setState` function that can be used to update the state.
-   */
-  const useStore = (initial) => {
-    const oldHook =
-      vars.wipFiber.alternate &&
-      vars.wipFiber.alternate.hooks &&
-      vars.wipFiber.alternate.hooks[vars.hookIndex]
-    const hook = {
-      state: oldHook ? oldHook.state : initial,
-      queue: [],
-    }
-
-    const actions = oldHook ? oldHook.queue : []
-    actions.forEach((action) => {
-      hook.state =
-        typeof action === STRINGS.function ? action(hook.state) : action
-    })
-
-    /**
-     * The function `setState` updates the state of a component in Ryunix by adding an action to a queue
-     * and setting up a new work-in-progress root.
-     * @param action - The `action` parameter is an object that represents a state update to be performed
-     * on a component. It contains information about the type of update to be performed and any new data
-     * that needs to be applied to the component's state.
-     */
-    const setState = (action) => {
-      hook.queue.push(action)
-      vars.wipRoot = {
-        dom: vars.currentRoot.dom,
-        props: vars.currentRoot.props,
-        alternate: vars.currentRoot,
-      }
-      vars.nextUnitOfWork = vars.wipRoot
-      vars.deletions = []
-    }
-
-    vars.wipFiber.hooks.push(hook)
-    vars.hookIndex++
-    return [hook.state, setState]
-  }
-
-  /**
-   * This is a function that creates a hook for managing side effects in Ryunix components.
-   * @param effect - The effect function that will be executed after the component has rendered or when
-   * the dependencies have changed. It can perform side effects such as fetching data, updating the DOM,
-   * or subscribing to events.
-   * @param deps - An array of dependencies that the effect depends on. If any of the dependencies change
-   * between renders, the effect will be re-run. If the array is empty, the effect will only run once on
-   * mount and never again.
-   */
-  const useEffect = (effect, deps) => {
-    const oldHook =
-      vars.wipFiber.alternate &&
-      vars.wipFiber.alternate.hooks &&
-      vars.wipFiber.alternate.hooks[vars.hookIndex]
-
-    const hasChanged = hasDepsChanged(oldHook ? oldHook.deps : undefined, deps)
-
-    const hook = {
-      tag: RYUNIX_TYPES.RYUNIX_EFFECT,
-      effect: hasChanged ? effect : null,
-      cancel: hasChanged && oldHook && oldHook.cancel,
-      deps,
-    }
-
-    vars.wipFiber.hooks.push(hook)
-    vars.hookIndex++
-  }
-
-  const useQuery = () => {
-    vars.hookIndex++
-
-    const oldHook =
-      vars.wipFiber.alternate &&
-      vars.wipFiber.alternate.hooks &&
-      vars.wipFiber.alternate.hooks[vars.hookIndex]
-
-    const hasOld = oldHook ? oldHook : undefined
-
-    const urlSearchParams = new URLSearchParams(window.location.search)
-    const params = Object.fromEntries(urlSearchParams.entries())
-    const Query = hasOld ? hasOld : params
-
-    const hook = {
-      tag: RYUNIX_TYPES.RYUNIX_EFFECT,
-      query: Query,
-    }
-
-    vars.wipFiber.hooks.push(hook)
-
-    return hook.query
-  }
-
-  const Router = ({ path, component }) => {
-    const [currentPath, setCurrentPath] = useStore(window.location.pathname)
-
-    useEffect(() => {
-      const onLocationChange = () => {
-        setCurrentPath(() => window.location.pathname)
-      }
-
-      window.addEventListener('navigate', onLocationChange)
-      window.addEventListener('pushsatate', onLocationChange)
-      window.addEventListener('popstate', onLocationChange)
-
-      return () => {
-        window.removeEventListener('navigate', onLocationChange)
-        window.removeEventListener('pushsatate', onLocationChange)
-        window.removeEventListener('popstate', onLocationChange)
-      }
-    }, [currentPath])
-
-    return currentPath === path ? component() : null
-  }
-
-  const Navigate = () => {
-    /**
-     * The function `push` is used to push a new state to the browser's history and trigger a custom
-     * event called 'pushstate'.
-     * @param to - The `to` parameter is a string representing the URL path to which you want to
-     * navigate.
-     * @param [state] - The `state` parameter is an optional object that represents the state associated
-     * with the new history entry. It can be used to store any data that you want to associate with the
-     * new URL. When you navigate back or forward in the browser history, this state object will be
-     * passed to the `popstate
-     * @returns The function `push` does not have a return statement, so it returns `undefined` by
-     * default.
-     */
-    const push = (to, state = {}) => {
-      if (window.location.pathname === to) return
-      window.history.pushState(state, '', to)
-      const navigationEvent = new Event('pushsatate')
-      window.dispatchEvent(navigationEvent)
-    }
-
-    return { push }
-  }
-
-  const Link = (props) => {
-    if (props.style) {
-      throw new Error(
-        'The style attribute is not supported on internal components, use className.',
-      )
-    }
-    if (props.to === '') {
-      throw new Error("'to=' cannot be empty.")
-    }
-    if (props.className === '') {
-      throw new Error('className cannot be empty.')
-    }
-    if (props.label === '' && !props.children) {
-      throw new Error("'label=' cannot be empty.")
-    }
-
-    if (!props.to) {
-      throw new Error("Missig 'to' param.")
-    }
-    const preventReload = (event) => {
-      event.preventDefault()
-      const { push } = Navigate()
-      push(props.to)
-    }
-
-    const anchor = {
-      href: props.to,
-      onClick: preventReload,
-      ...props,
-    }
-
-    const children = props.label ? props.label : props.children
-
-    return createElement('a', anchor, children)
-  }
-
-  /**
-   * The function creates a new DOM element based on the given fiber object and updates its properties.
-   * @param fiber - The fiber parameter is an object that represents a node in the fiber tree. It
-   * contains information about the element type, props, and children of the node.
-   * @returns The `createDom` function returns a newly created DOM element based on the `fiber` object
-   * passed as an argument. If the `fiber` object represents a text element, a text node is created using
-   * `document.createTextNode("")`. Otherwise, a new element is created using
-   * `document.createElement(fiber.type)`. The function then calls the `updateDom` function to update the
-   * properties of the newly created
-   */
-  const createDom = (fiber) => {
-    const dom =
-      fiber.type == RYUNIX_TYPES.TEXT_ELEMENT
-        ? document.createTextNode('')
-        : document.createElement(fiber.type)
-
-    updateDom(dom, {}, fiber.props)
-
-    return dom
-  }
-
-  /**
-   * The function updates the DOM by removing old event listeners and properties, and adding new ones
-   * based on the previous and next props.
-   * @param dom - The DOM element that needs to be updated with new props.
-   * @param prevProps - An object representing the previous props (properties) of a DOM element.
-   * @param nextProps - An object containing the new props that need to be updated in the DOM.
-   */
-  const updateDom = (dom, prevProps, nextProps) => {
-    Object.keys(prevProps)
-      .filter(isEvent)
-      .filter(
-        (key) => isGone(nextProps)(key) || isNew(prevProps, nextProps)(key),
-      )
-      .forEach((name) => {
-        const eventType = name.toLowerCase().substring(2)
-        dom.removeEventListener(eventType, prevProps[name])
-      })
-
-    Object.keys(prevProps)
-      .filter(isProperty)
-      .filter(isGone(nextProps))
-      .forEach((name) => {
-        dom[name] = ''
-      })
-
-    Object.keys(nextProps)
-      .filter(isProperty)
-      .filter(isNew(prevProps, nextProps))
-      .forEach((name) => {
-        if (name === STRINGS.style) {
-          DomStyle(dom, nextProps.style)
-        } else if (name === STRINGS.className) {
-          if (nextProps.className === '') {
-            throw new Error('className cannot be empty.')
-          }
-          prevProps.className &&
-            dom.classList.remove(...prevProps.className.split(/\s+/))
-          dom.classList.add(...nextProps.className.split(/\s+/))
-        } else {
-          dom[name] = nextProps[name]
-        }
-      })
-
-    Object.keys(nextProps)
-      .filter(isEvent)
-      .filter(isNew(prevProps, nextProps))
-      .forEach((name) => {
-        const eventType = name.toLowerCase().substring(2)
-        dom.addEventListener(eventType, nextProps[name])
-      })
-  }
-
-  const DomStyle = (dom, style) => {
-    dom.style = Object.keys(style).reduce((acc, styleName) => {
-      const key = styleName.replace(reg, function (v) {
-        return '-' + v.toLowerCase()
-      })
-      acc += `${key}: ${style[styleName]};`
-      return acc
-    }, '')
-  }
-
-  var Dom = /*#__PURE__*/ Object.freeze({
-    __proto__: null,
-    DomStyle: DomStyle,
-    createDom: createDom,
-    updateDom: updateDom,
-  })
-
-  /**
-   * The function commits changes made to the virtual DOM to the actual DOM.
-   */
-  const commitRoot = () => {
-    vars.deletions.forEach(commitWork)
-    commitWork(vars.wipRoot.child)
-    vars.currentRoot = vars.wipRoot
-    vars.wipRoot = null
-  }
-
-  /**
-   * The function commits changes made to the DOM based on the effect tag of the fiber.
-   * @param fiber - A fiber is a unit of work in Ryunix's reconciliation process. It represents a
-   * component and its state at a particular point in time. The `commitWork` function takes a fiber as a
-   * parameter to commit the changes made during the reconciliation process to the actual DOM.
-   * @returns The function does not return anything, it performs side effects by manipulating the DOM.
-   */
-  const commitWork = (fiber) => {
-    if (!fiber) {
-      return
-    }
-
-    let domParentFiber = fiber.parent
-    while (!domParentFiber.dom) {
-      domParentFiber = domParentFiber.parent
-    }
-    const domParent = domParentFiber.dom
-
-    if (fiber.effectTag === EFFECT_TAGS.PLACEMENT) {
-      if (fiber.dom != null) {
-        domParent.appendChild(fiber.dom)
-      }
-      runEffects(fiber)
-    } else if (fiber.effectTag === EFFECT_TAGS.UPDATE) {
-      cancelEffects(fiber)
-      if (fiber.dom != null) {
-        updateDom(fiber.dom, fiber.alternate.props, fiber.props)
-      }
-      runEffects(fiber)
-    } else if (fiber.effectTag === EFFECT_TAGS.DELETION) {
-      cancelEffects(fiber)
-      commitDeletion(fiber, domParent)
-      return
-    }
-
-    commitWork(fiber.child)
-    commitWork(fiber.sibling)
-  }
-
-  /**
-   * The function removes a fiber's corresponding DOM node from its parent node or recursively removes
-   * its child's DOM node until it finds a node to remove.
-   * @param fiber - a fiber node in a fiber tree, which represents a component or an element in the Ryunix
-   * application.
-   * @param domParent - The parent DOM element from which the fiber's DOM element needs to be removed.
-   */
-  const commitDeletion = (fiber, domParent) => {
-    if (fiber.dom) {
-      domParent.removeChild(fiber.dom)
-    } else {
-      commitDeletion(fiber.child, domParent)
-    }
-  }
-
-  var Commits = /*#__PURE__*/ Object.freeze({
-    __proto__: null,
-    commitDeletion: commitDeletion,
-    commitRoot: commitRoot,
-    commitWork: commitWork,
-  })
-
-  /**
-   * This function reconciles the children of a fiber node with a new set of elements, creating new
-   * fibers for new elements, updating existing fibers for elements with the same type, and marking old
-   * fibers for deletion if they are not present in the new set of elements.
-   * @param wipFiber - A work-in-progress fiber object representing a component or element in the virtual
-   * DOM tree.
-   * @param elements - an array of elements representing the new children to be rendered in the current
-   * fiber's subtree
-   */
-  const reconcileChildren = (wipFiber, elements) => {
-    let index = 0
-    let oldFiber = wipFiber.alternate && wipFiber.alternate.child
-    let prevSibling
-
-    while (index < elements.length || oldFiber != null) {
-      const element = elements[index]
-      let newFiber
-
-      const sameType = oldFiber && element && element.type == oldFiber.type
-
-      if (sameType) {
-        newFiber = {
-          type: oldFiber.type,
-          props: element.props,
-          dom: oldFiber.dom,
-          parent: wipFiber,
-          alternate: oldFiber,
-          effectTag: EFFECT_TAGS.UPDATE,
-        }
-      }
-      if (element && !sameType) {
-        newFiber = {
-          type: element.type,
-          props: element.props,
-          dom: null,
-          parent: wipFiber,
-          alternate: null,
-          effectTag: EFFECT_TAGS.PLACEMENT,
-        }
-      }
-      if (oldFiber && !sameType) {
-        oldFiber.effectTag = EFFECT_TAGS.DELETION
-        vars.deletions.push(oldFiber)
-      }
-
-      if (oldFiber) {
-        oldFiber = oldFiber.sibling
-      }
-
-      if (index === 0) {
-        wipFiber.child = newFiber
-      } else if (element) {
-        prevSibling.sibling = newFiber
-      }
-
-      prevSibling = newFiber
-      index++
-    }
-  }
-
-  var Reconciler = /*#__PURE__*/ Object.freeze({
-    __proto__: null,
-    reconcileChildren: reconcileChildren,
-  })
-
-  /**
-   * This function updates a function component by setting up a work-in-progress fiber, resetting the
-   * hook index, creating an empty hooks array, rendering the component, and reconciling its children.
-   * @param fiber - The fiber parameter is an object that represents a node in the fiber tree. It
-   * contains information about the component, its props, state, and children. In this function, it is
-   * used to update the state of the component and its children.
-   */
-  const updateFunctionComponent = (fiber) => {
-    vars.wipFiber = fiber
-    vars.hookIndex = 0
-    vars.wipFiber.hooks = []
-    const children = [fiber.type(fiber.props)]
-    reconcileChildren(fiber, children)
-  }
-
-  /**
-   * This function updates a host component's DOM element and reconciles its children.
-   * @param fiber - A fiber is a unit of work in Ryunix that represents a component and its state. It
-   * contains information about the component's type, props, and children, as well as pointers to other
-   * fibers in the tree.
-   */
-  const updateHostComponent = (fiber) => {
-    if (!fiber.dom) {
-      fiber.dom = createDom(fiber)
-    }
-    reconcileChildren(fiber, fiber.props.children.flat())
-  }
-
-  var Components = /*#__PURE__*/ Object.freeze({
-    __proto__: null,
-    updateFunctionComponent: updateFunctionComponent,
-    updateHostComponent: updateHostComponent,
-  })
-
-  /**
-   * This function uses requestIdleCallback to perform work on a fiber tree until it is complete or the
-   * browser needs to yield to other tasks.
-   * @param deadline - The `deadline` parameter is an object that represents the amount of time the
-   * browser has to perform work before it needs to handle other tasks. It has a `timeRemaining()` method
-   * that returns the amount of time remaining before the deadline is reached. The `shouldYield` variable
-   * is used to determine
-   */
-  const workLoop = (deadline) => {
-    let shouldYield = false
-    while (vars.nextUnitOfWork && !shouldYield) {
-      vars.nextUnitOfWork = performUnitOfWork(vars.nextUnitOfWork)
-      shouldYield = deadline.timeRemaining() < 1
-    }
-
-    if (!vars.nextUnitOfWork && vars.wipRoot) {
-      commitRoot()
-    }
-
-    requestIdleCallback(workLoop)
-  }
-
-  requestIdleCallback(workLoop)
-
-  /**
-   * The function performs a unit of work by updating either a function component or a host component and
-   * returns the next fiber to be processed.
-   * @param fiber - A fiber is a unit of work in Ryunix that represents a component and its state. It
-   * contains information about the component's type, props, and children, as well as pointers to its
-   * parent, child, and sibling fibers. The `performUnitOfWork` function takes a fiber as a parameter and
-   * performs work
-   * @returns The function `performUnitOfWork` returns the next fiber to be processed. If the current
-   * fiber has a child, it returns the child. Otherwise, it looks for the next sibling of the current
-   * fiber. If there are no more siblings, it goes up the tree to the parent and looks for the next
-   * sibling of the parent. The function returns `null` if there are no more fibers to process.
-   */
-  const performUnitOfWork = (fiber) => {
-    const isFunctionComponent = fiber.type instanceof Function
-    if (isFunctionComponent) {
-      updateFunctionComponent(fiber)
-    } else {
-      updateHostComponent(fiber)
-    }
-    if (fiber.child) {
-      return fiber.child
-    }
-    let nextFiber = fiber
-    while (nextFiber) {
-      if (nextFiber.sibling) {
-        return nextFiber.sibling
-      }
-      nextFiber = nextFiber.parent
-    }
-  }
-
-  var Workers = /*#__PURE__*/ Object.freeze({
-    __proto__: null,
-    performUnitOfWork: performUnitOfWork,
-    workLoop: workLoop,
-  })
-
-  var Ryunix = {
-    createElement,
-    render,
-    init,
-    Fragments,
-    Dom,
-    Workers,
-    Reconciler,
-    Components,
-    Commits,
-  }
-
-  window.Ryunix = Ryunix
-
-  exports.Fragments = Fragments
-  exports.Link = Link
-  exports.Navigate = Navigate
-  exports.Router = Router
-  exports.default = Ryunix
-  exports.useEffect = useEffect
-  exports.useQuery = useQuery
-  exports.useStore = useStore
-
-  Object.defineProperty(exports, '__esModule', { value: true })
-})