Post-merge-review: Fix template-no-unnecessary-component-helper: skip autofix for invalid GJS/GTS identifiers

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({