errors, corrections, remove fading

Author: christianalfoni

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

@@ -1,7 +1,4 @@
-import {
-  getModulePath,
-  resolveModule,
-} from '@codesandbox/common/lib/sandbox/modules';
+import { resolveModule } from '@codesandbox/common/lib/sandbox/modules';
 import {
   EditorSelection,
   Module,
@@ -13,7 +10,7 @@ import { actions, dispatch } from 'codesandbox-api';
 import { css } from 'glamor';
 import { TextOperation } from 'ot';
 
-import { getCurrentModelPath, getModel, getVSCodePath } from './utils';
+import { getCurrentModelPath, getModel } from './utils';
 
 // @ts-ignore
 const fadeIn = css.keyframes('fadeIn', {
@@ -34,6 +31,7 @@ export type OnFileChangeData = {
   title: string;
   code: string;
   event?: any[];
+  model?: any;
 };
 
 export type OnFileChangeCallback = (data: OnFileChangeData) => void;
@@ -147,6 +145,7 @@ export class ModelsHandler {
               code: model.object.textEditorModel.getValue(),
               moduleShortid: module.shortid,
               title: module.title,
+              model,
             });
           }
         });
@@ -462,6 +461,7 @@ export class ModelsHandler {
           title: module.title,
           code: model.getValue(),
           event: e,
+          model,
         });
       } catch (err) {
         if (process.env.NODE_ENV === 'development') {

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

@@ -400,4 +400,8 @@ export class Workbench {
   ) {
     this.monaco.editor.appendMenuItem(menubarId, item);
   }
+
+  private addNotification(notification: NotificationMessage) {
+    notificationState.addNotification(notification);
+  }
 }

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

@@ -3,15 +3,12 @@ import { resolveModule } from '@codesandbox/common/lib/sandbox/modules';
 import {
   EditorSelection,
   Module,
+  ModuleCorrection,
+  ModuleError,
   Sandbox,
   SandboxFs,
   Settings,
 } from '@codesandbox/common/lib/types';
-import {
-  convertTypeToStatus,
-  notificationState,
-} from '@codesandbox/common/lib/utils/notifications';
-import { NotificationMessage } from '@codesandbox/notifications/lib/state';
 import { Reaction } from 'app/overmind';
 import prettify from 'app/src/app/utils/prettify';
 import { blocker } from 'app/utils/blocker';
@@ -28,7 +25,7 @@ import {
 import { Linter } from './Linter';
 import { ModelsHandler, OnFileChangeData } from './ModelsHandler';
 import sandboxFsSync from './sandboxFsSync';
-import { getCode, getModel, getSelection, getVSCodePath } from './utils';
+import { getSelection } from './utils';
 import loadScript from './vscode-script-loader';
 import { Workbench } from './Workbench';
 
@@ -255,14 +252,92 @@ export class VSCodeEffect {
     await this.initialized;
     const model = await this.modelsHandler.changeModule(module);
 
-    this.linter.lint(
-      model.getValue(),
-      module.title,
-      model.getVersionId(),
-      this.options.getCurrentSandbox().template
-    );
+    this.lint(module.title, model);
   }
 
+  setErrors = (errors: ModuleError[]) => {
+    const activeEditor = this.editorApi.getActiveCodeEditor();
+
+    if (activeEditor) {
+      if (errors.length > 0) {
+        const currentPath = this.getCurrentModelPath();
+        const thisModuleErrors = errors.filter(
+          error => error.path === currentPath
+        );
+        const errorMarkers = thisModuleErrors
+          .map(error => {
+            if (error) {
+              return {
+                severity: this.monaco.MarkerSeverity.Error,
+                startColumn: 1,
+                startLineNumber: error.line,
+                endColumn: error.column,
+                endLineNumber: error.line + 1,
+                message: error.message,
+              };
+            }
+
+            return null;
+          })
+          .filter(x => x);
+
+        this.monaco.editor.setModelMarkers(
+          activeEditor.getModel(),
+          'error',
+          errorMarkers
+        );
+      } else {
+        this.monaco.editor.setModelMarkers(
+          activeEditor.getModel(),
+          'error',
+          []
+        );
+      }
+    }
+  };
+
+  setCorrections = (corrections: ModuleCorrection[]) => {
+    const activeEditor = this.editorApi.getActiveCodeEditor();
+    if (activeEditor) {
+      if (corrections.length > 0) {
+        const currentPath = this.getCurrentModelPath();
+        const correctionMarkers = corrections
+          .filter(correction => correction.path === currentPath)
+          .map(correction => {
+            if (correction) {
+              return {
+                severity:
+                  correction.severity === 'warning'
+                    ? this.monaco.MarkerSeverity.Warning
+                    : this.monaco.MarkerSeverity.Notice,
+                startColumn: correction.column,
+                startLineNumber: correction.line,
+                endColumn: correction.columnEnd || 1,
+                endLineNumber: correction.lineEnd || correction.line + 1,
+                message: correction.message,
+                source: correction.source,
+              };
+            }
+
+            return null;
+          })
+          .filter(x => x);
+
+        this.monaco.editor.setModelMarkers(
+          activeEditor.getModel(),
+          'correction',
+          correctionMarkers
+        );
+      } else {
+        this.monaco.editor.setModelMarkers(
+          activeEditor.getModel(),
+          'correction',
+          []
+        );
+      }
+    }
+  };
+
   private async disableExtension(id: string) {
     const extensionService = await this.extensionService.promise;
     const extensionEnablementService = await this.extensionEnablementService
@@ -552,6 +627,8 @@ export class VSCodeEffect {
       return;
     }
 
+    this.lint(data.title, data.model);
+
     this.options.onCodeChange(data);
   };
 
@@ -649,6 +726,29 @@ export class VSCodeEffect {
       }
     });
   }
