forkless/mermaid-live-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add lazyload

Browse Source
This commit is contained in:
Sidharth Vinod
2022-10-11 13:49:20 +05:30
parent 1ea94189d1
commit de41008284
5 changed files with 85 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -2
View File
@@ -26,7 +26,6 @@
"@sveltejs/kit": "1.0.0-next.511",
"@testing-library/jest-dom": "5.16.5",
"@testing-library/svelte": "3.2.2",
"@types/mermaid": "9.1.0",
"@types/pako": "2.0.0",
"@types/uuid": "8.3.4",
"@typescript-eslint/eslint-plugin": "5.39.0",
@@ -69,7 +68,7 @@
"analytics-plugin-plausible": "0.0.6",
"daisyui": "2.31.0",
"js-base64": "3.7.2",
"mermaid": "9.1.7",
"mermaid": "9.2.0-rc3",
"moment": "2.29.4",
"monaco-editor": "0.34.0",
"monaco-mermaid": "1.0.6",
src/lib/components/view.svelte
+18 -11
View File
@@ -1,11 +1,11 @@
<script lang="ts">
import { inputStateStore, stateStore, updateCodeStore } from '$lib/util/state';
import { onMount } from 'svelte';
import mermaid from 'mermaid';
import panzoom from 'svg-pan-zoom';
import type { State, ValidatedState } from '$lib/types';
import { logEvent } from '$lib/util/stats';
import { cmdKey } from '$lib/util/util';
import { render as renderDiagram } from '$lib/util/mermaid';
let code = '';
let config = '';
@@ -50,7 +50,7 @@
});
};
const handleStateChange = (state: ValidatedState) => {
const handleStateChange = async (state: ValidatedState) => {
if (state.error !== undefined) {
error = true;
return;
@@ -72,16 +72,23 @@
panZoomEnabled = state.panZoom;
const scroll = view.parentElement.scrollTop;
delete container.dataset.processed;
mermaid.initialize(Object.assign({}, JSON.parse(state.mermaid)));
mermaid.render('graph-div', code, (svgCode) => {
if (svgCode.length > 0) {
handlePanZoom(state);
container.innerHTML = svgCode;
const graphDiv = document.getElementById('graph-div');
graphDiv.setAttribute('height', '100%');
graphDiv.style.maxWidth = '100%';
await renderDiagram(
Object.assign({}, JSON.parse(state.mermaid)),
code,
'graph-div',
(svgCode, bindFunctions) => {
if (svgCode.length > 0) {
handlePanZoom(state);
container.innerHTML = svgCode;
const graphDiv = document.getElementById('graph-div');
graphDiv.setAttribute('height', '100%');
graphDiv.style.maxWidth = '100%';
if (bindFunctions) {
bindFunctions(graphDiv);
}
}
}
});
);
view.parentElement.scrollTop = scroll;
error = false;
} else if (manualUpdate) {
src/lib/util/mermaid.ts
+37
View File
@@ -0,0 +1,37 @@
import mermaid from 'mermaid';
// We need to export MermaidConfig and all related types from mermaid.
import type { MermaidConfig } from 'mermaid/dist/config.type';
const init = (async () => {
mermaid.initialize({
lazyLoadedDiagrams: [
// We should make SRI mandatory for all lazy-loaded diagrams.
'https://unpkg.com/@mermaid-js/mermaid-mindmap@9.2.0-rc2/dist/mermaid-mindmap-detector.esm.mjs'
]
});
// Lazy loading should be moved from init to initialize.
await mermaid.init();
})();
export const render = async (
config: MermaidConfig,
code: string,
id: string,
callback: Parameters<typeof mermaid.render>[2]
): Promise<void> => {
await init;
// Should be able to call this multiple times without any issues.
// await mermaid.initialize({
// ...config,
// lazyLoadedDiagrams: [
// // We should make SRI mandatory for all lazy-loaded diagrams.
// 'https://unpkg.com/@mermaid-js/mermaid-mindmap@9.2.0-rc2/dist/mermaid-mindmap-detector.esm.mjs'
// ]
// });
await mermaid.mermaidAPI.renderAsync(id, code, callback);
};
// export const parse = mermaid.parse;
export const parse = (_: string) => {
// Parse doesn't work.
};
src/lib/util/state.ts
+2 -2
View File
@@ -3,7 +3,7 @@ import { persist, localStorage } from './persist';
import { saveStatistics, countLines } from './stats';
import { serializeState, deserializeState } from './serde';
import { cmdKey } from './util';
import mermaid from 'mermaid';
import { parse } from './mermaid';
import type { Readable } from 'svelte/store';
import type { MarkerData, State, ValidatedState } from '$lib/types';
@@ -54,7 +54,7 @@ export const stateStore: Readable<ValidatedState> = derived([inputStateStore], (
// No changes should be done to fields part of `state`.
try {
processed.serialized = serializeState(state);
mermaid.parse(state.code);
parse(state.code);
JSON.parse(state.mermaid);
} catch (e) {
processed.error = e;
yarn.lock
+27 -19
View File
@@ -410,11 +410,6 @@
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
"@types/mermaid@9.1.0":
version "9.1.0"
resolved "https://registry.yarnpkg.com/@types/mermaid/-/mermaid-9.1.0.tgz#e9ba511d8a6793749d6be84f86325f0f58553154"
integrity sha512-rc8QqhveKAY7PouzY/p8ljS+eBSNCv7o79L97RSub/Ic2SQ34ph1Ng3s8wFLWVjvaEt6RLOWtSCsgYWd95NY8A==
"@types/node@*":
version "15.0.2"
resolved "https://registry.npmjs.org/@types/node/-/node-15.0.2.tgz"
@@ -2733,6 +2728,11 @@ extsprintf@^1.2.0:
resolved "https://registry.npmjs.org/extsprintf/-/extsprintf-1.4.0.tgz"
integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
fast-clone@^1.5.13:
version "1.5.13"
resolved "https://registry.yarnpkg.com/fast-clone/-/fast-clone-1.5.13.tgz#7fe17542ae1c872e71bf80d177d00c11f51c2ea7"
integrity sha512-0ez7coyFBQFjZtId+RJqJ+EQs61w9xARfqjqK0AD9vIUkSxWD4HvPt80+5evebZ1tTnv1GYKrPTipx7kOW5ipA==
fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
version "3.1.3"
resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
@@ -3665,20 +3665,23 @@ merge2@^1.3.0, merge2@^1.4.1:
resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"
integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
mermaid@9.1.7:
version "9.1.7"
resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-9.1.7.tgz#e24de9b2d36c8cb25a09d72ffce966941b24bd6e"
integrity sha512-MRVHXy5FLjnUQUG7YS3UN9jEN6FXCJbFCXVGJQjVIbiR6Vhw0j/6pLIjqsiah9xoHmQU6DEaKOvB3S1g/1nBPA==
mermaid@9.2.0-rc3:
version "9.2.0-rc3"
resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-9.2.0-rc3.tgz#7f874e7622c3df925cd8ea396029eeed82a99f9c"
integrity sha512-nCceaua6VaBwrC973/UeHDvJQ+CA2q9SKaiAOySX9u/3OcqJxoRzBIL1F5rIsNrHFYpEOQEeKM9Jrs2x2n3ZWA==
dependencies:
"@braintree/sanitize-url" "^6.0.0"
d3 "^7.0.0"
dagre "^0.8.5"
dagre-d3 "^0.6.4"
dompurify "2.4.0"
fast-clone "^1.5.13"
graphlib "^2.1.8"
khroma "^2.0.0"
moment-mini "2.24.0"
stylis "^4.0.10"
lodash "^4.17.21"
moment-mini "^2.24.0"
non-layered-tidy-tree-layout "^2.0.2"
stylis "^4.1.2"
micromatch@^4.0.4, micromatch@^4.0.5:
version "4.0.5"
@@ -3739,10 +3742,10 @@ mkdirp@^0.5.1, mkdirp@~0.5.1:
dependencies:
minimist "^1.2.5"
moment-mini@2.24.0:
version "2.24.0"
resolved "https://registry.yarnpkg.com/moment-mini/-/moment-mini-2.24.0.tgz#fa68d98f7fe93ae65bf1262f6abb5fb6983d8d18"
integrity sha512-9ARkWHBs+6YJIvrIp0Ik5tyTTtP9PoV0Ssu2Ocq5y9v8+NOOpWiRshAp8c4rZVWTOe+157on/5G+zj5pwIQFEQ==
moment-mini@^2.24.0:
version "2.29.4"
resolved "https://registry.yarnpkg.com/moment-mini/-/moment-mini-2.29.4.tgz#cbbcdc58ce1b267506f28ea6668dbe060a32758f"
integrity sha512-uhXpYwHFeiTbY9KSgPPRoo1nt8OxNVdMVoTBYHfSEKeRkIkwGpO+gERmhuhBtzfaeOyTkykSrm2+noJBgqt3Hg==
moment@2.29.4:
version "2.29.4"
@@ -3812,6 +3815,11 @@ node-releases@^2.0.6:
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.6.tgz#8a7088c63a55e493845683ebf3c828d8c51c5503"
integrity sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==
non-layered-tidy-tree-layout@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/non-layered-tidy-tree-layout/-/non-layered-tidy-tree-layout-2.0.2.tgz#57d35d13c356643fc296a55fb11ac15e74da7804"
integrity sha512-gkXMxRzUH+PB0ax9dUN0yYF0S25BqeAYqhgMaLUFmpXLEk7Fcu8f4emJuOAY0V8kjDICxROIKsTAKsV/v355xw==
nopt@~4.0.1:
version "4.0.3"
resolved "https://registry.npmjs.org/nopt/-/nopt-4.0.3.tgz"
@@ -4906,10 +4914,10 @@ stylehacks@^5.1.0:
browserslist "^4.16.6"
postcss-selector-parser "^6.0.4"
stylis@^4.0.10:
version "4.0.10"
resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240"
integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==
stylis@^4.1.2:
version "4.1.2"
resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.2.tgz#870b3c1c2275f51b702bb3da9e94eedad87bba41"
integrity sha512-Nn2CCrG2ZaFziDxaZPN43CXqn+j7tcdjPFCkRBkFue8QYXC2HdEwnw5TCBo4yQZ2WxKYeSi0fdoOrtEqgDrXbA==
supports-color@^2.0.0:
version "2.0.0"