From 814c27486894a55b9dd70559177d059cc22985a7 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Thu, 4 Jan 2024 10:19:54 +0100
Subject: [PATCH] feat(core polyfills): Add polyfill for navigation API.

This polyfill adds support for the "navigate" event on the navigation
object. We path "history.pushState" and "history.replaceState" to send
the "navigate" event on the "window.navigation" object when the URL
changes.

This polyfill is for current Firefox and Safari. Chrome based browsers
already support this.

More information on:
https://developer.mozilla.org/en-US/docs/Web/API/Navigation/navigate_event
---
 src/core/polyfills.js | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/src/core/polyfills.js b/src/core/polyfills.js
index f1de8a1fa..6f616f8ed 100644
--- a/src/core/polyfills.js
+++ b/src/core/polyfills.js
@@ -33,3 +33,30 @@
         true
     );
 })();
+
+// Navigation polyfill for Firefox and Safari, as of 2024-01-04
+// NOTE: this is a very basic polyfill, it only supports firing a `navigate`
+// event on location change and even that without interception support, etc.
+!(function () {
+    if (window.navigation == undefined) {
+        // Create a navigation object on the window
+        // We create a DOM element for the navigation object so that we can
+        // attach events on it.
+        window.navigation = document.createElement("div");
+
+        // Patch pushState to trigger an `navigate` event on the navigation
+        // object when the URL changes.
+        const pushState = window.history.pushState;
+        window.history.pushState = function () {
+            pushState.apply(window.history, arguments);
+            window.navigation.dispatchEvent(new Event("navigate"));
+        };
+
+        // Same with replaceState
+        const replaceState = window.history.replaceState;
+        window.history.replaceState = function () {
+            replaceState.apply(window.history, arguments);
+            window.navigation.dispatchEvent(new Event("navigate"));
+        };
+    }
+})();