feat: remove content loading and refine scroll behavior (#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",