feat: Store app state at localStorage

Author: finom

index.html

@@ -48,6 +48,12 @@ <h1>ECMAScript Lint</h1>
                                     Use recommended values if available
                                 </label>
                             </div>
+                            <div class="form-group">
+                                <label>
+                                    <input type="checkbox" class="modules-feature">
+                                    ECMAScript modules
+                                </label>
+                            </div>
                         </div>
                     </fieldset>
                 </div>

src/environments.js

@@ -21,7 +21,8 @@ export default class Environments extends MatreshkaArray {
 
         this
             .bindNode('sandbox', parent.select('.environments'))
-            .rerender();
+            .rerender()
+            .update(data);
     }
     toJSON() {
         const result = {};
@@ -33,7 +34,16 @@ export default class Environments extends MatreshkaArray {
         return result;
     }
 
-    update() {
+    update(env) {
+        if(!env) return this;
+
+        for (const item of this) {
+            const { environment } = item;
+            if(environment in env) {
+                item.checked = env[environment]
+            }
+        }
+
         return this;
     }
 }

src/index.js

@@ -1,4 +1,5 @@
 import MatreshkaObject from 'matreshka/object';
+import calc from 'matreshka/calc';
 import lint from './lint';
 import { setParser } from './lint/parser';
 import Environments from './environments';
@@ -11,8 +12,18 @@ module.exports = new class Application extends MatreshkaObject {
     constructor() {
         super({
             env: {},
-            rules: {}
+            rules: {},
+            parserOptions: {
+                ecmaVersion: 2017,
+                ecmaFeatures: {
+                    experimentalObjectRestSpread: true
+                }
+            }
         })
+        .set({
+            configName: localStorage.eslintio ? '' : 'airbnb'
+        })
+        .setData(JSON.parse(localStorage.eslintio || '{}'))
         .bindNode({
             sandbox: 'form',
             configName: {
@@ -40,7 +51,8 @@ module.exports = new class Application extends MatreshkaObject {
                 })
             },
             parserName: ':sandbox .parser-name',
-            useRecommended: ':sandbox .use-recommended'
+            useRecommended: ':sandbox .use-recommended',
+            modulesFeature: ':sandbox .modules-feature'
         })
         .instantiate({
             env: Environments,
@@ -70,6 +82,8 @@ module.exports = new class Application extends MatreshkaObject {
                 const results = lint(this.code, this.toJSON());
 
                 this.set({ results });
+
+                localStorage.eslintio = JSON.stringify(this);
             },
             'change:parserName': () => setParser(this.parserName),
             'rules@rulechange': () => {
@@ -82,5 +96,17 @@ module.exports = new class Application extends MatreshkaObject {
                 }
             }
         });
+
+        calc(this, 'modulesFeature', {
+            object: this.parserOptions,
+            key: 'sourceType'
+        }, sourceType => sourceType === 'module');
+
+        calc(this.parserOptions, 'sourceType', {
+            object: this,
+            key: 'modulesFeature'
+        }, modulesFeature => modulesFeature ? 'module' : 'script');
+
+
     }
 }();

src/results/index.js

@@ -2,10 +2,6 @@ import MatreshkaArray from 'matreshka/array';
 import ResultsItem from './item';
 
 export default class Results extends MatreshkaArray {
-    itemRenderer = `<div class="alert alert-danger">
-        {{ message }}
-        (<a href="{{ href }}" target="_blank">{{ ruleId }}</a>)
-    </div>`;
     Model = ResultsItem;
     constructor(data, parent) {
         super()

src/results/item.js

@@ -1,13 +1,24 @@
 import MatreshkaObject from 'matreshka/object';
+import display from 'matreshka/binders/display';
 import plugins from '../lint/plugins';
 
 export default class extends MatreshkaObject {
+    renderer = `<div class="alert alert-danger">
+        {{ message }}
+        <span class="rule-clarification-container">
+            (<a href="{{ href }}" target="_blank">{{ ruleId }}</a>)
+        </span>
+    </div>`;
     constructor(data) {
         super(data)
             .calc({
                 href: {
                     source: 'ruleId',
                     handler: (ruleId) => {
+                        if(!ruleId) {
+                            return '';
+                        }
+
                         const splitted = ruleId.split('/');
                         let pluginName;
                         let ruleName;
@@ -26,4 +37,8 @@ export default class extends MatreshkaObject {
                 }
             });
     }
+
+    onRender() {
+        this.bindNode('href', ':sandbox .rule-clarification-container', display())
+    }
 }

src/rules/index.js

@@ -18,10 +18,13 @@ export default class Rules extends MatreshkaArray {
                     this.trigger('rulechange');
                 }
             })
-            .recreate(plugins);
+            .recreate(plugins)
+            .update(data);
     }
 
     update(rules) {
+        if(!rules) return this;
+
         for (const group of this) {
             for (const rule of group) {
                 const fullRuleName = group.getFullRuleName(rule.ruleName, group.name);
@@ -34,6 +37,8 @@ export default class Rules extends MatreshkaArray {
                 rule.value = rules[fullRuleName] || recommended[fullRuleName] || 'off';
             }
         }
+
+        return this;
     }
 
     toJSON() {

src/rules/rule.js

@@ -1,8 +1,7 @@
 import MatreshkaObject from 'matreshka/object';
-// import prop from 'matreshka/binders/prop';
 
 export default class Rule extends MatreshkaObject {
-    renderer = `<label title="{{ dynamicValueJSON }}" class="col-md-4 col-sm-6 form-check-label">
+    renderer = `<label title="{{ dynamicValueJSON }}" class="col-md-4 col-sm-6 col-xs-12 form-check-label">
         <input type="checkbox" checked="{{ isOn }}"> {{ ruleName }}
     </label>`;
     constructor(data) {