refactor: organize app index related files

src/client/app/components/Content.ts

@@ -5,10 +5,12 @@ import { usePrefetch } from '../composables/preFetch'
 export const Content = {
   setup() {
     const route = useRoute()
+
     if (process.env.NODE_ENV === 'production') {
-      // in prod mode, enable intersectionObserver based pre-fetch.
+      // in prod mode, enable intersectionObserver based pre-fetch
       usePrefetch()
     }
+
     return () => (route.component ? h(route.component) : null)
   }
 }

src/client/app/composables/pageData.ts

@@ -1,8 +1,11 @@
-import { computed } from 'vue'
+import { Ref, computed } from 'vue'
-import { useRoute } from '../router'
+import { PageData } from '/@types/shared'
+import { Route, useRoute } from '../router'
 
-export function usePageData() {
+export type PageDataRef = Ref<PageData>
-  const route = useRoute()
 
-  return computed(() => route.data)
+export function usePageData(route?: Route) {
+  const r = route || useRoute()
+
+  return computed(() => r.data)
 }

src/client/app/composables/siteData.ts

@@ -1,8 +1,6 @@
 import serialized from '@siteData'
-import { ref, readonly, Ref } from 'vue'
+import { SiteData } from '/@types/shared'
-import { SiteData } from '../../../../types/shared'
+import { Ref, ref, readonly } from 'vue'
-
-const parse = (data: string) => readonly(JSON.parse(data)) as SiteData
 
 export type SiteDataRef<T = any> = Ref<SiteData<T>>
 
@@ -12,6 +10,10 @@ export function useSiteData<T = any>() {
   return siteDataRef as Ref<SiteData<T>>
 }
 
+function parse(data: string): SiteData {
+  return readonly(JSON.parse(data)) as SiteData
+}
+
 // hmr
 if (import.meta.hot) {
   import.meta.hot!.acceptDeps('/@siteData', (m) => {

src/client/app/composables/siteDataByRoute.ts

@@ -1,10 +1,12 @@
 import { computed } from 'vue'
 import { resolveSiteDataByRoute } from '/@shared/config'
 import { siteDataRef } from './siteData'
-import { useRoute } from '../router'
+import { Route, useRoute } from '../router'
+
+export function useSiteDataByRoute(route?: Route) {
+  const r = route || useRoute()
 
-export function useSiteDataByRoute(route = useRoute()) {
   return computed(() => {
-    return resolveSiteDataByRoute(siteDataRef.value, route.path)
+    return resolveSiteDataByRoute(siteDataRef.value, r.path)
   })
 }

src/client/app/index.ts

@@ -1,11 +1,11 @@
 import { createApp as createClientApp, createSSRApp } from 'vue'
 import { inBrowser, pathToFile } from './utils'
 import { createRouter, RouterSymbol } from './router'
+import { mixinGlobalComputed, mixinGlobalComponents } from './mixin'
 import { siteDataRef } from './composables/siteData'
 import { useSiteDataByRoute } from './composables/siteDataByRoute'
+import { usePageData } from './composables/PageData'
 import { useUpdateHead } from './composables/head'
-import { Content } from './components/Content'
-import Debug from './components/Debug.vue'
 import Theme from '/@theme/index'
 
 const NotFound = Theme.NotFound || (() => '404 Not Found')
@@ -58,58 +58,17 @@ export function createApp() {
 
   app.provide(RouterSymbol, router)
 
-  app.component('Content', Content)
+  mixinGlobalComponents(app)
-  app.component(
-    'Debug',
-    process.env.NODE_ENV === 'production' ? () => null : Debug
-  )
 
   const siteDataByRouteRef = useSiteDataByRoute(router.route)
+  const pageDataRef = usePageData(router.route)
 
   if (inBrowser) {
     // dynamically update head tags
     useUpdateHead(router.route, siteDataByRouteRef)
   }
 
-  Object.defineProperties(app.config.globalProperties, {
+  mixinGlobalComputed(app, siteDataRef, siteDataByRouteRef, pageDataRef)
-    $site: {
-      get() {
-        return siteDataRef.value
-      }
-    },
-    $siteByRoute: {
-      get() {
-        return siteDataByRouteRef.value
-      }
-    },
-    $themeConfig: {
-      get() {
-        return siteDataByRouteRef.value.themeConfig
-      }
-    },
-    $page: {
-      get() {
-        return router.route.data
-      }
-    },
-    $frontmatter: {
-      get() {
-        return router.route.data.frontmatter
-      }
-    },
-    $title: {
-      get() {
-        return router.route.data.title || siteDataByRouteRef.value.title
-      }
-    },
-    $description: {
-      get() {
-        return (
-          router.route.data.description || siteDataByRouteRef.value.description
-        )
-      }
-    }
-  })
 
   if (Theme.enhanceApp) {
     Theme.enhanceApp({
@@ -124,6 +83,7 @@ export function createApp() {
 
 if (inBrowser) {
   const { app, router } = createApp()
+
   // wait unitl page component is fetched before mounting
   router.go().then(() => {
     app.mount('#app')

src/client/app/mixin.ts

@@ -0,0 +1,64 @@
+import { App } from 'vue'
+import { SiteDataRef } from './composables/siteData'
+import { PageDataRef } from './composables/PageData'
+import { Content } from './components/Content'
+import Debug from './components/Debug.vue'
+
+export function mixinGlobalComputed(
+  app: App,
+  site: SiteDataRef,
+  siteByRoute: SiteDataRef,
+  page: PageDataRef
+): void {
+  Object.defineProperties(app.config.globalProperties, {
+    $site: {
+      get() {
+        return site.value
+      }
+    },
+
+    $siteByRoute: {
+      get() {
+        return siteByRoute.value
+      }
+    },
+
+    $themeConfig: {
+      get() {
+        return siteByRoute.value.themeConfig
+      }
+    },
+
+    $page: {
+      get() {
+        return page
+      }
+    },
+
+    $frontmatter: {
+      get() {
+        return page.value.frontmatter
+      }
+    },
+
+    $title: {
+      get() {
+        return page.value.title || siteByRoute.value.title
+      }
+    },
+
+    $description: {
+      get() {
+        return page.value.description || siteByRoute.value.description
+      }
+    }
+  })
+}
+
+export function mixinGlobalComponents(app: App) {
+  const isProd = process.env.NODE_ENV === 'production'
+
+  app.component('Content', Content)
+
+  app.component('Debug', isProd ? () => null : Debug)
+}