@unsetsoft/ryunixjs 1.1.6-canary.99 → 1.1.7

package/README.md

@@ -2,7 +2,7 @@
     display: block;
     margin: 0 auto;" />
 
-## RyunixJS [![npm version](https://img.shields.io/npm/v/@unsetsoft/ryunixjs.svg?style=flat)](https://www.npmjs.com/package/@unsetsoft/ryunixjs)[![npm version](https://img.shields.io/npm/v/@unsetsoft/ryunixjs/nightly.svg?style=flat)](https://www.npmjs.com/package/@unsetsoft/ryunixjs/v/nightly)
+## RyunixJS [![npm version](https://img.shields.io/npm/v/@unsetsoft/ryunixjs.svg?style=flat)](https://www.npmjs.com/package/@unsetsoft/ryunixjs)[![npm version](https://img.shields.io/npm/v/@unsetsoft/ryunixjs/canary.svg?style=flat)](https://www.npmjs.com/package/@unsetsoft/ryunixjs/v/canary)
 
 ### What is RyunixJS?
 
@@ -10,41 +10,8 @@ Like React, NextJS, Preact, Vite. Ryunix allows you to build static websites fro
 
 ### Usage
 
-`npx @unsetsoft/cra@latest`
+`npx @unsetsoft/cra@latest <my-app>`
 
 ### Do you want to contribute?
 
 Fork a send a pull request!
-
-[![Invitame un café en cafecito.app](https://cdn.cafecito.app/imgs/buttons/button_3.svg)](https://cafecito.app/neyunse) [![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/A1314KEV)
-
-# Ryunix Framework
-
-## Funcionalidades principales
-
-### Suspense y Lazy Loading
-
-- **Suspense**: Permite manejar componentes cargados de forma diferida y mostrar un fallback mientras se cargan.
-- **Lazy**: Carga componentes de forma diferida.
-
-### Context API
-
-- **createContext**: Crea un contexto para compartir datos entre componentes.
-- **useContext**: Consume el contexto en un componente.
-
-### Error Boundaries
-
-- Captura errores en componentes hijos y muestra interfaces de error personalizadas.
-
-### Portals
-
-- Renderiza componentes fuera del árbol DOM principal.
-
-## Optimización
-
-- Mejoras en el reconciliador y hooks para reducir el uso de memoria y evitar renderizados innecesarios.
-
-## Próximos pasos
-
-- Ampliar compatibilidad y herramientas.
-- Mejorar el ecosistema con CLI y DevTools.

package/dist/Ryunix.js

@@ -1,17 +1,18 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-  typeof define === 'function' && define.amd ? define(['exports'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Ryunix = {}));
-})(this, (function (exports) { 'use strict';
+  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,
+    containerRoot: null,
+    nextUnitOfWork: null,
+    currentRoot: null,
+    wipRoot: null,
+    deletions: null,
+    wipFiber: null,
+    hookIndex: null,
+    effects: null,
   };
 
   const reg = /[A-Z]/g;
@@ -86,14 +87,6 @@
    */
 
   const createElement = (type, props, ...children) => {
-    // Validación: Asegurar que type y props sean válidos
-    if (typeof type !== 'string' && typeof type !== 'function') {
-      throw new Error("El parámetro 'type' debe ser una cadena o una función.")
-    }
-    if (props && typeof props !== 'object') {
-      throw new Error("El parámetro 'props' debe ser un objeto.")
-    }
-
     children = childArray(children, []);
     const key =
       props && props.key
@@ -197,15 +190,9 @@
    * @param nextProps - An object containing the new props that need to be updated in the DOM.
    */
   const updateDom = (dom, prevProps, nextProps) => {
-    if (!nextProps) nextProps = {}; // Validar que nextProps no sea null o undefined
-
-    // Optimización: Combinar filtros para mejorar el rendimiento
     Object.keys(prevProps)
-      .filter(
-        (key) =>
-          isEvent(key) &&
-          (isGone(nextProps)(key) || isNew(prevProps, nextProps)(key)),
-      )
+      .filter(isEvent)
+      .filter((key) => isGone(nextProps)(key) || isNew(prevProps, nextProps)(key))
       .forEach((name) => {
         const eventType = name.toLowerCase().substring(2);
         dom.removeEventListener(eventType, prevProps[name]);
@@ -266,24 +253,6 @@
     }, '');
   };
 
-  // Implementación inicial de Portals
-  const createPortal = (children, container) => {
-    container.innerHTML = '';
-    children.forEach((child) => {
-      const domNode = createDom(child);
-      container.appendChild(domNode);
-    });
-    return container
-  };
-
-  var Dom = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    DomStyle: DomStyle,
-    createDom: createDom,
-    createPortal: createPortal,
-    updateDom: updateDom
-  });
-
   /**
    * The function commits changes made to the virtual DOM to the actual DOM.
    */
@@ -293,7 +262,15 @@
       commitWork(vars.wipRoot.child);
       vars.currentRoot = vars.wipRoot;
     }
