@unsetsoft/ryunixjs 1.1.38 → 1.2.0-canary.1

package/dist/Ryunix.js

@@ -640,6 +640,134 @@
     return renderProcess
   };
 
+  /**
+   * Renders a Ryunix component tree to an HTML string (SSR/SSG), con soporte para obtención de datos.
+   * Si el componente raíz exporta una función estática `fetchSSRData` o `fetchSSGData`, esta será ejecutada antes del renderizado
+   * y sus datos serán inyectados como props.
+   *
+   * @param {Object} element - El elemento raíz a renderizar.
+   * @param {Object} [options] - Contexto opcional para SSR/SSG (ej: route, params, props).
+   * @returns {Promise<Object>} { html, head, data } - HTML renderizado, metadatos y datos obtenidos.
+   *
+   * Uso SSR con datos:
+   *   App.fetchSSRData = async (ctx) => ({ user: await fetchUser(ctx.route) })
+   *   const { html, head, data } = await renderToString(<App />, { route: '/about' })
+   *
+   * Uso SSG con datos:
+   *   App.fetchSSGData = async (ctx) => ({ posts: await fetchPosts() })
+   *   const { html, head, data } = await renderToString(<App />, { route: '/blog' })
+   */
+  async function renderToString(element, options = {}) {
+    // Soporte para obtención de datos SSR/SSG
+    let data = undefined;
+    let rootType = element && element.type;
+    // Si no se pasa location en ssrContext, usar '/'
+    if (options && !options.location) {
+      options.location = '/';
+    }
+    if (rootType && typeof rootType === 'function') {
+      if (typeof rootType.fetchSSRData === 'function' && options.ssr !== false) {
+        data = await rootType.fetchSSRData(options);
+      } else if (
+        typeof rootType.fetchSSGData === 'function' &&
+        options.ssg !== false
+      ) {
+        data = await rootType.fetchSSGData(options);
+      }
+    }
+    // Inyectar los datos como props
+    if (data) {
+      element = { ...element, props: { ...element.props, ...data } };
+    }
+    // Temporary global context for SSR/SSG metadata collection
+    const ssrContext = { head: [] };
+    const prevContext = globalThis.__RYUNIX_SSR_CONTEXT__;
+    globalThis.__RYUNIX_SSR_CONTEXT__ = ssrContext;
+
+    function renderNode(node) {
+      if (typeof node === 'string' || typeof node === 'number') {
+        return String(node)
+      }
+      if (!node || typeof node !== 'object') return ''
+      if (node.type === 'FRAGMENT' || node.type === undefined) {
+        return (Array.isArray(node.children) ? node.children : [node.children])
+          .map(renderNode)
+          .join('')
+      }
+      if (typeof node.type === 'function') {
+        const rendered = node.type({ ...node.props, ...options });
+        return renderNode(rendered)
+      }
+      let html = `<${node.type}`;
+      if (node.props) {
+        for (const [key, value] of Object.entries(node.props)) {
+          if (key === 'children' || value == null || typeof value === 'object')
+            continue
+          html += ` ${key}="${String(value)}"`;
+        }
+      }
+      html += '>';
+      if (node.props && node.props.children) {
+        html += Array.isArray(node.props.children)
+          ? node.props.children.map(renderNode).join('')
+          : renderNode(node.props.children);
+      }
+      html += `</${node.type}>`;
+      return html
+    }
+
+    const html = renderNode(element);
+    // Restore previous context to avoid leaking between renders
+    globalThis.__RYUNIX_SSR_CONTEXT__ = prevContext;
+    return { html, head: ssrContext.head.join('\n'), data }
+  }
+
+  /**
+   * Helper para asociar una función de obtención de datos SSR a un componente Ryunix.
+   * @param {Function} Component - Componente Ryunix.
+   * @param {Function} fetchFn - Función async (ctx) => datos.
+   * @returns {Function} El mismo componente, con fetchSSRData asignado.
+   * @example
+   *   export default withSSRData(App, async (ctx) => ({ user: await fetchUser(ctx.route) }))
+   */
+  function withSSRData(Component, fetchFn) {
+    Component.fetchSSRData = fetchFn;
+    return Component
+  }
+
+  /**
+   * Helper para asociar una función de obtención de datos SSG a un componente Ryunix.
+   * @param {Function} Component - Componente Ryunix.
+   * @param {Function} fetchFn - Función async (ctx) => datos.
+   * @returns {Function} El mismo componente, con fetchSSGData asignado.
+   * @example
+   *   export default withSSGData(App, async (ctx) => ({ posts: await fetchPosts() }))
+   */
+  function withSSGData(Component, fetchFn) {
+    Component.fetchSSGData = fetchFn;
+    return Component
+  }
+
+  /**
+   * Hidrata una aplicación Ryunix renderizada por SSR/SSG, enlazando eventos y estado sobre el DOM existente.
+   * @function hydrate
+   * @param {Object|HTMLElement} element - El elemento raíz a hidratar.
+   * @param {string|HTMLElement} [root='__ryunix'] - El contenedor raíz (id o elemento DOM).
+   * @description Busca el contenedor en el DOM y reutiliza el HTML existente, enlazando el árbol de componentes Ryunix.
+   * @example
+   *   // En el cliente, tras recibir HTML SSR/SSG:
+   *   import { hydrate } from 'ryunix';
+   *   hydrate(<App />, '__ryunix');
+   */
+  function hydrate(MainElement, root = '__ryunix') {
+    let container =
+      typeof root === 'string' ? document.getElementById(root) : root;
+    if (!container) throw new Error('No se encontró el contenedor para hidratar')
+    // Reutiliza el DOM existente y conecta el árbol Ryunix
+    // (En este ejemplo, simplemente delegamos a render, pero en el futuro se puede optimizar para diff/hidratación real)
+    return render(MainElement, container)
+  }
+
   /**
    * @description The function creates a state.
    * @param initial - The initial value of the state for the hook.
@@ -714,16 +842,18 @@
   };
 
   /**
-   * This is a function that creates a hook for managing side effects in Ryunix components.
-   * @param effect - The effect function that will be executed after the component has rendered or when
-   * the dependencies have changed. It can perform side effects such as fetching data, updating the DOM,
-   * or subscribing to events.
-   * @param deps - An array of dependencies that the effect depends on. If any of the dependencies change
-   * between renders, the effect will be re-run. If the array is empty, the effect will only run once on
-   * mount and never again.
+   * useEffect seguro para SSR/SSG: no ejecuta efectos en el servidor.
+   * @param effect - Función de efecto.
+   * @param deps - Dependencias.
    */
 
   const useEffect = (callback, deps) => {
+    // No ejecutar efectos en SSR/SSG
+    if (typeof window === 'undefined') {
+      vars.hookIndex++;
+      return
+    }
+
     const oldHook =
       vars.wipFiber.alternate &&
       vars.wipFiber.alternate.hooks &&
@@ -856,7 +986,9 @@
     }
   };
 
