feat: more efficient useData() method that exposes all data

BREAKING CHANGE:

    - Individual `useX()` data methods are removed.

        ```js
        // before
        import { useSiteDataByRoute, usePageData } from 'vitepress'
        const site = useSiteDataByRoute()
        const page = usePageData()
        const theme = computed(() => site.value.themeConfig)

        // after
        import { useData } from 'vitepress'
        const { site, page, theme } = useData()
        ```

      All destructured values are computed refs injected from app root
      so they are created only once globally.

    - Global mixin properties (e.g. `$site`) are removed. Always use
      `useData()` to retrieve VitePress data.

Author: yyx990803

src/client/app/components/Debug.vue

@@ -1,16 +1,8 @@
-<template>
-  <div class="debug" :class="{ open }" ref="el" @click="open = !open">
-    <p class="title">Debug</p>
-
-    <pre class="block">$page {{ $page }}</pre>
-    <pre class="block">$siteByRoute {{ $siteByRoute }}</pre>
-    <pre class="block">$site {{ $site }}</pre>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { ref, watch } from 'vue'
+import { useData } from '../data'
 
+const data = useData()
 const el = ref<HTMLElement | null>(null)
 const open = ref(false)
 
@@ -21,6 +13,13 @@ watch(open, (value) => {
 })
 </script>
 
+<template>
+  <div class="debug" :class="{ open }" ref="el" @click="open = !open">
+    <p class="title">Debug</p>
+    <pre class="block">{{ data }}</pre>
+  </div>
+</template>
+
 <style scoped>
 .debug {
   box-sizing: border-box;

src/client/app/composables/frontmatter.ts

@@ -0,0 +1,70 @@
+import { InjectionKey, Ref, ref, readonly, computed, inject } from 'vue'
+import { Route } from './router'
+import { PageData, SiteData } from '/@types/shared'
+import serializedSiteData from '@siteData'
+import { resolveSiteDataByRoute } from '../shared/config'
+
+export const dataSymbol: InjectionKey<VitePressData> = Symbol()
+
+export interface VitePressData {
+  site: Ref<SiteData>
+  theme: Ref<any>
+  page: Ref<PageData>
+  frontmatter: Ref<any>
+  lang: Ref<string>
+  localePath: Ref<string>
+  title: Ref<string>
+  description: Ref<string>
+}
+
+// site data is a singleton
+export type SiteDataRef<T = any> = Ref<SiteData<T>>
+
+export const siteDataRef: Ref<SiteData> = ref(parse(serializedSiteData))
+
+function parse(data: string): SiteData {
+  return readonly(JSON.parse(data)) as SiteData
+}
+
+// hmr
+if (import.meta.hot) {
+  import.meta.hot!.accept('/@siteData', (m) => {
+    siteDataRef.value = parse(m.default)
+  })
+}
+
+// per-app data
+export function initData(route: Route): VitePressData {
+  const site = computed(() =>
+    resolveSiteDataByRoute(siteDataRef.value, route.path)
+  )
+
+  return {
+    site,
+    theme: computed(() => site.value.themeConfig),
+    page: computed(() => route.data),
+    frontmatter: computed(() => route.data.frontmatter),
+    lang: computed(() => site.value.lang),
+    localePath: computed(() => {
+      const { locales, lang } = site.value
+      const path = Object.keys(locales).find((lp) => locales[lp].lang === lang)
+      return (locales && path) || '/'
+    }),
+    title: computed(() => {
+      return route.data.title
+        ? route.data.title + ' | ' + site.value.title
+        : site.value.title
+    }),
+    description: computed(() => {
+      return route.data.description || site.value.description
+    })
+  }
+}
+
+export function useData(): VitePressData {
+  const data = inject(dataSymbol)
+  if (!data) {
+    throw new Error('vitepress data not properly injected in app')
+  }
+  return data
+}

src/client/app/composables/pageData.ts

@@ -2,31 +2,32 @@ import {
   App,
   createApp as createClientApp,
   createSSRApp,
+  defineAsyncComponent,
   h,
   onMounted,
   watch
 } from 'vue'
 import { inBrowser, pathToFile } from './utils'
 import { Router, RouterSymbol, createRouter } from './router'
-import { mixinGlobalComputed, mixinGlobalComponents } from './mixin'
-import { siteDataRef } from './composables/siteData'
-import { useSiteDataByRoute } from './composables/siteDataByRoute'
-import { usePageData } from './composables/pageData'
+import { siteDataRef, useData } from './data'
 import { useUpdateHead } from './composables/head'
 import Theme from '/@theme/index'
 import { usePrefetch } from './composables/preFetch'
+import { dataSymbol, initData } from './data'
+import { Content } from './components/Content'
+import { ClientOnly } from './components/ClientOnly'
 
 const NotFound = Theme.NotFound || (() => '404 Not Found')
 
 const VitePressApp = {
   name: 'VitePressApp',
   setup() {
-    const siteData = useSiteDataByRoute()
+    const { site } = useData()
 
     // change the language on the HTML element based on the current lang
     onMounted(() => {
       watch(
-        () => siteData.value.lang,
+        () => site.value.lang,
         (lang: string) => {
           document.documentElement.lang = lang
         },
@@ -51,16 +52,23 @@ export function createApp() {
 
   app.provide(RouterSymbol, router)
 
-  const siteDataByRouteRef = useSiteDataByRoute(router.route)
-  const pageDataRef = usePageData(router.route)
+  const data = initData(router.route)
+  app.provide(dataSymbol, data)
 
   if (inBrowser) {
     // dynamically update head tags
-    useUpdateHead(router.route, siteDataByRouteRef)
+    useUpdateHead(router.route, data.site)
   }
 
-  mixinGlobalComputed(app, siteDataRef, siteDataByRouteRef, pageDataRef)
-  mixinGlobalComponents(app)
+  // install global components
+  app.component('Content', Content)
+  app.component('ClientOnly', ClientOnly)
+  app.component(
+    'Debug',
+    import.meta.env.PROD
+      ? () => null
+      : defineAsyncComponent(() => import('./components/Debug.vue'))
+  )
 
   if (Theme.enhanceApp) {
     Theme.enhanceApp({

src/client/app/composables/siteData.ts

@@ -1,3 +1,4 @@
+import { siteDataRef } from './data'
 import { inBrowser } from '/@shared/config'
 
 export { inBrowser }
@@ -9,6 +10,10 @@ export function joinPath(base: string, path: string): string {
   return `${base}${path}`.replace(/\/+/g, '/')
 }
 
+export function withBase(path: string) {
+  return joinPath(siteDataRef.value.base, path)
+}
+
 /**
  * Converts a url path to the corresponding js chunk filename.
  */

src/client/app/composables/siteDataByRoute.ts

@@ -8,14 +8,11 @@ export type { Router, Route } from './app/router'
 export type { Theme, EnhanceAppContext } from './app/theme'
 
 // composables
+export { useData } from './app/data'
 export { useRouter, useRoute } from './app/router'
-export { useSiteData } from './app/composables/siteData'
-export { useSiteDataByRoute } from './app/composables/siteDataByRoute'
-export { usePageData } from './app/composables/pageData'
-export { useFrontmatter } from './app/composables/frontmatter'
 
 // utilities
-export { inBrowser, joinPath } from './app/utils'
+export { inBrowser, joinPath, withBase } from './app/utils'
 
 // components
 export { Content } from './app/components/Content'