@solidjs/router 0.4.3 → 0.5.1

package/dist/index.jsx

@@ -1,4 +1,5 @@
 export * from "./components";
 export * from "./integration";
-export { useRouteData, useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, useResolvedPath, useSearchParams } from "./routing";
+export * from "./lifecycle";
+export { useRouteData, useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, useResolvedPath, useSearchParams, useBeforeLeave, } from "./routing";
 export { mergeSearchString as _mergeSearchString } from "./utils";

package/dist/lifecycle.d.ts

@@ -0,0 +1,2 @@
+import { BeforeLeaveLifecycle } from "./types";
+export declare function createBeforeLeave(): BeforeLeaveLifecycle;

package/dist/lifecycle.js

@@ -0,0 +1,32 @@
+export function createBeforeLeave() {
+    let listeners = new Set();
+    function subscribe(listener) {
+        listeners.add(listener);
+        return () => listeners.delete(listener);
+    }
+    let ignore = false;
+    function confirm(to, options) {
+        if (ignore)
+            return !(ignore = false);
+        const e = {
+            to,
+            options,
+            defaultPrevented: false,
+            preventDefault: () => (e.defaultPrevented = true)
+        };
+        for (const l of listeners)
+            l.listener({
+                ...e,
+                from: l.location,
+                retry: (force) => {
+                    force && (ignore = true);
+                    l.navigate(to, options);
+                }
+            });
+        return !e.defaultPrevented;
+    }
+    return {
+        subscribe,
+        confirm
+    };
+}

package/dist/routing.d.ts

@@ -1,5 +1,5 @@
 import type { Component, Accessor } from "solid-js";
-import type { Branch, Location, LocationChangeSignal, NavigateOptions, Navigator, Params, Route, RouteContext, RouteDataFunc, RouteDefinition, RouteMatch, RouterContext, RouterIntegration, SetParams } from "./types";
+import type { BeforeLeaveEventArgs, Branch, Location, LocationChangeSignal, NavigateOptions, Navigator, Params, Route, RouteContext, RouteDataFunc, RouteDefinition, RouteMatch, RouterContext, RouterIntegration, SetParams } from "./types";
 export declare const RouterContextObj: import("solid-js").Context<RouterContext | undefined>;
 export declare const RouteContextObj: import("solid-js").Context<RouteContext | undefined>;
 export declare const useRouter: () => RouterContext;
