Account for imports and aliasing

Author: NullVoxPopuli

lib/rules/template-no-builtin-form-components.js

@@ -30,14 +30,57 @@ module.exports = {
       Textarea: 'noTextarea',
     };
 
+    const filename = context.filename ?? context.getFilename();
+    const isStrictMode = filename.endsWith('.gjs') || filename.endsWith('.gts');
+
+    // local name → original name ('Input' | 'Textarea')
+    // Only populated in GJS/GTS files via ImportDeclaration
+    const importedComponents = new Map();
+
     return {
+      ImportDeclaration(node) {
+        if (node.source.value === '@ember/component') {
+          for (const specifier of node.specifiers) {
+            if (specifier.type === 'ImportSpecifier') {
+              const original = specifier.imported.name;
+              if (original === 'Input' || original === 'Textarea') {
+                importedComponents.set(specifier.local.name, original);
+              }
+            }
+          }
+        }
+      },
+
       GlimmerElementNode(node) {
-        const messageId = MESSAGE_IDS[node.tag];
-        if (messageId) {
-          context.report({
-            node,
-            messageId,
-          });
+        const tag = node.tag;
+        if (isStrictMode) {
+          // In GJS/GTS: only flag if explicitly imported from @ember/component
+          const original = importedComponents.get(tag);
+          if (original) {
+            context.report({ node, messageId: MESSAGE_IDS[original] });
+          }
+        } else {
+          // In HBS: flag by canonical name (no import context available)
+          const messageId = MESSAGE_IDS[tag];
+          if (messageId) {
+            context.report({ node, messageId });
+          }
+        }
+      },
+
+      // Catch usages as a value: {{yield Input}}, (component Input), @field={{Input}}, etc.
+      GlimmerPathExpression(node) {
+        const name = node.original;
+        if (isStrictMode) {
+          const original = importedComponents.get(name);
+          if (original) {
+            context.report({ node, messageId: MESSAGE_IDS[original] });
+          }
+        } else {
+          const messageId = MESSAGE_IDS[name];
+          if (messageId) {
+            context.report({ node, messageId });
+          }
         }
       },
     };

tests/lib/rules/template-no-builtin-form-components.js

@@ -8,48 +8,97 @@ const ruleTester = new RuleTester({
 
 ruleTester.run('template-no-builtin-form-components', rule, {
   valid: [
-    '<template><input type="text" /></template>',
-    '<template><input type="checkbox" /></template>',
-    '<template><input type="radio" /></template>',
-    '<template><textarea></textarea></template>',
-    '<template><div></div></template>',
+    // Native HTML elements are always fine
+    { filename: 'test.gjs', code: '<template><input type="text" /></template>' },
+    { filename: 'test.gjs', code: '<template><input type="checkbox" /></template>' },
+    { filename: 'test.gjs', code: '<template><input type="radio" /></template>' },
+    { filename: 'test.gjs', code: '<template><textarea></textarea></template>' },
+    { filename: 'test.gjs', code: '<template><div></div></template>' },
+
+    // In GJS without an import from @ember/component, <Input>/<Textarea> are not the builtins
+    { filename: 'test.gjs', code: '<template><Input /></template>' },
+    { filename: 'test.gjs', code: '<template><Textarea></Textarea></template>' },
+
+    // Importing from a different source is fine
+    {
+      filename: 'test.gjs',
+      code: "import { Input } from './my-components'; <template><Input /></template>",
+    },
+    {
+      filename: 'test.gjs',
+      code: "import { Textarea } from './my-components'; <template><Textarea></Textarea></template>",
+    },
   ],
   invalid: [
     {
-      code: '<template><Input /></template>',
+      filename: 'test.gjs',
+      code: "import { Input } from '@ember/component'; <template><Input /></template>",
+      output: null,
+      errors: [{ messageId: 'noInput' }],
+    },
+    {
+      filename: 'test.gjs',
+      code: 'import { Input } from \'@ember/component\'; <template><Input type="text" /></template>',
+      output: null,
+      errors: [{ messageId: 'noInput' }],
+    },
+    {
+      // Aliased import must still be flagged
+      filename: 'test.gjs',
+      code: "import { Input as EmberInput } from '@ember/component'; <template><EmberInput /></template>",
       output: null,
-      errors: [
-        {
-          messageId: 'noInput',
-        },
-      ],
+      errors: [{ messageId: 'noInput' }],
     },
     {
-      code: '<template><Input type="text" /></template>',
+      filename: 'test.gjs',
+      code: "import { Textarea } from '@ember/component'; <template><Textarea></Textarea></template>",
       output: null,
-      errors: [
-        {
-          messageId: 'noInput',
-        },
-      ],
+      errors: [{ messageId: 'noTextarea' }],
     },
     {
-      code: '<template><Textarea></Textarea></template>',
+      filename: 'test.gjs',
+      code: "import { Textarea } from '@ember/component'; <template><Textarea @value={{this.body}}></Textarea></template>",
       output: null,
-      errors: [
-        {
-          messageId: 'noTextarea',
-        },
-      ],
+      errors: [{ messageId: 'noTextarea' }],
     },
     {
-      code: '<template><Textarea @value={{this.body}}></Textarea></template>',
+      // Aliased Textarea import must still be flagged
+      filename: 'test.gjs',
+      code: "import { Textarea as EmberTextarea } from '@ember/component'; <template><EmberTextarea></EmberTextarea></template>",
       output: null,
-      errors: [
-        {
-          messageId: 'noTextarea',
-        },
-      ],
+      errors: [{ messageId: 'noTextarea' }],
+    },
+    // Yielded as a value
+    {
+      filename: 'test.gjs',
+      code: "import { Input } from '@ember/component'; <template>{{yield Input}}</template>",
+      output: null,
+      errors: [{ messageId: 'noInput' }],
+    },
+    {
+      filename: 'test.gjs',
+      code: "import { Input as EmberInput } from '@ember/component'; <template>{{yield EmberInput}}</template>",
+      output: null,
+      errors: [{ messageId: 'noInput' }],
+    },
+    {
+      filename: 'test.gjs',
+      code: "import { Textarea } from '@ember/component'; <template>{{yield Textarea}}</template>",
+      output: null,
+      errors: [{ messageId: 'noTextarea' }],
+    },
+    // Used in helpers / passed as argument
+    {
+      filename: 'test.gjs',
+      code: "import { Input } from '@ember/component'; <template><MyForm @field={{Input}} /></template>",
+      output: null,
+      errors: [{ messageId: 'noInput' }],
+    },
+    {
+      filename: 'test.gjs',
+      code: "import { Input } from '@ember/component'; <template>{{component Input}}</template>",
+      output: null,
+      errors: [{ messageId: 'noInput' }],
     },
   ],
 });
@@ -62,7 +111,7 @@ const hbsRuleTester = new RuleTester({
   },
 });
 
-hbsRuleTester.run('template-no-builtin-form-components', rule, {
+hbsRuleTester.run('template-no-builtin-form-components (hbs)', rule, {
   valid: [
     '<input type="text" />',
     '<input type="checkbox" />',
@@ -73,22 +122,44 @@ hbsRuleTester.run('template-no-builtin-form-components', rule, {
     {
       code: '<Input />',
       output: null,
-      errors: [
-        {
-          message:
-            'Do not use the `Input` component. Built-in form components use two-way binding to mutate values. Instead, refactor to use a native HTML element.',
-        },
-      ],
+      errors: [{ messageId: 'noInput' }],
+    },
+    {
+      code: '<Input type="text" />',
+      output: null,
+      errors: [{ messageId: 'noInput' }],
     },
     {
       code: '<Textarea></Textarea>',
       output: null,
-      errors: [
-        {
-          message:
-            'Do not use the `Textarea` component. Built-in form components use two-way binding to mutate values. Instead, refactor to use a native HTML element.',
-        },
-      ],
+      errors: [{ messageId: 'noTextarea' }],
+    },
+    {
+      code: '<Textarea @value={{this.body}}></Textarea>',
+      output: null,
+      errors: [{ messageId: 'noTextarea' }],
+    },
+    // Yielded as a value
+    {
+      code: '{{yield Input}}',
+      output: null,
+      errors: [{ messageId: 'noInput' }],
+    },
+    {
+      code: '{{yield Textarea}}',
+      output: null,
+      errors: [{ messageId: 'noTextarea' }],
+    },
+    // Used in helpers / passed as argument
+    {
+      code: '<MyForm @field={{Input}} />',
+      output: null,
+      errors: [{ messageId: 'noInput' }],
+    },
+    {
+      code: '{{component Input}}',
+      output: null,
+      errors: [{ messageId: 'noInput' }],
     },
   ],
 });