@unsetsoft/ryunixjs 1.1.7-canary.8 → 1.1.7-canary.80

package/dist/Ryunix.js

@@ -18,14 +18,16 @@
   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'),
+    TEXT_ELEMENT: Symbol('text.element').toString(),
+    Ryunix_ELEMENT: Symbol('ryunix.element').toString(),
+    RYUNIX_EFFECT: Symbol('ryunix.effect').toString(),
+    RYUNIX_MEMO: Symbol('ryunix.memo').toString(),
+    RYUNIX_URL_QUERY: Symbol('ryunix.urlQuery').toString(),
+    RYUNIX_REF: Symbol('ryunix.ref').toString(),
+    RYUNIX_STORE: Symbol('ryunix.store').toString(),
+    RYUNIX_REDUCE: Symbol('ryunix.reduce').toString(),
+    RYUNIX_FRAGMENT: Symbol('ryunix.fragment').toString(),
+    RYUNIX_CONTEXT: Symbol('ryunix.context').toString(),
   });
 
   const STRINGS = Object.freeze({
@@ -47,16 +49,9 @@
     PLACEMENT: Symbol('ryunix.reconciler.status.placement').toString(),
     UPDATE: Symbol('ryunix.reconciler.status.update').toString(),
     DELETION: Symbol('ryunix.reconciler.status.deletion').toString(),
+    NO_EFFECT: Symbol('ryunix.reconciler.status.no_efect').toString(),
   });
 
