Does not trigger HTML insertion on SPA-like navigation

[jcbhmr]

GitHub uses an SPA-like navigation system which does magic ✨ to avoid triggering a full page reload. This means that the HTML injection that is done once doesn't happen again when a non-navigation-but-still-sorta-navigation event occurs when the user changes "tabs" in the repo.

Video of what I am talking about:
https://user-images.githubusercontent.com/61068799/177011417-7976339c-1971-46e6-b4f3-b3246bfbd4fb.mp4

Listening for some kind of URL/history/navigation-related event and re-triggering the init() call might fix it? I don't really know.

Maybe relevant links:

• Chrome navigation API
• Can I use: navigation API
• History popstate
• History pushstate hack (quote: "It also doesn't work in Google Chrome extension content scripts, because it's not allowed to alter the site's JS environment. You can work around that by inserting a <script> with said code, but that's even more overkill.")

There looks to be like 4 more StackOverflow questions basically asking the same thing and all getting basic: "you monkeypatch the history.pushState() method" answers:

• https://stackoverflow.com/a/10419974
• https://stackoverflow.com/a/4585031
• https://stackoverflow.com/a/37492075
• https://stackoverflow.com/a/56760883

[jcbhmr]

Possible solution? Haven't tested it.

diff --git a/src/js/main.js b/src/js/main.js
index c62ef70..4f44dd0 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -245,3 +245,13 @@ function fixCommitsPageStyle (menuElement) {
 
 window.onload = init;
 init();
+
+// Caniuse: https://caniuse.com/mdn-api_navigation
+// Chrome dev article: https://developer.chrome.com/docs/web-platform/navigation-api/#try-the-navigation-api:~:text=navigation.addEventListener(%27navigatesuccess%27%2C%20event%20%3D%3E%20%7B%0A%20%20loadingIndicator.hidden%20%3D%20true%3B%0A%7D)%3B
+try {
+  navigation.addEventListener('navigatesuccess', event => {
+    init()
+  });
+} catch {
+  // IDK what to do for a fallback
+}

[zvizvi]

Hi @jcbhmr.
Thank you for opening this issue.
What I did specifically on the GitHub site is listen to the custom event pjax:end which is triggered when the page route changes.
This is a good solution only for the GitHub site, as it uses the 'jquery-pjax' library.

GitHub-Web-IDE/src/js/main.js

Line 162 in 861b31e

document.addEventListener('pjax:end', () => {

[zvizvi]

Update:
They seem to have stopped using 'jquery-pjax' recently, so this solution has actually stopped working...
Indeed, other solutions need to be sought 🤔

[jcbhmr]

EDIT: Even though it looked like a Chrome-only extension at first glance from the description/link at the top, I double-checked and now see that it has a Firefox counterpart. This means this solution WON'T work.

I assume this is a Chrome-only extension? If so, how far back do you want to support? If its Chrome 102+, then the onnavigatesuccess is a perfect drop-in substitute for that already existing listener! (I think)

If not, IDK what to do...

Thoughts?

Can I use link: https://caniuse.com/mdn-api_navigation

[jcbhmr]

Another thing you could use as an indicator is a MutationObserver tied to the progress bar that GitHub uses to signal SPA loading... IDK if that is a good idea though.

It might not even be that big of a performance hit since you can trim down what the browser watches for to be only direct children: new MutationObserver(f).observe(document.documentElement, { childList: true, subtree: false })

[jcbhmr]

I went digging for GitHub-specific events that they use. Turns out there is a collection of soft-nav:* events that seem very similar to the pjax:* events that used to be used.

I added a listener to the soft-nav:success event, and it seems to be fired at the same time the navigatesuccess event would usually be triggered. Maybe this is a drop-in replacement for the old code, just with a new event name?

[zvizvi]

Fixed now in v2.0.3, using the soft-nav:success event listener.
Thank you @jcbhmr!