Skip to content

Latest commit

 

History

History
80 lines (55 loc) · 2.98 KB

attribute-order.md

File metadata and controls

80 lines (55 loc) · 2.98 KB
Raw

attribute-order

🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

Element attributes must be ordered. By default, the order is:

  • arguments
  • attributes
  • element modifiers

Note that this ordering only applies to angle bracket invocation syntax, as mustache/curly invocation syntax only includes a single type attributes.

Examples

This rule forbids the following (in the default ordering):

<MyComponent data-test-id="Hello" @name="World" />
<MyComponent {{did-render this.someAction}} @name="Hello" />
<MyComponent {{did-render this.someAction}} data-test-id="World" />
<MyComponent a="2" @b="1" />

This rule allows the following:

<MyComponent @name="1" bar="baz" {{did-render this.someAction}} ...attributes aria-role="button" />
<MyComponent @name="1" aria-role="button" />
<MyComponent @name="1" ...attributes />
<MyComponent @name="1" {{did-render this.someAction}} />
<MyComponent @name="1" bar="baz" />

Configuration

The following values are valid configuration:

  • boolean -- true to enable / false to disable
  • object -- An object with the following keys:
    • order -- An array of attribute types (defaults to ['arguments', 'attributes', 'modifiers']
      • Note that curly component invocations will default to ['attributes'] since they don’t have other attribute types
  • alphabetize -- true to enforce ordering attributes alphabetically (defaults to true)

Note that the position of ...attributes (“splattributes”) is significant: attributes that appear before ...attributes can be overridden by values present in ...attributes but attributes appearing after ...attributes will always take precedence and cannot be overridden by ...attributes. For this reason, nodes which contain ...attributes surrounded by other attribute types cannot be safely reordered without causing breakages. If ...attributes is the first or last attribute of a node however, the splattributes will be left in the same position and sorting for the rest of the attribute types will be ordered as normal.

An example with splattributes where ordering can occur automatically:

<Component @value="5" data-test-foo @change={{this.foo}} local-class="foo" {{on "click" this.foo}} ...attributes as |sth|>content</Component>

Fixed version:

<Component @value="5" @change={{this.foo}} data-test-foo local-class="foo" {{on "click" this.foo}} ...attributes as |sth|>content</Component>

A different example with splattributes where ordering can not occur automatically:

<div bar="baz" {{did-render this.ok}} ...attributes label="foo"></div>

References