CHANGELOG.md

@@ -1,3 +1,12 @@
+# [2.0.0-rc.7](https://github.com/vuepress/core/compare/v2.0.0-rc.6...v2.0.0-rc.7) (2024-02-06)
+
+
+### Features
+
+* **client:** add useClientData composable ([37f646b](https://github.com/vuepress/core/commit/37f646bf700c38614914450244b77cb82eb8d50f))
+
+
+
 # [2.0.0-rc.6](https://github.com/vuepress/core/compare/v2.0.0-rc.5...v2.0.0-rc.6) (2024-02-05)
 
 

e2e/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuepress/e2e",
-  "version": "2.0.0-rc.6",
+  "version": "2.0.0-rc.7",
   "private": true,
   "type": "module",
   "scripts": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuepress/monorepo",
-  "version": "2.0.0-rc.6",
+  "version": "2.0.0-rc.7",
   "private": true,
   "type": "module",
   "scripts": {

packages/bundler-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuepress/bundler-vite",
-  "version": "2.0.0-rc.6",
+  "version": "2.0.0-rc.7",
   "description": "Bundler vite package of VuePress",
   "keywords": [
     "vuepress-bundler",

packages/bundler-webpack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuepress/bundler-webpack",
-  "version": "2.0.0-rc.6",
+  "version": "2.0.0-rc.7",
   "description": "Bundler webpack package of VuePress",
   "keywords": [
     "vuepress-bundler",

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuepress/cli",
-  "version": "2.0.0-rc.6",
+  "version": "2.0.0-rc.7",
   "description": "CLI package of VuePress",
   "keywords": [
     "vuepress",

packages/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuepress/client",
-  "version": "2.0.0-rc.6",
+  "version": "2.0.0-rc.7",
   "description": "Client package of VuePress",
   "keywords": [
     "vuepress",
@@ -58,7 +58,6 @@
     ],
     "external": [
       "@internal/clientConfigs",
-      "@internal/layoutComponents",
       "@internal/routes",
       "@internal/siteData"
     ],

packages/client/src/app.ts

@@ -1,7 +1,8 @@
 import { clientConfigs } from '@internal/clientConfigs'
 import { createApp, createSSRApp, h } from 'vue'
-import { siteData, usePageLayout } from './composables/index.js'
-import { createVueRouter } from './createVueRouter.js'
+import { usePageLayout } from './composables/index.js'
+import { siteData } from './internal/siteData.js'
+import { createVueRouter } from './router/createVueRouter.js'
 import { setupGlobalComponents } from './setupGlobalComponents.js'
 import { setupGlobalComputed } from './setupGlobalComputed.js'
 import { setupUpdateHead } from './setupUpdateHead.js'
@@ -33,10 +34,10 @@ export const createVueApp: CreateVueAppFunction = async () => {
       )
 
       // get page layout
-      const layout = usePageLayout()
+      const pageLayout = usePageLayout()
 
       // render layout and root components
-      return () => [h(layout.value), rootComponents]
+      return () => [h(pageLayout.value), rootComponents]
     },
   })
 

packages/client/src/components/Content.ts

@@ -1,5 +1,5 @@
 import { computed, defineAsyncComponent, defineComponent, h } from 'vue'
-import { usePageData } from '../composables/index.js'
+import { usePageComponent } from '../composables/index.js'
 import { resolveRoute } from '../router/index.js'
 
 /**
@@ -18,12 +18,13 @@ export const Content = defineComponent({
   },
 
   setup(props) {
-    const pageData = usePageData()
-    const pageComponent = computed(() => {
-      const route = resolveRoute(props.path || pageData.value.path)
+    const pageComponent = usePageComponent()
+    const ContentComponent = computed(() => {
+      if (!props.path) return pageComponent.value
+      const route = resolveRoute(props.path)
       return defineAsyncComponent(() => route.loader().then(({ comp }) => comp))
     })
 
-    return () => h(pageComponent.value)
+    return () => h(ContentComponent.value)
   },
 })

packages/client/src/components/RouteLink.ts

@@ -1,8 +1,8 @@
 import { h } from 'vue'
 import type { FunctionalComponent, HTMLAttributes, VNode } from 'vue'
 import { useRouter } from 'vue-router'
-import { withBase } from '../helpers/index.js'
 import { resolveRoutePath } from '../router/index.js'
+import { withBase } from '../utils/index.js'
 
 /**
  * Forked from https://github.com/vuejs/router/blob/941b2131e80550009e5221d4db9f366b1fea3fd5/packages/router/src/RouterLink.ts#L293

packages/client/src/composables/clientData.ts

@@ -0,0 +1,21 @@
+import type { InjectionKey } from 'vue'
+import { inject } from 'vue'
+import type { ClientData } from '../types/index.js'
+
+/**
+ * Injection key for client data
+ */
+export const clientDataSymbol: InjectionKey<ClientData> = Symbol(
+  __VUEPRESS_DEV__ ? 'clientData' : '',
+)
+
+/**
+ * Returns client data
+ */
+export const useClientData = (): ClientData => {
+  const clientData = inject(clientDataSymbol)
+  if (!clientData) {
+    throw new Error('useClientData() is called without provider.')
+  }
+  return clientData
+}

packages/client/src/composables/clientDataUtils.ts

@@ -0,0 +1,49 @@
+import type {
+  LayoutsRef,
+  PageComponentRef,
+  PageDataRef,
+  PageFrontmatterRef,
+  PageHeadRef,
+  PageLangRef,
+  PageLayoutRef,
+  RedirectsRef,
+  RouteLocaleRef,
+  RoutePathRef,
+  RoutesRef,
+  SiteDataRef,
+  SiteLocaleDataRef,
+} from '../types/index.js'
+import { useClientData } from './clientData.js'
+
+export const useLayouts = (): LayoutsRef => useClientData().layouts
+
+export const usePageComponent = (): PageComponentRef =>
+  useClientData().pageComponent
+
+export const usePageData = <
+  T extends Record<any, any> = Record<never, never>,
+>(): PageDataRef<T> => useClientData().pageData as PageDataRef<T>
+
+export const usePageFrontmatter = <
+  T extends Record<any, any> = Record<string, unknown>,
+>(): PageFrontmatterRef<T> =>
+  useClientData().pageFrontmatter as PageFrontmatterRef<T>
+
+export const usePageHead = (): PageHeadRef => useClientData().pageHead
+
+export const usePageLang = (): PageLangRef => useClientData().pageLang
+
+export const usePageLayout = (): PageLayoutRef => useClientData().pageLayout
+
+export const useRedirects = (): RedirectsRef => useClientData().redirects
+
+export const useRouteLocale = (): RouteLocaleRef => useClientData().routeLocale
+
+export const useRoutePath = (): RoutePathRef => useClientData().routePath
+
+export const useRoutes = (): RoutesRef => useClientData().routes
+
+export const useSiteData = (): SiteDataRef => useClientData().siteData
+
+export const useSiteLocaleData = (): SiteLocaleDataRef =>
+  useClientData().siteLocaleData

packages/client/src/composables/index.ts

@@ -1,12 +1,3 @@
-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 './routeLocale.js'
-export * from './routes.js'
-export * from './siteData.js'
-export * from './siteLocaleData.js'
+export * from './clientData.js'
+export * from './clientDataUtils.js'
 export * from './updateHead.js'