refactor: make MarkdowRenderer type compatible with MarkdownIt

src/node/markdown/markdown.ts

@@ -39,15 +39,10 @@ export interface MarkdownParsedData {
   headers?: Header[]
 }
 
-export interface MarkdownRenderer {
+export interface MarkdownRenderer extends MarkdownIt {
   __path: string
   __relativePath: string
   __data: MarkdownParsedData
-  render: (
-    src: string,
-    path: string,
-    relatiovePath: string
-  ) => { html: string; data: any }
 }
 
 export type { Header }
@@ -100,20 +95,5 @@ export const createMarkdownRenderer = (
     md.use(lineNumberPlugin)
   }
 
-  const wrappedMd = md as any as MarkdownRenderer
-
-  // wrap render so that we can return both the html and extracted data.
-  const render = md.render
-  wrappedMd.render = (src, path, relativePath) => {
-    wrappedMd.__data = {}
-    wrappedMd.__path = path
-    wrappedMd.__relativePath = relativePath
-    const html = render.call(md, src)
-    return {
-      html,
-      data: wrappedMd.__data
-    }
-  }
-
-  return wrappedMd
+  return md as MarkdownRenderer
 }

src/node/markdown/plugins/header.ts

@@ -1,7 +1,7 @@
-import MarkdownIt from 'markdown-it'
-import { MarkdownParsedData } from '../markdown'
+import { MarkdownRenderer } from '../markdown'
 import { deeplyParseHeader } from '../../utils/parseHeader'
 import { slugify } from './slugify'
+import MarkdownIt from 'markdown-it'
 
 export const extractHeaderPlugin = (md: MarkdownIt, include = ['h2', 'h3']) => {
   md.renderer.rules.heading_open = (tokens, i, options, env, self) => {
@@ -10,7 +10,7 @@ export const extractHeaderPlugin = (md: MarkdownIt, include = ['h2', 'h3']) => {
       const title = tokens[i + 1].content
       const idAttr = token.attrs!.find(([name]) => name === 'id')
       const slug = idAttr && idAttr[1]
-      const data = (md as any).__data as MarkdownParsedData
+      const data = (md as MarkdownRenderer).__data
       const headers = data.headers || (data.headers = [])
       headers.push({
         level: parseInt(token.tag.slice(1), 10),

src/node/markdown/plugins/hoist.ts

@@ -1,5 +1,5 @@
 import MarkdownIt from 'markdown-it'
-import { MarkdownParsedData } from '../markdown'
+import { MarkdownRenderer } from '../markdown'
 
 // hoist <script> and <style> tags out of the returned html
 // so that they can be placed outside as SFC blocks.
@@ -8,7 +8,7 @@ export const hoistPlugin = (md: MarkdownIt) => {
 
   md.renderer.rules.html_block = (tokens, idx) => {
     const content = tokens[idx].content
-    const data = (md as any).__data as MarkdownParsedData
+    const data = (md as MarkdownRenderer).__data
     const hoistedTags = data.hoistedTags || (data.hoistedTags = [])
     if (RE.test(content.trim())) {
       hoistedTags.push(content)

src/node/markdown/plugins/link.ts

@@ -3,7 +3,7 @@
 // 2. normalize internal links to end with `.html`
 
 import MarkdownIt from 'markdown-it'
-import { MarkdownParsedData } from '../markdown'
+import { MarkdownRenderer } from '../markdown'
 import { URL } from 'url'
 import { EXTERNAL_URL_RE } from '../../shared'
 
@@ -81,7 +81,7 @@ export const linkPlugin = (
   }
 
   function pushLink(link: string) {
-    const data = (md as any).__data as MarkdownParsedData
+    const data = (md as MarkdownRenderer).__data
     const links = data.links || (data.links = [])
     links.push(link)
   }

src/node/markdownToVue.ts

@@ -65,7 +65,14 @@ export function createMarkdownToVueRenderFn(
     })
 
     const { content, data: frontmatter } = matter(src)
-    let { html, data } = md.render(content, file, relativePath)
+
+    // reset state before render
+    md.__path = file
+    md.__relativePath = relativePath
+    md.__data = {}
+
+    let html = md.render(content)
+    const data = md.__data
 
     if (isBuild) {
       // avoid env variables being replaced by vite
@@ -125,7 +132,7 @@ export function createMarkdownToVueRenderFn(
       title: inferTitle(frontmatter, content),
       description: inferDescription(frontmatter),
       frontmatter,
-      headers: data.headers,
+      headers: data.headers || [],
       relativePath,
       // TODO use git timestamp?
       lastUpdated: Math.round(fs.statSync(file).mtimeMs)