Skip to content

Commit b889329

Browse files
NullVoxPopuliNullVoxPopuli
committed
Fix rule
1 parent 339f907 commit b889329

4 files changed

Lines changed: 39 additions & 211 deletions

File tree

‎README.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -405,12 +405,12 @@ rules in templates can be disabled with eslint directives with mustache or html
405405

406406
### Possible Errors
407407

408-
| Name | Description | 💼 | 🔧 | 💡 |
409-
| :------------------------------------------------------------------------------------------- | :-------------------------------------------------------- | :- | :- | :- |
410-
| [template-no-extra-mut-helper-argument](docs/rules/template-no-extra-mut-helper-argument.md) | disallow passing more than one argument to the mut helper | | | |
411-
| [template-no-jsx-attributes](docs/rules/template-no-jsx-attributes.md) | disallow JSX-style camelCase attributes | | 🔧 | |
412-
| [template-no-shadowed-elements](docs/rules/template-no-shadowed-elements.md) | disallow shadowing of built-in HTML elements | | | |
413-
| [template-no-unbalanced-curlies](docs/rules/template-no-unbalanced-curlies.md) | disallow unbalanced mustache curlies | | | |
408+
| Name                                  | Description | 💼 | 🔧 | 💡 |
409+
| :------------------------------------------------------------------------------------------- | :---------------------------------------------------------------- | :- | :- | :- |
410+
| [template-no-extra-mut-helper-argument](docs/rules/template-no-extra-mut-helper-argument.md) | disallow passing more than one argument to the mut helper | | | |
411+
| [template-no-jsx-attributes](docs/rules/template-no-jsx-attributes.md) | disallow JSX-style camelCase attributes | | 🔧 | |
412+
| [template-no-shadowed-elements](docs/rules/template-no-shadowed-elements.md) | disallow ambiguity with block param names shadowing HTML elements | | | |
413+
| [template-no-unbalanced-curlies](docs/rules/template-no-unbalanced-curlies.md) | disallow unbalanced mustache curlies | | | |
414414

415415
### Routes
416416

‎docs/rules/template-no-shadowed-elements.md‎

Lines changed: 25 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -2,88 +2,46 @@
22

33
<!-- end auto-generated rule header -->
44

5-
Disallows usage patterns where component or block param names shadow built-in HTML elements, creating ambiguity.
6-
7-
## Rule Details
8-
9-
This rule prevents two kinds of shadowing:
10-
11-
1. **PascalCase components that shadow HTML elements** -- In `.gjs`/`.gts` files, a component like `<Form>` shadows the built-in `<form>` element. Use a more descriptive name instead.
12-
2. **Block params that shadow HTML elements** -- When a yielded block param has the same name as an HTML element (e.g. `as |div|`), using `<div>` inside that block is ambiguous. Use a different block param name instead.
5+
This rule prevents ambiguity in situations where a yielded block param which starts with a lower case letter is also used within the block itself as an element name.
136

147
## Examples
158

16-
Examples of **incorrect** code for this rule:
17-
18-
```gjs
19-
<template>
20-
<Form>Content</Form>
21-
</template>
22-
```
23-
24-
```gjs
25-
<template>
26-
<Input @type="text" />
27-
</template>
28-
```
9+
This rule **forbids** the following:
2910

30-
```gjs
31-
<template>
32-
<Select @options={{this.options}} />
33-
</template>
11+
```hbs
12+
<FooBar as |div|>
13+
<div></div>
14+
</FooBar>
3415
```
3516

36-
```gjs
37-
<template>
38-
<FooBar as |div|>
39-
<div></div>
40-
</FooBar>
41-
</template>
42-
```
43-
44-
Examples of **correct** code for this rule:
45-
46-
```gjs
47-
<template>
48-
<CustomForm>Content</CustomForm>
49-
</template>
50-
```
51-
52-
```gjs
53-
<template>
54-
<TextInput @type="text" />
55-
</template>
56-
```
17+
This rule **allows** the following:
5718

58-
```gjs
59-
<template>
60-
<SelectBox @options={{this.options}} />
61-
</template>
19+
```hbs
20+
{{#foo-bar as |Baz|}}
21+
<Baz />
22+
{{/foo-bar}}
6223
```
6324

64-
```gjs
65-
<template>
66-
<form>Regular HTML form</form>
67-
</template>
25+
```hbs
26+
<FooBar as |Baz|>
27+
<Baz />
28+
</FooBar>
6829
```
6930

70-
```gjs
71-
<template>
72-
<FooBar as |Baz|>
73-
<Baz />
74-
</FooBar>
75-
</template>
31+
```hbs
32+
{{#with foo=(component 'blah-zorz') as |Div|}}
33+
<Div />
34+
{{/with}}
7635
```
7736

