@unsetsoft/ryunixjs 1.1.5-nightly.77 → 1.1.5-nightly.78

package/dist/Ryunix.js

@@ -1 +1 @@
-!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";let o={containerRoot:{},nextUnitOfWork:{},currentRoot:{},wipRoot:{},deletions:[],wipFiber:{},hookIndex:0};const n=/[A-Z]/g,r=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")}),i=Object.freeze({object:"object",function:"function",style:"ryunix-style",className:"ryunix-class",children:"children",boolean:"boolean",string:"string"}),s=Object.freeze({style:"style",className:"className"}),l=Object.freeze({PLACEMENT:Symbol("ryunix.reconciler.status.placement").toString(),UPDATE:Symbol("ryunix.reconciler.status.update").toString(),DELETION:Symbol("ryunix.reconciler.status.deletion").toString()}),a=({_id:e=p("fiber"),type:t,props:o,parent:n,alternate:r,effectTag:i,dom:s,child:l,sibling:a,hooks:c=[],key:u})=>({_id:e,type:t,props:o,parent:n,dom:s,alternate:r,child:l,sibling:a,effectTag:i,hooks:c,key:u}),c=e=>e.map((e=>JSON.stringify(e))).join("-"),u=(e,t)=>`${e.key}-${t.toString()}-${Math.random().toString(36).substring(2,9)}`,p=e=>`${e}-${Math.random().toString(36).substring(2,9)}`,d=e=>e.children,f=(e,t)=>(t=t||[],null==e||typeof e==i.boolean||(Array.isArray(e)?e.some((e=>{f(e,t)})):t.push(e)),t),h=(e,t,...o)=>{o=f(o,[]);const n=t&&t.key?t.key:`${r.Ryunix_ELEMENT.toString()}-${Math.random().toString(36).substring(2,9)}`;return{type:e,props:{...t,key:n,children:o.map((e=>typeof e===i.object&&null!==e?e:m(String(e))))}}},m=e=>{const t=`${r.TEXT_ELEMENT.toString()}-${Math.random().toString(36).substring(2,9)}`;return{type:r.TEXT_ELEMENT,props:{key:t,nodeValue:e,children:[]}}},y=e=>e.startsWith("on"),b=e=>e!==i.children&&!y(e),E=(e,t)=>o=>e[o]!==t[o],k=e=>t=>!(t in e),w=e=>{e.hooks&&e.hooks.filter((e=>e.tag===r.RYUNIX_EFFECT&&e.cancel)).forEach((e=>{e.cancel()}))},R=e=>{e.hooks&&e.hooks.filter((e=>e.tag===r.RYUNIX_EFFECT&&e.effect)).forEach((e=>{e.cancel=e.effect()}))},g=e=>{const t=e.type==r.TEXT_ELEMENT?document.createTextNode(""):document.createElement(e.type);return F(t,{},e.props),t},F=(e,t,o)=>{Object.keys(t).filter(y).filter((e=>k(o)(e)||E(t,o)(e))).forEach((o=>{const n=o.toLowerCase().substring(2);e.removeEventListener(n,t[o])})),Object.keys(t).filter(b).filter(k(o)).forEach((t=>{e[t]=""})),Object.keys(o).filter(b).filter(E(t,o)).forEach((n=>{if(n===i.style)_(e,o["ryunix-style"]);else if(n===s.style)_(e,o.style);else if(n===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(n===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[n]=o[n]})),Object.keys(o).filter(y).filter(E(t,o)).forEach((t=>{const n=t.toLowerCase().substring(2);e.addEventListener(n,o[t])}))},_=(e,t)=>{e.style=Object.keys(t).reduce(((e,o)=>e+=`${o.replace(n,(function(e){return"-"+e.toLowerCase()}))}: ${t[o]};`),"")};var N=Object.freeze({__proto__:null,DomStyle:_,createDom:g,updateDom:F});const T=()=>{o.deletions.forEach((e=>{x(e)})),o.wipRoot&&o.wipRoot.child&&(x(o.wipRoot.child),o.currentRoot=o.wipRoot),o.wipRoot=void 0},x=e=>{if(!e)return;let t=e.parent;for(;!t.dom;)t=t.parent;const o=t.dom;if(e.effectTag===l.PLACEMENT)null!=e.dom&&o.appendChild(e.dom),R(e);else if(e.effectTag===l.UPDATE)e.alternate&&e.alternate.props!==e.props&&(w(e),null!=e.dom&&F(e.dom,e.alternate.props,e.props),R(e));else if(e.effectTag===l.DELETION)return U(e,o),void w(e);e.child&&x(e.child),e.sibling&&x(e.sibling)},U=(e,t)=>{e.dom?t.removeChild(e.dom):U(e.child,t)};var v=Object.freeze({__proto__:null,commitDeletion:U,commitRoot:T,commitWork:x});const O=(e,t)=>{let n=0,r=e.alternate&&e.alternate.child,i=null;const s=new Map;for(;r;){const e=r.props.key||r.type;s.set(e,r),r=r.sibling}for(;n<t.length;){const o=t[n],c=o.props.key||o.type;let u;r=s.get(c);r&&o&&o.type===r.type?(u=a({_id:r.id,type:r.type,props:o.props,dom:r.dom,parent:e,alternate:r,effectTag:l.UPDATE,child:r.child,sibling:r.sibling,hooks:r.hooks,key:c}),s.delete(c)):o&&(u=a({type:o.type,props:o.props,dom:void 0,parent:e,alternate:null,effectTag:l.PLACEMENT,child:null,sibling:null,hooks:[],key:c})),0===n?e.child=u:i&&(i.sibling=u),i=u,n++}s.forEach((e=>{e.effectTag=l.DELETION,o.deletions.push(e)}))};var S=Object.freeze({__proto__:null,reconcileChildren:O});const C=e=>{o.wipFiber=e,o.hookIndex=0,o.wipFiber.hooks=[];const t=e.type(e.props);O(e,Array.isArray(t)?t:[t])},L=e=>{e.dom||(e.dom=g(e)),O(e,e.props.children)};var I=Object.freeze({__proto__:null,updateFunctionComponent:C,updateHostComponent:L});const M=e=>{let t=!1;for(;o.nextUnitOfWork&&!t;)o.nextUnitOfWork=j(o.nextUnitOfWork),t=e.timeRemaining()<1;!o.nextUnitOfWork&&o.wipRoot&&T(),o.wipRoot&&requestIdleCallback(M)};function j(e){if(e.type instanceof Function?C(e):L(e),e.child)return e.child;let t=e;for(;t;){if(t.sibling)return t.sibling;t=t.parent}}const X=(e,t)=>{o.wipRoot={dom:t,props:{children:[e]},alternate:o.currentRoot},o.deletions=[],o.nextUnitOfWork=o.wipRoot,requestIdleCallback(M)},Y=(e,t,n)=>{const i=u(o.wipFiber,r.RYUNIX_REDUCE),s=o.wipFiber.alternate?.hooks?.[i],l=q((()=>n?n(t):t),[]),a={state:s?s.state:l,queue:s?s.queue:[],reducer:e};console.log(`--------------[${i}]------------------`),console.log("[useReducer] initial state ",t),console.log("[useReducer] hook.state: ",a.state),console.log("[useReducer] hook.reducer: ",a.reducer),console.log("[useReducer] hook.queue: ",a.queue),console.log("[useReducer] hook: ",a),console.log("---------------------------------------------");const c=A((e=>{a.queue.push(e),o.wipRoot={dom:o.currentRoot.dom,props:o.currentRoot.props,alternate:o.currentRoot},o.nextUnitOfWork=o.wipRoot,o.deletions=[],requestIdleCallback(M)}),[]);return a.queue.forEach((e=>{a.state=a.reducer(a.state,e)})),a.queue=[],o.wipFiber.hooks=o.wipFiber.hooks||[],o.wipFiber.hooks[i]=a,$((()=>{console.log("El estado se ha actualizado: ",a.state)}),[a.state]),[a.state,c]},D=e=>Y(((e,t)=>typeof t===i.function?t(e):t),e),$=(e,n)=>{const s=u(o.wipFiber,r.RYUNIX_EFFECT),l=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[s],a={type:r.RYUNIX_EFFECT,deps:n,cleanup:null};l&&t.isEqual(l.deps,a.deps)||(typeof l?.cleanup===i.function&&l.cleanup(),a.cleanup=e()),o.wipFiber.hooks=o.wipFiber.hooks||[],o.wipFiber.hooks[s]=a},q=(e,t)=>{const n=u(o.wipFiber,r.RYUNIX_MEMO),i=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[n],s={type:r.RYUNIX_MEMO,value:null,deps:t,hash:c(t)};return i&&i.hash===s.hash?s.value=i.value:s.value=e(),o.wipFiber.hooks=o.wipFiber.hooks||[],o.wipFiber.hooks[n]=s,s.value},A=(e,t)=>q((()=>e),t),W=()=>{const e=new URLSearchParams(window.location.search),t={};for(let[o,n]of e.entries())t[o]=n;return t};var z={createElement:h,render:X,init:(e,t="__ryunix")=>{o.containerRoot=document.getElementById(t),X(e,o.containerRoot)},Fragment:d,Dom:N,Workers:Object.freeze({__proto__:null,performUnitOfWork:j,workLoop:M}),Reconciler:S,Components:I,Commits:v,RYUNIX_VARS:o};window.Ryunix=z,e.Fragment=d,e.default=z,e.useCallback=A,e.useEffect=$,e.useMemo=q,e.useQuery=W,e.useReducer=Y,e.useRef=e=>{const t=u(o.wipFiber,r.RYUNIX_REF),n=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[t],i={type:r.RYUNIX_REF,value:n?n.value:{current:e}};return o.wipFiber.hooks=o.wipFiber.hooks||[],o.wipFiber.hooks[t]=i,i.value},e.useRouter=e=>{const[t,o]=D(window.location.pathname),n=(e,t)=>{const o=t.split("?")[0],r=e.find((e=>e.NotFound)),i=r?{route:{component:r.NotFound},params:{}}:{route:{component:null},params:{}};for(const r of e){if(r.subRoutes){const e=n(r.subRoutes,t);if(e)return e}if("*"===r.path)return i;if(!r.path||"string"!=typeof r.path){console.warn("Invalid route detected:",r),console.info("if you are using { NotFound: NotFound } please add { path: '*', NotFound: NotFound }");continue}const e=[],s=new RegExp(`^${r.path.replace(/:\w+/g,(t=>(e.push(t.substring(1)),"([^/]+)")))}$`),l=o.match(s);if(l){return{route:r,params:e.reduce(((e,t,o)=>(e[t]=l[o+1],e)),{})}}}return i},r=e=>{window.history.pushState({},"",e),s(e)},s=e=>{const t=e.split("?")[0];o(t)};$((()=>{const e=()=>s(window.location.pathname);return window.addEventListener("popstate",e),()=>window.removeEventListener("popstate",e)}),[]);const l=n(e,t)||{};return{Children:()=>{const e=W(),{route:t}=l;return t&&t.component&&typeof t.component===i.function?t.component({params:l.params||{},query:e}):(console.error("Component not found for current path or the component is not a valid function:",l),null)},NavLink:({to:e,...t})=>h("a",{href:e,onClick:t=>{t.preventDefault(),r(e)},...t},t.children),navigate:r}},e.useStore=D,Object.defineProperty(e,"__esModule",{value:!0})}));
+!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";let o={containerRoot:{},nextUnitOfWork:{},currentRoot:{},wipRoot:{},deletions:[],wipFiber:{},hookIndex:0};const n=/[A-Z]/g,r=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")}),s=Object.freeze({object:"object",function:"function",style:"ryunix-style",className:"ryunix-class",children:"children",boolean:"boolean",string:"string"}),i=Object.freeze({style:"style",className:"className"}),l=Object.freeze({PLACEMENT:Symbol("ryunix.reconciler.status.placement").toString(),UPDATE:Symbol("ryunix.reconciler.status.update").toString(),DELETION:Symbol("ryunix.reconciler.status.deletion").toString()}),a=({_id:e=u("fiber"),type:t,props:o,parent:n,alternate:r,effectTag:s,dom:i,child:l,sibling:a,hooks:c=[],key:p})=>({_id:e,type:t,props:o,parent:n,dom:i,alternate:r,child:l,sibling:a,effectTag:s,hooks:c,key:p}),c=(e,t)=>`${e.key}-${t.toString()}-${Math.random().toString(36).substring(2,9)}`,u=e=>`${e}-${Math.random().toString(36).substring(2,9)}`,p=e=>e.children,d=(e,t)=>(t=t||[],null==e||typeof e==s.boolean||(Array.isArray(e)?e.some((e=>{d(e,t)})):t.push(e)),t),f=(e,t,...o)=>{o=d(o,[]);const n=t&&t.key?t.key:`${r.Ryunix_ELEMENT.toString()}-${Math.random().toString(36).substring(2,9)}`;return{type:e,props:{...t,key:n,children:o.map((e=>typeof e===s.object&&null!==e?e:h(String(e))))}}},h=e=>{const t=`${r.TEXT_ELEMENT.toString()}-${Math.random().toString(36).substring(2,9)}`;return{type:r.TEXT_ELEMENT,props:{key:t,nodeValue:e,children:[]}}},m=(e,t)=>{o.wipRoot={dom:o.containerRoot||t,props:{children:[e]},alternate:o.currentRoot},o.deletions=[],o.nextUnitOfWork=o.wipRoot},y=e=>e.startsWith("on"),b=e=>e!==s.children&&!y(e),E=(e,t)=>o=>e[o]!==t[o],k=e=>t=>!(t in e),R=e=>{e.hooks&&e.hooks.filter((e=>e.tag===r.RYUNIX_EFFECT&&e.cancel)).forEach((e=>{e.cancel()}))},w=e=>{e.hooks&&e.hooks.filter((e=>e.tag===r.RYUNIX_EFFECT&&e.effect)).forEach((e=>{e.cancel=e.effect()}))},g=e=>{const t=e.type==r.TEXT_ELEMENT?document.createTextNode(""):document.createElement(e.type);return _(t,{},e.props),t},_=(e,t,o)=>{Object.keys(t).filter(y).filter((e=>k(o)(e)||E(t,o)(e))).forEach((o=>{const n=o.toLowerCase().substring(2);e.removeEventListener(n,t[o])})),Object.keys(t).filter(b).filter(k(o)).forEach((t=>{e[t]=""})),Object.keys(o).filter(b).filter(E(t,o)).forEach((n=>{if(n===s.style)F(e,o["ryunix-style"]);else if(n===i.style)F(e,o.style);else if(n===s.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(n===i.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[n]=o[n]})),Object.keys(o).filter(y).filter(E(t,o)).forEach((t=>{const n=t.toLowerCase().substring(2);e.addEventListener(n,o[t])}))},F=(e,t)=>{e.style=Object.keys(t).reduce(((e,o)=>e+=`${o.replace(n,(function(e){return"-"+e.toLowerCase()}))}: ${t[o]};`),"")};var N=Object.freeze({__proto__:null,DomStyle:F,createDom:g,updateDom:_});const x=()=>{o.deletions.forEach(T),o.wipRoot&&o.wipRoot.child&&(T(o.wipRoot.child),o.currentRoot=o.wipRoot),o.wipRoot=void 0},T=e=>{if(!e)return;let t=e.parent;for(;!t.dom;)t=t.parent;const o=t.dom;if(e.effectTag===l.PLACEMENT&&(null!=e.dom&&o.appendChild(e.dom),w(e)),e.effectTag===l.UPDATE&&(R(e),null!=e.dom&&_(e.dom,e.alternate.props,e.props),w(e)),e.effectTag===l.DELETION)return U(e,o),void R(e);T(e.child),T(e.sibling)},U=(e,t)=>{e.dom?t.removeChild(e.dom):U(e.child,t)};var O=Object.freeze({__proto__:null,commitDeletion:U,commitRoot:x,commitWork:T});const v=(e,t)=>{let n=0,r=e.alternate&&e.alternate.child,s=null;const i=new Map;for(;r;){const e=r.props.key||r.type;i.set(e,r),r=r.sibling}for(;n<t.length;){const r=t[n],c=r.props.key||r.type,u=i.get(c);let p;u&&r&&r.type===u.type?(p=a({_id:u.id,type:u.type,props:r.props,dom:u.dom,parent:e,alternate:u,effectTag:l.UPDATE,child:u.child,sibling:u.sibling,hooks:u.hooks,key:c}),i.delete(c)):r&&(p=a({type:r.type,props:r.props,dom:void 0,parent:e,alternate:null,effectTag:l.PLACEMENT,child:null,sibling:null,hooks:[],key:c})),i.forEach((e=>{e.effectTag=l.DELETION,o.deletions.push(e)})),0===n?e.child=p:s&&(s.sibling=p),s=p,n++}};var I=Object.freeze({__proto__:null,reconcileChildren:v});const S=e=>{o.wipFiber=e,o.hookIndex=0,o.wipFiber.hooks=[];const t=e.type(e.props);v(e,Array.isArray(t)?t:[t])},C=e=>{e.dom||(e.dom=g(e)),v(e,e.props.children)};var L=Object.freeze({__proto__:null,updateFunctionComponent:S,updateHostComponent:C});const M=e=>{let t=!1;for(;o.nextUnitOfWork&&!t;)o.nextUnitOfWork=X(o.nextUnitOfWork),t=e.timeRemaining()<1;!o.nextUnitOfWork&&o.wipRoot&&x(),requestIdleCallback(M)};requestIdleCallback(M);const X=e=>{if(e.type instanceof Function?S(e):C(e),e.child)return e.child;let t=e;for(;t;){if(t.sibling)return t.sibling;t=t.parent}};const j=(e,t=!1)=>{if(t)return((e,t,n)=>{const s=c(o.wipFiber,r.RYUNIX_REDUCE),i=o.wipFiber.alternate?.hooks?.[s],l=Y((()=>n?n(t):t),[]),a={state:i?i.state:l,queue:i?i.queue:[],reducer:e};console.log(`--------------[${s}]------------------`),console.log("[useReducer] initial state ",t),console.log("[useReducer] hook.state: ",a.state),console.log("[useReducer] hook.reducer: ",a.reducer),console.log("[useReducer] hook.queue: ",a.queue),console.log("[useReducer] hook: ",a),console.log("---------------------------------------------");const u=D((e=>{a.queue.push(e),o.wipRoot={dom:o.currentRoot.dom,props:o.currentRoot.props,alternate:o.currentRoot},o.nextUnitOfWork=o.wipRoot,o.deletions=[],requestIdleCallback(M)}),[]);return a.queue.forEach((e=>{a.state=a.reducer(a.state,e)})),a.queue=[],o.wipFiber.hooks=o.wipFiber.hooks||[],o.wipFiber.hooks[s]=a,q((()=>{console.log("El estado se ha actualizado: ",a.state)}),[a.state]),[a.state,u]})(((e,t)=>typeof t===s.function?t(e):t),e);const n=c(o.wipFiber,r.RYUNIX_STORE),i=o.wipFiber.alternate?.hooks?.[n],l={state:i?i.state:e,queue:i?[...i.queue]:[]};l.queue.forEach((e=>{l.state=typeof e===s.function?e(l.state):e})),l.queue=[];return o.wipFiber&&o.wipFiber.hooks&&(o.wipFiber.hooks.push(l),o.hookIndex++),[l.state,e=>{l.queue.push(e),o.wipRoot={dom:o.currentRoot.dom,props:o.currentRoot.props,alternate:o.currentRoot},o.nextUnitOfWork=o.wipRoot,o.deletions=[]}]},q=(e,n)=>{const s=c(o.wipFiber,r.RYUNIX_EFFECT),i=o.wipFiber.alternate?.hooks?.[s],l={type:r.RYUNIX_EFFECT,deps:n};i&&t.isEqual(i.deps,l.deps)||e(),o.wipFiber.hooks&&(o.wipFiber.hooks.push(l),o.hookIndex++)},Y=(e,n)=>{const s=c(o.wipFiber,r.RYUNIX_MEMO),i=o.wipFiber.alternate?.hooks?.[s],l={type:r.RYUNIX_MEMO,value:null,deps:n};return i&&t.isEqual(i.deps,l.deps)?l.value=i.value:l.value=e(),o.wipFiber.hooks&&(o.wipFiber.hooks.push(l),o.hookIndex++),l.value},D=(e,t)=>Y((()=>e),t),$=()=>{const e=new URLSearchParams(window.location.search),t={};for(let[o,n]of e.entries())t[o]=n;return t};var W={createElement:f,render:m,init:(e,t="__ryunix")=>{o.containerRoot=document.getElementById(t),m(e,o.containerRoot)},Fragment:p,Dom:N,Workers:Object.freeze({__proto__:null,performUnitOfWork:X,workLoop:M}),Reconciler:I,Components:L,Commits:O};window.Ryunix=W,e.Fragment=p,e.default=W,e.useCallback=D,e.useEffect=q,e.useMemo=Y,e.useQuery=$,e.useRef=e=>{const t=c(o.wipFiber,r.RYUNIX_REF),n=o.wipFiber.alternate?.hooks?.[t],s={type:r.RYUNIX_REF,value:n?n.value:{current:e}};return o.wipFiber.hooks&&(o.wipFiber.hooks.push(s),o.hookIndex++),s.value},e.useRouter=e=>{const[t,o]=j(window.location.pathname),n=(e,t)=>{const o=t.split("?")[0],r=e.find((e=>e.NotFound)),s=r?{route:{component:r.NotFound},params:{}}:{route:{component:null},params:{}};for(const r of e){if(r.subRoutes){const e=n(r.subRoutes,t);if(e)return e}if("*"===r.path)return s;if(!r.path||"string"!=typeof r.path){console.warn("Invalid route detected:",r),console.info("if you are using { NotFound: NotFound } please add { path: '*', NotFound: NotFound }");continue}const e=[],i=new RegExp(`^${r.path.replace(/:\w+/g,(t=>(e.push(t.substring(1)),"([^/]+)")))}$`),l=o.match(i);if(l){return{route:r,params:e.reduce(((e,t,o)=>(e[t]=l[o+1],e)),{})}}}return s},r=e=>{window.history.pushState({},"",e),i(e)},i=e=>{const t=e.split("?")[0];o(t)};q((()=>{const e=()=>i(window.location.pathname);return window.addEventListener("popstate",e),()=>window.removeEventListener("popstate",e)}),[]);const l=n(e,t)||{};return{Children:()=>{const e=$(),{route:t}=l;return t&&t.component&&typeof t.component===s.function?t.component({params:l.params||{},query:e}):(console.error("Component not found for current path or the component is not a valid function:",l),null)},NavLink:({to:e,...t})=>f("a",{href:e,onClick:t=>{t.preventDefault(),r(e)},...t},t.children),navigate:r}},e.useStore=j,Object.defineProperty(e,"__esModule",{value:!0})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unsetsoft/ryunixjs",
-  "version": "1.1.5-nightly.77",
+  "version": "1.1.5-nightly.78",
   "license": "MIT",
   "main": "./dist/Ryunix.js",
   "types": "./dist/Ryunix.d.ts",
@@ -11,16 +11,16 @@
   "homepage": "https://github.com/UnSetSoft/Ryunixjs#readme",
   "scripts": {
     "build:js": "rollup ./src/main.js --file ./dist/Ryunix.js --format umd --name Ryunix --plugin @rollup/plugin-terser",
-    "build": "rollup ./src/main.js --file ./dist/Ryunix.um.js --format umd --name Ryunix",
     "prepublishOnly": "npm run build:js",
+    "postinstall": "npm run build:js",
     "nightly:release": "npm publish --tag nightly",
     "release": "npm publish",
     "lint": "eslint . --ext .ts --fix --max-warnings=0 --config .eslintrc.js --no-eslintrc"
   },
   "dependencies": {
-    "@rollup/plugin-terser": "0.4.4",
+    "@rollup/plugin-terser": "^0.4.4",
     "eslint": "8.56.0",
-    "lodash": "4.17.20",
+    "lodash": "^4.17.20",
     "rollup": "4.9.2"
   },
   "engines": {

package/dist/Ryunix.um.js

@@ -1,1016 +0,0 @@
-;(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined'
-    ? factory(exports, require('lodash'))
-    : typeof define === 'function' && define.amd
-      ? define(['exports', 'lodash'], factory)
-      : ((global =
-          typeof globalThis !== 'undefined' ? globalThis : global || self),
-        factory((global.Ryunix = {}), global.lodash))
-})(this, function (exports, lodash) {
-  'use strict'
-
-  let vars = {
-    containerRoot: null,
-    nextUnitOfWork: null,
-    currentRoot: null,
-    wipRoot: null,
-    deletions: null,
-    wipFiber: null,
-    hookIndex: null,
-  }
-
-  const reg = /[A-Z]/g
-
-  const RYUNIX_TYPES = Object.freeze({
-    TEXT_ELEMENT: Symbol('text.element'),
-    Ryunix_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(),
-    UPDATE: Symbol(),
-    DELETION: Symbol(),
-  })
-
-  const generateHash = (deps) => {
-    return deps.map((dep) => JSON.stringify(dep)).join('-')
-  }
-
-  const generateHookHash = (fiber, descriptor) => {
-    return `${fiber.key}-${descriptor.toString()}-${Math.random().toString(36).substring(2, 9)}` // Or any other unique combination
-  }
-
-  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) => {
-    children = childArray(children, [])
-    const key =
-      props && props.key
-        ? props.key
-        : `${RYUNIX_TYPES.Ryunix_ELEMENT.toString()}-${Math.random().toString(36).substring(2, 9)}`
-
-    return {
-      type,
-      props: {
-        ...props,
-        key,
-        children: children.map((child) =>
-          typeof child === STRINGS.object && child !== null
-            ? child
-            : createTextElement(String(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) => {
-    const key = `${RYUNIX_TYPES.TEXT_ELEMENT.toString()}-${Math.random().toString(36).substring(2, 9)}`
-    return {
-      type: RYUNIX_TYPES.TEXT_ELEMENT,
-      props: {
-        key,
-        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) => {
-    Object.keys(prevProps)
-      .filter(isEvent)
-      .filter(
-        (key) => isGone(nextProps)(key) || isNew(prevProps, nextProps)(key),
-      )
-      .forEach((name) => {
-        const eventType = name.toLowerCase().substring(2)
-        dom.removeEventListener(eventType, prevProps[name])
-      })
-
-    Object.keys(prevProps)
-      .filter(isProperty)
-      .filter(isGone(nextProps))
-      .forEach((name) => {
-        dom[name] = ''
-      })
-
-    Object.keys(nextProps)
-      .filter(isProperty)
-      .filter(isNew(prevProps, nextProps))
-      .forEach((name) => {
-        if (name === STRINGS.style) {
-          DomStyle(dom, nextProps['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
-    }, '')
-  }
-
-  var Dom = /*#__PURE__*/ Object.freeze({
-    __proto__: null,
-    DomStyle: DomStyle,
-    createDom: createDom,
-    updateDom: updateDom,
-  })
-
-  /**
-   * The function commits changes made to the virtual DOM to the actual DOM.
-   */
-  const commitRoot = () => {
-    // Eliminar nodos marcados para eliminación
-    vars.deletions.forEach((fiber) => {
-      console.log(`Eliminando nodo con key: ${fiber.props.key}`)
-      commitWork(fiber)
-    })
-
-    // Si existe un hijo en la raíz de trabajo, aplicar el commit en el árbol de hijos
-    if (vars.wipRoot && vars.wipRoot.child) {
-      console.log('Iniciando commit de la raíz...')
-      commitWork(vars.wipRoot.child)
-      vars.currentRoot = vars.wipRoot
-    }
-
-    // Limpiar la raíz de trabajo
-    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
-
-    if (fiber.effectTag === EFFECT_TAGS.PLACEMENT) {
-      if (fiber.dom != null) {
-        domParent.appendChild(fiber.dom)
-      }
-      runEffects(fiber)
-    } else if (fiber.effectTag === EFFECT_TAGS.UPDATE) {
-      if (fiber.alternate && fiber.alternate.props !== fiber.props) {
-        cancelEffects(fiber)
-        if (fiber.dom != null) {
-          updateDom(fiber.dom, fiber.alternate.props, fiber.props)
-        }
-        runEffects(fiber)
-      }
-    } else if (fiber.effectTag === EFFECT_TAGS.DELETION) {
-      commitDeletion(fiber, domParent)
-      cancelEffects(fiber)
-      return
-    }
-
-    if (fiber.child) {
-      commitWork(fiber.child)
-    }
-    if (fiber.sibling) commitWork(fiber.sibling)
-  }
-
-  /**
-   * The function removes a fiber's corresponding DOM node from its parent node or recursively removes
-   * its child's DOM node until it finds a node to remove.
-   * @param fiber - a fiber node in a fiber tree, which represents a component or an element in the Ryunix
-   * application.
-   * @param domParent - The parent DOM element from which the fiber's DOM element needs to be removed.
-   */
-  const commitDeletion = (fiber, domParent) => {
-    if (fiber.dom) {
-      domParent.removeChild(fiber.dom)
-    } else {
-      commitDeletion(fiber.child, domParent)
-    }
-  }
-
-  var Commits = /*#__PURE__*/ Object.freeze({
-    __proto__: null,
-    commitDeletion: commitDeletion,
-    commitRoot: commitRoot,
-    commitWork: commitWork,
-  })
-
-  /**
-   * This function reconciles the children of a fiber node with a new set of elements, creating new
-   * fibers for new elements, updating existing fibers for elements with the same type, and marking old
-   * fibers for deletion if they are not present in the new set of elements.
-   * @param wipFiber - A work-in-progress fiber object representing a component or element in the virtual
-   * DOM tree.
-   * @param elements - an array of elements representing the new children to be rendered in the current
-   * fiber's subtree
-   */
-  const reconcileChildren = (wipFiber, elements) => {
-    let index = 0
-    let oldFiber = wipFiber.alternate && wipFiber.alternate.child
-    let prevSibling = null
-
-    const oldFibersMap = new Map()
-    while (oldFiber) {
-      const oldKey = oldFiber.props.key || oldFiber.type
-      oldFibersMap.set(oldKey, oldFiber)
-      oldFiber = oldFiber.sibling
-    }
-
-    while (index < elements.length) {
-      const element = elements[index]
-      const key = element.props.key || element.type
-      oldFiber = oldFibersMap.get(key)
-
-      let newFiber
-      const sameType = oldFiber && element && element.type === oldFiber.type
-
-      if (sameType) {
-        newFiber = {
-          type: oldFiber.type,
-          props: element.props,
-          dom: oldFiber.dom,
-          parent: wipFiber,
-          alternate: oldFiber,
-          effectTag: EFFECT_TAGS.UPDATE,
-        }
-
-        oldFibersMap.delete(key)
-      } else if (element) {
-        newFiber = {
-          type: element.type,
-          props: element.props,
-          dom: undefined,
-          parent: wipFiber,
-          alternate: undefined,
-          effectTag: EFFECT_TAGS.PLACEMENT,
-        }
-      }
-
-      if (index === 0) {
-        wipFiber.child = newFiber
-      } else if (prevSibling) {
-        prevSibling.sibling = newFiber
-      }
-
-      prevSibling = newFiber
-      index++
-    }
-
-    oldFibersMap.forEach((oldFiber) => {
-      oldFiber.effectTag = EFFECT_TAGS.DELETION
-      vars.deletions.push(oldFiber)
-    })
-  }
-
-  var Reconciler = /*#__PURE__*/ Object.freeze({
-    __proto__: null,
-    reconcileChildren: reconcileChildren,
-  })
-
-  /**
-   * This function updates a function component by setting up a work-in-progress fiber, resetting the
-   * hook index, creating an empty hooks array, rendering the component, and reconciling its children.
-   * @param fiber - The fiber parameter is an object that represents a node in the fiber tree. It
-   * contains information about the component, its props, state, and children. In this function, it is
-   * used to update the state of the component and its children.
-   */
-  const updateFunctionComponent = (fiber) => {
-    vars.wipFiber = fiber
-    vars.hookIndex = 0
-    vars.wipFiber.hooks = []
-
-    const children = fiber.type(fiber.props)
-
-    reconcileChildren(fiber, Array.isArray(children) ? children : [children])
-  }
-
-  /**
-   * This function updates a host component's DOM element and reconciles its children.
-   * @param fiber - A fiber is a unit of work in Ryunix that represents a component and its state. It
-   * contains information about the component's type, props, and children, as well as pointers to other
-   * fibers in the tree.
-   */
-  const updateHostComponent = (fiber) => {
-    if (!fiber.dom) {
-      fiber.dom = createDom(fiber)
-    }
-    reconcileChildren(fiber, fiber.props.children)
-  }
-
-  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) {
-      console.log('Procesando unidad de trabajo:', vars.nextUnitOfWork)
-      vars.nextUnitOfWork = performUnitOfWork(vars.nextUnitOfWork)
-      shouldYield = deadline.timeRemaining() < 1
-    }
-
-    if (!vars.nextUnitOfWork && vars.wipRoot) {
-      console.log('Iniciando commit de la raíz...')
-      commitRoot()
-    }
-
-    if (vars.wipRoot) {
-      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 null
-  }
-
-  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
-
-    requestIdleCallback(workLoop)
-  }
-
-  /**
-   * 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)
-  }
-
-  /**
-   * `useReducer` hook for managing complex state with reducer logic.
-   *
-   * @param {function} reducer - A reducer function that takes the current state and an action, and returns the new state.
-   * @param {*} initialState - The initial state value or an initial function that returns the initial state.
-   * @param {function} [init] - An optional initializer function to transform initial state.
-   * @returns {Array} - An array containing:
-   *    - `state` (any): The current state value.
-   *    - `dispatch` (function): A function to dispatch actions to update the state.
-   *
-   * @example
-   * // Using useReducer in a component to manage a counter
-   * const reducer = (state, action) => {
-   *   switch (action.type) {
-   *     case "INCREMENT":
-   *       return state + 1;
-   *     case "DECREMENT":
-   *       return state - 1;
-   *     default:
-   *       return state;
-   *   }
-   * };
-   *
-   * const App = () => {
-   *   const [state, dispatch] = useReducer(reducer, 0);
-   *   return (
-   *     <>
-   *       <button onClick={() => dispatch({ type: "INCREMENT" })}>Increment</button>
-   *       <div>Count: {state}</div>
-   *     </>
-   *   );
-   * };
-   */
-  const useReducer = (reducer, initialState, init) => {
-    const hookHash = generateHookHash(vars.wipFiber, RYUNIX_TYPES.RYUNIX_REDUCE)
-    const oldHook = vars.wipFiber.alternate?.hooks?.[hookHash]
-
-    // Initialize state with init function if provided, otherwise use initialState
-    const initial = init ? init(initialState) : initialState
-
-    // Create the hook with previous state or initial state and an empty action queue
-    const hook = {
-      state: oldHook ? oldHook.state : initial,
-      queue: [],
-      reducer,
-    }
-
-    // Apply queued actions with the reducer function
-    if (oldHook) {
-      oldHook.queue.forEach((action) => {
-        hook.state = hook.reducer(hook.state, action)
-      })
-    }
-
-    // Define the dispatch function to process actions
-    const dispatch = (action) => {
-      hook.queue.push(action)
-      vars.wipRoot = {
-        dom: vars.currentRoot.dom,
-        props: vars.currentRoot.props,
-        alternate: vars.currentRoot,
-      }
-      vars.nextUnitOfWork = vars.wipRoot
-      vars.deletions = []
-
-      requestIdleCallback(workLoop)
-    }
-
-    vars.wipFiber.hooks = vars.wipFiber.hooks || []
-    vars.wipFiber.hooks[hookHash] = hook
-    return [hook.state, dispatch]
-  }
-
-  /**
-   * `useStore` is a state management hook to handle component state updates efficiently.
-   *
-   * @param {*} initial - The initial state value for the component.
-   *
-   * @returns {Array} - An array containing:
-   *    - `state` (any): The current state value.
-   *    - `setState` (function): A function to update the state.
-   *
-   * @example
-   * // Using useStore in a component to manage a counter
-   * const App = () => {
-   *   const [count, setCount] = useStore(0);
-   *   return (
-   *     <>
-   *       <button onClick={() => setCount(count + 1)}>Count: {count}</button>
-   *     </>
-   *   );
-   * };
-   */
-
-  /**
-   * @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) => {
-    // Wrap `useReducer` with a simple reducer for updating state directly
-    return useReducer((state, action) => {
-      return typeof action === STRINGS.function ? action(state) : action
-    }, initial)
-  }
-
-  /**
-   * `useEffect` is a hook to handle side effects in components with optimized dependency tracking.
-
-   *
-   * @param {function} callback - A function to execute after the component has rendered or when dependencies have changed.
-   *    - If the callback returns a function, it will be used as a cleanup function to execute when the effect needs to be cleaned up.
-   * @param {Array} deps - An array of dependencies that determine when the callback should be executed. If any dependency changes, the effect will re-run.
-   *
-   * @example
-   * // Using useEffect to set up an interval and clean it up automatically
-   * const App = () => {
-   *   useEffect(() => {
-   *     const interval = setInterval(() => {
-   *       console.log("Running effect");
-   *     }, 1000);
-   *     return () => clearInterval(interval); // Cleanup automatically when unmounted
-   *   }, []);
-   *   return (
-   *     <>
-   *       <div>Effect Example</div>
-   *     </>
-   *   );
-   * };
-   */
-
-  const useEffect = (callback, deps) => {
-    const hookHash = generateHookHash(vars.wipFiber, RYUNIX_TYPES.RYUNIX_EFFECT)
-
-    const oldHook =
-      vars.wipFiber.alternate &&
-      vars.wipFiber.alternate.hooks &&
-      vars.wipFiber.alternate.hooks[hookHash]
-
-    const hook = {
-      type: RYUNIX_TYPES.RYUNIX_EFFECT,
-      deps,
-      cleanup: null,
-    }
-
-    if (!oldHook || !lodash.isEqual(oldHook.deps, hook.deps)) {
-      if (typeof oldHook?.cleanup === STRINGS.function) {
-        oldHook.cleanup()
-      }
-
-      hook.cleanup = callback()
-    }
-    vars.wipFiber.hooks = vars.wipFiber.hooks || []
-    vars.wipFiber.hooks[hookHash] = hook
-  }
-
-  const useRef = (initial) => {
-    const hookHash = generateHookHash(vars.wipFiber, RYUNIX_TYPES.RYUNIX_REF)
-
-    const oldHook =
-      vars.wipFiber.alternate &&
-      vars.wipFiber.alternate.hooks &&
-      vars.wipFiber.alternate.hooks[hookHash]
-
-    const hook = {
-      type: RYUNIX_TYPES.RYUNIX_REF,
-      value: oldHook ? oldHook.value : { current: initial },
-    }
-
-    vars.wipFiber.hooks = vars.wipFiber.hooks || []
-    vars.wipFiber.hooks[hookHash] = hook
-    return hook.value
-  }
-
-  /**
-   * `useMemo` is a custom hook to memoize a value based on its dependencies, with optimized dependency tracking.
-   *
-   * This hook returns a memoized value that is only recomputed when its dependencies change.
-   * Dependency changes are detected using an efficient hash comparison, which reduces unnecessary recomputations.
-   *
-   * @param {function} compute - A function that computes the value to be memoized.
-   * @param {Array} deps - An array of dependencies that determine when the memoized value should be recomputed.
-   *
-   * @returns {*} - The memoized value.
-   *
-   * @example
-   * // Using useMemo to memoize a calculated value based on dependencies
-   * const App = () => {
-   *   const memoizedValue = useMemo(() => {
-   *     return computeHeavyOperation();
-   *   }, [dependency1, dependency2]);
-   *
-   *   return (
-   *     <>
-   *       <div>Memoized Value: {memoizedValue}</div>
-   *     </>
-   *   );
-   * };
-   */
-  const useMemo = (compute, deps) => {
-    const hookHash = generateHookHash(vars.wipFiber, RYUNIX_TYPES.RYUNIX_MEMO)
-
-    const oldHook =
-      vars.wipFiber.alternate &&
-      vars.wipFiber.alternate.hooks &&
-      vars.wipFiber.alternate.hooks[hookHash]
-
-    const hook = {
-      type: RYUNIX_TYPES.RYUNIX_MEMO,
-      value: null,
-      deps,
-      hash: generateHash(deps),
-    }
-
-    if (!oldHook || oldHook.hash !== hook.hash) {
-      hook.value = compute()
-    } else {
-      hook.value = oldHook.value
-    }
-
-    vars.wipFiber.hooks = vars.wipFiber.hooks || []
-    vars.wipFiber.hooks[hookHash] = hook
-
-    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 RYUNIX_VARS = vars
-
-  var Ryunix = {
-    createElement,
-    render,
-    init,
-    Fragment,
-    Dom,
-    Workers,
-    Reconciler,
-    Components,
-    Commits,
-    RYUNIX_VARS,
-  }
-
-  window.Ryunix = Ryunix
-
-  exports.Fragment = Fragment
-  exports.default = Ryunix
-  exports.useCallback = useCallback
-  exports.useEffect = useEffect
-  exports.useMemo = useMemo
-  exports.useQuery = useQuery
-  exports.useReducer = useReducer
-  exports.useRef = useRef
-  exports.useRouter = useRouter
-  exports.useStore = useStore
-
-  Object.defineProperty(exports, '__esModule', { value: true })
-})