fix: Remove AsyncQueue

src/lib/components/View.svelte

@@ -4,7 +4,7 @@
   import panzoom from 'svg-pan-zoom';
   import type { State, ValidatedState } from '$lib/types';
   import { logEvent } from '$lib/util/stats';
-  import { AsyncQueue, cmdKey } from '$lib/util/util';
+  import { cmdKey } from '$lib/util/util';
   import { render as renderDiagram } from '$lib/util/mermaid';
   import type { MermaidConfig } from 'mermaid';
 
@@ -113,11 +113,9 @@
     }
   };
 
-  const q = new AsyncQueue(handleStateChange);
-
   onMount(() => {
     stateStore.subscribe((state) => {
-      void q.process(state);
+      void handleStateChange(state);
     });
     window.addEventListener('resize', () => {
       if ($stateStore.panZoom && pzoom) {

src/lib/util/state.ts

@@ -2,7 +2,7 @@ import { writable, get, type Readable, derived } from 'svelte/store';
 import { persist, localStorage } from './persist';
 import { saveStatistics, countLines } from './stats';
 import { serializeState, deserializeState } from './serde';
-import { cmdKey, errorDebug, AsyncQueue } from './util';
+import { cmdKey, errorDebug } from './util';
 import { parse } from './mermaid';
 
 import type { ErrorHash, MarkerData, State, ValidatedState } from '$lib/types';
@@ -52,8 +52,6 @@ export const currentState: ValidatedState = (() => {
   };
 })();
 
-let q: AsyncQueue<State> | undefined;
-
 const processState = async (state: State) => {
   const processed: ValidatedState = {
     ...state,
@@ -99,14 +97,7 @@ const processState = async (state: State) => {
 export const stateStore: Readable<ValidatedState> = derived(
   [inputStateStore],
   ([state], set) => {
-    if (!q) {
-      // Initialize the queue for first time.
-      q = new AsyncQueue(async (state: State) => {
-        const newState = await processState(state);
-        set(newState);
-      });
-    }
-    void q.process(state);
+    void processState(state).then(set);
   },
   currentState
 );

src/lib/util/util.ts

@@ -38,24 +38,3 @@ export const errorDebug = (limit = 100) => {
     debugger;
   }
 };
-
-// To queue async tasks so they are executed one after the other, not concurrently.
-export class AsyncQueue<T> {
-  private readonly queue: T[] = [];
-  private running = false;
-  constructor(private processor: (item: T) => Promise<void>) {}
-  public async process(item: T): Promise<void> {
-    this.queue.push(item);
-    if (this.running) {
-      return;
-    }
-    this.running = true;
-    while (this.queue.length > 0) {
-      const item = this.queue.shift();
-      if (item) {
-        await this.processor(item);
-      }
-    }
-    this.running = false;
-  }
-}