Add Vue warning handler, fix codemirror corrections

Author: Ives van Hoorne

packages/app/src/app/components/CodeEditor/CodeMirror/index.js

@@ -98,6 +98,11 @@ class CodemirrorEditor extends React.Component<Props, State> implements Editor {
   linterWorker: ?Worker;
 
   validate = (code: string = '', updateLinting: Function) => {
+    if (!this.currentModule || !/\.jsx?$/.test(this.currentModule.title)) {
+      updateLinting([]);
+      return;
+    }
+
     if (code.trim() === '') {
       updateLinting([]);
       return;
@@ -232,6 +237,7 @@ class CodemirrorEditor extends React.Component<Props, State> implements Editor {
     if (settings.lintEnabled) {
       if (!this.linterWorker) {
         this.linterWorker = new LinterWorker();
+
         this.codemirror.setOption('lint', {
           getAnnotations: this.validate,
           async: true,
@@ -241,6 +247,8 @@ class CodemirrorEditor extends React.Component<Props, State> implements Editor {
       this.codemirror.setOption('lint', false);
     }
 
+    this.codemirror.setOption('tabSize', this.props.settings.tabWidth);
+
     this.forceUpdate();
   };
 
@@ -251,6 +259,7 @@ class CodemirrorEditor extends React.Component<Props, State> implements Editor {
 
     if (!documentCache[currentModule.id]) {
       const mode = await this.getMode(currentModule.title);
+
       documentCache[currentModule.id] = new CodeMirror.Doc(
         currentModule.code || '',
         mode
@@ -288,7 +297,14 @@ class CodemirrorEditor extends React.Component<Props, State> implements Editor {
         await import(/* webpackChunkName: 'codemirror-html' */ 'codemirror/mode/htmlmixed/htmlmixed');
 
         if (kind[1] === 'vue') {
-          return 'text/x-vue';
+          await Promise.all([
+            import(/* webpackChunkName: 'codemirror-css' */ 'codemirror/mode/css/css'),
+            import(/* webpackChunkName: 'codemirror-sass' */ 'codemirror/mode/sass/sass'),
+            import(/* webpackChunkName: 'codemirror-stylus' */ 'codemirror/mode/stylus/stylus'),
+            import(/* webpackChunkName: 'codemirror-handlebars' */ 'codemirror/mode/handlebars/handlebars'),
+            import(/* webpackChunkName: 'codemirror-vue' */ 'codemirror/mode/vue/vue'),
+          ]);
+          return { name: 'vue' };
         }
 
         return 'htmlmixed';
@@ -301,7 +317,7 @@ class CodemirrorEditor extends React.Component<Props, State> implements Editor {
         await import(/* webpackChunkName: 'codemirror-sass' */ 'codemirror/mode/sass/sass');
         return 'sass';
       } else if (kind[1] === 'styl') {
-        await import(/* webpackChunkName: 'codemirror-sass' */ 'codemirror/mode/stylus/stylus');
+        await import(/* webpackChunkName: 'codemirror-stylus' */ 'codemirror/mode/stylus/stylus');
         return 'stylus';
       }
     }

packages/app/src/app/components/CodeEditor/Monaco/elements.js

@@ -13,6 +13,11 @@ export const CodeContainer = styled.div`
   height: 100%;
   z-index: 30;
 
+  .greensquiggly {
+    background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23ffd399'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
+      repeat-x bottom left !important;
+  }
+
   .jest-success {
     display: flex;
     align-items: center;

packages/app/src/app/components/CodeEditor/Monaco/index.js

@@ -386,6 +386,7 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
   setCorrections = (corrections: Array<ModuleCorrection>) => {
     if (corrections.length > 0) {
       const correctionMarkers = corrections
+        .filter(correction => correction.moduleId === this.currentModule.id)
         .map(correction => {
           if (correction) {
             return {

packages/app/src/app/pages/Sandbox/Editor/Content/Preview/index.js

@@ -235,9 +235,7 @@ class Preview extends React.Component<Props, State> {
             settings={store.preferences.settings}
             initialPath={store.editor.initialPath}
             isInProjectView={store.editor.isInProjectView}
-            onClearErrors={() =>
-              store.editor.errors.length && signals.editor.errorsCleared()
-            }
+            onClearErrors={() => signals.editor.errorsCleared()}
             onAction={action =>
               signals.editor.previewActionReceived({ action })
             }

packages/app/src/app/store/modules/editor/actions.js

@@ -136,23 +136,25 @@ export function addErrorFromPreview({ state, props, utils }) {
   const sandbox = state.get('editor.currentSandbox');
 
   try {
-    const module = utils.resolveModule(
-      props.action.path.replace(/^\//, ''),
-      sandbox.modules,
-      sandbox.directories
-    );
+    let module = null;
+
+    if (props.action.path) {
+      module = utils.resolveModule(
+        props.action.path.replace(/^\//, ''),
+        sandbox.modules,
+        sandbox.directories
+      );
+    }
 
     const error = {
-      moduleId: module.id,
+      moduleId: module ? module.id : undefined,
       column: props.action.column,
       line: props.action.line,
       message: props.action.message,
       title: props.action.title,
     };
 
-    if (module) {
-      state.push('editor.errors', error);
-    }
+    state.push('editor.errors', error);
   } catch (e) {
     /* ignore, module not found */
   }
@@ -178,22 +180,26 @@ export function addGlyphFromPreview({ state, props, utils }) {
 
 export function addCorrectionFromPreview({ state, props, utils }) {
   const sandbox = state.get('editor.currentSandbox');
-  const module = utils.resolveModule(
-    props.action.path.replace(/^\//, ''),
-    sandbox.modules,
-    sandbox.directories
-  );
+
+  let module = null;
+
+  if (props.action.path) {
+    module = utils.resolveModule(
+      props.action.path.replace(/^\//, ''),
+      sandbox.modules,
+      sandbox.directories
+    );
+  }
   const correction = {
-    moduleId: module.id,
+    moduleId: module ? module.id : undefined,
     column: props.action.column,
     line: props.action.line,
     message: props.action.message,
     source: props.action.source,
+    severity: props.action.severity,
   };
 
-  if (module) {
-    state.push('editor.corrections', correction);
-  }
+  state.push('editor.corrections', correction);
 }
 
 export function moveTab({ state, props }) {

packages/app/src/app/store/modules/editor/model.js

@@ -110,7 +110,7 @@ export default {
       line: types.maybe(types.number),
       message: types.string,
       title: types.string,
-      moduleId: types.string,
+      moduleId: types.maybe(types.string),
     })
   ),
   glyphs: types.array(
@@ -126,7 +126,8 @@ export default {
       line: types.maybe(types.number),
       message: types.string,
       source: types.string,
-      moduleId: types.string,
+      moduleId: types.maybe(types.string),
+      severity: types.maybe(types.string),
     })
   ),
   isInProjectView: types.boolean,

packages/app/src/sandbox/eval/presets/vue-cli/index.js

@@ -1,3 +1,7 @@
+import { dispatch, actions } from 'codesandbox-api';
+
+import type Manager from '../../manager';
+
 import babelTranspiler from '../../transpilers/babel';
 import typescriptTranspiler from '../../transpilers/typescript';
 import jsonTranspiler from '../../transpilers/json';
@@ -18,11 +22,58 @@ import base64Transpiler from '../../transpilers/base64';
 
 import Preset from '../';
 
+const getFileNameFromVm = vm => {
+  if (vm) {
+    const options =
+      typeof vm === 'function' && vm.cid != null
+        ? vm.options
+        : vm._isVue ? vm.$options || vm.constructor.options : vm || {};
+
+    return options.__file;
+  }
+};
+
 export default function initialize() {
-  const vuePreset = new Preset('vue-cli', ['vue', 'json', 'js'], {
-    '@': '{{sandboxRoot}}',
-    vue$: 'vue/dist/vue.common.js',
-  });
+  const vuePreset = new Preset(
+    'vue-cli',
+    ['vue', 'json', 'js'],
+    {
+      '@': '{{sandboxRoot}}',
+      vue$: 'vue/dist/vue.common.js',
+    },
+    {
+      setup: async (manager: Manager) => {
+        try {
+          const vueModule = manager.resolveTranspiledModule('vue', '/');
+
+          if (!vueModule.source) {
+            await vueModule.transpile(manager);
+          }
+          const Vue = vueModule.evaluate(manager);
+
+          if (Vue) {
+            Vue.config.warnHandler = (msg, vm, trace) => {
+              console.error('[Vue warn]: ' + msg + trace);
+
+              const file = getFileNameFromVm(vm);
+
+              dispatch(
+                actions.correction.show(msg, {
+                  line: 1,
+                  column: 1,
+                  path: file,
+                  severity: 'warning',
+                  source: 'Vue',
+                })
+              );
+            };
+          }
+        } catch (e) {
+          /* ignore */
+        }
+      },
+    }
+  );
 
   const sassWithConfig = {
     transpiler: sassTranspiler,