chore: tweaks

Author: Mister-Hope

packages/client/src/app.ts

@@ -1,6 +1,6 @@
 import { clientConfigs } from '@internal/clientConfigs'
 import { createApp, createSSRApp, h } from 'vue'
-import { useLayout } from './composables/index.js'
+import { useData } from './composables/index.js'
 import { siteData } from './internal/siteData.js'
 import { createVueRouter } from './router/createVueRouter.js'
 import { setupGlobalComponents } from './setupGlobalComponents.js'
@@ -35,10 +35,10 @@ export const createVueApp: CreateVueAppFunction = async () => {
       )
 
       // get page layout
-      const layout = useLayout()
+      const { pageLayout } = useData()
 
       // render layout and root components
-      return () => [h(layout.value), clientRootComponents]
+      return () => [h(pageLayout.value), clientRootComponents]
     },
   })
 

packages/client/src/components/Content.ts

@@ -1,5 +1,5 @@
 import { computed, defineAsyncComponent, defineComponent, h } from 'vue'
-import { useComponent } from '../composables/index.js'
+import { useData } from '../composables/index.js'
 import { resolveRoute } from '../router/index.js'
 
 /**
@@ -17,9 +17,9 @@ export const Content = defineComponent({
   },
 
   setup(props) {
-    const component = useComponent()
+    const { pageComponent } = useData()
     const ContentComponent = computed(() => {
-      if (!props.path) return component.value
+      if (!props.path) return pageComponent.value
       const route = resolveRoute(props.path)
       return defineAsyncComponent(async () =>
         route.loader().then(({ comp }) => comp),

packages/client/src/composables/dataUtils.ts

@@ -17,35 +17,66 @@ import { useData } from './data.js'
 
 // page related
 
+/**
+ * Get page data
+ */
 export const usePage = <
   T extends Record<string, unknown> = Record<string, unknown>,
 >(): PageDataRef<T> => useData<Record<string, unknown>, T>().page
+/**
+ * Get page frontmatter
+ */
 export const useFrontmatter = <
   T extends Record<string, unknown> = Record<string, unknown>,
 >(): PageFrontmatterRef<T> => useData<T>().frontmatter
+/**
+ * Get page head
+ */
 export const useHead = (): PageHeadRef => useData().head
+/**
+ * Get page lang
+ */
 export const useLang = (): PageLangRef => useData().lang
-export const useComponent = (): PageComponentRef => useData().component
-export const useLayout = (): PageLayoutRef => useData().layout
 
 // router related
+/**
+ * Get routes map
+ */
 export const useRoutes = (): RoutesRef => useData().routes
+/**
+ * Get redirect records
+ */
 export const useRedirects = (): RedirectsRef => useData().redirects
 
 // route related
+/**
+ * Get route locale
+ */
 export const useRouteLocale = (): RouteLocaleRef => useData().routeLocale
+/**
+ * Get route path
+ */
 export const useRoutePath = (): RoutePathRef => useData().routePath
 
 // site related
+/**
+ * Get site data
+ */
 export const useSite = (): SiteDataRef => useData().site
+/**
+ * Get site locale data
+ */
 export const useSiteLocale = (): SiteLocaleDataRef => useData().siteLocale
+
+// internal
+/** @deprecated use useData().pageComponent instead */
+export const usePageComponent = (): PageComponentRef => useData().pageComponent
+/** @deprecated use useData().pageLayout instead */
+export const usePageLayout = (): PageLayoutRef => useData().pageLayout
+/** @deprecated use useData().layouts instead */
 export const useLayouts = (): LayoutsRef => useData().layouts
 
 // deprecated
-
-/** @deprecated use useComponent instead */
-export const usePageComponent = (): PageComponentRef => useData().component
-
 /** @deprecated use usePage instead */
 export const usePageData = <
   T extends Record<string, unknown> = Record<string, unknown>,
@@ -54,12 +85,10 @@ export const usePageData = <
 export const usePageFrontmatter = <
   T extends Record<string, unknown> = Record<string, unknown>,
 >(): PageFrontmatterRef<T> => useData<T>().frontmatter
-/** @deprecated use useLayout instead */
-export const usePageLayout = (): PageLayoutRef => useData().layout
-/** @deprecated use useLang instead */
-export const usePageLang = (): PageLangRef => useData().lang
 /** @deprecated use useHead instead */
 export const usePageHead = (): PageHeadRef => useData().head
+/** @deprecated use useLang instead */
+export const usePageLang = (): PageLangRef => useData().lang
 /** @deprecated use useSite instead */
 export const useSiteData = (): SiteDataRef => useData().site
 /** @deprecated use useSiteLocale instead */

packages/client/src/setupGlobalComputed.ts

@@ -69,17 +69,17 @@ export const setupGlobalComputed = (
   )
   const page = computed(() => pageChunk.value.data)
   const frontmatter = computed(() => page.value.frontmatter)
+  const lang = computed(() =>
+    resolvers.resolveLang(page.value, siteLocale.value),
+  )
   const headTitle = computed(() =>
     resolvers.resolveHeadTitle(page.value, siteLocale.value),
   )
   const head = computed(() =>
     resolvers.resolveHead(headTitle.value, frontmatter.value, siteLocale.value),
   )
-  const lang = computed(() =>
-    resolvers.resolveLang(page.value, siteLocale.value),
-  )
-  const component = computed(() => pageChunk.value.comp)
-  const layout = computed(() =>
+  const pageComponent = computed(() => pageChunk.value.comp)
+  const pageLayout = computed(() =>
     resolvers.resolveLayout(page.value, layouts.value),
   )
 
@@ -88,7 +88,6 @@ export const setupGlobalComputed = (
     // site
     site: siteData,
     siteLocale,
-    layouts,
 
     // router
     routes,
@@ -99,12 +98,15 @@ export const setupGlobalComputed = (
     routePath,
 
     // page
-    page,
     frontmatter,
     head,
     lang,
-    component,
-    layout,
+    page,
+
+    // internal
+    layouts,
+    pageComponent,
+    pageLayout,
   }
   app.provide(dataSymbol, clientData)
 
@@ -115,10 +117,10 @@ export const setupGlobalComputed = (
     $siteLocale: { get: () => siteLocale.value },
 
     // page
-    $page: { get: () => page.value },
     $frontmatter: { get: () => frontmatter.value },
     $head: { get: () => head.value },
     $lang: { get: () => lang.value },
+    $page: { get: () => page.value },
 
     // route
     $routeLocale: { get: () => routeLocale.value },

packages/client/src/types/clientData.ts

@@ -61,7 +61,6 @@ export interface Data<
   // site
   site: SiteDataRef
   siteLocale: SiteLocaleDataRef
-  layouts: LayoutsRef
 
   // routes
   routes: RoutesRef
@@ -72,12 +71,15 @@ export interface Data<
   routeLocale: RouteLocaleRef
 
   // page
-  page: PageDataRef<Page>
   frontmatter: PageFrontmatterRef<Frontmatter>
   head: PageHeadRef
   lang: PageLangRef
-  component: PageComponentRef
-  layout: PageLayoutRef
+  page: PageDataRef<Page>
+
+  // internal
+  layouts: LayoutsRef
+  pageComponent: PageComponentRef
+  pageLayout: PageLayoutRef
 }
 /** @deprecated use Data instead */
 export type ClientData = Data