feat(client): provide client data aliases and utils (#1645)

Author: meteorlxy

packages/client/src/composables/clientDataUtils.ts

@@ -46,3 +46,12 @@ export const useSiteData = (): SiteDataRef => useClientData().siteData
 
 export const useSiteLocaleData = (): SiteLocaleDataRef =>
   useClientData().siteLocaleData
+
+/* Aliases */
+export const useData = useClientData
+export const useFrontmatter = usePageFrontmatter
+export const useHead = usePageHead
+export const useLang = usePageLang
+export const usePage = usePageData
+export const useSite = useSiteData
+export const useSiteLocale = useSiteLocaleData

packages/client/src/setupGlobalComputed.ts

@@ -103,35 +103,60 @@ export const setupGlobalComputed = (
     routes,
     siteData,
     siteLocaleData,
+
+    /* Aliases */
+    frontmatter: pageFrontmatter,
+    head: pageHead,
+    headTitle: pageHeadTitle,
+    lang: pageLang,
+    page: pageData,
+    site: siteData,
+    siteLocale: siteLocaleData,
   }
   app.provide(clientDataSymbol, clientData)
 
   // provide global helpers
   Object.defineProperties(app.config.globalProperties, {
+    $pageFrontmatter: { get: () => pageFrontmatter.value },
+    $pageHead: { get: () => pageHead.value },
+    $pageHeadTitle: { get: () => pageHeadTitle.value },
+    $pageLang: { get: () => pageLang.value },
+    $pageData: { get: () => pageData.value },
+    $routeLocale: { get: () => routeLocale.value },
+    $withBase: { get: () => withBase },
+
+    /* Aliases */
     $frontmatter: { get: () => pageFrontmatter.value },
     $head: { get: () => pageHead.value },
     $headTitle: { get: () => pageHeadTitle.value },
     $lang: { get: () => pageLang.value },
     $page: { get: () => pageData.value },
-    $routeLocale: { get: () => routeLocale.value },
     $site: { get: () => siteData.value },
     $siteLocale: { get: () => siteLocaleData.value },
-    $withBase: { get: () => withBase },
   })
 
   return clientData
 }
 
 declare module 'vue' {
   export interface ComponentCustomProperties {
+    $pageFrontmatter: PageFrontmatter
+    $pageHead: PageHead
+    $pageHeadTitle: PageHeadTitle
+    $pageLang: PageLang
+    $pageData: PageData
+    $routeLocale: RouteLocale
+    $siteData: SiteData
+    $siteLocaleData: SiteLocaleData
+    $withBase: typeof withBase
+
+    /* Aliases */
     $frontmatter: PageFrontmatter
     $head: PageHead
     $headTitle: PageHeadTitle
     $lang: PageLang
     $page: PageData
-    $routeLocale: RouteLocale
     $site: SiteData
     $siteLocale: SiteLocaleData
-    $withBase: typeof withBase
   }
 }

packages/client/src/types/clientData.ts

@@ -72,4 +72,13 @@ export interface ClientData<
   routes: RoutesRef
   siteData: SiteDataRef
   siteLocaleData: SiteLocaleDataRef
+
+  /* Aliases */
+  frontmatter: PageFrontmatterRef<Frontmatter>
+  head: PageHeadRef
+  headTitle: PageHeadTitleRef
+  lang: PageLangRef
+  page: PageDataRef<Data>
+  site: SiteDataRef
+  siteLocale: SiteLocaleDataRef
 }

packages/client/src/types/index.ts

@@ -1,5 +1,5 @@
 export type * from './clientConfig.js'
 export type * from './clientData.js'
-export type * from './onContentUpdated.js'
 export type * from './createVueAppFunction.js'
+export type * from './onContentUpdated.js'
 export type * from './routes.js'