@matthesketh/utopia-router 0.7.2 → 0.7.4

package/dist/index.cjs

@@ -315,6 +315,20 @@ async function navigate(url, options = {}) {
   isNavigating.set(true);
   try {
     const fullUrl = new URL(url, window.location.origin);
+    const currentUrl = new URL(window.location.href);
+    if (fullUrl.pathname === currentUrl.pathname && fullUrl.search === currentUrl.search && fullUrl.hash) {
+      scrollPositions.set(navIndex, { x: window.scrollX, y: window.scrollY });
+      capScrollPositions();
+      navIndex++;
+      const state2 = { _utopiaNavIndex: navIndex };
+      if (options.replace) {
+        history.replaceState(state2, "", fullUrl.href);
+      } else {
+        history.pushState(state2, "", fullUrl.href);
+      }
+      scrollToHash(fullUrl.hash.slice(1));
+      return;
+    }
     const match = matchRoute(fullUrl, routes);
     const hookResult = await runBeforeNavigateHooks(currentRoute.peek(), match);
     if (hookResult === false) {
@@ -342,19 +356,11 @@ async function navigate(url, options = {}) {
       history.pushState(state, "", fullUrl.href);
     }
     currentRoute.set(match);
-    requestAnimationFrame(() => {
-      if (fullUrl.hash) {
-        const hashId = fullUrl.hash.slice(1);
-        if (hashId && VALID_DOM_ID_RE.test(hashId)) {
-          const el = document.getElementById(hashId);
-          if (el) {
-            el.scrollIntoView();
-            return;
-          }
-        }
-      }
-      window.scrollTo(0, 0);
-    });
+    if (fullUrl.hash) {
+      scrollToHash(fullUrl.hash.slice(1));
+    } else {
+      requestAnimationFrame(() => window.scrollTo(0, 0));
+    }
   } finally {
     redirectDepth--;
     isNavigating.set(false);
@@ -421,6 +427,18 @@ function capScrollPositions() {
     if (firstKey !== void 0) scrollPositions.delete(firstKey);
   }
 }
+function scrollToHash(hashId, maxAttempts = 25) {
+  if (!hashId || !VALID_DOM_ID_RE.test(hashId)) return;
+  const attempt = (remaining) => {
+    const el = document.getElementById(hashId);
+    if (el) {
+      el.scrollIntoView();
+    } else if (remaining > 0) {
+      requestAnimationFrame(() => attempt(remaining - 1));
+    }
+  };
+  requestAnimationFrame(() => attempt(maxAttempts));
+}
 
 // src/components.ts
 var import_utopia_core2 = require("@matthesketh/utopia-core");
@@ -439,6 +457,9 @@ async function preloadRoute() {
   }
 }
 function createRouterView() {
+  return { render: () => createRouterViewNode() };
+}
+function createRouterViewNode() {
   const container = document.createElement("div");
   container.setAttribute("data-utopia-router-view", "");
   let currentCleanup = null;

package/dist/index.d.cts

@@ -204,7 +204,8 @@ declare function destroy(): void;
  */
 declare function preloadRoute(): Promise<void>;
 /**
- * Creates a DOM node that renders the current route's component.
+ * Creates a UtopiaJS-compatible component that renders the current route's
+ * component. Can be used as `<RouterView />` in .utopia templates.
  *
  * When the route changes:
  * 1. The new component is lazily loaded (old content stays visible)
@@ -212,15 +213,17 @@ declare function preloadRoute(): Promise<void>;
  * 3. If the route has a layout, the page is wrapped in the layout
  * 4. If loading fails and an error component exists, it is shown instead
  *
- * @returns A container DOM node that manages route component lifecycle
+ * @returns A component definition compatible with UtopiaJS's component system
  *
  * @example
  * ```ts
- * const view = createRouterView();
- * document.getElementById('app')!.appendChild(view);
+ * import { createRouterView as RouterView } from '@matthesketh/utopia-router';
+ * // In template: <RouterView />
  * ```
  */
-declare function createRouterView(): Node;
+declare function createRouterView(): {
+    render: () => Node;
+};
 /**
  * Creates an anchor element that performs client-side navigation when clicked.
  *

package/dist/index.d.ts

@@ -204,7 +204,8 @@ declare function destroy(): void;
  */
 declare function preloadRoute(): Promise<void>;
 /**
- * Creates a DOM node that renders the current route's component.
+ * Creates a UtopiaJS-compatible component that renders the current route's
+ * component. Can be used as `<RouterView />` in .utopia templates.
  *
  * When the route changes:
  * 1. The new component is lazily loaded (old content stays visible)
@@ -212,15 +213,17 @@ declare function preloadRoute(): Promise<void>;
  * 3. If the route has a layout, the page is wrapped in the layout
  * 4. If loading fails and an error component exists, it is shown instead
  *
- * @returns A container DOM node that manages route component lifecycle
+ * @returns A component definition compatible with UtopiaJS's component system
  *
  * @example
  * ```ts
- * const view = createRouterView();
- * document.getElementById('app')!.appendChild(view);
+ * import { createRouterView as RouterView } from '@matthesketh/utopia-router';
+ * // In template: <RouterView />
  * ```
  */
-declare function createRouterView(): Node;
+declare function createRouterView(): {
+    render: () => Node;
+};
 /**
  * Creates an anchor element that performs client-side navigation when clicked.
  *

package/dist/index.js

@@ -270,6 +270,20 @@ async function navigate(url, options = {}) {
   isNavigating.set(true);
   try {
     const fullUrl = new URL(url, window.location.origin);
+    const currentUrl = new URL(window.location.href);
+    if (fullUrl.pathname === currentUrl.pathname && fullUrl.search === currentUrl.search && fullUrl.hash) {
+      scrollPositions.set(navIndex, { x: window.scrollX, y: window.scrollY });
+      capScrollPositions();
+      navIndex++;
+      const state2 = { _utopiaNavIndex: navIndex };
+      if (options.replace) {
+        history.replaceState(state2, "", fullUrl.href);
+      } else {
+        history.pushState(state2, "", fullUrl.href);
+      }
+      scrollToHash(fullUrl.hash.slice(1));
+      return;
+    }
     const match = matchRoute(fullUrl, routes);
     const hookResult = await runBeforeNavigateHooks(currentRoute.peek(), match);
     if (hookResult === false) {
@@ -297,19 +311,11 @@ async function navigate(url, options = {}) {
       history.pushState(state, "", fullUrl.href);
     }
     currentRoute.set(match);
-    requestAnimationFrame(() => {
-      if (fullUrl.hash) {
-        const hashId = fullUrl.hash.slice(1);
-        if (hashId && VALID_DOM_ID_RE.test(hashId)) {
-          const el = document.getElementById(hashId);
-          if (el) {
-            el.scrollIntoView();
-            return;
-          }
-        }
-      }
-      window.scrollTo(0, 0);
-    });
+    if (fullUrl.hash) {
+      scrollToHash(fullUrl.hash.slice(1));
+    } else {
+      requestAnimationFrame(() => window.scrollTo(0, 0));
+    }
   } finally {
     redirectDepth--;
     isNavigating.set(false);
@@ -376,6 +382,18 @@ function capScrollPositions() {
     if (firstKey !== void 0) scrollPositions.delete(firstKey);
   }
 }
+function scrollToHash(hashId, maxAttempts = 25) {
+  if (!hashId || !VALID_DOM_ID_RE.test(hashId)) return;
+  const attempt = (remaining) => {
+    const el = document.getElementById(hashId);
+    if (el) {
+      el.scrollIntoView();
+    } else if (remaining > 0) {
+      requestAnimationFrame(() => attempt(remaining - 1));
+    }
+  };
+  requestAnimationFrame(() => attempt(maxAttempts));
+}
 
 // src/components.ts
 import { effect } from "@matthesketh/utopia-core";
@@ -394,6 +412,9 @@ async function preloadRoute() {
   }
 }
 function createRouterView() {
+  return { render: () => createRouterViewNode() };
+}
+function createRouterViewNode() {
   const container = document.createElement("div");
   container.setAttribute("data-utopia-router-view", "");
   let currentCleanup = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matthesketh/utopia-router",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "description": "File-based routing for UtopiaJS",
   "type": "module",
   "license": "MIT",