feat($core): support async enhanceApp (close #2074) (#2075)

vuejs · Feb 2, 2020 · 2d53fbb · 2d53fbb
1 parent 7037882
commit 2d53fbb
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 18 deletions.
diff --git a/packages/@vuepress/core/lib/client/app.js b/packages/@vuepress/core/lib/client/app.js
@@ -59,7 +59,7 @@ Vue.prototype.$withBase = function (path) {
   }
 }
 
-export function createApp (isServer) {
+export async function createApp (isServer) {
   const routerBase = typeof window !== 'undefined' && window.__VUEPRESS_ROUTER_BASE__
     ? window.__VUEPRESS_ROUTER_BASE__
     : (siteData.routerBase || siteData.base)
@@ -90,11 +90,11 @@ export function createApp (isServer) {
   const options = {}
 
   try {
-    appEnhancers.forEach(enhancer => {
-      if (typeof enhancer === 'function') {
-        enhancer({ Vue, options, router, siteData, isServer })
-      }
-    })
+    await Promise.all(
+      appEnhancers
+        .filter(enhancer => typeof enhancer === 'function')
+        .map(enhancer => enhancer({ Vue, options, router, siteData, isServer }))
+    )
   } catch (e) {
     console.error(e)
   }

diff --git a/packages/@vuepress/core/lib/client/clientEntry.js b/packages/@vuepress/core/lib/client/clientEntry.js
@@ -2,13 +2,13 @@
 
 import { createApp } from './app'
 
-const { app, router } = createApp(false /* isServer */)
-
 window.__VUEPRESS__ = {
   version: VUEPRESS_VERSION,
   hash: LAST_COMMIT_HASH
 }
 
-router.onReady(() => {
-  app.$mount('#app')
+createApp(false /* isServer */).then(({ app, router }) => {
+  router.onReady(() => {
+    app.$mount('#app')
+  })
 })
diff --git a/packages/@vuepress/core/lib/client/serverEntry.js b/packages/@vuepress/core/lib/client/serverEntry.js
@@ -1,14 +1,15 @@
 import { createApp } from './app'
 
 export default context => new Promise((resolve, reject) => {
-  const { app, router } = createApp(true /* isServer */)
-  const { url } = context
-  const { fullPath } = router.resolve(url).route
+  createApp(true /* isServer */).then(({ app, router }) => {
+    const { url } = context
+    const { fullPath } = router.resolve(url).route
 
-  if (fullPath !== url) {
-    return reject({ url: fullPath })
-  }
+    if (fullPath !== url) {
+      return reject({ url: fullPath })
+    }
 
-  router.push(url)
-  router.onReady(() => resolve(app))
+    router.push(url)
+    router.onReady(() => resolve(app))
+  })
 })
diff --git a/packages/docs/docs/guide/basic-config.md b/packages/docs/docs/guide/basic-config.md
@@ -41,6 +41,7 @@ To develop a custom theme, see [Writing a theme](../theme/writing-a-theme.md).
 Since the VuePress app is a standard Vue app, you can apply app-level enhancements by creating a file `.vuepress/enhanceApp.js`, which will be imported into the app if it’s present. The file should `export default` a hook function which will receive an object containing some app-level values. You can use this hook to install extra Vue plugins, register global components, or add extra router hooks:
 
 ``` js
+// async function is also supported, too
 export default ({
   Vue, // the version of Vue being used in the VuePress app
   options, // the options for the root Vue instance

diff --git a/packages/docs/docs/zh/guide/basic-config.md b/packages/docs/docs/zh/guide/basic-config.md
@@ -41,6 +41,7 @@ module.exports = {
 由于 VuePress 是一个标准的 Vue 应用，你可以通过创建一个 `.vuepress/enhanceApp.js` 文件来做一些应用级别的配置，当该文件存在的时候，会被导入到应用内部。`enhanceApp.js` 应该 `export default` 一个钩子函数，并接受一个包含了一些应用级别属性的对象作为参数。你可以使用这个钩子来安装一些附加的 Vue 插件、注册全局组件，或者增加额外的路由钩子等：
 
 ``` js
+// 使用异步函数也是可以的
 export default ({
   Vue, // VuePress 正在使用的 Vue 构造函数
   options, // 附加到根实例的一些选项