Update: editor options (tabSize and insertSpaces)

mysticatea · mysticatea · commit 7f68685b9f00 · 2017-12-04T17:45:12.000+09:00
diff --git a/src/app.vue b/src/app.vue
@@ -1,14 +1,28 @@
 <template>
     <div class="app__root">
         <div class="app__header">
-            <label class="app__show-fixed-code-button">
-                <input
-                    type="checkbox"
-                    v-model="showFixedCode"
-                >
-                Show fixed code
+            <div class="app__header-title">
+                Playground for <a href="https://github.com/vuejs/eslint-plugin-vue#readme" target="_blank">eslint-plugin-vue</a>.
+            </div>
+            <label class="app__header-option-item">
+                <select v-model.number="indentSize">
+                    <option value="2">TabSize: 2</option>
+                    <option value="4">TabSize: 4</option>
+                    <option value="8">TabSize: 8</option>
+                </select>
+            </label>
+            <label class="app__header-option-item">
+                <select v-model="indentType">
+                    <option value="space">Indent: spaces</option>
+                    <option value="tab">Indent: tabs</option>
+                </select>
+            </label>
+            <label class="app__header-option-item">
+                <select v-model="editorType">
+                    <option value="codeAndFixedCode">FixedCode: show</option>
+                    <option value="codeOnly">FixedCode: hide</option>
+                </select>
             </label>
-            Playground for <a href="https://github.com/vuejs/eslint-plugin-vue#readme" target="_blank">eslint-plugin-vue</a>.
         </div>
         <div class="app__body">
             <rule-select
@@ -23,8 +37,9 @@
                     :messages="messages"
                     :fixed-code="fixedCode"
                     :fixed-messages="fixedMessages"
+                    :format-options="formatOptions"
                     :show-fixed-code="showFixedCode"
-                    @edit="onEdit"
+                    @edit="onCodeChange"
                     @initialize.once="onEditorInitialize"
                 />
                 <message-list class="app__errors" :messages="messages" />
