refactor(client): provide layouts with injection (close #1189)

Author: meteorlxy

packages/client/src/app.ts

@@ -1,3 +1,4 @@
+import { clientConfigs } from '@internal/clientConfigs'
 import { createApp, createSSRApp, h } from 'vue'
 import { RouterView } from 'vue-router'
 import { siteData } from './composables/index.js'
@@ -14,8 +15,6 @@ import type { CreateVueAppFunction } from './types/index.js'
 const appCreator = __VUEPRESS_DEV__ ? createApp : createSSRApp
 
 export const createVueApp: CreateVueAppFunction = async () => {
-  const { clientConfigs } = await import('@internal/clientConfigs')
-
   // create vue app
   const app = appCreator({
     name: 'VuepressApp',
@@ -39,11 +38,11 @@ export const createVueApp: CreateVueAppFunction = async () => {
   })
 
   // create vue-router instance
-  const router = await createVueRouter()
+  const router = createVueRouter()
 
   // global components and computed
   setupGlobalComponents(app)
-  const globalComputed = setupGlobalComputed(app, router)
+  const globalComputed = setupGlobalComputed(app, router, clientConfigs)
 
   // setup devtools in dev mode
   if (__VUEPRESS_DEV__ || __VUE_PROD_DEVTOOLS__) {

packages/client/src/components/Vuepress.ts

@@ -1,58 +1,14 @@
-import { isString } from '@vuepress/shared'
-import type { Component } from 'vue'
-import { computed, defineComponent, h } from 'vue'
-import { usePageData } from '../composables/index.js'
-
-const LAYOUT_NAME_DEFAULT = 'Layout'
-const LAYOUT_NAME_NOT_FOUND = 'NotFound'
+import { defineComponent, h } from 'vue'
+import { usePageLayout } from '../composables/index.js'
 
 /**
  * Global Layout
  */
-export const createVuepressComponent = async (): Promise<Component> => {
-  const { clientConfigs } = await import('@internal/clientConfigs')
-
-  const layouts = clientConfigs.reduce(
-    (prev, item) => ({
-      ...prev,
-      ...item.layouts,
-    }),
-    {} as Record<string, Component>
-  )
-
-  const Vuepress = defineComponent({
-    name: 'Vuepress',
-
-    setup() {
-      const page = usePageData()
-
-      // resolve layout component
-      const layoutComponent = computed(() => {
-        // resolve layout name of current page
-        let layoutName: string
-
-        if (page.value.path) {
-          // if current page exists
-
-          // use layout from frontmatter
-          const frontmatterLayout = page.value.frontmatter.layout
-
-          if (isString(frontmatterLayout)) {
-            layoutName = frontmatterLayout
-          } else {
-            // fallback to default layout
-            layoutName = LAYOUT_NAME_DEFAULT
-          }
-        } else {
-          // if current page does not exist
-          // use NotFound layout
-          layoutName = LAYOUT_NAME_NOT_FOUND
-        }
-        return layouts[layoutName]
-      })
-
-      return () => h(layoutComponent.value)
-    },
-  })
-  return Vuepress
-}
+export const Vuepress = defineComponent({
+  name: 'Vuepress',
+
+  setup() {
+    const layout = usePageLayout()
+    return () => h(layout.value)
+  },
+})

packages/client/src/composables/index.ts

@@ -1,8 +1,10 @@
+export * from './layouts.js'
 export * from './pageData.js'
 export * from './pageFrontmatter.js'
 export * from './pageHead.js'
 export * from './pageHeadTitle.js'
 export * from './pageLang.js'
+export * from './pageLayout.js'
 export * from './pagesData.js'
 export * from './routeLocale.js'
 export * from './siteData.js'

packages/client/src/composables/layouts.ts

@@ -0,0 +1,25 @@
+import { type ComputedRef, inject, type InjectionKey } from 'vue'
+import type { Layouts } from '../types/index.js'
+
+/**
+ * Ref wrapper of `Layouts`
+ */
+export type LayoutsRef = ComputedRef<Layouts>
+
+/**
+ * Injection key for layouts
+ */
+export const layoutsSymbol: InjectionKey<LayoutsRef> = Symbol(
+  __VUEPRESS_DEV__ ? 'layouts' : ''
+)
+
+/**
+ * Returns layouts component map
+ */
+export const useLayouts = (): LayoutsRef => {
+  const layouts = inject(layoutsSymbol)
+  if (!layouts) {
+    throw new Error('useLayouts() is called without provider.')
+  }
+  return layouts
+}

packages/client/src/composables/pageLayout.ts

@@ -0,0 +1,29 @@
+import {
+  type Component,
+  type ComputedRef,
+  inject,
+  type InjectionKey,
+} from 'vue'
+
+/**
+ * Ref wrapper of `PageLayout`
+ */
+export type PageLayoutRef = ComputedRef<Component>
+
+/**
+ * Injection key for page layout
+ */
+export const pageLayoutSymbol: InjectionKey<PageLayoutRef> = Symbol(
+  __VUEPRESS_DEV__ ? 'pageLayout' : ''
+)
+
+/**
+ * Returns layout component of current page
+ */
+export const usePageLayout = (): ComputedRef<Component> => {
+  const pageLayout = inject(pageLayoutSymbol)
+  if (!pageLayout) {
+    throw new Error('usePageLayout() is called without provider.')
+  }
+  return pageLayout
+}

packages/client/src/constants.ts

@@ -0,0 +1,9 @@
+/**
+ * Name of the default layout
+ */
+export const LAYOUT_NAME_DEFAULT = 'Layout'
+
+/**
+ * Name of the 404 page layout
+ */
+export const LAYOUT_NAME_NOT_FOUND = 'NotFound'

packages/client/src/resolvers.ts

@@ -4,25 +4,41 @@ import {
   isString,
   resolveLocalePath,
 } from '@vuepress/shared'
+import type { Component } from 'vue'
 import { reactive } from 'vue'
-import { pageDataEmpty, pagesData } from './composables/index.js'
-import type {
-  PageData,
-  PageFrontmatter,
-  PageHead,
-  PageHeadTitle,
-  PageLang,
-  RouteLocale,
-  SiteData,
-  SiteLocaleData,
+import {
+  type PageData,
+  pageDataEmpty,
+  type PageFrontmatter,
+  type PageHead,
+  type PageHeadTitle,
+  type PageLang,
+  pagesData,
+  type RouteLocale,
+  type SiteData,
+  type SiteLocaleData,
 } from './composables/index.js'
+import { LAYOUT_NAME_DEFAULT, LAYOUT_NAME_NOT_FOUND } from './constants.js'
+import type { ClientConfig, Layouts } from './types/index.js'
 
 /**
  * Resolver methods to get global computed
  *
  * Users can override corresponding method for advanced customization
  */
 export const resolvers = reactive({
+  /**
+   * Resolve layouts component map
+   */
+  resolveLayouts: (clientConfigs: ClientConfig[]): Layouts =>
+    clientConfigs.reduce(
+      (prev, item) => ({
+        ...prev,
+        ...item.layouts,
+      }),
+      {} as Layouts
+    ),
+
   /**
    * Resolve page data according to page key
    */
@@ -78,7 +94,33 @@ export const resolvers = reactive({
    *
    * It would be used as the `lang` attribute of `<html>` tag
    */
-  resolvePageLang: (pageData: PageData): PageLang => pageData.lang || 'en',
+  resolvePageLang: (page: PageData): PageLang => page.lang || 'en',
+
+  /**
+   * Resolve layout component of current page
+   */
+  resolvePageLayout: (page: PageData, layouts: Layouts): Component => {
+    let layoutName: string
+
+    // if current page exists
+    if (page.path) {
+      // use layout from frontmatter
+      const frontmatterLayout = page.frontmatter.layout
+
+      if (isString(frontmatterLayout)) {
+        layoutName = frontmatterLayout
+      } else {
+        // fallback to default layout
+        layoutName = LAYOUT_NAME_DEFAULT
+      }
+    }
+    // if current page does not exist
+    else {
+      // use NotFound layout
+      layoutName = LAYOUT_NAME_NOT_FOUND
+    }
+    return layouts[layoutName]
+  },
 
   /**
    * Resolve locale path according to route path and locales config

packages/client/src/router.ts

@@ -20,11 +20,11 @@ const historyCreator = __VUEPRESS_SSR__ ? createMemoryHistory : createWebHistory
 /**
  * Create vue-router instance
  */
-export const createVueRouter = async (): Promise<Router> => {
+export const createVueRouter = (): Router => {
   const router = createRouter({
     // it might be an issue of vue-router that have to remove the ending slash
     history: historyCreator(removeEndingSlash(__VUEPRESS_BASE__)),
-    routes: await createRoutes(),
+    routes: createRoutes(),
     scrollBehavior: (to, from, savedPosition) => {
       if (savedPosition) return savedPosition
       if (to.hash) return { el: to.hash }

packages/client/src/routes.ts

@@ -1,13 +1,12 @@
 import { pagesRoutes } from '@internal/pagesRoutes'
 import type { RouteRecordRaw } from 'vue-router'
-import { createVuepressComponent } from './components/Vuepress.js'
+import { Vuepress } from './components/Vuepress.js'
 
 /**
  * Create routes for vue-router
  */
-export const createRoutes = async (): Promise<RouteRecordRaw[]> => {
-  const Vuepress = await createVuepressComponent()
-  return pagesRoutes.reduce(
+export const createRoutes = (): RouteRecordRaw[] =>
+  pagesRoutes.reduce(
     (result, [name, path, meta, redirects]) => {
       result.push(
         {
@@ -31,4 +30,3 @@ export const createRoutes = async (): Promise<RouteRecordRaw[]> => {
       },
     ] as RouteRecordRaw[]
   )
-}