Fix mermaid v10, bundle all mermaid code in component (#1190)

This PR does two things:

1. fixes using mermaid version `>= 10` from the CDN, by importing the ESM module instead
2. moves script loading code from `head.html` to the mermaid include

I've also added some light documentation to clarify how using mermaid with local paths should work (users should specify a version, and they should only use fully-minified bundles with no local references).

The nice thing about this approach is that it's a breaking change for nobody, and only adds functionality (v10 support). Eventually, we should remove support for mermaid <10, which should make this much easier!

Closes #1206.

## Context

In v10, Mermaid has implemented a few (admittedly, very frustrating to deal with) breaking changes:

1. they've removed CJS support, which is fine, *but*
2. that means that the `dist` they publish to JSDelivr now has a **different URL**: for versions `10.0.0` - `10.0.2`, **they do not have a minified bundle -- you have to load the ESM version with relative imports**
3. and, separately the `init` function has been deprecated

2 is really the issue, and so I've had to go into the code to now load mermaid by ESM by default when the user is on mermaid > v10.

I've tested this with:

- CDN version < 10 (v9)
- CDN version 10
- local path with version < 10 (v9)
- local path with version 10 (new: also loaded as an ESM module)

Separately, I chose to put all the mermaid stuff in one include because:

- I think @pdmosses requested something like this - it's a bit confusing that some mermaid code is *not* in the include, and this makes modular components ... more modular
- from a developer perspective, it's more clear what's happening with mermaid
- mermaid is not render-blocking, so it shouldn't be in the `head` anyways

---------

Co-authored-by: Peter Mosses <18308236+pdmosses@users.noreply.github.com>
This commit is contained in:
Matt Wang
2023-04-12 12:05:51 -07:00
committed by GitHub
parent 786678a6a2
commit 5e5e2438d2
4 changed files with 58 additions and 14 deletions

View File

@@ -82,8 +82,6 @@ search:
# For copy button on code
enable_copy_code_button: true
# To disable support for mermaid diagrams (https://mermaid.js.org),
# comment out the `mermaid` and `version` keys below
# By default, consuming the theme as a gem leaves mermaid disabled; it is opt-in
mermaid:
# Version of mermaid library
@@ -91,8 +89,12 @@ mermaid:
version: "9.1.6"
# Put any additional configuration, such as setting the theme, in _includes/mermaid_config.js
# See also docs/ui-components/code
# To load mermaid from a local file use the `path` key to specify the location of the library instead; e.g.
# To load mermaid from a local library, also use the `path` key to specify the location of the library; e.g.
# for (v10+):
# path: "/assets/js/mermaid.esm.min.mjs"
# for (<v10):
# path: "/assets/js/mermaid.min.js"
# Note: copy both `mermaid.esm.min.mjs` (v10+) or `mermaid.min.js` (<v10) and the associated `.map` file from the specified version of `mermaid/dist` to `/assets/js/`.
# Enable or disable heading anchors
heading_anchors: true