feat: use pjax-api

This commit is contained in:
EnixCoda 2020-04-02 23:44:42 +08:00
parent b2c4ebf373
commit fbe2a026be
No known key found for this signature in database
GPG key ID: FE06F5DFC1C9B8E4
7 changed files with 45 additions and 36 deletions

View file

@ -34,6 +34,7 @@
"ini": "^1.3.5",
"js-base64": "^2.5.1",
"nprogress": "^0.2.0",
"pjax-api": "^3.30.1",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-use": "^13.8.0",

View file

@ -212,7 +212,7 @@ function ListView({
if (targetPath) expandTo(targetPath)
}, [metaData.branchName])
useOnLocationChange(goToCurrentItem)
useEvent('pjax:complete', goToCurrentItem, window)
useEvent('pjax:ready', goToCurrentItem, document)
return (
<List
ref={listRef}

View file

@ -70,7 +70,7 @@ const RawGitako: React.FC<Props & ConnectorState> = function RawGitako(props) {
},
[props.metaData?.branchName, configContext.val.intelligentToggle],
)
useEvent('pjax:complete', updateSideBarVisibility, window)
useEvent('pjax:ready', updateSideBarVisibility, document)
const copyFileButton = configContext.val.copyFileButton
useGitHubAttachCopyFileButton(copyFileButton)

View file

@ -172,7 +172,7 @@ export function useGitHubAttachCopySnippetButton(copySnippetButton: boolean) {
[copySnippetButton],
)
React.useEffect(attachCopySnippetButton, [copySnippetButton])
useEvent('pjax:complete', attachCopySnippetButton, window)
useEvent('pjax:ready', attachCopySnippetButton, document)
}
export function useGitHubAttachCopyFileButton(copyFileButton: boolean) {
@ -184,5 +184,5 @@ export function useGitHubAttachCopyFileButton(copyFileButton: boolean) {
[copyFileButton],
)
React.useEffect(attachCopyFileButton, [copyFileButton])
useEvent('pjax:complete', attachCopyFileButton, window)
useEvent('pjax:ready', attachCopyFileButton, document)
}

View file

@ -173,5 +173,5 @@ export function useGiteeAttachCopySnippetButton(copySnippetButton: boolean) {
[copySnippetButton],
)
React.useEffect(attachCopySnippetButton, [copySnippetButton])
useEvent('pjax:complete', attachCopySnippetButton, window)
useEvent('pjax:ready', attachCopySnippetButton, document)
}

View file

@ -1,40 +1,43 @@
import * as PJAX from 'pjax'
import { Config, Pjax } from 'pjax-api'
import * as React from 'react'
import { useEvent } from 'react-use'
import { useProgressBar } from './useProgressBar'
const config: Config = {
areas: [
// github
'.repository-content',
'[data-pjax="#js-repo-pjax-container"]',
'.page-content',
// gitee
'#git-project-content',
],
update: {
css: false,
},
fetch: {
cache(path) {
return path
},
},
}
export function usePJAX() {
// Note: shall not enable below pjax:send listener as there would be dual bar when GitHub PJAX links are triggered
// window.addEventListener('pjax:send', () => mountTopProgressBar())
const [pjax] = React.useState(
() =>
new PJAX({
elements: 'match-nothing-selector',
selectors: [
'.repository-content',
'title',
'[data-pjax="#js-repo-pjax-container"]',
'.page-content',
'#git-project-content',
],
scrollTo: false,
analytics: false,
cacheBust: false,
forceCache: true, // TODO: merge namespace, add forceCache
}),
)
const progressBar = useProgressBar()
// make history travel work
React.useEffect(() => {
window.addEventListener('pjax:complete', progressBar.unmount)
return () => window.removeEventListener('pjax:complete', progressBar.unmount)
new Pjax({
...config,
filter() {
return false
},
})
}, [])
const loadWithPJAX = React.useCallback(
function loadWithPJAX(URL: string) {
progressBar.mount()
pjax.loadUrl(URL, { scrollTo: 0 })
},
[pjax],
)
const progressBar = useProgressBar()
useEvent('pjax:fetch', progressBar.mount, window)
useEvent('pjax:unload', progressBar.unmount, window)
return loadWithPJAX
return React.useCallback(url => {
Pjax.assign(url, config)
}, [])
}

View file

@ -6925,6 +6925,11 @@ pino@~5.13.0:
quick-format-unescaped "^3.0.3"
sonic-boom "^0.7.5"
pjax-api@^3.30.1:
version "3.30.1"
resolved "https://registry.yarnpkg.com/pjax-api/-/pjax-api-3.30.1.tgz#a263950e15162f339dcddd6a3dd75d17c51e7b12"
integrity sha512-yH6SzgvYxHuyJXwn/AXdjL0PB6pdk/W/lyv+numHuDQTbEi9uvjG1N0a8uUtkiMdFfuCpCP7EoxjJzQfO4Z86w==
pkg-dir@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-3.0.0.tgz#2749020f239ed990881b1f71210d51eb6523bea3"