Add comment-directive (#14)

Author: ota-meshi

README.md

@@ -141,6 +141,7 @@ The rules with the following star :star: are included in the configs.
 | Rule ID | Description |    |
 |:--------|:------------|:---|
 | [@ota-meshi/svelte/button-has-type](https://ota-meshi.github.io/eslint-plugin-svelte/rules/button-has-type.html) | disallow usage of button without an explicit type attribute |  |
+| [@ota-meshi/svelte/comment-directive](https://ota-meshi.github.io/eslint-plugin-svelte/rules/comment-directive.html) | support comment-directives in HTML template | :star: |
 | [@ota-meshi/svelte/no-at-debug-tags](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-at-debug-tags.html) | disallow the use of `{@debug}` | :star: |
 | [@ota-meshi/svelte/no-at-html-tags](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-at-html-tags.html) | disallow use of `{@html}` to prevent XSS attack | :star: |
 | [@ota-meshi/svelte/no-dupe-else-if-blocks](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-dupe-else-if-blocks.html) | disallow duplicate conditions in `{#if}` / `{:else if}` chains | :star: |

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

@@ -7,6 +7,8 @@
     class="eslint-code-block"
     :language="language"
     :filename="fileName"
+    :preprocess="preprocess"
+    :postprocess="postprocess"
     :dark="dark"
     :format="format"
     :fix="fix"
@@ -64,6 +66,8 @@ export default {
         insertSpaces: true,
         tabSize: 2,
       },
+      preprocess: plugin.processors[".svelte"].preprocess,
+      postprocess: plugin.processors[".svelte"].postprocess,
     }
   },
 

docs/rules/README.md

@@ -12,6 +12,7 @@ The rules with the following star :star: are included in the `plugin:@ota-meshi/
 | Rule ID | Description |    |
 |:--------|:------------|:---|
 | [@ota-meshi/svelte/button-has-type](./button-has-type.md) | disallow usage of button without an explicit type attribute |  |
+| [@ota-meshi/svelte/comment-directive](./comment-directive.md) | support comment-directives in HTML template | :star: |
 | [@ota-meshi/svelte/no-at-debug-tags](./no-at-debug-tags.md) | disallow the use of `{@debug}` | :star: |
 | [@ota-meshi/svelte/no-at-html-tags](./no-at-html-tags.md) | disallow use of `{@html}` to prevent XSS attack | :star: |
 | [@ota-meshi/svelte/no-dupe-else-if-blocks](./no-dupe-else-if-blocks.md) | disallow duplicate conditions in `{#if}` / `{:else if}` chains | :star: |

docs/rules/comment-directive.md

@@ -0,0 +1,78 @@
+---
+pageClass: "rule-details"
+sidebarDepth: 0
+title: "@ota-meshi/svelte/comment-directive"
+description: "support comment-directives in HTML template"
+---
+
+# @ota-meshi/svelte/comment-directive
+
+> support comment-directives in HTML template
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge>
+- :gear: This rule is included in `"plugin:@ota-meshi/svelte/base"` and `"plugin:@ota-meshi/svelte/recommended"`.
+
+Sole purpose of this rule is to provide `eslint-disable` functionality in the template HTML.
+It supports usage of the following comments:
+
+- `eslint-disable`
+- `eslint-enable`
+- `eslint-disable-line`
+- `eslint-disable-next-line`
+
+::: warning Note
+We can't write HTML comments in tags.
+:::
+
+## :book: Rule Details
+
+ESLint doesn't provide any API to enhance `eslint-disable` functionality and ESLint rules cannot affect other rules. But ESLint provides [processors API](https://eslint.org/docs/developer-guide/working-with-plugins#processors-in-plugins).
+
+This rule sends all `eslint-disable`-like comments to the post-process of the `.svelte` file processor, then the post-process removes the reported errors in disabled areas.
+
+<eslint-code-block>
+
+<!--eslint-skip-->
+
+```html
+<script>
+  /* eslint @ota-meshi/svelte/comment-directive: "error", no-undef: "error" */
+</script>
+
+<!-- eslint-disable-next-line no-undef -->
+<UndefComponent />
+```
+
+</eslint-code-block>
+
+The `eslint-disable`-like comments can include descriptions to explain why the comment is necessary. The description must occur after the directive and is separated from the directive by two or more consecutive `-` characters. For example:
+
+<eslint-code-block>
+
+<!--eslint-skip-->
+
+```html
+<script>
+  /* eslint @ota-meshi/svelte/comment-directive: "error", no-undef: "error" */
+</script>
+
+<!-- eslint-disable-next-line no-undef -- Here's a description about why this disabling is necessary. -->
+<UndefComponent />
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [Disabling rules with inline comments]
+
+[disabling rules with inline comments]: https://eslint.org/docs/user-guide/configuring#disabling-rules-with-inline-comments
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/ota-meshi/eslint-plugin-svelte/blob/main/src/rules/comment-directive.ts)
+- [Test source](https://github.com/ota-meshi/eslint-plugin-svelte/blob/main/tests/src/rules/comment-directive.ts)

src/configs/recommended.ts

@@ -6,6 +6,7 @@ export = {
   extends: [baseExtend],
   rules: {
     // @ota-meshi/eslint-plugin-svelte rules
+    "@ota-meshi/svelte/comment-directive": "error",
     "@ota-meshi/svelte/no-at-debug-tags": "warn",
     "@ota-meshi/svelte/no-at-html-tags": "error",
     "@ota-meshi/svelte/no-dupe-else-if-blocks": "error",

src/index.ts

@@ -2,6 +2,7 @@ import type { RuleModule } from "./types"
 import { rules as ruleList } from "./utils/rules"
 import base from "./configs/base"
 import recommended from "./configs/recommended"
+import { processor } from "./processor"
 
 const configs = {
   base,
@@ -16,4 +17,8 @@ const rules = ruleList.reduce((obj, r) => {
 export = {
   configs,
   rules,
+  processors: {
+    ".svelte": processor,
+    svelte: processor,
+  },
 }

src/processor/index.ts

@@ -0,0 +1,41 @@
+import type { Linter } from "eslint"
+import type { Shared } from "../shared"
+import { beginShared, terminateShared } from "../shared"
+export const processor = {
+  preprocess(code: string, filename: string): string[] {
+    if (filename) {
+      beginShared(filename)
+    }
+
+    return [code]
+  },
+
+  postprocess(
+    [messages]: Linter.LintMessage[][],
+    filename: string,
+  ): Linter.LintMessage[] {
+    const shared = terminateShared(filename)
+    if (shared) {
+      return filter(messages, shared)
+    }
+
+    return messages
+  },
+
+  supportsAutofix: true,
+}
+
+/** Filter  */
+function filter(
+  messages: Linter.LintMessage[],
+  shared: Shared,
+): Linter.LintMessage[] {
+  if (shared.commentDirectives.length === 0) {
+    return messages
+  }
+  let filteredMessages = messages
+  for (const cd of shared.commentDirectives) {
+    filteredMessages = cd.filterMessages(filteredMessages)
+  }
+  return filteredMessages
+}