78-
```gjs
79-
<template>
80-
<Foo as |bar|>
81-
<bar.baz />
82-
</Foo>
83-
</template>
37+
```hbs
38+
<Foo as |bar|>
39+
<bar.baz />
40+
</Foo>
8441
```
8542

8643
## References
8744

88-
- [eslint-plugin-ember template-no-shadowed-elements](https://github.com/ember-cli/eslint-plugin-ember/blob/master/docs/rules/template-no-shadowed-elements.md)
8945
- [Ember guides/block content](https://guides.emberjs.com/release/components/block-content/)
46+
- [rfcs/angle bracket invocation](https://emberjs.github.io/rfcs/0311-angle-bracket-invocation.html)
47+
- [rfcs/named blocks](https://emberjs.github.io/rfcs/0226-named-blocks.html)

‎lib/rules/template-no-shadowed-elements.js‎

Lines changed: 4 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1+
const htmlTags = require('html-tags');
2+
13
/** @type {import('eslint').Rule.RuleModule} */
24
module.exports = {
35
meta: {
46
type: 'problem',
57
docs: {
6-
description: 'disallow shadowing of built-in HTML elements',
8+
description: 'disallow ambiguity with block param names shadowing HTML elements',
79
category: 'Possible Errors',
810
url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-shadowed-elements.md',
911
templateMode: 'both',
@@ -22,118 +24,7 @@ module.exports = {
2224
},
2325

2426
create(context) {
25-
const HTML_ELEMENTS = new Set([
26-
'a',
27-
'abbr',
28-
'address',
29-
'area',
30-
'article',
31-
'aside',
32-
'audio',
33-
'b',
34-
'base',
35-
'bdi',
36-
'bdo',
37-
'blockquote',
38-
'body',
39-
'br',
40-
'button',
41-
'canvas',
42-
'caption',
43-
'cite',
44-
'code',
45-
'col',
46-
'colgroup',
47-
'data',
48-
'datalist',
49-
'dd',
50-
'del',
51-
'details',
52-
'dfn',
53-
'dialog',
54-
'div',
55-
'dl',
56-
'dt',
57-
'em',
58-
'embed',
59-
'fieldset',
60-
'figcaption',
61-
'figure',
62-
'footer',
63-
'form',
64-
'h1',
65-
'h2',
66-
'h3',
67-
'h4',
68-
'h5',
69-
'h6',
70-
'head',
71-
'header',
72-
'hgroup',
73-
'hr',
74-
'html',
75-
'i',
76-
'iframe',
77-
'img',
78-
'input',
79-
'ins',
80-
'kbd',
81-
'label',
82-
'legend',
83-
'li',
84-
'link',
85-
'main',
86-
'map',
87-
'mark',
88-
'meta',
89-
'meter',
90-
'nav',
91-
'noscript',
92-
'object',
93-
'ol',
94-
'optgroup',
95-
'option',
96-
'output',
97-
'p',
98-
'param',
99-
'picture',
100-
'pre',
101-
'progress',
102-
'q',
103-
'rp',
104-
'rt',
105-
'ruby',
106-
's',
107-
'samp',
108-
'script',
109-
'section',
110-
'select',
111-
'small',
112-
'source',
113-
'span',
114-
'strong',
115-
'style',
116-
'sub',
117-
'summary',
118-
'sup',
119-
'table',
120-
'tbody',
121-
'td',
122-
'template',
123-
'textarea',
124-
'tfoot',
125-
'th',
126-
'thead',
127-
'time',
128-
'title',
129-
'tr',
130-
'track',
131-
'u',
132-
'ul',
133-
'var',
134-
'video',
135-
'wbr',
136-
]);
27+
const HTML_ELEMENTS = new Set(htmlTags);
13728

13829
const blockParamScope = [];
13930

‎tests/lib/rules/template-no-shadowed-elements.js‎

Lines changed: 4 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -16,31 +16,8 @@ const ruleTester = new RuleTester({
1616

1717
ruleTester.run('template-no-shadowed-elements', rule, {
1818
valid: [
19-
`<template>
20-
<MyButton>Click</MyButton>
21-
</template>`,
22-
`<template>
23-
<MyComponent />
24-
</template>`,
25-
`<template>
26-
<CustomForm />
27-
</template>`,
28-
`<template>
29-
<Form>Content</Form>
30-
</template>`,
31-
`<template>
32-
<Input @type="text" />
33-
</template>`,
34-
`<template>
35-
<Select @options={{this.options}} />
36-
</template>`,
37-
`<template>
38-
<Textarea @value={{this.text}} />
39-
</template>`,
40-
`<template>
41-
<div>Content</div>
42-
</template>`,
43-
19+
'<template><div>content</div></template>',
20+
'<template><form><input /></form></template>',
4421
'<template>{{#foo-bar as |Baz|}}<Baz />{{/foo-bar}}</template>',
4522
'<template><FooBar as |Baz|><Baz /></FooBar></template>',
4623
'<template>{{#with foo=(component "blah-zorz") as |Div|}}<Div></Div>{{/with}}</template>',
@@ -71,6 +48,8 @@ const hbsRuleTester = new RuleTester({
7148

7249
hbsRuleTester.run('template-no-shadowed-elements', rule, {
7350
valid: [
51+
'<div>content</div>',
52+
'<form><input /></form>',
7453
'{{#foo-bar as |Baz|}}<Baz />{{/foo-bar}}',
7554
'<FooBar as |Baz|><Baz /></FooBar>',
7655
'{{#with foo=(component "blah-zorz") as |Div|}}<Div></Div>{{/with}}',

0 commit comments

Comments
 (0)