Merge pull request #2588 from NullVoxPopuli/nvp/template-lint-extract-rule-template-no-unnecessary-curly-strings

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,33 @@
+# 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).
+
+## 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,57 @@
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'disallow unnecessary curly braces in string interpolations',
+      category: 'Style',
+      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 around 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,68 @@
+const rule = require('../../../lib/rules/template-no-unnecessary-curly-strings');
+const RuleTester = require('eslint').RuleTester;
+
+const validHbs = [
+  '<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}} />',
+];
+
+const invalidHbs = [
+  {
+    code: '<FooBar class={{"btn"}} @fooArg={{\'barbaz\'}} />',
+    output: '<FooBar class="btn" @fooArg=\'barbaz\' />',
+    errors: [{ messageId: 'unnecessary' }, { messageId: 'unnecessary' }],
+  },
+  {
+    code: '<FooBar class="btn">{{"Foo"}}</FooBar>',
+    output: '<FooBar class="btn">Foo</FooBar>',
+    errors: [{ messageId: 'unnecessary' }],
+  },
+];
+
+function wrapTemplate(entry) {
+  if (typeof entry === 'string') {
+    return `<template>${entry}</template>`;
+  }
+
+  return {
+    ...entry,
+    code: `<template>${entry.code}</template>`,
+    output: entry.output ? `<template>${entry.output}</template>` : entry.output,
+  };
+}
+
+const gjsRuleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser'),
+  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+
+gjsRuleTester.run('template-no-unnecessary-curly-strings', rule, {
+  valid: validHbs.map(wrapTemplate),
+  invalid: invalidHbs.map(wrapTemplate),
+});
+
+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: validHbs,
+  invalid: invalidHbs,
+});