async compiler

[jcayzac]

Feature request

What problem does this feature solve?

Returning a promise from the function passed to vm.config.renderer.code doesn't work as one would expect.

I wanted to use an async method (crypto.subtle.digest in my mermaid plugin:

hook.mounted(function() {
  const renderer = vm.config.markdown.renderer
  const original = renderer.code || renderer.origin.code

  renderer.code = renderer.origin.code = async function(code, lang) {
    if (lang === 'mermaid') {
      const sha256 = Array.from(new Uint8Array(await window.crypto.subtle.digest('SHA-256', new TextEncoder().encode(code)))).map(b => b.toString(16).padStart(2, '0')).join('')
      const mermaidId = `mermaid-svg-${sha256}`
      return `<figure class="visual diagram mermaid">${mermaid.render(mermaidId, code)}</figure>`
    }
    else return original.apply(this, arguments)
  }
})

But all my code fences are now being replaced, in the HTML document, with:

[object Promise]

What does the proposed API look like?

No change, but the compiler should be promise-aware (so that when the result of calling a function is a promise, it awaits it).

How should this be implemented in your opinion?

I'm not sure how the compiler works at the moment.

Are you willing to work on this yourself?

If time allows, which is probably negative :-/

[anikethsaha]

Thanks for the issue.

This can be a good addition.

cc @docsifyjs/core

[chlunde]

It looks like the new timeline diagram in mermaid requires async rendering: https://github.com/mermaid-js/mermaid/pull/4014#issuecomment-1437671296