@@ -66,70 +81,61 @@ export default {
     },
 
     computed: {
-        messages() {
-            try {
-                return linter.verify(this.code, this.config, "vue-eslint-demo.vue")
-            }
-            catch (err) {
-                return [{
-                    fatal: true,
-                    severity: 2,
-                    message: err.message,
-                    line: 1,
-                    column: 0,
-                }]
+        formatOptions() {
+            return {
+                insertSpaces: this.indentType === "space",
+                tabSize: this.indentSize,
             }
         },
 
-        fixResult() {
-            try {
-                return linter.verifyAndFix(this.code, this.config, "vue-eslint-demo.vue")
-            }
-            catch (err) {
-                return {
-                    output: this.code,
-                    messages: [{
-                        fatal: true,
-                        severity: 2,
-                        message: err.message,
-                        line: 1,
-                        column: 0,
-                    }],
-                }
-            }
+        showFixedCode() {
+            return this.editorType === "codeAndFixedCode"
         },
 
-        fixedCode() {
-            return this.fixResult.output
+        versions() {
+            return versions
         },
+    },
 
-        fixedMessages() {
-            return this.fixResult.messages
+    // Use `watch` to re-use the internal state of the linter while making `messages` and `fixedCode`.
+    watch: {
+        code() {
+            this.lint()
+            this.applyUrlHash()
         },
-
-        versions() {
-            return versions
+        indentSize() {
+            this.lint()
+            this.applyUrlHash()
+        },
+        indentType() {
+            this.lint()
+            this.applyUrlHash()
+        },
+        editorType() {
+            this.applyUrlHash()
         },
     },
 
     mounted() {
+        this.lint()
         window.addEventListener("hashchange", this.onUrlHashChange)
     },
     beforeDestroey() {
         window.removeEventListener("hashchange", this.onUrlHashChange)
     },
 
     methods: {
-        onEdit(code) {
-            this.code = code
-            this.applyUrlHash()
-        },
-
         onEditorInitialize() {
             window.MainContent.show()
         },
 
+        onCodeChange(code) {
+            this.code = code
+        },
+
         onConfigChange() {
+            // The inside of `this.config` was changed directly.
+            this.lint()
             this.applyUrlHash()
         },
 
@@ -144,6 +150,53 @@ export default {
         applyUrlHash() {
             window.location.replace(`#${serializeState(this.$data)}`)
         },
+
+        lint() {
+            // Adjust the indentation options to the editor settings.
+            const config = Object.assign({}, this.config)
+            const rules = config.rules = Object.assign({}, this.config.rules)
+            const indentType = (this.indentType === "space") ? this.indentSize : "tab"
+            rules.indent = [rules.indent, indentType]
+            rules["vue/html-indent"] = [rules["vue/html-indent"], indentType]
+
+            // Fix
+            try {
+                // At first, fix because `linter.verifyAndFix` does not accept SourceCode object.
+                const ret = linter.verifyAndFix(this.code, config, "vue-eslint-demo.vue")
+                this.fixedCode = ret.output
+                this.fixedMessages = ret.messages
+            }
+            catch (err) {
+                this.fixedCode = this.code
+                this.fixedMessages = [{
+                    fatal: true,
+                    severity: 2,
+                    message: err.message,
+                    line: 1,
+                    column: 0,
+                }]
+            }
+
+            // Lint
+            try {
+                this.messages = linter.verify(
+                    // Cannot reuse until https://github.com/eslint/eslint/pull/8755 is merged.
+                    // linter.getSourceCode(), // Reuse the AST of the previous `linter.verifyAndFix`.
+                    this.code,
+                    config,
+                    "vue-eslint-demo.vue"
+                )
+            }
+            catch (err) {
+                this.messages = [{
+                    fatal: true,
+                    severity: 2,
+                    message: err.message,
+                    line: 1,
+                    column: 0,
+                }]
+            }
+        },
     },
 }
 </script>
@@ -164,13 +217,30 @@ a:hover {
 }
 
 .app__header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
     flex-shrink: 0;
-    padding: 8px;
     background-color: #A5D6A7;
     border-bottom: 1px solid #4CAF50;
-    font-weight: bold;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
 }
+.app__header-title {
+    flex-grow: 1;
+    padding: 8px;
+    font-weight: bold;
+}
+.app__header-option-item {
+    flex-shrink: 0;
+    padding: 2px;
+}
+.app__header-option-item > select {
+    padding: 4px;
+    border: 1px solid #4CAF50;
+    border-radius: 3px;
+    background-color: #E8F5E9;
+}
 
 .app__body {
     display: flex;
diff --git a/src/code-editor.vue b/src/code-editor.vue
@@ -147,6 +147,12 @@ export default {
                 return []
             },
         },
+        formatOptions: {
+            type: Object,
+            default() {
+                return { insertSpaces: true, tabSize: 2 }
+            },
+        },
         showFixedCode: {
             type: Boolean,
             default: false,
@@ -222,14 +228,22 @@ export default {
         },
 
         // But it's not shown.
-        // See https://github.com/Microsoft/monaco-editor/issues/311
+        // See https://github.com/mysticatea/vue-eslint-demo/issues/5
         fixedMessages(value) {
             const editor = this.fixedCodeEditor
             if (editor != null) {
                 updateMarkers(editor, value)
             }
         },
 
+        formatOptions(value) {
+            for (const editor of [this.codeEditor, this.fixedCodeEditor]) {
+                if (editor != null) {
+                    editor.getModel().updateOptions(value)
+                }
+            }
+        },
+
         showFixedCode() {
             this.ready.then(this.initialize)
         },
diff --git a/src/state.js b/src/state.js
@@ -2,6 +2,18 @@ import pako from "pako"
 import defaultCode from "./default-code.js"
 import defaultConfig from "./default-config.js"
 
+/**
+ * @typedef {Object} State
+ * @property {string} code The source code the user input.
+ * @property {Object} config The config object to lint.
+ * @property {(2|4|8)} indentSize The indent size to set the editor.
+ * @property {("space"|"tab")} indentType The indent type to set the editor.
+ * @property {("codeAndFixedCode"|"codeOnly")} editorType The editor type to set the editor.
+ * @property {Object[]} messages The error messages of the linting result.
+ * @property {string} fixedCode The auto-fixed code.
+ * @property {Object[]} fixedMessages The error messages of the linting result with `--fix`.
+ */
+
 /**
  * Convert an Unicode string to base64.
  * @param {string} text The string to convert.
@@ -24,23 +36,31 @@ function decodeFromBase64(base64) {
 
 /**
  * Create the default state.
- * @returns {{config:any,code:string,showFixedCode:boolean}} The created state.
+ * @returns {State} The created state.
  */
 function createDefaultState() {
     const code = defaultCode
     const config = Object.assign({}, defaultConfig)
     config.rules = Object.assign({}, defaultConfig.rules)
-    const showFixedCode = true
 
-    return { code, config, showFixedCode }
+    return {
+        code,
+        config,
+        indentSize: 2,
+        indentType: "space",
+        editorType: "codeAndFixedCode",
+        messages: [],
+        fixedCode: code,
+        fixedMessages: [],
+    }
 }
 
 /**
  * Initialize state.
  * @param {string} serializedText The string to deserialize.
- * @returns {{config:any,code:string,showFixedCode:boolean}} The created state.
+ * @returns {State} The created state.
  */
-export function deserializeState(serializedText) {
+export function deserializeState(serializedText) { //eslint-disable-line complexity
     const state = createDefaultState()
 
     try {
@@ -60,6 +80,15 @@ export function deserializeState(serializedText) {
                 }
             }
         }
+        if (json.indentSize === 2 || json.indentSize === 4 || json.indentSize === 8) {
+            state.indentSize = json.indentSize
+        }
+        if (json.indentType === "space" || json.indentType === "tab") {
+            state.indentType = json.indentType
+        }
+        if (json.editorType === "codeAndFixedCode" || json.editorType === "codeOnly") {
+            state.editorType = json.editorType
+        }
     }
     catch (_err) {
         // ignores.
@@ -70,7 +99,7 @@ export function deserializeState(serializedText) {
 
 /**
  * Create the base64
- * @param {object} state The state object.
+ * @param {State} state The state object.
  * @returns {string} Serialized string.
  */
 export function serializeState(state) {
@@ -85,7 +114,10 @@ export function serializeState(state) {
         },
         {}
     )
-    const jsonText = JSON.stringify({ code, rules })
+    const indentSize = state.indentSize
+    const indentType = state.indentType
+    const editorType = state.editorType
+    const jsonText = JSON.stringify({ code, rules, indentSize, indentType, editorType })
     const compressedText = pako.deflate(jsonText, { to: "string" })
     return encodeToBase64(compressedText)
 }
