@unsetsoft/ryunixjs 1.1.16 → 1.1.17-canary.2

package/dist/Ryunix.js

@@ -471,7 +471,7 @@
 
     const ImageProps = {
       src: url,
-      props,
+      ...props,
     };
 
     return createElement('img', ImageProps, null)
@@ -764,14 +764,6 @@
    * @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
-  };
 
   const createContext = (defaultValue) => {
     const contextId = RYUNIX_TYPES.RYUNIX_CONTEXT;
@@ -804,184 +796,36 @@
     }
   };
 
-  /**
-   * `useRouter` is a routing function to manage navigation, nested routes, and route pre-loading.
-   *
-   * This function handles client-side routing, URL updates, and component rendering based on defined routes. It supports:
-   * - Dynamic routes (e.g., "/user/:id").
-   * - Optional nested routes with an `subRoutes` property in route objects.
-   * - Default pre-loading of all routes except the current active route.
-   *
-   * @param {Array} routes - An array of route objects, each containing:
-   *    - `path` (string): The URL path to match (supports dynamic segments like "/user/:id").
-   *    - `component` (function): The component to render when the route matches.
-   *    - `subRoutes` (optional array): An optional array of nested route objects, defining sub-routes for this route.
-   *    - `NotFound` (optional function): Component to render for unmatched routes (default 404 behavior).
-   *
-   * @returns {Object} - An object with:
-   *    - `Children` (function): Returns the component that matches the current route, passing route parameters and query parameters as props.
-   *    - `NavLink` (component): A link component to navigate within the application without refreshing the page.
-   *    - `navigate` (function): Allows programmatically navigating to a specific path.
-   *
-   * @example
-   * // Define nested routes
-   * const routes = [
-   *   {
-   *     path: "/",
-   *     component: HomePage,
-   *     subRoutes: [
-   *       {
-   *         path: "/settings",
-   *         component: SettingsPage,
-   *       },
-   *     ],
-   *   },
-   *   {
-   *     path: "/user/:id",
-   *     component: UserProfile,
-   *   },
-   *   {
-   *     path: "*",
-   *     NotFound: NotFoundPage,
-   *   },
-   * ];
-   *
-   * // Use the routing function
-   * const { Children, NavLink } = useRouter(routes);
-   *
-   * // Render the matched component
-   * const App = () => (
-   *   <>
-   *     <NavLink to="/">Home</NavLink>
-   *     <NavLink to="/settings">Settings</NavLink>
-   *     <NavLink to="/user/123">User Profile</NavLink>
-   *     <Children />
-   *   </>
-   * );
-   */
-  // const useRouter = (routes) => {
-  //   const [location, setLocation] = useStore(window.location.pathname)
-
-  //   const findRoute = (routes, path) => {
-  //     const pathname = path.split('?')[0]
-
-  //     const notFoundRoute = routes.find((route) => route.NotFound)
-  //     const notFound = notFoundRoute
-  //       ? { route: { component: notFoundRoute.NotFound }, params: {} }
-  //       : { route: { component: null }, params: {} }
-
-  //     for (const route of routes) {
-  //       if (route.subRoutes) {
-  //         const childRoute = findRoute(route.subRoutes, path)
-  //         if (childRoute) return childRoute
-  //       }
-
-  //       if (route.path === '*') {
-  //         return notFound
-  //       }
-
-  //       if (!route.path || typeof route.path !== 'string') {
-  //         console.warn('Invalid route detected:', route)
-  //         console.info(
-  //           "if you are using { NotFound: NotFound } please add { path: '*', NotFound: NotFound }",
-  //         )
-  //         continue
-  //       }
-
-  //       const keys = []
-  //       const pattern = new RegExp(
-  //         `^${route.path.replace(/:\w+/g, (match) => {
-  //           keys.push(match.substring(1))
-  //           return '([^/]+)'
-  //         })}$`,
-  //       )
-
-  //       const match = pathname.match(pattern)
-  //       if (match) {
-  //         const params = keys.reduce((acc, key, index) => {
-  //           acc[key] = match[index + 1]
-  //           return acc
-  //         }, {})
-
-  //         return { route, params }
-  //       }
-  //     }
-
-  //     return notFound
-  //   }
-
-  //   const navigate = (path) => {
-  //     window.history.pushState({}, '', path)
-
-  //     updateRoute(path)
-  //   }
-
-  //   const updateRoute = (path) => {
-  //     const cleanedPath = path.split('?')[0]
-  //     setLocation(cleanedPath)
-  //   }
-
-  //   useEffect(() => {
-  //     const onPopState = () => updateRoute(window.location.pathname)
-  //     window.addEventListener('popstate', onPopState)
-
-  //     return () => window.removeEventListener('popstate', onPopState)
-  //   }, [])
-
-  //   const currentRouteData = findRoute(routes, location) || {}
-
-  //   const Children = () => {
-  //     const query = useQuery()
-  //     const { route } = currentRouteData
-
-  //     if (
-  //       !route ||
-  //       !route.component ||
-  //       typeof route.component !== STRINGS.function
-  //     ) {
-  //       console.error(
-  //         'Component not found for current path or the component is not a valid function:',
-  //         currentRouteData,
-  //       )
-  //       return null
-  //     }
-
-  //     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 useQuery = () => {
+    const searchParams = new URLSearchParams(window.location.search);
+    const query = {};
+    for (let [key, value] of searchParams.entries()) {
+      query[key] = value;
+    }
+    return query
+  };
+
+  const useHash = () => {
+    return window.location.hash
+  };
+
+  const getLocation = () => ({
+    pathname: window.location.pathname,
+    search: window.location.search,
+    hash: window.location.hash,
+  });
+
   const RouterContext = createContext({
     location: '/',
     params: {},
     query: {},
+    hash: '',
     navigate: (path) => {},
     route: null,
   });
 
   const findRoute = (routes, path) => {
-    const pathname = path.split('?')[0];
+    const pathname = path.split('?')[0].split('#')[0];
 
     const notFoundRoute = routes.find((route) => route.NotFound);
     const notFound = notFoundRoute
@@ -1029,26 +873,32 @@
   };
 
   const RouterProvider = ({ routes, children }) => {
-    const [location, setLocation] = useStore(window.location.pathname);
+    const [location, setLocation] = useStore(getLocation());
 
     useEffect(() => {
-      const onPopState = () => setLocation(window.location.pathname);
-      window.addEventListener('popstate', onPopState);
-      return () => window.removeEventListener('popstate', onPopState)
+      const update = () => setLocation(getLocation());
+
+      window.addEventListener('popstate', update);
+      window.addEventListener('hashchange', update);
+      return () => {
+        window.removeEventListener('popstate', update);
+        window.removeEventListener('hashchange', update);
+      }
     }, []);
 
     const navigate = (path) => {
       window.history.pushState({}, '', path);
-      setLocation(path);
+      setLocation(getLocation());
     };
 
-    const currentRouteData = findRoute(routes, location) || {};
+    const currentRouteData = findRoute(routes, location.pathname) || {};
     const query = useQuery();
 
     const contextValue = {
       location,
       params: currentRouteData.params || {},
       query,
+      hash: location.hash,
       navigate,
       route: currentRouteData.route,
     };
@@ -1067,11 +917,24 @@
   };
 
   const Children = () => {
-    const { route, params, query, location } = useRouter();
+    const { route, params, query, hash, location } = useRouter();
 
     if (!route || !route.component) return null
 
-    return createElement(route.component, { key: location, params, query })
+    useEffect(() => {
+      if (hash) {
+        const id = hash.slice(1);
+        const el = document.getElementById(id);
+        if (el) el.scrollIntoView({ behavior: 'smooth' });
+      }
+    }, [hash]);
+
+    return createElement(route.component, {
+      key: location.pathname,
+      params,
+      query,
+      hash,
+    })
   };
 
   // Componente NavLink para navegación interna
