Extract rule: template-no-unnecessary-curly-strings

Author: NullVoxPopuli

README.md

@@ -431,6 +431,12 @@ rules in templates can be disabled with eslint directives with mustache or html
 | [no-unnecessary-service-injection-argument](docs/rules/no-unnecessary-service-injection-argument.md) | disallow unnecessary argument when injecting services             |    | 🔧 |    |
 | [no-unused-services](docs/rules/no-unused-services.md)                                               | disallow unused service injections (see rule doc for limitations) |    |    | 💡 |
 
+### Style
+
+| Name                                                                                         | Description                                                | 💼 | 🔧 | 💡 |
+| :------------------------------------------------------------------------------------------- | :--------------------------------------------------------- | :- | :- | :- |
+| [template-no-unnecessary-curly-strings](docs/rules/template-no-unnecessary-curly-strings.md) | disallow unnecessary curly braces in string interpolations |    | 🔧 |    |
+
 ### Stylistic Issues
 
 | Name                                                                           | Description                                                                    | 💼 | 🔧 | 💡 |

docs/rules/template-no-unnecessary-curly-strings.md

@@ -0,0 +1,37 @@
+# ember/template-no-unnecessary-curly-strings
+
+🔧 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 -->
+
+Strings need not be wrapped in curly braces (mustache expressions).
+
+## Rule Details
+
+This rule detects unnecessary mustache expressions wrapping simple string literals. It checks both **attribute values** and **text content**.
+
+## Examples
+
+This rule **forbids** the following:
+
+```gjs
+<template><FooBar class={{'btn'}} /></template>
+```
+
+```gjs
+<template><FooBar class="btn">{{"Hello"}}</FooBar></template>
+```
+
+This rule **allows** the following:
+
+```gjs
+<template><FooBar class='btn' /></template>
+```
+
+```gjs
+<template><FooBar class='btn'>Hello</FooBar></template>
+```
+
+## References
+
+- [Handlebars expressions](https://handlebarsjs.com/guide/expressions.html)

lib/rules/template-no-unnecessary-curly-strings.js

@@ -0,0 +1,59 @@
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'disallow unnecessary curly braces in string interpolations',
+      category: 'Style',
+      recommendedGjs: false,
+      recommendedGts: false,
+      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-unnecessary-curly-strings.md',
+      templateMode: 'both',
+    },
+    fixable: 'code',
+    schema: [],
+    messages: { unnecessary: 'Unnecessary curly braces in string.' },
+    originallyFrom: {
+      name: 'ember-template-lint',
+      rule: 'lib/rules/no-unnecessary-curly-strings.js',
+      docs: 'docs/rule/no-unnecessary-curly-strings.md',
+      tests: 'test/unit/rules/no-unnecessary-curly-strings-test.js',
+    },
+  },
+  create(context) {
+    const sourceCode = context.sourceCode || context.getSourceCode();
+
+    return {
+      GlimmerAttrNode(node) {
+        if (
+          node.value?.type === 'GlimmerMustacheStatement' &&
+          node.value.path?.type === 'GlimmerStringLiteral'
+        ) {
+          const strNode = node.value.path;
+          const strValue = strNode.value || strNode.original;
+          context.report({
+            node: node.value,
+            messageId: 'unnecessary',
+            fix(fixer) {
+              const strSource = sourceCode.getText(strNode);
+              const quoteChar = strSource[0] === "'" ? "'" : '"';
+              return fixer.replaceText(node.value, `${quoteChar}${strValue}${quoteChar}`);
+            },
+          });
+        }
+      },
+      GlimmerMustacheStatement(node) {
+        if (node.path?.type === 'GlimmerStringLiteral' && node.parent?.type !== 'GlimmerAttrNode') {
+          const strValue = node.path.value || node.path.original;
+          context.report({
+            node,
+            messageId: 'unnecessary',
+            fix(fixer) {
+              return fixer.replaceText(node, strValue);
+            },
+          });
+        }
+      },
+    };
+  },
+};

tests/lib/rules/template-no-unnecessary-curly-strings.js

@@ -0,0 +1,88 @@
+const rule = require('../../../lib/rules/template-no-unnecessary-curly-strings');
+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-curly-strings', rule, {
+  valid: [
+    '<template><div class="foo"></div></template>',
+    '<template><FooBar class="btn" /></template>',
+    '<template>{{foo}}</template>',
+    '<template>{{(foo)}}</template>',
+    '<template>{{this.calculate 1 2 op="add"}}</template>',
+    '<template>{{get address part}}</template>',
+    '<template>foo</template>',
+    '<template>"foo"</template>',
+    '<template><FooBar value=12345 /></template>',
+    '<template><FooBar value=null /></template>',
+    '<template><FooBar value=true /></template>',
+    '<template><FooBar value=undefined /></template>',
+    '<template><FooBar value={{12345}} /></template>',
+    '<template><FooBar value={{null}} /></template>',
+    '<template><FooBar value={{true}} /></template>',
+    '<template><FooBar value={{undefined}} /></template>',
+  ],
+  invalid: [
+    {
+      code: '<template><div class={{"foo"}}></div></template>',
+      output: '<template><div class="foo"></div></template>',
+      errors: [{ messageId: 'unnecessary' }],
+    },
+
+    {
+      code: '<template><FooBar class={{"btn"}} @fooArg={{\'barbaz\'}} /></template>',
+      output: '<template><FooBar class="btn" @fooArg=\'barbaz\' /></template>',
+      errors: [{ messageId: 'unnecessary' }, { messageId: 'unnecessary' }],
+    },
+    {
+      code: '<template><FooBar class="btn">{{"Foo"}}</FooBar></template>',
+      output: '<template><FooBar class="btn">Foo</FooBar></template>',
+      errors: [{ messageId: 'unnecessary' }],
+    },
+  ],
+});
+
+const hbsRuleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser/hbs'),
+  parserOptions: {
+    ecmaVersion: 2022,
+    sourceType: 'module',
+  },
+});
+
+hbsRuleTester.run('template-no-unnecessary-curly-strings', rule, {
+  valid: [
+    '<FooBar class="btn" />',
+    '{{foo}}',
+    '{{(foo)}}',
+    '{{this.calculate 1 2 op="add"}}',
+    '{{get address part}}',
+    'foo',
+    '"foo"',
+    '<FooBar value=12345 />',
+    '<FooBar value=null />',
+    '<FooBar value=true />',
+    '<FooBar value=undefined />',
+    '<FooBar value={{12345}} />',
+    '<FooBar value={{null}} />',
+    '<FooBar value={{true}} />',
+    '<FooBar value={{undefined}} />',
+  ],
+  invalid: [
+    {
+      code: '<FooBar class={{"btn"}} @fooArg={{\'barbaz\'}} />',
+      output: '<FooBar class="btn" @fooArg=\'barbaz\' />',
+      errors: [
+        { message: 'Unnecessary curly braces in string.' },
+        { message: 'Unnecessary curly braces in string.' },
+      ],
+    },
+    {
+      code: '<FooBar class="btn">{{"Foo"}}</FooBar>',
+      output: '<FooBar class="btn">Foo</FooBar>',
+      errors: [{ message: 'Unnecessary curly braces in string.' }],
+    },
+  ],
+});