fix: automatically escape vite user defined variables in markdown

vuejs · Jun 28, 2021 · 3cec536 · 3cec536
1 parent 95b0d51
commit 3cec536
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 14 deletions.
diff --git a/src/node/markdownToVue.ts b/src/node/markdownToVue.ts
@@ -11,17 +11,18 @@ import chalk from 'chalk'
 const debug = require('debug')('vitepress:md')
 const cache = new LRUCache<string, MarkdownCompileResult>({ max: 1024 })
 
-interface MarkdownCompileResult {
+export interface MarkdownCompileResult {
   vueSrc: string
   pageData: PageData
   deadLinks: string[]
 }
 
 export function createMarkdownToVueRenderFn(
-  root: string,
   srcDir: string,
   options: MarkdownOptions = {},
-  pages: string[]
+  pages: string[],
+  userDefines: Record<string, any> | undefined,
+  isBuild = false
 ) {
   const md = createMarkdownRenderer(srcDir, options)
   pages = pages.map((p) => slash(p.replace(/\.md$/, '')))
@@ -44,10 +45,23 @@ export function createMarkdownToVueRenderFn(
     const { content, data: frontmatter } = matter(src)
     let { html, data } = md.render(content)
 
-    // avoid env variables being replaced by vite
-    html = html
-      .replace(/import\.meta/g, 'import.<wbr/>meta')
-      .replace(/process\.env/g, 'process.<wbr/>env')
+    if (isBuild) {
+      // avoid env variables being replaced by vite
+      html = html
+        .replace(/\bimport\.meta/g, 'import.<wbr/>meta')
+        .replace(/\bprocess\.env/g, 'process.<wbr/>env')
+
+      // also avoid replacing vite user defines
+      if (userDefines) {
+        const regex = new RegExp(
+          `\\b(${Object.keys(userDefines)
+            .map((key) => key.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&'))
+            .join('|')})`,
+          'g'
+        )
+        html = html.replace(regex, (_) => `${_[0]}<wbr/>${_.slice(1)}`)
+      }
+    }
 
     // validate data.links
     const deadLinks = []

diff --git a/src/node/plugin.ts b/src/node/plugin.ts
@@ -1,7 +1,10 @@
 import path from 'path'
 import { mergeConfig, Plugin, ResolvedConfig } from 'vite'
 import { SiteConfig, resolveSiteData } from './config'
-import { createMarkdownToVueRenderFn } from './markdownToVue'
+import {
+  createMarkdownToVueRenderFn,
+  MarkdownCompileResult
+} from './markdownToVue'
 import { APP_PATH, SITE_DATA_REQUEST_PATH } from './alias'
 import createVuePlugin from '@vitejs/plugin-vue'
 import { slash } from './utils/slash'
@@ -38,12 +41,11 @@ export function createVitePressPlugin(
   ssr = false,
   pageToHashMap?: Record<string, string>
 ): Plugin[] {
-  const markdownToVue = createMarkdownToVueRenderFn(
-    root,
-    srcDir,
-    markdown,
-    pages
-  )
+  let markdownToVue: (
+    src: string,
+    file: string,
+    publicDir: string
+  ) => MarkdownCompileResult
 
   const vuePlugin = createVuePlugin({
     include: [/\.vue$/, /\.md$/],
@@ -59,6 +61,13 @@ export function createVitePressPlugin(
 
     configResolved(resolvedConfig) {
       config = resolvedConfig
+      markdownToVue = createMarkdownToVueRenderFn(
+        srcDir,
+        markdown,
+        pages,
+        config.define,
+        config.command === 'build'
+      )
     },
 
     config() {