From 449dead2e591df1e8cbe5a1a5fd94d4c6a57d3bf Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 19 Oct 2022 00:27:36 +0530
Subject: [PATCH] fix: Race condition with async queue.

---
 package.json                   |  2 +
 src/lib/components/view.svelte | 46 +++++++++++---------
 src/lib/util/mermaid.ts        | 47 +++++++++++++++-----
 src/lib/util/state.ts          | 79 ++++++++++++++--------------------
 yarn.lock                      | 10 +++++
 5 files changed, 107 insertions(+), 77 deletions(-)

diff --git a/package.json b/package.json
index 59dcf517..f45e189a 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
 		"@sveltejs/kit": "1.0.0-next.516",
 		"@testing-library/jest-dom": "5.16.5",
 		"@testing-library/svelte": "3.2.2",
+		"@types/async": "^3.2.15",
 		"@types/pako": "2.0.0",
 		"@types/uuid": "8.3.4",
 		"@typescript-eslint/eslint-plugin": "5.40.1",
@@ -67,6 +68,7 @@
 	"dependencies": {
 		"analytics": "0.8.1",
 		"analytics-plugin-plausible": "0.0.6",
+		"async": "^3.2.4",
 		"daisyui": "2.31.0",
 		"js-base64": "3.7.2",
 		"mermaid": "9.2.0-rc6",
diff --git a/src/lib/components/view.svelte b/src/lib/components/view.svelte
index a8063cd8..8135b170 100644
--- a/src/lib/components/view.svelte
+++ b/src/lib/components/view.svelte
@@ -5,8 +5,8 @@
 	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';
-
+	import { render as renderDiagram, init as mermaidInit } from '$lib/util/mermaid';
+	const init = mermaidInit();
 	let code = '';
 	let config = '';
 	let container: HTMLDivElement;
@@ -50,7 +50,7 @@
 		});
 	};
 
