@unsetsoft/ryunixjs 1.1.6 → 1.1.7

package/dist/Ryunix.js

@@ -5,13 +5,14 @@
 })(this, (function (exports, lodash) { 'use strict';
 
   let vars = {
-    containerRoot: {},
-    nextUnitOfWork: {},
-    currentRoot: {},
-    wipRoot: {},
-    deletions: [],
-    wipFiber: {},
-    hookIndex: 0,
+    containerRoot: null,
+    nextUnitOfWork: null,
+    currentRoot: null,
+    wipRoot: null,
+    deletions: null,
+    wipFiber: null,
+    hookIndex: null,
+    effects: null,
   };
 
   const reg = /[A-Z]/g;
@@ -48,6 +49,10 @@
     DELETION: Symbol('ryunix.reconciler.status.deletion').toString(),
   });
 
+  const generateHash = (prefix) => {
+    return `${prefix}-${Math.random().toString(36).substring(2, 9)}`
+  };
+
   const Fragment = (props) => {
     return props.children
   };
@@ -85,8 +90,8 @@
     children = childArray(children, []);
     const key =
       props && props.key
-        ? props.key
-        : `${RYUNIX_TYPES.Ryunix_ELEMENT.toString()}-${Math.random().toString(36).substring(2, 9)}`;
+        ? generateHash(props.key)
+        : generateHash(RYUNIX_TYPES.Ryunix_ELEMENT.toString());
 
     return {
       type,
@@ -117,726 +122,826 @@
     }
   };
 
+  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);
+
   /**
-   * 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.
+   * 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 render = (element, container) => {
-    vars.wipRoot = {
-      dom: container,
-      props: {
-        children: [element],
-      },
-      alternate: vars.currentRoot,
-    };
-
-    vars.deletions = [];
-    vars.nextUnitOfWork = vars.wipRoot;
+  const cancelEffects = (fiber) => {
+    if (fiber.hooks) {
+      fiber.hooks
+        .filter((hook) => hook.tag === RYUNIX_TYPES.RYUNIX_EFFECT && hook.cancel)
+        .forEach((effectHook) => {
+          effectHook.cancel();
+        });
+    }
   };
 
   /**
-   * 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.
+   * 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 init = (MainElement, root = '__ryunix') => {
-    vars.containerRoot = document.getElementById(root);
-
-    render(MainElement, vars.containerRoot);
+  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.
+   * 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 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: oldHook ? [...oldHook.queue] : [],
-    };
-
-    hook.queue.forEach((action) => {
-      hook.state =
-        typeof action === STRINGS.function ? action(hook.state) : action;
-    });
-
-    hook.queue = [];
-
-    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 = [];
-    };
+  const createDom = (fiber) => {
+    const dom =
+      fiber.type == RYUNIX_TYPES.TEXT_ELEMENT
+        ? document.createTextNode('')
+        : document.createElement(fiber.type);
 
-    if (vars.wipFiber && vars.wipFiber.hooks) {
-      vars.wipFiber.hooks.push(hook);
-      vars.hookIndex++;
-    }
+    updateDom(dom, {}, fiber.props);
 
-    return [hook.state, setState]
+    return dom
   };
 
   /**
-   * 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.
+   * 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]);
+      });
 
-  const useEffect = (callback, deps) => {
-    const oldHook =
-      vars.wipFiber.alternate &&
-      vars.wipFiber.alternate.hooks &&
-      vars.wipFiber.alternate.hooks[vars.hookIndex];
+    Object.keys(prevProps)
+      .filter(isProperty)
+      .filter(isGone(nextProps))
+      .forEach((name) => {
+        dom[name] = '';
+      });
 
-    const hook = {
-      type: RYUNIX_TYPES.RYUNIX_EFFECT,
-      deps,
-    };
+    Object.keys(nextProps)
+      .filter(isProperty)
+      .filter(isNew(prevProps, nextProps))
+      .forEach((name) => {
+        if (name === STRINGS.style) {
+          DomStyle(dom, nextProps['ryunix-style']);
+        } else if (name === OLD_STRINGS.style) {
+          DomStyle(dom, nextProps.style);
+        } else if (name === STRINGS.className) {
+          if (nextProps['ryunix-class'] === '') {
+            throw new Error('data-class cannot be empty.')
+          }
 
-    if (!oldHook) {
-      // invoke callback if this is the first time
-      callback();
-    } else {
-      if (!lodash.isEqual(oldHook.deps, hook.deps)) {
-        callback();
-      }
-    }
+          prevProps['ryunix-class'] &&
+            dom.classList.remove(...prevProps['ryunix-class'].split(/\s+/));
+          dom.classList.add(...nextProps['ryunix-class'].split(/\s+/));
+        } else if (name === OLD_STRINGS.className) {
+          if (nextProps.className === '') {
+            throw new Error('className cannot be empty.')
+          }
 
-    if (vars.wipFiber.hooks) {
-      vars.wipFiber.hooks.push(hook);
-      vars.hookIndex++;
-    }
-  };
+          prevProps.className &&
+            dom.classList.remove(...prevProps.className.split(/\s+/));
+          dom.classList.add(...nextProps.className.split(/\s+/));
+        } else {
+          dom[name] = nextProps[name];
+        }
+      });
 
-  const useRef = (initial) => {
-    const oldHook =
-      vars.wipFiber.alternate &&
-      vars.wipFiber.alternate.hooks &&
-      vars.wipFiber.alternate.hooks[vars.hookIndex];
+    Object.keys(nextProps)
+      .filter(isEvent)
+      .filter(isNew(prevProps, nextProps))
+      .forEach((name) => {
+        const eventType = name.toLowerCase().substring(2);
+        dom.addEventListener(eventType, nextProps[name]);
+      });
+  };
 
-    const hook = {
-      type: RYUNIX_TYPES.RYUNIX_REF,
-      value: oldHook ? oldHook.value : { current: initial },
-    };
+  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
+    }, '');
+  };
 
-    if (vars.wipFiber.hooks) {
-      vars.wipFiber.hooks.push(hook);
-      vars.hookIndex++;
+  /**
+   * The function commits changes made to the virtual DOM to the actual DOM.
+   */
+  const commitRoot = () => {
+    vars.deletions.forEach(commitWork);
+    if (vars.wipRoot && vars.wipRoot.child) {
+      commitWork(vars.wipRoot.child);
+      vars.currentRoot = vars.wipRoot;
     }
-
-    return hook.value
+    vars.effects.forEach((effect) => {
+      try {
+        effect();
+      } catch (err) {
+        console.error('Error in effect:', err);
+      }
+    });
+    vars.effects = [];
+    vars.wipRoot = null;
   };
 
