feat: remove content loading and refine scroll behavior (vuejs#1117)

Author: ulivz

packages/@vuepress/core/lib/app/app.js

@@ -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'
@@ -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'
@@ -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
@@ -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
  }

packages/@vuepress/core/lib/app/components/Content.js

@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { isPageExists } from '../util'
 
 export default {
  props: {
@@ -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('')

packages/@vuepress/core/lib/app/components/Content.vue

@@ -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) {

packages/@vuepress/core/lib/app/components/ContentLoading.vue

@@ -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 */)
@@ -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] }))
-}

packages/@vuepress/core/lib/app/plugins/VuePress.js

@@ -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

packages/@vuepress/core/lib/app/serverEntry.js

@@ -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))
 `
 }
 
@@ -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)

packages/@vuepress/core/lib/app/util.js

@@ -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)

packages/@vuepress/core/lib/internal-plugins/routes.js

@@ -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",