feat: switch to markdown-it-async

Author: antfu

package.json

@@ -84,6 +84,7 @@
     "@rollup/pluginutils": "^5.1.3",
     "@types/markdown-it": "^14.1.2",
     "markdown-it": "^14.1.0",
+    "markdown-it-async": "^0.1.3",
     "unplugin": "^1.16.0"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -3,7 +3,7 @@ import type { MarkdownEnv, ResolvedOptions } from '../types'
 import { toArray, uniq } from '@antfu/utils'
 import { componentPlugin } from '@mdit-vue/plugin-component'
 import { frontmatterPlugin } from '@mdit-vue/plugin-frontmatter'
-import MarkdownIt from 'markdown-it'
+import MarkdownIt from 'markdown-it-async'
 import { preprocessHead } from './head'
 
 const scriptSetupRE = /<\s*script([^>]*)\bsetup\b([^>]*)>([\s\S]*)<\/script>/g
@@ -61,10 +61,10 @@ function extractCustomBlock(html: string, options: ResolvedOptions) {
   return { html, blocks }
 }
 
-export async function createMarkdown(options: ResolvedOptions) {
+export function createMarkdown(options: ResolvedOptions) {
   const isVue2 = options.vueVersion.startsWith('2.')
 
-  const markdown = new MarkdownIt({
+  const markdown = MarkdownIt({
     html: true,
     linkify: true,
     typographer: true,
@@ -91,9 +91,13 @@ export async function createMarkdown(options: ResolvedOptions) {
     markdown.use(plugin, options)
   })
 
-  await options.markdownItSetup(markdown)
+  const setupPromise = (async () => {
+    await options.markdownItSetup(markdown)
+  })()
+
+  return async (id: string, raw: string): Promise<TransformResult> => {
+    await setupPromise
 
-  return (id: string, raw: string): TransformResult => {
     const {
       wrapperClasses,
       wrapperComponent,
@@ -106,7 +110,7 @@ export async function createMarkdown(options: ResolvedOptions) {
     raw = transforms.before?.(raw, id) ?? raw
 
     const env: MarkdownEnv = { id }
-    let html = markdown.render(raw, env)
+    let html = await markdown.renderAsync(raw, env)
     const { excerpt = '', frontmatter: data = null } = env
 
     const wrapperClassesResolved = toArray(

src/core/markdown.ts

@@ -24,7 +24,7 @@ export const unpluginFactory: UnpluginFactory<Options> = (userOptions = {}) => {
     },
     async transform(raw, id) {
       try {
-        return (await markdownToVue)(id, raw)
+        return await markdownToVue(id, raw)
       }
       catch (e: any) {
         this.error(e)
@@ -37,7 +37,7 @@ export const unpluginFactory: UnpluginFactory<Options> = (userOptions = {}) => {
 
         const defaultRead = ctx.read
         ctx.read = async function () {
-          return (await markdownToVue)(ctx.file, await defaultRead()).code
+          return (await markdownToVue(ctx.file, await defaultRead())).code
         }
       },
     },

src/index.ts

@@ -2,7 +2,12 @@ import type { ComponentPluginOptions } from '@mdit-vue/plugin-component'
 import type { FrontmatterPluginOptions } from '@mdit-vue/plugin-frontmatter'
 import type { MarkdownItEnv } from '@mdit-vue/types'
 import type { FilterPattern } from '@rollup/pluginutils'
-import type MarkdownIt from 'markdown-it'
+import type {
+  MarkdownItAsync,
+  MarkdownItAsyncOptions,
+  PluginSimple as MarkdownItPluginSimple,
+  PluginWithOptions as MarkdownItPluginWithOptions,
+} from 'markdown-it-async'
 import type { preprocessHead } from './core/head'
 
 /** a `<meta />` property in HTML is defined with the following name/values */
@@ -147,22 +152,22 @@ export interface Options {
   /**
    * Options passed to Markdown It
    */
-  markdownItOptions?: MarkdownIt.Options
+  markdownItOptions?: MarkdownItAsyncOptions
 
   /**
    * Plugins for Markdown It
    */
   markdownItUses?: (
-    | MarkdownIt.PluginSimple
-    | [MarkdownIt.PluginSimple | MarkdownIt.PluginWithOptions<any>, any]
+    | MarkdownItPluginSimple
+    | [MarkdownItPluginSimple | MarkdownItPluginWithOptions<any>, any]
     | any
   )[]
 
   /**
    * A function providing the Markdown It instance gets the ability to apply custom
    * settings/plugins
    */
-  markdownItSetup?: (MarkdownIt: MarkdownIt) => void | Promise<void>
+  markdownItSetup?: (MarkdownIt: MarkdownItAsync) => void | Promise<void>
 
   /**
    * Class names for wrapper div

src/types.ts

@@ -13,7 +13,7 @@ describe('excerpt', () => {
         },
       },
     })
-    const markdownToVue = await createMarkdown(options)
+    const markdownToVue = createMarkdown(options)
     const md = `---
 title: Hey
 ---
@@ -27,7 +27,7 @@ This is an excerpt which has been rendered to **HTML**.
 - A
 - B
 - C`
-    expect(markdownToVue('', md).code).toMatchSnapshot()
+    expect((await markdownToVue('', md)).code).toMatchSnapshot()
   })
 
   it('raw excerpt', async () => {
@@ -41,7 +41,7 @@ This is an excerpt which has been rendered to **HTML**.
         },
       },
     })
-    const markdownToVue = await createMarkdown(options)
+    const markdownToVue = createMarkdown(options)
     const md = `---
 title: Hey
 ---
@@ -55,6 +55,6 @@ This is an excerpt which is kept as **raw Markdown**.
 - A
 - B
 - C`
-    expect(markdownToVue('', md).code).toMatchSnapshot()
+    expect((await markdownToVue('', md)).code).toMatchSnapshot()
   })
 })

test/excerpt.test.ts

@@ -27,8 +27,9 @@ const frontmatterPreprocess: ResolvedOptions['frontmatterPreprocess'] = (fm) =>
 
 describe('provide bespoke frontmatter processor', () => {
   it('inline markdown is used over default properties', async () => {
-    const parser = await createMarkdown(resolveOptions({ frontmatterPreprocess }))
-    const md = parser('', await readFile('test/fixtures/simple.md', 'utf-8')).code
+    const markdownToVue = createMarkdown(resolveOptions({ frontmatterPreprocess }))
+    const md = (await markdownToVue('', await readFile('test/fixtures/simple.md', 'utf-8'))).code
+
     // Positive tests
     expect(
       md.includes('Hello World'),

test/frontmatterPreprocessor.test.ts

@@ -4,9 +4,9 @@ import { resolveOptions } from '../src/core/options'
 
 describe('transform', async () => {
   const options = resolveOptions({})
-  const markdownToVue = await createMarkdown(options)
+  const markdownToVue = createMarkdown(options)
 
-  it('basic', () => {
+  it('basic', async () => {
     const md = `---
 title: Hey
 ---
@@ -17,39 +17,39 @@ title: Hey
 - B
 - C
 `
-    expect(markdownToVue('', md).code).toMatchSnapshot()
+    expect((await markdownToVue('', md)).code).toMatchSnapshot()
   })
 
-  it('style', () => {
+  it('style', async () => {
     const md = `
 # Hello
 
 <style>h1 { color: red }</style>
 `
-    expect(markdownToVue('', md).code).toMatchSnapshot()
+    expect((await markdownToVue('', md)).code).toMatchSnapshot()
   })
 
-  it('script setup', () => {
+  it('script setup', async () => {
     const md = `
 # Hello
 
 <script setup lang="ts">
 import Foo from './Foo.vue'
 </script>
 `
-    expect(markdownToVue('', md).code).toMatchSnapshot()
+    expect((await markdownToVue('', md)).code).toMatchSnapshot()
   })
 
-  it('exposes frontmatter', () => {
+  it('exposes frontmatter', async () => {
     const md = `---
 title: Hey
 ---
 
 # Hello`
-    expect(markdownToVue('', md).code).toMatchSnapshot()
+    expect((await markdownToVue('', md)).code).toMatchSnapshot()
   })
 
-  it('couldn\'t expose frontmatter', () => {
+  it('couldn\'t expose frontmatter', async () => {
     const md = `---
 title: Hey
 ---
@@ -58,21 +58,21 @@ title: Hey
 defineExpose({ test: 'test'})
 </script>
 `
-    expect(markdownToVue('', md).code).toMatchSnapshot()
+    expect((await markdownToVue('', md)).code).toMatchSnapshot()
   })
 
-  it('escapeCodeTagInterpolation', () => {
+  it('escapeCodeTagInterpolation', async () => {
     const md = `
 <div>{{hello}}</div>
 
 \`\`\`ts
 <div>{{hello}}</div>
 \`\`\`
 `
-    expect(markdownToVue('', md).code).toMatchSnapshot()
+    expect((await markdownToVue('', md)).code).toMatchSnapshot()
   })
 
-  it('frontmatter interpolation', () => {
+  it('frontmatter interpolation', async () => {
     const md = `
 ---
 name: 'My Cool App'
@@ -82,10 +82,10 @@ name: 'My Cool App'
 
 This is {{frontmatter.name}}
 `
-    expect(markdownToVue('', md).code).toMatchSnapshot()
+    expect((await markdownToVue('', md)).code).toMatchSnapshot()
   })
 
-  it('vue directives', () => {
+  it('vue directives', async () => {
     const md = `
 ---
 name: 'My Cool App'
@@ -99,10 +99,10 @@ function onClick() {
 
 <button @click="onClick"></button>
 `
-    expect(markdownToVue('', md).code).toMatchSnapshot()
+    expect((await markdownToVue('', md)).code).toMatchSnapshot()
   })
 
-  it('export keyword frontmatters', () => {
+  it('export keyword frontmatters', async () => {
     const md = `
 ---
 class: 'text'
@@ -111,17 +111,17 @@ default: 'foo'
 
 Hello
 `
-    expect(markdownToVue('', md).code).toMatchSnapshot()
+    expect((await markdownToVue('', md)).code).toMatchSnapshot()
   })
 
-  it('code escape', () => {
+  it('code escape', async () => {
     const md = `
 Hello \`{{ world }}\`
 
 \`\`\`js
 console.log(\`{{ world }}\`)
 \`\`\`
 `
-    expect(markdownToVue('', md).code).toMatchSnapshot()
+    expect((await markdownToVue('', md)).code).toMatchSnapshot()
   })
 })