aberdeen 1.0.13 → 1.1.0

package/src/dispatcher.ts

@@ -0,0 +1,130 @@
+/**
+ * Symbol to return when a custom {@link Dispatcher.addRoute} matcher cannot match a segment.
+ */
+export const matchFailed: unique symbol = Symbol("matchFailed");
+
+/**
+ * Special {@link Dispatcher.addRoute} matcher that matches the rest of the segments as an array of strings.
+ */
+export const matchRest: unique symbol = Symbol("matchRest");
+
+type Matcher = string | ((segment: string) => any) | typeof matchRest;
+
+type ExtractParamType<M> =  M extends string
+? never : (
+    M extends ((segment: string) => infer R)
+    ? Exclude<R, typeof matchFailed>
+    : (M extends typeof matchRest ? string[] : never)
+);
+
+type ParamsFromMatchers<T extends Matcher[]> = T extends [infer M1, ...infer Rest]
+? (
+    M1 extends Matcher
+    ? (
+        ExtractParamType<M1> extends never
+        ? ParamsFromMatchers<Rest extends Matcher[] ? Rest : []>
+        : [ExtractParamType<M1>, ...ParamsFromMatchers<Rest extends Matcher[] ? Rest : []>]
+    ) : never
+) : [];
+
+interface DispatcherRoute {
+    matchers: Matcher[];
+    handler: (...params: any[]) => void;
+}
+
+/**
+ * Simple route matcher and dispatcher.
+ * 
+ * Example usage:
+ * 
+ * ```ts
+ * const dispatcher = new Dispatcher();
+ * 
+ * dispatcher.addRoute("user", Number, "stream", String, (id, stream) => {
+ *    console.log(`User ${id}, stream ${stream}`);
+ * });
+ *
+ * dispatcher.dispatch(["user", "42", "stream", "music"]);
+ * // Logs: User 42, stream music
+ * 
+ * dispatcher.addRoute("search", matchRest, (terms: string[]) => {
+ *     console.log("Search terms:", terms);
+ * });
+ * 
+ * dispatcher.dispatch(["search", "classical", "piano"]);
+ * // Logs: Search terms: [ 'classical', 'piano' ]
+ * ```
+ */
+export class Dispatcher {
+    private routes: Array<DispatcherRoute> = [];
+    
+    /**
+     * Add a route with matchers and a handler function.
+     * @param args An array of matchers followed by a handler function. Each matcher can be:
+     * - A string: matches exactly that string.
+     * - A function: takes a string segment and returns a value (of any type) if it matches, or {@link matchFailed} if it doesn't match. The return value (if not `matchFailed` and not `NaN`) is passed as a parameter to the handler function. The built-in functions `Number` and `String` can be used to match numeric and string segments respectively.
+     * - The special {@link matchRest} symbol: matches the rest of the segments as an array of strings. Only one `matchRest` is allowed, and it must be the last matcher.
+     * @template T - Array of matcher types.
+     * @template H - Handler function type, inferred from the matchers.
+     */
+    addRoute<T extends Matcher[], H extends (...args: ParamsFromMatchers<T>) => void>(...args: [...T, H]): void {
+        const matchers = args.slice(0, -1) as Matcher[];
+        const handler = args[args.length - 1] as (...args: any) => any;
+
+        if (typeof handler !== "function") {
+            throw new Error("Last argument should be a handler function");
+        }
+        
+        const restCount = matchers.filter(m => m === matchRest).length;
+        if (restCount > 1) {
+            throw new Error("Only one matchRest is allowed");
+        }
+
+        this.routes.push({ matchers, handler });
+    }
+    
+    /**
+     * Dispatches the given segments to the first route handler that matches.
+     * @param segments Array of string segments to match against the added routes. When using this class with the Aberdeen `route` module, one would typically pass `route.current.p`.
+     * @returns True if a matching route was found and handled, false otherwise.
+     */
+    dispatch(segments: string[]): boolean {
+        for (const route of this.routes) {
+            const args = matchRoute(route, segments);
+            if (args) {
+                route.handler(...args);
+                return true;
+            }
+        }
+        return false;
+    }
+}
+
+function matchRoute(route: DispatcherRoute, segments: string[]): any[] | undefined {
+    const args: any[] = [];
+    let segmentIndex = 0;
+
+    for (const matcher of route.matchers) {
+        if (matcher === matchRest) {
+            const len = segments.length - (route.matchers.length - 1);
+            if (len < 0) return;
+            args.push(segments.slice(segmentIndex, segmentIndex + len));
+            segmentIndex += len;
+            continue;
+        }
+
+        if (segmentIndex >= segments.length) return;
+        const segment = segments[segmentIndex];
+        
+        if (typeof matcher === "string") {
+            if (segment !== matcher) return;
+        } else if (typeof matcher === "function") {
+            const result = matcher(segment);
+            if (result === matchFailed || (typeof result === 'number' && isNaN(result))) return;
+            args.push(result);
+        }
+        
+        segmentIndex++;
+    }
+    return args; // success!
+}

