Sync with template-lint

Author: NullVoxPopuli

docs/rules/template-no-unused-block-params.md

@@ -2,49 +2,47 @@
 
 <!-- end auto-generated rule header -->
 
-Disallow unused block parameters in templates.
-
-## Rule Details
-
-This rule reports block parameters that are declared but never used within the block.
+This rule forbids unused block parameters except when they are needed to access a later parameter.
 
 ## Examples
 
-Examples of **incorrect** code for this rule:
+This rule **forbids** the following (unused parameters):
 
 ```gjs
 <template>
-  {{#each items as |item|}}
-    Hello
-  {{/each}}
-</template>
-
-<template>
-  {{#each items as |item index|}}
-    {{item.name}}
+  {{#each users as |user index|}}
+    {{user.name}}
   {{/each}}
 </template>
 ```
 
-Examples of **correct** code for this rule:
+This rule **allows** the following:
+
+Allowed (used parameters):
 
 ```gjs
 <template>
-  {{#each items as |item|}}
-    {{item.name}}
+  {{#each users as |user|}}
+    {{user.name}}
   {{/each}}
 </template>
+```
 
+```gjs
 <template>
-  {{#each items as |item index|}}
-    {{index}}: {{item.name}}
+  {{#each users as |user index|}}
+    {{index}} {{user.name}}
   {{/each}}
 </template>
+```
 
+Allowed (later parameter used):
+
+```gjs
 <template>
-  {{#let user as |u|}}
-    {{u.name}}
-  {{/let}}
+  {{#each users as |user index|}}
+    {{index}}
+  {{/each}}
 </template>
 ```
 
@@ -54,4 +52,6 @@ Examples of **correct** code for this rule:
 
 ## References
 
