Merge pull request #1099 from mermaid-js/sidv/fixEditorHang

Remove AsyncQueue

cypress/e2e/diagramUpdate.spec.ts

@@ -69,6 +69,14 @@ describe('Auto sync tests', () => {
       )
       .should('exist');
   });
+
+  it.only('should update diagram after entire text is removed', () => {
+    // https://github.com/mermaid-js/mermaid-live-editor/issues/1102
+    getEditor().type(`${cmd} a {backspace}`);
+    getEditor().type('graph LR');
+    getEditor().type(' {enter}  A-->Car');
+    cy.get('#view').contains('Car').should('exist');
+  });
 });
 
 describe('Pan and Zoom', () => {

cypress/snapshots.js

@@ -16,7 +16,7 @@ module.exports = {
       "1": "{\"code\":\"graph TD\\n    A[Party] -->|Get money| B(Go shopping!!)\\n    \",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"forest\\\",\\n  \\\"test\\\": \\\"hello world\\\"\\n}\",\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"files\",\"config\":{\"codeURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/code.mmd\",\"configURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/config.json\"}}}"
     }
   },
-  "__version": "10.10.0",
+  "__version": "11.2.0",
   "Auto sync tests": {
     "should dim diagram when code is edited": {
       "1": "{\"code\":\"graph TD\\n    A[Christmas] -->|Get money| B(Go shopping)\\n    B --> C{Let me think}\\n    C -->|One| D[Laptop]\\n    C -->|Two| E[iPhone]\\n    C -->|Three| F[fa:fa-car Car]\\n    C --> Test\",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"default\\\"\\n}\",\"autoSync\":false,\"updateDiagram\":false}"

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,
@@ -72,11 +70,11 @@ const processState = async (state: State) => {
     errorDebug();
     console.error(e);
     if ('hash' in e) {
+      try {
         const {
           loc: { first_line, last_line, first_column, last_column }
           // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
         } = e.hash as ErrorHash;
-      try {
         const marker: MarkerData = {
           severity: 8, // Error
           startLineNumber: first_line,
@@ -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;
-  }
-}