feat(client): add support for clientData

Author: Mister-Hope

packages/client/src/app.ts

@@ -2,6 +2,7 @@ import { clientConfigs } from '@internal/clientConfigs'
 import { createApp, createSSRApp, h } from 'vue'
 import { RouterView } from 'vue-router'
 import { siteData } from './composables/index.js'
+import { clientDataMap } from './helpers/index.js'
 import { createVueRouter } from './router.js'
 import { setupGlobalComponents } from './setupGlobalComponents.js'
 import { setupGlobalComputed } from './setupGlobalComputed.js'
@@ -50,6 +51,11 @@ export const createVueApp: CreateVueAppFunction = async () => {
     setupDevtools(app, globalComputed)
   }
 
+  // provide client data
+  for (const [key, value] of clientDataMap) {
+    app.provide(key, value)
+  }
+
   // invoke all client enhance
   for (const clientConfig of clientConfigs) {
     await clientConfig.enhance?.({ app, router, siteData })

packages/client/src/composables/clientData.ts

@@ -0,0 +1,15 @@
+import { inject } from 'vue'
+import type { InjectionKey } from 'vue'
+
+export const useClientData = <T = unknown, U extends boolean = false>(
+  key: InjectionKey<T>,
+  required?: U
+): U extends true ? T : T | undefined => {
+  const result = inject(key)
+
+  if (required && !result) {
+    throw new Error(`Can not found ${key} in clientData()`)
+  }
+
+  return <U extends true ? T : T | undefined>result
+}

packages/client/src/composables/index.ts

@@ -1,3 +1,4 @@
+export * from './clientData.js'
 export * from './layouts.js'
 export * from './pageData.js'
 export * from './pageFrontmatter.js'

packages/client/src/helpers/defineClientData.ts

@@ -0,0 +1,13 @@
+import type { InjectionKey } from 'vue'
+
+export const clientDataMap = new Map<InjectionKey<unknown>, unknown>()
+
+/**
+ * A helper function to help you define vuepress client data
+ */
+export const defineClientData = <T = unknown>(
+  key: InjectionKey<T>,
+  data: T
+): void => {
+  clientDataMap.set(key, data)
+}

packages/client/src/helpers/index.ts

@@ -1,2 +1,3 @@
 export * from './defineClientConfig.js'
+export * from './defineClientData.js'
 export * from './withBase.js'