@@ -13,7 +13,8 @@ export declare const useMatch: (path: () => string) => Accessor<import("./types"
 export declare const useParams: <T extends Params>() => T;
 declare type MaybeReturnType<T> = T extends (...args: any) => infer R ? R : T;
 export declare const useRouteData: <T>() => MaybeReturnType<T>;
-export declare const useSearchParams: <T extends Params>() => [T, (params: SetParams, options?: Partial<NavigateOptions<unknown>> | undefined) => void];
+export declare const useSearchParams: <T extends Params>() => [T, (params: SetParams, options?: Partial<NavigateOptions>) => void];
+export declare const useBeforeLeave: (listener: (e: BeforeLeaveEventArgs) => void) => void;
 export declare function createRoutes(routeDef: RouteDefinition, base?: string, fallback?: Component): Route[];
 export declare function createBranch(routes: Route[], index?: number): Branch;
 export declare function createBranches(routeDef: RouteDefinition | RouteDefinition[], base?: string, fallback?: Component, stack?: Route[], branches?: Branch[]): Branch[];

package/dist/routing.js

@@ -1,6 +1,7 @@
-import { createComponent, createContext, createMemo, createRenderEffect, createSignal, on, onCleanup, untrack, useContext, useTransition, resetErrorBoundaries } from "solid-js";
+import { createComponent, createContext, createMemo, createRenderEffect, createSignal, on, onCleanup, untrack, useContext, startTransition, resetErrorBoundaries } from "solid-js";
 import { isServer, delegateEvents } from "solid-js/web";
 import { normalizeIntegration } from "./integration";
+import { createBeforeLeave } from "./lifecycle";
 import { createMemoObject, extractSearchParams, invariant, resolvePath, createMatcher, joinPaths, scoreRoute, mergeSearchString, urlDecode, expandOptionals } from "./utils";
 const MAX_REDIRECTS = 100;
 export const RouterContextObj = createContext();
@@ -34,10 +35,14 @@ export const useSearchParams = () => {
     const navigate = useNavigate();
     const setSearchParams = (params, options) => {
         const searchString = untrack(() => mergeSearchString(location.search, params));
-        navigate(searchString, { scroll: false, ...options, resolve: true });
+        navigate(location.pathname + searchString + location.hash, { scroll: false, resolve: false, ...options });
     };
     return [location.query, setSearchParams];
 };
+export const useBeforeLeave = (listener) => {
+    const s = useRouter().beforeLeave.subscribe({ listener, location: useLocation(), navigate: useNavigate() });
+    onCleanup(s);
+};
 export function createRoutes(routeDef, base = "", fallback) {
     const { component, data, children } = routeDef;
     const isLeaf = !children || (Array.isArray(children) && !children.length);
@@ -102,7 +107,8 @@ export function createBranches(routeDef, base = "", fallback, stack = [], branch
             const routes = createRoutes(def, base, fallback);
             for (const route of routes) {
                 stack.push(route);
-                if (def.children) {
+                const isEmptyArray = Array.isArray(def.children) && def.children.length === 0;
+                if (def.children && !isEmptyArray) {
                     createBranches(def.children, route.pattern, fallback, stack, branches);
                 }
                 else {
@@ -166,6 +172,7 @@ export function createRouterContext(integration, base = "", data, out) {
     const { signal: [source, setSource], utils = {} } = normalizeIntegration(integration);
     const parsePath = utils.parsePath || (p => p);
     const renderPath = utils.renderPath || (p => p);
+    const beforeLeave = utils.beforeLeave || createBeforeLeave();
     const basePath = resolvePath("", base);
     const output = isServer && out
         ? Object.assign(out, {
@@ -179,7 +186,16 @@ export function createRouterContext(integration, base = "", data, out) {
     else if (basePath && !source().value) {
         setSource({ value: basePath, replace: true, scroll: false });
     }
-    const [isRouting, start] = useTransition();
+    const [isRouting, setIsRouting] = createSignal(false);
+    const start = async (callback) => {
+        setIsRouting(true);
+        try {
+            await startTransition(callback);
+        }
+        finally {
+            setIsRouting(false);
+        }
+    };
     const [reference, setReference] = createSignal(source().value);
     const [state, setState] = createSignal(source().state);
     const location = createLocation(reference, state);
@@ -215,7 +231,7 @@ export function createRouterContext(integration, base = "", data, out) {
                     // A delta of 0 means stay at the current location, so it is ignored
                 }
                 else if (utils.go) {
-                    utils.go(to);
+                    beforeLeave.confirm(to, options) && utils.go(to);
                 }
                 else {
                     console.warn("Router integration does not support relative routing");
@@ -243,7 +259,7 @@ export function createRouterContext(integration, base = "", data, out) {
                     }
                     setSource({ value: resolvedTo, replace, scroll, state: nextState });
                 }
-                else {
+                else if (beforeLeave.confirm(resolvedTo, options)) {
                     const len = referrers.push({ value: current, replace, scroll, state: state() });
                     start(() => {
                         setReference(resolvedTo);
@@ -292,9 +308,6 @@ export function createRouterContext(integration, base = "", data, out) {
         });
     });
     if (!isServer) {
-        function isSvg(el) {
-            return el.namespaceURI === "http://www.w3.org/2000/svg";
-        }
         function handleAnchorClick(evt) {
             if (evt.defaultPrevented ||
                 evt.button !== 0 ||
@@ -306,22 +319,20 @@ export function createRouterContext(integration, base = "", data, out) {
             const a = evt
                 .composedPath()
                 .find(el => el instanceof Node && el.nodeName.toUpperCase() === "A");
-            if (!a)
+            if (!a || !a.hasAttribute("link"))
                 return;
-            const svg = isSvg(a);
-            const href = svg ? a.href.baseVal : a.href;
-            const target = svg ? a.target.baseVal : a.target;
-            if (target || (!href && !a.hasAttribute("state")))
+            const href = a.href;
+            if (a.target || (!href && !a.hasAttribute("state")))
                 return;
             const rel = (a.getAttribute("rel") || "").split(/\s+/);
             if (a.hasAttribute("download") || (rel && rel.includes("external")))
                 return;
-            const url = svg ? new URL(href, document.baseURI) : new URL(href);
+            const url = new URL(href);
             const pathname = urlDecode(url.pathname);
             if (url.origin !== window.location.origin ||
                 (basePath && pathname && !pathname.toLowerCase().startsWith(basePath.toLowerCase())))
                 return;
-            const to = parsePath(pathname + urlDecode(url.search, true) + urlDecode(url.hash));
+            const to = parsePath(url.pathname + url.search + url.hash);
             const state = a.getAttribute("state");
             evt.preventDefault();
             navigateFromRoute(baseRoute, to, {
@@ -343,7 +354,8 @@ export function createRouterContext(integration, base = "", data, out) {
         isRouting,
         renderPath,
         parsePath,
-        navigatorFactory
+        navigatorFactory,
+        beforeLeave
     };
 }
 export function createRouteContext(router, parent, child, match) {

package/dist/types.d.ts

@@ -93,6 +93,7 @@ export interface RouterUtils {
     renderPath(path: string): string;
     parsePath(str: string): string;
     go(delta: number): void;
+    beforeLeave: BeforeLeaveLifecycle;
 }
 export interface OutputMatch {
     originalPath: string;
@@ -112,4 +113,22 @@ export interface RouterContext {
     isRouting: () => boolean;
     renderPath(path: string): string;
     parsePath(str: string): string;
+    beforeLeave: BeforeLeaveLifecycle;
+}
+export interface BeforeLeaveEventArgs {
+    from: Location;
+    to: string | number;
+    options?: Partial<NavigateOptions>;
+    readonly defaultPrevented: boolean;
+    preventDefault(): void;
+    retry(force?: boolean): void;
+}
+export interface BeforeLeaveListener {
+    listener(e: BeforeLeaveEventArgs): void;
+    location: Location;
+    navigate: Navigator;
+}
+export interface BeforeLeaveLifecycle {
+    subscribe(listener: BeforeLeaveListener): () => void;
+    confirm(to: string | number, options?: Partial<NavigateOptions>): boolean;
 }

package/dist/utils.d.ts

@@ -1,4 +1,5 @@
 import type { Params, PathMatch, Route, SetParams } from "./types";
+export declare function normalizePath(path: string, omitSlash?: boolean): string;
 export declare function resolvePath(base: string, path: string, from?: string): string | undefined;
 export declare function invariant<T>(value: T | null | undefined, message: string): T;
 export declare function joinPaths(from: string, to: string): string;

package/dist/utils.js

@@ -1,7 +1,7 @@
 import { createMemo, getOwner, runWithOwner } from "solid-js";
 const hasSchemeRegex = /^(?:[a-z0-9]+:)?\/\//i;
 const trimPathRegex = /^\/+|\/+$/g;
-function normalize(path, omitSlash = false) {
+export function normalizePath(path, omitSlash = false) {
     const s = path.replace(trimPathRegex, "");
     return s ? (omitSlash || /^[?#]/.test(s) ? s : "/" + s) : "";
 }
@@ -9,8 +9,8 @@ export function resolvePath(base, path, from) {
     if (hasSchemeRegex.test(path)) {
         return undefined;
     }
-    const basePath = normalize(base);
-    const fromPath = from && normalize(from);
+    const basePath = normalizePath(base);
+    const fromPath = from && normalizePath(from);
     let result = "";
     if (!fromPath || path.startsWith("/")) {
         result = basePath;
@@ -21,7 +21,7 @@ export function resolvePath(base, path, from) {
     else {
         result = fromPath;
     }
-    return (result || "/") + normalize(path, !result);
+    return (result || "/") + normalizePath(path, !result);
 }
 export function invariant(value, message) {
     if (value == null) {
@@ -30,7 +30,7 @@ export function invariant(value, message) {
     return value;
 }
 export function joinPaths(from, to) {
-    return normalize(from).replace(/\/*(\*.*)?$/g, "") + normalize(to);
+    return normalizePath(from).replace(/\/*(\*.*)?$/g, "") + normalizePath(to);
 }
 export function extractSearchParams(url) {
     const params = {};

package/package.json

@@ -6,7 +6,7 @@
     "Ryan Turnquist"
   ],
   "license": "MIT",
-  "version": "0.4.3",
+  "version": "0.5.1",
   "homepage": "https://github.com/solidjs/solid-router#readme",
   "repository": {
     "type": "git",
@@ -38,23 +38,24 @@
     "pretty": "prettier --write \"{src,test}/**/*.{ts,tsx}\""
   },
   "devDependencies": {
-    "@babel/core": "^7.15.8",
-    "@babel/preset-typescript": "^7.15.0",
-    "@rollup/plugin-babel": "5.3.0",
-    "@rollup/plugin-node-resolve": "13.0.5",
-    "@types/jest": "^27.0.2",
-    "@types/node": "^16.10.3",
-    "babel-preset-solid": "^1.4.4",
-    "jest": "^27.2.5",
-    "prettier": "^2.5.1",
-    "rollup": "^2.52.1",
+    "@babel/core": "^7.18.13",
+    "@babel/preset-typescript": "^7.18.6",
+    "@rollup/plugin-babel": "5.3.1",
+    "@rollup/plugin-node-resolve": "13.3.0",
+    "@types/jest": "^29.0.0",
+    "@types/node": "^18.7.14",
+    "babel-preset-solid": "^1.5.3",
+    "jest": "^29.0.1",
+    "jest-environment-jsdom": "^29.2.1",
+    "prettier": "^2.7.1",
+    "rollup": "^2.79.0",
     "rollup-plugin-terser": "^7.0.2",
     "solid-jest": "^0.2.0",
-    "solid-js": "^1.4.4",
-    "typescript": "^4.5.4"
+    "solid-js": "^1.5.3",
+    "typescript": "^4.8.2"
   },
   "peerDependencies": {
-    "solid-js": "^1.3.5"
+    "solid-js": "^1.5.3"
   },
   "jest": {
     "preset": "solid-jest/preset/browser"