fix(vitepress): add provider logic for route changes

vueuse · May 4, 2022 · 36f6aa6 · 36f6aa6
1 parent 04e8c82
commit 36f6aa6
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 20 deletions.
diff --git a/packages/nuxt/src/runtime/plugin.ts b/packages/nuxt/src/runtime/plugin.ts
@@ -8,6 +8,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   const schemaOrg = createSchemaOrg({
     useRoute,
     head,
+    provider: 'nuxt',
     ...meta.config,
   })
   nuxtApp.vueApp.use(schemaOrg)

diff --git a/packages/schema-org/createSchemaOrg/index.ts b/packages/schema-org/createSchemaOrg/index.ts
@@ -34,16 +34,11 @@ export interface SchemaOrgClient {
   options: CreateSchemaOrgInput
 }
 
-interface VitePressUseRoute {
-  path: string
-  data: {}
-}
-
 export interface FrameworkAugmentationOptions {
   // framework specific helpers
   head?: HeadClient | any
-  useRoute: () => RouteLocationNormalizedLoaded | VitePressUseRoute
-  customRouteMetaResolver?: () => Record<string, unknown>
+  useRoute: () => RouteLocationNormalizedLoaded
+  provider?: 'vitepress' | 'nuxt' | 'vitesse' | string
 }
 
 export type SchemaOrgContext = SchemaOrgClient & InstanceContext
@@ -129,7 +124,7 @@ export const createSchemaOrg = (options: CreateSchemaOrgInput) => {
 
     setupRouteContext(vm: ComponentInternalInstance) {
       const host = options.canonicalHost || ''
-      const route: VitePressUseRoute | RouteLocationNormalizedLoaded = options.useRoute()
+      const route = options.useRoute()
 
       const ctx = reactive<InstanceContext>({
         meta: {},
@@ -140,14 +135,17 @@ export const createSchemaOrg = (options: CreateSchemaOrgInput) => {
 
       watchEffect(() => {
         ctx.canonicalUrl = joinURL(host, route.path)
-        // @ts-expect-error multiple routers
-        ctx.meta = route.meta || {}
-        if (options.customRouteMetaResolver) {
+
+        if (options.provider === 'vitepress') {
+          const vitepressData = (route as typeof route & { data: any }).data
           ctx.meta = {
-            ...ctx.meta,
-            ...options.customRouteMetaResolver(),
+            ...vitepressData,
+            ...vitepressData.frontmatter,
           }
         }
+        else {
+          ctx.meta = route.meta || {}
+        }
       })
 
       // if we have access to the instance

diff --git a/packages/schema-org/useSchemaOrg/index.ts b/packages/schema-org/useSchemaOrg/index.ts
@@ -1,4 +1,4 @@
-import { getCurrentInstance, inject, onBeforeUnmount, watchEffect } from 'vue-demi'
+import { getCurrentInstance, inject, onBeforeUnmount, watch, watchEffect } from 'vue-demi'
 import type { SchemaOrgClient } from '../createSchemaOrg'
 import { PROVIDE_KEY } from '../createSchemaOrg'
 import type { ResolvedRootNodeResolver } from '../utils'
@@ -22,6 +22,14 @@ export function useSchemaOrg(input: Arrayable<UseSchemaOrgInput> = []) {
   const ctx = schemaOrg.setupRouteContext(vm!)
   schemaOrg.addResolvedNodeInput(ctx, input)
 
+  if (schemaOrg.options.provider === 'vitepress') {
+    // @ts-expect-error untyped
+    watch(() => schemaOrg.options.useRoute().data.relativePath, () => {
+      schemaOrg.addResolvedNodeInput(ctx, input)
+      schemaOrg.generateSchema()
+    })
+  }
+
   // when route changes, we'll regenerate the schema
   watchEffect(() => {
     schemaOrg.generateSchema()

diff --git a/packages/vite/src/vitepress.ts b/packages/vite/src/vitepress.ts
@@ -13,13 +13,9 @@ export function installSchemaOrg(ctx: EnhanceAppContext, options: SchemaOrgOptio
 
   const schemaOrg = createSchemaOrg({
     ...options,
-    customRouteMetaResolver: () => {
-      return {
-        ...ctx.router.route.data,
-        ...ctx.router.route.data.frontmatter,
-      }
-    },
+    provider: 'vitepress',
     head,
+    // @ts-expect-error vitepress uses different router which we account for with the provider config above
     useRoute: () => ctx.router.route,
   })
 

diff --git a/packages/vite/src/vitesse.ts b/packages/vite/src/vitesse.ts
@@ -6,6 +6,7 @@ export function installSchemaOrg(ctx: ViteSSGContext, options: SchemaOrgOptions)
   const schemaOrg = createSchemaOrg({
     ...options,
     head: ctx.head,
+    provider: 'vitesse',
     useRoute: () => ctx.router.currentRoute.value,
   })
   ctx.app.use(schemaOrg)