feat(theme): editLink can accept function (vuejs#2058)

jeremyriverain · Mar 11, 2023 · 192708d · 192708d
1 parent 90e924a
commit 192708d
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 11 deletions.
diff --git a/docs/reference/default-theme-edit-link.md b/docs/reference/default-theme-edit-link.md
@@ -14,6 +14,26 @@ export default {
 
 The `pattern` option defines the URL structure for the link, and `:path` is going to be replaced with the page path.
 
+You can also put a pure function that accepts `relativePath` as the argument and returns the URL string.
+
+```js
+export default {
+  themeConfig: {
+    editLink: {
+      pattern: ({ relativePath }) => {
+        if (relativePath.startsWith('packages/')) {
+          return `https://github.com/acme/monorepo/edit/main/${relativePath}`
+        } else {
+          return `https://github.com/acme/monorepo/edit/main/docs/${relativePath}`
+        }
+      }
+    }
+  }
+}
+```
+
+It should not have side-effects nor access anything outside of its scope since it will be serialized and executed in the browser.
+
 By default, this will add the link text "Edit this page" at the bottom of the doc page. You may customize this text by defining the `text` option.
 
 ```js

diff --git a/src/client/app/utils.ts b/src/client/app/utils.ts
@@ -58,6 +58,21 @@ export function pathToFile(path: string): string {
   return pagePath
 }
 
+export function deserializeFunctions(value: any): any {
+  if (Array.isArray(value)) {
+    return value.map(deserializeFunctions)
+  } else if (typeof value === 'object' && value !== null) {
+    return Object.keys(value).reduce((acc, key) => {
+      acc[key] = deserializeFunctions(value[key])
+      return acc
+    }, {} as any)
+  } else if (typeof value === 'string' && value.startsWith('_vp-fn_')) {
+    return new Function(`return ${value.slice(7)}`)()
+  } else {
+    return value
+  }
+}
+
 export let contentUpdatedCallbacks: (() => any)[] = []
 
 /**

diff --git a/src/client/index.ts b/src/client/index.ts
@@ -2,24 +2,31 @@
 // so the user can do `import { useRoute, useSiteData } from 'vitepress'`
 
 // generic types
-export type { Router, Route } from './app/router.js'
 export type { VitePressData } from './app/data.js'
+export type { Route, Router } from './app/router.js'
+
 // theme types
-export type { Theme, EnhanceAppContext } from './app/theme.js'
+export type { EnhanceAppContext, Theme } from './app/theme.js'
+
 // shared types
 export type {
-  PageData,
-  SiteData,
   HeadConfig,
-  Header
+  Header,
+  PageData,
+  SiteData
 } from '../../types/shared.js'
 
 // composables
 export { useData } from './app/data.js'
-export { useRouter, useRoute } from './app/router.js'
+export { useRoute, useRouter } from './app/router.js'
 
 // utilities
-export { inBrowser, withBase, onContentUpdated } from './app/utils.js'
+export {
+  deserializeFunctions,
+  inBrowser,
+  onContentUpdated,
+  withBase
+} from './app/utils.js'
 
 // components
 export { Content } from './app/components/Content.js'
diff --git a/src/client/theme-default/composables/edit-link.ts b/src/client/theme-default/composables/edit-link.ts
@@ -7,7 +7,12 @@ export function useEditLink() {
   return computed(() => {
     const { text = 'Edit this page', pattern = '' } = theme.value.editLink || {}
     const { relativePath } = page.value
-    const url = pattern.replace(/:path/g, relativePath)
+    let url: string
+    if (typeof pattern === 'function') {
+      url = pattern({ relativePath })
+    } else {
+      url = pattern.replace(/:path/g, relativePath)
+    }
 
     return { url, text }
   })

diff --git a/src/node/plugin.ts b/src/node/plugin.ts
@@ -22,6 +22,7 @@ import { staticDataPlugin } from './plugins/staticDataPlugin'
 import { webFontsPlugin } from './plugins/webFontsPlugin'
 import { dynamicRoutesPlugin } from './plugins/dynamicRoutesPlugin'
 import { rewritesPlugin } from './plugins/rewritesPlugin'
+import { serializeFunctions } from './utils/fnSerialize.js'
 
 declare module 'vite' {
   interface UserConfig {
@@ -158,9 +159,11 @@ export async function createVitePressPlugin(
         if (config.command === 'build') {
           data = { ...siteData, head: [] }
         }
-        return `export default JSON.parse(${JSON.stringify(
+        data = serializeFunctions(data)
+        return `import { deserializeFunctions } from 'vitepress/client'
+        export default deserializeFunctions(JSON.parse(${JSON.stringify(
           JSON.stringify(data)
-        )})`
+        )}))`
       }
     },
 

diff --git a/src/node/utils/fnSerialize.ts b/src/node/utils/fnSerialize.ts
@@ -0,0 +1,14 @@
+export function serializeFunctions(value: any): any {
+  if (Array.isArray(value)) {
+    return value.map(serializeFunctions)
+  } else if (typeof value === 'object' && value !== null) {
+    return Object.keys(value).reduce((acc, key) => {
+      acc[key] = serializeFunctions(value[key])
+      return acc
+    }, {} as any)
+  } else if (typeof value === 'function') {
+    return `_vp-fn_${value.toString()}`
+  } else {
+    return value
+  }
+}
diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts
@@ -209,7 +209,7 @@ export namespace DefaultTheme {
      *
      * @example 'https://github.com/vuejs/vitepress/edit/main/docs/:path'
      */
-    pattern: string
+    pattern: string | ((payload: { relativePath: string }) => string)
 
     /**
      * Custom text for edit link.