refactor: refine $vuepress client plugin.

Author: ulivz

Diff for: packages/@vuepress/core/lib/app/components/Content.js

@@ -1,5 +1,4 @@
 import Vue from 'vue'
-import components from '@internal/page-components'
 
 export default {
   functional: true,
@@ -9,12 +8,13 @@ export default {
   },
   render (h, { parent, props, data }) {
     const pageKey = props.pageKey || parent.$page.key
-    if (components[pageKey]) {
+    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 (!parent.$ssrContext) {
-        Vue.component(pageKey, components[pageKey])
+        Vue.$vuepress.registerPageAsyncComponent(pageKey)
       }
+
       return h(pageKey, {
         class: [data.class, data.staticClass],
         style: data.style,

Diff for: packages/@vuepress/core/lib/app/components/Content.vue

@@ -13,7 +13,6 @@
 /* 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'
@@ -61,26 +60,28 @@ export default {
   methods: {
     loadContent (pageKey) {
       this.layout = null
-      if (components[pageKey]) {
+      if (this.$vuepress.isPageExists(pageKey)) {
         if (!this.$ssrContext) {
-          Vue.component(pageKey, components[pageKey])
+          this.$vuepress.registerPageAsyncComponent(pageKey)
           this.layout = pageKey
         }
       }
     },
 
     reloadContent (pageKey) {
-      if (Vue.component(pageKey)) {
+      // When page has been loaded, disable transition.
+      if (this.$vuepress.isPageLoaded(pageKey)) {
         this.layout = pageKey
         this.noTransition = true
         return
       }
+      // Start to load unfetched page component.
       this.layout = CONTENT_LOADING_COMPONENT
-      if (components[pageKey]) {
+      if (this.$vuepress.isPageExists(pageKey)) {
         this.noTransition = false
         if (!this.$ssrContext) {
           Promise.all([
-            components[pageKey](),
+            this.$vuepress.loadPageAsyncComponent(pageKey),
             new Promise(resolve => setTimeout(resolve, 300))
           ]).then(([comp]) => {
             this.$vuepress.$emit('AsyncMarkdownAssetLoaded', this.pageKey)

Diff for: packages/@vuepress/core/lib/app/plugins/VuePress.d.ts

@@ -1,11 +1,20 @@
 import { Store } from './Store';
+import { AsyncComponent } from 'vue'
 
 declare class VuePress extends Store {
+  isPageExists (pageKey: string): boolean;
 
+  isPageLoaded (pageKey: string): boolean;
+
+  getPageAsyncComponent (pageKey: string): () => Promise<AsyncComponent>;
+
+  loadPageAsyncComponent (pageKey: string): Promise<AsyncComponent>;
+
+  registerPageAsyncComponent (pageKey: string): void;
 }
 
 declare module "vue/types/vue" {
   interface Vue {
-    $vuepress: Store;
+    $vuepress: VuePress;
   }
 }

Diff for: packages/@vuepress/core/lib/app/plugins/VuePress.js

@@ -1,7 +1,30 @@
+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))
+  }
 }
 
 export default {