fix(router): navigate when browser triggers the popstate event

hybridsjs · Apr 5, 2024 · eaa1bc6 · eaa1bc6
1 parent 2812967
commit eaa1bc6
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 4 deletions.
diff --git a/src/router.js b/src/router.js
@@ -903,6 +903,30 @@ function connectRootRouter(host, invalidate, options) {
     }
   }
 
+  function handlePopstate() {
+    // URL have changed externally, eg. chrome.tabs.update API
+    if (!globalThis.history.state) {
+      const url = new URL(globalThis.location.href);
+      const entry = getEntryFromURL(url);
+
+      if (entry) {
+        globalThis.removeEventListener("popstate", handlePopstate);
+        globalThis.addEventListener(
+          "popstate",
+          () => {
+            globalThis.addEventListener("popstate", handlePopstate);
+            navigate(entry);
+          },
+          { once: true },
+        );
+
+        globalThis.history.back();
+      }
+    } else {
+      flush();
+    }
+  }
+
   function navigateBack(offset, entry, nextUrl) {
     const state = globalThis.history.state;
     const targetEntry = globalThis.history.state[offset];
@@ -916,7 +940,7 @@ function connectRootRouter(host, invalidate, options) {
     const replace = (popStateEvent) => {
       if (popStateEvent) {
         globalThis.removeEventListener("popstate", replace);
-        globalThis.addEventListener("popstate", flush);
+        globalThis.addEventListener("popstate", handlePopstate);
       }
 
       const method = pushOffset ? "pushState" : "replaceState";
@@ -928,7 +952,7 @@ function connectRootRouter(host, invalidate, options) {
     };
 
     if (offset) {
-      globalThis.removeEventListener("popstate", flush);
+      globalThis.removeEventListener("popstate", handlePopstate);
       globalThis.addEventListener("popstate", replace);
 
       globalThis.history.go(-offset);
@@ -1029,14 +1053,14 @@ function connectRootRouter(host, invalidate, options) {
     }
   }
 
-  globalThis.addEventListener("popstate", flush);
+  globalThis.addEventListener("popstate", handlePopstate);
 
   host.addEventListener("click", handleNavigate);
   host.addEventListener("submit", handleNavigate);
   host.addEventListener("navigate", executeNavigate);
 
   return () => {
-    globalThis.removeEventListener("popstate", flush);
+    globalThis.removeEventListener("popstate", handlePopstate);
 
     host.removeEventListener("click", handleNavigate);
     host.removeEventListener("submit", handleNavigate);

diff --git a/test/spec/router.js b/test/spec/router.js
@@ -644,6 +644,59 @@ describe("router:", () => {
           ).toBe("");
         }));
 
+      it("navigates when browser pops a new url within the router", () =>
+        resolveTimeout(() => {
+          expect(hybrids(host.views[0])).toBe(RootView);
+
+          window.history.pushState(
+            null,
+            "",
+            window.location.pathname + "#@test-router-child-view",
+          );
+          window.history.pushState(
+            null,
+            "",
+            window.location.pathname + "#@test-router-child-view",
+          );
+
+          return resolveTimeout(() => {
+            history.back();
+
+            return resolveTimeout(() => {
+              expect(hybrids(host.views[0])).toBe(ChildView);
+              history.back();
+              return resolveTimeout(() => {
+                expect(hybrids(host.views[0])).toBe(RootView);
+              });
+            });
+          });
+        }));
+
+      it("navigates when browser pops a new url outside the router", () =>
+        resolveTimeout(() => {
+          expect(hybrids(host.views[0])).toBe(RootView);
+
+          window.history.pushState(
+            null,
+            "",
+            window.location.pathname + "#nope",
+          );
+
+          window.history.pushState(
+            null,
+            "",
+            window.location.pathname + "#nope",
+          );
+
+          history.back();
+
+          return resolveTimeout(() => {
+            expect(hybrids(host.views[0])).toBe(RootView);
+            history.back();
+            return resolveTimeout(() => {});
+          });
+        }));
+
       it("saves and restores scroll position preserving focused element", () => {
         const input = host.querySelector("#input");
         const root = document.scrollingElement;