chore: add client side navigation in fixture

Author: hi-ogawa

fixtures/flight-vite/src/entry.browser.tsx

@@ -33,13 +33,26 @@ async function main() {
     rscOptions,
   );
 
+  async function onNavigation() {
+    const url = new URL(window.location.href);
+    const payload = await ReactClient.createFromFetch<RscPayload>(
+      fetch(url),
+      rscOptions,
+    );
+    setPayload(payload);
+  }
+
   function BrowserRoot() {
     const [payload, setPayload_] = React.useState(initialPayload);
 
     React.useEffect(() => {
       setPayload = v => React.startTransition(() => setPayload_(v));
     }, [setPayload_]);
 
+    React.useEffect(() => {
+      return listenNavigation(() => onNavigation());
+    }, []);
+
     return payload.root;
   }
 
@@ -64,4 +77,51 @@ async function main() {
   }
 }
 
+function listenNavigation(onNavigation: () => void) {
+  window.addEventListener('popstate', onNavigation);
+
+  const oldPushState = window.history.pushState;
+  window.history.pushState = function (...args) {
+    const res = oldPushState.apply(this, args);
+    onNavigation();
+    return res;
+  };
+
+  const oldReplaceState = window.history.replaceState;
+  window.history.replaceState = function (...args) {
+    const res = oldReplaceState.apply(this, args);
+    onNavigation();
+    return res;
+  };
+
+  function onClick(e: MouseEvent) {
+    let link = (e.target as Element).closest('a');
+    if (
+      link &&
+      link instanceof HTMLAnchorElement &&
+      link.href &&
+      (!link.target || link.target === '_self') &&
+      link.origin === location.origin &&
+      !link.hasAttribute('download') &&
+      e.button === 0 && // left clicks only
+      !e.metaKey && // open in new tab (mac)
+      !e.ctrlKey && // open in new tab (windows)
+      !e.altKey && // download
+      !e.shiftKey &&
+      !e.defaultPrevented
+    ) {
+      e.preventDefault();
+      history.pushState(null, '', link.href);
+    }
+  }
+  document.addEventListener('click', onClick);
+
+  return () => {
+    document.removeEventListener('click', onClick);
+    window.removeEventListener('popstate', onNavigation);
+    window.history.pushState = oldPushState;
+    window.history.replaceState = oldReplaceState;
+  };
+}
+
 main();