-    vars.wipRoot = undefined;
+    vars.effects.forEach((effect) => {
+      try {
+        effect();
+      } catch (err) {
+        console.error('Error in effect:', err);
+      }
+    });
+    vars.effects = [];
+    vars.wipRoot = null;
   };
 
   /**
@@ -312,11 +289,10 @@
     }
     const domParent = domParentFiber.dom;
 
-    // Optimización: Validar que fiber.dom sea válido antes de manipularlo
-    if (fiber.dom && fiber.effectTag === EFFECT_TAGS.PLACEMENT) {
+    if (fiber.effectTag === EFFECT_TAGS.PLACEMENT && fiber.dom != null) {
       domParent.appendChild(fiber.dom);
       runEffects(fiber);
-    } else if (fiber.dom && fiber.effectTag === EFFECT_TAGS.UPDATE) {
+    } else if (fiber.effectTag === EFFECT_TAGS.UPDATE && fiber.dom != null) {
       cancelEffects(fiber);
       updateDom(fiber.dom, fiber.alternate.props, fiber.props);
       runEffects(fiber);
@@ -346,13 +322,6 @@
     }
   };
 
-  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
@@ -362,12 +331,26 @@
    * @param elements - an array of elements representing the new children to be rendered in the current
    * fiber's subtree
    */
-  const reconcileChildren = (wipFiber, elements) => {
-    // Manejo de errores: Validar que elements sea un array
-    if (!Array.isArray(elements)) {
-      throw new Error("El parámetro 'elements' debe ser un array.")
+  const shouldComponentUpdate = (oldProps, newProps) => {
+    // Comparar las propiedades antiguas y nuevas
+    return (
+      !oldProps ||
+      !newProps ||
+      Object.keys(oldProps).length !== Object.keys(newProps).length ||
+      Object.keys(newProps).some((key) => oldProps[key] !== newProps[key])
+    )
+  };
+
+  const recycleFiber = (oldFiber, newProps) => {
+    return {
+      ...oldFiber,
+      props: newProps,
+      alternate: oldFiber,
+      effectTag: EFFECT_TAGS.UPDATE,
     }
+  };
 
+  const reconcileChildren = (wipFiber, elements) => {
     let index = 0;
     let oldFiber = wipFiber.alternate && wipFiber.alternate.child;
     let prevSibling = null;
@@ -379,43 +362,36 @@
       oldFiber = oldFiber.sibling;
     }
 
-    // Refactorización: Reducir redundancia en la creación de newFiber
-    const createFiber = (type, props, dom, parent, alternate, effectTag) => ({
-      type,
-      props,
-      dom,
-      parent,
-      alternate,
-      effectTag,
-    });
-
     while (index < elements.length) {
       const element = elements[index];
-      const key = element.props?.key || element.type;
+      const key = element.props.key || element.type;
       const oldFiber = oldFibersMap.get(key);
 
       let newFiber;
       const sameType = oldFiber && element && element.type === oldFiber.type;
 
-      if (sameType) {
-        newFiber = createFiber(
-          oldFiber.type,
-          element.props,
-          oldFiber.dom,
-          wipFiber,
-          oldFiber,
-          EFFECT_TAGS.UPDATE,
-        );
+      if (sameType && !shouldComponentUpdate(oldFiber.props, element.props)) {
+        // Reutilizar fibra existente si no hay cambios
+        newFiber = recycleFiber(oldFiber, element.props);
         oldFibersMap.delete(key);
-      } else if (element) {
-        newFiber = createFiber(
-          element.type,
-          element.props,
-          undefined,
-          wipFiber,
-          undefined,
-          EFFECT_TAGS.PLACEMENT,
-        );
+      }
+
+      if (element && !sameType) {
+        // Crear nueva fibra
+        newFiber = {
+          type: element.type,
+          props: element.props,
+          dom: null,
+          parent: wipFiber,
+          alternate: null,
+          effectTag: EFFECT_TAGS.PLACEMENT,
+        };
+      }
+
+      if (oldFiber && !sameType) {
+        oldFiber.effectTag = EFFECT_TAGS.DELETION;
+        wipFiber.effects = wipFiber.effects || [];
+        wipFiber.effects.push(oldFiber);
       }
 
       if (index === 0) {
@@ -425,62 +401,16 @@
       }
 
       prevSibling = newFiber;
-      index++;
-    }
 
-    // Validación adicional: Verificar que cada elemento tenga las propiedades necesarias
-    if (!elements.every((el) => el && el.type && el.props)) {
-      throw new Error(
-        `Cada elemento en 'elements' debe tener 'type' y 'props': ${JSON.stringify(elements)}`,
-      )
+      index++;
     }
 
-    // Optimización: Eliminar claves no utilizadas después de la reconciliación
     oldFibersMap.forEach((oldFiber) => {
       oldFiber.effectTag = EFFECT_TAGS.DELETION;
       vars.deletions.push(oldFiber);
     });
-
-    // Optimización: Reducir uso de memoria en oldFibersMap
-    oldFibersMap.clear(); // Limpiar el mapa después de la reconciliación
-  };
-
-  // Ajustar Suspense para manejar correctamente los componentes Lazy
-  const Suspense = ({ fallback, children }) => {
-    try {
-      const resolvedChildren = children.map((child) => {
-        if (typeof child === 'function') {
-          return child()
-        }
-        return child
-      });
-      return resolvedChildren // Renderizar los hijos resueltos
-    } catch (promise) {
-      return fallback // Mostrar el fallback mientras se carga
-    }
-  };
-
-  const Lazy = (importFunc) => {
-    let Component = null;
-    let promise = importFunc().then((module) => {
-      Component = module.default || module;
-    });
-
-    return (props) => {
-      if (!Component) {
-        throw promise
-      }
-      return createElement(Component, props) // Asegurar que renderiza correctamente el componente cargado
-    }
   };
 
-  var Reconciler = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    Lazy: Lazy,
-    Suspense: Suspense,
-    reconcileChildren: reconcileChildren
-  });
-
   /**
    * This function updates a function component by setting up a work-in-progress fiber, resetting the
    * hook index, creating an empty hooks array, rendering the component, and reconciling its children.
@@ -493,11 +423,6 @@
     vars.hookIndex = 0;
     vars.wipFiber.hooks = [];
 
-    // Validación: Asegurar que fiber.type sea una función válida
-    if (typeof fiber.type !== 'function') {
-      throw new Error('El tipo de componente debe ser una función válida.')
-    }
-
     const children = fiber.type(fiber.props);
     let childArr = Array.isArray(children) ? children : [children];
 
@@ -514,24 +439,72 @@
     if (!fiber.dom) {
       fiber.dom = createDom(fiber);
     }
+    reconcileChildren(fiber, fiber.props.children);
+  };
 
-    console.log(
-      '[updateHostComponent] fiber props children',
-      fiber.props?.children || 'undefined',
-    );
+  /* Internal components*/
 
