Fix template-no-unnecessary-component-helper: skip invalid-identifier autofix in GJS/GTS

The rule converts {{component "my-component" ...}} to {{my-component ...}}.
In GJS/GTS, a kebab-case component name is not a valid JS identifier, so
the autofix would produce unparseable output. Keep detection (the user
is still told to invoke directly), but skip the autofix in strict mode
when the component name contains non-identifier characters.

Author: johanrd

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

@@ -59,8 +59,21 @@ module.exports = {
 
   create(context) {
     const sourceCode = context.sourceCode;
+    const filename = context.filename;
+    const isStrictMode = filename.endsWith('.gjs') || filename.endsWith('.gts');
     let inAttribute = 0;
 
+    // In strict mode, a kebab-case / slash component name cannot become
+    // a bare mustache invocation — the resulting identifier would not be
+    // a valid JS binding. Detect the rule's violation, but skip autofix
+    // when it would produce unparseable GJS/GTS output.
+    function canAutofix(componentName) {
+      if (!isStrictMode) {
+        return true;
+      }
+      return /^[$A-Z_a-z][\w$]*$/.test(componentName);
+    }
+
     return {
       GlimmerAttrNode() {
         inAttribute++;
@@ -79,13 +92,14 @@ module.exports = {
 
         const componentName = node.params[0].value || node.params[0].original;
         const invocation = getComponentInvocationText(sourceCode, node, componentName);
-        context.report({
+        const report = {
           node,
           messageId: 'noUnnecessaryComponent',
-          fix(fixer) {
-            return fixer.replaceText(node, `{{${invocation}}}`);
-          },
-        });
+        };
+        if (canAutofix(componentName)) {
+          report.fix = (fixer) => fixer.replaceText(node, `{{${invocation}}}`);
+        }
+        context.report(report);
       },
 
       GlimmerBlockStatement(node) {
@@ -99,10 +113,12 @@ module.exports = {
         const componentName = node.params[0].value || node.params[0].original;
         const invocation = getComponentInvocationText(sourceCode, node, componentName);
 
-        context.report({
+        const report = {
           node,
           messageId: 'noUnnecessaryComponent',
-          fix(fixer) {
+        };
+        if (canAutofix(componentName)) {
+          report.fix = (fixer) => {
             const openInvocationEnd = getOpenInvocationEnd(node);
             const closingPathEnd = node.range[1] - 2;
             const closingPathStart = closingPathEnd - node.path.original.length;
@@ -111,8 +127,9 @@ module.exports = {
               fixer.replaceTextRange([node.path.range[0], openInvocationEnd], invocation),
               fixer.replaceTextRange([closingPathStart, closingPathEnd], componentName),
             ];
-          },
-        });
+          };
+        }
+        context.report(report);
       },
     };
   },

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

@@ -91,7 +91,30 @@ const gjsRuleTester = new RuleTester({
 
 gjsRuleTester.run('template-no-unnecessary-component-helper', rule, {
   valid: validGjs,
-  invalid: invalidHbs.map(wrapTemplate),
+  invalid: [
+    ...invalidHbs.map(wrapTemplate),
+    // GJS/GTS: autofix is skipped when the component name isn't a valid JS
+    // identifier. The error is still reported so the user sees the issue.
+    {
+      filename: 'test.gjs',
+      code: '<template>{{component "my-component-name" foo=123}}</template>',
+      output: null,
+      errors: [{ messageId: 'noUnnecessaryComponent' }],
+    },
+    {
+      filename: 'test.gts',
+      code: '<template>{{#component "my-component-name"}}content{{/component}}</template>',
+      output: null,
+      errors: [{ messageId: 'noUnnecessaryComponent' }],
+    },
+    // GJS/GTS: valid JS identifier → autofix still applies
+    {
+      filename: 'test.gjs',
+      code: '<template>{{component "myComponent" foo=123}}</template>',
+      output: '<template>{{myComponent foo=123}}</template>',
+      errors: [{ messageId: 'noUnnecessaryComponent' }],
+    },
+  ],
 });
 
 const hbsRuleTester = new RuleTester({