Sync with template-lint

Author: NullVoxPopuli

docs/rules/template-no-unnecessary-component-helper.md

@@ -6,30 +6,47 @@
 
 <!-- end auto-generated rule header -->
 
-Disallow unnecessary usage of the `{{component}}` helper with static component names.
+The `component` template helper can be used to dynamically pick the component being rendered based on the provided property. But if the component name is passed as a string because it's already known, then the component should be invoked directly, instead of using the `component` helper.
 
-## Rule Details
+## Examples
 
-This rule disallows using `{{component "component-name"}}` when you could use angle bracket invocation instead.
+This rule **forbids** the following:
 
-## Examples
+```gjs
+<template>
+  {{component "my-component"}}
+</template>
+```
 
-Examples of **incorrect** code for this rule:
+This rule **allows** the following:
 
-```hbs
-{{component 'my-component'}}
-{{component 'MyComponent' arg='value'}}
+```gjs
+<template>
+  {{component SOME_COMPONENT_NAME}}
+</template>
 ```
 
-Examples of **correct** code for this rule:
+```gjs
+<template>
+  {{!-- the `component` helper is needed to invoke this --}}
+  {{component "addon-name@component-name"}}
+</template>
+```
+
+```gjs
+<template>
+  {{my-component}}
+</template>
+```
 
-```hbs
-<MyComponent />
-{{component this.dynamicComponentName}}
-{{component @componentName}}
+```gjs
+<template>
+  {{my-component close=(component "link-to" "index")}}
+  <MyComponent @close={{component "link-to" "index"}} />
+</template>
 ```
 
 ## References
 
-- [Ember Guides - Components](https://guides.emberjs.com/release/components/)
-- [RFC #311 - Angle Bracket Invocation](https://github.com/emberjs/rfcs/blob/master/text/0311-angle-bracket-invocation.md)
+- [component helper guide](https://guides.emberjs.com/release/components/defining-a-component/#toc_dynamically-rendering-a-component)
+- [component helper spec](https://www.emberjs.com/api/ember/release/classes/Ember.Templates.helpers/methods/component?anchor=component)

lib/rules/template-no-unnecessary-component-helper.js

@@ -10,6 +10,30 @@ function isComponentWithStringLiteral(node) {
   );
 }
 
+function getComponentInvocationText(sourceCode, node, componentName) {
+  const parts = [];
+
+  for (const param of node.params.slice(1)) {
+    parts.push(sourceCode.getText(param));
+  }
+
+  for (const pair of node.hash?.pairs || []) {
+    parts.push(sourceCode.getText(pair));
+  }
+
+  return [componentName, ...parts].join(' ');
+}
+
+function getOpenInvocationEnd(node) {
+  if (node.hash?.pairs?.length) {
+    return node.hash.range[1];
+  }
+
+  const lastParam = node.params.at(-1);
+
+  return lastParam ? lastParam.range[1] : node.path.range[1];
+}
+
 /** @type {import('eslint').Rule.RuleModule} */
 module.exports = {
   meta: {
@@ -23,8 +47,7 @@ module.exports = {
     fixable: 'code',
     schema: [],
     messages: {
-      noUnnecessaryComponent:
-        'Unnecessary use of (component) helper. Use the component name directly.',
+      noUnnecessaryComponent: 'Invoke component directly instead of using `component` helper',
     },
     originallyFrom: {
       name: 'ember-template-lint',
@@ -55,23 +78,12 @@ module.exports = {
         }
 
         const componentName = node.params[0].value || node.params[0].original;
+        const invocation = getComponentInvocationText(sourceCode, node, componentName);
         context.report({
           node,
           messageId: 'noUnnecessaryComponent',
           fix(fixer) {
-            const restParams = node.params.slice(1);
-            const hashPairs = node.hash?.pairs || [];
-
-            let replacement = `{{${componentName}`;
-            for (const param of restParams) {
-              replacement += ` ${sourceCode.getText(param)}`;
-            }
-            for (const pair of hashPairs) {
-              replacement += ` ${sourceCode.getText(pair)}`;
-            }
-            replacement += '}}';
-
-            return fixer.replaceText(node, replacement);
+            return fixer.replaceText(node, `{{${invocation}}}`);
           },
         });
       },
@@ -84,38 +96,21 @@ module.exports = {
           return;
         }
 
-        context.report({
-          node,
-          messageId: 'noUnnecessaryComponent',
-        });
-      },
-
-      GlimmerSubExpression(node) {
-        if (inAttribute > 0) {
-          return;
-        }
-        if (!isComponentWithStringLiteral(node)) {
-          return;
-        }
-
         const componentName = node.params[0].value || node.params[0].original;
+        const invocation = getComponentInvocationText(sourceCode, node, componentName);
+
         context.report({
           node,
           messageId: 'noUnnecessaryComponent',
           fix(fixer) {
-            const restParams = node.params.slice(1);
-            const hashPairs = node.hash?.pairs || [];
-
-            let replacement = `(${componentName}`;
-            for (const param of restParams) {
-              replacement += ` ${sourceCode.getText(param)}`;
-            }
-            for (const pair of hashPairs) {
-              replacement += ` ${sourceCode.getText(pair)}`;
-            }
-            replacement += ')';
-
-            return fixer.replaceText(node, replacement);
+            const openInvocationEnd = getOpenInvocationEnd(node);
+            const closingPathEnd = node.range[1] - 2;
+            const closingPathStart = closingPathEnd - node.path.original.length;
+
+            return [
+              fixer.replaceTextRange([node.path.range[0], openInvocationEnd], invocation),
+              fixer.replaceTextRange([closingPathStart, closingPathEnd], componentName),
+            ];
           },
         });
       },