Skip to content

Commit

Permalink
feat: remove content loading and refine scroll behavior (#1117)
Browse files Browse the repository at this point in the history
  • Loading branch information
ulivz authored Dec 18, 2018
1 parent 1c2aa08 commit 0a7d85b
Show file tree
Hide file tree
Showing 18 changed files with 95 additions and 313 deletions.
12 changes: 5 additions & 7 deletions packages/@vuepress/core/lib/app/app.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* global VUEPRESS_TEMP_PATH, CONTENT_LOADING */
/* global VUEPRESS_TEMP_PATH */
import Vue from 'vue'
import Router from 'vue-router'
import dataMixin from './dataMixin'
Expand All @@ -10,7 +10,6 @@ import ClientComputedMixin from '@transform/ClientComputedMixin'
import VuePress from './plugins/VuePress'

// built-in components
import LoadableContent from './components/Content.vue'
import Content from './components/Content.js'
import ContentSlotsDistributor from './components/ContentSlotsDistributor'
import OutboundLink from './components/OutboundLink.vue'
Expand All @@ -36,12 +35,8 @@ Vue.use(VuePress)
// mixin for exposing $site and $page
Vue.mixin(dataMixin(ClientComputedMixin, siteData))
// component for rendering markdown content and setting title etc.
if (CONTENT_LOADING) {
Vue.component('Content', LoadableContent)
} else {
Vue.component('Content', Content)
}

Vue.component('Content', Content)
Vue.component('ContentSlotsDistributor', ContentSlotsDistributor)
Vue.component('OutboundLink', OutboundLink)
// component for client-only content
Expand All @@ -67,6 +62,9 @@ export function createApp (isServer) {
if (savedPosition) {
return savedPosition
} else if (to.hash) {
if (Vue.$vuepress.$get('disableScrollBehavior')) {
return false
}
return {
selector: to.hash
}
Expand Down
10 changes: 2 additions & 8 deletions packages/@vuepress/core/lib/app/components/Content.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import Vue from 'vue'
import { isPageExists } from '../util'

export default {
props: {
Expand All @@ -10,13 +10,7 @@ export default {
},
render (h) {
const pageKey = this.pageKey || this.$parent.$page.key
if (Vue.$vuepress.isPageExists(pageKey)) {
// In SSR, if a component is not registered with the component option
// vue-server-renderer will not be able to resovle it.
if (!this.$parent.$ssrContext) {
Vue.$vuepress.registerPageAsyncComponent(pageKey)
}

if (isPageExists(pageKey)) {
return h(pageKey)
}
return h('')
Expand Down
114 changes: 0 additions & 114 deletions packages/@vuepress/core/lib/app/components/Content.vue

This file was deleted.

39 changes: 0 additions & 39 deletions packages/@vuepress/core/lib/app/components/ContentLoading.vue

This file was deleted.

27 changes: 1 addition & 26 deletions packages/@vuepress/core/lib/app/plugins/VuePress.js
Original file line number Diff line number Diff line change
@@ -1,31 +1,6 @@
import Vue from 'vue'
import Store from './Store'
import pageComponents from '@internal/page-components'

class VuePress extends Store {
isPageExists (pageKey) {
return Boolean(pageComponents[pageKey])
}

isPageLoaded (pageKey) {
return Boolean(Vue.component(pageKey))
}

getPageAsyncComponent (pageKey) {
if (!this.isPageExists(pageKey)) {
throw new Error(`Cannot found ${pageKey}`)
}
return pageComponents[pageKey]
}

loadPageAsyncComponent (pageKey) {
return this.getPageAsyncComponent(pageKey)()
}

registerPageAsyncComponent (pageKey) {
Vue.component(pageKey, this.getPageAsyncComponent(pageKey))
}
}
class VuePress extends Store {}

export default {
install (Vue) {
Expand Down
26 changes: 1 addition & 25 deletions packages/@vuepress/core/lib/app/serverEntry.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
import Vue from 'vue'
import { createApp } from './app'
import pageComponents from '@internal/page-components'
import layoutComponents from '@internal/layout-components'

export default context => new Promise((resolve, reject) => {
const { app, router } = createApp(true /* isServer */)
Expand All @@ -13,26 +10,5 @@ export default context => new Promise((resolve, reject) => {
}

router.push(url)

// In SSR, if a component is not registered with the component option,
// vue-server-renderer will not able to resolve it.
//
// Build also works after deleting this, but the content of all pages
// will not appear to the output html, which is not conducive to SEO.
const asyncComponentLoadingPromises = [
...getComponentArr(pageComponents),
...getComponentArr(layoutComponents)
].map(({ name, loadFn }) => {
return loadFn().then(comp => {
Vue.component(name, comp.default)
})
})

router.onReady(() => {
Promise.all(asyncComponentLoadingPromises).then(() => resolve(app))
})
router.onReady(() => resolve(app))
})

function getComponentArr (components) {
return Object.keys(components).map(name => ({ name, loadFn: components[name] }))
}
39 changes: 39 additions & 0 deletions packages/@vuepress/core/lib/app/util.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,42 @@
import Vue from 'vue'
import layoutComponents from '@internal/layout-components'
import pageComponents from '@internal/page-components'

const asyncComponents = Object.assign({}, layoutComponents, pageComponents)

export function isPageExists (pageKey) {
return Boolean(pageComponents[pageKey])
}

export function isPageLoaded (pageKey) {
return Boolean(Vue.component(pageKey))
}

export function getPageAsyncComponent (pageKey) {
return pageComponents[pageKey]
}

export function isLayoutExists (layout) {
return Boolean(layoutComponents[layout])
}

export function isLayoutLoaded (layout) {
return Boolean(Vue.component(layout))
}

export function getLayoutAsyncComponent (pageKey) {
return layoutComponents[pageKey]
}

export function ensureAsyncComponentsLoaded (...names) {
return Promise.all(names.filter(v => v).map(async (name) => {
if (!Vue.component(name) && asyncComponents[name]) {
const comp = await asyncComponents[name]()
Vue.component(name, comp.default)
}
}))
}

/**
* Inject option to Vue SFC
* @param {object} options
Expand Down
11 changes: 8 additions & 3 deletions packages/@vuepress/core/lib/internal-plugins/routes.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,13 @@ module.exports = (options, ctx) => ({
*/
function importCode () {
return `
import { injectComponentOption } from '@app/util'
import { injectComponentOption, ensureAsyncComponentsLoaded } from '@app/util'
import rootMixins from '@internal/root-mixins'
import layoutComponents from '@internal/layout-components'
import pageComponents from '@internal/page-components'
import LayoutDistributor from '@app/components/LayoutDistributor.vue'
injectComponentOption(LayoutDistributor, 'mixins', rootMixins)
injectComponentOption(LayoutDistributor, 'components', Object.assign({}, layoutComponents, pageComponents))
`
}

Expand All @@ -34,14 +33,20 @@ function routesCode (pages) {
function genRoute ({
path: pagePath,
key: componentName,
frontmatter: {
layout
},
regularPath,
_meta
}) {
let code = `
{
name: ${JSON.stringify(componentName)},
path: ${JSON.stringify(pagePath)},
component: LayoutDistributor,${_meta ? `\n meta: ${JSON.stringify(_meta)}` : ''}
component: LayoutDistributor,
beforeEnter: (to, from, next) => {
ensureAsyncComponentsLoaded(${JSON.stringify(layout || 'Layout')}, ${JSON.stringify(componentName)}).then(next)
},${_meta ? `\n meta: ${JSON.stringify(_meta)}` : ''}
}`

const dncodedPath = decodeURIComponent(pagePath)
Expand Down
3 changes: 1 addition & 2 deletions packages/@vuepress/core/lib/webpack/createBaseConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -285,8 +285,7 @@ module.exports = function createBaseConfig ({
.use(require('webpack/lib/DefinePlugin'), [{
VUEPRESS_VERSION: JSON.stringify(require('../../package.json').version),
VUEPRESS_TEMP_PATH: JSON.stringify(tempPath),
LAST_COMMIT_HASH: JSON.stringify(getLastCommitHash()),
CONTENT_LOADING: JSON.stringify(siteConfig.contentLoading || false)
LAST_COMMIT_HASH: JSON.stringify(getLastCommitHash())
}])

pluginAPI.options.define.apply(config)
Expand Down
1 change: 0 additions & 1 deletion packages/@vuepress/core/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,6 @@
"toml": "^2.3.3",
"url-loader": "^1.0.1",
"vue": "^2.5.16",
"vue-content-loader": "^0.2.1",
"vue-loader": "^15.2.4",
"vue-router": "^3.0.1",
"vue-server-renderer": "^2.5.16",
Expand Down
3 changes: 1 addition & 2 deletions packages/@vuepress/plugin-active-header-links/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ module.exports = (options) => ({
clientRootMixin: path.resolve(__dirname, 'mixin.js'),
define: {
AHL_SIDEBAR_LINK_SELECTOR: options.sidebarLinkSelector || '.sidebar-link',
AHL_HEADER_ANCHOR_SELECTOR: options.headerAnchorSelector || '.header-anchor',
AHL_TOP_OFFSET: options.headerTopOffset || 90
AHL_HEADER_ANCHOR_SELECTOR: options.headerAnchorSelector || '.header-anchor'
}
})
Loading

0 comments on commit 0a7d85b

Please sign in to comment.