@solidjs/router 0.10.9 → 0.11.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import { isServer, getRequestEvent, createComponent as createComponent$1, delegateEvents, spread, mergeProps as mergeProps$1, template } from 'solid-js/web';
-import { getOwner, runWithOwner, createMemo, createContext, onCleanup, useContext, untrack, createSignal, createRenderEffect, on, startTransition, resetErrorBoundaries, createComponent, children, mergeProps, createRoot, Show, sharedConfig, $TRACK, splitProps, createResource } from 'solid-js';
+import { getOwner, runWithOwner, createMemo, createContext, onCleanup, useContext, untrack, createSignal, createRenderEffect, on, startTransition, resetErrorBoundaries, createComponent, children, mergeProps, createRoot, Show, getListener, sharedConfig, $TRACK, splitProps, createResource } from 'solid-js';
 import { createStore, reconcile } from 'solid-js/store';
 
 function createBeforeLeave() {
@@ -36,8 +36,49 @@ function createBeforeLeave() {
   };
 }
 
+// The following supports browser initiated blocking (eg back/forward)
+
+let depth;
+function saveCurrentDepth() {
+  if (!window.history.state || window.history.state._depth == null) {
+    window.history.replaceState({
+      ...window.history.state,
+      _depth: window.history.length - 1
+    }, "");
+  }
+  depth = window.history.state._depth;
+}
+if (!isServer) {
+  saveCurrentDepth();
+}
+function keepDepth(state) {
+  return {
+    ...state,
+    _depth: window.history.state && window.history.state._depth
+  };
+}
+function notifyIfNotBlocked(notify, block) {
+  let ignore = false;
+  return () => {
+    const prevDepth = depth;
+    saveCurrentDepth();
+    const delta = prevDepth == null ? null : depth - prevDepth;
+    if (ignore) {
+      ignore = false;
+      return;
+    }
+    if (delta && block(delta)) {
+      ignore = true;
+      window.history.go(-delta);
+    } else {
+      notify();
+    }
+  };
+}
+
 const hasSchemeRegex = /^(?:[a-z0-9]+:)?\/\//i;
 const trimPathRegex = /^\/+|(\/)\/+$/g;