-  const useMemo = (comp, deps) => {
-    const oldHook =
-      vars.wipFiber.alternate &&
-      vars.wipFiber.alternate.hooks &&
-      vars.wipFiber.alternate.hooks[vars.hookIndex];
-
-    const hook = {
-      type: RYUNIX_TYPES.RYUNIX_MEMO,
-      value: null,
-      deps,
-    };
+  /**
+   * 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
 
-    if (oldHook) {
-      if (lodash.isEqual(oldHook.deps, hook.deps)) {
-        hook.value = oldHook.value;
-      } else {
-        hook.value = comp();
-      }
-    } else {
-      hook.value = comp();
+    let domParentFiber = fiber.parent;
+    while (!domParentFiber.dom) {
+      domParentFiber = domParentFiber.parent;
     }
+    const domParent = domParentFiber.dom;
 
-    if (vars.wipFiber.hooks) {
-      vars.wipFiber.hooks.push(hook);
-      vars.hookIndex++;
+    if (fiber.effectTag === EFFECT_TAGS.PLACEMENT && fiber.dom != null) {
+      domParent.appendChild(fiber.dom);
+      runEffects(fiber);
+    } else if (fiber.effectTag === EFFECT_TAGS.UPDATE && fiber.dom != null) {
+      cancelEffects(fiber);
+      updateDom(fiber.dom, fiber.alternate.props, fiber.props);
+      runEffects(fiber);
+    } else if (fiber.effectTag === EFFECT_TAGS.DELETION) {
+      commitDeletion(fiber, domParent);
+      cancelEffects(fiber);
+      return
     }
 
-    return hook.value
-  };
-
-  const useCallback = (callback, deps) => {
-    return useMemo(() => callback, deps)
+    // Recorre los "fibers" hijos y hermanos
+    commitWork(fiber.child);
+    commitWork(fiber.sibling);
   };
 
   /**
-   * The `useQuery` function parses the query parameters from the URL and returns them as an object.
-   * @returns An object containing key-value pairs of the query parameters from the URLSearchParams in
-   * the current window's URL is being returned.
+   * 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 useQuery = () => {
-    const searchParams = new URLSearchParams(window.location.search);
-    const query = {};
-    for (let [key, value] of searchParams.entries()) {
-      query[key] = value;
+  const commitDeletion = (fiber, domParent) => {
+    if (fiber.dom) {
+      domParent.removeChild(fiber.dom);
+    } else {
+      commitDeletion(fiber.child, domParent);
     }
-    return query
   };
 
   /**
-   * `useRouter` is a routing function to manage navigation, nested routes, and route pre-loading.
-   *
-   * This function handles client-side routing, URL updates, and component rendering based on defined routes. It supports:
-   * - Dynamic routes (e.g., "/user/:id").
-   * - Optional nested routes with an `subRoutes` property in route objects.
-   * - Default pre-loading of all routes except the current active route.
-   *
-   * @param {Array} routes - An array of route objects, each containing:
-   *    - `path` (string): The URL path to match (supports dynamic segments like "/user/:id").
-   *    - `component` (function): The component to render when the route matches.
-   *    - `subRoutes` (optional array): An optional array of nested route objects, defining sub-routes for this route.
-   *    - `NotFound` (optional function): Component to render for unmatched routes (default 404 behavior).
-   *
-   * @returns {Object} - An object with:
-   *    - `Children` (function): Returns the component that matches the current route, passing route parameters and query parameters as props.
-   *    - `NavLink` (component): A link component to navigate within the application without refreshing the page.
-   *    - `navigate` (function): Allows programmatically navigating to a specific path.
-   *
-   * @example
-   * // Define nested routes
-   * const routes = [
-   *   {
-   *     path: "/",
-   *     component: HomePage,
-   *     subRoutes: [
-   *       {
-   *         path: "/settings",
-   *         component: SettingsPage,
-   *       },
-   *     ],
-   *   },
-   *   {
-   *     path: "/user/:id",
-   *     component: UserProfile,
-   *   },
-   *   {
-   *     path: "*",
-   *     NotFound: NotFoundPage,
-   *   },
-   * ];
-   *
-   * // Use the routing function
-   * const { Children, NavLink } = useRouter(routes);
-   *
-   * // Render the matched component
-   * const App = () => (
-   *   <>
-   *     <NavLink to="/">Home</NavLink>
-   *     <NavLink to="/settings">Settings</NavLink>
-   *     <NavLink to="/user/123">User Profile</NavLink>
-   *     <Children />
-   *   </>
-   * );
+   * 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 useRouter = (routes) => {
-    const [location, setLocation] = useStore(window.location.pathname);
+  const shouldComponentUpdate = (oldProps, newProps) => {
+    // Comparar las propiedades antiguas y nuevas
+    return (
+      !oldProps ||
+      !newProps ||
+      Object.keys(oldProps).length !== Object.keys(newProps).length ||
+      Object.keys(newProps).some((key) => oldProps[key] !== newProps[key])
+    )
+  };
 
-    const findRoute = (routes, path) => {
-      const pathname = path.split('?')[0];
+  const recycleFiber = (oldFiber, newProps) => {
+    return {
+      ...oldFiber,
+      props: newProps,
+      alternate: oldFiber,
+      effectTag: EFFECT_TAGS.UPDATE,
+    }
+  };
 
-      const notFoundRoute = routes.find((route) => route.NotFound);
-      const notFound = notFoundRoute
-        ? { route: { component: notFoundRoute.NotFound }, params: {} }
-        : { route: { component: null }, params: {} };
+  const reconcileChildren = (wipFiber, elements) => {
+    let index = 0;
+    let oldFiber = wipFiber.alternate && wipFiber.alternate.child;
+    let prevSibling = null;
 
-      for (const route of routes) {
-        if (route.subRoutes) {
-          const childRoute = findRoute(route.subRoutes, path);
-          if (childRoute) return childRoute
-        }
+    const oldFibersMap = new Map();
+    while (oldFiber) {
+      const oldKey = oldFiber.props.key || oldFiber.type;
+      oldFibersMap.set(oldKey, oldFiber);
+      oldFiber = oldFiber.sibling;
+    }
 
-        if (route.path === '*') {
-          return notFound
-        }
+    while (index < elements.length) {
+      const element = elements[index];
+      const key = element.props.key || element.type;
+      const oldFiber = oldFibersMap.get(key);
 
-        if (!route.path || typeof route.path !== 'string') {
-          console.warn('Invalid route detected:', route);
-          console.info(
-            "if you are using { NotFound: NotFound } please add { path: '*', NotFound: NotFound }",
-          );
-          continue
-        }
+      let newFiber;
+      const sameType = oldFiber && element && element.type === oldFiber.type;
 
-        const keys = [];
-        const pattern = new RegExp(
-          `^${route.path.replace(/:\w+/g, (match) => {
-          keys.push(match.substring(1));
-          return '([^/]+)'
-        })}$`,
-        );
+      if (sameType && !shouldComponentUpdate(oldFiber.props, element.props)) {
+        // Reutilizar fibra existente si no hay cambios
+        newFiber = recycleFiber(oldFiber, element.props);
+        oldFibersMap.delete(key);
+      }
 
-        const match = pathname.match(pattern);
-        if (match) {
-          const params = keys.reduce((acc, key, index) => {
-            acc[key] = match[index + 1];
-            return acc
-          }, {});
+      if (element && !sameType) {
+        // Crear nueva fibra
+        newFiber = {
+          type: element.type,
+          props: element.props,
+          dom: null,
+          parent: wipFiber,
+          alternate: null,
+          effectTag: EFFECT_TAGS.PLACEMENT,
+        };
+      }
 
-          return { route, params }
-        }
+      if (oldFiber && !sameType) {
+        oldFiber.effectTag = EFFECT_TAGS.DELETION;
+        wipFiber.effects = wipFiber.effects || [];
+        wipFiber.effects.push(oldFiber);
       }
 
-      return notFound
-    };
+      if (index === 0) {
+        wipFiber.child = newFiber;
+      } else if (prevSibling) {
+        prevSibling.sibling = newFiber;
+      }
 
-    const navigate = (path) => {
-      window.history.pushState({}, '', path);
-      updateRoute(path);
-    };
+      prevSibling = newFiber;
 
-    const updateRoute = (path) => {
-      const cleanedPath = path.split('?')[0];
-      setLocation(cleanedPath);
-    };
+      index++;
+    }
 
-    useEffect(() => {
-      const onPopState = () => updateRoute(window.location.pathname);
-      window.addEventListener('popstate', onPopState);
+    oldFibersMap.forEach((oldFiber) => {
+      oldFiber.effectTag = EFFECT_TAGS.DELETION;
+      vars.deletions.push(oldFiber);
+    });
+  };
 
-      return () => window.removeEventListener('popstate', onPopState)
-    }, []);
+  /**
+   * 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 currentRouteData = findRoute(routes, location) || {};
+    const children = fiber.type(fiber.props);
+    let childArr = Array.isArray(children) ? children : [children];
 
-    const Children = () => {
-      const query = useQuery();
-      const { route } = currentRouteData;
+    reconcileChildren(fiber, childArr);
+  };
 
-      if (
-        !route ||
-        !route.component ||
-        typeof route.component !== STRINGS.function
-      ) {
-        console.error(
-          'Component not found for current path or the component is not a valid function:',
-          currentRouteData,
+  /**
+   * 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);
+  };
+
+  /* Internal components*/
+
+  /**
+   * The function `optimizationImageApi` optimizes image URLs by adding query parameters for width,
+   * height, quality, and extension, and handles local and remote image sources.
+   * @returns The function `optimizationImageApi` returns either the original `src` if it is a local
+   * image and the page is being run on localhost, or it returns a modified image URL with optimization
+   * parameters added if the `src` is not local.
+   */
+  const optimizationImageApi = ({ src, props }) => {
+    const query = new URLSearchParams();
+    const apiEndpoint = 'https://image.unsetsoft.com';
+
+    const isLocal = !src.startsWith('http') || !src.startsWith('https');
+
+    if (props.width) query.set('width', props.width);
+    if (props.height) query.set('width', props.height);
+    if (props.quality) query.set('quality', props.quality);
+
+    const extension = props.extension ? `@${props.extension}` : '';
+
+    const localhost =
+      window.location.origin === 'http://localhost:3000' ||
+      window.location.origin === 'http://localhost:5173' ||
+      window.location.origin === 'http://localhost:4173';
+
+    if (isLocal) {
+      if (localhost) {
+        console.warn(
+          'Image optimizations only work with full links and must not contain localhost.',
         );
-        return null
+        return src
       }
 
-      return route.component({
-        params: currentRouteData.params || {},
-        query,
-      })
-    };
+      return `${window.location.origin}/${src}`
+    }
 
-    const NavLink = ({ to, ...props }) => {
-      const handleClick = (e) => {
-        e.preventDefault();
-        navigate(to);
-      };
-      return createElement(
-        'a',
-        { href: to, onClick: handleClick, ...props },
-        props.children,
-      )
+    return `${apiEndpoint}/image/${src}${extension}?${query.toString()}`
+  };
+
+  /**
+   * The `Image` function in JavaScript optimizes image loading based on a specified optimization flag.
+   * @returns An `<img>` element is being returned with the specified `src` and other props passed to the
+   * `Image` component. The `src` is either the original `src` value or the result of calling
+   * `optimizationImageApi` function with `src` and `props` if `optimization` is set to 'true'.
+   */
+  const Image = ({ src, ...props }) => {
+    const optimization = props.optimization === 'true' ? true : false;
+
+    const url = optimization
+      ? optimizationImageApi({
+          src,
+          props,
+        })
+      : src;
+
+    const ImageProps = {
+      src: url,
+      props,
     };
 
-    return { Children, NavLink, navigate }
+    return createElement('img', ImageProps, null)
   };
 
-  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);
-
   /**
-   * 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();
-        });
+   * 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 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
+   * 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 `undefined` if there are no more fibers to process.
    */
