reroute-js 0.4.4 → 0.6.0

package/elysia/src/types.d.ts

@@ -1,5 +1,5 @@
 /**
- * reroute-js v0.4.4
+ * reroute-js v0.6.0
  *
  * @license MIT
  * @copyright 2025 stewones <hi@stewan.io>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "reroute-js",
-	"version": "0.4.4",
+	"version": "0.6.0",
 	"type": "module",
 	"author": "stewones <hi@stewan.io>",
 	"scripts": {
@@ -70,30 +70,38 @@
 		"CHANGELOG.md"
 	],
 	"devDependencies": {
-		"@biomejs/biome": "^2.3.3",
+		"@biomejs/biome": "^2.3.4",
 		"@semantic-release/changelog": "^6.0.3",
 		"@semantic-release/exec": "^6.0.3",
 		"@semantic-release/git": "^10.0.1",
 		"@semantic-release/github": "^12.0.1",
 		"@tailwindcss/cli": "^4.1.16",
 		"@types/bun": "latest",
+		"@types/node": "^24.10.0",
+		"@types/react": "^19.2.2",
 		"@types/react-dom": "^19.2.2",
 		"@vitest/coverage-v8": "^3.2.4",
 		"conventional-changelog-conventionalcommits": "^9.1.0",
 		"dedent": "^1.7.0",
-		"knip": "^5.66.3",
-		"react": "^19.2.0",
-		"react-dom": "^19.2.0",
+		"knip": "^5.68.0",
 		"semantic-release": "^24.2.8",
 		"vite-tsconfig-paths": "^5.1.4",
 		"vitest": "^3.2.4"
 	},
 	"peerDependencies": {
-		"typescript": "^5",
-		"tailwindcss": "^4.1.16",
+		"@mdx-js/mdx": "^3.1.0",
+		"@shikijs/rehype": "^1.0.0",
 		"elysia": "^1.4.12",
 		"react": "^19.2.0",
 		"react-dom": "^19.2.0",
-		"sharp": "^0.34.4"
-	}
+		"react-markdown": "^10.1.0",
+		"remark-gfm": "^4.0.0",
+		"sharp": "^0.34.4",
+		"tailwindcss": "^4.1.16",
+		"typescript": "^5"
+	},
+	"workspaces": [
+		"packages/*",
+		"examples/*"
+	]
 }

package/react/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * reroute-js v0.4.4
+ * reroute-js v0.6.0
  *
  * @license MIT
  * @copyright 2025 stewones <hi@stewan.io>

package/react/index.js

@@ -1,5 +1,5 @@
 /**
- * reroute-js v0.4.4
+ * reroute-js v0.6.0
  *
  * @license MIT
  * @copyright 2025 stewones <hi@stewan.io>
@@ -8,16 +8,34 @@
  * Built with Bun <3
  */
 
+// packages/react/src/components/ClientOnly.tsx
+import { useEffect, useState } from "react";
+import { jsx, Fragment } from "react/jsx-runtime";
+function ClientOnly({ children, fallback = null }) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    return /* @__PURE__ */ jsx(Fragment, {
+      children: fallback
+    });
+  }
+  return /* @__PURE__ */ jsx(Fragment, {
+    children
+  });
+}
 // packages/react/src/components/ContentRoute.tsx
 import {
   isValidElement,
-  useEffect as useEffect4,
+  useEffect as useEffect5,
   useMemo as useMemo5,
-  useState as useState4
+  useRef,
+  useState as useState5
 } from "react";
 
 // packages/react/src/hooks/useContent.ts
