feat: allow `enhanceApp` to return a `Promise` (#1760)

Co-authored-by: Nick Borko <nick.borko@gmail.com>

docs/guide/theme-introduction.md

@@ -38,7 +38,7 @@ A VitePress custom theme is simply an object containing four properties and is d
 interface Theme {
   Layout: Component // Vue 3 component
   NotFound?: Component
-  enhanceApp?: (ctx: EnhanceAppContext) => void
+  enhanceApp?: (ctx: EnhanceAppContext) => Awaitable<void>
   setup?: () => void
 }
 

src/client/app/index.ts

@@ -52,7 +52,7 @@ const VitePressApp = defineComponent({
   }
 })
 
-export function createApp() {
+export async function createApp() {
   const router = newRouter()
 
   const app = newApp()
@@ -77,7 +77,7 @@ export function createApp() {
   })
 
   if (Theme.enhanceApp) {
-    Theme.enhanceApp({
+    await Theme.enhanceApp({
       app,
       router,
       siteData: siteDataRef
@@ -127,12 +127,12 @@ function newRouter(): Router {
 }
 
 if (inBrowser) {
-  const { app, router, data } = createApp()
+  createApp().then(({ app, router, data }) => {
-
+    // wait until page component is fetched before mounting
-  // wait until page component is fetched before mounting
+    router.go().then(() => {
-  router.go().then(() => {
+      // dynamically update head tags
-    // dynamically update head tags
+      useUpdateHead(router.route, data.site)
-    useUpdateHead(router.route, data.site)
+      app.mount('#app')
-    app.mount('#app')
+    })
   })
 }

src/client/app/ssr.ts

@@ -3,7 +3,7 @@ import { createApp } from './index.js'
 import { renderToString } from 'vue/server-renderer'
 
 export async function render(path: string) {
-  const { app, router } = createApp()
+  const { app, router } = await createApp()
   await router.go(path)
   return renderToString(app)
 }

src/client/app/theme.ts

@@ -1,6 +1,6 @@
 import type { App, Ref, Component } from 'vue'
 import type { Router } from './router.js'
-import type { SiteData } from '../shared.js'
+import type { Awaitable, SiteData } from '../shared.js'
 
 export interface EnhanceAppContext {
   app: App
@@ -11,6 +11,6 @@ export interface EnhanceAppContext {
 export interface Theme {
   Layout: Component
   NotFound?: Component
-  enhanceApp?: (ctx: EnhanceAppContext) => void
+  enhanceApp?: (ctx: EnhanceAppContext) => Awaitable<void>
   setup?: () => void
 }