routerino 2.4.0 → 2.5.0

package/README.md

@@ -1,6 +1,6 @@
 # Routerino
 
-> A lightweight, SEO-optimized React router for modern websites and applications
+> A lightweight, SEO-optimized React router & SSG for modern websites and applications
 
 For teams who want SPA simplicity with search-friendly static HTML, Open Graph previews, and **no framework lock-in.**
 
@@ -129,7 +129,18 @@ export const routes = [
 />;
 ```
 
-Links are just standard HTML anchor tags. No need to use special `<Link>` components—you can use whatever components or design system you like. For example: <a href="/some-page/">a link</a> is perfectly valid. This is very handy for markdown-based content. With standard link support in Routerino, you won't need to [transform your markdown content with custom React components](https://github.com/remarkjs/react-markdown?tab=readme-ov-file#appendix-b-components). Routerino handles same-origin anchor clicks. Cross-origin links and non-HTTP schemes (e.g., mailto:, tel:) are handled by the browser as usual.
+Links are just standard HTML anchor tags. No need to use special `<Link>` components—you can use whatever components or design system you like. For example: <a href="/some-page/">a link</a> is perfectly valid. This is very handy for markdown-based content. With standard link support in Routerino, you won't need to [transform your markdown content with custom React components](https://github.com/remarkjs/react-markdown?tab=readme-ov-file#appendix-b-components).
+
+Routerino handles same-origin anchor clicks via SPA navigation. The browser handles the rest natively, including:
+
+- **Cross-origin links** (different domain)
+- **Non-HTTP schemes** (mailto:, tel:, javascript:, etc.)
+- **Modified clicks** (Ctrl/Cmd+click, Shift+click, Alt+click, right-click)
+- **`target="_blank"`** links
+- **`download`** attribute links
+- **`rel="external"`** links
+- **File extension links** — PDFs, ZIPs, images, fonts, videos, JSON, XML, and 50+ other file types are recognized automatically
+- **Custom patterns** — use the [`ignorePatterns`](#ignorepatterns-string) prop for additional exclusions (e.g., `/api/`, `/legacy/`)
 
 ### Programmatic Navigation
 
@@ -224,6 +235,7 @@ All of these are optional, so it's easy to get started with nothing but a bare-b
 | [imageUrl](#imageurl-string)                   | string          | Default image URL for sharing     | `null`                        |
 | [touchIconUrl](#touchiconurl-string)           | string          | Image URL for PWA homescreen icon | `null`                        |
 | [debug](#debug-boolean)                        | boolean         | Enable debug mode                 | `false`                       |
+| [ignorePatterns](#ignorepatterns-string)       | string[]        | URL patterns to skip SPA routing  | `[]`                          |
 
 ##### `title`: string;
 
@@ -300,7 +312,9 @@ Default: `false`
 
 ##### `baseUrl`: string;
 
-The base URL to use for canonical tags and og:url meta tags. If not provided, uses `window.location.origin`. This is useful when you want to specify the production URL regardless of the current environment.
+The base URL to use for canonical tags and og:url meta tags. If not provided, uses `window.location.origin`.
+
+This is useful when your site is accessible from multiple domains (for example, both example.com and example.net point to the same app). Set it to the preferred domain and all canonical and og:url tags will consistently point there. Also helpful for pinning to the production URL in development or staging environments.
 
 **Important:** The baseUrl must NOT end with a trailing slash (`/`). Correct example: `"https://example.com"`
 
@@ -338,6 +352,21 @@ Example debug output:
 
 Default: `false`
 
+##### `ignorePatterns`: string[];
+
+An array of regex pattern strings to match against link hrefs. Any same-origin link matching one of these patterns will **not** be intercepted by the SPA router — the browser will handle the navigation natively instead.
+
+Patterns are tested case-insensitively against the full resolved href (including origin).
+
+```jsx
+// Skip API endpoints and a legacy section
+<Routerino routes={routes} ignorePatterns={["/api/", "/admin/legacy/"]} />
+```
+
+Routerino also has a built-in list of file extensions that are automatically skipped: `.pdf`, `.zip`, `.docx`, `.png`, `.jpg`, `.svg`, `.mp4`, `.json`, `.xml`, `.csv`, `.txt`, `.ico`, `.woff2`, `.woff`, `.ttf`, `.mp3`, `.wav`, `.epub`, `.map`, `.css`, `.js`, `.wasm`, and many more. The `ignorePatterns` prop is for additional custom patterns beyond these defaults.
+
+Default: `[]`
+
 #### RouteConfig props
 
 There is a default RouteConfig that will be loaded if you don't specify any routes. The default route is a basic template that can confirm your app is working and routing is good to go.
@@ -402,6 +431,31 @@ An array of HeadTag objects that can be added to the route to manage meta tags,
 
 - `target` (string): The "target" attribute of the tag. Defines where to open the linked resource.
 
+- `innerHTML` (string): Inner HTML content for tags that require a closing tag, such as `<script>` and `<style>`. When provided, the tag is rendered as `<tag attrs>innerHTML</tag>` instead of a self-closing element. This enables structured data (JSON-LD), inline CSS, and other tag-body content.
+
+##### Structured Data Example
+
+```jsx
+{
+  path: "/about/",
+  element: <AboutPage />,
+  tags: [{
+    tag: "script",
+    type: "application/ld+json",
+    innerHTML: JSON.stringify({
+      "@context": "https://schema.org",
+      "@type": "BreadcrumbList",
+      itemListElement: [
+        { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com/" },
+        { "@type": "ListItem", "position": 2, "name": "About", "item": "https://example.com/about/" },
+      ],
+    }),
+  }],
+}
+```
+
+This works both at runtime (via `updateHeadTag`) and during static site generation (via the forge plugin).
+
 ### Using the `useRouterino` Hook
 
 The `useRouterino` hook provides access to router state from any child component. This is the primary way to access route information and update head tags dynamically.
@@ -717,6 +771,8 @@ With Prerender (SPA):
 
 You can override the default with `useTrailingSlash={false}` if you prefer URLs without trailing slashes. Either way, Routerino ensures search engines see consistent, canonical URLs.
 
+**Multi-domain deployments**: If your site is served from multiple domains, set `baseUrl` to the preferred domain to keep all canonical and og:url tags pointing to one place. For example, `<Routerino baseUrl="https://example.com" routes={routes} />` ensures search engines see one canonical domain even when the same page is reachable at example.net.
+
 ### Sitemap Generation
 
 - Automate the creation of `sitemap.xml` and `robots.txt` during your build process with Routerino Forge.
@@ -808,14 +864,14 @@ This creates an engaging Twitter preview with a large image, title, and descript
 ### Additional SEO Considerations
 
 - Use semantic HTML elements in your components for better content structure.
-- Implement structured data (JSON-LD) where applicable to enhance rich snippets in search results.
+- Implement structured data (JSON-LD) where applicable to enhance rich snippets in search results. Use the `innerHTML` property on a `<script type="application/ld+json">` head tag (see the [Structured Data Example](#structured-data-example) above).
 - Ensure your site is mobile-friendly and loads quickly for better search engine rankings.
 
 By following these practices, you'll improve your site's SEO performance and social media presence when using Routerino.
 
 ### Hash Links
 
-Routerino supports standard `<a href="/page#section">` links for SPA navigation — after React renders the new page, it finds the element with the matching `id` and scrolls it into view.
+Routerino supports standard `<a href="/page#section">` links for SPA navigation. After React renders the new page, it finds the element with the matching `id` and scrolls it into view.
 
 **Sticky headers**: If your site has a fixed header, use the CSS [`scroll-margin-top`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top) property to offset the scroll target so content isn't hidden behind the header:
 

package/dist/routerino.js

@@ -1,385 +1,476 @@
-import { jsx as g, jsxs as B, Fragment as G } from "react/jsx-runtime";
-import { useState as z, useEffect as _, useMemo as J, createContext as N, Component as Q, useContext as X } from "react";
-import o from "prop-types";
+import { jsx as m, jsxs as q, Fragment as V } from "react/jsx-runtime";
+import { useState as M, useEffect as _, useMemo as X, createContext as Z, Component as J, useContext as Q } from "react";
+import t from "prop-types";
 const Y = [480, 800, 1200, 1920], ee = "(max-width: 480px) 100vw, (max-width: 800px) 800px, (max-width: 1200px) 1200px, 1920px", H = /* @__PURE__ */ new Map();
 function te(i, e = "") {
-  const r = i.toLowerCase(), n = e.toLowerCase();
-  return !!(r.includes("hero") || r.includes("banner") || n.includes("hero") || n.includes("banner") || n.includes("h-screen") || n.includes("h-full"));
+  const c = i.toLowerCase(), n = e.toLowerCase();
+  return !!(c.includes("hero") || c.includes("banner") || n.includes("hero") || n.includes("banner") || n.includes("h-screen") || n.includes("h-full"));
 }
-function q(i, e, r = null) {
-  const n = i.replace(/\.(jpe?g|png|webp)$/i, ""), u = r ? `.${r}` : i.match(/\.(jpe?g|png|webp)$/i)?.[0] || ".jpg";
-  return e.map((a) => `${n}-${a}w${u} ${a}w`).join(", ");
+function O(i, e, c = null) {
+  const n = i.replace(/\.(jpe?g|png|webp)$/i, ""), f = c ? `.${c}` : i.match(/\.(jpe?g|png|webp)$/i)?.[0] || ".jpg";
+  return e.map((l) => `${n}-${l}w${f} ${l}w`).join(", ");
 }
 function oe(i) {
   const {
     src: e = "",
-    alt: r = "",
+    alt: c = "",
     priority: n,
-    widths: u = Y,
-    sizes: a = ee,
-    className: m = "",
-    style: O = {},
-    width: E,
-    height: S,
-    loading: I,
-    decoding: L = "async",
-    fetchpriority: f,
-    ...T
-  } = i || {}, W = typeof window > "u", b = !W && typeof document < "u" && typeof HTMLElement < "u" && document.createElement("div") instanceof HTMLElement, R = b && (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1"), c = n ?? te(e, m), k = I || (c ? "eager" : "lazy"), P = f || (c ? "high" : void 0), [y, s] = z(null);
+    widths: f = Y,
+    sizes: l = ee,
+    className: u = "",
+    style: F = {},
+    width: v,
+    height: $,
+    loading: A,
+    decoding: j = "async",
+    fetchpriority: d,
+    ...k
+  } = i || {}, U = typeof window > "u", S = !U && typeof document < "u" && typeof HTMLElement < "u" && document.createElement("div") instanceof HTMLElement, x = S && (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1"), W = n ?? te(e, u), a = A || (W ? "eager" : "lazy"), P = d || (W ? "high" : void 0), [E, C] = M(null);
   _(() => {
-    if (!b || R || !e) return;
-    const h = new window.Image();
-    h.onload = () => {
-      s({
-        width: h.naturalWidth,
-        height: h.naturalHeight
+    if (!S || x || !e) return;
+    const r = new window.Image();
+    r.onload = () => {
+      C({
+        width: r.naturalWidth,
+        height: r.naturalHeight
       });
-    }, h.src = e;
-  }, [e, b, R]);
-  const v = J(() => y ? u.filter((h) => y.width >= h) : u, [y, u]), [j, F] = z(null);
+    }, r.src = e;
+  }, [e, S, x]);
+  const s = X(() => E ? f.filter((r) => E.width >= r) : f, [E, f]), [B, D] = M(null);
   _(() => {
-    if (!b || R) return;
-    let h = !1;
+    if (!S || x) return;
+    let r = !1;
     return (async () => {
-      const x = e.replace(/\.(jpe?g|png|webp)$/i, ""), A = e.match(/\.(jpe?g|png|webp)$/i)?.[0] || ".jpg", D = [];
-      for (const M of v) {
-        const C = `${x}-${M}w${A}`;
-        if (H.has(C)) {
-          H.get(C) && D.push(M);
+      const y = e.replace(/\.(jpe?g|png|webp)$/i, ""), T = e.match(/\.(jpe?g|png|webp)$/i)?.[0] || ".jpg", R = [];
+      for (const L of s) {
+        const I = `${y}-${L}w${T}`;
+        if (H.has(I)) {
+          H.get(I) && R.push(L);
           continue;
         }
         try {
-          const V = await fetch(C, { method: "HEAD" });
-          H.set(C, V.ok), V.ok && D.push(M);
+          const K = await fetch(I, { method: "HEAD" });
+          H.set(I, K.ok), K.ok && R.push(L);
         } catch {
-          H.set(C, !1);
+          H.set(I, !1);
         }
       }
-      h || F(
-        D.length > 0 ? D : v
+      r || D(
+        R.length > 0 ? R : s
       );
     })(), () => {
-      h = !0;
+      r = !0;
     };
-  }, [e, v, b, R]);
-  const U = j ?? v, t = {};
-  E != null && (t.width = E), S != null && (t.height = S), y && E == null && S == null && (t.width = y.width, t.height = y.height);
-  const l = {
+  }, [e, s, S, x]);
+  const z = B ?? s, b = {};
+  v != null && (b.width = v), $ != null && (b.height = $), E && v == null && $ == null && (b.width = E.width, b.height = E.height);
+  const o = {
     maxWidth: "100%",
     height: "auto",
-    ...O
+    ...F
   };
-  if (R)
-    return /* @__PURE__ */ g(
+  if (x)
+    return /* @__PURE__ */ m(
       "img",
       {
         src: e,
-        alt: r,
-        loading: k,
-        decoding: L,
+        alt: c,
+        loading: a,
+        decoding: j,
         fetchPriority: P,
-        className: m,
-        style: l,
-        ...t,
-        ...T
+        className: u,
+        style: o,
+        ...b,
+        ...k
       }
     );
-  if (W)
-    return /* @__PURE__ */ B("picture", { "data-routerino-image": "true", "data-original-src": e, children: [
-      /* @__PURE__ */ g(
+  if (U)
+    return /* @__PURE__ */ q("picture", { "data-routerino-image": "true", "data-original-src": e, children: [
+      /* @__PURE__ */ m(
         "source",
         {
-          srcSet: q(e, u, "webp"),
+          srcSet: O(e, f, "webp"),
           type: "image/webp",
-          sizes: a
+          sizes: l
         }
       ),
-      /* @__PURE__ */ g(
+      /* @__PURE__ */ m(
         "img",
         {
           src: e,
-          alt: r,
-          srcSet: q(e, u),
-          sizes: a,
-          loading: k,
+          alt: c,
+          srcSet: O(e, f),
+          sizes: l,
+          loading: a,
           decoding: "async",
           fetchPriority: P,
-          className: m,
-          style: l,
-          ...t,
-          ...T
+          className: u,
+          style: o,
+          ...b,
+          ...k
         }
       )
     ] });
-  const w = q(e, U, "webp"), d = q(e, U);
-  return /* @__PURE__ */ B("picture", { "data-routerino-image": "true", "data-original-src": e, children: [
-    /* @__PURE__ */ g("source", { srcSet: w, type: "image/webp", sizes: a }),
-    /* @__PURE__ */ g(
+  const p = O(e, z, "webp"), g = O(e, z);
+  return /* @__PURE__ */ q("picture", { "data-routerino-image": "true", "data-original-src": e, children: [
+    /* @__PURE__ */ m("source", { srcSet: p, type: "image/webp", sizes: l }),
+    /* @__PURE__ */ m(
       "img",
       {
         src: e,
-        alt: r,
-        srcSet: d,
-        sizes: a,
-        loading: k,
-        decoding: L,
+        alt: c,
+        srcSet: g,
+        sizes: l,
+        loading: a,
+        decoding: j,
         fetchPriority: P,
-        className: m,
-        style: l,
-        ...t,
-        ...T
+        className: u,
+        style: o,
+        ...b,
+        ...k
       }
     )
   ] });
 }
 oe.propTypes = {
   /** Image source URL (required) */
-  src: o.string.isRequired,
+  src: t.string.isRequired,
   /** Alt text for accessibility (required) */
-  alt: o.string.isRequired,
+  alt: t.string.isRequired,
   /** Override lazy loading for hero/LCP images */
-  priority: o.bool,
+  priority: t.bool,
   /** Responsive widths to generate (defaults to [480, 800, 1200, 1920]) */
-  widths: o.arrayOf(o.number),
+  widths: t.arrayOf(t.number),
   /** Responsive sizes attribute (has smart default) */
-  sizes: o.string,
+  sizes: t.string,
   /** CSS classes (Tailwind/DaisyUI ready) */
-  className: o.string,
+  className: t.string,
   /** Inline styles */
-  style: o.object,
+  style: t.object,
   /** Explicit width for CLS prevention */
-  width: o.number,
+  width: t.number,
   /** Explicit height for CLS prevention */
-  height: o.number,
+  height: t.number,
   /** Loading behavior (auto-set based on priority) */
-  loading: o.oneOf(["lazy", "eager"]),
+  loading: t.oneOf(["lazy", "eager"]),
   /** Decode timing */
-  decoding: o.oneOf(["sync", "async", "auto"]),
+  decoding: t.oneOf(["sync", "async", "auto"]),
   /** Fetch priority (auto-set based on priority) */
-  fetchpriority: o.oneOf(["high", "low", "auto"])
+  fetchpriority: t.oneOf(["high", "low", "auto"])
 };
-const K = N(null);
-function le() {
-  const i = X(K);
+const ne = [
+  ".pdf",
+  ".doc",
+  ".docx",
+  ".xls",
+  ".xlsx",
+  ".ppt",
+  ".pptx",
+  ".odt",
+  ".ods",
+  ".odp",
+  ".rtf",
+  ".csv",
+  ".txt",
+  ".md",
+  ".png",
+  ".jpg",
+  ".jpeg",
+  ".gif",
+  ".svg",
+  ".webp",
+  ".avif",
+  ".ico",
+  ".bmp",
+  ".tiff",
+  ".tif",
+  ".mp4",
+  ".webm",
+  ".ogv",
+  ".mov",
+  ".avi",
+  ".mkv",
+  ".flv",
+  ".mp3",
+  ".wav",
+  ".ogg",
+  ".flac",
+  ".aac",
+  ".m4a",
+  ".wma",
+  ".woff",
+  ".woff2",
+  ".ttf",
+  ".eot",
+  ".zip",
+  ".tar",
+  ".gz",
+  ".bz2",
+  ".7z",
+  ".rar",
+  ".xz",
+  ".zst",
+  ".epub",
+  ".mobi",
+  ".json",
+  ".xml",
+  ".yml",
+  ".yaml",
+  ".css",
+  ".js",
+  ".map",
+  ".wasm"
+], N = Z(null);
+function ue() {
+  const i = Q(N);
   if (!i)
     throw new Error(
       "useRouterino must be used within a Routerino router. Make sure your component is rendered inside a <Routerino> component."
     );
   return i;
 }
-function p({ tag: i = "meta", soft: e = !1, ...r }) {
-  const n = Object.keys(r);
-  if (n.length < 1)
+function h({
+  tag: i = "meta",
+  soft: e = !1,
+  innerHTML: c,
+  ...n
+}) {
+  const f = Object.keys(n);
+  if (f.length < 1)
     return console.error(
       `[Routerino] updateHeadTag() received no attributes to set for ${i} tag`
     );
-  let u = null;
-  for (let a = 0; a < n.length && (n[a] !== "content" && (u = document.querySelector(
-    `${i}[${n[a]}='${r[n[a]]}']`
-  )), !u); a++)
+  let l = null;
+  for (let u = 0; u < f.length && (f[u] !== "content" && (l = document.querySelector(
+    `${i}[${f[u]}='${n[f[u]]}']`
+  )), !l); u++)
     ;
-  u && e || (u || (u = document.createElement(i)), n.forEach((a) => u.setAttribute(a, r[a])), document.querySelector("head").appendChild(u));
+  l && e || (l || (l = document.createElement(i)), f.forEach((u) => l.setAttribute(u, n[u])), c !== void 0 && (l.innerHTML = c), document.querySelector("head").appendChild(l));
 }
-function ne({ routePattern: i, currentRoute: e }) {
-  let r = {}, n = i.split("/"), u = e.split("/");
-  return n.forEach((a, m) => {
-    a.startsWith(":") && (r[a.slice(1)] = u[m]);
-  }), r;
+function re({ routePattern: i, currentRoute: e }) {
+  let c = {}, n = i.split("/"), f = e.split("/");
+  return n.forEach((l, u) => {
+    l.startsWith(":") && (c[l.slice(1)] = f[u]);
+  }), c;
 }
-class Z extends Q {
+class G extends J {
   constructor(e) {
     super(e), this.state = { hasError: !1 };
   }
   static getDerivedStateFromError() {
     return { hasError: !0 };
   }
-  componentDidCatch(e, r) {
+  componentDidCatch(e, c) {
     this.props.debug && (console.group(
       "%c[Routerino]%c Error Boundary Caught an Error",
       "color: #ff6b6b; font-weight: bold",
       "",
       e
-    ), console.error("[Routerino] Component Stack:", r.componentStack), this.props.routePath && console.error("[Routerino] Failed Route:", this.props.routePath), console.error("[Routerino] Error occurred at:", (/* @__PURE__ */ new Date()).toISOString()), console.groupEnd()), document.title = this.props.errorTitleString, this.props.usePrerenderTags && p({ name: "prerender-status-code", content: "500" });
+    ), console.error("[Routerino] Component Stack:", c.componentStack), this.props.routePath && console.error("[Routerino] Failed Route:", this.props.routePath), console.error("[Routerino] Error occurred at:", (/* @__PURE__ */ new Date()).toISOString()), console.groupEnd()), document.title = this.props.errorTitleString, this.props.usePrerenderTags && h({ name: "prerender-status-code", content: "500" });
   }
   render() {
     return this.state.hasError ? this.props.fallback : this.props.children;
   }
 }
-Z.propTypes = {
+G.propTypes = {
   /** The child components to render when there's no error */
-  children: o.node,
+  children: t.node,
   /** The fallback UI to display when an error is caught */
-  fallback: o.node,
+  fallback: t.node,
   /** The document title to set when an error occurs */
-  errorTitleString: o.string.isRequired,
+  errorTitleString: t.string.isRequired,
   /** Whether to set prerender meta tags (status code 500) on error */
-  usePrerenderTags: o.bool,
+  usePrerenderTags: t.bool,
   /** The current route path for better error context (optional) */
-  routePath: o.string,
+  routePath: t.string,
   /** Whether to log debug messages to console (optional) */
-  debug: o.bool
+  debug: t.bool
 };
-function re({
+function ie({
   routes: i = [
     {
       path: "/",
-      element: /* @__PURE__ */ g("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." }),
+      element: /* @__PURE__ */ m("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: e = /* @__PURE__ */ B(G, { children: [
-    /* @__PURE__ */ g("p", { children: "No page found for this URL. [404]" }),
-    /* @__PURE__ */ g("p", { children: /* @__PURE__ */ g("a", { href: "/", children: "Home" }) })
+  notFoundTemplate: e = /* @__PURE__ */ q(V, { children: [
+    /* @__PURE__ */ m("p", { children: "No page found for this URL. [404]" }),
+    /* @__PURE__ */ m("p", { children: /* @__PURE__ */ m("a", { href: "/", children: "Home" }) })
   ] }),
-  notFoundTitle: r = "Page not found [404]",
-  errorTemplate: n = /* @__PURE__ */ B(G, { children: [
-    /* @__PURE__ */ g("p", { children: "Page failed to load. [500]" }),
-    /* @__PURE__ */ g("p", { children: /* @__PURE__ */ g("a", { href: "/", children: "Home" }) })
+  notFoundTitle: c = "Page not found [404]",
+  errorTemplate: n = /* @__PURE__ */ q(V, { children: [
+    /* @__PURE__ */ m("p", { children: "Page failed to load. [500]" }),
+    /* @__PURE__ */ m("p", { children: /* @__PURE__ */ m("a", { href: "/", children: "Home" }) })
   ] }),
-  errorTitle: u = "Page error [500]",
-  useTrailingSlash: a = !0,
-  usePrerenderTags: m = !1,
-  baseUrl: O = null,
-  title: E = "",
-  separator: S = " | ",
-  imageUrl: I = null,
-  touchIconUrl: L = null,
-  debug: f = !1
+  errorTitle: f = "Page error [500]",
+  useTrailingSlash: l = !0,
+  usePrerenderTags: u = !1,
+  baseUrl: F = null,
+  title: v = "",
+  separator: $ = " | ",
+  imageUrl: A = null,
+  touchIconUrl: j = null,
+  debug: d = !1,
+  ignorePatterns: k = []
 }) {
-  const T = `${u}${S}${E}`, W = `${r}${S}${E}`;
+  const U = [f, v].filter(Boolean).join($), S = [c, v].filter(Boolean).join($);
   try {
-    if (f) {
-      const t = i.map((w) => w.path), l = t.filter(
-        (w, d) => t.indexOf(w) !== d
+    if (d) {
+      const o = i.map((g) => g.path), p = o.filter(
+        (g, r) => o.indexOf(g) !== r
       );
-      l.length > 0 && (console.warn(
+      p.length > 0 && (console.warn(
         "%c[Routerino]%c Duplicate route paths detected:",
         "color: #f59e0b; font-weight: bold",
         "",
-        [...new Set(l)]
+        [...new Set(p)]
       ), console.warn(
         "%c[Routerino]%c The first matching route will be used",
         "color: #f59e0b; font-weight: bold",
         ""
       ));
     }
-    const [b, R] = z(window?.location?.href ?? "/");
+    const [x, W] = M(window?.location?.href ?? "/");
     _(() => {
       if (typeof window > "u" || typeof document > "u")
         return;
-      const t = (w) => {
-        f && console.debug(
+      const o = (g) => {
+        d && console.debug(
           "%c[Routerino]%c click occurred",
           "color: #6b7280; font-weight: bold",
           ""
         );
-        let d = w.target;
-        for (; d.tagName !== "A" && d.parentElement; )
-          d = d.parentElement;
-        if (d.tagName !== "A") {
-          f && console.debug(
+        let r = g.target;
+        for (; r.tagName !== "A" && r.parentElement; )
+          r = r.parentElement;
+        if (r.tagName !== "A") {
+          d && console.debug(
             "%c[Routerino]%c no anchor tag found during click",
             "color: #6b7280; font-weight: bold",
             ""
           );
           return;
         }
-        const h = d.getAttribute("href") || d.href;
-        if (!h) {
-          f && console.debug(
+        if (g.defaultPrevented || g.button !== 0 || g.ctrlKey || g.metaKey || g.shiftKey || g.altKey || r.getAttribute("target") === "_blank" || r.hasAttribute("download") || r.getAttribute("rel") === "external")
+          return;
+        const w = r.getAttribute("href") || r.href;
+        if (!w) {
+          d && console.debug(
             "%c[Routerino]%c anchor tag has no href",
             "color: #6b7280; font-weight: bold",
             ""
           );
           return;
         }
-        if (!/^(https?:\/\/|\/|\.\/|\.\.\/|[^:]+$)/i.test(h)) {
-          f && console.debug(
+        if (!/^(https?:\/\/|\/|\.\/|\.\.\/|[^:]+$)/i.test(w)) {
+          d && console.debug(
             "%c[Routerino]%c skipping non-http URL:",
             "color: #6b7280; font-weight: bold",
             "",
-            h
+            w
           );
           return;
         }
-        f && console.debug(
+        d && console.debug(
           "%c[Routerino]%c click target href:",
           "color: #6b7280; font-weight: bold",
           "",
-          h
+          w
         );
-        let $;
+        let y;
         try {
-          $ = new URL(h, window.location.href);
-        } catch (x) {
-          f && console.debug(
+          y = new URL(w, window.location.href);
+        } catch (T) {
+          d && console.debug(
             "%c[Routerino]%c Invalid URL:",
             "color: #6b7280; font-weight: bold",
             "",
-            h,
-            x
+            w,
+            T
           );
           return;
         }
-        if (f && console.debug(
+        if (d && console.debug(
           "%c[Routerino]%c targetUrl:",
           "color: #6b7280; font-weight: bold",
           "",
-          $,
+          y,
           "current:",
           window.location
-        ), $ && window.location.origin === $.origin)
-          if (f && console.debug(
+        ), y && window.location.origin === y.origin) {
+          const T = y.pathname.toLowerCase();
+          if (ne.some((R) => T.endsWith(R))) {
+            d && console.debug(
+              "%c[Routerino]%c skipping file extension link:",
+              "color: #6b7280; font-weight: bold",
+              "",
+              w
+            );
+            return;
+          }
+          if (k.length > 0 && k.some(
+            (R) => new RegExp(R, "i").test(w)
+          )) {
+            d && console.debug(
+              "%c[Routerino]%c skipping ignored link pattern:",
+              "color: #6b7280; font-weight: bold",
+              "",
+              w
+            );
+            return;
+          }
+          if (d && console.debug(
             "%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 && (R(d.href), window.history.pushState({}, "", d.href)), d.hash) {
-            const x = decodeURIComponent(d.hash.slice(1));
+          ), g.preventDefault(), r.href !== window.location.href && (W(r.href), window.history.pushState({}, "", r.href)), r.hash) {
+            const R = decodeURIComponent(r.hash.slice(1));
             setTimeout(() => {
-              const A = document.getElementById(x);
-              A ? A.scrollIntoView({ behavior: "auto" }) : window.scrollTo({ top: 0, behavior: "auto" });
+              const L = document.getElementById(R);
+              L ? L.scrollIntoView({ behavior: "auto" }) : window.scrollTo({ top: 0, behavior: "auto" });
             }, 0);
           } else
             window.scrollTo({
               top: 0,
               behavior: "auto"
             });
-        else f && console.debug(
+        } else d && 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", t);
-      const l = () => {
-        f && console.debug(
+      document.addEventListener("click", o);
+      const p = () => {
+        d && console.debug(
           "%c[Routerino]%c route change ->",
           "color: #6b7280; font-weight: bold",
           "",
           window.location.pathname
-        ), R(window.location.href);
+        ), W(window.location.href);
       };
-      return window.addEventListener("popstate", l), () => {
-        document.removeEventListener("click", t), window.removeEventListener("popstate", l);
+      return window.addEventListener("popstate", p), () => {
+        document.removeEventListener("click", o), window.removeEventListener("popstate", p);
       };
-    }, [b]);
-    let c = window?.location?.pathname ?? "/";
-    (c === "/index.html" || c === "") && (c = "/");
-    const k = i.find((t) => t.path === c), P = i.find(
-      (t) => `${t.path}/` === c || t.path === `${c}/`
-    ), y = i.find((t) => {
-      const l = t.path.endsWith("/") ? t.path.slice(0, -1) : t.path, w = c.endsWith("/") ? c.slice(0, -1) : c, d = l.split("/").filter(Boolean), h = w.split("/").filter(Boolean);
-      return d.length !== h.length ? !1 : d.every(($, x) => $.startsWith(":") ? !0 : $ === h[x]);
-    }), s = k ?? P ?? y;
-    if (f && console.debug(
+    }, [x, k]);
+    let a = window?.location?.pathname ?? "/";
+    (a === "/index.html" || a === "") && (a = "/");
+    const P = i.find((o) => o.path === a), E = i.find(
+      (o) => `${o.path}/` === a || o.path === `${a}/`
+    ), C = i.find((o) => {
+      const p = o.path.endsWith("/") ? o.path.slice(0, -1) : o.path, g = a.endsWith("/") ? a.slice(0, -1) : a, r = p.split("/").filter(Boolean), w = g.split("/").filter(Boolean);
+      return r.length !== w.length ? !1 : r.every((y, T) => y.startsWith(":") ? !0 : y === w[T]);
+    }), s = P ?? E ?? C;
+    if (d && console.debug(
       "%c[Routerino]%c Route matching:",
       "color: #6b7280; font-weight: bold",
       "",
-      { match: s, exactMatch: k, addSlashMatch: P, paramsMatch: y }
+      { match: s, exactMatch: P, addSlashMatch: E, paramsMatch: C }
     ), !s)
-      return f && (console.group(
+      return d && (console.group(
         "%c[Routerino]%c 404 - No matching route",
         "color: #f59e0b; font-weight: bold",
         ""
@@ -387,84 +478,84 @@ function re({
         "%c[Routerino]%c Requested path:",
         "color: #f59e0b; font-weight: bold",
         "",
-        c
+        a
       ), console.warn(
         "%c[Routerino]%c Available routes:",
         "color: #f59e0b; font-weight: bold",
         "",
-        i.map((t) => t.path)
-      ), console.groupEnd()), document.title = W, m && p({ name: "prerender-status-code", content: "404" }), e;
-    if (m) {
-      const t = document.querySelector(
+        i.map((o) => o.path)
+      ), console.groupEnd()), document.title = S, u && h({ name: "prerender-status-code", content: "404" }), e;
+    if (u) {
+      const o = document.querySelector(
         'meta[name="prerender-status-code"]'
       );
-      t && t.remove();
-      const l = document.querySelector(
+      o && o.remove();
+      const p = document.querySelector(
         'meta[name="prerender-header"]'
       );
-      l && l.remove();
+      p && p.remove();
     }
-    const v = a && !c.endsWith("/") && c !== "/", j = !a && c.endsWith("/") && c !== "/", F = v ? `${c}/` : j ? c.slice(0, -1) : c, U = `${O ?? window?.location?.origin ?? ""}${F}`;
-    if (s.title) {
-      const t = `${s.title}${S}${E}`;
-      document.title = t, p({
-        tag: "link",
-        rel: "canonical",
-        href: U
-      }), s.tags?.find(({ property: l }) => l === "og:title") || p({
+    const B = l && !a.endsWith("/") && a !== "/", D = !l && a.endsWith("/") && a !== "/", z = B ? `${a}/` : D ? a.slice(0, -1) : a, b = `${F ?? window?.location?.origin ?? ""}${z}`;
+    if (s.title || v) {
+      const o = [s.title, v].filter(Boolean).join($);
+      document.title = o, s.tags?.find(({ property: p }) => p === "og:title") || h({
         property: "og:title",
-        content: t
-      }), s.tags?.find(({ property: l }) => l === "og:url") || p({
-        property: "og:url",
-        content: U
+        content: o
       });
     }
-    if (s.description && (p({ name: "description", content: s.description }), s.tags?.find(({ property: t }) => t === "og:description") || p({
+    if (h({
+      tag: "link",
+      rel: "canonical",
+      href: b
+    }), s.tags?.find(({ property: o }) => o === "og:url") || h({
+      property: "og:url",
+      content: b
+    }), s.description && (h({ name: "description", content: s.description }), s.tags?.find(({ property: o }) => o === "og:description") || h({
       property: "og:description",
       content: s.description
-    })), (I || s.imageUrl) && p({
+    })), (A || s.imageUrl) && h({
       property: "og:image",
-      content: s.imageUrl ?? I
-    }), s.tags?.find(({ property: t }) => t === "twitter:card") || p({
+      content: s.imageUrl ?? A
+    }), s.tags?.find(({ property: o }) => o === "twitter:card") || h({
       name: "twitter:card",
       content: "summary_large_image"
-    }), L && p({
+    }), j && h({
       tag: "link",
       rel: "apple-touch-icon",
-      href: L
-    }), m && (v || j) && (p({ name: "prerender-status-code", content: "301" }), p({
+      href: j
+    }), u && (B || D) && (h({ name: "prerender-status-code", content: "301" }), h({
       name: "prerender-header",
-      content: `Location: ${U}`
-    })), s.tags && s.tags.length ? (s.tags.find(({ property: t }) => t === "og:type") || p({ property: "og:type", content: "website" }), s.tags.forEach((t) => p(t))) : p({ property: "og:type", content: "website" }), s.element) {
-      const t = ne({
+      content: `Location: ${b}`
+    })), s.tags && s.tags.length ? (s.tags.find(({ property: o }) => o === "og:type") || h({ property: "og:type", content: "website" }), s.tags.forEach((o) => h(o))) : h({ property: "og:type", content: "website" }), s.element) {
+      const o = re({
         routePattern: s.path,
-        currentRoute: c
-      }), l = {
-        currentRoute: c,
-        params: t,
+        currentRoute: a
+      }), p = {
+        currentRoute: a,
+        params: o,
         routePattern: s.path,
-        updateHeadTag: p
+        updateHeadTag: h
       };
-      return /* @__PURE__ */ g(K.Provider, { value: l, children: /* @__PURE__ */ g(
-        Z,
+      return /* @__PURE__ */ m(N.Provider, { value: p, children: /* @__PURE__ */ m(
+        G,
         {
           fallback: n,
-          errorTitleString: T,
-          usePrerenderTags: m,
-          routePath: c,
-          debug: f,
+          errorTitleString: U,
+          usePrerenderTags: u,
+          routePath: a,
+          debug: d,
           children: s.element
         }
       ) });
     }
-    return f && console.error(
+    return d && console.error(
       "%c[Routerino]%c No route found for",
       "color: #ff6b6b; font-weight: bold",
       "",
-      c
-    ), document.title = W, m && p({ name: "prerender-status-code", content: "404" }), e;
-  } catch (b) {
-    return f && (console.group(
+      a
+    ), document.title = S, u && h({ name: "prerender-status-code", content: "404" }), e;
+  } catch (x) {
+    return d && (console.group(
       "%c[Routerino]%c Fatal Error",
       "color: #ff6b6b; font-weight: bold",
       ""
@@ -476,64 +567,65 @@ function re({
       "%c[Routerino]%c Error:",
       "color: #ff6b6b; font-weight: bold",
       "",
-      b
+      x
     ), console.error(
       "%c[Routerino]%c This typically means an issue with route configuration or router setup",
       "color: #ff6b6b; font-weight: bold",
       ""
-    ), console.groupEnd()), m && p({ name: "prerender-status-code", content: "500" }), document.title = T, n;
+    ), console.groupEnd()), u && h({ name: "prerender-status-code", content: "500" }), document.title = U, n;
   }
 }
-const ie = o.exact({
-  path: (i, e, r) => {
+const ce = t.exact({
+  path: (i, e, c) => {
     const n = i[e];
     return n == null ? new Error(
-      `The prop \`${e}\` is marked as required in \`${r}\`, but its value is \`${n}\`.`
+      `The prop \`${e}\` is marked as required in \`${c}\`, but its value is \`${n}\`.`
     ) : typeof n != "string" ? new Error(
-      `Invalid prop \`${e}\` of type \`${typeof n}\` supplied to \`${r}\`, expected \`string\`.`
+      `Invalid prop \`${e}\` of type \`${typeof n}\` supplied to \`${c}\`, expected \`string\`.`
     ) : n.startsWith("/") ? null : new Error(
-      `Invalid prop \`${e}\` value \`${n}\` supplied to \`${r}\`. Route paths must start with a forward slash (/).`
+      `Invalid prop \`${e}\` value \`${n}\` supplied to \`${c}\`. Route paths must start with a forward slash (/).`
     );
   },
