reroute-js 0.5.0 → 0.7.0

package/react/index.js

@@ -1,5 +1,5 @@
 /**
- * reroute-js v0.5.0
+ * reroute-js v0.7.0
  *
  * @license MIT
  * @copyright 2025 stewones <hi@stewan.io>
@@ -30,6 +30,7 @@ import {
   isValidElement,
   useEffect as useEffect5,
   useMemo as useMemo5,
+  useRef,
   useState as useState5
 } from "react";
 
@@ -406,6 +407,23 @@ function setScrollRestorationEnabled(enabled) {
   scrollRestorationEnabled = enabled;
 }
 var scrollPositions = new Map;
+function hasViewTransitionNames() {
+  if (!isBrowser2)
+    return false;
+  try {
+    const allElements = document.querySelectorAll("*");
+    for (const el of allElements) {
+      const computedStyle = window.getComputedStyle(el);
+      const transitionName = computedStyle.viewTransitionName;
+      if (transitionName && transitionName !== "none") {
+        return true;
+      }
+    }
+    return false;
+  } catch {
+    return false;
+  }
+}
 function navigateInternal(to, options = {}) {
   if (!isBrowser2)
     return;
@@ -437,7 +455,8 @@ function navigateInternal(to, options = {}) {
     };
     emitChange();
   };
-  if (viewTransitionsEnabled) {
+  const shouldUseViewTransition = viewTransitionsEnabled && hasViewTransitionNames();
+  if (shouldUseViewTransition) {
     document.startViewTransition(() => {
       flushSync(() => {
         updateState();
@@ -446,24 +465,24 @@ function navigateInternal(to, options = {}) {
   } else {
     updateState();
   }
-  if (url.hash) {
-    let attempts = 0;
-    const maxAttempts = 10;
-    const tryScroll = () => {
-      const element = document.querySelector(url.hash);
-      if (element) {
-        element.scrollIntoView({ behavior: "smooth", block: "start" });
-      } else if (attempts < maxAttempts) {
-        attempts++;
-        setTimeout(tryScroll, 50);
-      }
-    };
-    setTimeout(tryScroll, viewTransitionsEnabled ? 100 : 50);
-  } else {
-    setTimeout(() => {
-      window.scrollTo({ top: 0, behavior: "instant" });
-    }, viewTransitionsEnabled ? 100 : 50);
-  }
+  requestAnimationFrame(() => {
+    if (url.hash) {
+      let attempts = 0;
+      const maxAttempts = 10;
+      const tryScroll = () => {
+        const element = document.querySelector(url.hash);
+        if (element) {
+          element.scrollIntoView({ behavior: "smooth", block: "start" });
+        } else if (attempts < maxAttempts) {
+          attempts++;
+          requestAnimationFrame(tryScroll);
+        }
+      };
+      tryScroll();
+    } else {
+      window.scrollTo({ top: 0, left: 0, behavior: "instant" });
+    }
+  });
 }
 function RouterProvider({
   children,
@@ -560,7 +579,8 @@ function RouterProvider({
         currentLocation = next;
         emitChange();
       };
-      if (viewTransitionsEnabled) {
+      const shouldUseViewTransition = viewTransitionsEnabled && hasViewTransitionNames();
+      if (shouldUseViewTransition) {
         document.startViewTransition(() => {
           flushSync(() => {
             updateState();
@@ -572,7 +592,7 @@ function RouterProvider({
       if (scrollRestorationEnabled) {
         const nextPath = next.pathname + next.search + next.hash;
         const savedPosition = scrollPositions.get(nextPath);
-        setTimeout(() => {
+        const restoreScroll = () => {
           if (next.hash) {
             const element = document.querySelector(next.hash);
             if (element) {
@@ -585,7 +605,14 @@ function RouterProvider({
               behavior: "instant"
             });
           }
-        }, viewTransitionsEnabled ? 50 : 0);
+        };
+        if (shouldUseViewTransition) {
+          requestAnimationFrame(() => {
+            requestAnimationFrame(restoreScroll);
+          });
+        } else {
+          requestAnimationFrame(restoreScroll);
+        }
       }
     };
     window.addEventListener("popstate", handlePopState);
@@ -884,6 +911,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];
@@ -920,6 +948,7 @@ function ContentRoute({
     return () => null;
   }, [key, entry]);
   const [Comp, setComp] = useState5(() => initialComp);
+  const containerRef = useRef(null);
   useEffect5(() => {
     let cancelled = false;
     if (entry?.module && typeof window !== "undefined") {
@@ -951,18 +980,59 @@ function ContentRoute({
       applySsrHead(undefined);
     };
   }, [entry?.module, key]);
+  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__ */ jsx5(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 useEffect6,
-  useRef,
+  useRef as useRef2,
   useState as useState6
 } from "react";
 import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -1023,7 +1093,7 @@ function Image({
 }) {
   const [isLoaded, setIsLoaded] = useState6(false);
   const [hasError, setHasError] = useState6(false);
-  const imgRef = useRef(null);
+  const imgRef = useRef2(null);
   const imageUrl = loader ? loader({ src, width: width || 0, quality, format }) : width ? defaultLoader({ src, width, quality, format }) : src;
   useEffect6(() => {
     const img = imgRef.current;
@@ -1167,7 +1237,7 @@ function Image({
   });
 }
 // packages/react/src/components/Link.tsx
-import { useCallback as useCallback4, useMemo as useMemo6 } from "react";
+import { useCallback as useCallback4, useContext as useContext3, useMemo as useMemo6 } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
 function Link({
   to,
@@ -1180,15 +1250,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;
     }
@@ -1241,7 +1320,8 @@ function Link({
     prefetch,
     inferred,
     matchRoute,
-    fragment
+    fragment,
+    hasRouter
   ]);
   const handleMouseEnter = useCallback4((e) => {
     if (prefetch && inferred && inferred.module)
@@ -1258,7 +1338,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 });
@@ -1312,7 +1392,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 });
@@ -1360,12 +1440,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 jsx8, Fragment as Fragment2 } 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__ */ jsx8(Fragment2, {
+  const outletContent = useContext4(OutletContext);
+  return /* @__PURE__ */ jsx9(Fragment2, {
     children: outletContent
   });
 }
@@ -1392,6 +1496,7 @@ export {
   RerouteProvider,
   OutletContext,
   Outlet,
+  Markdown,
   Link,
   Image,
   ContentRoute,
@@ -1399,4 +1504,4 @@ export {
   ClientOnly
 };
 
-//# debugId=9440FA619740D6BC64756E2164756E21
+//# debugId=C9918CE64524583B64756E2164756E21