chore: update router implementation

package.json

···
 		"@atcute/tid": "^1.0.2",
 		"@badrap/valita": "^0.4.3",
 		"@mary/array-fns": "npm:@jsr/mary__array-fns@^0.1.4",
-		"@mary/events": "npm:@jsr/mary__events@^0.1.0",
+		"@mary/events": "npm:@jsr/mary__events@^0.2.0",
 		"@mary/solid-freeze": "npm:@externdefs/solid-freeze@^0.1.1",
 		"@mary/tar": "npm:@jsr/mary__tar@^0.2.4",
 		"nanoid": "^5.1.5",

pnpm-lock.yaml

···
         specifier: npm:@jsr/mary__array-fns@^0.1.4
         version: '@jsr/mary__array-fns@0.1.4'
       '@mary/events':
-        specifier: npm:@jsr/mary__events@^0.1.0
-        version: '@jsr/mary__events@0.1.0'
+        specifier: npm:@jsr/mary__events@^0.2.0
+        version: '@jsr/mary__events@0.2.0'
       '@mary/solid-freeze':
         specifier: npm:@externdefs/solid-freeze@^0.1.1
         version: '@externdefs/solid-freeze@0.1.1(solid-js@1.9.5)'
···
   '@jsr/mary__array-fns@0.1.4':
     resolution: {integrity: sha512-+HbGYR9Ll5blEmAvVAoPejyGj01YeBbVmJ59qxaMDKt5i3F90ohYLA5a78y6AULDlet1IxYB+a/cMN+A0vGnDg==, tarball: https://npm.jsr.io/~/11/@jsr/mary__array-fns/0.1.4.tgz}
 
-  '@jsr/mary__events@0.1.0':
-    resolution: {integrity: sha512-oS6jVOaXTaNEa6avRncwrEtUYaBKrq/HEybPa9Z3aoeMs+RSly0vn0KcOj/fy2H6iTBkeh3wa8+/9nFjhKyKIg==, tarball: https://npm.jsr.io/~/11/@jsr/mary__events/0.1.0.tgz}
+  '@jsr/mary__events@0.2.0':
+    resolution: {integrity: sha512-WcBRbtuTno3zcfXKd7SEeKr1lAJF+CQ8BCv+PEEMmNKNqFurkEksGxRB3UDPZxIxjJ7sAqMVTL26wRuMpAcIeA==, tarball: https://npm.jsr.io/~/11/@jsr/mary__events/0.2.0.tgz}
 
   '@jsr/mary__tar@0.2.4':
     resolution: {integrity: sha512-jFjPcZj8DRSukPLZOt6+h74cVFdfdTMG9gzbW67YByCJTD52PEpe2sNcfCSw4mQ8hZBNgwiufCPyYL8hR9yicA==, tarball: https://npm.jsr.io/~/11/@jsr/mary__tar/0.2.4.tgz}
···
 
   '@jsr/mary__array-fns@0.1.4': {}
 
-  '@jsr/mary__events@0.1.0': {}
+  '@jsr/mary__events@0.2.0': {}
 
   '@jsr/mary__tar@0.2.4': {}
 

src/lib/navigation/history.ts

···
 // Commit: 3e9dab413f4eda8d6bce565388c5ddb7aeff9f7e
 // Most of the changes are just trimming it down to only include the browser
 // history implementation.
+import { nanoid } from 'nanoid/non-secure';
+
+import { EventEmitter } from '@mary/events';
 
 export type Action = 'traverse' | 'push' | 'replace' | 'update';
 
···
 	let blockedPopTx: Transition | null = null;
 	const handlePop = () => {
 		if (blockedPopTx) {
-			blockers.call(blockedPopTx);
+			emitter.emit('block', blockedPopTx);
 			blockedPopTx = null;
 		} else {
 			const nextAction: Action = 'traverse';
 			const nextLocation = getCurrentLocation();
 			const nextIndex = nextLocation.index;
 
-			if (blockers.length) {
+			if (emitter.has('block')) {
 				if (nextIndex != null) {
 					const delta = location.index - nextIndex;
 					if (delta) {
···
 		}
 	};
 
-	const listeners = createEvents<Listener>();
-	const blockers = createEvents<Blocker>();
+	const emitter = new EventEmitter<{
+		update: [evt: Update];
+		block: [tx: Transition];
+	}>();
 
 	let location = getCurrentLocation();
 
···
 	};
 
 	const allowTx = (action: Action, location: Location, retry: () => void): boolean => {
-		return !blockers.length || (blockers.call({ action, location, retry }), false);
+		return !emitter.emit('block', { action, location, retry });
 	};
 
 	const applyTx = (nextAction: Action): void => {
 		location = getCurrentLocation();
-		listeners.call({ action: nextAction, location });
+		emitter.emit('update', { action: nextAction, location });
 	};
 
 	const navigate = (to: To, { replace, state }: NavigateOptions = {}): void => {
···
 			return go(1);
 		},
 		listen: (listener) => {
-			return listeners.push(listener);
+			return emitter.on('update', listener);
 		},
 		block: (blocker) => {
-			const unblock = blockers.push(blocker);
-
-			if (blockers.length === 1) {
+			if (!emitter.has('block')) {
 				window.addEventListener(BeforeUnloadEventType, promptBeforeUnload);
 			}
 
+			const unblock = emitter.on('block', blocker);
+
 			return () => {
 				unblock();
 
 				// Remove the beforeunload listener so the document may
 				// still be salvageable in the pagehide event.
 				// See https://html.spec.whatwg.org/#unloading-documents
-				if (!blockers.length) {
+				if (!emitter.has('block')) {
 					window.removeEventListener(BeforeUnloadEventType, promptBeforeUnload);
 				}
 			};
···
 	event.preventDefault();
 };
 
-interface Events<F extends (arg: any) => void> {
-	length: number;
-	push: (fn: F) => () => void;
-	call: (arg: Parameters<F>[0]) => void;
-}
-
-const createEvents = <F extends (arg: any) => void>(): Events<F> => {
-	const handlers: F[] = [];
-
-	return {
-		get length() {
-			return handlers.length;
-		},
-		push(fn: F) {
-			handlers.push(fn);
-
-			return () => {
-				const index = handlers.indexOf(fn);
-
-				if (index !== -1) {
-					handlers.splice(index, 1);
-				}
-			};
-		},
-		call(arg) {
-			for (let idx = 0, len = handlers.length; idx < len; idx++) {
-				(0, handlers[idx])(arg);
-			}
-		},
-	};
-};
-
 const createKey = () => {
-	return crypto.randomUUID();
+	return nanoid();
 };
 
 /**

src/lib/navigation/router.tsx

···
 /* @refresh reload */
 import {
+	type Accessor,
 	type Component,
 	For,
 	type JSX,
···
 	createSignal,
 	getOwner,
 	onCleanup,
+	untrack,
 	useContext,
 } from 'solid-js';
 import { delegateEvents } from 'solid-js/web';
···
 
 export interface MatchedRouteState extends MatchedRoute {
 	readonly id: string;
+	scrollPos: { x: number; y: number } | undefined;
 }
 
 interface RouterState {
···
 interface ViewContextObject {
 	owner: Owner | null;
 	route: MatchedRouteState;
+	isActive: () => boolean;
 }
 
 let _entry: Location;
···
 	enter: boolean;
 }
 
-const routerEvents = new EventEmitter<{ [key: string]: (event: RouteEvent) => void }>();
+const routerEvents = new EventEmitter<{ [key: string]: [event: RouteEvent] }>();
 
 export { routerEvents as UNSAFE_routerEvents };
 
···
 			const nextKey = matched.id || _entry.key;
 
 			const isSingle = !!matched.id;
-			const matchedState: MatchedRouteState = { ...matched, id: nextKey };
+			const matchedState: MatchedRouteState = {
+				...matched,
+				id: nextKey,
+				scrollPos: undefined,
+			};
 
 			const next: Record<string, MatchedRouteState> = { [nextKey]: matchedState };
 
···
 	}
 
 	_cleanup = createRoot((cleanup) => {
-		createEventListener;
-
 		onCleanup(
 			history.listen(({ action, location: nextEntry }) => {
 				const currentEntry = _entry;
···
 
 				if (action !== 'update') {
 					const pathname = nextEntry.pathname;
-					let matched = matchRoute(pathname);
+					const matched = matchRoute(pathname);
 
 					if (!matched) {
 						return;
···
 					let singles = current.singles;
 					let isNew = false;
 
+					const prevId = current.active;
+
 					const nextId = matched.id || nextEntry.key;
-					const matchedState: MatchedRouteState = { ...matched, id: nextId };
+					const matchedState: MatchedRouteState = {
+						...matched,
+						id: nextId,
+						scrollPos: undefined,
+					};
 
 					let nextViews: typeof views | undefined;
 
···
 					}
 
 					if (!matched.id) {
-						// Add this view, if it's already present, set `shouldCall` to true
 						if (!(nextId in views)) {
 							if (nextViews) {
 								nextViews[nextId] = matchedState;
+								isNew = true;
 							} else {
 								nextViews = { ...views, [nextId]: matchedState };
 								isNew = true;
 							}
 						}
 					} else {
-						// Add this view, if it's already present, set `shouldCall` to true
 						if (!(nextId in singles)) {
 							singles = { ...singles, [nextId]: matchedState };
 							isNew = true;
···
 						views = nextViews;
 					}
 
-					routerEvents.emit(current.active, { focus: false, enter: false });
+					{
+						const prev = current.views[prevId] || current.singles[prevId];
+						if (prev) {
+							prev.scrollPos = { x: window.scrollX, y: window.scrollY };
+						}
+					}
+
+					routerEvents.emit(prevId, { focus: false, enter: false });
+
 					setState({ active: nextId, views: views, singles: singles });
 
-					if (!isNew) {
+					if (isNew) {
+						// Scroll to top if we're pushing or replacing, it's a new page.
+						window.scrollTo(0, 0);
+					} else {
+						{
+							const next = views[nextId] || singles[nextId];
+							if (next?.scrollPos) {
+								const pos = next.scrollPos;
+								window.scrollTo(pos.x, pos.y);
+							}
+						}
+
 						routerEvents.emit(nextId, {
 							focus: true,
 							enter: action !== 'traverse' || nextEntry.index > currentEntry.index,
 						});
-					}
-
-					// Scroll to top if we're pushing or replacing, it's a new page.
-					if (!matched.id && (action === 'push' || action === 'replace')) {
-						window.scrollTo({ top: 0, behavior: 'instant' });
 					}
 				}
 			}),
···
 			}
 
 			evt.preventDefault();
-
-			if (location.pathname !== pathname || location.search !== search || location.hash !== hash) {
-				history.navigate({ pathname, search, hash });
-			}
+			history.navigate({ pathname, search, hash });
 		});
 
 		return cleanup;
···
 };
 
 export const onRouteEnter = (cb: () => void) => {
-	const { route } = useViewContext();
+	const { route, isActive } = useViewContext();
 
-	cb();
+	if (untrack(isActive)) {
+		cb();
+	}
+
 	onCleanup(routerEvents.on(route.id, (e) => e.enter && cb()));
+};
+
+export const useIsFocused = (): Accessor<boolean> => {
+	const { isActive } = useViewContext();
+
+	return isActive;
 };
 
 export const createFocusEffect = (cb: () => void) => {
-	const { route } = useViewContext();
-	const [active, setActive] = createSignal(true);
+	const isFocused = useIsFocused();
 
-	onCleanup(routerEvents.on(route.id, (e) => setActive(e.focus)));
 	createEffect(() => {
-		if (active()) {
-			cb();
+		if (isFocused()) {
+			createEffect(cb);
 		}
 	});
 };
···
 	const render = props.render;
 
 	const renderView = (matched: MatchedRouteState) => {
-		const def = matched.def;
 		const id = matched.id;
 
 		const active = createMemo((): boolean => state().active === id);
···
 		const context: ViewContextObject = {
 			owner: getOwner(),
 			route: matched,
+			isActive: active,
 		};
-
-		if (def.single) {
-			let storedHeight: number | undefined;
-
-			onCleanup(
-				routerEvents.on(id, (ev) => {
-					if (!ev.focus) {
-						storedHeight = document.documentElement.scrollTop;
-					} else if (storedHeight !== undefined) {
-						window.scrollTo({ top: storedHeight, behavior: 'instant' });
-					}
-				}),
-			);
-		}
 
 		return (
 			<Freeze freeze={!active()}>