@@ -1098,6 +961,7 @@
     createContext: createContext,
     useCallback: useCallback,
     useEffect: useEffect,
+    useHash: useHash,
     useMemo: useMemo,
     useQuery: useQuery,
     useRef: useRef,
@@ -1123,6 +987,7 @@
   exports.default = Ryunix;
   exports.useCallback = useCallback;
   exports.useEffect = useEffect;
+  exports.useHash = useHash;
   exports.useMemo = useMemo;
   exports.useQuery = useQuery;
   exports.useRef = useRef;

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").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=>{const t=Array.isArray(e.children)?e.children:[e.children];return a(r.RYUNIX_FRAGMENT,{},...t)},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)b(e,o["ryunix-style"]);else if(n===s.style)b(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])}))},b=(e,t)=>{e.style=Object.keys(t).reduce(((e,o)=>e+=`${o.replace(n,(function(e){return"-"+e.toLowerCase()}))}: ${t[o]};`),"")},w=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);w(e.child),w(e.sibling)},x=(e,t)=>{if(e.dom)t.removeChild(e.dom);else{let o=e.child;for(;o;)x(o,t),o=o.sibling}},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=>{const t=Array.isArray(e.props.children)?e.props.children.flat():[e.props.children];e.type===r.RYUNIX_FRAGMENT||e.dom||(e.dom=(e=>{if(e.type===r.RYUNIX_FRAGMENT)return null;const t=e.type==r.TEXT_ELEMENT?document.createTextNode(""):document.createElement(e.type);return E(t,{},e.props),t})(e)),R(e,t)},k=({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("height",t.height),t.quality&&o.set("quality",t.quality);const r=t.extension?`@${t.extension}`:"";return n?(()=>{const{hostname:e}=window.location;return"localhost"===e||"127.0.0.1"===e})()?(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()}`},N=e=>{let t=!1;for(;o.nextUnitOfWork&&!t;)o.nextUnitOfWork=I(o.nextUnitOfWork),t=e.timeRemaining()<1;!o.nextUnitOfWork&&o.wipRoot&&(o.deletions.forEach(w),w(o.wipRoot.child),o.currentRoot=o.wipRoot,o.wipRoot=null),requestIdleCallback(N)};requestIdleCallback(N);const I=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}},F=e=>{o.nextUnitOfWork=e,o.wipRoot=e,o.deletions=[],o.hookIndex=0,o.effects=[],requestIdleCallback(N)},T=(e,t)=>(o.wipRoot={dom:t,props:{children:[e]},alternate:o.currentRoot},o.nextUnitOfWork=o.wipRoot,o.deletions=[],F(o.wipRoot),o.wipRoot),v=(e,t)=>_(((e,t)=>"function"==typeof t?t(e):t),e,t),_=(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,F(o.wipRoot)}]},S=(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++},U=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 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},O=(e,t)=>C((()=>e),t),L=()=>{const e=new URLSearchParams(window.location.search),t={};for(let[o,n]of e.entries())t[o]=n;return t},X=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}}},q=X({location:"/",params:{},query:{},navigate:e=>{},route:null}),A=(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=A(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]=v(window.location.pathname);S((()=>{const e=()=>n(window.location.pathname);return window.addEventListener("popstate",e),()=>window.removeEventListener("popstate",e)}),[]);const r=A(e,o)||{},i=L(),s={location:o,params:r.params||{},query:i,navigate:e=>{window.history.pushState({},"",e),n(e)},route:r.route};return a(q.Provider,{value:s},u({children:t}))},Y=()=>q.useContext(),j=()=>{const{route:e,params:t,query:o,location:n}=Y();return e&&e.component?a(e.component,{key:n,params:t,query:o}):null},P=({to:e,...t})=>{const{navigate:o}=Y();return a("a",{href:e,onClick:t=>{t.preventDefault(),o(e)},...t},t.children)};var W={createElement:a,render:T,init:(e,t="__ryunix")=>{o.containerRoot=document.getElementById(t);return T(e,o.containerRoot)},Fragment:u,Hooks:Object.freeze({__proto__:null,Children:j,NavLink:P,RouterProvider:M,createContext:X,useCallback:O,useEffect:S,useMemo:C,useQuery:L,useRef:U,useRouter:Y,useStore:v})};window.Ryunix=W,e.Children=j,e.Image=({src:e,...t})=>{const o="true"===t.optimization?k({src:e,props:t}):e;return a("img",{src:o,props:t},null)},e.NavLink=P,e.RouterProvider=M,e.createContext=X,e.default=W,e.useCallback=O,e.useEffect=S,e.useMemo=C,e.useQuery=L,e.useRef=U,e.useRouter=Y,e.useStore=v,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"}),a=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()}),l=(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=>{const t=Array.isArray(e.children)?e.children:[e.children];return l(r.RYUNIX_FRAGMENT,{},...t)},p=e=>e.startsWith("on"),d=e=>e!==i.children&&!p(e),h=(e,t)=>o=>e[o]!==t[o],f=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=>f(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(f(o)).forEach((t=>{e[t]=""})),Object.keys(o).filter(d).filter(h(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(h(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===a.PLACEMENT)null!=e.dom&&o.appendChild(e.dom),m(e);else if(e.effectTag===a.UPDATE)y(e),null!=e.dom&&E(e.dom,e.alternate.props,e.props),m(e);else if(e.effectTag===a.DELETION)return y(e),void x(e,o);b(e.child),b(e.sibling)},x=(e,t)=>{if(e.dom)t.removeChild(e.dom);else{let o=e.child;for(;o;)x(o,t),o=o.sibling}},R=(e,t)=>{let n,r=0,i=e.alternate&&e.alternate.child;for(;r<t.length||null!=i;){const s=t[r];let l;const c=i&&s&&s.type==i.type;c&&(l={type:i.type,props:s.props,dom:i.dom,parent:e,alternate:i,effectTag:a.UPDATE}),s&&!c&&(l={type:s.type,props:s.props,dom:null,parent:e,alternate:null,effectTag:a.PLACEMENT}),i&&!c&&(i.effectTag=a.DELETION,o.deletions.push(i)),i&&(i=i.sibling),0===r?e.child=l:s&&(n.sibling=l),n=l,r++}},g=e=>{const t=Array.isArray(e.props.children)?e.props.children.flat():[e.props.children];e.type===r.RYUNIX_FRAGMENT||e.dom||(e.dom=(e=>{if(e.type===r.RYUNIX_FRAGMENT)return null;const t=e.type==r.TEXT_ELEMENT?document.createTextNode(""):document.createElement(e.type);return E(t,{},e.props),t})(e)),R(e,t)},k=({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("height",t.height),t.quality&&o.set("quality",t.quality);const r=t.extension?`@${t.extension}`:"";return n?(()=>{const{hostname:e}=window.location;return"localhost"===e||"127.0.0.1"===e})()?(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()}`},N=e=>{let t=!1;for(;o.nextUnitOfWork&&!t;)o.nextUnitOfWork=I(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(N)};requestIdleCallback(N);const I=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}},F=e=>{o.nextUnitOfWork=e,o.wipRoot=e,o.deletions=[],o.hookIndex=0,o.effects=[],requestIdleCallback(N)},v=(e,t)=>(o.wipRoot={dom:t,props:{children:[e]},alternate:o.currentRoot},o.nextUnitOfWork=o.wipRoot,o.deletions=[],F(o.wipRoot),o.wipRoot),T=(e,t)=>_(((e,t)=>"function"==typeof t?t(e):t),e,t),_=(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,F(o.wipRoot)}]},S=(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++},U=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 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},L=(e,t)=>C((()=>e),t),O=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=()=>{const e=new URLSearchParams(window.location.search),t={};for(let[o,n]of e.entries())t[o]=n;return t},q=()=>window.location.hash,A=()=>({pathname:window.location.pathname,search:window.location.search,hash:window.location.hash}),M=O({location:"/",params:{},query:{},hash:"",navigate:e=>{},route:null}),Y=(e,t)=>{const o=t.split("?")[0].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=Y(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},j=({routes:e,children:t})=>{const[o,n]=T(A());S((()=>{const e=()=>n(A());return window.addEventListener("popstate",e),window.addEventListener("hashchange",e),()=>{window.removeEventListener("popstate",e),window.removeEventListener("hashchange",e)}}),[]);const r=Y(e,o.pathname)||{},i=X(),s={location:o,params:r.params||{},query:i,hash:o.hash,navigate:e=>{window.history.pushState({},"",e),n(A())},route:r.route};return l(M.Provider,{value:s},u({children:t}))},P=()=>M.useContext(),W=()=>{const{route:e,params:t,query:o,hash:n,location:r}=P();return e&&e.component?(S((()=>{if(n){const e=n.slice(1),t=document.getElementById(e);t&&t.scrollIntoView({behavior:"smooth"})}}),[n]),l(e.component,{key:r.pathname,params:t,query:o,hash:n})):null},$=({to:e,...t})=>{const{navigate:o}=P();return l("a",{href:e,onClick:t=>{t.preventDefault(),o(e)},...t},t.children)};var D={createElement:l,render:v,init:(e,t="__ryunix")=>{o.containerRoot=document.getElementById(t);return v(e,o.containerRoot)},Fragment:u,Hooks:Object.freeze({__proto__:null,Children:W,NavLink:$,RouterProvider:j,createContext:O,useCallback:L,useEffect:S,useHash:q,useMemo:C,useQuery:X,useRef:U,useRouter:P,useStore:T})};window.Ryunix=D,e.Children=W,e.Image=({src:e,...t})=>{const o={src:"true"===t.optimization?k({src:e,props:t}):e,...t};return l("img",o,null)},e.NavLink=$,e.RouterProvider=j,e.createContext=O,e.default=D,e.useCallback=L,e.useEffect=S,e.useHash=q,e.useMemo=C,e.useQuery=X,e.useRef=U,e.useRouter=P,e.useStore=T,Object.defineProperty(e,"__esModule",{value:!0})}));

package/package.json

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