-  const generateHash = (prefix) => {
-    return `${prefix}-${Math.random().toString(36).substring(2, 9)}`
-  };
-
-  const Fragment = (props) => {
-    return props.children
-  };
-
   /**
    * 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.
@@ -75,16 +70,10 @@
    */
 
   const createElement = (type, props, ...children) => {
-    const key =
-      props && props.key
-        ? generateHash(props.key)
-        : generateHash(RYUNIX_TYPES.Ryunix_ELEMENT.toString());
-
     return {
       type,
       props: {
         ...props,
-        key,
         children: children
           .flat()
           .map((child) =>
@@ -111,6 +100,9 @@
     }
   };
 
+  const Fragment = (props) =>
+    createElement(RYUNIX_TYPES.RYUNIX_FRAGMENT, {}, ...props.children);
+
   const isEvent = (key) => key.startsWith('on');
   const isProperty = (key) => key !== STRINGS.children && !isEvent(key);
   const isNew = (prev, next) => (key) => prev[key] !== next[key];
@@ -247,18 +239,8 @@
    */
   const commitRoot = () => {
     vars.deletions.forEach(commitWork);
-    if (vars.wipRoot && vars.wipRoot.child) {
-      commitWork(vars.wipRoot.child);
-      vars.currentRoot = vars.wipRoot;
-    }
-    vars.effects.forEach((effect) => {
-      try {
-        effect();
-      } catch (err) {
-        console.error('Error in effect:', err);
-      }
-    });
-    vars.effects = [];
+    commitWork(vars.wipRoot.child);
+    vars.currentRoot = vars.wipRoot;
     vars.wipRoot = null;
   };
 
@@ -270,7 +252,9 @@
    * @returns The function does not return anything, it performs side effects by manipulating the DOM.
    */
   const commitWork = (fiber) => {
-    if (!fiber) return
+    if (!fiber) {
+      return
+    }
 
     let domParentFiber = fiber.parent;
     while (!domParentFiber.dom) {
@@ -278,20 +262,23 @@
     }
     const domParent = domParentFiber.dom;
 
-    if (fiber.effectTag === EFFECT_TAGS.PLACEMENT && fiber.dom != null) {
-      domParent.appendChild(fiber.dom);
+    if (fiber.effectTag === EFFECT_TAGS.PLACEMENT) {
+      if (fiber.dom != null) {
+        domParent.appendChild(fiber.dom);
+      }
       runEffects(fiber);
-    } else if (fiber.effectTag === EFFECT_TAGS.UPDATE && fiber.dom != null) {
+    } else if (fiber.effectTag === EFFECT_TAGS.UPDATE) {
       cancelEffects(fiber);
-      updateDom(fiber.dom, fiber.alternate.props, fiber.props);
+      if (fiber.dom != null) {
+        updateDom(fiber.dom, fiber.alternate.props, fiber.props);
+      }
       runEffects(fiber);
     } else if (fiber.effectTag === EFFECT_TAGS.DELETION) {
-      commitDeletion(fiber, domParent);
       cancelEffects(fiber);
+      commitDeletion(fiber, domParent);
       return
     }
 
-    // Recorre los "fibers" hijos y hermanos
     commitWork(fiber.child);
     commitWork(fiber.sibling);
   };
@@ -320,38 +307,18 @@
    * @param elements - an array of elements representing the new children to be rendered in the current
    * fiber's subtree
    */
-  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 reconcileChildren = (wipFiber, elements) => {
     let index = 0;
     let oldFiber = wipFiber.alternate && wipFiber.alternate.child;
-    let prevSibling = null;
+    let prevSibling;
 
-    const oldFibersMap = new Map();
-
-    while (oldFiber) {
-      const oldKey = oldFiber.props.key || oldFiber.type;
-      oldFibersMap.set(oldKey, oldFiber);
-      oldFiber = oldFiber.sibling;
-    }
-
-    while (index < elements.length) {
+    while (index < elements.length || oldFiber != null) {
       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 && !shouldComponentUpdate(oldFiber.props, element.props)) {
+      if (sameType) {
         newFiber = {
           type: oldFiber.type,
           props: element.props,
@@ -371,10 +338,8 @@
           effectTag: EFFECT_TAGS.PLACEMENT,
         };
       }
-
       if (oldFiber && !sameType) {
         oldFiber.effectTag = EFFECT_TAGS.DELETION;
-        wipFiber.effects = wipFiber.effects || [];
         vars.deletions.push(oldFiber);
       }
 
@@ -391,11 +356,6 @@
       prevSibling = newFiber;
       index++;
     }
-
-    oldFibersMap.forEach((oldFiber) => {
-      oldFiber.effectTag = EFFECT_TAGS.DELETION;
-      vars.deletions.push(oldFiber);
-    });
   };
 
   /**
@@ -409,11 +369,15 @@
     vars.wipFiber = fiber;
     vars.hookIndex = 0;
     vars.wipFiber.hooks = [];
+    const children = [fiber.type(fiber.props)];
 
-    const children = fiber.type(fiber.props);
-    let childArr = Array.isArray(children) ? children : [children];
+    // Aquí detectamos si es Provider para guardar contexto y valor en fiber
+    if (fiber.type._contextId && fiber.props.value !== undefined) {
+      fiber._contextId = fiber.type._contextId;
+      fiber._contextValue = fiber.props.value;
+    }
 
-    reconcileChildren(fiber, childArr);
+    reconcileChildren(fiber, children);
   };
 
   /**
@@ -423,10 +387,14 @@
    * fibers in the tree.
    */
   const updateHostComponent = (fiber) => {
-    if (!fiber.dom) {
-      fiber.dom = createDom(fiber);
+    if (fiber.type === RYUNIX_TYPES.RYUNIX_FRAGMENT) {
+      reconcileChildren(fiber, fiber.props.children.flat());
+    } else {
+      if (!fiber.dom) {
+        fiber.dom = createDom(fiber);
+      }
+      reconcileChildren(fiber, fiber.props.children.flat());
     }
-    reconcileChildren(fiber, fiber.props.children);
   };
 
   /* Internal components*/
@@ -515,7 +483,7 @@
     requestIdleCallback(workLoop);
   };
 
-  //requestIdleCallback(workLoop)
+  requestIdleCallback(workLoop);
 
   /**
    * The function performs a unit of work by updating either a function component or a host component and
@@ -527,7 +495,7 @@
    * @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.
+   * sibling of the parent. The function returns `null` if there are no more fibers to process.
    */
   const performUnitOfWork = (fiber) => {
     const isFunctionComponent = fiber.type instanceof Function;
@@ -604,37 +572,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: [],
+      state: oldHook ? oldHook.state : init ? init(initialState) : initialState,
+      queue: oldHook && Array.isArray(oldHook.queue) ? oldHook.queue.slice() : [],
     };
 
-    const actions = oldHook ? oldHook.queue : [];
-    actions.forEach((action) => {
-      hook.state =
-        typeof action === STRINGS.function ? action(hook.state) : action;
-    });
+    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,
         alternate: vars.currentRoot,
       };
-      vars.nextUnitOfWork = vars.wipRoot;
       vars.deletions = [];
+      vars.hookIndex = 0;
+      scheduleWork(vars.wipRoot);
     };
 
-    vars.wipFiber.hooks.push(hook);
+    hook.queue.forEach((action) => {
+      hook.state = reducer(hook.state, action);
+    });
+
+    vars.wipFiber.hooks[vars.hookIndex] = hook;
     vars.hookIndex++;
-    return [hook.state, setState]
+
+    return [hook.state, dispatch]
   };
 
   /**
@@ -680,6 +662,15 @@
     vars.hookIndex++;
   };
 
+  /**
+   * The useRef function in JavaScript is used to create a reference object that persists between renders
+   * in a functional component.
+   * @param initial - The `initial` parameter in the `useRef` function represents the initial value that
+   * will be assigned to the `current` property of the reference object. This initial value will be used
+   * if there is no previous value stored in the hook.
+   * @returns The `useRef` function is returning the `current` property of the `hook.value` object. This
+   * property contains the current value of the reference being managed by the `useRef` hook.
+   */
   const useRef = (initial) => {
     const oldHook =
       vars.wipFiber.alternate &&
@@ -697,6 +688,19 @@
     return hook.value
   };
 
+  /**
+   * The useMemo function in JavaScript is used to memoize the result of a computation based on the
+   * dependencies provided.
+   * @param comp - The `comp` parameter in the `useMemo` function is a function that represents the
+   * computation that needs to be memoized. This function will be executed to calculate the memoized
+   * value based on the dependencies provided.
+   * @param deps - The `deps` parameter in the `useMemo` function stands for dependencies. It is an array
+   * of values that the function depends on. The `useMemo` function will only recompute the memoized
+   * value when one of the dependencies has changed.
+   * @returns The `useMemo` function returns the `value` property of the `hook` object, which is either
+   * the memoized value from the previous render if the dependencies have not changed, or the result of
+   * calling the `comp` function if the dependencies have changed.
+   */
   const useMemo = (comp, deps) => {
     const oldHook =
       vars.wipFiber.alternate &&
@@ -725,6 +729,16 @@
     return hook.value
   };
 
+  /**
+   * The useCallback function in JavaScript returns a memoized version of the callback function that only
+   * changes if one of the dependencies has changed.
+   * @param callback - The `callback` parameter is a function that you want to memoize using
+   * `useCallback`. This function will only be re-created if any of the dependencies specified in the
+   * `deps` array change.
+   * @param deps - Dependencies array that the callback function depends on.
+   * @returns The useCallback function is returning a memoized version of the callback function. It is
+   * using the useMemo hook to memoize the callback function based on the provided dependencies (deps).
+   */
   const useCallback = (callback, deps) => {
     return useMemo(() => callback, deps)
   };
@@ -743,6 +757,37 @@
     return query
   };
 
