Sync with template-lint

Author: NullVoxPopuli

docs/rules/template-no-yield-only.md

@@ -2,36 +2,41 @@
 
 <!-- end auto-generated rule header -->
 
-Disallows components that only yield without any wrapper or additional functionality.
+Templates that only contain a single `{{yield}}` instruction are not required
+and increase the total template payload size.
 
-## Rule Details
-
-Components should provide some structure or functionality beyond just yielding. If a component only yields, it adds unnecessary indirection.
+This rule warns about templates that only contain a single `{{yield}}`
+instruction.
 
 ## Examples
 
-Examples of **incorrect** code for this rule:
+This rule **forbids** the following:
 
 ```gjs
 <template>
   {{yield}}
 </template>
 ```
 
-Examples of **correct** code for this rule:
+```gjs
+<template>
+
+   {{yield}}
+
+</template>
+```
+
+This rule **allows** the following:
 
 ```gjs
 <template>
-  <div class="wrapper">
-    {{yield}}
-  </div>
+  {{yield something}}
 </template>
 ```
 
 ```gjs
 <template>
-  {{this.setup}}
-  {{yield}}
+  <div>{{yield}}</div>
 </template>
 ```
 
@@ -41,4 +46,4 @@ Examples of **correct** code for this rule:
 
 ## References
 
