Upgrade to Mermaid 10.6.1

Bump the version of Mermaid up to 10.6.1. Per the release notes at
https://github.com/mermaid-js/mermaid/blob/develop/CHANGELOG.md the
render function is async now, so update to the new async render
function.

There's also apparently a change to use ESM, but I didn't seem to have
any trouble with just bumping the version and updating it to use async.
It looks like it's working without any change to how we load it, but I'm
not much of a frontend developer so I could be missing something.
This commit is contained in:
Brian Campbell 2023-10-31 16:47:44 -04:00
parent 40a042e405
commit 441e05b5ee
4 changed files with 19 additions and 20 deletions

View File

@ -249,7 +249,7 @@
</script>
{% endblock %}
{% block scripts %}
<script src="{{ 'assets/javascripts/bundle.81fa17fe.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/bundle.9dafaff0.min.js' | url }}"></script>
{% for script in config.extra_javascript %}
{{ script | script_tag }}
{% endfor %}

View File

@ -69,7 +69,7 @@ let sequence = 0
*/
function fetchScripts(): Observable<void> {
return typeof mermaid === "undefined" || mermaid instanceof Element
? watchScript("https://unpkg.com/mermaid@9.4.3/dist/mermaid.min.js")
? watchScript("https://unpkg.com/mermaid@10.6.1/dist/mermaid.min.js")
: of(undefined)
}
@ -104,7 +104,7 @@ export function mountMermaid(
)
/* Render diagram */
mermaid$.subscribe(() => {
mermaid$.subscribe(async () => {
el.classList.add("mermaid") // Hack: mitigate https://bit.ly/3CiN6Du
const id = `__mermaid_${sequence++}`
@ -113,16 +113,15 @@ export function mountMermaid(
const text = el.textContent
/* Render and inject diagram */
mermaid.mermaidAPI.render(id, text, (svg: string, fn: Function) => {
const { svg, fn } = await mermaid.render(id, text);
/* Create a shadow root and inject diagram */
const shadow = host.attachShadow({ mode: "closed" })
shadow.innerHTML = svg
/* Create a shadow root and inject diagram */
const shadow = host.attachShadow({ mode: "closed" })
shadow.innerHTML = svg
/* Replace code block with diagram and bind functions */
el.replaceWith(host)
fn?.(shadow)
})
/* Replace code block with diagram and bind functions */
el.replaceWith(host)
fn?.(shadow)
})
/* Create and return component */