Extract rule: template-no-unnecessary-concat

Author: NullVoxPopuli

README.md

@@ -256,6 +256,7 @@ rules in templates can be disabled with eslint directives with mustache or html
 | [template-no-obsolete-elements](docs/rules/template-no-obsolete-elements.md)                                       | disallow obsolete HTML elements                                              |    |    |    |
 | [template-no-outlet-outside-routes](docs/rules/template-no-outlet-outside-routes.md)                               | disallow {{outlet}} outside of route templates                               |    |    |    |
 | [template-no-page-title-component](docs/rules/template-no-page-title-component.md)                                 | disallow usage of ember-page-title component                                 |    |    |    |
+| [template-no-unnecessary-concat](docs/rules/template-no-unnecessary-concat.md)                                     | disallow unnecessary string concatenation                                    |    | 🔧 |    |
 | [template-no-unnecessary-curly-parens](docs/rules/template-no-unnecessary-curly-parens.md)                         | disallow unnecessary parentheses enclosing statements in curlies             |    | 🔧 |    |
 | [template-no-unused-block-params](docs/rules/template-no-unused-block-params.md)                                   | disallow unused block parameters in templates                                |    |    |    |
 | [template-no-valueless-arguments](docs/rules/template-no-valueless-arguments.md)                                   | disallow valueless named arguments                                           |    |    |    |

docs/rules/template-no-unnecessary-concat.md

@@ -0,0 +1,48 @@
+# ember/template-no-unnecessary-concat
+
+🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
+
+<!-- end auto-generated rule header -->
+
+💅 The `extends: 'stylistic'` property in a configuration file enables this rule.
+
+This rule forbids unnecessary use of quotes (`""`) around expressions like `{{myValue}}`.
+
+## Examples
+
+This rule **forbids** the following:
+
+```gjs
+<template>
+  <span class="{{if errors.length 'text-danger' 'text-grey'}}">
+
+  <img src="{{customSrc}}" alt="{{customAlt}}">
+
+  <label for="{{concat elementId "-date"}}">
+</template>
+```
+
+This rule **allows** the following:
+
+```gjs
+<template>
+  <span class={{if errors.length 'text-danger' 'text-grey'}}>
+
+  <img src={{customSrc}} alt={{customAlt}}>
+
+  <label for={{concat elementId "-date"}}>
+</template>
+```
+
+## Migration
+
+Use regexp find-and-replace to fix existing violations of this rule:
+
+| Before           | After     |
+| ---------------- | --------- |
+| `="{{([^}]+)}}"` | `={{$1}}` |
+
+## References
+
+- [Handlebars docs/expressions](https://handlebarsjs.com/guide/expressions.html)
+- [Ember api/concat helper](https://api.emberjs.com/ember/release/classes/Ember.Templates.helpers/methods/concat?anchor=concat)

lib/rules/template-no-unnecessary-concat.js

@@ -0,0 +1,43 @@
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'disallow unnecessary string concatenation',
+      category: 'Best Practices',
+      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-unnecessary-concat.md',
+      templateMode: 'both',
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      unnecessary: 'Unnecessary string concatenation. Use {{inner}} instead of {{outer}}.',
+    },
+    originallyFrom: {
+      name: 'ember-template-lint',
+      rule: 'lib/rules/no-unnecessary-concat.js',
+      docs: 'docs/rule/no-unnecessary-concat.md',
+      tests: 'test/unit/rules/no-unnecessary-concat-test.js',
+    },
+  },
+  create(context) {
+    return {
+      GlimmerConcatStatement(node) {
+        if (node.parts?.length === 1) {
+          const sourceCode = context.sourceCode;
+          context.report({
+            node,
+            messageId: 'unnecessary',
+            data: {
+              inner: sourceCode.getText(node.parts[0]),
+              outer: sourceCode.getText(node),
+            },
+            fix(fixer) {
+              return fixer.replaceText(node, sourceCode.getText(node.parts[0]));
+            },
+          });
+        }
+      },
+    };
+  },
+};

tests/lib/rules/template-no-unnecessary-concat.js

@@ -0,0 +1,65 @@
+const rule = require('../../../lib/rules/template-no-unnecessary-concat');
+const RuleTester = require('eslint').RuleTester;
+
+const ruleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser'),
+  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+ruleTester.run('template-no-unnecessary-concat', rule, {
+  valid: [
+    '<template><div class="foo {{bar}}"></div></template>',
+    '<template><div class={{clazz}}></div></template>',
+    '<template><div class="first {{second}}"></div></template>',
+    '<template>"{{foo}}"</template>',
+  ],
+  invalid: [
+    {
+      code: '<template><div class="{{foo}}"></div></template>',
+      output: '<template><div class={{foo}}></div></template>',
+      errors: [{ messageId: 'unnecessary' }],
+    },
+
+    {
+      code: '<template><div class="{{clazz}}"></div></template>',
+      output: '<template><div class={{clazz}}></div></template>',
+      errors: [{ messageId: 'unnecessary' }],
+    },
+    {
+      code: '<template><img src="{{url}}" alt="{{t "alternate-text"}}"></template>',
+      output: '<template><img src={{url}} alt={{t "alternate-text"}}></template>',
+      errors: [{ messageId: 'unnecessary' }, { messageId: 'unnecessary' }],
+    },
+  ],
+});
+
+const hbsRuleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser/hbs'),
+  parserOptions: {
+    ecmaVersion: 2022,
+    sourceType: 'module',
+  },
+});
+
+hbsRuleTester.run('template-no-unnecessary-concat', rule, {
+  valid: ['<div class={{clazz}}></div>', '<div class="first {{second}}"></div>', '"{{foo}}"'],
+  invalid: [
+    {
+      code: '<div class="{{clazz}}"></div>',
+      output: '<div class={{clazz}}></div>',
+      errors: [
+        { message: 'Unnecessary string concatenation. Use {{clazz}} instead of "{{clazz}}".' },
+      ],
+    },
+    {
+      code: '<img src="{{url}}" alt="{{t "alternate-text"}}">',
+      output: '<img src={{url}} alt={{t "alternate-text"}}>',
+      errors: [
+        { message: 'Unnecessary string concatenation. Use {{url}} instead of "{{url}}".' },
+        {
+          message:
+            'Unnecessary string concatenation. Use {{t "alternate-text"}} instead of "{{t "alternate-text"}}".',
+        },
+      ],
+    },
+  ],
+});