fix($core): "slotKey" must be defined as props in user's markdown's script tag (close: #975)

Author: ulivz

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

@@ -1,27 +1,23 @@
 import Vue from 'vue'
 
 export default {
-  functional: true,
   props: {
     pageKey: String,
-    slotKey: String
+    slotKey: {
+      type: String,
+      default: 'default'
+    }
   },
-  render (h, { parent, props, data }) {
-    const pageKey = props.pageKey || parent.$page.key
+  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 (!parent.$ssrContext) {
         Vue.$vuepress.registerPageAsyncComponent(pageKey)
       }
 
-      return h(pageKey, {
-        class: [data.class, data.staticClass],
-        style: data.style,
-        props: {
-          slotKey: props.slotKey || 'default'
-        }
-      })
+      return h(pageKey)
     }
     return h('')
   }

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

@@ -24,7 +24,10 @@ export default {
 
   props: {
     pageKey: String,
-    slotKey: String
+    slotKey: {
+      type: String,
+      default: 'default'
+    }
   },
 
   data () {
@@ -72,20 +75,25 @@ export default {
         this.noTransition = true
         return
       }
+
       // Start to load unfetched page component.
       this.layout = CONTENT_LOADING_COMPONENT
       if (this.$vuepress.isPageExists(pageKey)) {
         this.noTransition = false
         if (!this.$ssrContext) {
           Promise.all([
             this.$vuepress.loadPageAsyncComponent(pageKey),
-            new Promise(resolve => setTimeout(resolve, 300))
+            new Promise(resolve => setTimeout(resolve, 1000))
           ]).then(([comp]) => {
             this.$vuepress.$emit('AsyncMarkdownAssetLoaded', this.pageKey)
             Vue.component(pageKey, comp.default)
             this.layout = null
             setTimeout(() => {
               this.layout = pageKey
+              setTimeout(() => {
+                this.$vuepress.$set('contentMounted', true)
+                this.$vuepress.$emit('contentMounted', this.slotKey)
+              })
             })
           })
         }
@@ -99,7 +107,8 @@ export default {
   .fade-enter-active, .fade-leave-active {
     transition: opacity .2s;
   }
-  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+
+  .fade-enter, .fade-leave-to {
     opacity: 0;
   }
 </style>

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

@@ -14,7 +14,7 @@ declare class VuePress extends Store {
 }
 
 declare module "vue/types/vue" {
-  interface Vue {
+  export interface Vue {
     $vuepress: VuePress;
   }
 }

packages/@vuepress/core/lib/app/root-mixins/updateLoadingState.js

@@ -7,8 +7,7 @@ module.exports = (options, context, api) => ({
   // @internal/root-mixins
   async clientDynamicModules () {
     const builtInRootMixins = [
-      path.resolve(__dirname, '../app/root-mixins/updateMeta.js'),
-      path.resolve(__dirname, '../app/root-mixins/updateLoadingState.js')
+      path.resolve(__dirname, '../app/root-mixins/updateMeta.js')
     ]
 
     const rootMixins = [

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

@@ -100,18 +100,8 @@ module.exports = function (src) {
 
   const res = (
     `<template>\n` +
-      `<ContentSlotsDistributor :slot-key="slotKey">${html}</ContentSlotsDistributor>\n` +
+      `<ContentSlotsDistributor :slot-key="$parent.slotKey">${html}</ContentSlotsDistributor>\n` +
     `</template>\n` +
-    `<script>
-      export default { 
-         props: ['slot-key'], 
-         mounted() {
-           this.$nextTick(function () {
-             this.$vuepress.$emit('AsyncMarkdownContentMounted', this.slotKey)
-           })
-         } 
-      }
-    </script>` +
     (hoistedTags || []).join('\n') +
     `\n${dataBlockString}\n`
   )

packages/@vuepress/markdown-loader/index.js

@@ -42,7 +42,7 @@ function getAnchors (sidebarLinks) {
 
 export default {
   mounted () {
-    this.$vuepress.$on('AsyncMarkdownContentMounted', (slotKey) => {
+    this.$vuepress.$on('contentMounted', (slotKey) => {
       if (slotKey === 'default') {
         window.addEventListener('scroll', this.onScroll)
       }