@matthesketh/utopia-router 0.0.5 → 0.2.0

package/dist/index.cjs

@@ -101,7 +101,10 @@ function escapeRegex(str) {
   return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 function matchRoute(url, routes2) {
-  const pathname = url.pathname;
+  let pathname = url.pathname;
+  if (pathname.length > 1 && pathname.endsWith("/")) {
+    pathname = pathname.slice(0, -1);
+  }
   for (const route of routes2) {
     const match = route.pattern.exec(pathname);
     if (match) {
@@ -200,6 +203,8 @@ var routes = [];
 var beforeNavigateHooks = [];
 var scrollPositions = /* @__PURE__ */ new Map();
 var navIndex = 0;
+var MAX_SCROLL_ENTRIES = 50;
+var redirectDepth = 0;
 var cleanup = null;
 function createRouter(routeTable) {
   if (cleanup) {
@@ -222,11 +227,20 @@ function createRouter(routeTable) {
       const state = event.state;
       const targetIndex = state?._utopiaNavIndex ?? 0;
       scrollPositions.set(navIndex, { x: window.scrollX, y: window.scrollY });
+      capScrollPositions();
       navIndex = targetIndex;
       const url = new URL(window.location.href);
       const match = matchRoute(url, routes);
       runBeforeNavigateHooks(currentRoute.peek(), match).then((result) => {
         if (result === false) {
+          const prev = currentRoute.peek();
+          if (prev) {
+            history.pushState(
+              { _utopiaNavIndex: navIndex },
+              "",
+              prev.url.pathname + prev.url.search + prev.url.hash
+            );
+          }
           return;
         }
         if (typeof result === "string") {
@@ -267,6 +281,12 @@ function createRouter(routeTable) {
 }
 async function navigate(url, options = {}) {
   if (typeof window === "undefined") return;
+  redirectDepth++;
+  if (redirectDepth > 10) {
+    console.error("[utopia] Maximum navigation redirects exceeded");
+    redirectDepth = 0;
+    return;
+  }
   isNavigating.set(true);
   try {
     const fullUrl = new URL(url, window.location.origin);
@@ -276,10 +296,19 @@ async function navigate(url, options = {}) {
       return;
     }
     if (typeof hookResult === "string") {
+      try {
+        const redirectUrl = new URL(hookResult, window.location.origin);
+        if (redirectUrl.origin !== window.location.origin) {
+          console.error("[utopia] Cross-origin redirect blocked:", hookResult);
+          return;
+        }
+      } catch {
+      }
       await navigate(hookResult, options);
       return;
     }
     scrollPositions.set(navIndex, { x: window.scrollX, y: window.scrollY });
+    capScrollPositions();
     navIndex++;
     const state = { _utopiaNavIndex: navIndex };
     if (options.replace) {
@@ -299,6 +328,7 @@ async function navigate(url, options = {}) {
       window.scrollTo(0, 0);
     });
   } finally {
+    redirectDepth--;
     isNavigating.set(false);
   }
 }
@@ -343,16 +373,26 @@ function findAnchorElement(target) {
 }
 async function runBeforeNavigateHooks(from, to) {
   for (const hook of beforeNavigateHooks) {
-    const result = await hook(from, to);
-    if (result === false) {
-      return false;
-    }
-    if (typeof result === "string") {
-      return result;
+    try {
+      const result = await hook(from, to);
+      if (result === false) {
+        return false;
+      }
+      if (typeof result === "string") {
+        return result;
+      }
+    } catch (err) {
+      console.error("[utopia] Navigation guard error:", err);
     }
   }
   return void 0;
 }
+function capScrollPositions() {
+  if (scrollPositions.size > MAX_SCROLL_ENTRIES) {
+    const firstKey = scrollPositions.keys().next().value;
+    if (firstKey !== void 0) scrollPositions.delete(firstKey);
+  }
+}
 
 // src/components.ts
 var import_utopia_core2 = require("@matthesketh/utopia-core");
@@ -497,7 +537,7 @@ function createLink(props) {
     anchor.appendChild(props.children);
   }
   if (props.activeClass) {
-    (0, import_utopia_core2.effect)(() => {
+    const dispose = (0, import_utopia_core2.effect)(() => {
       const match = currentRoute();
       const isActive = match ? match.url.pathname === props.href || match.url.pathname.startsWith(props.href + "/") : false;
       if (isActive) {
@@ -506,6 +546,7 @@ function createLink(props) {
         anchor.classList.remove(props.activeClass);
       }
     });
+    anchor.__dispose = dispose;
   }
   return anchor;
 }

package/dist/index.d.cts

@@ -14,11 +14,13 @@ interface Route {
     /** Parameter names extracted from the path (e.g., ['id'] for '/users/:id'). */
     params: string[];
     /** Lazy component import — called only when the route is matched. */
-    component: () => Promise<any>;
+    component: () => Promise<Record<string, unknown>>;
     /** Optional layout component that wraps the page. */
-    layout?: () => Promise<any>;
+    layout?: () => Promise<Record<string, unknown>>;
     /** Optional error boundary component shown when loading fails. */
-    error?: () => Promise<any>;
+    error?: () => Promise<Record<string, unknown>>;
+    /** Optional metadata (e.g. page title, auth requirements). */
+    meta?: Record<string, unknown>;
 }
 /**
  * The result of successfully matching a URL against a route.
@@ -114,7 +116,7 @@ declare function matchRoute(url: URL, routes: Route[]): RouteMatch | null;
  * @param manifest - Record of file paths to lazy import functions
  * @returns Ordered array of compiled Route objects
  */
-declare function buildRouteTable(manifest: Record<string, () => Promise<any>>): Route[];
+declare function buildRouteTable(manifest: Record<string, () => Promise<Record<string, unknown>>>): Route[];
 
 /** The currently matched route, or null if no route matches. */
 declare const currentRoute: _matthesketh_utopia_core.Signal<RouteMatch | null>;

package/dist/index.d.ts

@@ -14,11 +14,13 @@ interface Route {
     /** Parameter names extracted from the path (e.g., ['id'] for '/users/:id'). */
     params: string[];
     /** Lazy component import — called only when the route is matched. */
-    component: () => Promise<any>;
+    component: () => Promise<Record<string, unknown>>;
     /** Optional layout component that wraps the page. */
-    layout?: () => Promise<any>;
+    layout?: () => Promise<Record<string, unknown>>;
     /** Optional error boundary component shown when loading fails. */
-    error?: () => Promise<any>;
+    error?: () => Promise<Record<string, unknown>>;
+    /** Optional metadata (e.g. page title, auth requirements). */
+    meta?: Record<string, unknown>;
 }
 /**
  * The result of successfully matching a URL against a route.
@@ -114,7 +116,7 @@ declare function matchRoute(url: URL, routes: Route[]): RouteMatch | null;
  * @param manifest - Record of file paths to lazy import functions
  * @returns Ordered array of compiled Route objects
  */
-declare function buildRouteTable(manifest: Record<string, () => Promise<any>>): Route[];
+declare function buildRouteTable(manifest: Record<string, () => Promise<Record<string, unknown>>>): Route[];
 
 /** The currently matched route, or null if no route matches. */
 declare const currentRoute: _matthesketh_utopia_core.Signal<RouteMatch | null>;

package/dist/index.js

@@ -62,7 +62,10 @@ function escapeRegex(str) {
   return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 function matchRoute(url, routes2) {
-  const pathname = url.pathname;
+  let pathname = url.pathname;
+  if (pathname.length > 1 && pathname.endsWith("/")) {
+    pathname = pathname.slice(0, -1);
+  }
   for (const route of routes2) {
     const match = route.pattern.exec(pathname);
     if (match) {
@@ -161,6 +164,8 @@ var routes = [];
 var beforeNavigateHooks = [];
 var scrollPositions = /* @__PURE__ */ new Map();
 var navIndex = 0;
+var MAX_SCROLL_ENTRIES = 50;
+var redirectDepth = 0;
 var cleanup = null;
 function createRouter(routeTable) {
   if (cleanup) {
@@ -183,11 +188,20 @@ function createRouter(routeTable) {
       const state = event.state;
       const targetIndex = state?._utopiaNavIndex ?? 0;
       scrollPositions.set(navIndex, { x: window.scrollX, y: window.scrollY });
+      capScrollPositions();
       navIndex = targetIndex;
       const url = new URL(window.location.href);
       const match = matchRoute(url, routes);
       runBeforeNavigateHooks(currentRoute.peek(), match).then((result) => {
         if (result === false) {
+          const prev = currentRoute.peek();
+          if (prev) {
+            history.pushState(
+              { _utopiaNavIndex: navIndex },
+              "",
+              prev.url.pathname + prev.url.search + prev.url.hash
+            );
+          }
           return;
         }
         if (typeof result === "string") {
@@ -228,6 +242,12 @@ function createRouter(routeTable) {
 }
 async function navigate(url, options = {}) {
   if (typeof window === "undefined") return;
+  redirectDepth++;
+  if (redirectDepth > 10) {
+    console.error("[utopia] Maximum navigation redirects exceeded");
+    redirectDepth = 0;
+    return;
+  }
   isNavigating.set(true);
   try {
     const fullUrl = new URL(url, window.location.origin);
@@ -237,10 +257,19 @@ async function navigate(url, options = {}) {
       return;
     }
     if (typeof hookResult === "string") {
+      try {
+        const redirectUrl = new URL(hookResult, window.location.origin);
+        if (redirectUrl.origin !== window.location.origin) {
+          console.error("[utopia] Cross-origin redirect blocked:", hookResult);
+          return;
+        }
+      } catch {
+      }
       await navigate(hookResult, options);
       return;
     }
     scrollPositions.set(navIndex, { x: window.scrollX, y: window.scrollY });
+    capScrollPositions();
     navIndex++;
     const state = { _utopiaNavIndex: navIndex };
     if (options.replace) {
@@ -260,6 +289,7 @@ async function navigate(url, options = {}) {
       window.scrollTo(0, 0);
     });
   } finally {
+    redirectDepth--;
     isNavigating.set(false);
   }
 }
@@ -304,16 +334,26 @@ function findAnchorElement(target) {
 }
 async function runBeforeNavigateHooks(from, to) {
   for (const hook of beforeNavigateHooks) {
-    const result = await hook(from, to);
-    if (result === false) {
-      return false;
-    }
-    if (typeof result === "string") {
-      return result;
+    try {
+      const result = await hook(from, to);
+      if (result === false) {
+        return false;
+      }
+      if (typeof result === "string") {
+        return result;
+      }
+    } catch (err) {
+      console.error("[utopia] Navigation guard error:", err);
     }
   }
   return void 0;
 }
+function capScrollPositions() {
+  if (scrollPositions.size > MAX_SCROLL_ENTRIES) {
+    const firstKey = scrollPositions.keys().next().value;
+    if (firstKey !== void 0) scrollPositions.delete(firstKey);
+  }
+}
 
 // src/components.ts
 import { effect } from "@matthesketh/utopia-core";
@@ -458,7 +498,7 @@ function createLink(props) {
     anchor.appendChild(props.children);
   }
   if (props.activeClass) {
-    effect(() => {
+    const dispose = effect(() => {
       const match = currentRoute();
       const isActive = match ? match.url.pathname === props.href || match.url.pathname.startsWith(props.href + "/") : false;
       if (isActive) {
@@ -467,6 +507,7 @@ function createLink(props) {
         anchor.classList.remove(props.activeClass);
       }
     });
+    anchor.__dispose = dispose;
   }
   return anchor;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matthesketh/utopia-router",
-  "version": "0.0.5",
+  "version": "0.2.0",
   "description": "File-based routing for UtopiaJS",
   "type": "module",
   "license": "MIT",
@@ -40,8 +40,8 @@
     "dist"
   ],
   "dependencies": {
-    "@matthesketh/utopia-core": "0.0.5",
-    "@matthesketh/utopia-runtime": "0.0.5"
+    "@matthesketh/utopia-core": "0.2.0",
+    "@matthesketh/utopia-runtime": "0.2.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts",