fix(diagram-panel): fixed possible race condition during mermaid import

JBBianchi · JBBianchi · commit daf24f950934 · 2024-03-08T15:45:03.000+01:00
Signed-off-by: Jean-Baptiste Bianchi &lt;jb.bianchi@neuroglia.io&gt;
diff --git a/resources/diagram-panel.html b/resources/diagram-panel.html
@@ -11,10 +11,15 @@
   <body>
     <div id="diagram-container"></div>
     <script type="module">
+      const vscode = acquireVsCodeApi();
+      window.addEventListener('load', async() => {
+        await vscode.postMessage({
+          command: 'panel-content-loaded'
+        })
+      });
       import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/+esm';
       (async () => {
         try {
-          const vscode = acquireVsCodeApi();
           const diagramContainerEl = document.getElementById('diagram-container');
           
           function updateState(partialState) {
diff --git a/src/diagram-panel.ts b/src/diagram-panel.ts
@@ -78,7 +78,6 @@ export class DiagramPanel {
       return;
     }
     this.#panel.webview.html = panelContent;
-    await this.#updateDiagram();
   }
 
   dispose() {
@@ -137,6 +136,9 @@ export class DiagramPanel {
   async #onPanelReceiveMessage(message: any): Promise<void> {    
     const { command, ...args } = message;
     switch (command) {
+      case 'panel-content-loaded':
+        await this.#updateDiagram();
+        break;
       case 'diagram-rendered': {
         if (this.#mode === 'png') {
           await this.#panel?.webview.postMessage({
diff --git a/src/extension.ts b/src/extension.ts
@@ -30,7 +30,7 @@ async function handleDiagramCommand(context: vscode.ExtensionContext, mode: Diag
 			if (supportedExtensions.includes(ext)) {
 				const target = await vscode.workspace.openTextDocument(item);
 				const diagramPanel = new DiagramPanel(context, { mode });
-				diagramPanel.render(target!);
+				await diagramPanel.render(target!);
 			}
 		}
 		return;
@@ -39,7 +39,7 @@ async function handleDiagramCommand(context: vscode.ExtensionContext, mode: Diag
 		const target = vscode.window.activeTextEditor?.document;
 		if (target) {
 			const diagramPanel = new DiagramPanel(context, { mode });
-			diagramPanel.render(target);
+			await diagramPanel.render(target);
 		}
 		return;
 	}

Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@ async function handleDiagramCommand(context: vscode.ExtensionContext, mode: Diag`
`30`	`30`	`if (supportedExtensions.includes(ext)) {`
`31`	`31`	`const target = await vscode.workspace.openTextDocument(item);`
`32`	`32`	`const diagramPanel = new DiagramPanel(context, { mode });`
`33`		`- diagramPanel.render(target!);`
	`33`	`+ await diagramPanel.render(target!);`
`34`	`34`	`}`
`35`	`35`	`}`
`36`	`36`	`return;`
`@@ -39,7 +39,7 @@ async function handleDiagramCommand(context: vscode.ExtensionContext, mode: Diag`
`39`	`39`	`const target = vscode.window.activeTextEditor?.document;`
`40`	`40`	`if (target) {`
`41`	`41`	`const diagramPanel = new DiagramPanel(context, { mode });`
`42`		`- diagramPanel.render(target);`
	`42`	`+ await diagramPanel.render(target);`
`43`	`43`	`}`
`44`	`44`	`return;`
`45`	`45`	`}`