From de410082841dc9d6ff00242d78e7498b5c1337ca Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 11 Oct 2022 13:49:20 +0530
Subject: [PATCH] feat: Add lazyload

---
 package.json                   |  3 +--
 src/lib/components/view.svelte | 29 +++++++++++++--------
 src/lib/util/mermaid.ts        | 37 +++++++++++++++++++++++++++
 src/lib/util/state.ts          |  4 +--
 yarn.lock                      | 46 ++++++++++++++++++++--------------
 5 files changed, 85 insertions(+), 34 deletions(-)
 create mode 100644 src/lib/util/mermaid.ts

diff --git a/package.json b/package.json
index cecb46b4..97fc5f88 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/lib/components/view.svelte b/src/lib/components/view.svelte
index 8cf21549..78c6999c 100644
--- a/src/lib/components/view.svelte
+++ b/src/lib/components/view.svelte
@@ -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) {
diff --git a/src/lib/util/mermaid.ts b/src/lib/util/mermaid.ts
new file mode 100644
index 00000000..bc3c78bf
--- /dev/null
+++ b/src/lib/util/mermaid.ts
@@ -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.
+};
diff --git a/src/lib/util/state.ts b/src/lib/util/state.ts
index 9237c44f..b66210a0 100644
--- a/src/lib/util/state.ts
+++ b/src/lib/util/state.ts
@@ -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;
diff --git a/yarn.lock b/yarn.lock
index 3a86aa79..2e89e4dd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -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"