-- [Ember Guides - Block Parameters](https://guides.emberjs.com/release/components/block-content/)
+- [Ember guides/block content](https://guides.emberjs.com/release/components/block-content/)
+- [rfcs/angle bracket invocation](https://emberjs.github.io/rfcs/0311-angle-bracket-invocation.html)
+- [rfcs/named blocks](https://emberjs.github.io/rfcs/0226-named-blocks.html)

lib/rules/template-no-unused-block-params.js

@@ -63,7 +63,7 @@ module.exports = {
     },
     schema: [],
     messages: {
-      unusedBlockParam: 'Block param "{{param}}" is unused',
+      unusedBlockParam: "'{{param}}' is defined but never used",
     },
     originallyFrom: {
       name: 'ember-template-lint',
@@ -134,12 +134,13 @@ module.exports = {
 
         // Only report trailing unused params (after the last used one)
         const unusedTrailing = blockParams.slice(lastUsedIndex + 1);
+        const firstUnusedTrailing = unusedTrailing[0];
 
-        if (unusedTrailing.length > 0) {
+        if (firstUnusedTrailing) {
           context.report({
             node,
             messageId: 'unusedBlockParam',
-            data: { param: unusedTrailing.join(', ') },
+            data: { param: firstUnusedTrailing },
           });
         }
       },

tests/lib/rules/template-no-unused-block-params.js

@@ -3,137 +3,64 @@ const rule = require('../../../lib/rules/template-no-unused-block-params');
 
 const { RuleTester } = eslint;
 
-const ruleTester = new RuleTester({
-  parser: require.resolve('ember-eslint-parser'),
-  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
-});
-
-ruleTester.run('template-no-unused-block-params', rule, {
-  valid: [
-    // All params used
-    '<template>{{#each items as |item|}}{{item.name}}{{/each}}</template>',
-    '<template>{{#each items as |item index|}}{{index}}: {{item}}{{/each}}</template>',
-
-    // No block params
-    '<template>{{#each items}}{{this}}{{/each}}</template>',
-
-    // Param used in nested path
-    '<template>{{#let user as |u|}}{{u.name}}{{/let}}</template>',
-
-    '<template>{{cat}}</template>',
-    '<template>{{#each cats as |cat|}}{{cat}}{{/each}}</template>',
-    '<template>{{#each cats as |cat|}}{{partial "cat"}}{{/each}}</template>',
-    '<template>{{#each cats as |cat|}}{{cat.name}}{{/each}}</template>',
-    '<template>{{#each cats as |cat|}}{{meow cat}}{{/each}}</template>',
-    '<template>{{#each cats as |cat index|}}{{index}}{{/each}}</template>',
-    '<template>{{#each cats as |cat index|}}{{#each cat.lives as |life|}}{{index}}: {{life}}{{/each}}{{/each}}</template>',
-    '<template>{{#each cats as |cat|}}{{#meow-meow cat as |cat|}}{{cat}}{{/meow-meow}}{{/each}}</template>',
-    '<template>{{#with (component "foo-bar") as |FooBar|}}<FooBar />{{/with}}</template>',
-    '<template><BurgerMenu as |menu|><header>Something</header><menu.item>Text</menu.item></BurgerMenu></template>',
-    '<template>{{#burger-menu as |menu|}}<header>Something</header>{{#menu.item}}Text{{/menu.item}}{{/burger-menu}}</template>',
-  ],
-  invalid: [
-    {
-      code: '<template>{{#each items as |item|}}Hello{{/each}}</template>',
-      output: null,
-      errors: [{ messageId: 'unusedBlockParam', data: { param: 'item' } }],
-    },
-    {
-      code: '<template>{{#each items as |item index|}}{{item}}{{/each}}</template>',
-      output: null,
-      errors: [{ messageId: 'unusedBlockParam', data: { param: 'index' } }],
-    },
-    {
-      code: '<template>{{#let value as |v|}}Something{{/let}}</template>',
-      output: null,
-      errors: [{ messageId: 'unusedBlockParam', data: { param: 'v' } }],
-    },
-
-    {
-      code: '<template>{{#each cats as |cat|}}Dogs{{/each}}</template>',
-      output: null,
-      errors: [{ messageId: 'unusedBlockParam' }],
-    },
-    {
-      code: '<template>{{#each cats as |cat index|}}{{cat}}{{/each}}</template>',
-      output: null,
-      errors: [{ messageId: 'unusedBlockParam' }],
-    },
-    {
-      code: '<template>{{#each cats as |cat index|}}{{/each}}</template>',
-      output: null,
-      errors: [{ messageId: 'unusedBlockParam' }],
-    },
-  ],
-});
-
-const hbsRuleTester = new RuleTester({
-  parser: require.resolve('ember-eslint-parser/hbs'),
-  parserOptions: {
-    ecmaVersion: 2022,
-    sourceType: 'module',
-  },
-});
-
-hbsRuleTester.run('template-no-unused-block-params', rule, {
-  valid: [
-    '{{cat}}',
-    '{{#each cats as |cat|}}{{cat}}{{/each}}',
-    '{{#each cats as |cat|}}{{partial "cat"}}{{/each}}',
-    '{{#each cats as |cat|}}{{cat.name}}{{/each}}',
-    '{{#each cats as |cat|}}{{meow cat}}{{/each}}',
-    '{{#each cats as |cat index|}}{{index}}{{/each}}',
-    '{{#each cats as |cat index|}}{{#each cat.lives as |life|}}{{index}}: {{life}}{{/each}}{{/each}}',
-    `
+const validHbs = [
+  '{{cat}}',
+  '{{#each cats as |cat|}}{{cat}}{{/each}}',
+  '{{#each cats as |cat|}}{{partial "cat"}}{{/each}}',
+  '{{#each cats as |cat|}}{{cat.name}}{{/each}}',
+  '{{#each cats as |cat|}}{{meow cat}}{{/each}}',
+  '{{#each cats as |cat index|}}{{index}}{{/each}}',
+  '{{#each cats as |cat index|}}{{#each cat.lives as |life|}}{{index}}: {{life}}{{/each}}{{/each}}',
+  `
     <MyComponent @model={{this.model}} as |param|>
       {{! template-lint-disable }}
         <MyOtherComponent .... @param={{param}} />
       {{! template-lint-enable }}
     </MyComponent>
     `,
-    `
+  `
     <MyComponent @model={{this.model}} as |param|>
       {{! template-lint-disable }}
         {{foo-bar param}}
       {{! template-lint-enable }}
     </MyComponent>
     `,
-    `
+  `
     <MyComponent @model={{this.model}} as |param|>
       {{! template-lint-disable }}
         {{param}}
       {{! template-lint-enable }}
     </MyComponent>
     `,
-    `
+  `
     <MyComponent @model={{this.model}} as |param|>
       {{! template-lint-disable }}
         {{foo-bar prop=param}}
       {{! template-lint-enable }}
     </MyComponent>
     `,
-    `
+  `
     {{#my-component as |param|}}
       {{! template-lint-disable }}
         <MyOtherComponent .... @param={{param}} />
       {{! template-lint-enable }}
     {{/my-component}}
     `,
-    `
+  `
     {{#my-component as |param|}}
       {{! template-lint-disable }}
         {{foo-bar param}}
       {{! template-lint-enable }}
     {{/my-component}}
     `,
-    `
+  `
     {{#my-component as |param|}}
       {{! template-lint-disable }}
         {{param}}
       {{! template-lint-enable }}
     {{/my-component}}
     `,
-    `
+  `
     {{#my-component as |param bar baz|}}
       {{! template-lint-disable }}
         {{foo-bar prop=param}}
@@ -144,33 +71,66 @@ hbsRuleTester.run('template-no-unused-block-params', rule, {
       {{! template-lint-enable }}
     {{/my-component}}
     `,
-    '{{#each cats as |cat|}}{{#meow-meow cat as |cat|}}{{cat}}{{/meow-meow}}{{/each}}',
-    '{{#with (component "foo-bar") as |FooBar|}}<FooBar />{{/with}}',
-    '<BurgerMenu as |menu|><header>Something</header><menu.item>Text</menu.item></BurgerMenu>',
-    '{{#burger-menu as |menu|}}<header>Something</header>{{#menu.item}}Text{{/menu.item}}{{/burger-menu}}',
-  ],
-  invalid: [
-    {
-      code: '{{#each cats as |cat|}}Dogs{{/each}}',
-      output: null,
-      errors: [{ message: 'Block param "cat" is unused' }],
-    },
-    {
-      code: '{{#each cats as |cat index|}}{{cat}}{{/each}}',
-      output: null,
-      errors: [{ message: 'Block param "index" is unused' }],
-    },
-    {
-      // Outer `index` is shadowed by inner `index`, so outer `index` is unused
-      code: '{{#each cats as |cat index|}}{{#each cat.lives as |life index|}}{{index}}: {{life}}{{/each}}{{/each}}',
-      output: null,
-      errors: [{ message: 'Block param "index" is unused' }],
-    },
-    {
-      // `partial` marks outer params as used, but inner `life` is unused
-      code: '{{#each cats as |cat index|}}{{partial "cat"}}{{#each cat.lives as |life|}}Life{{/each}}{{/each}}',
-      output: null,
-      errors: [{ message: 'Block param "life" is unused' }],
-    },
-  ],
+  '{{#each cats as |cat|}}{{#meow-meow cat as |cat|}}{{cat}}{{/meow-meow}}{{/each}}',
+  '{{#with (component "foo-bar") as |FooBar|}}<FooBar />{{/with}}',
+  '<BurgerMenu as |menu|><header>Something</header><menu.item>Text</menu.item></BurgerMenu>',
+  '{{#burger-menu as |menu|}}<header>Something</header>{{#menu.item}}Text{{/menu.item}}{{/burger-menu}}',
+];
+
+const invalidHbs = [
+  {
+    code: '{{#each cats as |cat|}}Dogs{{/each}}',
+    output: null,
+    errors: [{ messageId: 'unusedBlockParam', data: { param: 'cat' } }],
+  },
+  {
+    code: '{{#each cats as |cat index|}}{{cat}}{{/each}}',
+    output: null,
+    errors: [{ messageId: 'unusedBlockParam', data: { param: 'index' } }],
+  },
+  {
+    code: '{{#each cats as |cat index|}}{{#each cat.lives as |life index|}}{{index}}: {{life}}{{/each}}{{/each}}',
+    output: null,
+    errors: [{ messageId: 'unusedBlockParam', data: { param: 'index' } }],
+  },
+  {
+    code: '{{#each cats as |cat index|}}{{partial "cat"}}{{#each cat.lives as |life|}}Life{{/each}}{{/each}}',
+    output: null,
+    errors: [{ messageId: 'unusedBlockParam', data: { param: 'life' } }],
+  },
+];
+
+function wrapTemplate(entry) {
+  if (typeof entry === 'string') {
+    return `<template>${entry}</template>`;
+  }
+
+  return {
+    ...entry,
+    code: `<template>${entry.code}</template>`,
+    output: entry.output ? `<template>${entry.output}</template>` : entry.output,
+  };
+}
+
+const gjsRuleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser'),
+  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+
+gjsRuleTester.run('template-no-unused-block-params', rule, {
+  valid: validHbs.map(wrapTemplate),
+  invalid: invalidHbs.map(wrapTemplate),
+});
+
+const hbsRuleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser/hbs'),
+  parserOptions: {
+    ecmaVersion: 2022,
+    sourceType: 'module',
+  },
+});
+
+hbsRuleTester.run('template-no-unused-block-params', rule, {
+  valid: validHbs,
+  invalid: invalidHbs,
 });