+  const createContext = (defaultValue) => {
+    const contextId = RYUNIX_TYPES.RYUNIX_CONTEXT;
+
+    const Provider = ({ value, children }) => {
+      return Fragment({
+        children: children,
+      })
+    };
+
+    Provider._contextId = contextId;
+
+    const useContext = () => {
+      let fiber = vars.wipFiber;
+      while (fiber) {
+        if (fiber.type && fiber.type._contextId === contextId) {
+          if (fiber.props && 'value' in fiber.props) {
+            return fiber.props.value
+          }
+          return undefined
+        }
+        fiber = fiber.parent;
+      }
+      return defaultValue
+    };
+
+    return {
+      Provider,
+      useContext,
+    }
+  };
+
   /**
    * `useRouter` is a routing function to manage navigation, nested routes, and route pre-loading.
    *
@@ -798,115 +843,247 @@
    *   </>
    * );
    */
-  const useRouter = (routes) => {
-    const [location, setLocation] = useStore(window.location.pathname);
+  // 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
+  //     }
+
+  //     const WrappedComponent = () =>
+  //       createElement(route.component, {
+  //         key: location,
+  //         params: currentRouteData.params || {},
+  //         query,
+  //       })
+
+  //     return createElement(WrappedComponent)
+  //   }
+
+  //   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 }
+  // }
+
+  // Crear contexto para Router
+  const RouterContext = createContext({
+    location: '/',
+    params: {},
+    query: {},
+    navigate: (path) => {},
+    route: null,
+  });
 
-    const findRoute = (routes, path) => {
-      const pathname = path.split('?')[0];
+  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: {} };
+    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
-        }
+    for (const route of routes) {
+      if (route.subRoutes) {
+        const childRoute = findRoute(route.subRoutes, path);
+        if (childRoute) return childRoute
+      }
 
-        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
-        }
+      if (route.path === '*') {
+        return notFound
+      }
 