-    if (fiber.props?.children) {
-      reconcileChildren(fiber, fiber.props.children);
-    } else {
-      console.warn('[updateHostComponent] No children to reconcile');
+  /**
+   * The function `optimizationImageApi` optimizes image URLs by adding query parameters for width,
+   * height, quality, and extension, and handles local and remote image sources.
+   * @returns The function `optimizationImageApi` returns either the original `src` if it is a local
+   * image and the page is being run on localhost, or it returns a modified image URL with optimization
+   * parameters added if the `src` is not local.
+   */
+  const optimizationImageApi = ({ src, props }) => {
+    const query = new URLSearchParams();
+    const apiEndpoint = 'https://image.unsetsoft.com';
+
+    const isLocal = !src.startsWith('http') || !src.startsWith('https');
+
+    if (props.width) query.set('width', props.width);
+    if (props.height) query.set('width', props.height);
+    if (props.quality) query.set('quality', props.quality);
+
+    const extension = props.extension ? `@${props.extension}` : '';
+
+    const localhost =
+      window.location.origin === 'http://localhost:3000' ||
+      window.location.origin === 'http://localhost:5173' ||
+      window.location.origin === 'http://localhost:4173';
+
+    if (isLocal) {
+      if (localhost) {
+        console.warn(
+          'Image optimizations only work with full links and must not contain localhost.',
+        );
+        return src
+      }
+
+      return `${window.location.origin}/${src}`
     }
+
+    return `${apiEndpoint}/image/${src}${extension}?${query.toString()}`
   };
 
-  var Components = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    updateFunctionComponent: updateFunctionComponent,
-    updateHostComponent: updateHostComponent
-  });
+  /**
+   * The `Image` function in JavaScript optimizes image loading based on a specified optimization flag.
+   * @returns An `<img>` element is being returned with the specified `src` and other props passed to the
+   * `Image` component. The `src` is either the original `src` value or the result of calling
+   * `optimizationImageApi` function with `src` and `props` if `optimization` is set to 'true'.
+   */
+  const Image = ({ src, ...props }) => {
+    const optimization = props.optimization === 'true' ? true : false;
+
+    const url = optimization
+      ? optimizationImageApi({
+          src,
+          props,
+        })
+      : src;
+
+    const ImageProps = {
+      src: url,
+      props,
+    };
+
+    return createElement('img', ImageProps, null)
+  };
 
   /**
    * This function uses requestIdleCallback to perform work on a fiber tree until it is complete or the
@@ -552,19 +525,10 @@
       commitRoot();
     }
 
-    const fallbackDeadline = { timeRemaining: () => Infinity };
-
-    /**
-     * Si requestIdleCallback no está disponible, se utiliza un fallback con tiempo infinito para continuar el bucle de trabajo.
-     */
-    if (typeof requestIdleCallback === 'function') {
-      requestIdleCallback(workLoop);
-    } else {
-      workLoop(fallbackDeadline);
-    }
+    requestIdleCallback(workLoop);
   };
 
-  requestIdleCallback(workLoop);
+  //requestIdleCallback(workLoop)
 
   /**
    * The function performs a unit of work by updating either a function component or a host component and
@@ -598,11 +562,15 @@
     return undefined
   };
 
-  var Workers = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    performUnitOfWork: performUnitOfWork,
-    workLoop: workLoop
-  });
+  const scheduleWork = (root) => {
+    vars.nextUnitOfWork = root;
+    vars.wipRoot = root;
+    vars.deletions = [];
+
+    vars.hookIndex = 0;
+    vars.effects = [];
+    requestIdleCallback(workLoop);
+  };
 
   /**
    * Renders an element into a container using a work-in-progress (WIP) root.
@@ -621,18 +589,9 @@
       alternate: vars.currentRoot,
     };
 
-    vars.deletions = [];
     vars.nextUnitOfWork = vars.wipRoot;
-
-    const fallbackDeadline = { timeRemaining: () => Infinity };
-
-    if (typeof requestIdleCallback === 'function') {
-      requestIdleCallback(workLoop);
-    } else {
-      // Si requestIdleCallback no está disponible, se utiliza un fallback con tiempo infinito.
-      workLoop(fallbackDeadline);
-    }
-
+    vars.deletions = [];
+    scheduleWork(vars.wipRoot);
     return vars.wipRoot
   };
 
@@ -648,7 +607,9 @@
   const init = (MainElement, root = '__ryunix') => {
     vars.containerRoot = document.getElementById(root);
 
-    render(MainElement, vars.containerRoot);
+    const renderProcess = render(MainElement, vars.containerRoot);
+
+    return renderProcess
   };
 
   /**
@@ -657,50 +618,51 @@
    * @returns The `useStore` function returns an array with two elements: the current state value and a
    * `setState` function that can be used to update the state.
    */
