Skip to content

Latest commit

 

History

History
76 lines (56 loc) · 1.42 KB

no-arguments-for-html-elements.md

File metadata and controls

76 lines (56 loc) · 1.42 KB

no-arguments-for-html-elements

Angle bracket components use the @argument style and that's why users are more likely to start making this mistake.

For case like:

<option @value="1" />

we have untrackable error like

Uncaught (in promise) TypeError: func is not a function
    at Compilers.compile
    at compile
    at LazyCompiler.add
    at CompilableBlock.compile
    at Object.evaluate
    at AppendOpcodes.evaluate
    at LowLevelVM.evaluateSyscall
    at LowLevelVM.evaluateInner
    at LowLevelVM.evaluateOuter
    at VM.next

This is untraceable for end-users. This linting rule determines if it is a component or not and emits an error if argument is assigned to a lower-case element without the same block name and without dots in notation.

Examples

This rule forbids the following:

<picture @name="Cat" >
<img @src="1" >

This rule allows the following:

<Picture @name="Cat" />
<Img @src="1" />
{{#let (component "bar" as |foo|}}
  <foo @name="1" />
{{/let}}
<foo.some.name @name="1"/>
<@foo @name="2" />
<@foo.bar @name="2" />
<MyComponent>
  <:slot @name="Header"></:slot>
</MyComponent>

Related Rules

References