template-no-curly-component-invocation.md

ember/template-no-curly-component-invocation

💼 This rule is enabled in the 📋 template-lint-migration config.

🔧 This rule is automatically fixable by the --fix CLI option.

HBS Only: This rule applies to classic .hbs template files only (loose mode). It is not relevant for gjs/gts files (strict mode), where these patterns cannot occur.

Disallows curly component invocation syntax. Use angle bracket syntax instead.

There are two ways to invoke a component in a template: curly component syntax ({{my-component}}), and angle bracket syntax (<MyComponent />). The difference between them is syntactical. You should favour angle bracket syntax as it improves readability of templates, i.e. disambiguates components from helpers, and is also the future direction Ember is going with the Octane Edition.

This rule checks all the curly braces in your app and warns about those that look like they could be component invocations.

Examples

This rule forbids the following:

{{foo-bar}}

{{nested/component}}

{{#foo-bar}}content{{/foo-bar}}

This rule allows the following:

{{foo bar}}

<FooBar />

<Nested::Component />

Migration

• use https://github.com/ember-codemods/ember-angle-brackets-codemod

Configuration

This rule accepts an options object with the following properties:

• allow (default: []) - Array of component names to allow in curly syntax
• disallow (default: []) - Array of component names to disallow in curly syntax
• requireDash (default: false) - Require dashes in component names
• noImplicitThis (default: true) - Don't allow implicit this references

// .eslintrc.js
module.exports = {
  rules: {
    'ember/template-no-curly-component-invocation': [
      'error',
      {
        allow: ['some-helper'],
        disallow: [],
      },
    ],
  },
};

References

• Ember Guides - Angle Bracket Syntax