-import { useCallback as useCallback2, useEffect, useMemo as useMemo2, useState as useState2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useState as useState3 } from "react";
 
 // packages/react/src/providers/ContentProvider.tsx
 import {
@@ -25,7 +43,7 @@ import {
   useCallback,
   useContext,
   useMemo,
-  useState
+  useState as useState2
 } from "react";
 
 // packages/react/src/utils/content.ts
@@ -58,7 +76,7 @@ function createResolverFromGetEntry(getEntry) {
 }
 
 // packages/react/src/providers/ContentProvider.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var ContentRegistryContext = createContext(null);
 var ContentIndexContext = createContext(null);
 var ContentGetEntryContext = createContext(null);
@@ -70,7 +88,7 @@ function ContentProvider({
   byCollection,
   loadCollection
 }) {
-  const [idx, setIdx] = useState(() => {
+  const [idx, setIdx] = useState2(() => {
     const seededClient = (() => {
       try {
         if (typeof window !== "undefined") {
@@ -135,13 +153,13 @@ function ContentProvider({
       return;
     }
   }, [idx, loadCollection]);
-  return /* @__PURE__ */ jsx(ContentRegistryContext.Provider, {
+  return /* @__PURE__ */ jsx2(ContentRegistryContext.Provider, {
     value: resolver,
-    children: /* @__PURE__ */ jsx(ContentIndexContext.Provider, {
+    children: /* @__PURE__ */ jsx2(ContentIndexContext.Provider, {
       value: idx,
-      children: /* @__PURE__ */ jsx(ContentGetEntryContext.Provider, {
+      children: /* @__PURE__ */ jsx2(ContentGetEntryContext.Provider, {
         value: entryFn,
-        children: /* @__PURE__ */ jsx(ContentLoadCollectionContext.Provider, {
+        children: /* @__PURE__ */ jsx2(ContentLoadCollectionContext.Provider, {
           value: ensureCollection,
           children
         })
@@ -210,8 +228,8 @@ function useContent(params) {
   } catch {}
   const index = useContentIndex();
   const loadCollection = useContentLoadCollection();
-  const [_ready, setReady] = useState2(false);
-  useEffect(() => {
+  const [_ready, setReady] = useState3(false);
+  useEffect2(() => {
     let cancelled = false;
     async function ensure() {
       try {
@@ -253,7 +271,7 @@ function useContent(params) {
   return { items, prefetch };
 }
 // packages/react/src/hooks/useData.ts
-import { useEffect as useEffect3, useMemo as useMemo4, useState as useState3 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo4, useState as useState4 } from "react";
 
 // packages/react/src/hooks/useRouter.tsx
 import { useContext as useContext2 } from "react";
@@ -261,7 +279,7 @@ import { useContext as useContext2 } from "react";
 import React, {
   createContext as createContext2,
   useCallback as useCallback3,
-  useEffect as useEffect2,
+  useEffect as useEffect3,
   useMemo as useMemo3,
   useSyncExternalStore
 } from "react";
@@ -353,7 +371,7 @@ function applyRouteHead(head) {
 }
 
 // packages/react/src/providers/RouterProvider.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var isBrowser2 = typeof window !== "undefined" && typeof window.document !== "undefined";
 var OutletContext = createContext2(null);
 var RouterContext = createContext2(null);
@@ -458,7 +476,7 @@ function RouterProvider({
   viewTransitions = true,
   scrollRestoration = true
 }) {
-  useEffect2(() => {
+  useEffect3(() => {
     setViewTransitionsEnabled(viewTransitions);
     setScrollRestorationEnabled(scrollRestoration);
   }, [viewTransitions, scrollRestoration]);
@@ -472,7 +490,7 @@ function RouterProvider({
   }
   const getServerSnapshot = useCallback3(() => serverSnapshotRef.current, []);
   const location = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) || currentLocation;
-  useEffect2(() => {
+  useEffect3(() => {
     if (!isBrowser2)
       return;
     const next = {
@@ -491,7 +509,7 @@ function RouterProvider({
   const navigate = useCallback3((to, options = {}) => {
     navigateInternal(to, options);
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!isBrowser2)
       return;
     const handlePopState = () => {
@@ -574,7 +592,7 @@ function RouterProvider({
     window.addEventListener("popstate", handlePopState);
     return () => window.removeEventListener("popstate", handlePopState);
   }, [matchRoute]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!isBrowser2)
       return;
     const handleClick = (e) => {
@@ -599,7 +617,7 @@ function RouterProvider({
     document.addEventListener("click", handleClick);
     return () => document.removeEventListener("click", handleClick);
   }, [navigate, matchRoute]);
-  useEffect2(() => {
+  useEffect3(() => {
     const route = target?.route;
     if (!route)
       return;
@@ -667,25 +685,25 @@ function RouterProvider({
   let content;
   if (target) {
     const Component = target.route.component;
-    let outletContent = /* @__PURE__ */ jsx2(Component, {});
+    let outletContent = /* @__PURE__ */ jsx3(Component, {});
     for (let i = matchingLayouts.length - 1;i >= 0; i--) {
       const Layout = matchingLayouts[i].component;
       const currentOutlet = outletContent;
-      outletContent = /* @__PURE__ */ jsx2(OutletContext.Provider, {
+      outletContent = /* @__PURE__ */ jsx3(OutletContext.Provider, {
         value: currentOutlet,
-        children: /* @__PURE__ */ jsx2(Layout, {})
+        children: /* @__PURE__ */ jsx3(Layout, {})
       });
     }
     content = outletContent;
   } else {
     const Fallback = notFoundResolver(location.pathname) || NotFound;
     if (Fallback) {
-      content = /* @__PURE__ */ jsx2(Fallback, {});
+      content = /* @__PURE__ */ jsx3(Fallback, {});
     } else {
       content = /* @__PURE__ */ jsxs("div", {
         style: { padding: "2rem", textAlign: "center" },
         children: [
-          /* @__PURE__ */ jsx2("h1", {
+          /* @__PURE__ */ jsx3("h1", {
             children: "404 - Page Not Found"
           }),
           /* @__PURE__ */ jsxs("p", {
@@ -695,7 +713,7 @@ function RouterProvider({
               " could not be found."
             ]
           }),
-          /* @__PURE__ */ jsx2("a", {
+          /* @__PURE__ */ jsx3("a", {
             href: "/",
             children: "Go Home"
           })
@@ -703,14 +721,14 @@ function RouterProvider({
       });
     }
   }
-  return /* @__PURE__ */ jsx2(RouterContext.Provider, {
+  return /* @__PURE__ */ jsx3(RouterContext.Provider, {
     value: contextValue,
     children: children || content
   });
 }
 
 // packages/react/src/providers/RerouteProvider.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function RerouteProvider({
   from,
   children
@@ -729,11 +747,11 @@ function RerouteProvider({
     scrollRestoration
   } = from;
   const loader = loadContent || (contentBaseUrl ? (c) => import(`${contentBaseUrl}/${c}.js`) : undefined);
-  return /* @__PURE__ */ jsx3(ContentProvider, {
+  return /* @__PURE__ */ jsx4(ContentProvider, {
     getEntry: getContentEntry,
     byCollection: byCollection || null,
     loadCollection: loader,
-    children: /* @__PURE__ */ jsx3(RouterProvider, {
+    children: /* @__PURE__ */ jsx4(RouterProvider, {
       layouts,
       matchRoute,
       notFoundRoutes,
@@ -758,8 +776,8 @@ function useRouter() {
 function useData(key) {
   const { pathname } = useRouter();
   const k = key || pathname;
-  const [_tick, setTick] = useState3(0);
-  useEffect3(() => {
+  const [_tick, setTick] = useState4(0);
+  useEffect4(() => {
     if (typeof window === "undefined")
       return;
     const handler = (e) => {
@@ -777,7 +795,7 @@ function useData(key) {
       } catch {}
     };
   }, [k]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (typeof window === "undefined")
       return;
     try {
@@ -841,7 +859,7 @@ function useSearchParams() {
   return searchParams;
 }
 // packages/react/src/components/ContentRoute.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function toComponent(x) {
   if (typeof x === "function")
     return x;
@@ -867,6 +885,7 @@ function ContentRoute({
   const key = inferredName ? `${collection}:${inferredName}` : `${collection}:`;
   const ctxGetEntry = useContentGetEntry();
   const idx = useContentIndex();
+  const ensureCollection = useContentLoadCollection();
   const resolveEntry = getEntry || ctxGetEntry || ((c, n) => {
     try {
       const list = idx?.[c];
@@ -902,8 +921,9 @@ function ContentRoute({
     } catch {}
     return () => null;
   }, [key, entry]);
-  const [Comp, setComp] = useState4(() => initialComp);
-  useEffect4(() => {
+  const [Comp, setComp] = useState5(() => initialComp);
+  const containerRef = useRef(null);
+  useEffect5(() => {
     let cancelled = false;
     if (entry?.module && typeof window !== "undefined") {
       import(entry.module).then((m) => {
@@ -934,21 +954,62 @@ function ContentRoute({
       applySsrHead(undefined);
     };
   }, [entry?.module, key]);
-  useEffect4(() => {
+  useEffect5(() => {
+    if (typeof window === "undefined")
+      return;
+    if (entry || !collection)
+      return;
+    try {
+      if (typeof ensureCollection === "function") {
+        ensureCollection(collection);
+      }
+    } catch {}
+  }, [collection, ensureCollection, entry]);
+  useEffect5(() => {
     try {
       if (entry && entry.meta)
         applyPageMeta(entry.meta);
     } catch {}
   }, [entry]);
-  return /* @__PURE__ */ jsx4(Comp, {});
+  useEffect5(() => {
+    try {
+      if (typeof window === "undefined")
+        return;
+      const isDev = typeof process !== "undefined" && (process.env?.NODE_ENV ?? "development") !== "production" || typeof document !== "undefined" && /^localhost|^127\.0\.0\.1/.test(window.location.hostname);
+      if (!isDev)
+        return;
+      const root = containerRef.current;
+      if (!root)
+        return;
+      const nested = root.querySelectorAll("p p");
+      if (!nested.length) {
+        return;
+      }
+      console.groupCollapsed(`[Reroute] DOM check: nested <p> found in ContentRoute (${key})`);
+      nested.forEach((inner, idx2) => {
+        const outer = inner.closest("p");
+        const snippet = (el) => (el?.textContent || "").replace(/\s+/g, " ").trim().slice(0, 160);
+        console.warn(`Case ${idx2 + 1}:`, {
+          outerSnippet: snippet(outer),
+          innerSnippet: snippet(inner)
+        });
+      });
+      console.groupEnd();
+    } catch {}
+  }, [key]);
+  return /* @__PURE__ */ jsx5("div", {
+    "data-reroute": "content",
+    ref: containerRef,
+    children: /* @__PURE__ */ jsx5(Comp, {})
+  });
 }
 // packages/react/src/components/Image.tsx
 import {
-  useEffect as useEffect5,
-  useRef,
-  useState as useState5
+  useEffect as useEffect6,
+  useRef as useRef2,
+  useState as useState6
 } from "react";
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 var DEFAULT_DEVICE_SIZES = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];
 function generateSrcSet(src, width, quality, format, loader) {
   const sizes = width ? DEFAULT_DEVICE_SIZES.filter((size) => size <= width * 2) : DEFAULT_DEVICE_SIZES;
@@ -1004,11 +1065,11 @@ function Image({
   className,
   ...props
 }) {
-  const [isLoaded, setIsLoaded] = useState5(false);
-  const [hasError, setHasError] = useState5(false);
-  const imgRef = useRef(null);
+  const [isLoaded, setIsLoaded] = useState6(false);
+  const [hasError, setHasError] = useState6(false);
+  const imgRef = useRef2(null);
   const imageUrl = loader ? loader({ src, width: width || 0, quality, format }) : width ? defaultLoader({ src, width, quality, format }) : src;
-  useEffect5(() => {
+  useEffect6(() => {
     const img = imgRef.current;
     if (img?.complete && img.naturalWidth > 0) {
       setIsLoaded(true);
@@ -1023,7 +1084,7 @@ function Image({
     setHasError(true);
     onErrorProp?.();
   };
-  useEffect5(() => {
+  useEffect6(() => {
     if (priority || typeof window === "undefined") {
       return;
     }
@@ -1083,7 +1144,7 @@ function Image({
       height: "100%"
     },
     children: [
-      showSpinner && !isLoaded && !hasError && /* @__PURE__ */ jsx5("div", {
+      showSpinner && !isLoaded && !hasError && /* @__PURE__ */ jsx6("div", {
         style: {
           position: "absolute",
           inset: 0,
@@ -1094,7 +1155,7 @@ function Image({
           zIndex: 1,
           pointerEvents: "none"
         },
-        children: spinner || /* @__PURE__ */ jsx5("div", {
+        children: spinner || /* @__PURE__ */ jsx6("div", {
           style: {
             width: `${spinnerSize}px`,
             height: `${spinnerSize}px`,
@@ -1105,7 +1166,7 @@ function Image({
           }
         })
       }),
-      placeholder === "blur" && placeholderSrc && !isLoaded && !hasError && /* @__PURE__ */ jsx5("img", {
+      placeholder === "blur" && placeholderSrc && !isLoaded && !hasError && /* @__PURE__ */ jsx6("img", {
         src: placeholderSrc,
         alt: "",
         "aria-hidden": "true",
@@ -1120,7 +1181,7 @@ function Image({
           zIndex: -1
         }
       }),
-      /* @__PURE__ */ jsx5("img", {
+      /* @__PURE__ */ jsx6("img", {
         ref: imgRef,
         src: priority || supportsNativeLazyLoading() ? imageUrl : undefined,
         "data-src": !priority && !supportsNativeLazyLoading() ? imageUrl : undefined,
@@ -1138,7 +1199,7 @@ function Image({
         className,
         ...props
       }),
-      showSpinner && !isLoaded && /* @__PURE__ */ jsx5("style", {
+      showSpinner && !isLoaded && /* @__PURE__ */ jsx6("style", {
         children: `
 						@keyframes reroute-spin {
 							0% { transform: rotate(0deg); }
@@ -1150,8 +1211,8 @@ function Image({
   });
 }
 // packages/react/src/components/Link.tsx
-import { useCallback as useCallback4, useMemo as useMemo6 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { useCallback as useCallback4, useContext as useContext3, useMemo as useMemo6 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function Link({
   to,
   replace,
@@ -1163,15 +1224,24 @@ function Link({
   onFocus,
   ...props
 }) {
-  const { navigate, matchRoute } = useRouter();
+  const routerContext = useContext3(RouterContext);
+  const router = useRouter();
   const resolver = useContentResolver();
   const contentIndex = useContentIndex();
   const ensureCollection = useContentLoadCollection();
+  const hasRouter = !!routerContext;
+  const { navigate, matchRoute } = router || {
+    navigate: () => {},
+    matchRoute: () => null
+  };
   const inferred = useMemo6(() => resolver ? resolver(String(to)) : undefined, [resolver, to]);
   const handleClick = useCallback4(async (e) => {
     if (onClick) {
       onClick(e);
     }
+    if (!hasRouter) {
+      return;
+    }
     if (e.defaultPrevented || e.button !== 0 || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey || props.target === "_blank") {
       return;
     }
@@ -1224,7 +1294,8 @@ function Link({
     prefetch,
     inferred,
     matchRoute,
-    fragment
+    fragment,
+    hasRouter
   ]);
   const handleMouseEnter = useCallback4((e) => {
     if (prefetch && inferred && inferred.module)
@@ -1241,7 +1312,7 @@ function Link({
               (async () => {
                 try {
                   const items = await ensureCollection(inferred.collection);
-                  const found = (items || []).find((e2) => e2?.name === inferred.name);
+                  const found = (items || []).find((item) => item?.name === inferred.name);
                   const mod = found?.module;
                   if (mod)
                     prefetchContent({ ...inferred, module: mod });
@@ -1295,7 +1366,7 @@ function Link({
               (async () => {
                 try {
                   const items = await ensureCollection(inferred.collection);
-                  const found = (items || []).find((e2) => e2?.name === inferred.name);
+                  const found = (items || []).find((item) => item?.name === inferred.name);
                   const mod = found?.module;
                   if (mod)
                     prefetchContent({ ...inferred, module: mod });
@@ -1335,7 +1406,7 @@ function Link({
     matchRoute
   ]);
   const href = fragment ? `${to}#${fragment}` : to;
-  return /* @__PURE__ */ jsx6("a", {
+  return /* @__PURE__ */ jsx7("a", {
     href,
     onClick: handleClick,
     onMouseEnter: handleMouseEnter,
@@ -1343,12 +1414,36 @@ function Link({
     ...props
   });
 }
+// packages/react/src/components/Markdown.tsx
+import ReactMarkdownLib from "react-markdown";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function Markdown({
+  children,
+  className,
+  skipHtml = false,
+  components,
+  remarkPlugins = [],
+  rehypePlugins = []
+}) {
+  const finalRemarkPlugins = [...remarkPlugins];
+  const finalRehypePlugins = [...rehypePlugins];
+  return /* @__PURE__ */ jsx8("div", {
+    className,
+    children: /* @__PURE__ */ jsx8(ReactMarkdownLib, {
+      remarkPlugins: finalRemarkPlugins,
+      rehypePlugins: finalRehypePlugins,
+      skipHtml,
+      components,
+      children
+    })
+  });
+}
 // packages/react/src/components/Outlet.tsx
-import { useContext as useContext3 } from "react";
-import { jsx as jsx7, Fragment } from "react/jsx-runtime";
+import { useContext as useContext4 } from "react";
+import { jsx as jsx9, Fragment as Fragment2 } from "react/jsx-runtime";
 function Outlet() {
-  const outletContent = useContext3(OutletContext);
-  return /* @__PURE__ */ jsx7(Fragment, {
+  const outletContent = useContext4(OutletContext);
+  return /* @__PURE__ */ jsx9(Fragment2, {
     children: outletContent
   });
 }
@@ -1375,10 +1470,12 @@ export {
   RerouteProvider,
   OutletContext,
   Outlet,
+  Markdown,
   Link,
   Image,
   ContentRoute,
-  ContentProvider
+  ContentProvider,
+  ClientOnly
 };
 
-//# debugId=74621835C22C5A1764756E2164756E21
+//# debugId=CB077059E687760364756E2164756E21