-  element: o.element.isRequired,
-  title: o.string,
-  description: o.string,
-  tags: o.arrayOf(o.object),
-  imageUrl: o.string
+  element: t.element.isRequired,
+  title: t.string,
+  description: t.string,
+  tags: t.arrayOf(t.object),
+  imageUrl: t.string
 });
-re.propTypes = {
-  routes: o.arrayOf(ie),
-  title: o.string,
-  separator: o.string,
-  notFoundTemplate: o.element,
-  notFoundTitle: o.string,
-  errorTemplate: o.element,
-  errorTitle: o.string,
-  useTrailingSlash: o.bool,
-  usePrerenderTags: o.bool,
-  baseUrl: (i, e, r) => {
+ie.propTypes = {
+  routes: t.arrayOf(ce),
+  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: (i, e, c) => {
     const n = i[e];
     if (n != null) {
       if (typeof n != "string")
         return new Error(
-          `Invalid prop \`${e}\` of type \`${typeof n}\` supplied to \`${r}\`, expected \`string\`.`
+          `Invalid prop \`${e}\` of type \`${typeof n}\` supplied to \`${c}\`, expected \`string\`.`
         );
       if (n.endsWith("/"))
         return new Error(
-          `Invalid prop \`${e}\` supplied to \`${r}\`. The baseUrl should not end with a slash. Got: "${n}"`
+          `Invalid prop \`${e}\` supplied to \`${c}\`. The baseUrl should not end with a slash. Got: "${n}"`
         );
     }
     return null;
   },
-  imageUrl: o.string,
-  touchIconUrl: o.string,
-  debug: o.bool
+  imageUrl: t.string,
+  touchIconUrl: t.string,
+  debug: t.bool,
+  ignorePatterns: t.arrayOf(t.string)
 };
 export {
-  Z as ErrorBoundary,
+  G as ErrorBoundary,
   oe as Image,
-  re as Routerino,
-  re as default,
-  p as updateHeadTag,
-  le as useRouterino
+  ie as Routerino,
+  ie as default,
+  h as updateHeadTag,
+  ue as useRouterino
 };

package/dist/routerino.umd.cjs

@@ -1 +1 @@
-(function(w,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("react/jsx-runtime"),require("react"),require("prop-types")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","prop-types"],c):(w=typeof globalThis<"u"?globalThis:w||self,c(w.routerino={},w["react/jsx-runtime"],w.React,w.PropTypes))})(this,(function(w,c,b,o){"use strict";const Q=[480,800,1200,1920],X="(max-width: 480px) 100vw, (max-width: 800px) 800px, (max-width: 1200px) 1200px, 1920px",A=new Map;function Y(i,e=""){const r=i.toLowerCase(),n=e.toLowerCase();return!!(r.includes("hero")||r.includes("banner")||n.includes("hero")||n.includes("banner")||n.includes("h-screen")||n.includes("h-full"))}function D(i,e,r=null){const n=i.replace(/\.(jpe?g|png|webp)$/i,""),f=r?`.${r}`:i.match(/\.(jpe?g|png|webp)$/i)?.[0]||".jpg";return e.map(s=>`${n}-${s}w${f} ${s}w`).join(", ")}function Z(i){const{src:e="",alt:r="",priority:n,widths:f=Q,sizes:s=X,className:m="",style:V={},width:R,height:x,loading:B,decoding:C="async",fetchpriority:p,...L}=i||{},q=typeof window>"u",S=!q&&typeof document<"u"&&typeof HTMLElement<"u"&&document.createElement("div")instanceof HTMLElement,y=S&&(window.location.hostname==="localhost"||window.location.hostname==="127.0.0.1"),a=n??Y(e,m),W=B||(a?"eager":"lazy"),I=p||(a?"high":void 0),[E,l]=b.useState(null);b.useEffect(()=>{if(!S||y||!e)return;const g=new window.Image;g.onload=()=>{l({width:g.naturalWidth,height:g.naturalHeight})},g.src=e},[e,S,y]);const k=b.useMemo(()=>E?f.filter(g=>E.width>=g):f,[E,f]),[O,G]=b.useState(null);b.useEffect(()=>{if(!S||y)return;let g=!1;return(async()=>{const U=e.replace(/\.(jpe?g|png|webp)$/i,""),F=e.match(/\.(jpe?g|png|webp)$/i)?.[0]||".jpg",M=[];for(const K of k){const H=`${U}-${K}w${F}`;if(A.has(H)){A.get(H)&&M.push(K);continue}try{const N=await fetch(H,{method:"HEAD"});A.set(H,N.ok),N.ok&&M.push(K)}catch{A.set(H,!1)}}g||G(M.length>0?M:k)})(),()=>{g=!0}},[e,k,S,y]);const j=O??k,t={};R!=null&&(t.width=R),x!=null&&(t.height=x),E&&R==null&&x==null&&(t.width=E.width,t.height=E.height);const u={maxWidth:"100%",height:"auto",...V};if(y)return c.jsx("img",{src:e,alt:r,loading:W,decoding:C,fetchPriority:I,className:m,style:u,...t,...L});if(q)return c.jsxs("picture",{"data-routerino-image":"true","data-original-src":e,children:[c.jsx("source",{srcSet:D(e,f,"webp"),type:"image/webp",sizes:s}),c.jsx("img",{src:e,alt:r,srcSet:D(e,f),sizes:s,loading:W,decoding:"async",fetchPriority:I,className:m,style:u,...t,...L})]});const $=D(e,j,"webp"),h=D(e,j);return c.jsxs("picture",{"data-routerino-image":"true","data-original-src":e,children:[c.jsx("source",{srcSet:$,type:"image/webp",sizes:s}),c.jsx("img",{src:e,alt:r,srcSet:h,sizes:s,loading:W,decoding:C,fetchPriority:I,className:m,style:u,...t,...L})]})}Z.propTypes={src:o.string.isRequired,alt:o.string.isRequired,priority:o.bool,widths:o.arrayOf(o.number),sizes:o.string,className:o.string,style:o.object,width:o.number,height:o.number,loading:o.oneOf(["lazy","eager"]),decoding:o.oneOf(["sync","async","auto"]),fetchpriority:o.oneOf(["high","low","auto"])};const J=b.createContext(null);function T(){const i=b.useContext(J);if(!i)throw new Error("useRouterino must be used within a Routerino router. Make sure your component is rendered inside a <Routerino> component.");return i}function d({tag:i="meta",soft:e=!1,...r}){const n=Object.keys(r);if(n.length<1)return console.error(`[Routerino] updateHeadTag() received no attributes to set for ${i} tag`);let f=null;for(let s=0;s<n.length&&(n[s]!=="content"&&(f=document.querySelector(`${i}[${n[s]}='${r[n[s]]}']`)),!f);s++);f&&e||(f||(f=document.createElement(i)),n.forEach(s=>f.setAttribute(s,r[s])),document.querySelector("head").appendChild(f))}function P({routePattern:i,currentRoute:e}){let r={},n=i.split("/"),f=e.split("/");return n.forEach((s,m)=>{s.startsWith(":")&&(r[s.slice(1)]=f[m])}),r}class _ extends b.Component{constructor(e){super(e),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(e,r){this.props.debug&&(console.group("%c[Routerino]%c Error Boundary Caught an Error","color: #ff6b6b; font-weight: bold","",e),console.error("[Routerino] Component Stack:",r.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&&d({name:"prerender-status-code",content:"500"})}render(){return this.state.hasError?this.props.fallback:this.props.children}}_.propTypes={children:o.node,fallback:o.node,errorTitleString:o.string.isRequired,usePrerenderTags:o.bool,routePath:o.string,debug:o.bool};function z({routes:i=[{path:"/",element:c.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:e=c.jsxs(c.Fragment,{children:[c.jsx("p",{children:"No page found for this URL. [404]"}),c.jsx("p",{children:c.jsx("a",{href:"/",children:"Home"})})]}),notFoundTitle:r="Page not found [404]",errorTemplate:n=c.jsxs(c.Fragment,{children:[c.jsx("p",{children:"Page failed to load. [500]"}),c.jsx("p",{children:c.jsx("a",{href:"/",children:"Home"})})]}),errorTitle:f="Page error [500]",useTrailingSlash:s=!0,usePrerenderTags:m=!1,baseUrl:V=null,title:R="",separator:x=" | ",imageUrl:B=null,touchIconUrl:C=null,debug:p=!1}){const L=`${f}${x}${R}`,q=`${r}${x}${R}`;try{if(p){const t=i.map($=>$.path),u=t.filter(($,h)=>t.indexOf($)!==h);u.length>0&&(console.warn("%c[Routerino]%c Duplicate route paths detected:","color: #f59e0b; font-weight: bold","",[...new Set(u)]),console.warn("%c[Routerino]%c The first matching route will be used","color: #f59e0b; font-weight: bold",""))}const[S,y]=b.useState(window?.location?.href??"/");b.useEffect(()=>{if(typeof window>"u"||typeof document>"u")return;const t=$=>{p&&console.debug("%c[Routerino]%c click occurred","color: #6b7280; font-weight: bold","");let h=$.target;for(;h.tagName!=="A"&&h.parentElement;)h=h.parentElement;if(h.tagName!=="A"){p&&console.debug("%c[Routerino]%c no anchor tag found during click","color: #6b7280; font-weight: bold","");return}const g=h.getAttribute("href")||h.href;if(!g){p&&console.debug("%c[Routerino]%c anchor tag has no href","color: #6b7280; font-weight: bold","");return}if(!/^(https?:\/\/|\/|\.\/|\.\.\/|[^:]+$)/i.test(g)){p&&console.debug("%c[Routerino]%c skipping non-http URL:","color: #6b7280; font-weight: bold","",g);return}p&&console.debug("%c[Routerino]%c click target href:","color: #6b7280; font-weight: bold","",g);let v;try{v=new URL(g,window.location.href)}catch(U){p&&console.debug("%c[Routerino]%c Invalid URL:","color: #6b7280; font-weight: bold","",g,U);return}if(p&&console.debug("%c[Routerino]%c targetUrl:","color: #6b7280; font-weight: bold","",v,"current:",window.location),v&&window.location.origin===v.origin)if(p&&console.debug("%c[Routerino]%c target link is same origin, will use push-state transitioning","color: #6b7280; font-weight: bold",""),$.preventDefault(),h.href!==window.location.href&&(y(h.href),window.history.pushState({},"",h.href)),h.hash){const U=decodeURIComponent(h.hash.slice(1));setTimeout(()=>{const F=document.getElementById(U);F?F.scrollIntoView({behavior:"auto"}):window.scrollTo({top:0,behavior:"auto"})},0)}else window.scrollTo({top:0,behavior:"auto"});else p&&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",t);const u=()=>{p&&console.debug("%c[Routerino]%c route change ->","color: #6b7280; font-weight: bold","",window.location.pathname),y(window.location.href)};return window.addEventListener("popstate",u),()=>{document.removeEventListener("click",t),window.removeEventListener("popstate",u)}},[S]);let a=window?.location?.pathname??"/";(a==="/index.html"||a==="")&&(a="/");const W=i.find(t=>t.path===a),I=i.find(t=>`${t.path}/`===a||t.path===`${a}/`),E=i.find(t=>{const u=t.path.endsWith("/")?t.path.slice(0,-1):t.path,$=a.endsWith("/")?a.slice(0,-1):a,h=u.split("/").filter(Boolean),g=$.split("/").filter(Boolean);return h.length!==g.length?!1:h.every((v,U)=>v.startsWith(":")?!0:v===g[U])}),l=W??I??E;if(p&&console.debug("%c[Routerino]%c Route matching:","color: #6b7280; font-weight: bold","",{match:l,exactMatch:W,addSlashMatch:I,paramsMatch:E}),!l)return p&&(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","",a),console.warn("%c[Routerino]%c Available routes:","color: #f59e0b; font-weight: bold","",i.map(t=>t.path)),console.groupEnd()),document.title=q,m&&d({name:"prerender-status-code",content:"404"}),e;if(m){const t=document.querySelector('meta[name="prerender-status-code"]');t&&t.remove();const u=document.querySelector('meta[name="prerender-header"]');u&&u.remove()}const k=s&&!a.endsWith("/")&&a!=="/",O=!s&&a.endsWith("/")&&a!=="/",G=k?`${a}/`:O?a.slice(0,-1):a,j=`${V??window?.location?.origin??""}${G}`;if(l.title){const t=`${l.title}${x}${R}`;document.title=t,d({tag:"link",rel:"canonical",href:j}),l.tags?.find(({property:u})=>u==="og:title")||d({property:"og:title",content:t}),l.tags?.find(({property:u})=>u==="og:url")||d({property:"og:url",content:j})}if(l.description&&(d({name:"description",content:l.description}),l.tags?.find(({property:t})=>t==="og:description")||d({property:"og:description",content:l.description})),(B||l.imageUrl)&&d({property:"og:image",content:l.imageUrl??B}),l.tags?.find(({property:t})=>t==="twitter:card")||d({name:"twitter:card",content:"summary_large_image"}),C&&d({tag:"link",rel:"apple-touch-icon",href:C}),m&&(k||O)&&(d({name:"prerender-status-code",content:"301"}),d({name:"prerender-header",content:`Location: ${j}`})),l.tags&&l.tags.length?(l.tags.find(({property:t})=>t==="og:type")||d({property:"og:type",content:"website"}),l.tags.forEach(t=>d(t))):d({property:"og:type",content:"website"}),l.element){const t=P({routePattern:l.path,currentRoute:a}),u={currentRoute:a,params:t,routePattern:l.path,updateHeadTag:d};return c.jsx(J.Provider,{value:u,children:c.jsx(_,{fallback:n,errorTitleString:L,usePrerenderTags:m,routePath:a,debug:p,children:l.element})})}return p&&console.error("%c[Routerino]%c No route found for","color: #ff6b6b; font-weight: bold","",a),document.title=q,m&&d({name:"prerender-status-code",content:"404"}),e}catch(S){return p&&(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","",S),console.error("%c[Routerino]%c This typically means an issue with route configuration or router setup","color: #ff6b6b; font-weight: bold",""),console.groupEnd()),m&&d({name:"prerender-status-code",content:"500"}),document.title=L,n}}const ee=o.exact({path:(i,e,r)=>{const n=i[e];return n==null?new Error(`The prop \`${e}\` is marked as required in \`${r}\`, but its value is \`${n}\`.`):typeof n!="string"?new Error(`Invalid prop \`${e}\` of type \`${typeof n}\` supplied to \`${r}\`, expected \`string\`.`):n.startsWith("/")?null:new Error(`Invalid prop \`${e}\` value \`${n}\` supplied to \`${r}\`. Route paths must start with a forward slash (/).`)},element:o.element.isRequired,title:o.string,description:o.string,tags:o.arrayOf(o.object),imageUrl:o.string});z.propTypes={routes:o.arrayOf(ee),title:o.string,separator:o.string,notFoundTemplate:o.element,notFoundTitle:o.string,errorTemplate:o.element,errorTitle:o.string,useTrailingSlash:o.bool,usePrerenderTags:o.bool,baseUrl:(i,e,r)=>{const n=i[e];if(n!=null){if(typeof n!="string")return new Error(`Invalid prop \`${e}\` of type \`${typeof n}\` supplied to \`${r}\`, expected \`string\`.`);if(n.endsWith("/"))return new Error(`Invalid prop \`${e}\` supplied to \`${r}\`. The baseUrl should not end with a slash. Got: "${n}"`)}return null},imageUrl:o.string,touchIconUrl:o.string,debug:o.bool},w.ErrorBoundary=_,w.Image=Z,w.Routerino=z,w.default=z,w.updateHeadTag=d,w.useRouterino=T,Object.defineProperties(w,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+(function(m,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("react/jsx-runtime"),require("react"),require("prop-types")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","prop-types"],s):(m=typeof globalThis<"u"?globalThis:m||self,s(m.routerino={},m["react/jsx-runtime"],m.React,m.PropTypes))})(this,(function(m,s,y,e){"use strict";const J=[480,800,1200,1920],Q="(max-width: 480px) 100vw, (max-width: 800px) 800px, (max-width: 1200px) 1200px, 1920px",D=new Map;function Y(i,t=""){const c=i.toLowerCase(),n=t.toLowerCase();return!!(c.includes("hero")||c.includes("banner")||n.includes("hero")||n.includes("banner")||n.includes("h-screen")||n.includes("h-full"))}function H(i,t,c=null){const n=i.replace(/\.(jpe?g|png|webp)$/i,""),g=c?`.${c}`:i.match(/\.(jpe?g|png|webp)$/i)?.[0]||".jpg";return t.map(u=>`${n}-${u}w${g} ${u}w`).join(", ")}function G(i){const{src:t="",alt:c="",priority:n,widths:g=J,sizes:u=Q,className:d="",style:N={},width:$,height:j,loading:O,decoding:A="async",fetchpriority:f,...L}=i||{},C=typeof window>"u",k=!C&&typeof document<"u"&&typeof HTMLElement<"u"&&document.createElement("div")instanceof HTMLElement,x=k&&(window.location.hostname==="localhost"||window.location.hostname==="127.0.0.1"),B=n??Y(t,d),l=O||(B?"eager":"lazy"),W=f||(B?"high":void 0),[R,z]=y.useState(null);y.useEffect(()=>{if(!k||x||!t)return;const r=new window.Image;r.onload=()=>{z({width:r.naturalWidth,height:r.naturalHeight})},r.src=t},[t,k,x]);const a=y.useMemo(()=>R?g.filter(r=>R.width>=r):g,[R,g]),[F,M]=y.useState(null);y.useEffect(()=>{if(!k||x)return;let r=!1;return(async()=>{const S=t.replace(/\.(jpe?g|png|webp)$/i,""),U=t.match(/\.(jpe?g|png|webp)$/i)?.[0]||".jpg",v=[];for(const I of a){const q=`${S}-${I}w${U}`;if(D.has(q)){D.get(q)&&v.push(I);continue}try{const Z=await fetch(q,{method:"HEAD"});D.set(q,Z.ok),Z.ok&&v.push(I)}catch{D.set(q,!1)}}r||M(v.length>0?v:a)})(),()=>{r=!0}},[t,a,k,x]);const _=F??a,E={};$!=null&&(E.width=$),j!=null&&(E.height=j),R&&$==null&&j==null&&(E.width=R.width,E.height=R.height);const o={maxWidth:"100%",height:"auto",...N};if(x)return s.jsx("img",{src:t,alt:c,loading:l,decoding:A,fetchPriority:W,className:d,style:o,...E,...L});if(C)return s.jsxs("picture",{"data-routerino-image":"true","data-original-src":t,children:[s.jsx("source",{srcSet:H(t,g,"webp"),type:"image/webp",sizes:u}),s.jsx("img",{src:t,alt:c,srcSet:H(t,g),sizes:u,loading:l,decoding:"async",fetchPriority:W,className:d,style:o,...E,...L})]});const p=H(t,_,"webp"),w=H(t,_);return s.jsxs("picture",{"data-routerino-image":"true","data-original-src":t,children:[s.jsx("source",{srcSet:p,type:"image/webp",sizes:u}),s.jsx("img",{src:t,alt:c,srcSet:w,sizes:u,loading:l,decoding:A,fetchPriority:W,className:d,style:o,...E,...L})]})}G.propTypes={src:e.string.isRequired,alt:e.string.isRequired,priority:e.bool,widths:e.arrayOf(e.number),sizes:e.string,className:e.string,style:e.object,width:e.number,height:e.number,loading:e.oneOf(["lazy","eager"]),decoding:e.oneOf(["sync","async","auto"]),fetchpriority:e.oneOf(["high","low","auto"])};const T=[".pdf",".doc",".docx",".xls",".xlsx",".ppt",".pptx",".odt",".ods",".odp",".rtf",".csv",".txt",".md",".png",".jpg",".jpeg",".gif",".svg",".webp",".avif",".ico",".bmp",".tiff",".tif",".mp4",".webm",".ogv",".mov",".avi",".mkv",".flv",".mp3",".wav",".ogg",".flac",".aac",".m4a",".wma",".woff",".woff2",".ttf",".eot",".zip",".tar",".gz",".bz2",".7z",".rar",".xz",".zst",".epub",".mobi",".json",".xml",".yml",".yaml",".css",".js",".map",".wasm"],X=y.createContext(null);function P(){const i=y.useContext(X);if(!i)throw new Error("useRouterino must be used within a Routerino router. Make sure your component is rendered inside a <Routerino> component.");return i}function h({tag:i="meta",soft:t=!1,innerHTML:c,...n}){const g=Object.keys(n);if(g.length<1)return console.error(`[Routerino] updateHeadTag() received no attributes to set for ${i} tag`);let u=null;for(let d=0;d<g.length&&(g[d]!=="content"&&(u=document.querySelector(`${i}[${g[d]}='${n[g[d]]}']`)),!u);d++);u&&t||(u||(u=document.createElement(i)),g.forEach(d=>u.setAttribute(d,n[d])),c!==void 0&&(u.innerHTML=c),document.querySelector("head").appendChild(u))}function ee({routePattern:i,currentRoute:t}){let c={},n=i.split("/"),g=t.split("/");return n.forEach((u,d)=>{u.startsWith(":")&&(c[u.slice(1)]=g[d])}),c}class K extends y.Component{constructor(t){super(t),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(t,c){this.props.debug&&(console.group("%c[Routerino]%c Error Boundary Caught an Error","color: #ff6b6b; font-weight: bold","",t),console.error("[Routerino] Component Stack:",c.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&&h({name:"prerender-status-code",content:"500"})}render(){return this.state.hasError?this.props.fallback:this.props.children}}K.propTypes={children:e.node,fallback:e.node,errorTitleString:e.string.isRequired,usePrerenderTags:e.bool,routePath:e.string,debug:e.bool};function V({routes:i=[{path:"/",element:s.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:t=s.jsxs(s.Fragment,{children:[s.jsx("p",{children:"No page found for this URL. [404]"}),s.jsx("p",{children:s.jsx("a",{href:"/",children:"Home"})})]}),notFoundTitle:c="Page not found [404]",errorTemplate:n=s.jsxs(s.Fragment,{children:[s.jsx("p",{children:"Page failed to load. [500]"}),s.jsx("p",{children:s.jsx("a",{href:"/",children:"Home"})})]}),errorTitle:g="Page error [500]",useTrailingSlash:u=!0,usePrerenderTags:d=!1,baseUrl:N=null,title:$="",separator:j=" | ",imageUrl:O=null,touchIconUrl:A=null,debug:f=!1,ignorePatterns:L=[]}){const C=[g,$].filter(Boolean).join(j),k=[c,$].filter(Boolean).join(j);try{if(f){const o=i.map(w=>w.path),p=o.filter((w,r)=>o.indexOf(w)!==r);p.length>0&&(console.warn("%c[Routerino]%c Duplicate route paths detected:","color: #f59e0b; font-weight: bold","",[...new Set(p)]),console.warn("%c[Routerino]%c The first matching route will be used","color: #f59e0b; font-weight: bold",""))}const[x,B]=y.useState(window?.location?.href??"/");y.useEffect(()=>{if(typeof window>"u"||typeof document>"u")return;const o=w=>{f&&console.debug("%c[Routerino]%c click occurred","color: #6b7280; font-weight: bold","");let r=w.target;for(;r.tagName!=="A"&&r.parentElement;)r=r.parentElement;if(r.tagName!=="A"){f&&console.debug("%c[Routerino]%c no anchor tag found during click","color: #6b7280; font-weight: bold","");return}if(w.defaultPrevented||w.button!==0||w.ctrlKey||w.metaKey||w.shiftKey||w.altKey||r.getAttribute("target")==="_blank"||r.hasAttribute("download")||r.getAttribute("rel")==="external")return;const b=r.getAttribute("href")||r.href;if(!b){f&&console.debug("%c[Routerino]%c anchor tag has no href","color: #6b7280; font-weight: bold","");return}if(!/^(https?:\/\/|\/|\.\/|\.\.\/|[^:]+$)/i.test(b)){f&&console.debug("%c[Routerino]%c skipping non-http URL:","color: #6b7280; font-weight: bold","",b);return}f&&console.debug("%c[Routerino]%c click target href:","color: #6b7280; font-weight: bold","",b);let S;try{S=new URL(b,window.location.href)}catch(U){f&&console.debug("%c[Routerino]%c Invalid URL:","color: #6b7280; font-weight: bold","",b,U);return}if(f&&console.debug("%c[Routerino]%c targetUrl:","color: #6b7280; font-weight: bold","",S,"current:",window.location),S&&window.location.origin===S.origin){const U=S.pathname.toLowerCase();if(T.some(v=>U.endsWith(v))){f&&console.debug("%c[Routerino]%c skipping file extension link:","color: #6b7280; font-weight: bold","",b);return}if(L.length>0&&L.some(v=>new RegExp(v,"i").test(b))){f&&console.debug("%c[Routerino]%c skipping ignored link pattern:","color: #6b7280; font-weight: bold","",b);return}if(f&&console.debug("%c[Routerino]%c target link is same origin, will use push-state transitioning","color: #6b7280; font-weight: bold",""),w.preventDefault(),r.href!==window.location.href&&(B(r.href),window.history.pushState({},"",r.href)),r.hash){const v=decodeURIComponent(r.hash.slice(1));setTimeout(()=>{const I=document.getElementById(v);I?I.scrollIntoView({behavior:"auto"}):window.scrollTo({top:0,behavior:"auto"})},0)}else window.scrollTo({top:0,behavior:"auto"})}else f&&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",o);const p=()=>{f&&console.debug("%c[Routerino]%c route change ->","color: #6b7280; font-weight: bold","",window.location.pathname),B(window.location.href)};return window.addEventListener("popstate",p),()=>{document.removeEventListener("click",o),window.removeEventListener("popstate",p)}},[x,L]);let l=window?.location?.pathname??"/";(l==="/index.html"||l==="")&&(l="/");const W=i.find(o=>o.path===l),R=i.find(o=>`${o.path}/`===l||o.path===`${l}/`),z=i.find(o=>{const p=o.path.endsWith("/")?o.path.slice(0,-1):o.path,w=l.endsWith("/")?l.slice(0,-1):l,r=p.split("/").filter(Boolean),b=w.split("/").filter(Boolean);return r.length!==b.length?!1:r.every((S,U)=>S.startsWith(":")?!0:S===b[U])}),a=W??R??z;if(f&&console.debug("%c[Routerino]%c Route matching:","color: #6b7280; font-weight: bold","",{match:a,exactMatch:W,addSlashMatch:R,paramsMatch:z}),!a)return f&&(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","",l),console.warn("%c[Routerino]%c Available routes:","color: #f59e0b; font-weight: bold","",i.map(o=>o.path)),console.groupEnd()),document.title=k,d&&h({name:"prerender-status-code",content:"404"}),t;if(d){const o=document.querySelector('meta[name="prerender-status-code"]');o&&o.remove();const p=document.querySelector('meta[name="prerender-header"]');p&&p.remove()}const F=u&&!l.endsWith("/")&&l!=="/",M=!u&&l.endsWith("/")&&l!=="/",_=F?`${l}/`:M?l.slice(0,-1):l,E=`${N??window?.location?.origin??""}${_}`;if(a.title||$){const o=[a.title,$].filter(Boolean).join(j);document.title=o,a.tags?.find(({property:p})=>p==="og:title")||h({property:"og:title",content:o})}if(h({tag:"link",rel:"canonical",href:E}),a.tags?.find(({property:o})=>o==="og:url")||h({property:"og:url",content:E}),a.description&&(h({name:"description",content:a.description}),a.tags?.find(({property:o})=>o==="og:description")||h({property:"og:description",content:a.description})),(O||a.imageUrl)&&h({property:"og:image",content:a.imageUrl??O}),a.tags?.find(({property:o})=>o==="twitter:card")||h({name:"twitter:card",content:"summary_large_image"}),A&&h({tag:"link",rel:"apple-touch-icon",href:A}),d&&(F||M)&&(h({name:"prerender-status-code",content:"301"}),h({name:"prerender-header",content:`Location: ${E}`})),a.tags&&a.tags.length?(a.tags.find(({property:o})=>o==="og:type")||h({property:"og:type",content:"website"}),a.tags.forEach(o=>h(o))):h({property:"og:type",content:"website"}),a.element){const o=ee({routePattern:a.path,currentRoute:l}),p={currentRoute:l,params:o,routePattern:a.path,updateHeadTag:h};return s.jsx(X.Provider,{value:p,children:s.jsx(K,{fallback:n,errorTitleString:C,usePrerenderTags:d,routePath:l,debug:f,children:a.element})})}return f&&console.error("%c[Routerino]%c No route found for","color: #ff6b6b; font-weight: bold","",l),document.title=k,d&&h({name:"prerender-status-code",content:"404"}),t}catch(x){return f&&(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","",x),console.error("%c[Routerino]%c This typically means an issue with route configuration or router setup","color: #ff6b6b; font-weight: bold",""),console.groupEnd()),d&&h({name:"prerender-status-code",content:"500"}),document.title=C,n}}const te=e.exact({path:(i,t,c)=>{const n=i[t];return n==null?new Error(`The prop \`${t}\` is marked as required in \`${c}\`, but its value is \`${n}\`.`):typeof n!="string"?new Error(`Invalid prop \`${t}\` of type \`${typeof n}\` supplied to \`${c}\`, expected \`string\`.`):n.startsWith("/")?null:new Error(`Invalid prop \`${t}\` value \`${n}\` supplied to \`${c}\`. Route paths must start with a forward slash (/).`)},element:e.element.isRequired,title:e.string,description:e.string,tags:e.arrayOf(e.object),imageUrl:e.string});V.propTypes={routes:e.arrayOf(te),title:e.string,separator:e.string,notFoundTemplate:e.element,notFoundTitle:e.string,errorTemplate:e.element,errorTitle:e.string,useTrailingSlash:e.bool,usePrerenderTags:e.bool,baseUrl:(i,t,c)=>{const n=i[t];if(n!=null){if(typeof n!="string")return new Error(`Invalid prop \`${t}\` of type \`${typeof n}\` supplied to \`${c}\`, expected \`string\`.`);if(n.endsWith("/"))return new Error(`Invalid prop \`${t}\` supplied to \`${c}\`. The baseUrl should not end with a slash. Got: "${n}"`)}return null},imageUrl:e.string,touchIconUrl:e.string,debug:e.bool,ignorePatterns:e.arrayOf(e.string)},m.ErrorBoundary=K,m.Image=G,m.Routerino=V,m.default=V,m.updateHeadTag=h,m.useRouterino=P,Object.defineProperties(m,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "routerino",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "A lightweight, SEO-optimized React router for modern web applications",
   "repository": {
     "type": "git",

package/routerino-forge.js

@@ -1229,13 +1229,20 @@ function generateMetaTags(route, config, urlPath) {
   if (route.tags && Array.isArray(route.tags)) {
     route.tags.forEach((tag) => {
       const tagName = tag.tag || "meta";
+      const innerHTML = tag.innerHTML;
       const attrs = Object.entries(tag)
-        .filter(([key]) => key !== "tag" && key !== "soft")
+        .filter(
+          ([key]) => key !== "tag" && key !== "soft" && key !== "innerHTML"
+        )
         .map(([key, value]) => formatMetaAttribute(key, value))
         .join(" ");
 
-      if (attrs) {
-        tags.push(`<${tagName} ${attrs}>`);
+      if (attrs || innerHTML !== undefined) {
+        if (innerHTML !== undefined) {
+          tags.push(`<${tagName} ${attrs}>${innerHTML}</${tagName}>`);
+        } else {
+          tags.push(`<${tagName} ${attrs}>`);
+        }
       }
     });
   }

package/types/routerino.d.ts

@@ -16,7 +16,9 @@ export interface ImageProps
 }
 
 export interface HeadTag {
+  /** The HTML tag name to update (default: "meta") */
   tag?: string;
+  /** Whether to skip the update of an existing tag if already exists (default: false) */
   soft?: boolean;
   name?: string;
   property?: string;
@@ -32,6 +34,8 @@ export interface HeadTag {
   media?: string;
   hrefLang?: string;
   target?: string;
+  /** Inner HTML content for tags that require body content (e.g., <script>, <style>) */
+  innerHTML?: string;
   [attribute: string]: string | number | boolean | object | undefined;
 }
 
@@ -64,6 +68,14 @@ export interface RouterinoProps {
   imageUrl?: string;
   touchIconUrl?: string;
   debug?: boolean;
+  /**
+   * Array of regex pattern strings to match against link hrefs.
+   * Matching links will NOT be intercepted by the SPA router and
+   * will be handled natively by the browser instead.
+   * Patterns are case-insensitive.
+   * @example ignorePatterns={["/api/", "/admin/legacy/"]}
+   */
+  ignorePatterns?: string[];
 }
 
 export interface ErrorBoundaryProps {