feat(html-self-closing): add configuration presets (#216)

* feat(html-self-closing)!: add configuration presets

* fix(html-self-closing): type errors

* fix(html-self-closing): typo

* fix(html-self-closing): lint error

* test(html-self-closing): migrate test configs to new version

* test(html-self-closing): add preset tests

* fix(html-self-closing):  lint errors

* fix(html-self-closing): lint errors

* docs(html-self-closing): new confiuration

* feat(html-self-closing)!: make configuration [0] preset or override config

* fix(html-self-closing): typo

* fix(html-self-closing): lint errors

* docs(html-self-closing): update configuration section

* chore(html-self-closing): reauested changes

* chore(html-self-closing): lint errors

* chore(html-self-closing): lint errors

* fix(html-sef-closing): replace oneOf with AnyOf

* test(html-sef-closing): generate test outputs for html preset test

* test(html-self-closing): test errors and outputs

* test(html-self-closing): fix preset test outputs

* test(html-self-closing): fix typo

* test(html-self-closing): typo

* test(html-self-closing): typo

* test(html-self-closing): typo

* test(html-self-closing) : seitched elements and componenta error location

* test(html-self-closing): replace void components wth goid elements

* tesr(html-self-closing): fix test outputs

* chore: tiny changes

* Create swift-ads-type.md

Co-authored-by: JounQin <admin@1stg.me>
Co-authored-by: Yosuke Ota <otameshiyo23@gmail.com>

Author: 3 people

.changeset/swift-ads-type.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-svelte": minor
+---
+
+feat(html-self-closing): add configuration presets

.gitignore

@@ -50,8 +50,8 @@ jspm_packages/
 # Optional npm cache directory
 .npm
 
-# Optional eslint cache
-.eslintcache
+# Optional eslint/stylelint cache, etc
+.*cache
 
 # Microbundle cache
 .rpt2_cache/

docs/rules/html-self-closing.md

@@ -50,26 +50,43 @@ You can choose either two styles for elements without content
 
 ## :wrench: Options
 
+presets:
+```jsonc
+{
+  "svelte/html-self-closing": [
+    "error",
+    "all", // or "html" or "none"
+  ]
+}
+```
+
+config object:
 ```jsonc
 {
   "svelte/html-self-closing": [
     "error",
     {
-      "void": "always", // or "always" or "ignore"
+      "void": "always", // or "never" or "ignore"
       "normal": "always", // or "never" or "ignore"
       "component": "always", // or "never" or "ignore"
-      "svelte": "always" // or "never" or "ignore"
+      "svelte": "always" // or "never" or "igore"
     }
   ]
 }
 ```
 
-- `void` (`"always"` by default)... Style of HTML void elements
-- `component` (`"always"` by default)... Style of svelte components
-- `svelte` (`"always"` by default)... Style of svelte special elements (`<svelte:head>`, `<svelte:self>`)
-- `normal` (`"always"` by default)... Style of other elements
+presets:
+- `all` - all elements should be self closing (unless they have children)
+- `html` - html-compliant - only void elements and svelte special elements should be self closing
+- `none` - no elements should be self closing
+
+config object:
+- `void` (`"always"` in default preset)... Style of HTML void elements
+- `component` (`"always"` in default preset)... Style of svelte components
+- `svelte` (`"always"` in  default preset)... Style of svelte special elements (`<svelte:head>`, `<svelte:self>`)
+- `normal` (`"always"` in default preset)... Style of other elements
 
-Every option can be set to
+Every config oject option can be set to
 - "always" (`<div />`)
 - "never" (`<div></div>`)
 - "ignore" (either `<div />` or `<div></div>`)

package.json

@@ -171,7 +171,7 @@
     "access": "public"
   },
   "typeCoverage": {
-    "atLeast": 98.62,
+    "atLeast": 98.63,
     "cache": true,
     "detail": true,
     "ignoreAsAssertion": true,

src/rules/html-self-closing.ts

@@ -27,32 +27,66 @@ export default createRule("html-self-closing", {
     },
     schema: [
       {
-        type: "object",
-        properties: {
-          void: {
-            enum: ["never", "always", "ignore"],
+        anyOf: [
+          {
+            properties: {
+              void: {
+                enum: ["never", "always", "ignore"],
+              },
+              normal: {
+                enum: ["never", "always", "ignore"],
+              },
+              component: {
+                enum: ["never", "always", "ignore"],
+              },
+              svelte: {
+                enum: ["never", "always", "ignore"],
+              },
+            },
+            additionalProperties: false,
           },
-          normal: {
-            enum: ["never", "always", "ignore"],
+          {
+            enum: ["all", "html", "none"],
           },
-          component: {
-            enum: ["never", "always", "ignore"],
-          },
-          svelte: {
-            enum: ["never", "always", "ignore"],
-          },
-        },
-        additionalProperties: false,
+        ],
       },
     ],
   },
   create(ctx) {
-    const options = {
+    let options = {
       void: "always",
       normal: "always",
       component: "always",
       svelte: "always",
-      ...ctx.options?.[0],
+    }
+
+    const option = ctx.options?.[0]
+    switch (option) {
+      case "none":
+        options = {
+          void: "never",
+          normal: "never",
+          component: "never",
+          svelte: "never",
+        }
+        break
+      case "html":
+        options = {
+          void: "always",
+          normal: "never",
+          component: "never",
+          svelte: "always",
+        }
+        break
+      default:
+        if (typeof option !== "object" || option === null) break
+
+        options = {
+          ...options,
+          ...option,
+        }
+
+        break
     }
 
     /**

tests/fixtures/rules/html-self-closing/invalid/presets/html/_config.json

@@ -0,0 +1,3 @@
+{
+  "options": ["html"]
+}

tests/fixtures/rules/html-self-closing/invalid/presets/html/preset-html-errors.json

@@ -0,0 +1,22 @@
+[
+  {
+    "message": "Disallow self-closing on HTML elements.",
+    "line": 3,
+    "column": 3
+  },
+  {
+    "message": "Require self-closing on HTML void elements.",
+    "line": 4,
+    "column": 3
+  },
+  {
+    "message": "Disallow self-closing on Svelte custom components.",
+    "line": 5,
+    "column": 3
+  },
+  {
+    "message": "Require self-closing on Svelte special elements.",
+    "line": 8,
+    "column": 1
+  }
+]

tests/fixtures/rules/html-self-closing/invalid/presets/html/preset-html-input.svelte

@@ -0,0 +1,8 @@
+<!-- prettier-ignore -->
+<div>
+  <div />
+  <img>
+  <TestComponent />
+</div>
+<!-- prettier-ignore -->
+<svelte:head></svelte:head>

tests/fixtures/rules/html-self-closing/invalid/presets/html/preset-html-output.svelte

@@ -0,0 +1,8 @@
+<!-- prettier-ignore -->
+<div>
+  <div ></div>
+  <img/>
+  <TestComponent ></TestComponent>
+</div>
+<!-- prettier-ignore -->
+<svelte:head/>

tests/fixtures/rules/html-self-closing/invalid/presets/none/_config.json

@@ -0,0 +1,3 @@
+{
+  "options": ["none"]
+}