feat: Allow to turn off autofix

Author: finom

packages/backend/api/lint.js

@@ -3,7 +3,7 @@ const stripAnsi = require('strip-ansi');
 
 const lint = (code, {
     envs,
-    fix = true,
+    fix,
     rules
 }) => new CLIEngine({
     envs,
@@ -16,8 +16,8 @@ const lint = (code, {
     .executeOnText(code).results[0];
 
 module.exports = (req, res) => {
-    const { code, rules, envs } = req.body;
-    const result = lint(code, { rules, envs });
+    const { code, rules, envs, fix } = req.body;
+    const result = lint(code, { rules, envs, fix });
 
     result.messages.forEach((message) => {
         // eslint-disable-next-line no-param-reassign

packages/frontend/index.html

@@ -62,21 +62,26 @@ <h1>ValidateJavaScript <span class="sub-title">- Find &amp; Fix JavaScript Error
             <div class="result-errors"></div>
         </section>
 
-        <button type="submit" class="btn btn-primary left" form="main">Find &amp; Fix JavaScript Errors</button>
+        <button type="submit" class="btn btn-primary left" form="main">Find <span class="and-fix-button-text">&amp; Fix</span> JavaScript Errors</button>
 
         <div class="settings" id="tabs-content-1">
             <fieldset>
-                <legend>Settings</legend>
-                <div class="form-group left">
-                    <label><strong>Config:</strong></label>
-                    <select class="config-name form-control">
-                        <option value="">Custom</option>
-                        <option value="airbnb">airbnb</option>
-                        <option value="eslint">eslint</option>
-                        <option value="google">google</option>
-                        <option value="standard">standard</option>
-                    </select>
-                </div>
+              <legend>Settings</legend>
+              <div class="form-group left">
+                  <label><strong>Config:</strong></label>
+                  <select class="config-name form-control">
+                      <option value="">Custom</option>
+                      <option value="airbnb">airbnb</option>
+                      <option value="eslint">eslint</option>
+                      <option value="google">google</option>
+                      <option value="standard">standard</option>
+                  </select>
+              </div>
+              <div class="form-group left">
+                  <label>
+                    <input type="checkbox" class="autofix"> <strong>Automatically fix</strong>
+                  </label>
+              </div>
             </fieldset>
             <hr>
             <fieldset>

packages/frontend/index.js

@@ -1,6 +1,7 @@
 import 'babel-polyfill';
 
 import MatreshkaObject from 'matreshka/object';
+import display from 'matreshka/binders/display';
 import codeMirror from 'matreshka-binder-codemirror';
 import 'codemirror/mode/javascript/javascript';
 
@@ -13,11 +14,20 @@ module.exports = new class App extends MatreshkaObject {
         super()
             .set({
                 configName: 'airbnb',
-                noErrors: false
+                noErrors: false,
+                fix: true
             })
             .bindSandbox('body')
             .bindNode({
                 configName: ':sandbox .config-name',
+                fix: [{
+                    node: ':sandbox .autofix'
+                },
+                {
+                    node: ':sandbox .and-fix-button-text',
+                    binder: display()
+                }
+                ],
                 form: ':sandbox #main',
                 code: {
                     node: ':sandbox #code',
@@ -82,6 +92,7 @@ module.exports = new class App extends MatreshkaObject {
             body: JSON.stringify({
                 code: this.code,
                 rules: this.rules,
+                fix: this.fix,
                 envs: this.environments.toJSON(false)
                     .filter(({ checked }) => checked)
                     .map(({ environment }) => environment)