feat: Allow to go to line

Author: finom

packages/frontend/Messages.js

@@ -0,0 +1,42 @@
+import MatreshkaObject from 'matreshka/object';
+import display from 'matreshka/binders/display';
+
+export default class Message extends MatreshkaObject {
+  renderer = '<pre class="result-item"><span class="position" title="Go to the line">{{ line }}:{{ column }}</span> {{ type }} {{ message }} <span class="result-link">(<a href="{{ link }}" target="_blank">{{ ruleId }}</a>)</span> </pre>';
+
+  constructor(data) {
+      super(data)
+          .calc('type', 'severity', severity => (severity === 1 ? 'warning' : 'error'))
+          .calc('link', 'ruleId', (ruleId) => {
+              if (!ruleId) {
+                  return null;
+              }
+
+              const [groupName, ruleName] = ruleId.split('/');
+
+              if (!ruleName) {
+                  return `http://eslint.org/docs/rules/${groupName}`;
+              }
+
+              if (groupName === 'react') {
+                  return `https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/${ruleName}.md`;
+              }
+
+              if (groupName === 'jsx-a11y') {
+                  return `https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/${ruleName}.md`;
+              }
+
+              return null;
+          });
+  }
+
+  onRender() {
+      this
+          .bindNode('type', ':sandbox', {
+              setValue(type, { node }) {
+                  node.classList.add(`result-${type}`);
+              }
+          })
+          .bindNode('link', ':sandbox .result-link', display());
+  }
+}

packages/frontend/Messages/Message.js

@@ -0,0 +1,18 @@
+import MatreshkaArray from 'matreshka/array';
+import display from 'matreshka/binders/display';
+import Message from './Message';
+
+export default class Messages extends MatreshkaArray {
+  Model = Message;
+  constructor(data, parent) {
+      super()
+          .bindNode({
+              sandbox: parent.select('#result-container'),
+              container: ':sandbox .result-errors',
+              noErrors: {
+                  node: ':sandbox .result-success',
+                  binder: display()
+              }
+          });
+  }
+}

packages/frontend/Messages/index.js

@@ -986,6 +986,12 @@ button[type="reset"]:active {}
     white-space: normal;
 }
 
+.result-item .position {
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  cursor: pointer;
+}
+
 .result-item a {
     white-space: nowrap;
 }

packages/frontend/css/style.css

@@ -36,6 +36,9 @@ module.exports = new class App extends MatreshkaObject {
                     })
                 }
             })
+            .set({
+                editor: this.nodes.code.nextElementSibling.CodeMirror
+            })
             .calc('chosenConfig', ['configName', 'configs'], (configName, configs) => {
                 if (!configName || !configs) {
                     return {};
@@ -53,6 +56,10 @@ module.exports = new class App extends MatreshkaObject {
                 },
                 'change:code': () => {
                     this.noErrors = false;
+                },
+                'messages.*@click::(.position)': ({ self: { line, column } }) => {
+                    this.editor.setCursor({ line: line - 1, ch: column - 1 });
+                    this.editor.focus();
                 }
             })
             .instantiate({
@@ -62,7 +69,8 @@ module.exports = new class App extends MatreshkaObject {
             })
             .init();
 
-        this.nodes.code.nextElementSibling.CodeMirror.addKeyMap({
+
+        this.editor.addKeyMap({
             'Ctrl-Enter': () => this.lint(),
             'Cmd-Enter': () => this.lint(),
             'Cmd-A': inst => inst.execCommand('selectAll')