-  const runEffects = (fiber) => {
-    if (fiber.hooks) {
-      fiber.hooks
-        .filter((hook) => hook.tag === RYUNIX_TYPES.RYUNIX_EFFECT && hook.effect)
-        .forEach((effectHook) => {
-          effectHook.cancel = effectHook.effect();
-        });
+  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;
     }
+    return undefined
+  };
+
+  const scheduleWork = (root) => {
+    vars.nextUnitOfWork = root;
+    vars.wipRoot = root;
+    vars.deletions = [];
+
+    vars.hookIndex = 0;
+    vars.effects = [];
+    requestIdleCallback(workLoop);
   };
 
   /**
-   * 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
+   * 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 createDom = (fiber) => {
-    const dom =
-      fiber.type == RYUNIX_TYPES.TEXT_ELEMENT
-        ? document.createTextNode('')
-        : document.createElement(fiber.type);
+  const render = (element, container) => {
+    vars.wipRoot = {
+      dom: container,
+      props: {
+        children: [element],
+      },
+      alternate: vars.currentRoot,
+    };
 
-    updateDom(dom, {}, fiber.props);
+    vars.nextUnitOfWork = vars.wipRoot;
+    vars.deletions = [];
+    scheduleWork(vars.wipRoot);
+    return vars.wipRoot
+  };
 
-    return dom
+  /**
+   * 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 = (MainElement, root = '__ryunix') => {
+    vars.containerRoot = document.getElementById(root);
+
+    const renderProcess = render(MainElement, vars.containerRoot);
+
+    return renderProcess
   };
 
   /**
-   * 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.
+   * @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 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]);
-      });
+  const useStore = (initialState, init) => {
+    const reducer = (state, action) =>
+      typeof action === 'function' ? action(state) : action;
 
-    Object.keys(prevProps)
-      .filter(isProperty)
-      .filter(isGone(nextProps))
-      .forEach((name) => {
-        dom[name] = '';
-      });
+    return useReducer(reducer, initialState, init)
+  };
 
-    Object.keys(nextProps)
-      .filter(isProperty)
-      .filter(isNew(prevProps, nextProps))
-      .forEach((name) => {
-        if (name === STRINGS.style) {
-          DomStyle(dom, nextProps['ryunix-style']);
-        } else if (name === OLD_STRINGS.style) {
-          DomStyle(dom, nextProps.style);
-        } else if (name === STRINGS.className) {
-          if (nextProps['ryunix-class'] === '') {
-            throw new Error('data-class cannot be empty.')
-          }
+  const useReducer = (reducer, initialState, init) => {
+    const oldHook =
+      vars.wipFiber.alternate &&
+      vars.wipFiber.alternate.hooks &&
+      vars.wipFiber.alternate.hooks[vars.hookIndex];
 
-          prevProps['ryunix-class'] &&
-            dom.classList.remove(...prevProps['ryunix-class'].split(/\s+/));
-          dom.classList.add(...nextProps['ryunix-class'].split(/\s+/));
-        } else if (name === OLD_STRINGS.className) {
-          if (nextProps.className === '') {
-            throw new Error('className cannot be empty.')
-          }
+    const hook = {
+      state: oldHook ? oldHook.state : init ? init(initialState) : initialState,
+      queue: oldHook && Array.isArray(oldHook.queue) ? oldHook.queue.slice() : [],
+    };
 
-          prevProps.className &&
-            dom.classList.remove(...prevProps.className.split(/\s+/));
-          dom.classList.add(...nextProps.className.split(/\s+/));
-        } else {
-          dom[name] = nextProps[name];
-        }
+    if (oldHook && Array.isArray(oldHook.queue)) {
+      oldHook.queue.forEach((action) => {
+        hook.state = reducer(hook.state, action);
       });
+    }
 
-    Object.keys(nextProps)
-      .filter(isEvent)
-      .filter(isNew(prevProps, nextProps))
-      .forEach((name) => {
-        const eventType = name.toLowerCase().substring(2);
-        dom.addEventListener(eventType, nextProps[name]);
-      });
-  };
+    const dispatch = (action) => {
+      hook.queue.push(action);
 
-  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
-    }, '');
-  };
+      vars.wipRoot = {
+        dom: vars.currentRoot.dom,
+        props: vars.currentRoot.props,
+        alternate: vars.currentRoot,
+      };
+      vars.deletions = [];
+      vars.hookIndex = 0;
+      scheduleWork(vars.wipRoot);
+    };
 
-  var Dom = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    DomStyle: DomStyle,
-    createDom: createDom,
-    updateDom: updateDom
-  });
+    hook.queue.forEach((action) => {
+      hook.state = reducer(hook.state, action);
+    });
 
-  /**
-   * The function commits changes made to the virtual DOM to the actual DOM.
-   */
-  const commitRoot = () => {
-    vars.deletions.forEach(commitWork);
-    if (vars.wipRoot && vars.wipRoot.child) {
-      commitWork(vars.wipRoot.child);
-      vars.currentRoot = vars.wipRoot;
-    }
-    vars.wipRoot = undefined;
+    vars.wipFiber.hooks[vars.hookIndex] = hook;
+    vars.hookIndex++;
+
+    return [hook.state, dispatch]
   };
 
   /**
-   * 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.
+   * 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 commitWork = (fiber) => {
-    if (!fiber) return
 
-    let domParentFiber = fiber.parent;
-    while (!domParentFiber.dom) {
-      domParentFiber = domParentFiber.parent;
-    }
-    const domParent = domParentFiber.dom;
+  const useEffect = (callback, deps) => {
+    const oldHook =
+      vars.wipFiber.alternate &&
+      vars.wipFiber.alternate.hooks &&
+      vars.wipFiber.alternate.hooks[vars.hookIndex];
 
-    if (fiber.effectTag === EFFECT_TAGS.PLACEMENT && fiber.dom != null) {
-      domParent.appendChild(fiber.dom);
-      runEffects(fiber);
-    } else if (fiber.effectTag === EFFECT_TAGS.UPDATE && fiber.dom != null) {
-      cancelEffects(fiber);
-      updateDom(fiber.dom, fiber.alternate.props, fiber.props);
-      runEffects(fiber);
-    } else if (fiber.effectTag === EFFECT_TAGS.DELETION) {
-      commitDeletion(fiber, domParent);
-      cancelEffects(fiber);
-      return
+    const hook = {
+      type: RYUNIX_TYPES.RYUNIX_EFFECT,
+      deps,
+      cleanup: oldHook?.cleanup,
+    };
+
+    const hasChanged = !oldHook || !lodash.isEqual(oldHook.deps, deps);
+
+    if (hasChanged) {
+      vars.effects.push(() => {
+        // Llama al cleanup anterior si existe
+        if (typeof hook.cleanup === 'function') {
+          hook.cleanup();
+        }
+
+        // Ejecuta el nuevo efecto y guarda el nuevo cleanup
+        const result = callback();
+        if (typeof result === 'function') {
+          hook.cleanup = result;
+        }
+      });
     }
 
-    // Recorre los "fibers" hijos y hermanos
-    commitWork(fiber.child);
-    commitWork(fiber.sibling);
+    vars.wipFiber.hooks[vars.hookIndex] = hook;
+    vars.hookIndex++;
   };
 
-  /**
-   * 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);
+  const useRef = (initial) => {
+    const oldHook =
+      vars.wipFiber.alternate &&
+      vars.wipFiber.alternate.hooks &&
+      vars.wipFiber.alternate.hooks[vars.hookIndex];
+
+    const hook = {
+      type: RYUNIX_TYPES.RYUNIX_REF,
+      value: oldHook ? oldHook.value : { current: initial },
+    };
+
+    vars.wipFiber.hooks[vars.hookIndex] = hook;
+    vars.hookIndex++;
+
+    return hook.value
+  };
+
+  const useMemo = (comp, deps) => {
+    const oldHook =
+      vars.wipFiber.alternate &&
+      vars.wipFiber.alternate.hooks &&
+      vars.wipFiber.alternate.hooks[vars.hookIndex];
+
+    const hook = {
+      type: RYUNIX_TYPES.RYUNIX_MEMO,
+      value: null,
+      deps,
+    };
+
+    if (oldHook) {
+      if (lodash.isEqual(oldHook.deps, hook.deps)) {
+        hook.value = oldHook.value;
+      } else {
+        hook.value = comp();
+      }
     } else {
-      commitDeletion(fiber.child, domParent);
+      hook.value = comp();
     }
+
+    vars.wipFiber.hooks[vars.hookIndex] = hook;
+    vars.hookIndex++;
+
+    return hook.value
   };
 
-  var Commits = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    commitDeletion: commitDeletion,
-    commitRoot: commitRoot,
-    commitWork: commitWork
-  });
+  const useCallback = (callback, deps) => {
+    return useMemo(() => callback, deps)
+  };
 
   /**
-   * 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
+   * The `useQuery` function parses the query parameters from the URL and returns them as an object.
+   * @returns An object containing key-value pairs of the query parameters from the URLSearchParams in
+   * the current window's URL is being returned.
    */