+const mockBase = "http://sr";
 const redirectStatusCodes = new Set([204, 301, 302, 303, 307, 308]);
 function normalizePath(path, omitSlash = false) {
   const s = path.replace(trimPathRegex, "$1");
@@ -257,7 +298,7 @@ function createRoutes(routeDef, base = "") {
       const path = joinPaths(base, originalPath);
       let pattern = isLeaf ? path : path.split("/*", 1)[0];
       pattern = pattern.split("/").map(s => {
-        return s.startsWith(':') || s.startsWith('*') ? s : encodeURIComponent(s);
+        return s.startsWith(":") || s.startsWith("*") ? s : encodeURIComponent(s);
       }).join("/");
       acc.push({
         ...shared,
@@ -327,7 +368,7 @@ function getRouteMatches(branches, location) {
   return [];
 }
 function createLocation(path, state) {
-  const origin = new URL("http://sar");
+  const origin = new URL(mockBase);
   const url = createMemo(prev => {
     const path_ = path();
     try {
@@ -443,7 +484,7 @@ function createRouterContext(integration, getBranches, options = {}) {
     untrack(() => {
       if (typeof to === "number") {
         if (!to) ; else if (utils.go) {
-          beforeLeave.confirm(to, options) && utils.go(to);
+          utils.go(to);
         } else {
           console.warn("Router integration does not support relative routing");
         }
@@ -470,12 +511,12 @@ function createRouterContext(integration, getBranches, options = {}) {
       if (resolvedTo !== current || nextState !== state()) {
         if (isServer) {
           const e = getRequestEvent();
-          e && (e.response = new Response(null, {
+          e && (e.response = {
             status: 302,
-            headers: {
+            headers: new Headers({
               Location: resolvedTo
-            }
-          }));
+            })
+          });
           setSource({
             value: resolvedTo,
             replace,
@@ -553,7 +594,7 @@ function createRouterContext(integration, getBranches, options = {}) {
   }
   function initFromFlash() {
     const e = getRequestEvent();
-    return e && e.initialSubmission ? [e.initialSubmission] : [];
+    return e && e.router && e.router.submission ? [e.router.submission] : [];
   }
 }
 function createRouteContext(router, parent, outlet, match, params) {
@@ -622,7 +663,7 @@ function Routes(props) {
   const matches = createMemo(() => getRouteMatches(props.branches, props.routerState.location.pathname));
   if (isServer) {
     const e = getRequestEvent();
-    e && (e.routerMatches || (e.routerMatches = [])).push(matches().map(({
+    e && ((e.router || (e.router = {})).matches || (e.router.matches = matches().map(({
       route,
       path,
       params
@@ -632,7 +673,7 @@ function Routes(props) {
       match: path,
       params,
       metadata: route.metadata
-    })));
+    }))));
   }
   const params = createMemoObject(() => {
     const m = matches();
@@ -779,7 +820,7 @@ if (!isServer) {
   setInterval(() => {
     const now = Date.now();
     for (let [k, v] of cacheMap.entries()) {
-      if (!v[3].size && now - v[0] > CACHE_TIMEOUT) {
+      if (!v[3].count && now - v[0] > CACHE_TIMEOUT) {
         cacheMap.delete(k);
       }
     }
@@ -787,31 +828,29 @@ if (!isServer) {
 }
 function getCache() {
   if (!isServer) return cacheMap;
-  const req = getRequestEvent() || sharedConfig.context;
+  const req = getRequestEvent();
   if (!req) throw new Error("Cannot find cache context");
-  return req.routerCache || (req.routerCache = new Map());
+  return (req.router || (req.router = {})).cache || (req.router.cache = new Map());
 }
 function revalidate(key, force = true) {
   return startTransition(() => {
     const now = Date.now();
     cacheKeyOp(key, entry => {
       force && (entry[0] = 0); //force cache miss
-      revalidateSignals(entry[3], now); // retrigger live signals
+      entry[3][1](now); // retrigger live signals
     });
   });
 }
-
 function cacheKeyOp(key, fn) {
   key && !Array.isArray(key) && (key = [key]);
   for (let k of cacheMap.keys()) {
     if (key === undefined || matchKey(k, key)) fn(cacheMap.get(k));
   }
 }
-function revalidateSignals(set, time) {
-  for (let s of set) s[1](time);
-}
 function cache(fn, name, options) {
   const [store, setStore] = createStore({});
+  // prioritize GET for server functions
+  if (fn.GET) fn = fn.GET;
   const cachedFn = (...args) => {
     const cache = getCache();
     const intent = getIntent();
@@ -820,27 +859,24 @@ function cache(fn, name, options) {
     const now = Date.now();
     const key = name + hashKey(args);
     let cached = cache.get(key);
-    let version;
-    if (owner && !isServer) {
-      version = createSignal(now, {
-        equals: (p, v) => v - p < 50 // margin of error
-      });
-
-      onCleanup(() => cached[3].delete(version));
-      version[0](); // track it;
+    let tracking;
+    if (getListener() && !isServer) {
+      tracking = true;
+      onCleanup(() => cached[3].count--);
     }
-
-    if (cached && (isServer || intent === "native" || Date.now() - cached[0] < PRELOAD_TIMEOUT)) {
-      version && cached[3].add(version);
+    if (cached && (isServer || intent === "native" || cached[0] && cached[3].count || Date.now() - cached[0] < PRELOAD_TIMEOUT)) {
+      if (tracking) {
+        cached[3].count++;
+        cached[3][0](); // track
+      }
       if (cached[2] === "preload" && intent !== "preload") {
         cached[0] = now;
       }
       let res = cached[1];
       if (intent !== "preload") {
         res = "then" in cached[1] ? cached[1].then(handleResponse(false), handleResponse(true)) : handleResponse(false)(cached[1]);
-        !isServer && intent === "navigate" && startTransition(() => revalidateSignals(cached[3], cached[0])); // update version
+        !isServer && intent === "navigate" && startTransition(() => cached[3][1](cached[0])); // update version
       }
-
       return res;
     }
     let res = !isServer && sharedConfig.context && sharedConfig.load ? sharedConfig.load(key) // hydrating
@@ -855,31 +891,38 @@ function cache(fn, name, options) {
       cached[0] = now;
       cached[1] = res;
       cached[2] = intent;
-      version && cached[3].add(version);
-      if (!isServer && intent === "navigate") {
-        startTransition(() => revalidateSignals(cached[3], cached[0])); // update version
-      }
-    } else cache.set(key, cached = [now, res, intent, new Set(version ? [version] : [])]);
+      !isServer && intent === "navigate" && startTransition(() => cached[3][1](cached[0])); // update version
+    } else {
+      cache.set(key, cached = [now, res, intent, createSignal(now)]);
+      cached[3].count = 0;
+    }
+    if (tracking) {
+      cached[3].count++;
+      cached[3][0](); // track
+    }
     if (intent !== "preload") {
       res = "then" in res ? res.then(handleResponse(false), handleResponse(true)) : handleResponse(false)(res);
     }
     return res;
     function handleResponse(error) {
-      return v => {
-        if (v instanceof Response && redirectStatusCodes.has(v.status)) {
-          if (navigate) {
-            startTransition(() => {
-              let url = v.headers.get(LocationHeader);
-              if (url && url.startsWith("/")) {
-                navigate(url, {
-                  replace: true
-                });
-              } else if (!isServer && url) {
-                window.location.href = url;
-              }
-            });
+      return async v => {
+        if (v instanceof Response) {
+          if (redirectStatusCodes.has(v.status)) {
+            if (navigate) {
+              startTransition(() => {
+                let url = v.headers.get(LocationHeader);
+                if (url && url.startsWith("/")) {
+                  navigate(url, {
+                    replace: true
+                  });
+                } else if (!isServer && url) {
+                  window.location.href = url;
+                }
+              });
+            }
+            return;
           }
-          return;
+          if (v.customBody) v = await v.customBody();
         }
         if (error) throw v;
         if (isServer) return v;
@@ -896,20 +939,14 @@ cache.set = (key, value) => {
   const cache = getCache();
   const now = Date.now();
   let cached = cache.get(key);
-  let version;
-  if (getOwner()) {
-    version = createSignal(now, {
-      equals: (p, v) => v - p < 50 // margin of error
-    });
-
-    onCleanup(() => cached[3].delete(version));
-  }
   if (cached) {
     cached[0] = now;
     cached[1] = value;
     cached[2] = "preload";
-    version && cached[3].add(version);
-  } else cache.set(key, cached = [now, value,, new Set(version ? [version] : [])]);
+  } else {
+    cache.set(key, cached = [now, value,, createSignal(now)]);
+    cached[3].count = 0;
+  }
 };
 cache.clear = () => getCache().clear();
 function matchKey(key, keys) {
@@ -1003,7 +1040,7 @@ function toAction(fn, url) {
     const newFn = function (...passedArgs) {
       return fn.call(this, ...args, ...passedArgs);
     };
-    const uri = new URL(url, "http://sar");
+    const uri = new URL(url, mockBase);
     uri.searchParams.set("args", hashKey(args));
     return toAction(newFn, (uri.origin === "https://action" ? uri.origin : "") + uri.pathname + uri.search);
   };
@@ -1048,7 +1085,7 @@ function setupNativeEvents(preload = true, explicitLinks = false, actionBase = "
     function handleAnchor(evt) {
       if (evt.defaultPrevented || evt.button !== 0 || evt.metaKey || evt.altKey || evt.ctrlKey || evt.shiftKey) return;
       const a = evt.composedPath().find(el => el instanceof Node && el.nodeName.toUpperCase() === "A");
-      if (!a || explicitLinks && !a.getAttribute("link")) return;
+      if (!a || explicitLinks && !a.hasAttribute("link")) return;
       const svg = isSvg(a);
       const href = svg ? a.href.baseVal : a.href;
       const target = svg ? a.target.baseVal : a.target;
@@ -1099,10 +1136,11 @@ function setupNativeEvents(preload = true, explicitLinks = false, actionBase = "
       }
     }
     function handleFormSubmit(evt) {
-      let actionRef = evt.submitter && evt.submitter.hasAttribute("formaction") ? evt.submitter.formAction : evt.target.action;
+      let actionRef = evt.submitter && evt.submitter.hasAttribute("formaction") ? evt.submitter.getAttribute("formaction") : evt.target.getAttribute("action");
       if (!actionRef) return;
       if (!actionRef.startsWith("https://action/")) {
-        const url = new URL(actionRef);
+        // normalize server actions
+        const url = new URL(actionRef, mockBase);
         actionRef = router.parsePath(url.pathname + url.search);
         if (!actionRef.startsWith(actionBase)) return;
       }
@@ -1141,11 +1179,13 @@ function setupNativeEvents(preload = true, explicitLinks = false, actionBase = "
 
 function Router(props) {
   if (isServer) return StaticRouter(props);
+  const getSource = () => ({
+    value: window.location.pathname + window.location.search + window.location.hash,
+    state: window.history.state
+  });
+  const beforeLeave = createBeforeLeave();
   return createRouter({
-    get: () => ({
-      value: window.location.pathname + window.location.search + window.location.hash,
-      state: history.state
-    }),
+    get: getSource,
     set({
       value,
       replace,
@@ -1153,16 +1193,27 @@ function Router(props) {
       state
     }) {
       if (replace) {
-        window.history.replaceState(state, "", value);
+        window.history.replaceState(keepDepth(state), "", value);
       } else {
         window.history.pushState(state, "", value);
       }
       scrollToHash(window.location.hash.slice(1), scroll);
+      saveCurrentDepth();
     },
-    init: notify => bindEvent(window, "popstate", () => notify()),
+    init: notify => bindEvent(window, "popstate", notifyIfNotBlocked(notify, delta => {
+      if (delta && delta < 0) {
+        return !beforeLeave.confirm(delta);
+      } else {
+        const s = getSource();
+        return !beforeLeave.confirm(s.value, {
+          state: s.state
+        });
+      }
+    })),
     create: setupNativeEvents(props.preload, props.explicitLinks, props.actionBase),
     utils: {
-      go: delta => window.history.go(delta)
+      go: delta => window.history.go(delta),
+      beforeLeave
     }
   })(props);
 }
@@ -1179,8 +1230,10 @@ function hashParser(str) {
   return to;
 }
 function HashRouter(props) {
+  const getSource = () => window.location.hash.slice(1);
+  const beforeLeave = createBeforeLeave();
   return createRouter({
-    get: () => window.location.hash.slice(1),
+    get: getSource,
     set({
       value,
       replace,
@@ -1188,20 +1241,22 @@ function HashRouter(props) {
       state
     }) {
       if (replace) {
-        window.history.replaceState(state, "", "#" + value);
+        window.history.replaceState(keepDepth(state), "", "#" + value);
       } else {
         window.location.hash = value;
       }
       const hashIndex = value.indexOf("#");
       const hash = hashIndex >= 0 ? value.slice(hashIndex + 1) : "";
       scrollToHash(hash, scroll);
+      saveCurrentDepth();
     },
-    init: notify => bindEvent(window, "hashchange", () => notify()),
+    init: notify => bindEvent(window, "hashchange", notifyIfNotBlocked(notify, delta => !beforeLeave.confirm(delta && delta < 0 ? delta : getSource()))),
     create: setupNativeEvents(props.preload, props.explicitLinks, props.actionBase),
     utils: {
       go: delta => window.history.go(delta),
       renderPath: path => `#${path}`,
-      parsePath: hashParser
+      parsePath: hashParser,
+      beforeLeave
     }
   })(props);
 }
@@ -1273,10 +1328,10 @@ function A(props) {
   const location = useLocation();
   const isActive = createMemo(() => {
     const to_ = to();
-    if (to_ === undefined) return false;
+    if (to_ === undefined) return [false, false];
     const path = normalizePath(to_.split(/[?#]/, 1)[0]).toLowerCase();
     const loc = normalizePath(location.pathname).toLowerCase();
-    return props.end ? path === loc : loc.startsWith(path);
+    return [props.end ? path === loc : loc.startsWith(path), path === loc];
   });
   return (() => {
     const _el$ = _tmpl$();
@@ -1292,14 +1347,14 @@ function A(props) {
           ...(props.class && {
             [props.class]: true
           }),
-          [props.inactiveClass]: !isActive(),
-          [props.activeClass]: isActive(),
+          [props.inactiveClass]: !isActive()[0],
+          [props.activeClass]: isActive()[0],
           ...rest.classList
         };
       },
       "link": "",
       get ["aria-current"]() {
-        return isActive() ? "page" : undefined;
+        return isActive()[1] ? "page" : undefined;
       }
     }), false, false);
     return _el$;
@@ -1412,5 +1467,15 @@ function reload(init) {
     } : {})
   });
 }
+function json(data, init) {
+  const headers = new Headers((init || {}).headers);
+  headers.set("Content-Type", "application/json");
+  const response = new Response(JSON.stringify(data), {
+    ...init,
+    headers
+  });
+  response.customBody = () => data;
+  return response;
+}
 
-export { A, HashRouter, MemoryRouter, Navigate, Route, Router, StaticRouter, mergeSearchString as _mergeSearchString, action, cache, createAsync, createBeforeLeave, createMemoryHistory, createRouter, redirect, reload, revalidate, useAction, useBeforeLeave, useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, useResolvedPath, useSearchParams, useSubmission, useSubmissions };
+export { A, HashRouter, MemoryRouter, Navigate, Route, Router, StaticRouter, mergeSearchString as _mergeSearchString, action, cache, createAsync, createBeforeLeave, createMemoryHistory, createRouter, json, keepDepth, notifyIfNotBlocked, redirect, reload, revalidate, saveCurrentDepth, useAction, useBeforeLeave, useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, useResolvedPath, useSearchParams, useSubmission, useSubmissions };

package/dist/index.jsx

@@ -1,6 +1,6 @@
-export * from "./routers";
-export * from "./components";
-export * from "./lifecycle";
-export { useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, useResolvedPath, useSearchParams, useBeforeLeave, } from "./routing";
-export { mergeSearchString as _mergeSearchString } from "./utils";
-export * from "./data";
+export * from "./routers/index.js";
+export * from "./components.jsx";
+export * from "./lifecycle.js";
+export { useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, useResolvedPath, useSearchParams, useBeforeLeave, } from "./routing.js";
+export { mergeSearchString as _mergeSearchString } from "./utils.js";
+export * from "./data/index.js";

package/dist/lifecycle.d.ts

@@ -1,2 +1,5 @@
-import { BeforeLeaveLifecycle } from "./types";
+import { BeforeLeaveLifecycle, LocationChange } from "./types.js";
 export declare function createBeforeLeave(): BeforeLeaveLifecycle;
+export declare function saveCurrentDepth(): void;
+export declare function keepDepth(state: any): any;
+export declare function notifyIfNotBlocked(notify: (value?: string | LocationChange) => void, block: (delta: number | null) => boolean): () => void;

package/dist/lifecycle.js

@@ -1,3 +1,4 @@
+import { isServer } from "solid-js/web";
 export function createBeforeLeave() {
     let listeners = new Set();
     function subscribe(listener) {
@@ -30,3 +31,39 @@ export function createBeforeLeave() {
         confirm
     };
 }
+// The following supports browser initiated blocking (eg back/forward)
+let depth;
+export function saveCurrentDepth() {
+    if (!window.history.state || window.history.state._depth == null) {
+        window.history.replaceState({ ...window.history.state, _depth: window.history.length - 1 }, "");
+    }
+    depth = window.history.state._depth;
+}
+if (!isServer) {
+    saveCurrentDepth();
+}
+export function keepDepth(state) {
+    return {
+        ...state,
+        _depth: window.history.state && window.history.state._depth
+    };
+}
+export function notifyIfNotBlocked(notify, block) {
+    let ignore = false;
+    return () => {
+        const prevDepth = depth;
+        saveCurrentDepth();
+        const delta = prevDepth == null ? null : depth - prevDepth;
+        if (ignore) {
+            ignore = false;
+            return;
+        }
+        if (delta && block(delta)) {
+            ignore = true;
+            window.history.go(-delta);
+        }
+        else {
+            notify();
+        }
+    };
+}

package/dist/routers/HashRouter.d.ts

@@ -1,5 +1,5 @@
 import type { JSX } from "solid-js";
-import type { BaseRouterProps } from "./components";
+import type { BaseRouterProps } from "./components.js";
 export declare function hashParser(str: string): string;
 export type HashRouterProps = BaseRouterProps & {
     actionBase?: string;

package/dist/routers/HashRouter.js

@@ -1,5 +1,6 @@
-import { setupNativeEvents } from "../data/events";
-import { createRouter, scrollToHash, bindEvent } from "./createRouter";
+import { setupNativeEvents } from "../data/events.js";
+import { createRouter, scrollToHash, bindEvent } from "./createRouter.js";
+import { createBeforeLeave, keepDepth, notifyIfNotBlocked, saveCurrentDepth } from "../lifecycle.js";
 export function hashParser(str) {
     const to = str.replace(/^.*?#/, "");
     // Hash-only hrefs like `#foo` from plain anchors will come in as `/#foo` whereas a link to
@@ -12,11 +13,13 @@ export function hashParser(str) {
     return to;
 }
 export function HashRouter(props) {
+    const getSource = () => window.location.hash.slice(1);
+    const beforeLeave = createBeforeLeave();
     return createRouter({
-        get: () => window.location.hash.slice(1),
+        get: getSource,
         set({ value, replace, scroll, state }) {
             if (replace) {
-                window.history.replaceState(state, "", "#" + value);
+                window.history.replaceState(keepDepth(state), "", "#" + value);
             }
             else {
                 window.location.hash = value;
@@ -24,13 +27,15 @@ export function HashRouter(props) {
             const hashIndex = value.indexOf("#");
             const hash = hashIndex >= 0 ? value.slice(hashIndex + 1) : "";
             scrollToHash(hash, scroll);
+            saveCurrentDepth();
         },
-        init: notify => bindEvent(window, "hashchange", () => notify()),
+        init: notify => bindEvent(window, "hashchange", notifyIfNotBlocked(notify, delta => !beforeLeave.confirm(delta && delta < 0 ? delta : getSource()))),
         create: setupNativeEvents(props.preload, props.explicitLinks, props.actionBase),
         utils: {
             go: delta => window.history.go(delta),
             renderPath: path => `#${path}`,
-            parsePath: hashParser
+            parsePath: hashParser,
+            beforeLeave
         }
     })(props);
 }

package/dist/routers/MemoryRouter.d.ts

@@ -1,5 +1,5 @@
-import type { LocationChange } from "../types";
-import type { BaseRouterProps } from "./components";
+import type { LocationChange } from "../types.js";
+import type { BaseRouterProps } from "./components.jsx";
 import type { JSX } from "solid-js";
 export type MemoryHistory = {
     get: () => string;

package/dist/routers/MemoryRouter.js

@@ -1,4 +1,4 @@
-import { createRouter, scrollToHash } from "./createRouter";
+import { createRouter, scrollToHash } from "./createRouter.js";
 export function createMemoryHistory() {
     const entries = ["/"];
     let index = 0;

package/dist/routers/Router.d.ts

@@ -1,4 +1,4 @@
-import type { BaseRouterProps } from "./components";
+import type { BaseRouterProps } from "./components.jsx";
 import type { JSX } from "solid-js";
 export type RouterProps = BaseRouterProps & {
     url?: string;

package/dist/routers/Router.js

@@ -1,28 +1,41 @@
 import { isServer } from "solid-js/web";
-import { createRouter, scrollToHash, bindEvent } from "./createRouter";
-import { StaticRouter } from "./StaticRouter";
-import { setupNativeEvents } from "../data/events";
+import { createRouter, scrollToHash, bindEvent } from "./createRouter.js";
+import { StaticRouter } from "./StaticRouter.js";
+import { setupNativeEvents } from "../data/events.js";
+import { createBeforeLeave, keepDepth, notifyIfNotBlocked, saveCurrentDepth } from "../lifecycle.js";
 export function Router(props) {
     if (isServer)
         return StaticRouter(props);
+    const getSource = () => ({
+        value: window.location.pathname + window.location.search + window.location.hash,
+        state: window.history.state
+    });
+    const beforeLeave = createBeforeLeave();
     return createRouter({
-        get: () => ({
-            value: window.location.pathname + window.location.search + window.location.hash,
-            state: history.state
-        }),
+        get: getSource,
         set({ value, replace, scroll, state }) {
             if (replace) {
-                window.history.replaceState(state, "", value);
+                window.history.replaceState(keepDepth(state), "", value);
             }
             else {
                 window.history.pushState(state, "", value);
             }
             scrollToHash(window.location.hash.slice(1), scroll);
+            saveCurrentDepth();
         },
-        init: notify => bindEvent(window, "popstate", () => notify()),
+        init: notify => bindEvent(window, "popstate", notifyIfNotBlocked(notify, delta => {
+            if (delta && delta < 0) {
+                return !beforeLeave.confirm(delta);
+            }
+            else {
+                const s = getSource();
+                return !beforeLeave.confirm(s.value, { state: s.state });
+            }
+        })),
         create: setupNativeEvents(props.preload, props.explicitLinks, props.actionBase),
         utils: {
-            go: delta => window.history.go(delta)
+            go: delta => window.history.go(delta),
+            beforeLeave
         }
     })(props);
 }

package/dist/routers/StaticRouter.d.ts

@@ -1,4 +1,4 @@
-import { type BaseRouterProps } from "./components";
+import { type BaseRouterProps } from "./components.jsx";
 import type { JSX } from "solid-js";
 export type StaticRouterProps = BaseRouterProps & {
     url?: string;

package/dist/routers/StaticRouter.js

@@ -1,5 +1,5 @@
 import { getRequestEvent } from "solid-js/web";
-import { createRouterComponent } from "./components";
+import { createRouterComponent } from "./components.jsx";
 function getPath(url) {
     const u = new URL(url);
     return u.pathname + u.search;