feat($core): 'contentLoading' site config option

Author: ulivz

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

@@ -1,4 +1,4 @@
-/* global VUEPRESS_TEMP_PATH */
+/* global VUEPRESS_TEMP_PATH, CONTENT_LOADING */
 import Vue from 'vue'
 import Router from 'vue-router'
 import dataMixin from './dataMixin'
@@ -10,7 +10,8 @@ import ClientComputedMixin from '@transform/ClientComputedMixin'
 import Store from './plugins/Store'
 
 // built-in components
-import Content from './components/Content'
+import LoadableContent from './components/Content.vue'
+import Content from './components/Content.js'
 import ContentSlotsDistributor from './components/ContentSlotsDistributor'
 import OutboundLink from './components/OutboundLink.vue'
 import ClientOnly from './components/ClientOnly'
@@ -35,7 +36,12 @@ Vue.use(Store, '$vuepress')
 // mixin for exposing $site and $page
 Vue.mixin(dataMixin(ClientComputedMixin, siteData))
 // component for rendering markdown content and setting title etc.
-Vue.component('Content', Content)
+if (CONTENT_LOADING) {
+  Vue.component('Content', LoadableContent)
+} else {
+  Vue.component('Content', Content)
+}
+
 Vue.component('ContentSlotsDistributor', ContentSlotsDistributor)
 Vue.component('OutboundLink', OutboundLink)
 // component for client-only content

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

@@ -0,0 +1,28 @@
+import Vue from 'vue'
+import components from '@internal/page-components'
+
+export default {
+  functional: true,
+  props: {
+    pageKey: String,
+    slotKey: String
+  },
+  render (h, { parent, props, data }) {
+    const pageKey = props.pageKey || parent.$page.key
+    if (components[pageKey]) {
+      // In SSR, if a component is not registered with the component option
+      // vue-server-renderer will not be able to resovle it.
+      if (!parent.$ssrContext) {
+        Vue.component(pageKey, components[pageKey])
+      }
+      return h(pageKey, {
+        class: [data.class, data.staticClass],
+        style: data.style,
+        props: {
+          slotKey: props.slot || 'default'
+        }
+      })
+    }
+    return h('')
+  }
+}

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

@@ -10,10 +10,16 @@
 </template>
 
 <script>
+/* global CONTENT_LOADING */
+
 import Vue from 'vue'
 import components from '@internal/page-components'
 import ContentLoading from './ContentLoading'
 
+const CONTENT_LOADING_COMPONENT = typeof CONTENT_LOADING === 'string'
+  ? CONTENT_LOADING
+  : 'ContentLoading'
+
 export default {
   components: { ContentLoading },
 
@@ -24,7 +30,7 @@ export default {
 
   data () {
     return {
-      layout: 'ContentLoading',
+      layout: CONTENT_LOADING_COMPONENT,
       noTransition: true
     }
   },
@@ -34,7 +40,7 @@ export default {
       return this.pageKey || this.$page.key
     },
     disableTransition () {
-      return !this.layout || this.layout === 'ContentLoading' || this.noTransition
+      return !this.layout || this.layout === CONTENT_LOADING_COMPONENT || this.noTransition
     }
   },
 
@@ -69,7 +75,7 @@ export default {
         this.noTransition = true
         return
       }
-      this.layout = 'ContentLoading'
+      this.layout = CONTENT_LOADING_COMPONENT
       if (components[pageKey]) {
         this.noTransition = false
         if (!this.$ssrContext) {

packages/@vuepress/core/lib/webpack/createBaseConfig.js

@@ -300,7 +300,8 @@ 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())
+      LAST_COMMIT_HASH: JSON.stringify(getLastCommitHash()),
+      CONTENT_LOADING: JSON.stringify(siteConfig.contentLoading || false)
     }])
 
   pluginAPI.options.define.apply(config)

packages/docs/docs/.vuepress/config.js

@@ -3,6 +3,7 @@ const container = require('markdown-it-container')
 
 module.exports = ctx => ({
   dest: '../../vuepress',
+  contentLoading: true,
   locales: {
     '/': {
       lang: 'en-US',

packages/docs/docs/config/README.md

@@ -118,6 +118,13 @@ Specify locales for i18n support. For more details, see the guide on [Internatio
 
 A function to control what files should have `<link rel="preload">` resource hints generated. See [shouldPrefetch](https://ssr.vuejs.org/api/#shouldprefetch).
 
+### contentLoading
+
+- Type: `boolean|string`
+- Default: `false`
+
+Whether to enable placeholder loading for asynchronous loading content. if it's a stirng, it should be the name of your custom loading component.
+
 ## Styling
 
 ### palette.styl
@@ -135,7 +142,7 @@ $codeBgColor = #282c34
 ```
 
 ::: danger Note
-You should ONLY write color variables in this file. since `palette.styl` will be imported at the end of the root stylus config file, as a config, it will be used by multiple files, so once you wrote styles here, your style would be duplicated by multiple times. 
+You should ONLY write color variables in this file. since `palette.styl` will be imported at the end of the root stylus config file, as a config, it will be used by multiple files, so once you wrote styles here, your style would be duplicated by multiple times.
 :::
 
 ### index.styl

packages/docs/docs/zh/config/README.md

@@ -115,6 +115,13 @@ module.exports = {
 
 一个函数，用来控制对于哪些文件，是需要生成 `<link rel="prefetch">` 资源提示的。请参考 [shouldPrefetch](https://ssr.vuejs.org/zh/api/#shouldpreload)。
 
+### contentLoading
+
+- 类型: `boolean|string`
+- 默认值: `false`
+
+是否对异步加载页面的内容开启占位符加载。如果它是一个字符串，那么它应该是自定义加载组件的名称。
+
 ## Styling
 
 > To be translated.
@@ -134,7 +141,7 @@ $codeBgColor = #282c34
 ```
 
 ::: danger Note
-You should ONLY write color variables in this file. since `palette.styl` will be imported at the end of the root stylus config file, as a config, it will be used by multiple files, so once you wrote styles here, your style would be duplicated by multiple times. 
+You should ONLY write color variables in this file. since `palette.styl` will be imported at the end of the root stylus config file, as a config, it will be used by multiple files, so once you wrote styles here, your style would be duplicated by multiple times.
 :::
 
 ### index.styl