Update demo site

Author: ota-meshi

docs/.vuepress/.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
     rules: {
-        "eslint-comments/no-unused-disable": "off",
+        "require-jsdoc": "off",
     },
 }

docs/.vuepress/components/components/EslintPluginEditor.vue

@@ -19,6 +19,7 @@
 
 <script>
 import EslintEditor from "vue-eslint-editor"
+import { Linter } from "eslint/lib/linter"
 import plugin from "../../../.."
 
 export default {
@@ -60,7 +61,6 @@ export default {
 
   data() {
     return {
-      eslint4b: null,
       svelteESLintParser: null,
       format: {
         insertSpaces: true,
@@ -103,16 +103,14 @@ export default {
         parser: this.parser,
         parserOptions: {
           sourceType: "script",
-          ecmaVersion: 2020,
+          ecmaVersion: 2021,
         },
       }
     },
     linter() {
-      if (!this.eslint4b || !this.svelteESLintParser) {
+      if (!this.svelteESLintParser) {
         return null
       }
-      const Linter = this.eslint4b
-
       const linter = new Linter()
       linter.defineParser("svelte-eslint-parser", this.svelteESLintParser)
 
@@ -126,13 +124,46 @@ export default {
   },
 
   async mounted() {
-    // Load linter asynchronously.
-    const [{ default: eslint4b }, svelteESLintParser] = await Promise.all([
-      import("eslint4b"),
+    // Load parser asynchronously.
+    const [svelteESLintParser] = await Promise.all([
       import("espree").then(() => import("svelte-eslint-parser")),
     ])
-    this.eslint4b = eslint4b
     this.svelteESLintParser = svelteESLintParser
+
+    const editor = this.$refs.editor
+
+    editor.$watch("monaco", () => {
+      const { monaco } = editor
+      // monaco.languages.j()
+      monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+        validate: false,
+      })
+      monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+        validate: false,
+      })
+    })
+    editor.$watch("codeEditor", () => {
+      if (editor.codeEditor) {
+        editor.codeEditor.onDidChangeModelDecorations(() =>
+          this.onDidChangeModelDecorations(editor.codeEditor),
+        )
+      }
+    })
+    editor.$watch("fixedCodeEditor", () => {
+      if (editor.fixedCodeEditor) {
+        editor.fixedCodeEditor.onDidChangeModelDecorations(() =>
+          this.onDidChangeModelDecorations(editor.fixedCodeEditor),
+        )
+      }
+    })
+  },
+
+  methods: {
+    onDidChangeModelDecorations(editor) {
+      const { monaco } = this.$refs.editor
+      const model = editor.getModel()
+      monaco.editor.setModelMarkers(model, "json", [])
+    },
   },
 }
 </script>

docs/.vuepress/components/components/RulesSettings.vue

@@ -1,40 +1,35 @@
 <template>
   <div class="rules-settings">
     <div class="tools">
-      <div class="tools-title" @click="state.toolsClose = !state.toolsClose">
-        Tools
-        <button
-          class="tools-button"
-          :class="{ 'tools-button--close': state.toolsClose }"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height="10"
-            viewBox="0 0 10 10"
-            width="10"
-          >
-            <path d="M2.5 10l5-5-5-5v10z" fill="#ddd" />
-          </svg>
-        </button>
-      </div>
-      <template v-if="!state.toolsClose">
-        <div class="tool">
-          <button class="tool-button" @click="onAllOffClick">
-            Turn OFF All Rules
-          </button>
-        </div>
-        <div class="tool">
-          <label>
-            <span class="tool-label">Filter:</span>
-            <input
-              v-model="filterValue"
-              type="search"
-              placeholder="Rule Filter"
-              class="tool-form"
-            />
-          </label>
-        </div>
-      </template>
+      <label class="tool">
+        <span class="tool-label">Filter:</span>
+        <input
+          v-model="filterValue"
+          type="search"
+          placeholder="Rule Filter"
+          class="tool-form"
+        />
+      </label>
+      <label class="tool">
+        <input
+          :checked="
+            categories.every((category) =>
+              category.rules.every((rule) => isErrorState(rule.ruleId)),
+            )
+          "
+          type="checkbox"
+          :indeterminate.prop="
+            categories.some((category) =>
+              category.rules.some((rule) => isErrorState(rule.ruleId)),
+            ) &&
+            categories.some((category) =>
+              category.rules.some((rule) => !isErrorState(rule.ruleId)),
+            )
+          "
+          @input="onAllClick($event)"
+        />
+        <span class="tool-label">All Rules</span>
+      </label>
     </div>
     <ul class="categories">
       <template v-for="category in categories">
@@ -74,15 +69,15 @@
                   !category.rules.every((rule) => isErrorState(rule.ruleId)) &&
                   !category.rules.every((rule) => !isErrorState(rule.ruleId))
                 "
-                @input="onAllClick(category, $event)"
+                @input="onCategoryClick(category, $event)"
               />
               {{ category.title }}
             </label>
           </div>
 
           <ul v-show="!categoryState[category.title].close" class="rules">
             <li
-              v-for="rule in filterRules(category.rules)"
+              v-for="rule in category.rules"
               :key="rule.ruleId"
               class="rule"
               :class="rule.classes"
@@ -104,6 +99,7 @@
                   viewBox="0 0 100 100"
                   width="15"
                   height="15"
+                  class="icon outbound"
                 >
                   <path
                     fill="currentColor"
@@ -145,33 +141,32 @@ export default {
           ]
         }),
       ),
