Merge pull request #2556 from ember-cli/copilot/sub-pr-2272

template-missing-invokable: add built-in invokables and always auto-fix from config

Author: NullVoxPopuli

.gitignore

@@ -14,3 +14,6 @@ npm-debug.log
 
 # eslint-remote-tester
 eslint-remote-tester-results
+
+# npm lock file (project uses pnpm)
+package-lock.json

lib/rules/template-missing-invokable.js

@@ -1,3 +1,25 @@
+'use strict';
+
+// Invokables that are available in every Ember project without any extra
+// packages.  User-provided `invokables` config is merged on top of these so
+// any entry here can be overridden by the consuming project.
+const BUILTIN_INVOKABLES = {
+  fn: ['fn', '@ember/helper'],
+  get: ['get', '@ember/helper'],
+  hash: ['hash', '@ember/helper'],
+  array: ['array', '@ember/helper'],
+  concat: ['concat', '@ember/helper'],
+  htmlSafe: ['htmlSafe', '@ember/template'],
+  trustedHTML: ['trustedHTML', '@ember/template'],
+  LinkTo: ['LinkTo', '@ember/routing'],
+  on: ['on', '@ember/modifier'],
+  trackedArray: ['trackedArray', '@ember/reactive/collections'],
+  trackedObject: ['trackedObject', '@ember/reactive/collections'],
+  trackedSet: ['trackedSet', '@ember/reactive/collections'],
+  trackedWeakSet: ['trackedWeakSet', '@ember/reactive/collections'],
+  trackedWeakMap: ['trackedWeakMap', '@ember/reactive/collections'],
+};
+
 /** @type {import('eslint').Rule.RuleModule} */
 module.exports = {
   meta: {
@@ -34,15 +56,16 @@ module.exports = {
 
   create: (context) => {
     const sourceCode = context.sourceCode;
+    const invokables = { ...BUILTIN_INVOKABLES, ...context.options[0]?.invokables };
 
     // takes a node with a `.path` property
     function checkInvokable(node) {
       if (node.path.type === 'GlimmerPathExpression' && node.path.tail.length === 0) {
         if (!isBound(node.path.head, sourceCode.getScope(node.path))) {
-          const matched = context.options[0]?.invokables?.[node.path.head.name];
+          const matched = invokables[node.path.head.name];
           if (matched) {
-            const [name, module] = matched;
-            const importStatement = buildImportStatement(node.path.head.name, name, module);
+            const [name, moduleName] = matched;
+            const importStatement = buildImportStatement(node.path.head.name, name, moduleName);
             context.report({
               node: node.path,
               messageId: 'missing-invokable',

tests/fixtures/projects/has-ember-truth-helpers/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "has-ember-truth-helpers",
+  "dependencies": {
+    "ember-truth-helpers": "*"
+  }
+}

tests/lib/rules/template-missing-invokable.js

@@ -65,10 +65,24 @@ ruleTester.run('template-missing-invokable', rule, {
       <button {{on "click" doSomething}}>Go</button>
     </template>
   `,
+
+    // Built-in invokables are not reported when already imported
+    `
+      import { fn } from '@ember/helper';
+      <template>
+        {{fn myFunc 1}}
+      </template>
+    `,
+    `
+      import { LinkTo } from '@ember/routing';
+      <template>
+        <LinkTo @route="index">Home</LinkTo>
+      </template>
+    `,
   ],
 
   invalid: [
-    // Subexpression invocations
+    // Subexpression invocations — always auto-fixes when invokable is configured
     {
       code: `
       <template>
@@ -96,7 +110,7 @@ ruleTester.run('template-missing-invokable', rule, {
       errors: [{ type: 'GlimmerPathExpression', message: rule.meta.messages['missing-invokable'] }],
     },
 
-    // Mustache Invocations
+    // Mustache Invocations — always auto-fixes when invokable is configured
     {
       code: `
       <template>
@@ -142,7 +156,7 @@ ruleTester.run('template-missing-invokable', rule, {
       errors: [{ type: 'GlimmerPathExpression', message: rule.meta.messages['missing-invokable'] }],
     },
 
-    // Modifier Inovcations
+    // Modifier Invocations — always auto-fixes when invokable is configured
     {
       code: `
         function doSomething() {}
@@ -243,5 +257,96 @@ ruleTester.run('template-missing-invokable', rule, {
 
       errors: [{ type: 'GlimmerPathExpression', message: rule.meta.messages['missing-invokable'] }],
     },
+
+    // Built-in: fn — auto-fixes without any user config
+    {
+      code: `
+      <template>
+        {{fn myFunc 1}}
+      </template>
+      `,
+      output: `import { fn } from '@ember/helper';
+
+      <template>
+        {{fn myFunc 1}}
+      </template>
+      `,
+      errors: [{ type: 'GlimmerPathExpression', message: rule.meta.messages['missing-invokable'] }],
+    },
+
+    // Built-in: hash — auto-fixes without any user config
+    {
+      code: `
+      <template>
+        <MyComp @opts={{hash a=1}} />
+      </template>
+      `,
+      output: `import { hash } from '@ember/helper';
+
+      <template>
+        <MyComp @opts={{hash a=1}} />
+      </template>
+      `,
+      errors: [{ type: 'GlimmerPathExpression', message: rule.meta.messages['missing-invokable'] }],
+    },
+
+    // Built-in: on modifier — auto-fixes without any user config
+    {
+      code: `
+        function doSomething() {}
+        <template>
+          <button {{on "click" doSomething}}>Go</button>
+        </template>
+      `,
+      output: `import { on } from '@ember/modifier';
+
+        function doSomething() {}
+        <template>
+          <button {{on "click" doSomething}}>Go</button>
+        </template>
+      `,
+      errors: [{ type: 'GlimmerPathExpression', message: rule.meta.messages['missing-invokable'] }],
+    },
+
+    // Built-in: LinkTo — auto-fixes without any user config
+    {
+      code: `
+      <template>
+        <LinkTo @route="index">Home</LinkTo>
+      </template>
+      `,
+      output: `import { LinkTo } from '@ember/routing';
+
+      <template>
+        <LinkTo @route="index">Home</LinkTo>
+      </template>
+      `,
+      errors: [{ type: 'GlimmerPathExpression', message: rule.meta.messages['missing-invokable'] }],
+    },
+
+    // User config overrides a built-in
+    {
+      code: `
+        function doSomething() {}
+        <template>
+          <button {{on "click" doSomething}}>Go</button>
+        </template>
+      `,
+      output: `import { on } from 'my-custom-modifier-package';
+
+        function doSomething() {}
+        <template>
+          <button {{on "click" doSomething}}>Go</button>
+        </template>
+      `,
+      options: [
+        {
+          invokables: {
+            on: ['on', 'my-custom-modifier-package'],
+          },
+        },
+      ],
+      errors: [{ type: 'GlimmerPathExpression', message: rule.meta.messages['missing-invokable'] }],
+    },
   ],
 });