update playground

Author: ota-meshi

README.md

@@ -1,6 +1,6 @@
 # Introduction
 
-`@ota-meshi/eslint-plugin-svelte` is ESLint plugin for Svelte.  
+`@ota-meshi/eslint-plugin-svelte` is [ESLint] plugin for [Svelte].  
 It provides many unique check rules by using the template AST.  
 You can check on the [Online DEMO](https://ota-meshi.github.io/eslint-plugin-svelte/playground/).
 
@@ -19,12 +19,12 @@ You can check on the [Online DEMO](https://ota-meshi.github.io/eslint-plugin-sve
 
 ## :name_badge: What is this plugin?
 
-ESLint plugin for Svelte.  
+[ESLint] plugin for [Svelte].  
 It provides many unique check rules using the AST generated by [svelte-eslint-parser].
 
 ### ❓ Why?
 
-[Svelte] has the official ESLint plugin the [eslint-plugin-svelte3]. The [eslint-plugin-svelte3] works well enough to check scripts. However, it does not handle the AST of the template, which makes it very difficult for third parties to create their own the [ESLint] rules for the [Svelte].
+[Svelte] has the official [ESLint] plugin the [eslint-plugin-svelte3]. The [eslint-plugin-svelte3] works well enough to check scripts. However, it does not handle the AST of the template, which makes it very difficult for third parties to create their own the [ESLint] rules for the [Svelte].
 
 The [svelte-eslint-parser] aims to make it easy to create your own rules for the [Svelte] by allowing the template AST to be used in the rules.
 
@@ -34,7 +34,6 @@ The [svelte-eslint-parser] and the `@ota-meshi/eslint-plugin-svelte` can not be
 
 [svelte-eslint-parser]: https://github.com/ota-meshi/svelte-eslint-parser
 [eslint-plugin-svelte3]: https://github.com/sveltejs/eslint-plugin-svelte3
-[eslint]: https://eslint.org/
 
 <!--DOCS_IGNORE_START-->
 
@@ -332,3 +331,4 @@ This plugin uses [svelte-eslint-parser](https://github.com/ota-meshi/svelte-esli
 See the [LICENSE](LICENSE) file for license rights and limitations (MIT).
 
 [svelte]: https://svelte.dev/
+[eslint]: https://eslint.org/

docs-svelte-kit/src/lib/components/ESLintPlayground.svelte

@@ -4,7 +4,7 @@
   import { deserializeState, serializeState } from "../eslint/scripts/state"
   import {
     DEFAULT_RULES_CONFIG,
-    getURL,
+    getRule,
     createLinter,
     preprocess,
     postprocess,
@@ -128,7 +128,7 @@
     <span style="margin-left: 16px">{time}</span>
   </div>
   <div class="playground-content">
-    <RulesSettings bind:rules class="rules-settings" />
+    <RulesSettings bind:rules />
     <div class="editor-content">
       <ESLintEditor
         {linter}
@@ -146,17 +146,20 @@
           },
         }}
         {options}
-        class="eslint-playground"
         on:result={onLintedResult}
       />
       <div class="messages">
         <ol>
           {#each messages as msg, i (`${msg.line}:${msg.column}:${msg.ruleId}@${i}`)}
             <li class="message">
               [{msg.line}:{msg.column}]:
-              {msg.message} (<a href={getURL(msg.ruleId)} target="_blank">
-                {msg.ruleId}
-              </a>)
+              {msg.message}
+              <a
+                class="rule-link {getRule(msg.ruleId)?.classes}"
+                class:is-rule-error={msg.ruleId}
+                href={getRule(msg.ruleId)?.url}
+                target="_blank">({msg.ruleId})</a
+              >
             </li>
           {/each}
         </ol>
@@ -179,7 +182,7 @@
     height: calc(100% - 16px);
     border: 1px solid #cfd4db;
     background-color: #282c34;
-    color: #f8c555;
+    color: #fff;
   }
 
   .playground-content > .editor-content {
@@ -200,4 +203,25 @@
     padding: 8px;
     font-size: 12px;
   }
+  .playground-content
+    > .editor-content
+    > .messages
+    .rule-link:not(.is-rule-error) {
+    display: none;
+  }
+  .rule-link {
+    transition: color 0.2s linear;
+  }
+  .rule-link.svelte-rule {
+    color: #40b3ff80;
+  }
+  .rule-link.svelte-rule:hover {
+    color: #40b3ff;
+  }
+  .rule-link.core-rule {
+    color: #8080f280;
+  }
+  .rule-link.core-rule:hover {
+    color: #8080f2;
+  }
 </style>

docs-svelte-kit/src/lib/eslint/RulesSettings.svelte

@@ -2,6 +2,25 @@
   import { categories } from "./scripts/linter.js"
 
   export let rules = {}
+
+  let filterValue = ""
+  let filteredCategories = categories
+  $: {
+    filteredCategories = []
+    for (const category of categories) {
+      let filteredRules = category.rules
+      if (filterValue) {
+        // eslint-disable-next-line no-loop-func -- ignore
+        filteredRules = filteredRules.filter((r) =>
+          r.ruleId.includes(filterValue),
+        )
+      }
+      filteredCategories.push({
+        ...category,
+        rules: filteredRules,
+      })
+    }
+  }
   let categoryState = Object.fromEntries(
     categories.map((c) => {
       return [
@@ -12,10 +31,12 @@
       ]
     }),
   )
-  function onAllClick(category, e) {
+
+  function onCategoryClick(category, e) {
+    const checked = e.target.checked
     const newRules = Object.assign({}, rules)
     for (const rule of category.rules) {
-      if (e.target.checked) {
+      if (checked) {
         newRules[rule.ruleId] = "error"
       } else {
         delete newRules[rule.ruleId]
@@ -24,8 +45,9 @@
     rules = newRules
   }
   function onClick(ruleId, e) {
+    const checked = e.target.checked
     const newRules = Object.assign({}, rules)
-    if (e.target.checked) {
+    if (checked) {
       newRules[ruleId] = "error"
     } else {
       delete newRules[ruleId]
@@ -35,13 +57,55 @@
   function isErrorState(rules, ruleId) {
     return rules[ruleId] === "error" || rules[ruleId] === 2
   }
+
+  function onAllClick(e) {
+    const checked = e.target.checked
+    const newRules = Object.assign({}, rules)
+    for (const category of filteredCategories) {
+      for (const rule of category.rules) {
+        if (checked) {
+          newRules[rule.ruleId] = "error"
+        } else {
+          delete newRules[rule.ruleId]
+        }
+      }
+    }
+    rules = newRules
+  }
 </script>
 
 <div class="rules-settings">
+  <div class="tools">
+    <label class="tool">
+      <span class="tool-label">Filter:</span>
+      <input
+        type="search"
+        placeholder="Rule Filter"
+        class="tool-form"
+        bind:value={filterValue}
+      />
+    </label>
+    <label class="tool">
+      <input
+        type="checkbox"
+        on:click={onAllClick}
+        checked={filteredCategories.every((category) =>
+          category.rules.every((rule) => isErrorState(rules, rule.ruleId)),
+        )}
+        indeterminate={filteredCategories.some((category) =>
+          category.rules.some((rule) => isErrorState(rules, rule.ruleId)),
+        ) &&
+          filteredCategories.some((category) =>
+            category.rules.some((rule) => !isErrorState(rules, rule.ruleId)),
+          )}
+      />
+      <span>All Rules</span>
+    </label>
+  </div>
   <ul class="categories">
-    {#each categories as category (category.title)}
+    {#each filteredCategories as category (category.title)}
       {#if category.rules.length}
-        <li class="category">
+        <li class="category {category.classes}">
           <button
             class="category-button"
             class:category-button--close={categoryState[category.title].close}
@@ -81,7 +145,7 @@
                   !category.rules.every(
                     (rule) => !isErrorState(rules, rule.ruleId),
                   )}
-                on:input={(e) => onAllClick(category, e)}
+                on:input={(e) => onCategoryClick(category, e)}
               />
               {category.title}
             </label>
@@ -186,7 +250,36 @@
     text-decoration: none;
   }
 
+  .tools {
+    background-color: #676778;
+  }
+  .tool {
+    padding: 4px;
+    display: flex;
+    align-items: center;
+  }
+  .tool-label {
+    width: 3.5rem;
+    flex-shrink: 0;
+  }
+  .tool-form {
+    width: 100%;
+  }
+
   .category {
     color: #fff;
   }
+
+  .svelte-category .category-title {
+    color: #40b3ff;
+  }
+  .svelte-category a > svg {
+    color: #40b3ff;
+  }
+  .core-category .category-title {
+    color: #8080f2;
+  }
+  .core-category a > svg {
+    color: #8080f2;
+  }
 </style>

docs-svelte-kit/src/lib/eslint/scripts/linter.js

@@ -10,41 +10,50 @@ const linter = new Linter()
 export const categories = [
   {
     title: "Possible Errors",
+    classes: "svelte-category",
     rules: [],
   },
   {
     title: "Security Vulnerability",
+    classes: "svelte-category",
     rules: [],
   },
   {
     title: "Best Practices",
+    classes: "svelte-category",
     rules: [],
   },
   {
     title: "Stylistic Issues",
+    classes: "svelte-category",
     rules: [],
   },
   {
     title: "Extension Rules",
+    classes: "svelte-category",
     rules: [],
   },
   {
     title: "System",
+    classes: "svelte-category",
     rules: [],
   },
   {
     type: "problem",
     title: "Possible Errors (CORE)",
+    classes: "core-category",
     rules: [],
   },
   {
     type: "suggestion",
     title: "Suggestions (CORE)",
+    classes: "core-category",
     rules: [],
   },
   {
     type: "layout",
     title: "Layout & Formatting (CORE)",
+    classes: "core-category",
     rules: [],
   },
 ]
@@ -58,6 +67,7 @@ for (const rule of pluginRules) {
   const data = {
     ruleId: rule.meta.docs.ruleId,
     rule,
+    classes: "svelte-rule",
     url: rule.meta.docs.url,
   }
   rules.push(data)
@@ -76,6 +86,7 @@ for (const [ruleId, rule] of linter.getRules()) {
   const data = {
     ruleId,
     rule,
+    classes: "core-rule",
     url: rule.meta.docs.url,
   }
   rules.push(data)
@@ -86,9 +97,17 @@ for (const [ruleId, rule] of linter.getRules()) {
     DEFAULT_RULES_CONFIG[ruleId] = "error"
   }
 }
-/** get url */
-export function getURL(ruleId) {
-  return linter.getRules().get(ruleId)?.meta.docs.url ?? ""
+
+/** Get rule data */
+export function getRule(ruleId) {
+  for (const cat of categories) {
+    for (const rule of cat.rules) {
+      if (rule.ruleId === ruleId) {
+        return rule
+      }
+    }
+  }
+  return ""
 }
 
 export function createLinter() {

docs-svelte-kit/src/lib/sidemenu/UlMenu.svelte

@@ -84,4 +84,11 @@
     border: var(--size) solid transparent;
     border-right: var(--size) solid var(--accent-color);
   }
+
+  a.sidebar-menu-item-title:not(.active) {
+    transition: color 0.2s linear;
+  }
+  a.sidebar-menu-item-title:not(.active):hover {
+    color: #40b3ff;
+  }
 </style>