[Fix][WIP] Handle new spa events

package.json

@@ -1,6 +1,6 @@
 {
   "name": "a-tree",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "description": "A-Tree - Github review helper (Code browsing & Pull requests reviewing)",
   "homepage": "https://github.com/shinenic/a-tree",
   "repository": "https://github.com/shinenic/a-tree",
@@ -18,6 +18,7 @@
     "dayjs": "^1.10.7",
     "github-reserved-names": "^2.0.4",
     "jquery": "^3.6.0",
+    "jss": "^10.9.0",
     "lodash": "4.17.16",
     "match-sorter": "^6.3.0",
     "parse-link-header": "^1.0.1",
@@ -91,9 +92,9 @@
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "file-icons-js": "websemantics/file-icons-js",
     "html-webpack-plugin": "^5.3.2",
-    "jquery-pjax": "^2.0.1",
     "jest": "^27.4.3",
     "jest-puppeteer": "^6.0.2",
+    "jquery-pjax": "^2.0.1",
     "lodash-webpack-plugin": "^0.11.6",
     "prettier-eslint": "^13.0.0",
     "puppeteer": "^13.0.0",

src/hooks/pageInfo/useListenLocation.js

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import { isLocalMode } from 'constants/base'
-import { listenPjaxEvent } from 'utils/pjax'
+import { listenTurboEvent } from 'utils/pjax'
 
 const listenLocation = (callback) => {
   let currentLocation = { ...(window?.location ?? {}) }
@@ -14,7 +14,7 @@ const listenLocation = (callback) => {
     }
   }
 
-  return listenPjaxEvent('start', handleCallback)
+  return listenTurboEvent(handleCallback)
 }
 
 const useListenLocation = () => {

src/index.js

@@ -5,6 +5,28 @@ import listenContextMenu from 'utils/contextMenuListener'
 import { getPageInfo } from 'utils/github'
 import { getSettingFromLocalStorage } from 'utils/setting'
 
+import { create } from 'jss'
+import { StylesProvider, jssPreset } from '@material-ui/core/styles'
+
+function listenBodyRefresh(callback) {
+  const observer = new MutationObserver((mutations) => {
+    // eslint-disable-next-line no-restricted-syntax
+    for (const { addedNodes, removedNodes } of mutations) {
+      const [addedBody, removedBody] = [addedNodes, removedNodes].map(findBodyElement)
+      if (addedBody && removedBody) {
+        callback()
+      }
+    }
+
+    function findBodyElement(addedNodes) {
+      return Array.from(addedNodes).find((addedNode) => addedNode instanceof HTMLBodyElement)
+    }
+  })
+  observer.observe(document.documentElement, {
+    childList: true
+  })
+}
+
 const checkDomainMatched = (domains) => {
   const { host } = window.location
 
@@ -26,8 +48,10 @@ const appendGlobalStyle = (drawerPinned, drawerWidth) => {
 const createContainer = () => {
   const container = document.createElement('div')
   container.setAttribute('id', CONTAINER_ID)
+  container.setAttribute('data-turbo-permanent', '')
   container.setAttribute('timestamp', new Date().getTime())
   document.body.appendChild(container)
+  return container
 }
 
 const renderExtension = () => {
@@ -53,14 +77,26 @@ const renderExtension = () => {
     // eslint-disable-next-line global-require
     const Main = require('./Main').default
 
-    createContainer()
+    function initialATree() {
+      const container = createContainer()
+
+      ReactDOM.render(
+        <React.StrictMode>
+          <StylesProvider
+            jss={create({
+              ...jssPreset(),
+              insertionPoint: document.getElementById(CONTAINER_ID)
+            })}
+          >
+            <Main />
+          </StylesProvider>
+        </React.StrictMode>,
+        container
+      )
+    }
 
-    ReactDOM.render(
-      <React.StrictMode>
-        <Main />
-      </React.StrictMode>,
-      document.getElementById(CONTAINER_ID)
-    )
+    listenBodyRefresh(initialATree)
+    initialATree()
   }
 
   window.onload = onLoad

src/utils/pjax.js

@@ -2,10 +2,7 @@ import jQuery from 'jquery'
 import 'libs/jqueryPjax'
 import { GITHUB_PAGE_CONTAINER_ID } from 'constants/github'
 
-export const GH_PJAX_CONTAINERS = [
-  `#${GITHUB_PAGE_CONTAINER_ID}`,
-  '[data-pjax-container]',
-]
+export const GH_PJAX_CONTAINERS = [`#${GITHUB_PAGE_CONTAINER_ID}`, '[data-pjax-container]']
 
 export const getContainer = () => {
   return GH_PJAX_CONTAINERS.find((selector) => document.querySelector(selector))
@@ -20,7 +17,7 @@ export const loadPjaxPage = (fullUrl = '') => {
   jQuery.pjax({
     url: fullUrl,
     container: getContainer(),
-    timeout: 0,
+    timeout: 0
   })
 }
 
@@ -31,3 +28,11 @@ export const listenPjaxEvent = (event = '', callback = () => {}) => {
     jQuery(window).off(`pjax:${event}`, callback)
   }
 }
+
+export const listenTurboEvent = (callback = () => {}) => {
+  window.addEventListener('turbo:load', callback)
+
+  return () => {
+    window.removeEventListener('turbo:load', callback)
+  }
+}

src/utils/pullPage.js

@@ -101,7 +101,7 @@ export const resetFocusFiles = () => {
 
 export const scrollToFile = (fileHashId) => {
   scrollTo(document.getElementById(fileHashId), {
-    offsetY: GITHUB_NAV_BAR_HEIGHT,
+    offsetY: GITHUB_NAV_BAR_HEIGHT
   })
 }
 
@@ -115,14 +115,10 @@ export const generateReviewCheckListener = (callback = noop) => {
     // eslint-disable-next-line no-restricted-syntax
     for (const node of e.path) {
       if (/^diff-/.test(node.id)) {
-        const link = node.querySelector(
-          'a[href^="#diff"]:not([title*="Expand"])'
-        )
+        const link = node.querySelector('a[href^="#diff"]:not([title*="Expand"])')
 
         if (link) {
-          const filename = link.title.includes(' → ')
-            ? link.title.split(' → ')[1]
-            : link.title
+          const filename = link.title.includes(' → ') ? link.title.split(' → ')[1] : link.title
 
           callback(filename, e.target.checked)
         }
@@ -158,7 +154,7 @@ export const checkFileNodeExisting = (fileHashId, timeout = DEFAULT_TIMEOUT) =>
     observer.observe(document.querySelector('body'), {
       childList: true,
       subtree: true,
-      attributes: true,
+      attributes: true
     })
 
     setTimeout(() => {
@@ -167,6 +163,14 @@ export const checkFileNodeExisting = (fileHashId, timeout = DEFAULT_TIMEOUT) =>
     }, timeout)
   })
 
+const listenTurboLoad = (cb) => {
+  window.addEventListener('turbo:load', cb)
+
+  return () => {
+    window.removeEventListener('turbo:load', cb)
+  }
+}
+
 export const checkPjaxEnd = (timeout = DEFAULT_TIMEOUT) =>
   new Promise((resolve, reject) => {
     let unlisten = null
@@ -176,7 +180,7 @@ export const checkPjaxEnd = (timeout = DEFAULT_TIMEOUT) =>
       resolve()
     }
 
-    unlisten = listenPjaxEvent('end', handler)
+    unlisten = listenTurboLoad(handler)
 
     setTimeout(() => {
       unlisten()
@@ -215,15 +219,10 @@ export const markAllFiles = async (isMarkAllViewed = true, chunkSize = 3) => {
   })
 }
 
-export const toggleViewedFilesFolding = async (
-  shouldCollapse = true,
-  chunkSize = 3
-) => {
+export const toggleViewedFilesFolding = async (shouldCollapse = true, chunkSize = 3) => {
   return new Promise((resolve) => {
     const fileNodeChunks = chunk(
-      getFileNodes().filter(
-        (node) => node.querySelector('.js-reviewed-checkbox').checked
-      ),
+      getFileNodes().filter((node) => node.querySelector('.js-reviewed-checkbox').checked),
       chunkSize
     )
 
@@ -266,14 +265,10 @@ export const getCurrentStickyFileNode = (callback) => {
 
     const lastStuckNode = stuckNodes[stuckNodes.length - 1]
 
-    const link = lastStuckNode.querySelector(
-      'a[href^="#diff"]:not([title*="Expand"])'
-    )
+    const link = lastStuckNode.querySelector('a[href^="#diff"]:not([title*="Expand"])')
 
     if (link) {
-      const filename = link.title.includes(' → ')
-        ? link.title.split(' → ')[1]
-        : link.title
+      const filename = link.title.includes(' → ') ? link.title.split(' → ')[1] : link.title
 
       callback(filename)
     }

yarn.lock

@@ -5643,6 +5643,16 @@ [email protected], jss@^10.5.1:
     is-in-browser "^1.1.3"
     tiny-warning "^1.0.2"
 
+jss@^10.9.0:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/jss/-/jss-10.9.0.tgz#7583ee2cdc904a83c872ba695d1baab4b59c141b"
+  integrity sha512-YpzpreB6kUunQBbrlArlsMpXYyndt9JATbt95tajx0t4MTJJcCJdd4hdNpHmOIDiUJrF/oX5wtVFrS3uofWfGw==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    csstype "^3.0.2"
+    is-in-browser "^1.1.3"
+    tiny-warning "^1.0.2"
+
 "jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.1.0:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.2.1.tgz#720b97bfe7d901b927d87c3773637ae8ea48781b"