Skip to content

Commit a9441a8

Browse files
baseballyamabaseballyama
committed
implement
1 parent f02b292 commit a9441a8

22 files changed

+124
-54
lines changed

‎docs/rules/html-self-closing.md‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ since: 'v2.5.0'
1414

1515
## :book: Rule Details
1616

17-
You can choose either two styles for elements without content
17+
You can choose either two styles for elements without content.
1818

1919
- always: `<div />`
2020
- never: `<div></div>`
@@ -28,17 +28,14 @@ You can choose either two styles for elements without content
2828
</script>
2929
3030
<!-- ✓ GOOD -->
31-
<div />
3231
<p>Hello</p>
33-
<div><div /></div>
32+
<div></div>
3433
<img />
3534
<svelte:head />
3635
3736
<!-- ✗ BAD -->
38-
<div></div>
39-
<p> </p>
40-
<div><div></div></div>
41-
<img>
37+
<div />
38+
<div><div /></div>
4239
<svelte:body></svelte:body>
4340
```
4441

@@ -52,7 +49,7 @@ presets:
5249
{
5350
"svelte/html-self-closing": [
5451
"error",
55-
"all" // or "html" or "none"
52+
"default" // or "all" or "html" or "none"
5653
]
5754
}
5855
```
@@ -65,8 +62,9 @@ config object:
6562
"error",
6663
{
6764
"void": "always", // or "never" or "ignore"
68-
"normal": "always", // or "never" or "ignore"
69-
"foreign": "always", // or "never" or "ignore"
65+
"normal": "never", // or "always" or "ignore"
66+
"svg": "always", // or "never" or "ignore"
67+
"never": "never", // or "always" or "ignore"
7068
"component": "always", // or "never" or "ignore"
7169
"svelte": "always" // or "never" or "ignore"
7270
}
@@ -76,19 +74,29 @@ config object:
7674

7775
presets:
7876

79-
- `all` - all elements should be self closing (unless they have children)
80-
- `html` - html-compliant - only void elements and svelte special elements should be self closing
81-
- `none` - no elements should be self closing
77+
- `default` - MathML and non-void HTML elements should have a closing tag; otherwise, they should be self-closing.
78+
- `all` - all elements should be self-closing (unless they have children)
79+
- `html` - html-compliant - only void elements and svelte special elements should be self-closing
80+
- `none` - no elements should be self-closing
81+
82+
::: warning Note
83+
We recommend selecting `default` as the preset. Choosing any other option may result in settings that are inconsistent with the compiler when using Svelte5.
84+
:::
8285

8386
config object:
8487

8588
- `void` (`"always"` in default preset)... Style of HTML void elements
86-
- `foreign` (`"always"` in default preset)... Style of foreign elements (SVG and MathML)
89+
- `normal` (`"never"` in default preset)... Style of other elements
90+
- `svg` (`"always"` in default preset)... Style of SVG
91+
- `math` (`never` in default preset)... Style of MathML
8792
- `component` (`"always"` in default preset)... Style of svelte components
8893
- `svelte` (`"always"` in default preset)... Style of svelte special elements (`<svelte:head>`, `<svelte:self>`)
89-
- `normal` (`"always"` in default preset)... Style of other elements
9094

91-
Every config oject option can be set to
95+
::: warning
96+
`foreign` is removed in `eslint-plugin-svelte` v3.
97+
:::
98+
99+
Every config object option can be set to
92100

93101
- "always" (`<div />`)
94102
- "never" (`<div></div>`)

‎packages/eslint-plugin-svelte/src/rules/html-self-closing.ts‎

Lines changed: 39 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,23 @@
11
import type { AST } from 'svelte-eslint-parser';
22
import { createRule } from '../utils/index.js';
3-
import { getNodeName, isVoidHtmlElement, isForeignElement } from '../utils/ast-utils.js';
3+
import {
4+
getNodeName,
5+
isVoidHtmlElement,
6+
isSvgElement,
7+
isMathMLElement
8+
} from '../utils/ast-utils.js';
49
import { getSourceCode } from '../utils/compat.js';
510

611
const TYPE_MESSAGES = {
712
normal: 'HTML elements',
813
void: 'HTML void elements',
9-
foreign: 'foreign (SVG or MathML) elements',
14+
svg: 'SVG elements',
15+
math: 'MathML elements',
1016
component: 'Svelte custom components',
1117
svelte: 'Svelte special elements'
1218
};
1319

14-
type ElementTypes = 'normal' | 'void' | 'foreign' | 'component' | 'svelte';
20+
type ElementTypes = 'normal' | 'void' | 'svg' | 'math' | 'component' | 'svelte';
1521