-  const reconcileChildren = (wipFiber, elements) => {
-    let index = 0;
-    let oldFiber = wipFiber.alternate && wipFiber.alternate.child;
-    let prevSibling = null;
-
-    const oldFibersMap = new Map();
-    while (oldFiber) {
-      const oldKey = oldFiber.props.key || oldFiber.type;
-      oldFibersMap.set(oldKey, oldFiber);
-      oldFiber = oldFiber.sibling;
+  const useQuery = () => {
+    const searchParams = new URLSearchParams(window.location.search);
+    const query = {};
+    for (let [key, value] of searchParams.entries()) {
+      query[key] = value;
     }
+    return query
+  };
 
-    while (index < elements.length) {
-      const element = elements[index];
-      const key = element.props.key || element.type;
-      const oldFiber = oldFibersMap.get(key);
+  /**
+   * `useRouter` is a routing function to manage navigation, nested routes, and route pre-loading.
+   *
+   * This function handles client-side routing, URL updates, and component rendering based on defined routes. It supports:
+   * - Dynamic routes (e.g., "/user/:id").
+   * - Optional nested routes with an `subRoutes` property in route objects.
+   * - Default pre-loading of all routes except the current active route.
+   *
+   * @param {Array} routes - An array of route objects, each containing:
+   *    - `path` (string): The URL path to match (supports dynamic segments like "/user/:id").
+   *    - `component` (function): The component to render when the route matches.
+   *    - `subRoutes` (optional array): An optional array of nested route objects, defining sub-routes for this route.
+   *    - `NotFound` (optional function): Component to render for unmatched routes (default 404 behavior).
+   *
+   * @returns {Object} - An object with:
+   *    - `Children` (function): Returns the component that matches the current route, passing route parameters and query parameters as props.
+   *    - `NavLink` (component): A link component to navigate within the application without refreshing the page.
+   *    - `navigate` (function): Allows programmatically navigating to a specific path.
+   *
+   * @example
+   * // Define nested routes
+   * const routes = [
+   *   {
+   *     path: "/",
+   *     component: HomePage,
+   *     subRoutes: [
+   *       {
+   *         path: "/settings",
+   *         component: SettingsPage,
+   *       },
+   *     ],
+   *   },
+   *   {
+   *     path: "/user/:id",
+   *     component: UserProfile,
+   *   },
+   *   {
+   *     path: "*",
+   *     NotFound: NotFoundPage,
+   *   },
+   * ];
+   *
+   * // Use the routing function
+   * const { Children, NavLink } = useRouter(routes);
+   *
+   * // Render the matched component
+   * const App = () => (
+   *   <>
+   *     <NavLink to="/">Home</NavLink>
+   *     <NavLink to="/settings">Settings</NavLink>
+   *     <NavLink to="/user/123">User Profile</NavLink>
+   *     <Children />
+   *   </>
+   * );
+   */
+  const useRouter = (routes) => {
+    const [location, setLocation] = useStore(window.location.pathname);
 
-      let newFiber;
-      const sameType = oldFiber && element && element.type === oldFiber.type;
+    const findRoute = (routes, path) => {
+      const pathname = path.split('?')[0];
 
-      if (sameType) {
-        newFiber = {
-          type: oldFiber.type,
-          props: element.props,
-          dom: oldFiber.dom,
-          parent: wipFiber,
-          alternate: oldFiber,
-          effectTag: EFFECT_TAGS.UPDATE,
-        };
-        oldFibersMap.delete(key);
-      } else if (element) {
-        newFiber = {
-          type: element.type,
-          props: element.props,
-          dom: undefined,
-          parent: wipFiber,
-          alternate: undefined,
-          effectTag: EFFECT_TAGS.PLACEMENT,
-        };
-      }
+      const notFoundRoute = routes.find((route) => route.NotFound);
+      const notFound = notFoundRoute
+        ? { route: { component: notFoundRoute.NotFound }, params: {} }
+        : { route: { component: null }, params: {} };
 
-      if (index === 0) {
-        wipFiber.child = newFiber;
-      } else if (prevSibling) {
-        prevSibling.sibling = newFiber;
-      }
+      for (const route of routes) {
+        if (route.subRoutes) {
+          const childRoute = findRoute(route.subRoutes, path);
+          if (childRoute) return childRoute
+        }
 
-      prevSibling = newFiber;
-      index++;
-    }
+        if (route.path === '*') {
+          return notFound
+        }
 
-    oldFibersMap.forEach((oldFiber) => {
-      oldFiber.effectTag = EFFECT_TAGS.DELETION;
-      vars.deletions.push(oldFiber);
-    });
-  };
+        if (!route.path || typeof route.path !== 'string') {
+          console.warn('Invalid route detected:', route);
+          console.info(
+            "if you are using { NotFound: NotFound } please add { path: '*', NotFound: NotFound }",
+          );
+          continue
+        }
 
-  var Reconciler = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    reconcileChildren: reconcileChildren
-  });
+        const keys = [];
+        const pattern = new RegExp(
+          `^${route.path.replace(/:\w+/g, (match) => {
+          keys.push(match.substring(1));
+          return '([^/]+)'
+        })}$`,
+        );
 
-  /**
-   * 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 match = pathname.match(pattern);
+        if (match) {
+          const params = keys.reduce((acc, key, index) => {
+            acc[key] = match[index + 1];
+            return acc
+          }, {});
 
-    const children = fiber.type(fiber.props);
-    let childArr = Array.isArray(children) ? children : [children];
+          return { route, params }
+        }
+      }
 
-    reconcileChildren(fiber, childArr);
-  };
+      return notFound
+    };
 
-  /**
-   * 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);
-  };
+    const navigate = (path) => {
+      window.history.pushState({}, '', path);
+      updateRoute(path);
+    };
 
-  var Components = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    updateFunctionComponent: updateFunctionComponent,
-    updateHostComponent: updateHostComponent
-  });
+    const updateRoute = (path) => {
+      const cleanedPath = path.split('?')[0];
+      setLocation(cleanedPath);
+    };
 
-  /**
-   * 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;
-    }
+    useEffect(() => {
+      const onPopState = () => updateRoute(window.location.pathname);
+      window.addEventListener('popstate', onPopState);
 
-    if (!vars.nextUnitOfWork && vars.wipRoot) {
-      commitRoot();
-    }
+      return () => window.removeEventListener('popstate', onPopState)
+    }, []);
 
-    requestIdleCallback(workLoop);
-  };
+    const currentRouteData = findRoute(routes, location) || {};
 
-  requestIdleCallback(workLoop);
+    const Children = () => {
+      const query = useQuery();
+      const { route } = currentRouteData;
 
-  /**
-   * 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 `undefined` 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
+      if (
+        !route ||
+        !route.component ||
+        typeof route.component !== STRINGS.function
+      ) {
+        console.error(
+          'Component not found for current path or the component is not a valid function:',
+          currentRouteData,
+        );
+        return null
       }
-      nextFiber = nextFiber.parent;
-    }
-    return undefined
+
+      return route.component({
+        params: currentRouteData.params || {},
+        query,
+      })
+    };
+
+    const NavLink = ({ to, ...props }) => {
+      const handleClick = (e) => {
+        e.preventDefault();
+        navigate(to);
+      };
+      return createElement(
+        'a',
+        { href: to, onClick: handleClick, ...props },
+        props.children,
+      )
+    };
+
+    return { Children, NavLink, navigate }
   };
 
-  var Workers = /*#__PURE__*/Object.freeze({
+  var Hooks = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    performUnitOfWork: performUnitOfWork,
-    workLoop: workLoop
+    useCallback: useCallback,
+    useEffect: useEffect,
+    useMemo: useMemo,
+    useQuery: useQuery,
+    useRef: useRef,
+    useRouter: useRouter,
+    useStore: useStore
   });
 
   var Ryunix = {
@@ -844,15 +949,12 @@
     render,
     init,
     Fragment,
-    Dom,
-    Workers,
-    Reconciler,
-    Components,
-    Commits,
+    Hooks,
   };
 
   window.Ryunix = Ryunix;
 
+  exports.Image = Image;
   exports.default = Ryunix;
   exports.useCallback = useCallback;
   exports.useEffect = useEffect;