+
+  private lint(title: string, model: any) {
+    this.linter.lint(
+      model.getValue(),
+      title,
+      model.getVersionId(),
+      this.options.getCurrentSandbox().template
+    );
+  }
+
+  private getCurrentModelPath = () => {
+    const activeEditor = this.editorApi.getActiveCodeEditor();
+
+    if (!activeEditor) {
+      return undefined;
+    }
+    const model = activeEditor.getModel();
+    if (!model) {
+      return undefined;
+    }
+
+    return model.uri.path.replace(/^\/sandbox/, '');
+  };
 }
 
 export default new VSCodeEffect();

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

@@ -42,12 +42,12 @@ class SandboxFsSync {
   private types: any;
   private typesInfo: Promise<any>;
   private initializingWorkers = blocker<void>();
-  // We do not want to send initial sandbox until
-  // all 3 filesystems are running
   private workersInitializedCount = 0;
   public initialize(options: SandboxFsSyncOptions) {
     this.options = options;
     self.addEventListener('message', evt => {
+      // We do not want to send initial sandbox until
+      // all 3 filesystems are running
       if (this.initializingWorkers.isResolved()) {
         if (evt.data.$type === 'sync-types') {
           this.syncDependencyTypings();
@@ -117,6 +117,7 @@ class SandboxFsSync {
   public async sync() {
     await this.initializingWorkers.promise;
 
+    // eslint-disable-next-line
     console.log('## SYNCING SANDBOX AND TYPINGS WITH WORKERS');
     this.syncSandbox();
 

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

@@ -1,12 +1,12 @@
 import { resolveModule } from '@codesandbox/common/lib/sandbox/modules';
-import { getHashedUserId } from '@codesandbox/common/lib/utils/analytics';
 import {
   EnvironmentVariable,
   ModuleCorrection,
   ModuleError,
   ModuleTab,
   WindowOrientation,
 } from '@codesandbox/common/lib/types';
+import { getHashedUserId } from '@codesandbox/common/lib/utils/analytics';
 import { Action, AsyncAction } from 'app/overmind';
 import { withLoadApp, withOwnedSandbox } from 'app/overmind/factories';
 import { sortObjectByKeys } from 'app/overmind/utils/common';
@@ -576,6 +576,7 @@ export const previewActionReceived: Action<{
 
         module.errors.push(json(error));
         state.editor.errors.push(error);
+        effects.vscode.setErrors(state.editor.errors);
       } catch (e) {
         /* ignore, this module can be in a node_modules for example */
       }
@@ -601,6 +602,7 @@ export const previewActionReceived: Action<{
 
         state.editor.corrections.push(correction);
         module.corrections.push(json(correction));
+        effects.vscode.setCorrections(state.editor.corrections);
       } catch (e) {
         /* ignore, this module can be in a node_modules for example */
       }
@@ -631,6 +633,7 @@ export const previewActionReceived: Action<{
           module.errors.push(error);
         });
         state.editor.errors = newErrors;
+        effects.vscode.setErrors(state.editor.errors);
       }
       break;
     }
@@ -667,6 +670,7 @@ export const previewActionReceived: Action<{
           module.corrections.push(correction);
         });
         state.editor.corrections = newCorrections;
+        effects.vscode.setCorrections(state.editor.corrections);
       }
       break;
     }

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

@@ -88,8 +88,6 @@ export const saveCode: AsyncAction<{
     moduleShortid,
   });
 
-  effects.vscode.fs.writeFile(state.editor.modulesByPath, module);
-
   try {
     const updatedModule = await effects.api.saveModuleCode(sandbox.id, module);
 
@@ -98,6 +96,7 @@ export const saveCode: AsyncAction<{
     module.savedCode =
       updatedModule.code === module.code ? null : updatedModule.code;
 
+    effects.vscode.fs.writeFile(state.editor.modulesByPath, module);
     effects.moduleRecover.remove(sandbox.id, module);
 
     state.editor.changedModuleShortids.splice(