routerino 2.2.2 → 2.2.3

package/dist/routerino.js

@@ -1,9 +1,9 @@
-import { jsx as g, jsxs as j, Fragment as M } from "react/jsx-runtime";
-import { createContext as J, Component as Q, useContext as V, useState as X, useEffect as Y } from "react";
+import { jsx as g, jsxs as W, Fragment as A } from "react/jsx-runtime";
+import { createContext as O, Component as j, useContext as M, useState as _, useEffect as z } from "react";
 import t from "prop-types";
-const _ = J(null);
-function ne() {
-  const i = V(_);
+const F = O(null);
+function Y() {
+  const i = M(F);
   if (!i)
     throw new Error(
       "useRouterino must be used within a Routerino router. Make sure your component is rendered inside a <Routerino> component."
@@ -23,13 +23,13 @@ function l({ tag: i = "meta", soft: c = !1, ...a }) {
     ;
   h && c || (h || (h = document.createElement(i)), o.forEach((f) => h.setAttribute(f, a[f])), document.querySelector("head").appendChild(h));
 }
-function Z({ routePattern: i, currentRoute: c }) {
+function G({ routePattern: i, currentRoute: c }) {
   let a = {}, o = i.split("/"), h = c.split("/");
   return o.forEach((f, m) => {
     f.startsWith(":") && (a[f.slice(1)] = h[m]);
   }), a;
 }
-class z extends Q {
+class H extends j {
   constructor(c) {
     super(c), this.state = { hasError: !1 };
   }
@@ -48,7 +48,7 @@ class z extends Q {
     return this.state.hasError ? this.props.fallback : this.props.children;
   }
 }
-z.propTypes = {
+H.propTypes = {
   /** The child components to render when there's no error */
   children: t.node,
   /** The fallback UI to display when an error is caught */
@@ -62,7 +62,7 @@ z.propTypes = {
   /** Whether to log debug messages to console (optional) */
   debug: t.bool
 };
-function N({
+function K({
   routes: i = [
     {
       path: "/",
@@ -72,26 +72,25 @@ function N({
       tags: [{ property: "og:locale", content: "en_US" }]
     }
   ],
-  notFoundTemplate: c = /* @__PURE__ */ j(M, { children: [
+  notFoundTemplate: c = /* @__PURE__ */ W(A, { children: [
     /* @__PURE__ */ g("p", { children: "No page found for this URL. [404]" }),
     /* @__PURE__ */ g("p", { children: /* @__PURE__ */ g("a", { href: "/", children: "Home" }) })
   ] }),
   notFoundTitle: a = "Page not found [404]",
-  errorTemplate: o = /* @__PURE__ */ j(M, { children: [
+  errorTemplate: o = /* @__PURE__ */ W(A, { children: [
     /* @__PURE__ */ g("p", { children: "Page failed to load. [500]" }),
     /* @__PURE__ */ g("p", { children: /* @__PURE__ */ g("a", { href: "/", children: "Home" }) })
   ] }),
   errorTitle: h = "Page error [500]",
   useTrailingSlash: f = !0,
   usePrerenderTags: m = !1,
-  baseUrl: G = null,
+  baseUrl: I = null,
   title: R = "",
   separator: y = " | ",
   imageUrl: v = null,
   touchIconUrl: T = null,
   debug: s = !1
 }) {
-  var P, U, C, L, q, B, W;
   const k = `${h}${y}${R}`, x = `${a}${y}${R}`;
   try {
     if (s) {
@@ -109,10 +108,8 @@ function N({
         ""
       ));
     }
-    const [$, A] = X(((P = window == null ? void 0 : window.location) == null ? void 0 : P.href) ?? "/");
-    Y(() => {
-      if (typeof window > "u" || typeof document > "u")
-        return;
+    const [$, P] = _(window.location.href);
+    z(() => {
       const e = (w) => {
         s && console.debug(
           "%c[Routerino]%c click occurred",
@@ -178,7 +175,7 @@ function N({
           "%c[Routerino]%c target link is same origin, will use push-state transitioning",
           "color: #6b7280; font-weight: bold",
           ""
-        ), w.preventDefault(), d.href !== window.location.href && (A(d.href), window.history.pushState({}, "", d.href)), window.scrollTo({
+        ), w.preventDefault(), d.href !== window.location.href && (P(d.href), window.history.pushState({}, "", d.href)), window.scrollTo({
           top: 0,
           behavior: "auto"
         })) : s && console.debug(
@@ -194,25 +191,25 @@ function N({
           "color: #6b7280; font-weight: bold",
           "",
           window.location.pathname
-        ), A(window.location.href);
+        ), P(window.location.href);
       };
       return window.addEventListener("popstate", u), () => {
         document.removeEventListener("click", e), window.removeEventListener("popstate", u);
       };
     }, [$]);
-    let r = ((U = window == null ? void 0 : window.location) == null ? void 0 : U.pathname) ?? "/";
+    let r = window.location?.pathname ?? "/";
     (r === "/index.html" || r === "") && (r = "/");
-    const F = i.find((e) => e.path === r), H = i.find(
+    const U = i.find((e) => e.path === r), C = i.find(
       (e) => `${e.path}/` === r || e.path === `${r}/`
-    ), I = i.find((e) => {
+    ), L = i.find((e) => {
       const u = e.path.endsWith("/") ? e.path.slice(0, -1) : e.path, w = r.endsWith("/") ? r.slice(0, -1) : r, d = u.split("/").filter(Boolean), p = w.split("/").filter(Boolean);
       return d.length !== p.length ? !1 : d.every((b, S) => b.startsWith(":") ? !0 : b === p[S]);
-    }), n = F ?? H ?? I;
+    }), n = U ?? C ?? L;
     if (s && console.debug(
       "%c[Routerino]%c Route matching:",
       "color: #6b7280; font-weight: bold",
       "",
-      { match: n, exactMatch: F, addSlashMatch: H, paramsMatch: I }
+      { match: n, exactMatch: U, addSlashMatch: C, paramsMatch: L }
     ), !n)
       return s && (console.group(
         "%c[Routerino]%c 404 - No matching route",
@@ -239,39 +236,39 @@ function N({
       );
       u && u.remove();
     }
-    const D = f && !r.endsWith("/") && r !== "/", O = !f && r.endsWith("/") && r !== "/", K = D ? `${r}/` : O ? r.slice(0, -1) : r, E = `${G ?? ((C = window == null ? void 0 : window.location) == null ? void 0 : C.origin) ?? ""}${K}`;
+    const q = f && !r.endsWith("/") && r !== "/", B = !f && r.endsWith("/") && r !== "/", D = q ? `${r}/` : B ? r.slice(0, -1) : r, E = `${I || window.location.origin}${D}`;
     if (n.title) {
       const e = `${n.title}${y}${R}`;
       document.title = e, l({
         tag: "link",
         rel: "canonical",
         href: E
-      }), (L = n.tags) != null && L.find(({ property: u }) => u === "og:title") || l({
+      }), n.tags?.find(({ property: u }) => u === "og:title") || l({
         property: "og:title",
         content: e
-      }), (q = n.tags) != null && q.find(({ property: u }) => u === "og:url") || l({
+      }), n.tags?.find(({ property: u }) => u === "og:url") || l({
         property: "og:url",
         content: E
       });
     }
-    if (n.description && (l({ name: "description", content: n.description }), (B = n.tags) != null && B.find(({ property: e }) => e === "og:description") || l({
+    if (n.description && (l({ name: "description", content: n.description }), n.tags?.find(({ property: e }) => e === "og:description") || l({
       property: "og:description",
       content: n.description
     })), (v || n.imageUrl) && l({
       property: "og:image",
       content: n.imageUrl ?? v
-    }), (W = n.tags) != null && W.find(({ property: e }) => e === "twitter:card") || l({
+    }), n.tags?.find(({ property: e }) => e === "twitter:card") || l({
       name: "twitter:card",
       content: "summary_large_image"
     }), T && l({
       tag: "link",
       rel: "apple-touch-icon",
       href: T
-    }), m && (D || O) && (l({ name: "prerender-status-code", content: "301" }), l({
+    }), m && (q || B) && (l({ name: "prerender-status-code", content: "301" }), l({
       name: "prerender-header",
       content: `Location: ${E}`
     })), n.tags && n.tags.length ? (n.tags.find(({ property: e }) => e === "og:type") || l({ property: "og:type", content: "website" }), n.tags.forEach((e) => l(e))) : l({ property: "og:type", content: "website" }), n.element) {
-      const e = Z({
+      const e = G({
         routePattern: n.path,
         currentRoute: r
       }), u = {
@@ -280,8 +277,8 @@ function N({
         routePattern: n.path,
         updateHeadTag: l
       };
-      return /* @__PURE__ */ g(_.Provider, { value: u, children: /* @__PURE__ */ g(
-        z,
+      return /* @__PURE__ */ g(F.Provider, { value: u, children: /* @__PURE__ */ g(
+        H,
         {
           fallback: o,
           errorTitleString: k,
@@ -319,7 +316,7 @@ function N({
     ), console.groupEnd()), m && l({ name: "prerender-status-code", content: "500" }), document.title = k, o;
   }
 }
-const ee = t.exact({
+const J = t.exact({
   path: (i, c, a) => {
     const o = i[c];
     return o == null ? new Error(
@@ -336,8 +333,8 @@ const ee = t.exact({
   tags: t.arrayOf(t.object),
   imageUrl: t.string
 });
-N.propTypes = {
-  routes: t.arrayOf(ee),
+K.propTypes = {
+  routes: t.arrayOf(J),
   title: t.string,
   separator: t.string,
   notFoundTemplate: t.element,
@@ -365,9 +362,9 @@ N.propTypes = {
   debug: t.bool
 };
 export {
-  z as ErrorBoundary,
-  N as Routerino,
-  N as default,
+  H as ErrorBoundary,
+  K as Routerino,
+  K as default,
   l as updateHeadTag,
-  ne as useRouterino
+  Y as useRouterino
 };

package/dist/routerino.umd.cjs

@@ -1 +1 @@
-(function(g,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("react/jsx-runtime"),require("react"),require("prop-types")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","prop-types"],a):(g=typeof globalThis<"u"?globalThis:g||self,a(g.routerino={},g["react/jsx-runtime"],g.React,g.PropTypes))})(this,function(g,a,$,t){"use strict";const q=$.createContext(null);function J(){const c=$.useContext(q);if(!c)throw new Error("useRouterino must be used within a Routerino router. Make sure your component is rendered inside a <Routerino> component.");return c}function i({tag:c="meta",soft:l=!1,...s}){const o=Object.keys(s);if(o.length<1)return console.error(`[Routerino] updateHeadTag() received no attributes to set for ${c} tag`);let p=null;for(let h=0;h<o.length&&(o[h]!=="content"&&(p=document.querySelector(`${c}[${o[h]}='${s[o[h]]}']`)),!p);h++);p&&l||(p||(p=document.createElement(c)),o.forEach(h=>p.setAttribute(h,s[h])),document.querySelector("head").appendChild(p))}function Q({routePattern:c,currentRoute:l}){let s={},o=c.split("/"),p=l.split("/");return o.forEach((h,b)=>{h.startsWith(":")&&(s[h.slice(1)]=p[b])}),s}class E extends $.Component{constructor(l){super(l),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(l,s){this.props.debug&&(console.group("%c[Routerino]%c Error Boundary Caught an Error","color: #ff6b6b; font-weight: bold","",l),console.error("[Routerino] Component Stack:",s.componentStack),this.props.routePath&&console.error("[Routerino] Failed Route:",this.props.routePath),console.error("[Routerino] Error occurred at:",new Date().toISOString()),console.groupEnd()),document.title=this.props.errorTitleString,this.props.usePrerenderTags&&i({name:"prerender-status-code",content:"500"})}render(){return this.state.hasError?this.props.fallback:this.props.children}}E.propTypes={children:t.node,fallback:t.node,errorTitleString:t.string.isRequired,usePrerenderTags:t.bool,routePath:t.string,debug:t.bool};function S({routes:c=[{path:"/",element:a.jsx("p",{children:"This is the default route. Pass an array of routes to the Routerino component in order to configure your own pages. Each route is a dictionary with at least `path` and `element` defined."}),title:"Routerino default route example",description:"The default route example description.",tags:[{property:"og:locale",content:"en_US"}]}],notFoundTemplate:l=a.jsxs(a.Fragment,{children:[a.jsx("p",{children:"No page found for this URL. [404]"}),a.jsx("p",{children:a.jsx("a",{href:"/",children:"Home"})})]}),notFoundTitle:s="Page not found [404]",errorTemplate:o=a.jsxs(a.Fragment,{children:[a.jsx("p",{children:"Page failed to load. [500]"}),a.jsx("p",{children:a.jsx("a",{href:"/",children:"Home"})})]}),errorTitle:p="Page error [500]",useTrailingSlash:h=!0,usePrerenderTags:b=!1,baseUrl:X=null,title:v="",separator:y=" | ",imageUrl:C=null,touchIconUrl:B=null,debug:u=!1}){var F,H,j,A,I,M,O;const L=`${p}${y}${v}`,W=`${s}${y}${v}`;try{if(u){const e=c.map(m=>m.path),d=e.filter((m,f)=>e.indexOf(m)!==f);d.length>0&&(console.warn("%c[Routerino]%c Duplicate route paths detected:","color: #f59e0b; font-weight: bold","",[...new Set(d)]),console.warn("%c[Routerino]%c The first matching route will be used","color: #f59e0b; font-weight: bold",""))}const[k,D]=$.useState(((F=window==null?void 0:window.location)==null?void 0:F.href)??"/");$.useEffect(()=>{if(typeof window>"u"||typeof document>"u")return;const e=m=>{u&&console.debug("%c[Routerino]%c click occurred","color: #6b7280; font-weight: bold","");let f=m.target;for(;f.tagName!=="A"&&f.parentElement;)f=f.parentElement;if(f.tagName!=="A"){u&&console.debug("%c[Routerino]%c no anchor tag found during click","color: #6b7280; font-weight: bold","");return}const w=f.getAttribute("href")||f.href;if(!w){u&&console.debug("%c[Routerino]%c anchor tag has no href","color: #6b7280; font-weight: bold","");return}if(!/^(https?:\/\/|\/|\.\/|\.\.\/|[^:]+$)/i.test(w)){u&&console.debug("%c[Routerino]%c skipping non-http URL:","color: #6b7280; font-weight: bold","",w);return}u&&console.debug("%c[Routerino]%c click target href:","color: #6b7280; font-weight: bold","",w);let R;try{R=new URL(w,window.location.href)}catch(U){u&&console.debug("%c[Routerino]%c Invalid URL:","color: #6b7280; font-weight: bold","",w,U);return}u&&console.debug("%c[Routerino]%c targetUrl:","color: #6b7280; font-weight: bold","",R,"current:",window.location),R&&window.location.origin===R.origin?(u&&console.debug("%c[Routerino]%c target link is same origin, will use push-state transitioning","color: #6b7280; font-weight: bold",""),m.preventDefault(),f.href!==window.location.href&&(D(f.href),window.history.pushState({},"",f.href)),window.scrollTo({top:0,behavior:"auto"})):u&&console.debug("%c[Routerino]%c target link does not share an origin, standard browser link handling applies","color: #6b7280; font-weight: bold","")};document.addEventListener("click",e);const d=()=>{u&&console.debug("%c[Routerino]%c route change ->","color: #6b7280; font-weight: bold","",window.location.pathname),D(window.location.href)};return window.addEventListener("popstate",d),()=>{document.removeEventListener("click",e),window.removeEventListener("popstate",d)}},[k]);let r=((H=window==null?void 0:window.location)==null?void 0:H.pathname)??"/";(r==="/index.html"||r==="")&&(r="/");const _=c.find(e=>e.path===r),z=c.find(e=>`${e.path}/`===r||e.path===`${r}/`),T=c.find(e=>{const d=e.path.endsWith("/")?e.path.slice(0,-1):e.path,m=r.endsWith("/")?r.slice(0,-1):r,f=d.split("/").filter(Boolean),w=m.split("/").filter(Boolean);return f.length!==w.length?!1:f.every((R,U)=>R.startsWith(":")?!0:R===w[U])}),n=_??z??T;if(u&&console.debug("%c[Routerino]%c Route matching:","color: #6b7280; font-weight: bold","",{match:n,exactMatch:_,addSlashMatch:z,paramsMatch:T}),!n)return u&&(console.group("%c[Routerino]%c 404 - No matching route","color: #f59e0b; font-weight: bold",""),console.warn("%c[Routerino]%c Requested path:","color: #f59e0b; font-weight: bold","",r),console.warn("%c[Routerino]%c Available routes:","color: #f59e0b; font-weight: bold","",c.map(e=>e.path)),console.groupEnd()),document.title=W,b&&i({name:"prerender-status-code",content:"404"}),l;if(b){const e=document.querySelector('meta[name="prerender-status-code"]');e&&e.remove();const d=document.querySelector('meta[name="prerender-header"]');d&&d.remove()}const G=h&&!r.endsWith("/")&&r!=="/",K=!h&&r.endsWith("/")&&r!=="/",Y=G?`${r}/`:K?r.slice(0,-1):r,x=`${X??((j=window==null?void 0:window.location)==null?void 0:j.origin)??""}${Y}`;if(n.title){const e=`${n.title}${y}${v}`;document.title=e,i({tag:"link",rel:"canonical",href:x}),(A=n.tags)!=null&&A.find(({property:d})=>d==="og:title")||i({property:"og:title",content:e}),(I=n.tags)!=null&&I.find(({property:d})=>d==="og:url")||i({property:"og:url",content:x})}if(n.description&&(i({name:"description",content:n.description}),(M=n.tags)!=null&&M.find(({property:e})=>e==="og:description")||i({property:"og:description",content:n.description})),(C||n.imageUrl)&&i({property:"og:image",content:n.imageUrl??C}),(O=n.tags)!=null&&O.find(({property:e})=>e==="twitter:card")||i({name:"twitter:card",content:"summary_large_image"}),B&&i({tag:"link",rel:"apple-touch-icon",href:B}),b&&(G||K)&&(i({name:"prerender-status-code",content:"301"}),i({name:"prerender-header",content:`Location: ${x}`})),n.tags&&n.tags.length?(n.tags.find(({property:e})=>e==="og:type")||i({property:"og:type",content:"website"}),n.tags.forEach(e=>i(e))):i({property:"og:type",content:"website"}),n.element){const e=Q({routePattern:n.path,currentRoute:r}),d={currentRoute:r,params:e,routePattern:n.path,updateHeadTag:i};return a.jsx(q.Provider,{value:d,children:a.jsx(E,{fallback:o,errorTitleString:L,usePrerenderTags:b,routePath:r,debug:u,children:n.element})})}return u&&console.error("%c[Routerino]%c No route found for","color: #ff6b6b; font-weight: bold","",r),document.title=W,b&&i({name:"prerender-status-code",content:"404"}),l}catch(k){return u&&(console.group("%c[Routerino]%c Fatal Error","color: #ff6b6b; font-weight: bold",""),console.error("%c[Routerino]%c An error occurred in the router itself (not in a route component)","color: #ff6b6b; font-weight: bold",""),console.error("%c[Routerino]%c Error:","color: #ff6b6b; font-weight: bold","",k),console.error("%c[Routerino]%c This typically means an issue with route configuration or router setup","color: #ff6b6b; font-weight: bold",""),console.groupEnd()),b&&i({name:"prerender-status-code",content:"500"}),document.title=L,o}}const V=t.exact({path:(c,l,s)=>{const o=c[l];return o==null?new Error(`The prop \`${l}\` is marked as required in \`${s}\`, but its value is \`${o}\`.`):typeof o!="string"?new Error(`Invalid prop \`${l}\` of type \`${typeof o}\` supplied to \`${s}\`, expected \`string\`.`):o.startsWith("/")?null:new Error(`Invalid prop \`${l}\` value \`${o}\` supplied to \`${s}\`. Route paths must start with a forward slash (/).`)},element:t.element.isRequired,title:t.string,description:t.string,tags:t.arrayOf(t.object),imageUrl:t.string});S.propTypes={routes:t.arrayOf(V),title:t.string,separator:t.string,notFoundTemplate:t.element,notFoundTitle:t.string,errorTemplate:t.element,errorTitle:t.string,useTrailingSlash:t.bool,usePrerenderTags:t.bool,baseUrl:(c,l,s)=>{const o=c[l];if(o!=null){if(typeof o!="string")return new Error(`Invalid prop \`${l}\` of type \`${typeof o}\` supplied to \`${s}\`, expected \`string\`.`);if(o.endsWith("/"))return new Error(`Invalid prop \`${l}\` supplied to \`${s}\`. The baseUrl should not end with a slash. Got: "${o}"`)}return null},imageUrl:t.string,touchIconUrl:t.string,debug:t.bool},g.ErrorBoundary=E,g.Routerino=S,g.default=S,g.updateHeadTag=i,g.useRouterino=J,Object.defineProperties(g,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(g,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("react/jsx-runtime"),require("react"),require("prop-types")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","prop-types"],a):(g=typeof globalThis<"u"?globalThis:g||self,a(g.routerino={},g["react/jsx-runtime"],g.React,g.PropTypes))})(this,function(g,a,$,t){"use strict";const q=$.createContext(null);function O(){const c=$.useContext(q);if(!c)throw new Error("useRouterino must be used within a Routerino router. Make sure your component is rendered inside a <Routerino> component.");return c}function i({tag:c="meta",soft:l=!1,...s}){const o=Object.keys(s);if(o.length<1)return console.error(`[Routerino] updateHeadTag() received no attributes to set for ${c} tag`);let p=null;for(let h=0;h<o.length&&(o[h]!=="content"&&(p=document.querySelector(`${c}[${o[h]}='${s[o[h]]}']`)),!p);h++);p&&l||(p||(p=document.createElement(c)),o.forEach(h=>p.setAttribute(h,s[h])),document.querySelector("head").appendChild(p))}function D({routePattern:c,currentRoute:l}){let s={},o=c.split("/"),p=l.split("/");return o.forEach((h,b)=>{h.startsWith(":")&&(s[h.slice(1)]=p[b])}),s}class E extends $.Component{constructor(l){super(l),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(l,s){this.props.debug&&(console.group("%c[Routerino]%c Error Boundary Caught an Error","color: #ff6b6b; font-weight: bold","",l),console.error("[Routerino] Component Stack:",s.componentStack),this.props.routePath&&console.error("[Routerino] Failed Route:",this.props.routePath),console.error("[Routerino] Error occurred at:",new Date().toISOString()),console.groupEnd()),document.title=this.props.errorTitleString,this.props.usePrerenderTags&&i({name:"prerender-status-code",content:"500"})}render(){return this.state.hasError?this.props.fallback:this.props.children}}E.propTypes={children:t.node,fallback:t.node,errorTitleString:t.string.isRequired,usePrerenderTags:t.bool,routePath:t.string,debug:t.bool};function S({routes:c=[{path:"/",element:a.jsx("p",{children:"This is the default route. Pass an array of routes to the Routerino component in order to configure your own pages. Each route is a dictionary with at least `path` and `element` defined."}),title:"Routerino default route example",description:"The default route example description.",tags:[{property:"og:locale",content:"en_US"}]}],notFoundTemplate:l=a.jsxs(a.Fragment,{children:[a.jsx("p",{children:"No page found for this URL. [404]"}),a.jsx("p",{children:a.jsx("a",{href:"/",children:"Home"})})]}),notFoundTitle:s="Page not found [404]",errorTemplate:o=a.jsxs(a.Fragment,{children:[a.jsx("p",{children:"Page failed to load. [500]"}),a.jsx("p",{children:a.jsx("a",{href:"/",children:"Home"})})]}),errorTitle:p="Page error [500]",useTrailingSlash:h=!0,usePrerenderTags:b=!1,baseUrl:z=null,title:v="",separator:y=" | ",imageUrl:C=null,touchIconUrl:B=null,debug:u=!1}){const L=`${p}${y}${v}`,W=`${s}${y}${v}`;try{if(u){const e=c.map(m=>m.path),d=e.filter((m,f)=>e.indexOf(m)!==f);d.length>0&&(console.warn("%c[Routerino]%c Duplicate route paths detected:","color: #f59e0b; font-weight: bold","",[...new Set(d)]),console.warn("%c[Routerino]%c The first matching route will be used","color: #f59e0b; font-weight: bold",""))}const[k,F]=$.useState(window.location.href);$.useEffect(()=>{const e=m=>{u&&console.debug("%c[Routerino]%c click occurred","color: #6b7280; font-weight: bold","");let f=m.target;for(;f.tagName!=="A"&&f.parentElement;)f=f.parentElement;if(f.tagName!=="A"){u&&console.debug("%c[Routerino]%c no anchor tag found during click","color: #6b7280; font-weight: bold","");return}const w=f.getAttribute("href")||f.href;if(!w){u&&console.debug("%c[Routerino]%c anchor tag has no href","color: #6b7280; font-weight: bold","");return}if(!/^(https?:\/\/|\/|\.\/|\.\.\/|[^:]+$)/i.test(w)){u&&console.debug("%c[Routerino]%c skipping non-http URL:","color: #6b7280; font-weight: bold","",w);return}u&&console.debug("%c[Routerino]%c click target href:","color: #6b7280; font-weight: bold","",w);let R;try{R=new URL(w,window.location.href)}catch(U){u&&console.debug("%c[Routerino]%c Invalid URL:","color: #6b7280; font-weight: bold","",w,U);return}u&&console.debug("%c[Routerino]%c targetUrl:","color: #6b7280; font-weight: bold","",R,"current:",window.location),R&&window.location.origin===R.origin?(u&&console.debug("%c[Routerino]%c target link is same origin, will use push-state transitioning","color: #6b7280; font-weight: bold",""),m.preventDefault(),f.href!==window.location.href&&(F(f.href),window.history.pushState({},"",f.href)),window.scrollTo({top:0,behavior:"auto"})):u&&console.debug("%c[Routerino]%c target link does not share an origin, standard browser link handling applies","color: #6b7280; font-weight: bold","")};document.addEventListener("click",e);const d=()=>{u&&console.debug("%c[Routerino]%c route change ->","color: #6b7280; font-weight: bold","",window.location.pathname),F(window.location.href)};return window.addEventListener("popstate",d),()=>{document.removeEventListener("click",e),window.removeEventListener("popstate",d)}},[k]);let r=window.location?.pathname??"/";(r==="/index.html"||r==="")&&(r="/");const H=c.find(e=>e.path===r),j=c.find(e=>`${e.path}/`===r||e.path===`${r}/`),A=c.find(e=>{const d=e.path.endsWith("/")?e.path.slice(0,-1):e.path,m=r.endsWith("/")?r.slice(0,-1):r,f=d.split("/").filter(Boolean),w=m.split("/").filter(Boolean);return f.length!==w.length?!1:f.every((R,U)=>R.startsWith(":")?!0:R===w[U])}),n=H??j??A;if(u&&console.debug("%c[Routerino]%c Route matching:","color: #6b7280; font-weight: bold","",{match:n,exactMatch:H,addSlashMatch:j,paramsMatch:A}),!n)return u&&(console.group("%c[Routerino]%c 404 - No matching route","color: #f59e0b; font-weight: bold",""),console.warn("%c[Routerino]%c Requested path:","color: #f59e0b; font-weight: bold","",r),console.warn("%c[Routerino]%c Available routes:","color: #f59e0b; font-weight: bold","",c.map(e=>e.path)),console.groupEnd()),document.title=W,b&&i({name:"prerender-status-code",content:"404"}),l;if(b){const e=document.querySelector('meta[name="prerender-status-code"]');e&&e.remove();const d=document.querySelector('meta[name="prerender-header"]');d&&d.remove()}const I=h&&!r.endsWith("/")&&r!=="/",M=!h&&r.endsWith("/")&&r!=="/",T=I?`${r}/`:M?r.slice(0,-1):r,x=`${z||window.location.origin}${T}`;if(n.title){const e=`${n.title}${y}${v}`;document.title=e,i({tag:"link",rel:"canonical",href:x}),n.tags?.find(({property:d})=>d==="og:title")||i({property:"og:title",content:e}),n.tags?.find(({property:d})=>d==="og:url")||i({property:"og:url",content:x})}if(n.description&&(i({name:"description",content:n.description}),n.tags?.find(({property:e})=>e==="og:description")||i({property:"og:description",content:n.description})),(C||n.imageUrl)&&i({property:"og:image",content:n.imageUrl??C}),n.tags?.find(({property:e})=>e==="twitter:card")||i({name:"twitter:card",content:"summary_large_image"}),B&&i({tag:"link",rel:"apple-touch-icon",href:B}),b&&(I||M)&&(i({name:"prerender-status-code",content:"301"}),i({name:"prerender-header",content:`Location: ${x}`})),n.tags&&n.tags.length?(n.tags.find(({property:e})=>e==="og:type")||i({property:"og:type",content:"website"}),n.tags.forEach(e=>i(e))):i({property:"og:type",content:"website"}),n.element){const e=D({routePattern:n.path,currentRoute:r}),d={currentRoute:r,params:e,routePattern:n.path,updateHeadTag:i};return a.jsx(q.Provider,{value:d,children:a.jsx(E,{fallback:o,errorTitleString:L,usePrerenderTags:b,routePath:r,debug:u,children:n.element})})}return u&&console.error("%c[Routerino]%c No route found for","color: #ff6b6b; font-weight: bold","",r),document.title=W,b&&i({name:"prerender-status-code",content:"404"}),l}catch(k){return u&&(console.group("%c[Routerino]%c Fatal Error","color: #ff6b6b; font-weight: bold",""),console.error("%c[Routerino]%c An error occurred in the router itself (not in a route component)","color: #ff6b6b; font-weight: bold",""),console.error("%c[Routerino]%c Error:","color: #ff6b6b; font-weight: bold","",k),console.error("%c[Routerino]%c This typically means an issue with route configuration or router setup","color: #ff6b6b; font-weight: bold",""),console.groupEnd()),b&&i({name:"prerender-status-code",content:"500"}),document.title=L,o}}const _=t.exact({path:(c,l,s)=>{const o=c[l];return o==null?new Error(`The prop \`${l}\` is marked as required in \`${s}\`, but its value is \`${o}\`.`):typeof o!="string"?new Error(`Invalid prop \`${l}\` of type \`${typeof o}\` supplied to \`${s}\`, expected \`string\`.`):o.startsWith("/")?null:new Error(`Invalid prop \`${l}\` value \`${o}\` supplied to \`${s}\`. Route paths must start with a forward slash (/).`)},element:t.element.isRequired,title:t.string,description:t.string,tags:t.arrayOf(t.object),imageUrl:t.string});S.propTypes={routes:t.arrayOf(_),title:t.string,separator:t.string,notFoundTemplate:t.element,notFoundTitle:t.string,errorTemplate:t.element,errorTitle:t.string,useTrailingSlash:t.bool,usePrerenderTags:t.bool,baseUrl:(c,l,s)=>{const o=c[l];if(o!=null){if(typeof o!="string")return new Error(`Invalid prop \`${l}\` of type \`${typeof o}\` supplied to \`${s}\`, expected \`string\`.`);if(o.endsWith("/"))return new Error(`Invalid prop \`${l}\` supplied to \`${s}\`. The baseUrl should not end with a slash. Got: "${o}"`)}return null},imageUrl:t.string,touchIconUrl:t.string,debug:t.bool},g.ErrorBoundary=E,g.Routerino=S,g.default=S,g.updateHeadTag=i,g.useRouterino=O,Object.defineProperties(g,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "routerino",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "description": "A lightweight, SEO-optimized React router for modern web applications",
   "repository": {
     "type": "git",
@@ -55,24 +55,24 @@
     "prepare": "husky"
   },
   "devDependencies": {
-    "@eslint/js": "^9.27.0",
+    "@eslint/js": "^9.38.0",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@vitejs/plugin-react": "^4.5.0",
-    "eslint": "^9.27.0",
+    "@vitejs/plugin-react": "^5.0.4",
+    "eslint": "^9.38.0",
     "eslint-plugin-react": "^7.37.5",
-    "express": "^4.18.2",
-    "globals": "^16.1.0",
+    "express": "^5.1.0",
+    "globals": "^16.4.0",
     "husky": "^9.1.7",
     "jsdom": "^26.1.0",
-    "lint-staged": "^16.1.2",
+    "lint-staged": "^16.2.6",
     "node-fetch": "^3.3.2",
     "prettier": "^3.6.2",
     "prop-types": "^15.8.1",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "vite": "^6.3.5",
-    "vitest": "^3.2.4"
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "vite": "^7.1.12",
+    "vitest": "^4.0.2"
   },
   "peerDependencies": {
     "prop-types": "^15.0.0",
@@ -91,8 +91,8 @@
     "node": ">=18"
   },
   "volta": {
-    "node": "22.16.0",
-    "npm": "10.9.2"
+    "node": "22.21.0",
+    "npm": "10.9.4"
   },
   "lint-staged": {
     "*.{js,jsx,mjs,cjs}": [

package/routerino-forge.js

@@ -474,9 +474,7 @@ const routes = routesModule.routes || routesModule.default;
 const notFoundTemplate = routesModule.notFoundTemplate;
 
 // Check if App component is exported from routes file
-// App can be: named export, default export, or App property on default export
-const App = routesModule.App || 
-            (typeof routesModule.default === 'function' ? routesModule.default : routesModule.default?.App);
+const App = routesModule.App || routesModule.default?.App;
 
 if (!routes) {
   throw new Error('Could not find routes export. Expected "export const routes" or "export default" from ${relativePath}');
@@ -484,7 +482,7 @@ if (!routes) {
 
 // Helper to check if a route is dynamic (contains :param)
 const isDynamicRoute = (path) => path.split("/").some(segment => segment.startsWith(":"));
-export { routes, App };
+export { routes };
 
 // Mock minimal window object for SSG
 function mockWindow(url, baseUrl) {
@@ -510,66 +508,38 @@ function mockWindow(url, baseUrl) {
     removeEventListener: () => {},
     dispatchEvent: () => {}
   };
-  // Mock for document with more complete implementation
-  const mockElements = [];
   global.document = {
-    title: '', // Mock title property for SSG
     addEventListener: () => {},
     removeEventListener: () => {},
-    querySelector: (selector) => {
-      // Return mock head for head selector
-      if (selector === 'head') {
-        return {
-          appendChild: (elem) => {
-            mockElements.push(elem);
-            return elem;
-          }
-        };
-      }
-      // For meta tag queries, return null (tag not found)
-      return null;
-    },
-    createElement: (tagName) => {
-      const elem = {
-        tagName,
-        attributes: {},
-        setAttribute: function(name, value) {
-          this.attributes[name] = value;
-        },
-        appendChild: () => {}
-      };
-      return elem;
-    },
+    querySelector: () => null,
+    createElement: () => ({ 
+      setAttribute: () => {},
+      appendChild: () => {}
+    }),
     head: {
-      appendChild: (elem) => {
-        mockElements.push(elem);
-        return elem;
-      },
-      querySelector: () => null,
-      querySelectorAll: () => []
+      appendChild: () => {}
     }
   };
 }
 
 export function render(url, baseUrl) {
-  // Check if we should render the full App or just the route element  
+  // Check if we should render the full App or just the route element
   if (App) {
-    // Find the route to render
-    const route = routes.find(r => {
-      if (r.path === url) return true;
-      if (r.path === '/' && url === '/') return true;
-      if (isDynamicRoute(r.path)) return false;
-      return r.path === url;
-    });
-    
     // Mock window for the current route
     mockWindow(url, baseUrl);
     
     try {
-      
-      // Render the App with Routerino SSG-aware
+      // Render the full App component (which includes Routerino)
       const html = ReactDOMServer.renderToString(React.createElement(App));
       
+      // Find the rendered route to get its metadata
+      const route = routes.find(r => {
+        if (r.path === url) return true;
+        if (r.path === '/' && url === '/') return true;
+        if (isDynamicRoute(r.path)) return false;
+        return r.path === url;
+      });
+      
       return {
         html,
         title: route?.title,
@@ -579,7 +549,6 @@ export function render(url, baseUrl) {
       };
     } catch (error) {
       console.error(\`[Routerino Forge] Failed to render App for route \${url}:\`, error.message);
-      console.error(\`[Routerino Forge] Stack trace:\`, error.stack);
       // Fall back to route-only rendering
     } finally {
       // Clean up global mocks
@@ -589,17 +558,12 @@ export function render(url, baseUrl) {
   }
   
   // Original behavior: render just the route element
-  // Need to find the route again if App path wasn't taken
-  const route = App ? null : routes.find(r => {
+  const route = routes.find(r => {
     if (r.path === url) return true;
     if (r.path === '/' && url === '/') return true;
     if (isDynamicRoute(r.path)) return false;
     return r.path === url;
-  });
-  
-  // If we get here and App was defined, it means the App render failed
-  // Return early to avoid duplicate rendering
-  if (App) return;
+  }); 
   
   if (!route) {
     if (notFoundTemplate) {
@@ -777,7 +741,7 @@ export function render(url, baseUrl) {
           const reductionPercent = (
             (1 - imageStats.placeholderSize / imageStats.totalSize) *
             100
-          ).toFixed(2);
+          ).toFixed(0);
           console.log(
             `[Routerino Forge] ✓ Optimized ${imageStats.processed} images (${totalSizeMB}MB total, ${placeholderSizeKB}KB placeholders, ${reductionPercent}% reduction)`
           );
@@ -1104,7 +1068,7 @@ async function generate404Page({ template, outputDir, config, render }) {
       config.baseUrl
     );
 
-    // The render function will return the notFoundTemplate HTML (already includes App wrapper if App exists)
+    // The render function will return the notFoundTemplate HTML
     const renderedHTML = renderResult.html || "404 - Page Not Found";
 
     // Generate meta tags for 404 page
@@ -1230,5 +1194,4 @@ Sitemap: ${config.baseUrl}/sitemap.xml`;
   }
 }
 
-// Default export
 export default routerinoForge;