-        const keys = [];
-        const pattern = new RegExp(
-          `^${route.path.replace(/:\w+/g, (match) => {
-          keys.push(match.substring(1));
-          return '([^/]+)'
-        })}$`,
+      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 match = pathname.match(pattern);
-        if (match) {
-          const params = keys.reduce((acc, key, index) => {
-            acc[key] = match[index + 1];
-            return acc
-          }, {});
-
-          return { route, params }
-        }
+      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
-    };
+    return notFound
+  };
+
+  const RouterProvider = ({ routes, children }) => {
+    const [location, setLocation] = useStore(window.location.pathname);
+
+    useEffect(() => {
+      const onPopState = () => setLocation(window.location.pathname);
+      window.addEventListener('popstate', onPopState);
+      return () => window.removeEventListener('popstate', onPopState)
+    }, []);
 
     const navigate = (path) => {
       window.history.pushState({}, '', path);
-      updateRoute(path);
+      setLocation(path);
     };
 
-    const updateRoute = (path) => {
-      const cleanedPath = path.split('?')[0];
-      setLocation(cleanedPath);
+    const currentRouteData = findRoute(routes, location) || {};
+    const query = useQuery();
+
+    const contextValue = {
+      location,
+      params: currentRouteData.params || {},
+      query,
+      navigate,
+      route: currentRouteData.route,
     };
 
-    useEffect(() => {
-      const onPopState = () => updateRoute(window.location.pathname);
-      window.addEventListener('popstate', onPopState);
+    return createElement(
+      RouterContext.Provider,
+      { value: contextValue },
+      Fragment({
+        children: children,
+      }),
+    )
+  };
 
-      return () => window.removeEventListener('popstate', onPopState)
-    }, []);
+  const useRouter = () => {
+    return RouterContext.useContext()
+  };
 
-    const currentRouteData = findRoute(routes, location) || {};
+  const Children = () => {
+    const { route, params, query, location } = useRouter();
 
-    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
-      }
+    if (!route || !route.component) return null
 
-      return route.component({
-        params: currentRouteData.params || {},
-        query,
-      })
-    };
+    return createElement(
+      RYUNIX_TYPES.RYUNIX_FRAGMENT,
+      {},
+      createElement(route.component, { key: location, params, query }),
+    )
+  };
 
