Migrate browser URL state to the Navigation API (#168)

Replace the History API with the newer Navigation API. This is mostly a
modernization, but as a side-effect this also fixes a duplicated history
entry when opening a query plan.

Author: vogelsgesang

standalone-app/src/browserUrlHooks.ts

@@ -1,37 +1,69 @@
 // `prettier` does not yet support `import type`
 
 import type React from "react";
-import {useCallback, useEffect, useState} from "react";
+import {useCallback, useEffect, useMemo, useRef, useSyncExternalStore} from "react";
 
 type URLState = [URL, (value: React.SetStateAction<URL>, noHistoryEntry?: boolean) => void];
 
+interface PendingUrlUpdate {
+    url: URL;
+    shouldPush: boolean;
+}
+
+// `info` is not persisted in history; it only identifies the navigate event
+// synchronously generated by this hook.
+const browserUrlNavigationInfo = {};
+
+function getBrowserUrl(): string {
+    return window.navigation.currentEntry?.url ?? window.location.href;
+}
+
+function subscribeToBrowserUrl(onStoreChange: () => void): () => void {
+    window.navigation.addEventListener("currententrychange", onStoreChange);
+    return () => window.navigation.removeEventListener("currententrychange", onStoreChange);
+}
+
 export function useBrowserUrl(): URLState {
-    const [url, setUrlInternal] = useState<URL>(() => new URL(window.location.toString()));
+    const href = useSyncExternalStore(subscribeToBrowserUrl, getBrowserUrl);
+    const url = useMemo(() => new URL(href), [href]);
+    const pendingUrlUpdate = useRef<PendingUrlUpdate | undefined>(undefined);
+
     useEffect(() => {
-        const listener = (_e: PopStateEvent) => {
-            setUrlInternal(new URL(window.location.toString()));
+        const listener = (event: NavigateEvent) => {
+            if (event.canIntercept && event.info === browserUrlNavigationInfo) {
+                // These navigations only update URL-backed state. Preserve the user's
+                // current focus and scroll position while making them same-document.
+                event.intercept({
+                    focusReset: "manual",
+                    scroll: "manual",
+                });
+            }
         };
-        window.addEventListener("popstate", listener);
-        return () => window.removeEventListener("popstate", listener);
-    }, [setUrlInternal]);
-    const setUrl = useCallback(
-        (action: React.SetStateAction<URL>, noHistoryEntry?: boolean) => {
-            let newUrl: URL;
-            if (action instanceof Function) newUrl = action(url);
-            else newUrl = action;
-            setUrlInternal(newUrl);
-            // Don't change the URL if the parameter didn't change.
-            // This is important to ensure the history stays intact.
-            if (newUrl.toString() != new URL(window.location.toString()).toString()) {
-                if (noHistoryEntry) {
-                    window.history.replaceState(null, "", newUrl);
-                } else {
-                    window.history.pushState(null, "", newUrl);
+        window.navigation.addEventListener("navigate", listener);
+        return () => window.navigation.removeEventListener("navigate", listener);
+    }, []);
+    const setUrl = useCallback((action: React.SetStateAction<URL>, noHistoryEntry?: boolean) => {
+        let pending = pendingUrlUpdate.current;
+        if (!pending) {
+            pending = {
+                url: new URL(getBrowserUrl()),
+                shouldPush: false,
+            };
+            pendingUrlUpdate.current = pending;
+            queueMicrotask(() => {
+                const update = pendingUrlUpdate.current;
+                pendingUrlUpdate.current = undefined;
+                if (update && update.url.href !== getBrowserUrl()) {
+                    window.navigation.navigate(update.url.toString(), {
+                        history: update.shouldPush ? "push" : "replace",
+                        info: browserUrlNavigationInfo,
+                    });
                 }
-            }
-        },
-        [url, setUrlInternal],
-    );
+            });
+        }
+        pending.url = typeof action === "function" ? action(pending.url) : action;
+        pending.shouldPush ||= !noHistoryEntry;
+    }, []);
     return [url, setUrl];
 }