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

package/dist/Ryunix.js

@@ -1 +1,1018 @@
-!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})}));
+(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: {},
+    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 Fiber = ({
+    _id = generateUnicHash('fiber'),
+    type,
+    props,
+    parent,
+    alternate,
+    effectTag,
+    dom,
+    child,
+    sibling,
+    hooks = [],
+    key,
+  }) => {
+    return {
+      _id,
+      type,
+      props,
+      parent,
+      dom,
+      alternate,
+      child,
+      sibling,
+      effectTag,
+      hooks,
+      key,
+    }
+  };
+
+  const generateHookHash = (fiber, descriptor) => {
+    return `${fiber.key}-${descriptor.toString()}-${Math.random()
+    .toString(36)
+    .substring(2, 9)}` // Or any other unique combination
+  };
+
+  const generateUnicHash = (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
+  };
+
+  const cloneElement = (element, props) => {
+    return {
+      ...element,
+      props: {
+        ...element.props,
+        ...props,
+      },
+    }
+  };
+
+  /**
+   * 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: [],
+      },
+    }
+  };
+
+  /**
+   * 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: vars.containerRoot || container,
+      props: {
+        children: [element],
+      },
+      alternate: vars.currentRoot,
+    };
+
+    vars.deletions = [];
+    vars.nextUnitOfWork = 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);
+  };
+
+  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 = () => {
+    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;
+
+    if (fiber.effectTag === EFFECT_TAGS.PLACEMENT) {
+      if (fiber.dom != undefined) {
+        domParent.appendChild(fiber.dom);
+      }
+      runEffects(fiber);
+    }
+
+    if (fiber.effectTag === EFFECT_TAGS.UPDATE) {
+      cancelEffects(fiber);
+      if (fiber.dom != undefined) {
+        updateDom(fiber.dom, fiber.alternate.props, fiber.props);
+      }
+      runEffects(fiber);
+    }
+
+    if (fiber.effectTag === EFFECT_TAGS.DELETION) {
+      commitDeletion(fiber, domParent);
+      cancelEffects(fiber);
+      return
+    }
+
+    commitWork(fiber.child);
+    commitWork(fiber.sibling);
+  };
+
+  /**
+   * The function removes a fiber's corresponding DOM node from its parent node or recursively removes
+   * its child's DOM node until it finds a node to remove.
+   * @param fiber - a fiber node in a fiber tree, which represents a component or an element in the Ryunix
+   * application.
+   * @param domParent - The parent DOM element from which the fiber's DOM element needs to be removed.
+   */
+  const commitDeletion = (fiber, domParent) => {
+    if (fiber.dom) {
+      domParent.removeChild(fiber.dom);
+    } else {
+      commitDeletion(fiber.child, domParent);
+    }
+  };
+
+  var Commits = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    commitDeletion: commitDeletion,
+    commitRoot: commitRoot,
+    commitWork: commitWork
+  });
+
+  /**
+   * This function reconciles the children of a fiber node with a new set of elements, creating new
+   * fibers for new elements, updating existing fibers for elements with the same type, and marking old
+   * fibers for deletion if they are not present in the new set of elements.
+   * @param wipFiber - A work-in-progress fiber object representing a component or element in the virtual
+   * DOM tree.
+   * @param elements - an array of elements representing the new children to be rendered in the current
+   * fiber's subtree
+   */
+  const reconcileChildren = (wipFiber, elements) => {
+    let index = 0;
+    let oldFiber = wipFiber.alternate && wipFiber.alternate.child;
+    let prevSibling = 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;
+      const oldFiber = oldFibersMap.get(key);
+
+      let newFiber;
+      const sameType = oldFiber && element && element.type === oldFiber.type;
+
+      if (sameType) {
+        newFiber = Fiber({
+          _id: oldFiber.id,
+          type: oldFiber.type,
+          props: element.props,
+          dom: oldFiber.dom,
+          parent: wipFiber,
+          alternate: oldFiber,
+          effectTag: EFFECT_TAGS.UPDATE,
+          child: oldFiber.child,
+          sibling: oldFiber.sibling,
+          hooks: oldFiber.hooks,
+          key,
+        });
+        oldFibersMap.delete(key);
+      } else if (element) {
+        newFiber = Fiber({
+          type: element.type,
+          props: element.props,
+          dom: undefined,
+          parent: wipFiber,
+          alternate: null,
+          effectTag: EFFECT_TAGS.PLACEMENT,
+          child: null,
+          sibling: null,
+          hooks: [],
+          key,
+        });
+      }
+
+      oldFibersMap.forEach((oldFiber) => {
+        oldFiber.effectTag = EFFECT_TAGS.DELETION;
+        vars.deletions.push(oldFiber);
+      });
+
+      if (index === 0) {
+        wipFiber.child = newFiber;
+      } else if (prevSibling) {
+        prevSibling.sibling = newFiber;
+      }
+
+      prevSibling = newFiber;
+      index++;
+    }
+  };
+
+  var Reconciler = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    reconcileChildren: reconcileChildren
+  });
+
+  /**
+   * This function updates a function component by setting up a work-in-progress fiber, resetting the
+   * hook index, creating an empty hooks array, rendering the component, and reconciling its children.
+   * @param fiber - The fiber parameter is an object that represents a node in the fiber tree. It
+   * contains information about the component, its props, state, and children. In this function, it is
+   * used to update the state of the component and its children.
+   */
+  const updateFunctionComponent = (fiber) => {
+    vars.wipFiber = fiber;
+    vars.hookIndex = 0;
+    vars.wipFiber.hooks = [];
+
+    const children = fiber.type(fiber.props);
+
+    reconcileChildren(fiber, 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) {
+      vars.nextUnitOfWork = performUnitOfWork(vars.nextUnitOfWork);
+      shouldYield = deadline.timeRemaining() < 1;
+    }
+
+    if (!vars.nextUnitOfWork && vars.wipRoot) {
+      commitRoot();
+    }
+
+    requestIdleCallback(workLoop);
+  };
+
+  requestIdleCallback(workLoop);
+
+  /**
+   * The function performs a unit of work by updating either a function component or a host component and
+   * returns the next fiber to be processed.
+   * @param fiber - A fiber is a unit of work in Ryunix that represents a component and its state. It
+   * contains information about the component's type, props, and children, as well as pointers to its
+   * parent, child, and sibling fibers. The `performUnitOfWork` function takes a fiber as a parameter and
+   * performs work
+   * @returns The function `performUnitOfWork` returns the next fiber to be processed. If the current
+   * fiber has a child, it returns the child. Otherwise, it looks for the next sibling of the current
+   * fiber. If there are no more siblings, it goes up the tree to the parent and looks for the next
+   * sibling of the parent. The function returns `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
+  });
+
+  var Ryunix = {
+    cloneElement,
+    createElement,
+    render,
+    init,
+    Fragment,
+    Dom,
+    Workers,
+    Reconciler,
+    Components,
+    Commits,
+  };
+
+  /**
+   * `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];
+
+    const initial = useMemo(() => (init ? init(initialState) : initialState), []);
+
+    const hook = {
+      state: oldHook ? oldHook.state : initial,
+      queue: oldHook ? oldHook.queue : [],
+      reducer,
+    };
+
+    console.log(`--------------[${hookHash}]------------------`);
+    console.log('[useReducer] initial state ', initialState);
+    console.log('[useReducer] hook.state: ', hook.state);
+    console.log('[useReducer] hook.reducer: ', hook.reducer);
+    console.log('[useReducer] hook.queue: ', hook.queue);
+    console.log('[useReducer] hook: ', hook);
+    console.log('---------------------------------------------');
+
+    const dispatch = useCallback((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);
+    }, []);
+
+    hook.queue.forEach((action) => {
+      hook.state = hook.reducer(hook.state, action);
+    });
+
+    hook.queue = [];
+
+    vars.wipFiber.hooks = vars.wipFiber.hooks || [];
+    vars.wipFiber.hooks[hookHash] = hook;
+
+    useEffect(() => {
+      console.log('El estado se ha actualizado: ', hook.state);
+    }, [hook.state]);
+
+    return [hook.state, dispatch]
+  };
+
+  /**
+   * @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, newStore = false) => {
+    if (newStore) {
+      return useReducer((state, action) => {
+        return typeof action === STRINGS.function ? action(state) : action
+      }, initial)
+    }
+
+    const hookHash = generateHookHash(vars.wipFiber, RYUNIX_TYPES.RYUNIX_STORE);
+    const oldHook = vars.wipFiber.alternate?.hooks?.[hookHash];
+
+    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 hookHash = generateHookHash(vars.wipFiber, RYUNIX_TYPES.RYUNIX_EFFECT);
+    const oldHook = vars.wipFiber.alternate?.hooks?.[hookHash];
+
+    const hook = {
+      type: RYUNIX_TYPES.RYUNIX_EFFECT,
+      deps,
+    };
+
+    if (!oldHook) {
+      // invoke callback if this is the first time
+      callback();
+    } else {
+      if (!lodash.isEqual(oldHook.deps, hook.deps)) {
+        callback();
+      }
+    }
+
+    if (vars.wipFiber.hooks) {
+      vars.wipFiber.hooks.push(hook);
+      vars.hookIndex++;
+    }
+  };
+
+  const useRef = (initial) => {
+    const hookHash = generateHookHash(vars.wipFiber, RYUNIX_TYPES.RYUNIX_REF);
+    const oldHook = vars.wipFiber.alternate?.hooks?.[hookHash];
+
+    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 hookHash = generateHookHash(vars.wipFiber, RYUNIX_TYPES.RYUNIX_MEMO);
+    const oldHook = vars.wipFiber.alternate?.hooks?.[hookHash];
+
+    const hook = {
+      type: RYUNIX_TYPES.RYUNIX_MEMO,
+      value: null,
+      deps,
+    };
+
+    if (oldHook) {
+      if (lodash.isEqual(oldHook.deps, hook.deps)) {
+        hook.value = oldHook.value;
+      } else {
+        hook.value = comp();
+      }
+    } else {
+      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 and route matching.
+   *
+   * This function handles client-side routing, URL updates, and component rendering based on defined routes.
+   * It supports dynamic routes (e.g., "/user/:id") and allows navigation using links.
+   *
+   * @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.
+   *    - `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.
+   *
+   * @example
+   * // Define routes
+   * const routes = [
+   *   {
+   *     path: "/",
+   *     component: HomePage,
+   *   },
+   *   {
+   *     path: "/user/:id",
+   *     component: UserProfile,
+   *   },
+   *   {
+   *     path: "*",
+   *     NotFound: NotFoundPage,
+   *   },
+   * ];
+   *
+   * // Use the routing function
+   * const { Children, NavLink } = useRouter(routes);
+   *
+   * // Render the matched component
+   * const App = () => (
+   *   <div>
+   *     <NavLink to="/">Home</NavLink>
+   *     <NavLink to="/user/123">User Profile</NavLink>
+   *     <Children />
+   *   </div>
+   * );
+   *
+   * // Example: UserProfile Component that receives route parameters
+   * const UserProfile = ({ params, query }) => {
+   *   return (
+   *     <div>
+   *       <h1>User ID: {params.id}</h1>
+   *       <p>Query Parameters: {JSON.stringify(query)}</p>
+   *     </div>
+   *   );
+   * };
+   */
+
+  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 }
+  };
+
+  window.Ryunix = Ryunix;
+
+  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 });
+
+}));

package/dist/Ryunix.min.js

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

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@unsetsoft/ryunixjs",
-  "version": "1.1.5-nightly.78",
+  "version": "1.1.5-nightly.80",
   "license": "MIT",
-  "main": "./dist/Ryunix.js",
+  "main": "./dist/Ryunix.min.js",
   "types": "./dist/Ryunix.d.ts",
   "private": false,
   "bugs": {
@@ -10,11 +10,11 @@
   },
   "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",
-    "prepublishOnly": "npm run build:js",
-    "postinstall": "npm run build:js",
-    "nightly:release": "npm publish --tag nightly",
+    "build:min": "rollup ./src/main.js --file ./dist/Ryunix.min.js --format umd --name Ryunix --plugin @rollup/plugin-terser",
+    "build": "rollup ./src/main.js --file ./dist/Ryunix.js --format umd --name Ryunix",
+    "prepublishOnly": "npm run build | npm run build:min",
     "release": "npm publish",
+    "nightly:release": "npm publish --tag nightly",
     "lint": "eslint . --ext .ts --fix --max-warnings=0 --config .eslintrc.js --no-eslintrc"
   },
   "dependencies": {