-- [eslint-plugin-ember template-no-yield-only](https://github.com/ember-cli/eslint-plugin-ember/blob/master/docs/rules/template-no-yield-only.md)
+- <https://github.com/ember-template-lint/ember-template-lint/issues/29>

lib/rules/template-no-yield-only.js

@@ -1,23 +1,14 @@
-const IGNORABLE_TYPES = new Set(['GlimmerTextNode', 'GlimmerMustacheCommentStatement']);
-
-function isBareYield(node) {
+function isYieldOnly(node) {
   return (
     node.type === 'GlimmerMustacheStatement' &&
     node.path &&
     node.path.type === 'GlimmerPathExpression' &&
     node.path.original === 'yield' &&
-    (!node.params || node.params.length === 0) &&
-    (!node.hash || !node.hash.pairs || node.hash.pairs.length === 0)
+    node.params &&
+    node.params.length === 0
   );
 }
 
-function isMeaningfulContent(node) {
-  if (node.type === 'GlimmerTextNode') {
-    return node.chars && node.chars.trim().length > 0;
-  }
-  return !IGNORABLE_TYPES.has(node.type);
-}
-
 /** @type {import('eslint').Rule.RuleModule} */
 module.exports = {
   meta: {
@@ -31,8 +22,7 @@ module.exports = {
     fixable: null,
     schema: [],
     messages: {
-      noYieldOnly:
-        'Component should not only yield. Add wrapper element or additional functionality.',
+      noYieldOnly: '{{yieldExpression}}-only templates are not allowed',
     },
     originallyFrom: {
       name: 'ember-template-lint',
@@ -43,35 +33,29 @@ module.exports = {
   },
 
   create(context) {
-    function checkChildren(children) {
-      let yieldNode = null;
-
-      for (const child of children) {
-        if (isBareYield(child)) {
-          yieldNode = child;
-        } else if (isMeaningfulContent(child)) {
-          return;
-        }
-      }
-
-      if (yieldNode) {
-        context.report({ node: yieldNode, messageId: 'noYieldOnly' });
-      }
-    }
+    let isOnlyYield = false;
 
     return {
       GlimmerTemplate(node) {
-        if (!node.body || node.body.length === 0) {
-          return;
+        const templateNodes =
+          node.body[0] &&
+          node.body[0].type === 'GlimmerElementNode' &&
+          node.body[0].tag === 'template'
+            ? node.body[0].children
+            : node.body;
+
+        if (templateNodes.length === 1 && isYieldOnly(templateNodes[0])) {
+          isOnlyYield = true;
         }
+      },
 
-        const firstChild = node.body[0];
-        if (firstChild && firstChild.type === 'GlimmerElementNode') {
-          // gjs/gts: body[0] is the <template> element, check its children
-          checkChildren(firstChild.children || []);
-        } else {
-          // hbs: body directly contains the template nodes
-          checkChildren(node.body);
+      GlimmerMustacheStatement(node) {
+        if (isOnlyYield) {
+          context.report({
+            node,
+            messageId: 'noYieldOnly',
+            data: { yieldExpression: '{{yield}}' },
+          });
         }
       },
     };

tests/lib/rules/template-no-yield-only.js

@@ -1,117 +1,57 @@
-//------------------------------------------------------------------------------
-// Requirements
-//------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/template-no-yield-only');
 const RuleTester = require('eslint').RuleTester;
 
-//------------------------------------------------------------------------------
-// Tests
-//------------------------------------------------------------------------------
+const validHbs = [
+  '{{yield (hash someProp=someValue)}}',
+  '{{field}}',
+  '{{#yield}}{{/yield}}',
+  '<Yield/>',
+  '<yield/>',
+];
 
-const ruleTester = new RuleTester({
-  parser: require.resolve('ember-eslint-parser'),
-  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
-});
+const invalidHbs = [
+  {
+    code: '{{yield}}',
+    output: null,
+    errors: [{ messageId: 'noYieldOnly' }],
+  },
+  {
+    code: '     {{yield}}',
+    output: null,
+    errors: [{ messageId: 'noYieldOnly' }],
+  },
+  {
+    code: '\n  {{yield}}\n     ',
+    output: null,
+    errors: [{ messageId: 'noYieldOnly' }],
+  },
+  {
+    code: '\n{{! some comment }}  {{yield}}\n     ',
+    output: null,
+    errors: [{ messageId: 'noYieldOnly' }],
+  },
+];
 
-ruleTester.run('template-no-yield-only', rule, {
-  valid: [
-    `<template>
-      <div>
-        {{yield}}
-      </div>
-    </template>`,
-    `<template>
-      {{this.something}}
-      {{yield}}
-    </template>`,
-    `<template>
-      <div></div>
-    </template>`,
+function wrapTemplate(entry) {
+  if (typeof entry === 'string') {
+    return `<template>${entry}</template>`;
+  }
 
-    '<template>{{yield (hash someProp=someValue)}}</template>',
-    '<template>{{field}}</template>',
-    '<template>{{#yield}}{{/yield}}</template>',
-    '<template><Yield/></template>',
-    '<template><yield/></template>',
-  ],
+  return {
+    ...entry,
+    code: `<template>${entry.code}</template>`,
+    output: entry.output ? `<template>${entry.output}</template>` : entry.output,
+  };
+}
 
-  invalid: [
-    {
-      code: `<template>
-        {{yield}}
-      </template>`,
-      output: null,
-      errors: [
-        {
-          message:
-            'Component should not only yield. Add wrapper element or additional functionality.',
-          type: 'GlimmerMustacheStatement',
-        },
-      ],
-    },
-    {
-      code: `<template>
-  
-        {{yield}}
-  
-      </template>`,
-      output: null,
-      errors: [
-        {
-          message:
-            'Component should not only yield. Add wrapper element or additional functionality.',
-          type: 'GlimmerMustacheStatement',
-        },
-      ],
-    },
-    {
-      code: '<template>{{yield}}</template>',
-      output: null,
-      errors: [
-        {
-          message:
-            'Component should not only yield. Add wrapper element or additional functionality.',
-          type: 'GlimmerMustacheStatement',
-        },
-      ],
-    },
+const gjsRuleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser'),
+  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
 
-    {
-      code: '<template>     {{yield}}</template>',
-      output: null,
-      errors: [
-        {
-          message:
-            'Component should not only yield. Add wrapper element or additional functionality.',
-        },
-      ],
-    },
-    {
-      code: `<template>
-  {{yield}}
-     </template>`,
-      output: null,
-      errors: [
-        {
-          message:
-            'Component should not only yield. Add wrapper element or additional functionality.',
-        },
-      ],
-    },
-    {
-      code: `<template>
-{{! some comment }}  {{yield}}
-     </template>`,
-      output: null,
-      errors: [
-        {
-          message:
-            'Component should not only yield. Add wrapper element or additional functionality.',
-        },
-      ],
-    },
-  ],
+gjsRuleTester.run('template-no-yield-only', rule, {
+  valid: validHbs.filter((entry) => !entry.includes('template-lint-disable')).map(wrapTemplate),
+  invalid: invalidHbs.map(wrapTemplate),
 });
 
 const hbsRuleTester = new RuleTester({
@@ -123,33 +63,6 @@ const hbsRuleTester = new RuleTester({
 });
 
 hbsRuleTester.run('template-no-yield-only', rule, {
-  valid: [
-    '{{yield (hash someProp=someValue)}}',
-    '{{field}}',
-    '{{#yield}}{{/yield}}',
-    '<Yield/>',
-    '<yield/>',
-  ],
-  invalid: [
-    {
-      code: '{{yield}}',
-      output: null,
-      errors: [{ messageId: 'noYieldOnly' }],
-    },
-    {
-      code: '     {{yield}}',
-      output: null,
-      errors: [{ messageId: 'noYieldOnly' }],
-    },
-    {
-      code: '\n  {{yield}}\n     ',
-      output: null,
-      errors: [{ messageId: 'noYieldOnly' }],
-    },
-    {
-      code: '\n{{! some comment }}  {{yield}}\n     ',
-      output: null,
-      errors: [{ messageId: 'noYieldOnly' }],
-    },
-  ],
+  valid: validHbs,
+  invalid: invalidHbs,
 });