package/src/route.ts

@@ -1,229 +1,320 @@
-import {
-	clean,
-	clone,
-	getParentElement,
-	immediateObserve,
-	observe,
-	proxy,
-	runQueue,
-	unproxy,
-} from "./aberdeen.js";
+import {clean, getParentElement, $, proxy, runQueue, unproxy, copy, merge, clone, leakScope} from "./aberdeen.js";
 
-/**
- * The class for the singleton `route` object.
- *
- */
+type NavType = "load" | "back" | "forward" | "go";
 
-export class Route {
-	/** The current path of the URL split into components. For instance `/` or `/users/123/feed`. Updates will be reflected in the URL and will *push* a new entry to the browser history. */
-	path!: string;
-	/** Array containing the path segments. For instance `[]` or `['users', 123, 'feed']`. Updates will be reflected in the URL and will *push* a new entry to the browser history. Also, the values of `p` and `path` will be synced. */
-	p!: string[];
-	/** An observable object containing search parameters (a split up query string). For instance `{order: "date", title: "something"}` or just `{}`. By default, updates will be reflected in the URL, replacing the current history state. */
-	hash!: string;
-	/** A part of the browser history *state* that is considered part of the page *identify*, meaning changes will (by default) cause a history push, and when going *back*, it must match. */
-	search!: Record<string, string>;
-	/** The `hash` interpreted as search parameters. So `"a=x&b=y"` becomes `{a: "x", b: "y"}`. */
-	id!: Record<string, any>;
-	/** The auxiliary part of the browser history *state*, not considered part of the page *identity*. Changes will be reflected in the browser history using a replace. */
-	aux!: Record<string, any>;
+/**
+* The class for the global `route` object.
+*/
+export interface Route {
+	/** The current path of the URL as a string. For instance `"/"` or `"/users/123/feed"`. Paths are normalized to always start with a `/` and never end with a `/` (unless it's the root path). */
+	path: string;
+	/** An convenience array containing path segments, mapping to `path`. For instance `[]` (for `"/"`) or `['users', '123', 'feed']` (for `"/users/123/feed"`). */
+	p: string[];
+	/** The hash fragment including the leading `#`, or an empty string. For instance `"#my_section"` or `""`. */
+	hash: string;
+	/** The query string interpreted as search parameters. So `"a=x&b=y"` becomes `{a: "x", b: "y"}`. */
+	search: Record<string, string>;
+	/** An object to be used for any additional data you want to associate with the current page. Data should be JSON-compatible. */
+	state: Record<string, any>;
 	/** The navigation depth of the current session. Starts at 1. Writing to this property has no effect. */
-	depth = 1;
+	depth: number;
 	/** The navigation action that got us to this page. Writing to this property has no effect.
-        - `"load"`: An initial page load.
-        - `"back"` or `"forward"`: When we navigated backwards or forwards in the stack.
-        - `"push"`: When we added a new page on top of the stack. 
-    */
-	nav: "load" | "back" | "forward" | "push" = "load";
-	/** As described above, this library takes a best guess about whether pushing an item to the browser history makes sense or not. When `mode` is... 
-   	    - `"push"`: Force creation of a new browser history entry. 
-   	    - `"replace"`: Update the current history entry, even when updates to other keys would normally cause a *push*.
- 	    - `"back"`: Unwind the history (like repeatedly pressing the *back* button) until we find a page that matches the given `path` and `id` (or that is the first page in our stack), and then *replace* that state by the full given state.
-        The `mode` key can be written to `route` but will be immediately and silently removed.
-    */
-	mode: "push" | "replace" | "back" | undefined;
+	- `"load"`: An initial page load.
+	- `"back"` or `"forward"`: When we navigated backwards or forwards in the stack.
+	- `"go"`: When we added a new page on top of the stack.
+	Mostly useful for page transition animations. Writing to this property has no effect.
+	*/
+	nav: NavType;
 }
 
+let log: (...args: any) => void = () => {};
+
 /**
- * The singleton {@link Route} object reflecting the current URL and browser history state. You can make changes to it to affect the URL and browser history. See {@link Route} for details.
+ * Configure logging on route changes.
+ * @param value `true` to enable logging to console, `false` to disable logging, or a custom logging function. Defaults to `false`.
  */
-export const route = proxy(new Route());
-
-let stateRoute = {
-	nonce: -1,
-	depth: 0,
-};
-
-// Reflect changes to the browser URL (back/forward navigation) in the `route` and `stack`.
-function handleLocationUpdate(event?: PopStateEvent) {
-	const state = event?.state || {};
-	let nav: "load" | "back" | "forward" | "push" = "load";
-	if (state.route?.nonce == null) {
-		state.route = {
-			nonce: Math.floor(Math.random() * Number.MAX_SAFE_INTEGER),
-			depth: 1,
-		};
-		history.replaceState(state, "");
-	} else if (stateRoute.nonce === state.route.nonce) {
-		nav = state.route.depth > stateRoute.depth ? "forward" : "back";
+export function setLog(value: boolean | ((...args: any[]) => void)) {
+	if (value === true) {
+		log = console.log.bind(console, 'aberdeen router');
+	} else if (value === false) {
+		log = () => {};
+	} else {
+		log = value;
 	}
-	stateRoute = state.route;
+}
 
-	if (unproxy(route).mode === "back") {
-		route.depth = stateRoute.depth;
-		// We are still in the process of searching for a page in our navigation history..
-		updateHistory();
-		return;
-	}
+function getRouteFromBrowser(): Route {
+	return toCanonRoute({
+		path: location.pathname,
+		hash: location.hash,
+		search: Object.fromEntries(new URLSearchParams(location.search)),
+		state: history.state?.state || {},
+	}, "load", (history.state?.stack?.length || 0) + 1);
+}
 
-	const search: any = {};
-	for (const [k, v] of new URLSearchParams(location.search)) {
-		search[k] = v;
+/**
+* Deep compare `a` and `b`. If `partial` is true, objects contained in `b` may be a subset
+* of their counterparts in `a` and still be considered equal.
+*/
+function equal(a: any, b: any, partial: boolean): boolean {
+	if (a===b) return true;
+	if (typeof a !== "object" || !a || typeof b !== "object" || !b) return false; // otherwise they would have been equal
+	if (a.constructor !== b.constructor) return false;
+	if (b instanceof Array) {
+		if (a.length !== b.length) return false;
+		for(let i = 0; i < b.length; i++) {
+			if (!equal(a[i], b[i], partial)) return false;
+		}
+	} else {
+		for(const k of Object.keys(b)) {
+			if (!equal(a[k], b[k], partial)) return false;
+		}
+		if (!partial) {
+			for(const k of Object.keys(a)) {
+				if (!b.hasOwnProperty(k)) return false;
+			}
+		}
 	}
+	return true;
+}
 
-	route.path = location.pathname;
-	route.p = location.pathname.slice(1).split("/");
-	route.search = search;
-	route.hash = location.hash;
-	route.id = state.id;
-	route.aux = state.aux;
-	route.depth = stateRoute.depth;
-	route.nav = nav;
-
-	// Forward or back event. Redraw synchronously, because we can!
-	if (event) runQueue();
+function getUrl(target: Route) {
+	const search = new URLSearchParams(target.search).toString();
+	return (search ? `${target.path}?${search}` : target.path) + target.hash;
 }
-handleLocationUpdate();
-window.addEventListener("popstate", handleLocationUpdate);
-
-// These immediate-mode observers will rewrite the data in `route` to its canonical form.
-// We want to to this immediately, so that user-code running immediately after a user-code
-// initiated `set` will see the canonical form (instead of doing a rerender shortly after,
-// or crashing due to non-canonical data).
-function updatePath(): void {
-	let path = route.path;
-	if (path == null && unproxy(route).p) {
-		updateP();
-		return;
-	}
-	path = `${path || "/"}`;
+
+function toCanonRoute(target: Partial<Route>, nav: NavType, depth: number): Route {
+	let path = target.path || (target.p || []).join("/") || "/";
+	path = (""+path).replace(/\/+$/, "");
 	if (!path.startsWith("/")) path = `/${path}`;
-	route.path = path;
-	route.p = path.slice(1).split("/");
+	
+	return {
+		path,
+		hash: target.hash && target.hash !=="#" ? (target.hash.startsWith("#") ? target.hash : "#" + target.hash) : "",
+		p: path.length > 1 ? path.slice(1).replace(/\/+$/, "").split("/") : [],
+		nav,
+		search: typeof target.search === 'object' && target.search ? clone(target.search) : {},
+		state: typeof target.state === 'object' && target.state ? clone(target.state) : {},
+		depth,
+	};
 }
-immediateObserve(updatePath);
 
-function updateP() {
-	const p = route.p;
-	if (p == null && unproxy(route).path) {
-		updatePath();
-		return;
+
+type RouteTarget = string | (string|number)[] | Partial<Omit<Omit<Route,"p">,"search"> & {
+	/** An convenience array containing path segments, mapping to `path`. For instance `[]` (for `"/"`) or `['users', 123, 'feed']` (for `"/users/123/feed"`). Values may be integers but will be converted to strings.*/
+	p: (string|number)[],
+	/** The query string interpreted as search parameters. So `"a=x&b=y"` becomes `{a: "x", b: "y", c: 42}`. Values may be integers but will be converted to strings. */
+	search: Record<string,string|number>,
+}>;
+
+function targetToPartial(target: RouteTarget) {
+	// Convert shortcut values to objects
+	if (typeof target === 'string') {
+		target = {path: target};
+	} else if (target instanceof Array) {
+		target = {p: target};
 	}
-	if (!(p instanceof Array)) {
-		console.error(
-			`aberdeen route: 'p' must be a non-empty array, not ${JSON.stringify(p)}`,
-		);
-		route.p = [""]; // This will cause a recursive call this observer.
-	} else if (p.length === 0) {
-		route.p = [""]; // This will cause a recursive call this observer.
-	} else {
-		route.path = `/${p.join("/")}`;
+	// Convert numbers in p and search to strings
+	if (target.p) {
+		target.p = target.p.map(String);
+	}
+	if (target.search) {
+		for(const key of Object.keys(target.search)) {
+			target.search[key] = String(target.search[key]);
+		}
 	}
+	return target as Partial<Route>;
 }
-immediateObserve(updateP);
 
-immediateObserve(() => {
-	if (!route.search || typeof route.search !== "object") route.search = {};
-});
 
-immediateObserve(() => {
-	if (!route.id || typeof route.id !== "object") route.id = {};
-});
-
-immediateObserve(() => {
-	if (!route.aux || typeof route.aux !== "object") route.aux = {};
-});
-
-immediateObserve(() => {
-	let hash = `${route.hash || ""}`;
-	if (hash && !hash.startsWith("#")) hash = `#${hash}`;
-	route.hash = hash;
-});
+/**
+* Navigate to a new URL by pushing a new history entry.
+* 
+* Note that this happens synchronously, immediately updating `route` and processing any reactive updates based on that.
+* 
+* @param target A subset of the {@link Route} properties to navigate to. If neither `p` nor `path` is given, the current path is used. For other properties, an empty/default value is assumed if not given. For convenience:
+* - You may pass a string instead of an object, which is interpreted as the `path`.
+* - You may pass an array instead of an object, which is interpreted as the `p` array.
+* - If you pass `p`, it may contain numbers, which will be converted to strings.
+* - If you pass `search`, its values may be numbers, which will be converted to strings.
+* 
+* Examples:
+* ```js
+* // Navigate to /users/123
+* route.go("/users/123");
+* 
+* // Navigate to /users/123?tab=feed#top
+* route.go({p: ["users", 123], search: {tab: "feed"}, hash: "top"});
+* ```
+*/
+export function go(target: RouteTarget): void {
+	const stack: string[] = history.state?.stack || [];
 
-function isSamePage(path: string, state: any): boolean {
-	return (
-		location.pathname === path &&
-		JSON.stringify(history.state.id || {}) === JSON.stringify(state.id || {})
-	);
+	prevStack = stack.concat(JSON.stringify(unproxy(current)));
+	
+	const newRoute: Route = toCanonRoute(targetToPartial(target), "go", prevStack.length + 1);
+	copy(current, newRoute);
+	
+	log('go', newRoute);
+	history.pushState({state: newRoute.state, stack: prevStack}, "", getUrl(newRoute));
+	
+	runQueue();
 }
 
-function updateHistory() {
-	// Get and delete mode without triggering anything.
-	let mode = route.mode;
-	const state = {
-		id: clone(route.id),
-		aux: clone(route.aux),
-		route: stateRoute,
-	};
-
-	// Construct the URL.
-	const path = route.path;
+/**
+ * Modify the current route by merging `target` into it (using {@link merge}), pushing a new history entry.
+ * 
+ * This is useful for things like opening modals or side panels, where you want a browser back action to return to the previous state.
+ * 
+ * @param target Same as for {@link go}, but merged into the current route instead deleting all state.
+ */
+export function push(target: RouteTarget): void {
+	let copy = clone(unproxy(current));
+	merge(copy, targetToPartial(target));
+	go(copy);
+}
 
-	// Change browser state, according to `mode`.
-	if (mode === "back") {
-		route.nav = "back";
-		if (!isSamePage(path, state) && (history.state.route?.depth || 0) > 1) {
-			history.back();
+/**
+ * Try to go back in history to the first entry that matches the given target. If none is found, the given state will replace the current page. This is useful for "cancel" or "close" actions that should return to the previous page if possible, but create a new page if not (for instance when arriving at the current page through a direct link).
+ * 
+ * Consider using {@link up} to go up in the path hierarchy.
+ * 
+ * @param target The target route to go back to. May be a subset of {@link Route}, or a string (for `path`), or an array of strings (for `p`).
+ */
+export function back(target: RouteTarget = {}): void {
+	const partial = targetToPartial(target);
+	const stack: string[] = history.state?.stack || [];
+	for(let i = stack.length - 1; i >= 0; i--) {
+		const histRoute: Route = JSON.parse(stack[i]);
+		if (equal(histRoute, partial, true)) {
+			const pages = i - stack.length;
+			log(`back`, pages, histRoute);
+			history.go(pages);
 			return;
 		}
-		mode = "replace";
-		// We'll replace the state async, to give the history.go the time to take affect first.
-		//setTimeout(() => history.replaceState(state, '', url), 0)
 	}
 
-	if (mode) route.mode = undefined;
-	const search = new URLSearchParams(route.search).toString();
-	const url = (search ? `${path}?${search}` : path) + route.hash;
+	const newRoute = toCanonRoute(partial, "back", stack.length + 1);
+	log(`back not found, replacing`, partial);
+	copy(current, newRoute);
+}
 
-	if (mode === "push" || (!mode && !isSamePage(path, state))) {
-		stateRoute.depth++; // stateRoute === state.route
-		history.pushState(state, "", url);
-		route.nav = "push";
-		route.depth = stateRoute.depth;
-	} else {
-		// Default to `push` when the URL changed or top-level state keys changed.
-		history.replaceState(state, "", url);
+/**
+* Navigate up in the path hierarchy, by going back to the first history entry
+* that has a shorter path than the current one. If there's none, we just shorten
+* the current path.
+* 
+* Note that going back in browser history happens asynchronously, so `route` will not be updated immediately.
+*/
+export function up(stripCount: number = 1): void {
+	const currentP = unproxy(current).p;
+	const stack: string[] = history.state?.stack || [];
+	for(let i = stack.length - 1; i >= 0; i--) {
+		const histRoute: Route = JSON.parse(stack[i]);
+		if (histRoute.p.length < currentP.length && equal(histRoute.p, currentP.slice(0, histRoute.p.length), false)) {
+			// This route is shorter and matches the start of the current path
+			log(`up to ${i+1} / ${stack.length}`, histRoute);
+			history.go(i - stack.length);
+			return;
+		}
 	}
+	// Replace current route with /
+	const newRoute = toCanonRoute({p: currentP.slice(0, currentP.length - stripCount)}, "back", stack.length + 1);
+	log(`up not found, replacing`, newRoute);
+	copy(current, newRoute);
 }
 
-// This deferred-mode observer will update the URL and history based on `route` changes.
-observe(updateHistory);
-
 /**
- * Restore and store the vertical and horizontal scroll position for
- * the parent element to the page state.
- *
- * @param {string} name - A unique (within this page) name for this
- * scrollable element. Defaults to 'main'.
- *
- * The scroll position will be persisted in `route.aux.scroll.<name>`.
- */
+* Restore and store the vertical and horizontal scroll position for
+* the parent element to the page state.
+*
+* @param {string} name - A unique (within this page) name for this
+* scrollable element. Defaults to 'main'.
+*
+* The scroll position will be persisted in `route.aux.scroll.<name>`.
+*/
 export function persistScroll(name = "main") {
 	const el = getParentElement();
 	el.addEventListener("scroll", onScroll);
 	clean(() => el.removeEventListener("scroll", onScroll));
-
-	const restore = unproxy(route).aux.scroll?.name;
+	
+	const restore = unproxy(current).state.scroll?.[name];
 	if (restore) {
+		log("restoring scroll", name, restore);
 		Object.assign(el, restore);
 	}
-
+	
 	function onScroll() {
-		route.mode = "replace";
-		if (!route.aux.scroll) route.aux.scroll = {};
-		route.aux.scroll[name] = {
+		(current.state.scroll ||= {})[name] = {
 			scrollTop: el.scrollTop,
 			scrollLeft: el.scrollLeft,
 		};
 	}
 }
+
+let prevStack: string[];
+
+/**
+* The global {@link Route} object reflecting the current URL and browser history state. Changes you make to this affect the current browser history item (modifying the URL if needed).
+*/
+export const current: Route = proxy({}) as Route;
+
+/**
+ * Reset the router to its initial state, based on the current browser state. Intended for testing purposes only.
+ * @internal
+ * */
+export function reset() {
+	prevStack = history.state?.stack || [];
+	const initRoute = getRouteFromBrowser();
+	log('initial', initRoute);
+	copy(unproxy(current), initRoute);
+}
+reset();
+
+// Handle browser history back and forward
+window.addEventListener("popstate", function(event: PopStateEvent) {
+	const newRoute = getRouteFromBrowser();
+	
+	// If the stack length changes, and at least the top-most shared entry is the same,
+	// we'll interpret this as a "back" or "forward" navigation.
+	const stack: string[] = history.state?.stack || [];
+	if (stack.length !== prevStack.length) {
+		const maxIndex = Math.min(prevStack.length, stack.length) - 1;
+		if (maxIndex < 0 || stack[maxIndex] === prevStack[maxIndex]) {
+			newRoute.nav = stack.length < prevStack.length ? "back" : "forward";
+		}
+	}
+	// else nav will be "load"
+	
+	prevStack = stack;
+	log('popstate', newRoute);
+	copy(current, newRoute);
+	
+	runQueue();
+});
+
+// Make sure these observers are never cleaned up, not even by `unmountAll`.
+leakScope(() => {
+	// Sync `p` to `path`. We need to do this in a separate, higher-priority observer,
+	// so that setting `route.p` will not be immediately overruled by the pre-existing `route.path`.
+	$(() => {
+		current.path = "/" + Array.from(current.p).join("/");
+	});
+
+	// Do a replaceState based on changes to proxy
+	$(() => {
+
+		// First normalize `route`
+		const stack = history.state?.stack || [];
+		const newRoute = toCanonRoute(current, unproxy(current).nav, stack.length + 1);
+		copy(current, newRoute);
+		
+		// Then replace the current browser state if something actually changed
+		const state = {state: newRoute.state, stack};
+		const url = getUrl(newRoute);
+		if (url !== location.pathname + location.search + location.hash || !equal(history.state, state, false)) {
+			log('replaceState', newRoute, state, url);
+			history.replaceState(state, "", url);
+		}
+	});
+});