Public

Project privacy set to public. By default, its content is available to everyone (authenticated or not). Please note that more restrictive permissions might exist on some items.

stable

Clone or download

Read-only

Decrease asset size of mermaid custom element

Download Browse

No need to clutter the bundle size with the whole mermaid and panzoom libs. Thanks to dynamic import we decrease the size from 998K to 5.9K If the mermaid diagram enters the viewport, the mermaid lib is imported. Since there is a spinner on the diagram source code, user knows that something is happening. If the user click on a diagram, then the panzoom lib is imported. The cursor is set to `wait` so that the user don't try to zoom or pan the diagram until it is fully loaded. Part of request #19739: Add support of mermaid js diagrams Change-Id: Ia86545b973209bc9cfcc282312a957350fcaaea1

+80 −35
Nicolas Terray (nterray) 2021-03-15 10:49
Nicolas Terray (nterray) 2021-03-15 11:55
f3ccad70db760c2cb1407fab9607bf4500acb69c
a7c9dcfaabfe45301b54ea36c87c09b1fb1b26ab
git #tuleap/stable/f3ccad70db760c2cb1407fab9607bf4500acb69c

Modified Files

Side by side diff
Inline diff
Name
M src/scripts/mermaid/mermaid-diagram-element.test.ts +13 −23 Go to diff View file
M src/scripts/mermaid/mermaid-diagram-element.ts +16 −12 Go to diff View file
A src/scripts/mermaid/mermaid-render.ts +25 −0 Go to diff View file
A src/scripts/mermaid/panzoom.ts +22 −0 Go to diff View file
M src/themes/common/css/utils/_mermaid.scss +4 −0 Go to diff View file