Skip to content

Commit ca97301

Browse files
waynzhwaynzh
authored
feat(no-restricted-html-elements): support all element types (vuejs#2755)
1 parent 66dab39 commit ca97301

File tree

5 files changed

+89
-11
lines changed

5 files changed

+89
-11
lines changed

‎.changeset/true-oranges-heal.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'eslint-plugin-vue': patch
3+
---
4+
5+
[vue/no-restricted-html-elements](https://eslint.vuejs.org/rules/no-restricted-html-elements.html) now also checks SVG and MathML elements.

‎docs/rules/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -245,7 +245,7 @@ For example:
245245
| [vue/no-restricted-component-names] | disallow specific component names | :bulb: | :hammer: |
246246
| [vue/no-restricted-component-options] | disallow specific component option | | :hammer: |
247247
| [vue/no-restricted-custom-event] | disallow specific custom event | :bulb: | :hammer: |
248-
| [vue/no-restricted-html-elements] | disallow specific HTML elements | | :hammer: |
248+
| [vue/no-restricted-html-elements] | disallow specific elements | | :hammer: |
249249
| [vue/no-restricted-props] | disallow specific props | :bulb: | :hammer: |
250250
| [vue/no-restricted-static-attribute] | disallow specific attribute | | :hammer: |
251251
| [vue/no-restricted-v-bind] | disallow specific argument in `v-bind` | | :hammer: |

‎docs/rules/no-restricted-html-elements.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@
22
pageClass: rule-details
33
sidebarDepth: 0
44
title: vue/no-restricted-html-elements
5-
description: disallow specific HTML elements
5+
description: disallow specific elements
66
since: v8.6.0
77
---
88

99
# vue/no-restricted-html-elements
1010

11-
> disallow specific HTML elements
11+
> disallow specific elements
1212
1313
## :book: Rule Details
1414

15-
This rule allows you to specify HTML elements that you don't want to use in your application.
15+
This rule allows you to specify HTML, SVG, and MathML elements that you don't want to use in your application.
1616

1717
<eslint-code-block :rules="{'vue/no-restricted-html-elements': ['error', 'marquee', 'button'] }">
1818

@@ -33,7 +33,7 @@ This rule allows you to specify HTML elements that you don't want to use in your
3333

3434
## :wrench: Options
3535

36-
This rule takes a list of strings, where each string is an HTML element name to be restricted:
36+
This rule takes a list of strings, where each string is an element name to be restricted:
3737

3838
```json
3939
{
@@ -73,7 +73,7 @@ Alternatively, the rule also accepts objects.
7373

7474
The following properties can be specified for the object.
7575

76-
- `element` ... Specify the HTML element or an array of HTML elements.
76+
- `element` ... Specify the element name or an array of element names.
7777
- `message` ... Specify an optional custom message.
7878

7979
### `{ "element": "marquee" }, { "element": "a" }`

‎lib/rules/no-restricted-html-elements.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ module.exports = {
1010
meta: {
1111
type: 'suggestion',
1212
docs: {
13-
description: 'disallow specific HTML elements',
13+
description: 'disallow specific elements',
1414
categories: undefined,
1515
url: 'https://eslint.vuejs.org/rules/no-restricted-html-elements.html'
1616
},
@@ -40,7 +40,7 @@ module.exports = {
4040
minItems: 0
4141
},
4242
messages: {
43-
forbiddenElement: 'Unexpected use of forbidden HTML element {{name}}.',
43+
forbiddenElement: 'Unexpected use of forbidden element {{name}}.',
4444
// eslint-disable-next-line eslint-plugin/report-message-format
4545
customMessage: '{{message}}'
4646
}
@@ -55,7 +55,11 @@ module.exports = {
5555
* @param {VElement} node
5656
*/
5757
VElement(node) {
58-
if (!utils.isHtmlElementNode(node)) {
58+
if (
59+
!utils.isHtmlElementNode(node) &&
60+
!utils.isSvgElementNode(node) &&
61+
!utils.isMathElementNode(node)
62+
) {
5963
return
6064
}
6165

‎tests/lib/rules/no-restricted-html-elements.js‎

Lines changed: 71 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,18 @@ tester.run('no-restricted-html-elements', rule, {
3636
filename: 'test.vue',
3737
code: '<template><main><article></article></main></template>',
3838
options: [{ element: ['div', 'span'] }]
39+
},
40+
// SVG
41+
{
42+
filename: 'test.vue',
43+
code: '<template><svg><rect width="100" height="100"></rect></svg></template>',
44+
options: ['circle']
45+
},
46+
// Math
47+
{
48+
filename: 'test.vue',
49+
code: '<template><math><mn>2</mn></math></template>',
50+
options: ['mi']
3951
}
4052
],
4153
invalid: [
@@ -45,7 +57,7 @@ tester.run('no-restricted-html-elements', rule, {
4557
options: ['button'],
4658
errors: [
4759
{
48-
message: 'Unexpected use of forbidden HTML element button.',
60+
message: 'Unexpected use of forbidden element button.',
4961
line: 1,
5062
column: 16
5163
}
@@ -57,7 +69,7 @@ tester.run('no-restricted-html-elements', rule, {
5769
options: ['div'],
5870
errors: [
5971
{
60-
message: 'Unexpected use of forbidden HTML element div.',
72+
message: 'Unexpected use of forbidden element div.',
6173
line: 1,
6274
column: 11
6375
}
@@ -96,6 +108,63 @@ tester.run('no-restricted-html-elements', rule, {
96108
column: 18
97109
}
98110
]
111+
},
112+
// SVG
113+
{
114+
filename: 'test.vue',
115+
code: '<template><svg><circle r="50"></circle></svg></template>',
116+
options: ['circle'],
117+
errors: [
118+
{
119+
message: 'Unexpected use of forbidden element circle.',
120+
line: 1,
121+
column: 16
122+
}
123+
]
124+
},
125+
{
126+
filename: 'test.vue',
127+
code: '<template><svg><rect width="100" height="100"></rect><path d="M10,10 L20,20"></path></svg></template>',
128+
options: [
129+
{ element: ['rect', 'path'], message: 'Use simplified shapes instead' }
130+
],
131+
errors: [
132+
{
133+
message: 'Use simplified shapes instead',
134+
line: 1,
135+
column: 16
136+
},
137+
{
138+
message: 'Use simplified shapes instead',
139+
line: 1,
140+
column: 54
141+
}
142+
]
143+
},
144+
// Math
145+
{
146+
filename: 'test.vue',
147+
code: '<template><math><mfrac><mn>1</mn><mn>2</mn></mfrac></math></template>',
148+
options: ['mfrac'],
149+
errors: [
150+
{
151+
message: 'Unexpected use of forbidden element mfrac.',
152+
line: 1,
153+
column: 17
154+
}
155+
]
156+
},
157+
{
158+
filename: 'test.vue',
159+
code: '<template><math><mi>x</mi><mo>=</mo><mn>5</mn></math></template>',
160+
options: [{ element: 'mo', message: 'Avoid using operators directly' }],
161+
errors: [
162+
{
163+
message: 'Avoid using operators directly',
164+
line: 1,
165+
column: 27
166+
}
167+
]
99168
}
100169
]
101170
})

0 commit comments

Comments
 (0)