-    const NavLink = ({ to, ...props }) => {
-      const handleClick = (e) => {
-        e.preventDefault();
-        navigate(to);
-      };
-      return createElement(
-        'a',
-        { href: to, onClick: handleClick, ...props },
-        props.children,
-      )
+  // Componente NavLink para navegación interna
+  const NavLink = ({ to, ...props }) => {
+    const { navigate } = useRouter();
+
+    const handleClick = (e) => {
+      e.preventDefault();
+      navigate(to);
     };
 
-    return { Children, NavLink, navigate }
+    return createElement(
+      'a',
+      { href: to, onClick: handleClick, ...props },
+      props.children,
+    )
   };
 
   var Hooks = /*#__PURE__*/Object.freeze({
     __proto__: null,
+    Children: Children,
+    NavLink: NavLink,
+    RouterProvider: RouterProvider,
+    createContext: createContext,
     useCallback: useCallback,
     useEffect: useEffect,
     useMemo: useMemo,
@@ -926,7 +1103,11 @@
 
   window.Ryunix = Ryunix;
 
+  exports.Children = Children;
   exports.Image = Image;
+  exports.NavLink = NavLink;
+  exports.RouterProvider = RouterProvider;
+  exports.createContext = createContext;
   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,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,...o)=>{const n=t&&t.key?a(t.key):a(r.Ryunix_ELEMENT.toString());return{type:e,props:{...t,key:n,children:o.flat().map((e=>typeof e===s.object?e:u(e)))}}},u=e=>({type:r.TEXT_ELEMENT,props:{nodeValue:e,children:[]}}),p=e=>e.startsWith("on"),f=e=>e!==s.children&&!p(e),d=(e,t)=>o=>e[o]!==t[o],h=e=>t=>!(t in e),y=e=>{e.hooks&&e.hooks.filter((e=>e.tag===r.RYUNIX_EFFECT&&e.cancel)).forEach((e=>{e.cancel()}))},m=e=>{e.hooks&&e.hooks.filter((e=>e.tag===r.RYUNIX_EFFECT&&e.effect)).forEach((e=>{e.cancel=e.effect()}))},E=(e,t,o)=>{Object.keys(t).filter(p).filter((e=>h(o)(e)||d(t,o)(e))).forEach((o=>{const n=o.toLowerCase().substring(2);e.removeEventListener(n,t[o])})),Object.keys(t).filter(f).filter(h(o)).forEach((t=>{e[t]=""})),Object.keys(o).filter(f).filter(d(t,o)).forEach((n=>{if(n===s.style)w(e,o["ryunix-style"]);else if(n===i.style)w(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(p).filter(d(t,o)).forEach((t=>{const n=t.toLowerCase().substring(2);e.addEventListener(n,o[t])}))},w=(e,t)=>{e.style=Object.keys(t).reduce(((e,o)=>e+=`${o.replace(n,(function(e){return"-"+e.toLowerCase()}))}: ${t[o]};`),"")},b=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),m(e);else if(e.effectTag===l.UPDATE&&null!=e.dom)y(e),E(e.dom,e.alternate.props,e.props),m(e);else if(e.effectTag===l.DELETION)return k(e,o),void y(e);b(e.child),b(e.sibling)},k=(e,t)=>{e.dom?t.removeChild(e.dom):k(e.child,t)},R=(e,t)=>!e||!t||Object.keys(e).length!==Object.keys(t).length||Object.keys(t).some((o=>e[o]!==t[o])),g=(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],a=r.props.key||r.type,c=i.get(a);let u;const p=c&&r&&r.type==c.type;p&&!R(c.props,r.props)&&(u={type:c.type,props:r.props,dom:c.dom,parent:e,alternate:c,effectTag:l.UPDATE}),r&&!p&&(u={type:r.type,props:r.props,dom:null,parent:e,alternate:null,effectTag:l.PLACEMENT}),c&&!p&&(c.effectTag=l.DELETION,e.effects=e.effects||[],o.deletions.push(c)),c&&(c=c.sibling),0===n?e.child=u:r&&(s.sibling=u),s=u,n++}i.forEach((e=>{e.effectTag=l.DELETION,o.deletions.push(e)}))},x=e=>{e.dom||(e.dom=(e=>{const t=e.type==r.TEXT_ELEMENT?document.createTextNode(""):document.createElement(e.type);return E(t,{},e.props),t})(e)),g(e,e.props.children)},N=e=>{let t=!1;for(;o.nextUnitOfWork&&!t;)o.nextUnitOfWork=F(o.nextUnitOfWork),t=e.timeRemaining()<1;!o.nextUnitOfWork&&o.wipRoot&&(o.deletions.forEach(b),o.wipRoot&&o.wipRoot.child&&(b(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(N)},F=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];g(e,n)})(e):x(e),e.child)return e.child;let t=e;for(;t;){if(t.sibling)return t.sibling;t=t.parent}},T=(e,t)=>{var n;return o.wipRoot={dom:t,props:{children:[e]},alternate:o.currentRoot},o.nextUnitOfWork=o.wipRoot,o.deletions=[],n=o.wipRoot,o.nextUnitOfWork=n,o.wipRoot=n,o.deletions=[],o.hookIndex=0,o.effects=[],requestIdleCallback(N),o.wipRoot},I=e=>{const t=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[o.hookIndex],n={state:t?t.state:e,queue:[]};(t?t.queue:[]).forEach((e=>{n.state=typeof e===s.function?e(n.state):e}));return o.wipFiber.hooks.push(n),o.hookIndex++,[n.state,e=>{n.queue.push(e),o.wipRoot={dom:o.currentRoot.dom,props:o.currentRoot.props,alternate:o.currentRoot},o.nextUnitOfWork=o.wipRoot,o.deletions=[]}]},O=(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++},L=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},U=(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},v=(e,t)=>U((()=>e),t),_=()=>{const e=new URLSearchParams(window.location.search),t={};for(let[o,n]of e.entries())t[o]=n;return t},S=e=>{const[t,o]=I(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)};O((()=>{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})=>c("a",{href:e,onClick:t=>{t.preventDefault(),r(e)},...t},t.children),navigate:r}};var C={createElement:c,render:T,init:(e,t="__ryunix")=>{o.containerRoot=document.getElementById(t);return T(e,o.containerRoot)},Fragment:e=>e.children,Hooks:Object.freeze({__proto__:null,useCallback:v,useEffect:O,useMemo:U,useQuery:_,useRef:L,useRouter:S,useStore:I})};window.Ryunix=C,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 c("img",{src:o,props:t},null)},e.default=C,e.useCallback=v,e.useEffect=O,e.useMemo=U,e.useQuery=_,e.useRef=L,e.useRouter=S,e.useStore=I,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").toString(),Ryunix_ELEMENT:Symbol("ryunix.element").toString(),RYUNIX_EFFECT:Symbol("ryunix.effect").toString(),RYUNIX_MEMO:Symbol("ryunix.memo").toString(),RYUNIX_URL_QUERY:Symbol("ryunix.urlQuery").toString(),RYUNIX_REF:Symbol("ryunix.ref").toString(),RYUNIX_STORE:Symbol("ryunix.store").toString(),RYUNIX_REDUCE:Symbol("ryunix.reduce").toString(),RYUNIX_FRAGMENT:Symbol("ryunix.fragment").toString(),RYUNIX_CONTEXT:Symbol("ryunix.context").toString()}),i=Object.freeze({object:"object",function:"function",style:"ryunix-style",className:"ryunix-class",children:"children",boolean:"boolean",string:"string"}),s=Object.freeze({style:"style",className:"className"}),l=Object.freeze({PLACEMENT:Symbol("ryunix.reconciler.status.placement").toString(),UPDATE:Symbol("ryunix.reconciler.status.update").toString(),DELETION:Symbol("ryunix.reconciler.status.deletion").toString(),NO_EFFECT:Symbol("ryunix.reconciler.status.no_efect").toString()}),a=(e,t,...o)=>({type:e,props:{...t,children:o.flat().map((e=>typeof e===i.object?e:c(e)))}}),c=e=>({type:r.TEXT_ELEMENT,props:{nodeValue:e,children:[]}}),u=e=>a(r.RYUNIX_FRAGMENT,{},...e.children),p=e=>e.startsWith("on"),d=e=>e!==i.children&&!p(e),f=(e,t)=>o=>e[o]!==t[o],h=e=>t=>!(t in e),y=e=>{e.hooks&&e.hooks.filter((e=>e.tag===r.RYUNIX_EFFECT&&e.cancel)).forEach((e=>{e.cancel()}))},m=e=>{e.hooks&&e.hooks.filter((e=>e.tag===r.RYUNIX_EFFECT&&e.effect)).forEach((e=>{e.cancel=e.effect()}))},E=(e,t,o)=>{Object.keys(t).filter(p).filter((e=>h(o)(e)||f(t,o)(e))).forEach((o=>{const n=o.toLowerCase().substring(2);e.removeEventListener(n,t[o])})),Object.keys(t).filter(d).filter(h(o)).forEach((t=>{e[t]=""})),Object.keys(o).filter(d).filter(f(t,o)).forEach((n=>{if(n===i.style)w(e,o["ryunix-style"]);else if(n===s.style)w(e,o.style);else if(n===i.className){if(""===o["ryunix-class"])throw new Error("data-class cannot be empty.");t["ryunix-class"]&&e.classList.remove(...t["ryunix-class"].split(/\s+/)),e.classList.add(...o["ryunix-class"].split(/\s+/))}else if(n===s.className){if(""===o.className)throw new Error("className cannot be empty.");t.className&&e.classList.remove(...t.className.split(/\s+/)),e.classList.add(...o.className.split(/\s+/))}else e[n]=o[n]})),Object.keys(o).filter(p).filter(f(t,o)).forEach((t=>{const n=t.toLowerCase().substring(2);e.addEventListener(n,o[t])}))},w=(e,t)=>{e.style=Object.keys(t).reduce(((e,o)=>e+=`${o.replace(n,(function(e){return"-"+e.toLowerCase()}))}: ${t[o]};`),"")},b=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),m(e);else if(e.effectTag===l.UPDATE)y(e),null!=e.dom&&E(e.dom,e.alternate.props,e.props),m(e);else if(e.effectTag===l.DELETION)return y(e),void x(e,o);b(e.child),b(e.sibling)},x=(e,t)=>{e.dom?t.removeChild(e.dom):x(e.child,t)},R=(e,t)=>{let n,r=0,i=e.alternate&&e.alternate.child;for(;r<t.length||null!=i;){const s=t[r];let a;const c=i&&s&&s.type==i.type;c&&(a={type:i.type,props:s.props,dom:i.dom,parent:e,alternate:i,effectTag:l.UPDATE}),s&&!c&&(a={type:s.type,props:s.props,dom:null,parent:e,alternate:null,effectTag:l.PLACEMENT}),i&&!c&&(i.effectTag=l.DELETION,o.deletions.push(i)),i&&(i=i.sibling),0===r?e.child=a:s&&(n.sibling=a),n=a,r++}},g=e=>{e.type===r.RYUNIX_FRAGMENT||e.dom||(e.dom=(e=>{const t=e.type==r.TEXT_ELEMENT?document.createTextNode(""):document.createElement(e.type);return E(t,{},e.props),t})(e)),R(e,e.props.children.flat())},k=e=>{let t=!1;for(;o.nextUnitOfWork&&!t;)o.nextUnitOfWork=N(o.nextUnitOfWork),t=e.timeRemaining()<1;!o.nextUnitOfWork&&o.wipRoot&&(o.deletions.forEach(b),b(o.wipRoot.child),o.currentRoot=o.wipRoot,o.wipRoot=null),requestIdleCallback(k)};requestIdleCallback(k);const N=e=>{if(e.type instanceof Function?(e=>{o.wipFiber=e,o.hookIndex=0,o.wipFiber.hooks=[];const t=[e.type(e.props)];e.type._contextId&&void 0!==e.props.value&&(e._contextId=e.type._contextId,e._contextValue=e.props.value),R(e,t)})(e):g(e),e.child)return e.child;let t=e;for(;t;){if(t.sibling)return t.sibling;t=t.parent}},I=e=>{o.nextUnitOfWork=e,o.wipRoot=e,o.deletions=[],o.hookIndex=0,o.effects=[],requestIdleCallback(k)},F=(e,t)=>(o.wipRoot={dom:t,props:{children:[e]},alternate:o.currentRoot},o.nextUnitOfWork=o.wipRoot,o.deletions=[],I(o.wipRoot),o.wipRoot),T=(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],i={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=>{i.state=e(i.state,t)}));return i.queue.forEach((t=>{i.state=e(i.state,t)})),o.wipFiber.hooks[o.hookIndex]=i,o.hookIndex++,[i.state,e=>{i.queue.push(e),o.wipRoot={dom:o.currentRoot.dom,props:o.currentRoot.props,alternate:o.currentRoot},o.deletions=[],o.hookIndex=0,I(o.wipRoot)}]},_=(e,n)=>{const i=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[o.hookIndex],s={type:r.RYUNIX_EFFECT,deps:n,cleanup:i?.cleanup};(!i||!t.isEqual(i.deps,n))&&o.effects.push((()=>{"function"==typeof s.cleanup&&s.cleanup();const t=e();"function"==typeof t&&(s.cleanup=t)})),o.wipFiber.hooks[o.hookIndex]=s,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},U=(e,n)=>{const i=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[o.hookIndex],s={type:r.RYUNIX_MEMO,value:null,deps:n};return i&&t.isEqual(i.deps,s.deps)?s.value=i.value:s.value=e(),o.wipFiber.hooks[o.hookIndex]=s,o.hookIndex++,s.value},C=(e,t)=>U((()=>e),t),O=()=>{const e=new URLSearchParams(window.location.search),t={};for(let[o,n]of e.entries())t[o]=n;return t},L=e=>{const t=r.RYUNIX_CONTEXT,n=({value:e,children:t})=>u({children:t});n._contextId=t;return{Provider:n,useContext:()=>{let n=o.wipFiber;for(;n;){if(n.type&&n.type._contextId===t)return n.props&&"value"in n.props?n.props.value:void 0;n=n.parent}return e}}},X=L({location:"/",params:{},query:{},navigate:e=>{},route:null}),q=(e,t)=>{const o=t.split("?")[0],n=e.find((e=>e.NotFound)),r=n?{route:{component:n.NotFound},params:{}}:{route:{component:null},params:{}};for(const n of e){if(n.subRoutes){const e=q(n.subRoutes,t);if(e)return e}if("*"===n.path)return r;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,(t=>(e.push(t.substring(1)),"([^/]+)")))}$`),s=o.match(i);if(s){return{route:n,params:e.reduce(((e,t,o)=>(e[t]=s[o+1],e)),{})}}}return r},M=({routes:e,children:t})=>{const[o,n]=T(window.location.pathname);_((()=>{const e=()=>n(window.location.pathname);return window.addEventListener("popstate",e),()=>window.removeEventListener("popstate",e)}),[]);const r=q(e,o)||{},i=O(),s={location:o,params:r.params||{},query:i,navigate:e=>{window.history.pushState({},"",e),n(e)},route:r.route};return a(X.Provider,{value:s},u({children:t}))},Y=()=>X.useContext(),j=()=>{const{route:e,params:t,query:o,location:n}=Y();return e&&e.component?a(r.RYUNIX_FRAGMENT,{},a(e.component,{key:n,params:t,query:o})):null},A=({to:e,...t})=>{const{navigate:o}=Y();return a("a",{href:e,onClick:t=>{t.preventDefault(),o(e)},...t},t.children)};var P={createElement:a,render:F,init:(e,t="__ryunix")=>{o.containerRoot=document.getElementById(t);return F(e,o.containerRoot)},Fragment:u,Hooks:Object.freeze({__proto__:null,Children:j,NavLink:A,RouterProvider:M,createContext:L,useCallback:C,useEffect:_,useMemo:U,useQuery:O,useRef:S,useRouter:Y,useStore:T})};window.Ryunix=P,e.Children=j,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}`:"",i="http://localhost:3000"===window.location.origin||"http://localhost:5173"===window.location.origin||"http://localhost:4173"===window.location.origin;return n?i?(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 a("img",{src:o,props:t},null)},e.NavLink=A,e.RouterProvider=M,e.createContext=L,e.default=P,e.useCallback=C,e.useEffect=_,e.useMemo=U,e.useQuery=O,e.useRef=S,e.useRouter=Y,e.useStore=T,Object.defineProperty(e,"__esModule",{value:!0})}));

package/package.json

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