-  const useStore = (initial) => {
+  const useStore = (initialState, init) => {
+    const reducer = (state, action) =>
+      typeof action === 'function' ? action(state) : action;
+
+    return useReducer(reducer, initialState, init)
+  };
+
+  const useReducer = (reducer, initialState, init) => {
     const oldHook =
       vars.wipFiber.alternate &&
       vars.wipFiber.alternate.hooks &&
       vars.wipFiber.alternate.hooks[vars.hookIndex];
 
     const hook = {
-      state: oldHook ? oldHook.state : initial,
-
-      queue: oldHook ? [...oldHook.queue] : [],
+      state: oldHook ? oldHook.state : init ? init(initialState) : initialState,
+      queue: oldHook && Array.isArray(oldHook.queue) ? oldHook.queue.slice() : [],
     };
 
-    hook.queue.forEach((action) => {
-      hook.state =
-        typeof action === STRINGS.function ? action(hook.state) : action;
-    });
-
-    hook.queue = [];
+    if (oldHook && Array.isArray(oldHook.queue)) {
+      oldHook.queue.forEach((action) => {
+        hook.state = reducer(hook.state, action);
+      });
+    }
 
-    const setState = (action) => {
+    const dispatch = (action) => {
       hook.queue.push(action);
 
       vars.wipRoot = {
         dom: vars.currentRoot.dom,
-
-        props: {
-          ...vars.currentRoot.props,
-        },
-
+        props: vars.currentRoot.props,
         alternate: vars.currentRoot,
       };
-
-      vars.nextUnitOfWork = vars.wipRoot;
-
       vars.deletions = [];
+      vars.hookIndex = 0;
+      scheduleWork(vars.wipRoot);
     };
 
-    if (vars.wipFiber && vars.wipFiber.hooks) {
-      vars.wipFiber.hooks.push(hook);
+    hook.queue.forEach((action) => {
+      hook.state = reducer(hook.state, action);
+    });
 
-      vars.hookIndex++;
-    }
+    vars.wipFiber.hooks[vars.hookIndex] = hook;
+    vars.hookIndex++;
 
-    return [hook.state, setState]
+    return [hook.state, dispatch]
   };
 
   /**
@@ -722,21 +684,28 @@
     const hook = {
       type: RYUNIX_TYPES.RYUNIX_EFFECT,
       deps,
+      cleanup: oldHook?.cleanup,
     };
 
-    if (!oldHook) {
-      // invoke callback if this is the first time
-      callback();
-    } else {
-      if (!isEqual(oldHook.deps, hook.deps)) {
-        callback();
-      }
-    }
+    const hasChanged = !oldHook || !lodash.isEqual(oldHook.deps, deps);
+
+    if (hasChanged) {
+      vars.effects.push(() => {
+        // Llama al cleanup anterior si existe
+        if (typeof hook.cleanup === 'function') {
+          hook.cleanup();
+        }
 
-    if (vars.wipFiber.hooks) {
-      vars.wipFiber.hooks.push(hook);
-      vars.hookIndex++;
+        // Ejecuta el nuevo efecto y guarda el nuevo cleanup
+        const result = callback();
+        if (typeof result === 'function') {
+          hook.cleanup = result;
+        }
+      });
     }
+
+    vars.wipFiber.hooks[vars.hookIndex] = hook;
+    vars.hookIndex++;
   };
 
   const useRef = (initial) => {
@@ -750,10 +719,8 @@
       value: oldHook ? oldHook.value : { current: initial },
     };
 
-    if (vars.wipFiber.hooks) {
-      vars.wipFiber.hooks.push(hook);
-      vars.hookIndex++;
-    }
+    vars.wipFiber.hooks[vars.hookIndex] = hook;
+    vars.hookIndex++;
 
     return hook.value
   };
@@ -771,7 +738,7 @@
     };
 
     if (oldHook) {
-      if (isEqual(oldHook.deps, hook.deps)) {
+      if (lodash.isEqual(oldHook.deps, hook.deps)) {
         hook.value = oldHook.value;
       } else {
         hook.value = comp();
@@ -780,10 +747,8 @@
       hook.value = comp();
     }
 
-    if (vars.wipFiber.hooks) {
-      vars.wipFiber.hooks.push(hook);
-      vars.hookIndex++;
-    }
+    vars.wipFiber.hooks[vars.hookIndex] = hook;
+    vars.hookIndex++;
 
     return hook.value
   };
@@ -968,39 +933,28 @@
     return { Children, NavLink, navigate }
   };
 
-  const createContext = (defaultValue) => {
-    const context = {
-      value: defaultValue,
-      subscribers: [],
-      Provider: ({ value, children }) => {
-        context.value = value;
-        context.subscribers.forEach((subscriber) => subscriber(value));
-        return children
-      },
-      Consumer: ({ children }) => {
-        const [currentValue, setCurrentValue] = useStore(context.value);
-        context.subscribers.push(setCurrentValue);
-        return children(currentValue)
-      },
-    };
-    return context
-  };
+  var Hooks = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    useCallback: useCallback,
+    useEffect: useEffect,
+    useMemo: useMemo,
+    useQuery: useQuery,
+    useRef: useRef,
+    useRouter: useRouter,
+    useStore: useStore
+  });
 
   var Ryunix = {
-    Dom,
-    Workers,
-    Reconciler,
-    Components,
-    Commits,
     createElement,
-    Fragment,
-    init,
     render,
+    init,
+    Fragment,
+    Hooks,
   };
 
   window.Ryunix = Ryunix;
 
-  exports.createContext = createContext;
+  exports.Image = Image;
   exports.default = Ryunix;
   exports.useCallback = useCallback;
   exports.useEffect = useEffect;

package/dist/Ryunix.min.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Ryunix={})}(this,(function(e){"use strict";let t={containerRoot:{},nextUnitOfWork:{},currentRoot:{},wipRoot:{},deletions:[],wipFiber:{},hookIndex:0};const o=/[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")}),n=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"}),s=Object.freeze({PLACEMENT:Symbol("ryunix.reconciler.status.placement").toString(),UPDATE:Symbol("ryunix.reconciler.status.update").toString(),DELETION:Symbol("ryunix.reconciler.status.deletion").toString()}),a=e=>`${e}-${Math.random().toString(36).substring(2,9)}`,l=(e,t)=>(t=t||[],null==e||typeof e==n.boolean||(Array.isArray(e)?e.some((e=>{l(e,t)})):t.push(e)),t),c=(e,t,...o)=>{if("string"!=typeof e&&"function"!=typeof e)throw new Error("El parámetro 'type' debe ser una cadena o una función.");if(t&&"object"!=typeof t)throw new Error("El parámetro 'props' debe ser un objeto.");o=l(o,[]);const i=t&&t.key?a(t.key):a(r.Ryunix_ELEMENT.toString());return{type:e,props:{...t,key:i,children:o.map((e=>typeof e===n.object?e:p(e)))}}},p=e=>({type:r.TEXT_ELEMENT,props:{nodeValue:e,children:[]}}),u=e=>e.startsWith("on"),d=e=>e!==n.children&&!u(e),f=(e,t)=>o=>e[o]!==t[o],h=e=>t=>!(t in e),m=e=>{e.hooks&&e.hooks.filter((e=>e.tag===r.RYUNIX_EFFECT&&e.cancel)).forEach((e=>{e.cancel()}))},y=e=>{e.hooks&&e.hooks.filter((e=>e.tag===r.RYUNIX_EFFECT&&e.effect)).forEach((e=>{e.cancel=e.effect()}))},b=e=>{const t=e.type==r.TEXT_ELEMENT?document.createTextNode(""):document.createElement(e.type);return E(t,{},e.props),t},E=(e,t,o)=>{o||(o={}),Object.keys(t).filter((e=>u(e)&&(h(o)(e)||f(t,o)(e)))).forEach((o=>{const r=o.toLowerCase().substring(2);e.removeEventListener(r,t[o])})),Object.keys(t).filter(d).filter(h(o)).forEach((t=>{e[t]=""})),Object.keys(o).filter(d).filter(f(t,o)).forEach((r=>{if(r===n.style)w(e,o["ryunix-style"]);else if(r===i.style)w(e,o.style);else if(r===n.className){if(""===o["ryunix-class"])throw new Error("data-class cannot be empty.");t["ryunix-class"]&&e.classList.remove(...t["ryunix-class"].split(/\s+/)),e.classList.add(...o["ryunix-class"].split(/\s+/))}else if(r===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[r]=o[r]})),Object.keys(o).filter(u).filter(f(t,o)).forEach((t=>{const r=t.toLowerCase().substring(2);e.addEventListener(r,o[t])}))},w=(e,t)=>{e.style=Object.keys(t).reduce(((e,r)=>e+=`${r.replace(o,(function(e){return"-"+e.toLowerCase()}))}: ${t[r]};`),"")};var k=Object.freeze({__proto__:null,DomStyle:w,createDom:b,createPortal:(e,t)=>(t.innerHTML="",e.forEach((e=>{const o=b(e);t.appendChild(o)})),t),updateDom:E});const R=()=>{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 t=e.parent;for(;!t.dom;)t=t.parent;const o=t.dom;if(e.dom&&e.effectTag===s.PLACEMENT)o.appendChild(e.dom),y(e);else if(e.dom&&e.effectTag===s.UPDATE)m(e),E(e.dom,e.alternate.props,e.props),y(e);else if(e.effectTag===s.DELETION)return F(e,o),void m(e);x(e.child),x(e.sibling)},F=(e,t)=>{e.dom?t.removeChild(e.dom):F(e.child,t)};var N=Object.freeze({__proto__:null,commitDeletion:F,commitRoot:R,commitWork:x});const g=(e,o)=>{if(!Array.isArray(o))throw new Error("El parámetro 'elements' debe ser un array.");let r=0,n=e.alternate&&e.alternate.child,i=null;const a=new Map;for(;n;){const e=n.props.key||n.type;a.set(e,n),n=n.sibling}const l=(e,t,o,r,n,i)=>({type:e,props:t,dom:o,parent:r,alternate:n,effectTag:i});for(;r<o.length;){const t=o[r],n=t.props?.key||t.type,c=a.get(n);let p;c&&t&&t.type===c.type?(p=l(c.type,t.props,c.dom,e,c,s.UPDATE),a.delete(n)):t&&(p=l(t.type,t.props,void 0,e,void 0,s.PLACEMENT)),0===r?e.child=p:i&&(i.sibling=p),i=p,r++}if(!o.every((e=>e&&e.type&&e.props)))throw new Error(`Cada elemento en 'elements' debe tener 'type' y 'props': ${JSON.stringify(o)}`);a.forEach((e=>{e.effectTag=s.DELETION,t.deletions.push(e)})),a.clear()};var _=Object.freeze({__proto__:null,Lazy:e=>{let t=null,o=e().then((e=>{t=e.default||e}));return e=>{if(!t)throw o;return c(t,e)}},Suspense:({fallback:e,children:t})=>{try{return t.map((e=>"function"==typeof e?e():e))}catch(t){return e}},reconcileChildren:g});const v=e=>{if(t.wipFiber=e,t.hookIndex=0,t.wipFiber.hooks=[],"function"!=typeof e.type)throw new Error("El tipo de componente debe ser una función válida.");const o=e.type(e.props);let r=Array.isArray(o)?o:[o];g(e,r)},T=e=>{e.dom||(e.dom=b(e)),console.log("[updateHostComponent] fiber props children",e.props?.children||"undefined"),e.props?.children?g(e,e.props.children):console.warn("[updateHostComponent] No children to reconcile")};var C=Object.freeze({__proto__:null,updateFunctionComponent:v,updateHostComponent:T});const I=e=>{let o=!1;for(;t.nextUnitOfWork&&!o;)t.nextUnitOfWork=O(t.nextUnitOfWork),o=e.timeRemaining()<1;!t.nextUnitOfWork&&t.wipRoot&&R();const r={timeRemaining:()=>1/0};"function"==typeof requestIdleCallback?requestIdleCallback(I):I(r)};requestIdleCallback(I);const O=e=>{if(e.type instanceof Function?v(e):T(e),e.child)return e.child;let t=e;for(;t;){if(t.sibling)return t.sibling;t=t.parent}};const L=(e,o)=>{t.wipRoot={dom:o,props:{children:[e]},alternate:t.currentRoot},t.deletions=[],t.nextUnitOfWork=t.wipRoot;const r={timeRemaining:()=>1/0};return"function"==typeof requestIdleCallback?requestIdleCallback(I):I(r),t.wipRoot},U=e=>{const o=t.wipFiber.alternate&&t.wipFiber.alternate.hooks&&t.wipFiber.alternate.hooks[t.hookIndex],r={state:o?o.state:e,queue:o?[...o.queue]:[]};r.queue.forEach((e=>{r.state=typeof e===n.function?e(r.state):e})),r.queue=[];return t.wipFiber&&t.wipFiber.hooks&&(t.wipFiber.hooks.push(r),t.hookIndex++),[r.state,e=>{r.queue.push(e),t.wipRoot={dom:t.currentRoot.dom,props:{...t.currentRoot.props},alternate:t.currentRoot},t.nextUnitOfWork=t.wipRoot,t.deletions=[]}]},S=(e,o)=>{const n=t.wipFiber.alternate&&t.wipFiber.alternate.hooks&&t.wipFiber.alternate.hooks[t.hookIndex],i={type:r.RYUNIX_EFFECT,deps:o};n&&isEqual(n.deps,i.deps)||e(),t.wipFiber.hooks&&(t.wipFiber.hooks.push(i),t.hookIndex++)},j=(e,o)=>{const n=t.wipFiber.alternate&&t.wipFiber.alternate.hooks&&t.wipFiber.alternate.hooks[t.hookIndex],i={type:r.RYUNIX_MEMO,value:null,deps:o};return n&&isEqual(n.deps,i.deps)?i.value=n.value:i.value=e(),t.wipFiber.hooks&&(t.wipFiber.hooks.push(i),t.hookIndex++),i.value},M=()=>{const e=new URLSearchParams(window.location.search),t={};for(let[o,r]of e.entries())t[o]=r;return t};var X={Dom:k,Workers:Object.freeze({__proto__:null,performUnitOfWork:O,workLoop:I}),Reconciler:_,Components:C,Commits:N,createElement:c,Fragment:e=>e.children,init:(e,o="__ryunix")=>{t.containerRoot=document.getElementById(o),L(e,t.containerRoot)},render:L};window.Ryunix=X,e.createContext=e=>{const t={value:e,subscribers:[],Provider:({value:e,children:o})=>(t.value=e,t.subscribers.forEach((t=>t(e))),o),Consumer:({children:e})=>{const[o,r]=U(t.value);return t.subscribers.push(r),e(o)}};return t},e.default=X,e.useCallback=(e,t)=>j((()=>e),t),e.useEffect=S,e.useMemo=j,e.useQuery=M,e.useRef=e=>{const o=t.wipFiber.alternate&&t.wipFiber.alternate.hooks&&t.wipFiber.alternate.hooks[t.hookIndex],n={type:r.RYUNIX_REF,value:o?o.value:{current:e}};return t.wipFiber.hooks&&(t.wipFiber.hooks.push(n),t.hookIndex++),n.value},e.useRouter=e=>{const[t,o]=U(window.location.pathname),r=(e,t)=>{const o=t.split("?")[0],n=e.find((e=>e.NotFound)),i=n?{route:{component:n.NotFound},params:{}}:{route:{component:null},params:{}};for(const n of e){if(n.subRoutes){const e=r(n.subRoutes,t);if(e)return e}if("*"===n.path)return i;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=[],s=new RegExp(`^${n.path.replace(/:\w+/g,(t=>(e.push(t.substring(1)),"([^/]+)")))}$`),a=o.match(s);if(a){return{route:n,params:e.reduce(((e,t,o)=>(e[t]=a[o+1],e)),{})}}}return i},i=e=>{window.history.pushState({},"",e),s(e)},s=e=>{const t=e.split("?")[0];o(t)};S((()=>{const e=()=>s(window.location.pathname);return window.addEventListener("popstate",e),()=>window.removeEventListener("popstate",e)}),[]);const a=r(e,t)||{};return{Children:()=>{const e=M(),{route:t}=a;return t&&t.component&&typeof t.component===n.function?t.component({params:a.params||{},query:e}):(console.error("Component not found for current path or the component is not a valid function:",a),null)},NavLink:({to:e,...t})=>c("a",{href:e,onClick:t=>{t.preventDefault(),i(e)},...t},t.children),navigate:i}},e.useStore=U,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:null,nextUnitOfWork:null,currentRoot:null,wipRoot:null,deletions:null,wipFiber:null,hookIndex:null,effects:null};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=e=>`${e}-${Math.random().toString(36).substring(2,9)}`,c=(e,t)=>(t=t||[],null==e||typeof e==s.boolean||(Array.isArray(e)?e.some((e=>{c(e,t)})):t.push(e)),t),u=(e,t,...o)=>{o=c(o,[]);const n=t&&t.key?a(t.key):a(r.Ryunix_ELEMENT.toString());return{type:e,props:{...t,key:n,children:o.map((e=>typeof e===s.object?e:p(e)))}}},p=e=>({type:r.TEXT_ELEMENT,props:{nodeValue:e,children:[]}}),f=e=>e.startsWith("on"),d=e=>e!==s.children&&!f(e),h=(e,t)=>o=>e[o]!==t[o],y=e=>t=>!(t in e),m=e=>{e.hooks&&e.hooks.filter((e=>e.tag===r.RYUNIX_EFFECT&&e.cancel)).forEach((e=>{e.cancel()}))},E=e=>{e.hooks&&e.hooks.filter((e=>e.tag===r.RYUNIX_EFFECT&&e.effect)).forEach((e=>{e.cancel=e.effect()}))},w=(e,t,o)=>{Object.keys(t).filter(f).filter((e=>y(o)(e)||h(t,o)(e))).forEach((o=>{const n=o.toLowerCase().substring(2);e.removeEventListener(n,t[o])})),Object.keys(t).filter(d).filter(y(o)).forEach((t=>{e[t]=""})),Object.keys(o).filter(d).filter(h(t,o)).forEach((n=>{if(n===s.style)b(e,o["ryunix-style"]);else if(n===i.style)b(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(f).filter(h(t,o)).forEach((t=>{const n=t.toLowerCase().substring(2);e.addEventListener(n,o[t])}))},b=(e,t)=>{e.style=Object.keys(t).reduce(((e,o)=>e+=`${o.replace(n,(function(e){return"-"+e.toLowerCase()}))}: ${t[o]};`),"")},k=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),E(e);else if(e.effectTag===l.UPDATE&&null!=e.dom)m(e),w(e.dom,e.alternate.props,e.props),E(e);else if(e.effectTag===l.DELETION)return R(e,o),void m(e);k(e.child),k(e.sibling)},R=(e,t)=>{e.dom?t.removeChild(e.dom):R(e.child,t)},x=(e,t)=>!e||!t||Object.keys(e).length!==Object.keys(t).length||Object.keys(t).some((o=>e[o]!==t[o])),g=(e,t)=>({...e,props:t,alternate:e,effectTag:l.UPDATE}),N=(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 o=t[n],r=o.props.key||o.type,a=i.get(r);let c;const u=a&&o&&o.type===a.type;u&&!x(a.props,o.props)&&(c=g(a,o.props),i.delete(r)),o&&!u&&(c={type:o.type,props:o.props,dom:null,parent:e,alternate:null,effectTag:l.PLACEMENT}),a&&!u&&(a.effectTag=l.DELETION,e.effects=e.effects||[],e.effects.push(a)),0===n?e.child=c:s&&(s.sibling=c),s=c,n++}i.forEach((e=>{e.effectTag=l.DELETION,o.deletions.push(e)}))},F=e=>{e.dom||(e.dom=(e=>{const t=e.type==r.TEXT_ELEMENT?document.createTextNode(""):document.createElement(e.type);return w(t,{},e.props),t})(e)),N(e,e.props.children)},I=e=>{let t=!1;for(;o.nextUnitOfWork&&!t;)o.nextUnitOfWork=T(o.nextUnitOfWork),t=e.timeRemaining()<1;!o.nextUnitOfWork&&o.wipRoot&&(o.deletions.forEach(k),o.wipRoot&&o.wipRoot.child&&(k(o.wipRoot.child),o.currentRoot=o.wipRoot),o.effects.forEach((e=>{try{e()}catch(e){console.error("Error in effect:",e)}})),o.effects=[],o.wipRoot=null),requestIdleCallback(I)},T=e=>{if(e.type instanceof Function?(e=>{o.wipFiber=e,o.hookIndex=0,o.wipFiber.hooks=[];const t=e.type(e.props);let n=Array.isArray(t)?t:[t];N(e,n)})(e):F(e),e.child)return e.child;let t=e;for(;t;){if(t.sibling)return t.sibling;t=t.parent}},O=e=>{o.nextUnitOfWork=e,o.wipRoot=e,o.deletions=[],o.hookIndex=0,o.effects=[],requestIdleCallback(I)},L=(e,t)=>(o.wipRoot={dom:t,props:{children:[e]},alternate:o.currentRoot},o.nextUnitOfWork=o.wipRoot,o.deletions=[],O(o.wipRoot),o.wipRoot),U=(e,t)=>v(((e,t)=>"function"==typeof t?t(e):t),e,t),v=(e,t,n)=>{const r=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[o.hookIndex],s={state:r?r.state:n?n(t):t,queue:r&&Array.isArray(r.queue)?r.queue.slice():[]};r&&Array.isArray(r.queue)&&r.queue.forEach((t=>{s.state=e(s.state,t)}));return s.queue.forEach((t=>{s.state=e(s.state,t)})),o.wipFiber.hooks[o.hookIndex]=s,o.hookIndex++,[s.state,e=>{s.queue.push(e),o.wipRoot={dom:o.currentRoot.dom,props:o.currentRoot.props,alternate:o.currentRoot},o.deletions=[],o.hookIndex=0,O(o.wipRoot)}]},_=(e,n)=>{const s=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[o.hookIndex],i={type:r.RYUNIX_EFFECT,deps:n,cleanup:s?.cleanup};(!s||!t.isEqual(s.deps,n))&&o.effects.push((()=>{"function"==typeof i.cleanup&&i.cleanup();const t=e();"function"==typeof t&&(i.cleanup=t)})),o.wipFiber.hooks[o.hookIndex]=i,o.hookIndex++},S=e=>{const t=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[o.hookIndex],n={type:r.RYUNIX_REF,value:t?t.value:{current:e}};return o.wipFiber.hooks[o.hookIndex]=n,o.hookIndex++,n.value},C=(e,n)=>{const s=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[o.hookIndex],i={type:r.RYUNIX_MEMO,value:null,deps:n};return s&&t.isEqual(s.deps,i.deps)?i.value=s.value:i.value=e(),o.wipFiber.hooks[o.hookIndex]=i,o.hookIndex++,i.value},j=(e,t)=>C((()=>e),t),M=()=>{const e=new URLSearchParams(window.location.search),t={};for(let[o,n]of e.entries())t[o]=n;return t},q=e=>{const[t,o]=U(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)};_((()=>{const e=()=>i(window.location.pathname);return window.addEventListener("popstate",e),()=>window.removeEventListener("popstate",e)}),[]);const l=n(e,t)||{};return{Children:()=>{const e=M(),{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})=>u("a",{href:e,onClick:t=>{t.preventDefault(),r(e)},...t},t.children),navigate:r}};var A={createElement:u,render:L,init:(e,t="__ryunix")=>{o.containerRoot=document.getElementById(t);return L(e,o.containerRoot)},Fragment:e=>e.children,Hooks:Object.freeze({__proto__:null,useCallback:j,useEffect:_,useMemo:C,useQuery:M,useRef:S,useRouter:q,useStore:U})};window.Ryunix=A,e.Image=({src:e,...t})=>{const o="true"===t.optimization?(({src:e,props:t})=>{const o=new URLSearchParams,n=!e.startsWith("http")||!e.startsWith("https");t.width&&o.set("width",t.width),t.height&&o.set("width",t.height),t.quality&&o.set("quality",t.quality);const r=t.extension?`@${t.extension}`:"",s="http://localhost:3000"===window.location.origin||"http://localhost:5173"===window.location.origin||"http://localhost:4173"===window.location.origin;return n?s?(console.warn("Image optimizations only work with full links and must not contain localhost."),e):`${window.location.origin}/${e}`:`https://image.unsetsoft.com/image/${e}${r}?${o.toString()}`})({src:e,props:t}):e;return u("img",{src:o,props:t},null)},e.default=A,e.useCallback=j,e.useEffect=_,e.useMemo=C,e.useQuery=M,e.useRef=S,e.useRouter=q,e.useStore=U,Object.defineProperty(e,"__esModule",{value:!0})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unsetsoft/ryunixjs",
-  "version": "1.1.6-canary.99",
+  "version": "1.1.7",
   "license": "MIT",
   "main": "./dist/Ryunix.min.js",
   "types": "./dist/Ryunix.d.ts",