+  // Proteger hooks que usan window/document
   const useQuery = () => {
+    if (typeof window === 'undefined') return {}
     const searchParams = new URLSearchParams(window.location.search);
     const query = {};
     for (let [key, value] of searchParams.entries()) {
@@ -866,6 +998,7 @@
   };
 
   const useHash = () => {
+    if (typeof window === 'undefined') return ''
     const [hash, setHash] = useStore(window.location.hash);
     useEffect(() => {
       const onHashChange = () => {
@@ -933,31 +1066,46 @@
     return notFound
   };
 
-  const RouterProvider = ({ routes, children }) => {
-    const [location, setLocation] = useStore(window.location.pathname);
-
+  /**
+   * RouterProvider universal: acepta contexto externo (SSR/SSG) o usa window.location (SPA).
+   * @param {Object} props - { routes, children, ssrContext }
+   * @example
+   *   // SSR/SSG:
+   *   <RouterProvider routes={routes} ssrContext={{ location: '/about', query: { q: 'x' } }}>
+   *     ...
+   *   </RouterProvider>
+   */
+  const RouterProvider = ({ routes, children, ssrContext }) => {
+    // Si hay contexto externo (SSR/SSG), úsalo
+    const isSSR = typeof window === 'undefined' || !!ssrContext;
+    const location = isSSR
+      ? (ssrContext && ssrContext.location) || '/'
+      : window.location.pathname;
+    const [loc, setLoc] = useStore(location);
+
+    // SPA: escucha cambios de ruta
     useEffect(() => {
-      const update = () => setLocation(window.location.pathname);
-
+      if (isSSR) return
+      const update = () => setLoc(window.location.pathname);
       window.addEventListener('popstate', update);
       window.addEventListener('hashchange', update);
       return () => {
         window.removeEventListener('popstate', update);
         window.removeEventListener('hashchange', update);
       }
-    }, [location]);
+    }, [loc]);
 
     const navigate = (path) => {
+      if (isSSR) return
       window.history.pushState({}, '', path);
-      setLocation(path);
+      setLoc(path);
     };
 
-    const currentRouteData = findRoute(routes, location) || {};
-
-    const query = useQuery();
+    const currentRouteData = findRoute(routes, loc) || {};
+    const query = isSSR ? (ssrContext && ssrContext.query) || {} : useQuery();
 
     const contextValue = {
-      location,
+      location: loc,
       params: currentRouteData.params || {},
       query,
       navigate,
@@ -967,12 +1115,16 @@
     return createElement(
       RouterContext.Provider,
       { value: contextValue },
-      Fragment({
-        children: children,
-      }),
+      Fragment({ children }),
     )
   };
 
+  /**
+   * Universal useRouter: obtiene el contexto de ruta, compatible con SSR/SSG y SPA.
+   * @returns {Object} { location, params, query, navigate, route }
+   * @example
+   *   const { location, params, query } = useRouter();
+   */
   const useRouter = () => {
     return RouterContext.useContext('ryunix.navigation')
   };
@@ -1036,17 +1188,93 @@
   };
 
   /**
-   * useMetadata: Hook to dynamically manage SEO metadata in the <head>.
-   * Supports title with template, description, robots, robots, canonical, OpenGraph, Twitter, and any standard meta.
-   * @param {Object} tags - Object with metatags to insert/update.
-   * @param {Object} options - Optional. Allows to define template and default for the title.
-
+   * useMetadata: Hook para gestionar dinámicamente metadatos SEO y recursos en <head>.
+   * Ahora soporta title, meta, link, script, style y bloques personalizados en SSR/SSG.
+   *
+   * @param {Object} tags - Metadatos y recursos a insertar/actualizar.
+   *   Soporta: title, canonical, meta, og:*, twitter:*, script, style, custom.
+   *   - script/style/custom pueden ser string o array de strings (contenido o etiquetas completas).
+   * @param {Object} options - Opcional. Permite definir template y default para el título.
+   *
+   * Ejemplo avanzado SSR/SSG:
+   *   useMetadata({
+   *     title: 'Mi página',
+   *     description: 'Desc',
+   *     script: [
+   *       '<script src="/analytics.js"></script>',
+   *       '<script>console.log("hi")</script>'
+   *     ],
+   *     style: '<style>body{background:#000}</style>',
+   *     custom: '<!-- Bloque personalizado -->'
+   *   })
    */
-
   const useMetadata = (tags = {}, options = {}) => {
+    // SSR/SSG: collect metadata in global context if available
+    const ssrContext =
+      typeof globalThis !== 'undefined' && globalThis.__RYUNIX_SSR_CONTEXT__;
+    if (ssrContext) {
+      let finalTitle = '';
+      let template = undefined;
+      let defaultTitle = 'Ryunix App';
+      if (options.title && typeof options.title === 'object') {
+        template = options.title.template;
+        if (typeof options.title.prefix === 'string') {
+          defaultTitle = options.title.prefix;
+        }
+      }
+      let pageTitle = tags.pageTitle || tags.title;
+      if (typeof pageTitle === 'string') {
+        if (pageTitle.trim() === '') {
+          finalTitle = defaultTitle;
+        } else if (template && template.includes('%s')) {
+          finalTitle = template.replace('%s', pageTitle);
+        } else {
+          finalTitle = pageTitle;
+        }
+      } else if (typeof pageTitle === 'object' && pageTitle !== null) {
+        finalTitle = defaultTitle;
+      } else if (!pageTitle) {
+        finalTitle = defaultTitle;
+      }
+      if (finalTitle) {
+        ssrContext.head.push(`<title>${finalTitle}</title>`);
+      }
+      if (tags.canonical) {
+        ssrContext.head.push(`<link rel="canonical" href="${tags.canonical}" />`);
+      }
+      Object.entries(tags).forEach(([key, value]) => {
+        if (key === 'title' || key === 'pageTitle' || key === 'canonical') return
+        if (key.startsWith('og:') || key.startsWith('twitter:')) {
+          ssrContext.head.push(`<meta property="${key}" content="${value}" />`);
+        } else {
+          ssrContext.head.push(`<meta name="${key}" content="${value}" />`);
+        }
+      });
+      // Soporte para script/style/custom
+      if (tags.script) {
+  (Array.isArray(tags.script) ? tags.script : [tags.script]).forEach(
+          (s) => {
+            ssrContext.head.push(s);
+          },
+        );
+      }
+      if (tags.style) {
+  (Array.isArray(tags.style) ? tags.style : [tags.style]).forEach((s) => {
+          ssrContext.head.push(s);
+        });
+      }
+      if (tags.custom) {
+  (Array.isArray(tags.custom) ? tags.custom : [tags.custom]).forEach(
+          (c) => {
+            ssrContext.head.push(c);
+          },
+        );
+      }
+      return
+    }
+    // SPA: fallback to DOM logic
     useEffect(() => {
       if (typeof document === 'undefined') return // SSR safe
-
       let finalTitle = '';
       let template = undefined;
       let defaultTitle = 'Ryunix App';
@@ -1056,10 +1284,7 @@
           defaultTitle = options.title.prefix;
         }
       }
-
-      // pageTitle tiene prioridad sobre title
       let pageTitle = tags.pageTitle || tags.title;
-
       if (typeof pageTitle === 'string') {
         if (pageTitle.trim() === '') {
           finalTitle = defaultTitle;
@@ -1074,7 +1299,6 @@
         finalTitle = defaultTitle;
       }
       document.title = finalTitle;
-      // Canonical
       if (tags.canonical) {
         let link = document.querySelector('link[rel="canonical"]');
         if (!link) {
@@ -1084,7 +1308,6 @@
         }
         link.setAttribute('href', tags.canonical);
       }
-      // Meta tags
       Object.entries(tags).forEach(([key, value]) => {
         if (key === 'title' || key === 'pageTitle' || key === 'canonical') return
         let selector = `meta[name='${key}']`;
@@ -1129,6 +1352,10 @@
     init,
     Fragment,
     Hooks,
+    hydrate,
+    renderToString,
+    withSSRData,
+    withSSGData,
   };
 
   window.Ryunix = Ryunix;

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),h=(e,t)=>o=>e[o]!==t[o],f=e=>t=>!(t in e),y=e=>{e&&(e.hooks&&e.hooks.length>0&&e.hooks.filter(e=>e.type===r.RYUNIX_EFFECT&&typeof e.cancel===i.function).forEach(e=>{e.cancel()}),e.child&&y(e.child),e.sibling&&y(e.sibling))},m=e=>{if(e.hooks&&0!==e.hooks.length)for(let t=0;t<e.hooks.length;t++){const o=e.hooks[t];if(o.type===r.RYUNIX_EFFECT&&typeof o.effect===i.function&&null!==o.effect){typeof o.cancel===i.function&&o.cancel();const e=o.effect();o.cancel="function"==typeof e?e:void 0}}},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)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+/).filter(Boolean)||[]),e.classList.add(...o["ryunix-class"].split(/\s+/).filter(Boolean))}else if(n===s.className){if(""===o.className)throw new Error("className cannot be empty.");t.className&&e.classList.remove(...t.className.split(/\s+/).filter(Boolean)||[]),e.classList.add(...o.className.split(/\s+/).filter(Boolean))}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])})},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)(e=>{e.hooks&&e.hooks.length>0&&e.hooks.filter(e=>e.type===r.RYUNIX_EFFECT&&e.cancel).forEach(e=>{e.cancel()})})(e),null!=e.dom&&E(e.dom,e.alternate.props,e.props),m(e);else if(e.effectTag===l.DELETION)return y(e),void g(e,o);w(e.child),w(e.sibling)},g=(e,t)=>{if(e.dom)t.removeChild(e.dom);else{let o=e.child;for(;o;)g(o,t),o=o.sibling}},x=(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,hooks:i.hooks}),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++}},k=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)),x(e,t)},R=({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),x(e,t)})(e):k(e),e.child)return e.child;let t=e;for(;t;){if(t.sibling)return t.sibling;t=t.parent}},v=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=[],v(o.wipRoot),o.wipRoot),F=(e,t)=>_((e,t)=>"function"==typeof t?t(e):t,e,t),_=(e,t,n)=>{const s=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[o.hookIndex],l={hookID:o.hookIndex,type:r.RYUNIX_STORE,state:s?s.state:n?n(t):t,queue:s&&Array.isArray(s.queue)?s.queue.slice():[]};s&&Array.isArray(s.queue)&&s.queue.forEach(t=>{l.state=e(l.state,t)});return l.queue.forEach(t=>{l.state=e(l.state,t)}),o.wipFiber.hooks[o.hookIndex]=l,o.hookIndex++,[l.state,e=>{l.queue.push(typeof e===i.function?e:t=>e),o.wipRoot={dom:o.currentRoot.dom,props:o.currentRoot.props,alternate:o.currentRoot},o.deletions=[],o.hookIndex=0,v(o.wipRoot)}]},S=(e,t)=>{const n=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[o.hookIndex],i=(s=n?.deps,l=t,!s||!l||s.length!==l.length||s.some((e,t)=>e!==l[t]));var s,l;const a={hookID:o.hookIndex,type:r.RYUNIX_EFFECT,deps:t,effect:i?e:null,cancel:n?.cancel};o.wipFiber.hooks[o.hookIndex]=a,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=(e=r.RYUNIX_CONTEXT,t={})=>{const n=({children:e})=>u({children:e});n._contextId=e;return{Provider:n,useContext:(e=r.RYUNIX_CONTEXT)=>{let n=o.wipFiber;for(;n;){if(n.type&&n.type._contextId===e)return n.props&&"value"in n.props?n.props.value:void 0;n=n.parent}return t}}},A=()=>{const e=new URLSearchParams(window.location.search),t={};for(let[o,n]of e.entries())t[o]=n;return t},X=()=>{const[e,t]=F(window.location.hash);return S(()=>{const e=()=>{t(window.location.hash)};return window.addEventListener("hashchange",e),()=>window.removeEventListener("hashchange",e)},[]),e},q=L("ryunix.navigation",{location:"/",params:{},query:{},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},M=({routes:e,children:t})=>{const[o,n]=F(window.location.pathname);S(()=>{const e=()=>n(window.location.pathname);return window.addEventListener("popstate",e),window.addEventListener("hashchange",e),()=>{window.removeEventListener("popstate",e),window.removeEventListener("hashchange",e)}},[o]);const r=Y(e,o)||{},i=A(),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}))},j=()=>q.useContext("ryunix.navigation"),W=()=>{const{route:e,params:t,query:o,location:n}=j();if(!e||!e.component)return null;const r=X();return S(()=>{if(r){const e=r.slice(1),t=document.getElementById(e);t&&t.scrollIntoView({block:"start",behavior:"smooth"})}},[r]),a(e.component,{key:n,params:t,query:o,hash:r})},P=({to:e,exact:t=!1,...o})=>{const{location:n,navigate:r}=j(),i=t?n===e:n.startsWith(e),s=o["ryunix-class"]?"ryunix-class":"className",l="function"==typeof(c=o["ryunix-class"]||o.className)?c({isActive:i}):c||"";var c;const{"ryunix-class":u,className:p,...d}=o;return a("a",{href:e,onClick:t=>{t.preventDefault(),r(e)},[s]:l,...d},o.children)},$=(e={},t={})=>{S(()=>{if("undefined"==typeof document)return;let o,n="",r="Ryunix App";t.title&&"object"==typeof t.title&&(o=t.title.template,"string"==typeof t.title.prefix&&(r=t.title.prefix));let i=e.pageTitle||e.title;if("string"==typeof i?n=""===i.trim()?r:o&&o.includes("%s")?o.replace("%s",i):i:"object"==typeof i&&null!==i?n=r:i||(n=r),document.title=n,e.canonical){let t=document.querySelector('link[rel="canonical"]');t||(t=document.createElement("link"),t.setAttribute("rel","canonical"),document.head.appendChild(t)),t.setAttribute("href",e.canonical)}Object.entries(e).forEach(([e,t])=>{if("title"===e||"pageTitle"===e||"canonical"===e)return;let o=`meta[name='${e}']`;(e.startsWith("og:")||e.startsWith("twitter:"))&&(o=`meta[property='${e}']`);let n=document.head.querySelector(o);n||(n=document.createElement("meta"),e.startsWith("og:")||e.startsWith("twitter:")?n.setAttribute("property",e):n.setAttribute("name",e),document.head.appendChild(n)),n.setAttribute("content",t)})},[JSON.stringify(e),JSON.stringify(t)])};var D={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:W,NavLink:P,RouterProvider:M,createContext:L,useCallback:O,useEffect:S,useHash:X,useMemo:C,useMetadata:$,useQuery:A,useRef:U,useRouter:j,useStore:F})};window.Ryunix=D,e.Children=W,e.Image=({src:e,...t})=>{const o={src:"true"===t.optimization?R({src:e,props:t}):e,...t};return a("img",o,null)},e.NavLink=P,e.RouterProvider=M,e.createContext=L,e.default=D,e.useCallback=O,e.useEffect=S,e.useHash=X,e.useMemo=C,e.useMetadata=$,e.useQuery=A,e.useRef=U,e.useRouter=j,e.useStore=F,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),f=(e,t)=>o=>e[o]!==t[o],h=e=>t=>!(t in e),y=e=>{e&&(e.hooks&&e.hooks.length>0&&e.hooks.filter(e=>e.type===r.RYUNIX_EFFECT&&typeof e.cancel===i.function).forEach(e=>{e.cancel()}),e.child&&y(e.child),e.sibling&&y(e.sibling))},m=e=>{if(e.hooks&&0!==e.hooks.length)for(let t=0;t<e.hooks.length;t++){const o=e.hooks[t];if(o.type===r.RYUNIX_EFFECT&&typeof o.effect===i.function&&null!==o.effect){typeof o.cancel===i.function&&o.cancel();const e=o.effect();o.cancel="function"==typeof e?e:void 0}}},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+/).filter(Boolean)||[]),e.classList.add(...o["ryunix-class"].split(/\s+/).filter(Boolean))}else if(n===s.className){if(""===o.className)throw new Error("className cannot be empty.");t.className&&e.classList.remove(...t.className.split(/\s+/).filter(Boolean)||[]),e.classList.add(...o.className.split(/\s+/).filter(Boolean))}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]};`,"")},g=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)(e=>{e.hooks&&e.hooks.length>0&&e.hooks.filter(e=>e.type===r.RYUNIX_EFFECT&&e.cancel).forEach(e=>{e.cancel()})})(e),null!=e.dom&&E(e.dom,e.alternate.props,e.props),m(e);else if(e.effectTag===a.DELETION)return y(e),void b(e,o);g(e.child),g(e.sibling)},b=(e,t)=>{if(e.dom)t.removeChild(e.dom);else{let o=e.child;for(;o;)b(o,t),o=o.sibling}},x=(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,hooks:i.hooks}),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++}},R=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)),x(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=S(o.nextUnitOfWork),t=e.timeRemaining()<1;!o.nextUnitOfWork&&o.wipRoot&&(o.deletions.forEach(g),g(o.wipRoot.child),o.currentRoot=o.wipRoot,o.wipRoot=null),requestIdleCallback(N)};requestIdleCallback(N);const S=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),x(e,t)})(e):R(e),e.child)return e.child;let t=e;for(;t;){if(t.sibling)return t.sibling;t=t.parent}},_=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=[],_(o.wipRoot),o.wipRoot);const I=(e,t)=>v((e,t)=>"function"==typeof t?t(e):t,e,t),v=(e,t,n)=>{const s=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[o.hookIndex],a={hookID:o.hookIndex,type:r.RYUNIX_STORE,state:s?s.state:n?n(t):t,queue:s&&Array.isArray(s.queue)?s.queue.slice():[]};s&&Array.isArray(s.queue)&&s.queue.forEach(t=>{a.state=e(a.state,t)});return a.queue.forEach(t=>{a.state=e(a.state,t)}),o.wipFiber.hooks[o.hookIndex]=a,o.hookIndex++,[a.state,e=>{a.queue.push(typeof e===i.function?e:t=>e),o.wipRoot={dom:o.currentRoot.dom,props:o.currentRoot.props,alternate:o.currentRoot},o.deletions=[],o.hookIndex=0,_(o.wipRoot)}]},F=(e,t)=>{if("undefined"==typeof window)return void o.hookIndex++;const n=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[o.hookIndex],i=(s=n?.deps,a=t,!s||!a||s.length!==a.length||s.some((e,t)=>e!==a[t]));var s,a;const l={hookID:o.hookIndex,type:r.RYUNIX_EFFECT,deps:t,effect:i?e:null,cancel:n?.cancel};o.wipFiber.hooks[o.hookIndex]=l,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},A=(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)=>A(()=>e,t),C=(e=r.RYUNIX_CONTEXT,t={})=>{const n=({children:e})=>u({children:e});n._contextId=e;return{Provider:n,useContext:(e=r.RYUNIX_CONTEXT)=>{let n=o.wipFiber;for(;n;){if(n.type&&n.type._contextId===e)return n.props&&"value"in n.props?n.props.value:void 0;n=n.parent}return t}}},X=()=>{if("undefined"==typeof window)return{};const e=new URLSearchParams(window.location.search),t={};for(let[o,n]of e.entries())t[o]=n;return t},L=()=>{if("undefined"==typeof window)return"";const[e,t]=I(window.location.hash);return F(()=>{const e=()=>{t(window.location.hash)};return window.addEventListener("hashchange",e),()=>window.removeEventListener("hashchange",e)},[]),e},j=C("ryunix.navigation",{location:"/",params:{},query:{},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},q=({routes:e,children:t,ssrContext:o})=>{const n="undefined"==typeof window||!!o,r=n?o&&o.location||"/":window.location.pathname,[i,s]=I(r);F(()=>{if(n)return;const e=()=>s(window.location.pathname);return window.addEventListener("popstate",e),window.addEventListener("hashchange",e),()=>{window.removeEventListener("popstate",e),window.removeEventListener("hashchange",e)}},[i]);const a=Y(e,i)||{},c=n?o&&o.query||{}:X(),p={location:i,params:a.params||{},query:c,navigate:e=>{n||(window.history.pushState({},"",e),s(e))},route:a.route};return l(j.Provider,{value:p},u({children:t}))},$=()=>j.useContext("ryunix.navigation"),M=()=>{const{route:e,params:t,query:o,location:n}=$();if(!e||!e.component)return null;const r=L();return F(()=>{if(r){const e=r.slice(1),t=document.getElementById(e);t&&t.scrollIntoView({block:"start",behavior:"smooth"})}},[r]),l(e.component,{key:n,params:t,query:o,hash:r})},D=({to:e,exact:t=!1,...o})=>{const{location:n,navigate:r}=$(),i=t?n===e:n.startsWith(e),s=o["ryunix-class"]?"ryunix-class":"className",a="function"==typeof(c=o["ryunix-class"]||o.className)?c({isActive:i}):c||"";var c;const{"ryunix-class":u,className:p,...d}=o;return l("a",{href:e,onClick:t=>{t.preventDefault(),r(e)},[s]:a,...d},o.children)},W=(e={},t={})=>{const o="undefined"!=typeof globalThis&&globalThis.__RYUNIX_SSR_CONTEXT__;if(o){let n,r="",i="Ryunix App";t.title&&"object"==typeof t.title&&(n=t.title.template,"string"==typeof t.title.prefix&&(i=t.title.prefix));let s=e.pageTitle||e.title;return"string"==typeof s?r=""===s.trim()?i:n&&n.includes("%s")?n.replace("%s",s):s:"object"==typeof s&&null!==s?r=i:s||(r=i),r&&o.head.push(`<title>${r}</title>`),e.canonical&&o.head.push(`<link rel="canonical" href="${e.canonical}" />`),Object.entries(e).forEach(([e,t])=>{"title"!==e&&"pageTitle"!==e&&"canonical"!==e&&(e.startsWith("og:")||e.startsWith("twitter:")?o.head.push(`<meta property="${e}" content="${t}" />`):o.head.push(`<meta name="${e}" content="${t}" />`))}),e.script&&(Array.isArray(e.script)?e.script:[e.script]).forEach(e=>{o.head.push(e)}),e.style&&(Array.isArray(e.style)?e.style:[e.style]).forEach(e=>{o.head.push(e)}),void(e.custom&&(Array.isArray(e.custom)?e.custom:[e.custom]).forEach(e=>{o.head.push(e)}))}F(()=>{if("undefined"==typeof document)return;let o,n="",r="Ryunix App";t.title&&"object"==typeof t.title&&(o=t.title.template,"string"==typeof t.title.prefix&&(r=t.title.prefix));let i=e.pageTitle||e.title;if("string"==typeof i?n=""===i.trim()?r:o&&o.includes("%s")?o.replace("%s",i):i:"object"==typeof i&&null!==i?n=r:i||(n=r),document.title=n,e.canonical){let t=document.querySelector('link[rel="canonical"]');t||(t=document.createElement("link"),t.setAttribute("rel","canonical"),document.head.appendChild(t)),t.setAttribute("href",e.canonical)}Object.entries(e).forEach(([e,t])=>{if("title"===e||"pageTitle"===e||"canonical"===e)return;let o=`meta[name='${e}']`;(e.startsWith("og:")||e.startsWith("twitter:"))&&(o=`meta[property='${e}']`);let n=document.head.querySelector(o);n||(n=document.createElement("meta"),e.startsWith("og:")||e.startsWith("twitter:")?n.setAttribute("property",e):n.setAttribute("name",e),document.head.appendChild(n)),n.setAttribute("content",t)})},[JSON.stringify(e),JSON.stringify(t)])};var P={createElement:l,render:T,init:(e,t="__ryunix")=>{o.containerRoot=document.getElementById(t);return T(e,o.containerRoot)},Fragment:u,Hooks:Object.freeze({__proto__:null,Children:M,NavLink:D,RouterProvider:q,createContext:C,useCallback:O,useEffect:F,useHash:L,useMemo:A,useMetadata:W,useQuery:X,useRef:U,useRouter:$,useStore:I}),hydrate:function(e,t="__ryunix"){let o="string"==typeof t?document.getElementById(t):t;if(!o)throw new Error("No se encontró el contenedor para hidratar");return T(e,o)},renderToString:async function(e,t={}){let o,n=e&&e.type;t&&!t.location&&(t.location="/"),n&&"function"==typeof n&&("function"==typeof n.fetchSSRData&&!1!==t.ssr?o=await n.fetchSSRData(t):"function"==typeof n.fetchSSGData&&!1!==t.ssg&&(o=await n.fetchSSGData(t))),o&&(e={...e,props:{...e.props,...o}});const r={head:[]},i=globalThis.__RYUNIX_SSR_CONTEXT__;globalThis.__RYUNIX_SSR_CONTEXT__=r;const s=function e(o){if("string"==typeof o||"number"==typeof o)return String(o);if(!o||"object"!=typeof o)return"";if("FRAGMENT"===o.type||void 0===o.type)return(Array.isArray(o.children)?o.children:[o.children]).map(e).join("");if("function"==typeof o.type){return e(o.type({...o.props,...t}))}let n=`<${o.type}`;if(o.props)for(const[e,t]of Object.entries(o.props))"children"!==e&&null!=t&&"object"!=typeof t&&(n+=` ${e}="${String(t)}"`);return n+=">",o.props&&o.props.children&&(n+=Array.isArray(o.props.children)?o.props.children.map(e).join(""):e(o.props.children)),n+=`</${o.type}>`,n}(e);return globalThis.__RYUNIX_SSR_CONTEXT__=i,{html:s,head:r.head.join("\n"),data:o}},withSSRData:function(e,t){return e.fetchSSRData=t,e},withSSGData:function(e,t){return e.fetchSSGData=t,e}};window.Ryunix=P,e.Children=M,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=D,e.RouterProvider=q,e.createContext=C,e.default=P,e.useCallback=O,e.useEffect=F,e.useHash=L,e.useMemo=A,e.useMetadata=W,e.useQuery=X,e.useRef=U,e.useRouter=$,e.useStore=I,Object.defineProperty(e,"__esModule",{value:!0})});

package/package.json

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