1622
export default createRule('html-self-closing', {
1723
meta: {
@@ -38,7 +44,10 @@ export default createRule('html-self-closing', {
3844
normal: {
3945
enum: ['never', 'always', 'ignore']
4046
},
41-
foreign: {
47+
svg: {
48+
enum: ['never', 'always', 'ignore']
49+
},
50+
math: {
4251
enum: ['never', 'always', 'ignore']
4352
},
4453
component: {
@@ -58,34 +67,49 @@ export default createRule('html-self-closing', {
5867
]
5968
},
6069
create(context) {
70+
// default
6171
let options = {
6272
void: 'always',
63-
normal: 'always',
64-
foreign: 'always',
73+
normal: 'never',
74+
svg: 'always',
75+
math: 'never',
6576
component: 'always',
6677
svelte: 'always'
6778
};
6879

6980
const option = context.options?.[0];
7081
switch (option) {
71-
case 'none':
82+
case 'all':
7283
options = {
73-
void: 'never',
74-
normal: 'never',
75-
foreign: 'never',
76-
component: 'never',
77-
svelte: 'never'
84+
void: 'always',
85+
normal: 'always',
86+
svg: 'always',
87+
math: 'always',
88+
component: 'always',
89+
svelte: 'always'
7890
};
7991
break;
8092
case 'html':
8193
options = {
8294
void: 'always',
8395
normal: 'never',
84-
foreign: 'always',
96+
svg: 'always',
97+
math: 'never',
8598
component: 'never',
8699
svelte: 'always'
87100
};
88101
break;
102+
case 'none':
103+
options = {
104+
void: 'never',
105+
normal: 'never',
106+
svg: 'never',
107+
math: 'never',
108+
component: 'never',
109+
svelte: 'never'
110+
};
111+
break;
112+
89113
default:
90114
if (typeof option !== 'object' || option === null) break;
91115

@@ -108,7 +132,8 @@ export default createRule('html-self-closing', {
108132
if (node.kind === 'component') return 'component';
109133
if (node.kind === 'special') return 'svelte';
110134
if (isVoidHtmlElement(node)) return 'void';
111-
if (isForeignElement(node)) return 'foreign';
135+
if (isSvgElement(node)) return 'svg';
136+
if (isMathMLElement(node)) return 'math';
112137
return 'normal';
113138
}
114139

‎packages/eslint-plugin-svelte/src/utils/ast-utils.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -567,6 +567,14 @@ export function isForeignElement(node: SvAST.SvelteElement): boolean {
567567
return svgElements.includes(getNodeName(node)) || mathmlElements.includes(getNodeName(node));
568568
}
569569

570+
export function isSvgElement(node: SvAST.SvelteElement): boolean {
571+
return svgElements.includes(getNodeName(node));
572+
}
573+
574+
export function isMathMLElement(node: SvAST.SvelteElement): boolean {
575+
return mathmlElements.includes(getNodeName(node));
576+
}
577+
570578
/** Checks whether the given identifier node is used as an expression. */
571579
export function isExpressionIdentifier(node: TSESTree.Identifier): boolean {
572580
const parent = node.parent;

‎packages/eslint-plugin-svelte/tests/fixtures/rules/html-self-closing/invalid/foreign-never/svelte-never-errors.yaml‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎packages/eslint-plugin-svelte/tests/fixtures/rules/html-self-closing/invalid/foreign-never/_config.json‎ renamed to ‎packages/eslint-plugin-svelte/tests/fixtures/rules/html-self-closing/invalid/math-never/_config.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"options": [
33
{
4-
"foreign": "never"
4+
"math": "never"
55
}
66
]
77
}

‎packages/eslint-plugin-svelte/tests/fixtures/rules/html-self-closing/invalid/math-never/svelte-never-errors.yaml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
- message: Disallow self-closing on MathML elements.
2+
line: 3
3+
column: 13
4+
suggestions: null

‎packages/eslint-plugin-svelte/tests/fixtures/rules/html-self-closing/invalid/foreign-never/svelte-never-input.svelte‎ renamed to ‎packages/eslint-plugin-svelte/tests/fixtures/rules/html-self-closing/invalid/math-never/svelte-never-input.svelte‎

File renamed without changes.

‎packages/eslint-plugin-svelte/tests/fixtures/rules/html-self-closing/invalid/math-never/svelte-never-output.svelte‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<!-- prettier-ignore -->
2+
<svg><path /></svg>
3+
<math><msup ></msup></math>

‎packages/eslint-plugin-svelte/tests/fixtures/rules/html-self-closing/invalid/normal-always/_config.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"options": [
3+
{
4+
"normal": "always"
5+
}
6+
]
7+
}

‎packages/eslint-plugin-svelte/tests/fixtures/rules/html-self-closing/invalid/normal-always/component-never-errors.yaml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
- message: Require self-closing on HTML elements.
2+
line: 3
3+
column: 7
4+
suggestions: null

0 commit comments

Comments
 (0)