@unsetsoft/ryunixjs 1.1.5 → 1.1.6-canary.0

package/dist/Ryunix.js

@@ -1 +1,1015 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("lodash")):"function"==typeof define&&define.amd?define(["exports","lodash"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Ryunix={},e.lodash)}(this,(function(e,t){"use strict";const o={containerRoot:void 0,nextUnitOfWork:void 0,currentRoot:void 0,wipRoot:void 0,deletions:void 0,wipFiber:void 0,hookIndex:void 0},r=/[A-Z]/g,n=Object.freeze({TEXT_ELEMENT:Symbol("text.element"),Ryunix_ELEMENT:Symbol("ryunix.element"),RYUNIX_EFFECT:Symbol("ryunix.effect"),RYUNIX_MEMO:Symbol("ryunix.memo"),RYUNIX_URL_QUERY:Symbol("ryunix.urlQuery"),RYUNIX_REF:Symbol("ryunix.ref")}),i=Object.freeze({object:"object",function:"function",style:"ryunix-style",className:"ryunix-class",children:"children",boolean:"boolean"}),s=Object.freeze({style:"style",className:"className"}),a=Object.freeze({PLACEMENT:Symbol(),UPDATE:Symbol(),DELETION:Symbol()}),l=e=>e.children,c=(e,t)=>(t=t||[],null==e||typeof e==i.boolean||(Array.isArray(e)?e.some((e=>{c(e,t)})):t.push(e)),t),p=(e,t,...o)=>{o=c(o,[]);const r=t&&t.key?t.key:`${n.Ryunix_ELEMENT.toString()}-${Math.random().toString(36).substring(2,9)}`;return{type:e,props:{...t,key:r,children:o.map((e=>typeof e===i.object?e:u(e)))}}},u=e=>({type:n.TEXT_ELEMENT,props:{nodeValue:e,children:[]}}),d=(e,t)=>{o.wipRoot={dom:o.containerRoot||t,props:{children:[e]},alternate:o.currentRoot},o.deletions=[],o.nextUnitOfWork=o.wipRoot},f=e=>{const t=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[o.hookIndex],r={state:t?t.state:e,queue:t?[...t.queue]:[]};r.queue.forEach((e=>{r.state=typeof e===i.function?e(r.state):e})),r.queue=[];return o.wipFiber&&o.wipFiber.hooks&&(o.wipFiber.hooks.push(r),o.hookIndex++),[r.state,e=>{r.queue.push(e),o.wipRoot={dom:o.currentRoot.dom,props:o.currentRoot.props,alternate:o.currentRoot},o.nextUnitOfWork=o.wipRoot,o.deletions=[]}]},m=(e,r)=>{const i=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[o.hookIndex],s={type:n.RYUNIX_EFFECT,deps:r};i&&t.isEqual(i.deps,s.deps)||e(),o.wipFiber.hooks&&(o.wipFiber.hooks.push(s),o.hookIndex++)},h=(e,r)=>{const i=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[o.hookIndex],s={type:n.RYUNIX_MEMO,value:null,deps:r};return i&&t.isEqual(i.deps,s.deps)?s.value=i.value:s.value=e(),o.wipFiber.hooks&&(o.wipFiber.hooks.push(s),o.hookIndex++),s.value},y=()=>{const e=new URLSearchParams(window.location.search),t={};for(let[o,r]of e.entries())t[o]=r;return t},b=e=>e.startsWith("on"),E=e=>e!==i.children&&!b(e),w=(e,t)=>o=>e[o]!==t[o],k=e=>t=>!(t in e),R=e=>{e.hooks&&e.hooks.filter((e=>e.tag===n.RYUNIX_EFFECT&&e.cancel)).forEach((e=>{e.cancel()}))},x=e=>{e.hooks&&e.hooks.filter((e=>e.tag===n.RYUNIX_EFFECT&&e.effect)).forEach((e=>{e.cancel=e.effect()}))},F=e=>{const t=e.type==n.TEXT_ELEMENT?document.createTextNode(""):document.createElement(e.type);return _(t,{},e.props),t},_=(e,t,o)=>{Object.keys(t).filter(b).filter((e=>k(o)(e)||w(t,o)(e))).forEach((o=>{const r=o.toLowerCase().substring(2);e.removeEventListener(r,t[o])})),Object.keys(t).filter(E).filter(k(o)).forEach((t=>{e[t]=""})),Object.keys(o).filter(E).filter(w(t,o)).forEach((r=>{if(r===i.style)v(e,o["ryunix-style"]);else if(r===s.style)v(e,o.style);else if(r===i.className){if(""===o["ryunix-class"])throw new Error("data-class cannot be empty.");t["ryunix-class"]&&e.classList.remove(...t["ryunix-class"].split(/\s+/)),e.classList.add(...o["ryunix-class"].split(/\s+/))}else if(r===s.className){if(""===o.className)throw new Error("className cannot be empty.");t.className&&e.classList.remove(...t.className.split(/\s+/)),e.classList.add(...o.className.split(/\s+/))}else e[r]=o[r]})),Object.keys(o).filter(b).filter(w(t,o)).forEach((t=>{const r=t.toLowerCase().substring(2);e.addEventListener(r,o[t])}))},v=(e,t)=>{e.style=Object.keys(t).reduce(((e,o)=>e+=`${o.replace(r,(function(e){return"-"+e.toLowerCase()}))}: ${t[o]};`),"")};var N=Object.freeze({__proto__:null,DomStyle:v,createDom:F,updateDom:_});const T=()=>{o.deletions.forEach(g),o.wipRoot&&o.wipRoot.child&&(g(o.wipRoot.child),o.currentRoot=o.wipRoot),o.wipRoot=void 0},g=e=>{if(!e)return;let t=e.parent;for(;!t.dom;)t=t.parent;const o=t.dom;if(e.effectTag===a.PLACEMENT&&(null!=e.dom&&o.appendChild(e.dom),x(e)),e.effectTag===a.UPDATE&&(R(e),null!=e.dom&&_(e.dom,e.alternate.props,e.props),x(e)),e.effectTag===a.DELETION)return O(e,o),void R(e);g(e.child),g(e.sibling)},O=(e,t)=>{e.dom?t.removeChild(e.dom):O(e.child,t)};var L=Object.freeze({__proto__:null,commitDeletion:O,commitRoot:T,commitWork:g});const I=(e,t)=>{let r=0,n=e.alternate&&e.alternate.child,i=null;const s=new Map;for(;n;){const e=n.props.key||n.type;s.set(e,n),n=n.sibling}for(;r<t.length;){const n=t[r],l=n.props.key||n.type,c=s.get(l);let p;c&&n&&n.type===c.type?(p={type:c.type,props:n.props,dom:c.dom,parent:e,alternate:c,effectTag:a.UPDATE},s.delete(l)):n&&(p={type:n.type,props:n.props,dom:void 0,parent:e,alternate:void 0,effectTag:a.PLACEMENT}),s.forEach((e=>{e.effectTag=a.DELETION,o.deletions.push(e)})),0===r?e.child=p:i&&(i.sibling=p),i=p,r++}};var U=Object.freeze({__proto__:null,reconcileChildren:I});const C=e=>{o.wipFiber=e,o.hookIndex=0,o.wipFiber.hooks=[];const t=e.type(e.props);let r=[];r=Array.isArray(t)?[...t]:[t],I(e,r)},j=e=>{e.dom||(e.dom=F(e)),I(e,e.props.children)};var M=Object.freeze({__proto__:null,updateFunctionComponent:C,updateHostComponent:j});const S=e=>{let t=!1;for(;o.nextUnitOfWork&&!t;)o.nextUnitOfWork=D(o.nextUnitOfWork),t=e.timeRemaining()<1;!o.nextUnitOfWork&&o.wipRoot&&T(),requestIdleCallback(S)};requestIdleCallback(S);const D=e=>{if(e.type instanceof Function?C(e):j(e),e.child)return e.child;let t=e;for(;t;){if(t.sibling)return t.sibling;t=t.parent}};var X={createElement:p,render:d,init:(e,t="__ryunix")=>{o.containerRoot=document.getElementById(t),d(e,o.containerRoot)},Fragment:l,Dom:N,Workers:Object.freeze({__proto__:null,performUnitOfWork:D,workLoop:S}),Reconciler:U,Components:M,Commits:L};window.Ryunix=X,e.Fragment=l,e.default=X,e.useCallback=(e,t)=>h((()=>e),t),e.useEffect=m,e.useMemo=h,e.useQuery=y,e.useRef=e=>{const t=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[o.hookIndex],r={type:n.RYUNIX_REF,value:t?t.value:{current:e}};return o.wipFiber.hooks&&(o.wipFiber.hooks.push(r),o.hookIndex++),r.value},e.useRouter=e=>{const[t,o]=f(window.location.pathname),r=e=>{window.history.pushState({},"",e),n(e)},n=e=>{o(e.split("?")[0])};m((()=>{const e=()=>n(window.location.pathname);return window.addEventListener("popstate",e),()=>window.removeEventListener("popstate",e)}),[]);const i=((e,t)=>{const o=t.split("?")[0];for(const{path:t,component:r}of e){if(!t)continue;const e=[],n=new RegExp(`^${t.replace(/:\w+/g,(t=>(e.push(t.substring(1)),"([^/]+)")))}$`),i=o.match(n);if(i){return{route:{component:r},params:e.reduce(((e,t,o)=>(e[t]=i[o+1],e)),{})}}}const r=e.find((e=>e.NotFound));return r?{route:{component:r.NotFound},params:{}}:{route:{component:null},params:{}}})(e,t);return{Children:()=>{const e=y();return i.route.component?i.route.component({params:i.params,query:e}):null},NavLink:({to:e,...t})=>p("a",{href:e,onClick:t=>{t.preventDefault(),r(e)},...t},t.children),navigate:r}},e.useStore=f,Object.defineProperty(e,"__esModule",{value:!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';
+
+  let vars = {
+    containerRoot: {},
+    nextUnitOfWork: {},
+    currentRoot: {},
+    wipRoot: {},
+    deletions: [],
+    wipFiber: {},
+    hookIndex: 0,
+  };
+
+  const reg = /[A-Z]/g;
+
+  const RYUNIX_TYPES = Object.freeze({
+    TEXT_ELEMENT: Symbol('text.element'),
+    Ryunix_ELEMENT: Symbol('ryunix.element'),
+    RYUNIX_EFFECT: Symbol('ryunix.effect'),
+    RYUNIX_MEMO: Symbol('ryunix.memo'),
+    RYUNIX_URL_QUERY: Symbol('ryunix.urlQuery'),
+    RYUNIX_REF: Symbol('ryunix.ref'),
+    RYUNIX_STORE: Symbol('ryunix.store'),
+    RYUNIX_REDUCE: Symbol('ryunix.reduce'),
+  });
+
+  const STRINGS = Object.freeze({
+    object: 'object',
+    function: 'function',
+    style: 'ryunix-style',
+    className: 'ryunix-class',
+    children: 'children',
+    boolean: 'boolean',
+    string: 'string',
+  });
+
+  const OLD_STRINGS = Object.freeze({
+    style: 'style',
+    className: 'className',
+  });
+
+  const EFFECT_TAGS = Object.freeze({
+    PLACEMENT: Symbol('ryunix.reconciler.status.placement').toString(),
+    UPDATE: Symbol('ryunix.reconciler.status.update').toString(),
+    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
+  };
+
+  const childArray = (children, out) => {
+    out = out || [];
+    if (children == undefined || typeof children == STRINGS.boolean) ; else if (Array.isArray(children)) {
+      children.some((child) => {
+        childArray(child, out);
+      });
+    } else {
+      out.push(children);
+    }
+    return out
+  };
+
+  /**
+   * 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) => {
+    // Validación: Asegurar que type y props sean válidos
+    if (typeof type !== 'string' && typeof type !== 'function') {
+      throw new Error("El parámetro 'type' debe ser una cadena o una función.")
+    }
+    if (props && typeof props !== 'object') {
+      throw new Error("El parámetro 'props' debe ser un objeto.")
+    }
+
+    children = childArray(children, []);
+    const key =
+      props && props.key
+        ? generateHash(props.key)
+        : generateHash(RYUNIX_TYPES.Ryunix_ELEMENT.toString());
+
+    return {
+      type,
+      props: {
+        ...props,
+        key,
+        children: children.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 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();
+        });
+    }
+  };
+
+  /**
+   * 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();
+        });
+    }
+  };
+
+  /**
+   * 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) => {
+    if (!nextProps) nextProps = {}; // Validar que nextProps no sea null o undefined
+
+    // Optimización: Combinar filtros para mejorar el rendimiento
+    Object.keys(prevProps)
+      .filter(
+        (key) =>
+          isEvent(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['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.')
+          }
+
+          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.')
+          }
+
+          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
+    }, '');
+  };
+
+  // Implementación inicial de Portals
+  const createPortal = (children, container) => {
+    container.innerHTML = '';
+    children.forEach((child) => {
+      const domNode = createDom(child);
+      container.appendChild(domNode);
+    });
+    return container
+  };
+
+  var Dom = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    DomStyle: DomStyle,
+    createDom: createDom,
+    createPortal: createPortal,
+    updateDom: updateDom
+  });
+
+  /**
+   * 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;
+  };
+
+  /**
+   * 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;
+
+    // Optimización: Validar que fiber.dom sea válido antes de manipularlo
+    if (fiber.dom && fiber.effectTag === EFFECT_TAGS.PLACEMENT) {
+      domParent.appendChild(fiber.dom);
+      runEffects(fiber);
+    } else if (fiber.dom && fiber.effectTag === EFFECT_TAGS.UPDATE) {
+      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
+    }
+
+    // Recorre los "fibers" hijos y hermanos
+    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) => {
+    // Manejo de errores: Validar que elements sea un array
+    if (!Array.isArray(elements)) {
+      throw new Error("El parámetro 'elements' debe ser un array.")
+    }
+
+    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;
+    }
+
+    // Refactorización: Reducir redundancia en la creación de newFiber
+    const createFiber = (type, props, dom, parent, alternate, effectTag) => ({
+      type,
+      props,
+      dom,
+      parent,
+      alternate,
+      effectTag,
+    });
+
+    while (index < elements.length) {
+      const element = elements[index];
+      const key = element.props?.key || element.type;
+      const oldFiber = oldFibersMap.get(key);
+
+      let newFiber;
+      const sameType = oldFiber && element && element.type === oldFiber.type;
+
+      if (sameType) {
+        newFiber = createFiber(
+          oldFiber.type,
+          element.props,
+          oldFiber.dom,
+          wipFiber,
+          oldFiber,
+          EFFECT_TAGS.UPDATE,
+        );
+        oldFibersMap.delete(key);
+      } else if (element) {
+        newFiber = createFiber(
+          element.type,
+          element.props,
+          undefined,
+          wipFiber,
+          undefined,
+          EFFECT_TAGS.PLACEMENT,
+        );
+      }
+
+      if (index === 0) {
+        wipFiber.child = newFiber;
+      } else if (prevSibling) {
+        prevSibling.sibling = newFiber;
+      }
+
+      prevSibling = newFiber;
+      index++;
+    }
+
+    // Validación adicional: Verificar que cada elemento tenga las propiedades necesarias
+    if (!elements.every((el) => el && el.type && el.props)) {
+      throw new Error(
+        `Cada elemento en 'elements' debe tener 'type' y 'props': ${JSON.stringify(elements)}`,
+      )
+    }
+
+    // Optimización: Eliminar claves no utilizadas después de la reconciliación
+    oldFibersMap.forEach((oldFiber) => {
+      oldFiber.effectTag = EFFECT_TAGS.DELETION;
+      vars.deletions.push(oldFiber);
+    });
+
+    // Optimización: Reducir uso de memoria en oldFibersMap
+    oldFibersMap.clear(); // Limpiar el mapa después de la reconciliación
+  };
+
+  // Ajustar Suspense para manejar correctamente los componentes Lazy
+  const Suspense = ({ fallback, children }) => {
+    try {
+      const resolvedChildren = children.map((child) => {
+        if (typeof child === 'function') {
+          return child()
+        }
+        return child
+      });
+      return resolvedChildren // Renderizar los hijos resueltos
+    } catch (promise) {
+      return fallback // Mostrar el fallback mientras se carga
+    }
+  };
+
+  const Lazy = (importFunc) => {
+    let Component = null;
+    let promise = importFunc().then((module) => {
+      Component = module.default || module;
+    });
+
+    return (props) => {
+      if (!Component) {
+        throw promise
+      }
+      return createElement(Component, props) // Asegurar que renderiza correctamente el componente cargado
+    }
+  };
+
+  var Reconciler = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    Lazy: Lazy,
+    Suspense: Suspense,
+    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 = [];
+
+    // Validación: Asegurar que fiber.type sea una función válida
+    if (typeof fiber.type !== 'function') {
+      throw new Error('El tipo de componente debe ser una función válida.')
+    }
+
+    const children = fiber.type(fiber.props);
+    let childArr = Array.isArray(children) ? children : [children];
+
+    reconcileChildren(fiber, childArr);
+  };
+
+  /**
+   * 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);
+    }
+
+    console.log(
+      '[updateHostComponent] fiber props children',
+      fiber.props?.children || 'undefined',
+    );
+
+    if (fiber.props?.children) {
+      reconcileChildren(fiber, fiber.props.children);
+    } else {
+      console.warn('[updateHostComponent] No children to reconcile');
+    }
+  };
+
+  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();
+    }
+
+    const fallbackDeadline = { timeRemaining: () => Infinity };
+
+    /**
+     * Si requestIdleCallback no está disponible, se utiliza un fallback con tiempo infinito para continuar el bucle de trabajo.
+     */
+    if (typeof requestIdleCallback === 'function') {
+      requestIdleCallback(workLoop);
+    } else {
+      workLoop(fallbackDeadline);
+    }
+  };
+
+  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 `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
+      }
+      nextFiber = nextFiber.parent;
+    }
+    return undefined
+  };
+
+  var Workers = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    performUnitOfWork: performUnitOfWork,
+    workLoop: workLoop
+  });
+
+  /**
+   * 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 = {
+      dom: container,
+      props: {
+        children: [element],
+      },
+      alternate: vars.currentRoot,
+    };
+
+    vars.deletions = [];
+    vars.nextUnitOfWork = vars.wipRoot;
+
+    const fallbackDeadline = { timeRemaining: () => Infinity };
+
+    if (typeof requestIdleCallback === 'function') {
+      requestIdleCallback(workLoop);
+    } else {
+      // Si requestIdleCallback no está disponible, se utiliza un fallback con tiempo infinito.
+      workLoop(fallbackDeadline);
+    }
+
+    return vars.wipRoot
+  };
+
+  /**
+   * 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);
+
+    render(MainElement, vars.containerRoot);
+  };
+
+  /**
+   * @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: 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 = [];
+    };
+
+    if (vars.wipFiber && vars.wipFiber.hooks) {
+      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 = (callback, deps) => {
+    const oldHook =
+      vars.wipFiber.alternate &&
+      vars.wipFiber.alternate.hooks &&
+      vars.wipFiber.alternate.hooks[vars.hookIndex];
+
+    const hook = {
+      type: RYUNIX_TYPES.RYUNIX_EFFECT,
+      deps,
+    };
+
+    if (!oldHook) {
+      // invoke callback if this is the first time
+      callback();
+    } else {
+      if (!isEqual(oldHook.deps, hook.deps)) {
+        callback();
+      }
+    }
+
+    if (vars.wipFiber.hooks) {
+      vars.wipFiber.hooks.push(hook);
+      vars.hookIndex++;
+    }
+  };
+
+  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 },
+    };
+
+    if (vars.wipFiber.hooks) {
+      vars.wipFiber.hooks.push(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 (isEqual(oldHook.deps, hook.deps)) {
+        hook.value = oldHook.value;
+      } else {
+        hook.value = comp();
+      }
+    } else {
+      hook.value = comp();
+    }
+
+    if (vars.wipFiber.hooks) {
+      vars.wipFiber.hooks.push(hook);
+      vars.hookIndex++;
+    }
+
+    return hook.value
+  };
+
+  const useCallback = (callback, deps) => {
+    return useMemo(() => callback, deps)
+  };
+
+  /**
+   * 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 useQuery = () => {
+    const searchParams = new URLSearchParams(window.location.search);
+    const query = {};
+    for (let [key, value] of searchParams.entries()) {
+      query[key] = value;
+    }
+    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 />
+   *   </>
+   * );
+   */
+  const useRouter = (routes) => {
+    const [location, setLocation] = useStore(window.location.pathname);
+
+    const findRoute = (routes, path) => {
+      const pathname = path.split('?')[0];
+
+      const notFoundRoute = routes.find((route) => route.NotFound);
+      const notFound = notFoundRoute
+        ? { route: { component: notFoundRoute.NotFound }, params: {} }
+        : { route: { component: null }, params: {} };
+
+      for (const route of routes) {
+        if (route.subRoutes) {
+          const childRoute = findRoute(route.subRoutes, path);
+          if (childRoute) return childRoute
+        }
+
+        if (route.path === '*') {
+          return notFound
+        }
+
+        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
+        }
+
+        const keys = [];
+        const pattern = new RegExp(
+          `^${route.path.replace(/:\w+/g, (match) => {
+          keys.push(match.substring(1));
+          return '([^/]+)'
+        })}$`,
+        );
+
+        const match = pathname.match(pattern);
+        if (match) {
+          const params = keys.reduce((acc, key, index) => {
+            acc[key] = match[index + 1];
+            return acc
+          }, {});
+
+          return { route, params }
+        }
+      }
+
+      return notFound
+    };
+
+    const navigate = (path) => {
+      window.history.pushState({}, '', path);
+      updateRoute(path);
+    };
+
+    const updateRoute = (path) => {
+      const cleanedPath = path.split('?')[0];
+      setLocation(cleanedPath);
+    };
+
+    useEffect(() => {
+      const onPopState = () => updateRoute(window.location.pathname);
+      window.addEventListener('popstate', onPopState);
+
+      return () => window.removeEventListener('popstate', onPopState)
+    }, []);
+
+    const currentRouteData = findRoute(routes, location) || {};
+
+    const Children = () => {
+      const query = useQuery();
+      const { route } = currentRouteData;
+
+      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
+      }
+
+      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 }
+  };
+
+  const createContext = (defaultValue) => {
+    const context = {
+      value: defaultValue,
+      subscribers: [],
+      Provider: ({ value, children }) => {
+        context.value = value;
+        context.subscribers.forEach((subscriber) => subscriber(value));
+        return children
+      },
+      Consumer: ({ children }) => {
+        const [currentValue, setCurrentValue] = useStore(context.value);
+        context.subscribers.push(setCurrentValue);
+        return children(currentValue)
+      },
+    };
+    return context
+  };
+
+  var Ryunix = {
+    Dom,
+    Workers,
+    Reconciler,
+    Components,
+    Commits,
+    createElement,
+    Fragment,
+    init,
+    render,
+  };
+
+  window.Ryunix = Ryunix;
+
+  exports.createContext = createContext;
+  exports.default = Ryunix;
+  exports.useCallback = useCallback;
+  exports.useEffect = useEffect;
+  exports.useMemo = useMemo;
+  exports.useQuery = useQuery;
+  exports.useRef = useRef;
+  exports.useRouter = useRouter;
+  exports.useStore = useStore;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+}));