-      state: {
-        toolsClose: true,
-      },
       filterValue: "",
     }
   },
   computed: {
     categories() {
       return categories.map((c) => {
-        let rules = this.filterRules(c.rules)
-        if (this.filterValue) {
-          rules = rules.filter((r) => r.ruleId.includes(this.filterValue))
-        }
         return {
           ...c,
-          rules,
+          rules: this.filterRules(c.rules),
         }
       })
     },
   },
   methods: {
     filterRules(rules) {
-      return rules.filter((rule) => rule.ruleId !== "jsonc/auto")
+      let filteredRules = rules
+      if (this.filterValue) {
+        filteredRules = filteredRules.filter((r) =>
+          r.ruleId.includes(this.filterValue),
+        )
+      }
+      return filteredRules
     },
-    onAllClick(category, e) {
+    onCategoryClick(category, e) {
       const rules = Object.assign({}, this.rules)
-      for (const rule of this.filterRules(category.rules)) {
+      for (const rule of category.rules) {
         if (e.target.checked) {
           rules[rule.ruleId] = "error"
         } else {
@@ -180,8 +175,18 @@ export default {
       }
       this.$emit("update:rules", rules)
     },
-    onAllOffClick() {
-      this.$emit("update:rules", {})
+    onAllClick(e) {
+      const rules = Object.assign({}, this.rules)
+      for (const category of this.categories) {
+        for (const rule of category.rules) {
+          if (e.target.checked) {
+            rules[rule.ruleId] = "error"
+          } else {
+            delete rules[rule.ruleId]
+          }
+        }
+      }
+      this.$emit("update:rules", rules)
     },
     onClick(ruleId, e) {
       const rules = Object.assign({}, this.rules)
@@ -206,25 +211,12 @@ export default {
 
 .tool {
   display: flex;
-}
-
-.tool,
-.tools-title {
   padding: 4px;
 }
 
-.tool > label {
-  display: flex;
-  width: 100%;
-}
-
-.tool > button {
-  margin: auto;
-}
-
 .tool-label {
-  width: 3.5rem;
   flex-shrink: 0;
+  padding: 0 4px;
 }
 
 .tool-form {
@@ -244,24 +236,19 @@ export default {
   transform: rotate(90deg);
 }
 
-.filter .tool-label {
-  color: #ddd;
-}
-
 .categories {
   font-size: 14px;
   list-style-type: none;
 }
 
 .category {
   position: relative;
-  color: #fff;
 }
 
 .category-button {
   position: absolute;
   left: -12px;
-  top: 4px;
+  top: 2px;
   background-color: transparent;
   color: #ddd;
   border: none;
@@ -279,13 +266,11 @@ export default {
   font-weight: bold;
 }
 
-.eslint-plugin-svelte__category .category-title,
-.eslint-plugin-svelte__rule a {
+.eslint-plugin-svelte-category .category-title {
   color: #40b3ff;
 }
 
-.eslint-category .category-title,
-.eslint-rule a {
+.eslint-core-category .category-title {
   color: #8080f2;
 }
 
@@ -303,11 +288,17 @@ export default {
 
 .rule a {
   margin-left: auto;
-  display: inline-flex;
-  align-items: center;
 }
 
 a {
   text-decoration: none;
 }
+
+.eslint-core-rule a > svg {
+  color: #8080f2;
+}
+
+.eslint-plugin-svelte-rule a > svg {
+  color: #40b3ff;
+}
 </style>