fix error and corrections handling

Author: christianalfoni

packages/app/src/app/overmind/effects/vscode/index.ts

@@ -85,6 +85,7 @@ const context: any = window;
  */
 export class VSCodeEffect {
   public initialized: Promise<unknown>;
+  public editorInitialized = blocker<void>();
   public sandboxFsSync: SandboxFsSync;
   private mountableFilesystem: any;
 
@@ -125,7 +126,6 @@ export class VSCodeEffect {
       getSignal: options.getSignal,
     };
     this.onSelectionChangeDebounced = debounce(options.onSelectionChange, 500);
-
     this.prepareElements();
 
     // We instantly create a sandbox sync, as we want our
@@ -455,7 +455,9 @@ export class VSCodeEffect {
     });
   }
 
-  public setErrors = (errors: ModuleError[]) => {
+  public setErrors = async (errors: ModuleError[]) => {
+    await this.editorInitialized.promise;
+
     const activeEditor = this.editorApi.getActiveCodeEditor();
 
     if (activeEditor) {
@@ -496,7 +498,9 @@ export class VSCodeEffect {
     }
   };
 
-  public setCorrections = (corrections: ModuleCorrection[]) => {
+  public setCorrections = async (corrections: ModuleCorrection[]) => {
+    await this.editorInitialized.promise;
+
     const activeEditor = this.editorApi.getActiveCodeEditor();
     if (activeEditor) {
       if (corrections.length > 0) {
@@ -675,6 +679,10 @@ export class VSCodeEffect {
   }
 
   private async loadEditor(monaco: any, container: HTMLElement) {
+    if (this.editorInitialized.isResolved()) {
+      return Promise.resolve();
+    }
+
     this.monaco = monaco;
     this.workbench = new Workbench(monaco, this.controller, this.runCommand);
 
@@ -809,6 +817,8 @@ export class VSCodeEffect {
         if (this.settings.lintEnabled) {
           this.createLinter();
         }
+
+        this.editorInitialized.resolve();
         resolve();
       });
     });

packages/app/src/app/overmind/namespaces/editor/actions.ts

@@ -566,24 +566,10 @@ export const prettifyClicked: AsyncAction = async ({
 
 // TODO(@CompuIves): Look into whether we even want to call this function.
 // We can probably call the dispatch from the bundler itself instead.
-export const errorsCleared: Action = ({ state, effects }) => {
+export const errorsCleared: Action = ({ state }) => {
   const sandbox = state.editor.sandbox;
-  if (!sandbox) {
-    return;
-  }
 
-  if (sandbox.errors.length) {
-    sandbox.errors.forEach(error => {
-      try {
-        const module = sandbox.getModuleByPath(error.path);
-        module.errors = [];
-      } catch (e) {
-        // Module is probably somewhere in eg. /node_modules which is not
-        // in the store
-      }
-    });
-    sandbox.clearErrors();
-  }
+  sandbox.clearErrors('*');
 };
 
 export const toggleStatusBar: Action = ({ state }) => {
@@ -786,7 +772,7 @@ export const previewActionReceived: Action<any> = (
       const currentErrors = sandbox.errors;
       const newErrors = clearCorrectionsFromAction(currentErrors, action);
 
-      state.editor.sandbox.clearErrors();
+      state.editor.sandbox.clearErrors(action.path);
       newErrors.forEach(error => sandbox.addError(error));
       effects.vscode.setErrors(sandbox.errors);
       break;
@@ -800,7 +786,7 @@ export const previewActionReceived: Action<any> = (
         action
       );
 
-      sandbox.clearCorrections();
+      sandbox.clearCorrections(action.path);
       newCorrections.forEach(correction => sandbox.addCorrection(correction));
       effects.vscode.setCorrections(sandbox.corrections);
       break;

packages/app/src/app/overmind/namespaces/editor/models/EditorSandbox.ts

@@ -464,12 +464,38 @@ export class EditorSandbox {
     );
   }
 
-  clearErrors() {
-    this.errors = [];
+  clearErrors(path: string) {
+    if (path === '*') {
+      this.errors = [];
+      this.currentSandbox.modules.forEach(module => {
+        if (module.errors.length) {
+          module.errors = [];
+        }
+      });
+    } else {
+      this.errors = this.errors.filter(error => error.path !== path);
+      const module = this.getModuleByPath(path);
+      if (module) {
+        module.errors = [];
+      }
+    }
   }
 
-  clearCorrections() {
-    this.corrections = [];
+  clearCorrections(path: string) {
+    if (path === '*') {
+      this.corrections = [];
+      this.currentSandbox.modules.forEach(module => {
+        if (module.corrections.length) {
+          module.corrections = [];
+        }
+      });
+    } else {
+      this.corrections = this.corrections.filter(error => error.path !== path);
+      const module = this.getModuleByPath(path);
+      if (module) {
+        module.corrections = [];
+      }
+    }
   }
 
   setFrozen(isFrozen: boolean) {