-	const handleStateChange = async (state: ValidatedState) => {
+	const handleStateChange = (state: ValidatedState) => {
 		if (state.error !== undefined) {
 			error = true;
 			return;
@@ -72,11 +72,11 @@
 				panZoomEnabled = state.panZoom;
 				const scroll = view.parentElement.scrollTop;
 				delete container.dataset.processed;
-				await renderDiagram(
-					Object.assign({}, JSON.parse(state.mermaid)),
+				renderDiagram({
+					config: Object.assign({}, JSON.parse(state.mermaid)),
 					code,
-					'graph-div',
-					(svgCode, bindFunctions) => {
+					id: 'graph-div',
+					callback: (svgCode, bindFunctions) => {
 						if (svgCode.length > 0) {
 							handlePanZoom(state);
 							container.innerHTML = svgCode;
@@ -88,7 +88,7 @@
 							}
 						}
 					}
-				);
+				});
 				view.parentElement.scrollTop = scroll;
 				error = false;
 			} else if (manualUpdate) {
@@ -103,8 +103,8 @@
 	};
 
 	onMount(() => {
-		stateStore.subscribe(async (state) => {
-			await handleStateChange(state);
+		stateStore.subscribe((state) => {
+			handleStateChange(state);
 		});
 		window.addEventListener('resize', () => {
 			if ($stateStore.panZoom && pzoom) {
@@ -114,19 +114,23 @@
 	});
 </script>
 
-{#if error && $stateStore.error instanceof Error}
-	<div class="p-2 text-red-600" id="errorContainer">{$stateStore.error}</div>
-{/if}
+{#await init}
+	Loading...
+{:then}
+	{#if error && $stateStore.error instanceof Error}
+		<div class="p-2 text-red-600" id="errorContainer">{$stateStore.error}</div>
+	{/if}
 
-{#if outOfSync}
-	<div class="absolute w-full p-2 z-10 text-yellow-600 bg-base-100 bg-opacity-80 text-center">
-		Diagram out of sync. <br />
-		Press <i class="fas fa-sync" /> (Sync button) or <kbd>{cmdKey} + Enter</kbd> to sync.
+	{#if outOfSync}
+		<div class="absolute w-full p-2 z-10 text-yellow-600 bg-base-100 bg-opacity-80 text-center">
+			Diagram out of sync. <br />
+			Press <i class="fas fa-sync" /> (Sync button) or <kbd>{cmdKey} + Enter</kbd> to sync.
+		</div>
+	{/if}
+	<div id="view" bind:this={view} class="p-2 h-full" class:error class:outOfSync>
+		<div id="container" bind:this={container} class="h-full overflow-auto" class:hide />
 	</div>
-{/if}
-<div id="view" bind:this={view} class="p-2 h-full" class:error class:outOfSync>
-	<div id="container" bind:this={container} class="h-full overflow-auto" class:hide />
-</div>
+{/await}
 
 <style>
 	#view {
diff --git a/src/lib/util/mermaid.ts b/src/lib/util/mermaid.ts
index 15ae08e9..0d009c72 100644
--- a/src/lib/util/mermaid.ts
+++ b/src/lib/util/mermaid.ts
@@ -2,6 +2,8 @@ import mermaid from 'mermaid';
 // We need to export MermaidConfig and all related types from mermaid.
 import type { MermaidConfig } from 'mermaid/dist/config.type';
 import { env } from './env';
+import queue from 'async/queue';
+import type { QueueObject } from 'async';
 const { mermaidBaseURL, mermaidCDNUrl, useLocalMermaid } = env;
 
 const getDiagramURL = (name: string, version: string): string => {
@@ -11,7 +13,6 @@ const getDiagramURL = (name: string, version: string): string => {
 	return `${mermaidCDNUrl}/${name}@${version}/dist/${name}-detector.esm.mjs`;
 };
 
-console.log(mermaid);
 const initialize = mermaid.initializeAsync({
 	logLevel: 0,
 	lazyLoadedDiagrams: [getDiagramURL('mermaid-mindmap', '9.2.0-rc4')],
@@ -22,13 +23,35 @@ export const init = async () => {
 	await initialize;
 };
 
-export const render = async (
-	config: MermaidConfig,
-	code: string,
-	id: string,
-	callback: Parameters<typeof mermaid.render>[2]
-): Promise<void> => {
-	await init();
+interface RenderPayload {
+	config: MermaidConfig;
+	code: string;
+	id: string;
+	callback: Parameters<typeof mermaid.render>[2];
+}
+
+interface ParsePayload {
+	code: string;
+}
+interface MermaidTask {
+	action: 'render' | 'parse';
+	payload: RenderPayload | ParsePayload;
+}
+
+const mermaidQueue: QueueObject<MermaidTask> = queue(async (task: MermaidTask) => {
+	console.log('adding ', task);
+	if (task.action === 'render') {
+		const { config, code, id, callback } = task.payload as RenderPayload;
+		await mermaid.mermaidAPI.renderAsync(id, code, callback);
+	}
+	console.log('done', task);
+}, 1);
+
+mermaidQueue.error(function (err, task) {
+	console.error('task experienced an error', task, err);
+});
+
+export const render = async (payload: RenderPayload): Promise<void> => {
 	// Should be able to call this multiple times without any issues.
 	// await mermaid.initialize({
 	// 	...config,
@@ -37,8 +60,12 @@ export const render = async (
 	// 		'https://unpkg.com/@mermaid-js/mermaid-mindmap@9.2.0-rc2/dist/mermaid-mindmap-detector.esm.mjs'
 	// 	]
 	// });
-	console.log('Rendering', code);
-	await mermaid.mermaidAPI.renderAsync(id, code, callback);
+	// console.log('Rendering', code);
+	// mermaid.mermaidAPI.render(id, code, callback);
+	await mermaidQueue.push({
+		action: 'render',
+		payload
+	});
 };
 
 export const parse = async (code: string): Promise<boolean> => {
diff --git a/src/lib/util/state.ts b/src/lib/util/state.ts
index 13114da2..b612a4e9 100644
--- a/src/lib/util/state.ts
+++ b/src/lib/util/state.ts
@@ -44,53 +44,41 @@ const urlParseFailedState = `graph TD
 export const inputStateStore = persist(writable(defaultState), localStorage(), 'codeStore');
 
 // All internal reads should be done via stateStore, but it should not be persisted/shared externally.
-export const stateStore: Readable<ValidatedState> = derived(
-	[inputStateStore],
-	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-	// @ts-ignore
-	async ([state], set) => {
-		const processed: ValidatedState = {
-			...state,
-			serialized: '',
-			errorMarkers: [],
-			error: undefined,
-			editorMode: state.editorMode ?? 'code'
-		};
-
-		// No changes should be done to fields part of `state`.
-		try {
-			processed.serialized = serializeState(state);
-			await parse(state.code);
-			JSON.parse(state.mermaid);
-		} catch (e) {
-			processed.error = e;
-			console.error(e);
-			if (e.hash) {
-				try {
-					const marker: MarkerData = {
-						severity: 8, // Error
-						startLineNumber: e.hash.loc.first_line,
-						startColumn: e.hash.loc.first_column,
-						endLineNumber: e.hash.loc.last_line,
-						endColumn: (e.hash.loc.last_column as number) + 1,
-						message: e.str
-					};
-					processed.errorMarkers = [marker];
-				} catch (err) {
-					console.error('Error without line helper', err);
-				}
-			}
-		}
-		set(processed);
-	},
-	{
-		...get(inputStateStore),
-		serialized: serializeState(get(inputStateStore)),
+export const stateStore: Readable<ValidatedState> = derived([inputStateStore], ([state]) => {
+	const processed: ValidatedState = {
+		...state,
+		serialized: '',
 		errorMarkers: [],
 		error: undefined,
-		editorMode: get(inputStateStore).editorMode ?? 'code'
+		editorMode: state.editorMode ?? 'code'
+	};
+
+	// No changes should be done to fields part of `state`.
+	try {
+		processed.serialized = serializeState(state);
+		// await parse(state.code);
+		JSON.parse(state.mermaid);
+	} catch (e) {
+		processed.error = e;
+		console.error(e);
+		if (e.hash) {
+			try {
+				const marker: MarkerData = {
+					severity: 8, // Error
+					startLineNumber: e.hash.loc.first_line,
+					startColumn: e.hash.loc.first_column,
+					endLineNumber: e.hash.loc.last_line,
+					endColumn: (e.hash.loc.last_column as number) + 1,
+					message: e.str
+				};
+				processed.errorMarkers = [marker];
+			} catch (err) {
+				console.error('Error without line helper', err);
+			}
+		}
 	}
-);
+	return processed;
+});
 
 export const loadState = (data: string): void => {
 	let state: State;
@@ -117,12 +105,11 @@ export const loadState = (data: string): void => {
 			state.mermaid = defaultState.mermaid;
 		}
 	}
-	updateCodeStore({ ...state });
+	updateCodeStore(state);
 };
 
 export const updateCodeStore = (newState: Partial<State>): void => {
 	inputStateStore.update((state) => {
-		// console.log({ newState, state });
 		return { ...state, ...newState };
 	});
 };
diff --git a/yarn.lock b/yarn.lock
index 8d097995..2f5ca71b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -375,6 +375,11 @@
   resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.2.tgz#ed4e0ad92306a704f9fb132a0cfcf77486dbe2bc"
   integrity sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==
 
+"@types/async@^3.2.15":
+  version "3.2.15"
+  resolved "https://registry.yarnpkg.com/@types/async/-/async-3.2.15.tgz#26d4768fdda0e466f18d6c9918ca28cc89a4e1fe"
+  integrity sha512-PAmPfzvFA31mRoqZyTVsgJMsvbynR429UTTxhmfsUCrWGh3/fxOrzqBtaTPJsn4UtzTv4Vb0+/O7CARWb69N4g==
+
 "@types/chai-subset@^1.3.3":
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/@types/chai-subset/-/chai-subset-1.3.3.tgz#97893814e92abd2c534de422cb377e0e0bdaac94"
@@ -846,6 +851,11 @@ async@^3.2.0:
   resolved "https://registry.yarnpkg.com/async/-/async-3.2.3.tgz#ac53dafd3f4720ee9e8a160628f18ea91df196c9"
   integrity sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g==
 
+async@^3.2.4:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/async/-/async-3.2.4.tgz#2d22e00f8cddeb5fde5dd33522b56d1cf569a81c"
+  integrity sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==
+
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz"