routerino 2.2.2 → 2.2.4

package/README.md

@@ -708,7 +708,7 @@ export default defineConfig({
   - `/about/` → `about/index.html`
   - Canonical URLs and redirects based on `useTrailingSlash` setting
   - Prerender compatible 301 redirects for non-canonical versions
-- **Static host ready**: Output format aligns perfectly with Vercel, Netlify, and Cloudflare Pages conventions
+- **Static host ready**: Output format aligns perfectly with any static host such as Netlify and Cloudflare Pages
   - Routes generate `/path/index.html` for clean URLs (and `/path.html` for compatibility with no-slash URLs)
   - `404.html` at root for custom error pages
   - No server configuration needed - just deploy!
@@ -1216,6 +1216,97 @@ import Routerino from "./vendor/routerino";
 
 By vendoring Routerino, you have full control over the code and can make any necessary modifications directly to the `routerino.jsx` file. However, keep in mind that you'll need to manually update the vendored file if you want to incorporate any future updates or bug fixes from the main Routerino repository.
 
+## Accessibility & SEO Best Practices
+
+To maximize your PageSpeed Insights and Lighthouse scores, we recommend setting up ESLint with accessibility rules. This helps catch common issues that hurt SEO and user experience.
+
+### Setting up eslint-plugin-jsx-a11y
+
+1. Install the plugin:
+
+```bash
+npm install --save-dev eslint-plugin-jsx-a11y
+```
+
+2. Add to your ESLint config:
+
+```javascript
+// eslint.config.js (ESLint 9+ flat config)
+import jsxA11y from "eslint-plugin-jsx-a11y";
+
+export default [
+  {
+    plugins: {
+      "jsx-a11y": jsxA11y,
+    },
+    rules: {
+      ...jsxA11y.configs.recommended.rules,
+    },
+  },
+];
+```
+
+3. Add a lint run script
+
+```json
+{
+  "scripts": {
+    "lint:": "eslint --ext .jsx,.js src/"
+  }
+}
+```
+
+See https://github.com/jsx-eslint/eslint-plugin-jsx-a11y for more info.
+
+### Key Rules for Accessibility
+
+1. **Images**: Include descriptive `alt` text
+
+```jsx
+// ❌ Bad - Missing alt text
+<img src="/logo.png" />
+
+// ✅ Good - Descriptive alt text
+<img src="/logo.png" alt="Company logo" />
+
+// ✅ Good - Decorative images
+<img src="/decoration.png" alt="" role="presentation" />
+```
+
+2. **Heading Hierarchy**: Use proper heading order
+
+```jsx
+// ❌ Bad - Skipping heading levels
+<h1>Page Title</h1>
+<h3>Subsection</h3>  // Should be h2
+
+// ✅ Good - Proper hierarchy
+<h1>Page Title</h1>
+<h2>Main Section</h2>
+<h3>Subsection</h3>
+```
+
+3. **Link Text**: Avoid generic link text
+
+```jsx
+// ❌ Bad - Generic text
+<a href="/products">Click here</a>
+
+// ✅ Good - Descriptive text
+<a href="/products">View our products</a>
+```
+
+4. **ARIA Labels**: Use for icon-only buttons
+
+```jsx
+// ✅ Good - Icon button with label
+<button aria-label="Close dialog">
+  <svg>...</svg>
+</button>
+```
+
+These practices will help you achieve better accessibility scores and ensure your site is accessible to all users.
+
 ## Additional Resources
 
 Here are some sources for further reading on SEO best-practices.

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,8 +108,8 @@ function N({
         ""
       ));
     }
-    const [$, A] = X(((P = window == null ? void 0 : window.location) == null ? void 0 : P.href) ?? "/");
-    Y(() => {
+    const [$, P] = _(window?.location?.href ?? "/");
+    z(() => {
       if (typeof window > "u" || typeof document > "u")
         return;
       const e = (w) => {
@@ -178,7 +177,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 +193,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 +238,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 +279,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 +318,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 +335,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 +364,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(()=>{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&&(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.4",
   "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

@@ -1230,5 +1230,4 @@ Sitemap: ${config.baseUrl}/sitemap.xml`;
   }
 }
 
-// Default export
 export default routerinoForge;