ember-codemod-sort-invocations

Codemod to sort invocations in templates

1. Features
2. Examples
3. Usage
   • Arguments
   • Limitations
4. Compatibility
5. Contributing
6. License

[!TIP]

You can use ember-template-lint to integrate sorting into CI.

/* .template-lintrc.js */
module.exports = {
  extends: ['recommended'],
  rules: {
    'sort-invocations': true,
  },
};

Features

The codemod helps you standardize templates:

• Component invocations
• Helper invocations
• Modifier invocations

By sorting things that are order-independent, you can more easily refactor code. In addition, sorting removes style differences, so you can review another person's code more effectively.

Examples

Components

The codemod lists things in the following order:

1. Arguments
2. Attributes
3. Modifiers
4. Splattributes

The order clearly shows how the component is customized more and more. Things are alphabetized within each group.

<Ui::Button
  @label="Submit form"
  @type="submit"
  data-test-button
  {{on "click" this.doSomething}}
  ...attributes
/>

[!NOTE]

In rare cases, the order of ...attributes can matter. Similarly, the order can matter when an ARIA attribute has multiple values.

Helpers

The codemod lists the named arguments in alphabetical order.

{{t
  "my-component.description"
  installedOn=this.installationDate
  packageName="ember-source"
  packageVersion="6.0.0"
}}

Modifiers

Similarly for helpers, the codemod lists the named arguments in alphabetical order.

Usage

Step 1. Run codemod.

cd <path/to/your/project>
npx ember-codemod-sort-invocations <arguments>

Step 2. Fix formatting. You can use prettier, prettier-plugin-ember-hbs-tag, and prettier-plugin-ember-template-tag to format templates in *.hbs, hbs tags, and <template> tags, respectively.

pnpm lint:fix

Arguments

You must pass --type to indicate what type of project you have.

npx ember-codemod-sort-invocations --type app
npx ember-codemod-sort-invocations --type v1-addon
npx ember-codemod-sort-invocations --type v2-addon

Pass --root to run the codemod somewhere else (i.e. not in the current directory).

npx ember-codemod-sort-invocations --root <path/to/your/project>

Limitations

It's intended that there are no options for sorting. Alphabetical sort is the simplest for everyone to understand and to apply across different projects. It's also the easiest to maintain.

To better meet your needs, consider cloning the repo and running the codemod locally.

cd <path/to/cloned/repo>

# Compile TypeScript
pnpm build

# Run codemod
./dist/bin/ember-codemod-sort-invocations.js --root <path/to/your/project>

Known issues

1. If you passed an empty string as an argument's value, it has been replaced with {{""}}. Let ember-template-lint fix the formatting change, or do a find-and-replace-all to restore the value.

- <MyComponent @description={{""}} />
+ <MyComponent @description="" />

2. Comments such as {{! @glint-expect-error }} may have shifted. Move them to the correct location.

Compatibility

• Node.js v20 or above

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.