Implement syntax highlighting on compiler error

Author: 2fast2fourier

plugins/editor/key-extension.js

@@ -6,6 +6,7 @@ const { findNext, findPrevious, replace } = require('../../src/actions/find');
 const { moveByScrollUpLine, moveByScrollDownLine } = require('../../src/actions/editor-move');
 const { dedent, indent } = require('../../src/actions/text-move');
 const { print } = require('../../src/actions/system');
+const { syntaxCheck } = require('../../src/actions/editor');
 const { newFile, saveFile } = require('../../src/actions/file');
 const { hideOverlays, showSave, showDownload, showProjects } = require('../../src/actions/overlay');
 const { disableAuto, enableAuto } = require('../../src/actions/device');
@@ -120,6 +121,13 @@ const keyExtension = {
           evt.preventDefault();
           showProjects();
         }
+      },
+      syntaxCheck: {
+        code: ['CTRL_T', 'F7'],
+        exec(evt){
+          evt.preventDefault();
+          syntaxCheck();
+        }
       }
     };
 

plugins/sidebar/index.js

@@ -22,6 +22,7 @@ function sidebar(app, opts, done){
   const overlay = app.overlay;
   const userConfig = app.userConfig;
   const irken = app;
+  const compile = app.compile.bind(irken);
   const getBoard = app.getBoard.bind(irken);
   const scanBoards = app.scanBoards.bind(irken);
 
@@ -63,6 +64,8 @@ function sidebar(app, opts, done){
   deviceStore.getBoard = getBoard;
   deviceStore.scanBoards = scanBoards;
 
+  editorStore.toast = toast;
+  editorStore.compile = compile;
   editorStore.workspace = space;
 
   fileStore.workspace = space;

src/actions/editor.js

@@ -6,6 +6,15 @@ class EditorActions {
   handleInput(inst) {
     this.dispatch(inst);
   }
+  highlight(position, len) {
+    this.dispatch({
+      position: position,
+      length: len
+    });
+  }
+  syntaxCheck(){
+    this.dispatch();
+  }
 }
 
 module.exports = alt.createActions(EditorActions);

src/stores/editor.js

@@ -1,9 +1,11 @@
 'use strict';
 
 const alt = require('../alt');
+const styles = require('../../plugins/sidebar/styles');
 
 const { findNext, findPrevious, replace } = require('../actions/find');
-const { handleInput } = require('../actions/editor');
+const { handleError, handleSuccess } = require('../actions/file');
+const { handleInput, highlight, syntaxCheck } = require('../actions/editor');
 const { moveByScrollUpLine, moveByScrollDownLine } = require('../actions/editor-move');
 const { dedent, indent } = require('../actions/text-move');
 const { print } = require('../actions/system');
@@ -17,10 +19,12 @@ class EditorStore {
       onFindPrevious: findPrevious,
       onHandleInput: handleInput,
       onIndent: indent,
+      onHighlight: highlight,
       onMoveByScrollUpLine: moveByScrollUpLine,
       onMoveByScrollDownLine: moveByScrollDownLine,
       onPrint: print,
-      onReplace: replace
+      onReplace: replace,
+      onSyntaxCheck: syntaxCheck
     });
 
   }
@@ -77,7 +81,48 @@ class EditorStore {
 
     cm.execCommand('replace');
   }
+  onSyntaxCheck() {
+    const { workspace, compile } = this.getInstance();
+    const result = compile({
+      type: 'bs2',
+      source: workspace.current.deref()
+    });
+    if(result.error){
+      this.handleError(result.error);
+    }else{
+      this.handleSuccess('Tokenization successful!');
+    }
+  }
+  onHighlight(opts) {
+    const { cm } = this.getInstance();
+    const doc = cm.getDoc();
+
+    const anchor = doc.posFromIndex(opts.position);
+    const head = doc.posFromIndex(opts.position + opts.length);
+
+    console.log('onHighlight', opts, anchor, head);
+    doc.setSelection(anchor, head);
+  }
 
+
+  //duplicated from file store due to dispatch->dispatch invariant
+  handleError(err){
+    // leaving this in for better debugging of errors
+    console.log(err);
+    const { toast } = this.getInstance();
+
+    toast.show(err.message, { style: styles.errorToast });
+    if(err && err.errorLength){
+      this.onHighlight({ position: err.errorPosition, length: err.errorLength });
+    }
+  }
+
+  //duplicated from file store due to dispatch->dispatch invariant
+  handleSuccess(msg){
+    const { toast } = this.getInstance();
+
+    toast.show(msg, { style: styles.successToast, timeout: 5000 });
+  }
 }
 
 EditorStore.config = {

src/stores/file.js

@@ -8,6 +8,8 @@ const alt = require('../alt');
 const styles = require('../../plugins/sidebar/styles');
 
 const { hideOverlays, hideSave } = require('../actions/overlay');
+const { highlight } = require('../actions/editor.js');
+
 const {
   clearName,
   updateName,
@@ -207,6 +209,9 @@ class FileStore {
     const { toast } = this.getInstance();
 
     toast.show(err.message, { style: styles.errorToast });
+    if(err && err.errorLength){
+      highlight(err.errorPosition, err.errorLength);
+    }
   }
 
   onHandleSuccess(msg){