From a0365e182e239982766c4ad7201d9f5f481ded82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johan=20R=C3=B8ed?= <johanroed@gmail.com>
Date: Fri, 24 Apr 2026 21:55:51 +0200
Subject: [PATCH] fix(template-no-yield-only): guard against native HTML
 <template> as first HBS child
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In classic HBS, a native HTML `<template>` element can appear anywhere in
a template body — including as the first child. The current gjs-wrapper
detection descends into `body[0].children` whenever `body[0].tag === 'template'`,
so an HBS template like `<template>{{yield}}</template>{{#each items}}…{{/each}}`
is mistakenly treated as the GJS `<template>` module wrapper: the rule
walks the inner `<template>`'s children, sees only `{{yield}}`, and
flags it as yield-only — a false positive.

The GJS module wrapper is always `body.length === 1`. Add that guard so
we only descend in the actual GJS/GTS case. Matches the shape of the
sibling rule `template-no-bare-yield.js`.

Added an HBS-only regression test (the construct is invalid in GJS/GTS,
where a nested `<template>` is a parse error).
---
 lib/rules/template-no-yield-only.js       | 10 +++++++++-
 tests/lib/rules/template-no-yield-only.js | 12 +++++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/lib/rules/template-no-yield-only.js b/lib/rules/template-no-yield-only.js
index 76d859be8d..916ba4e574 100644
--- a/lib/rules/template-no-yield-only.js
+++ b/lib/rules/template-no-yield-only.js
@@ -37,8 +37,16 @@ module.exports = {
 
     return {
       GlimmerTemplate(node) {
+        // In GJS/GTS, `node.body` is a one-element list wrapping a
+        // `<template>` element whose `children` is the actual template
+        // content. In classic HBS, `node.body` is the template content
+        // directly. Require `body.length === 1` before descending so we
+        // don't mistake a native HTML `<template>` element that happens
+        // to be the first child of an HBS template for the GJS wrapper —
+        // e.g. `<template>{{yield}}</template>{{#each items}}…{{/each}}`
+        // would otherwise be wrongly flagged as yield-only.
         const templateNodes =
-          node.body[0] &&
+          node.body.length === 1 &&
           node.body[0].type === 'GlimmerElementNode' &&
           node.body[0].tag === 'template'
             ? node.body[0].children
diff --git a/tests/lib/rules/template-no-yield-only.js b/tests/lib/rules/template-no-yield-only.js
index 9129c00828..d03a867dbc 100644
--- a/tests/lib/rules/template-no-yield-only.js
+++ b/tests/lib/rules/template-no-yield-only.js
@@ -9,6 +9,16 @@ const validHbs = [
   '<yield/>',
 ];
 
+// HBS-only cases: these use a native HTML `<template>` element as the first
+// child, which parses as a nested `<template>` in GJS/GTS (invalid syntax —
+// GJS reserves `<template>` for the module-level component wrapper).
+const validHbsOnly = [
+  // The rule must NOT descend into the native `<template>` and flag the
+  // inner `{{yield}}` as yield-only; the outer template has additional
+  // content (the `{{#each}}` block).
+  '<template>{{yield}}</template>{{#each items}}item{{/each}}',
+];
+
 const invalidHbs = [
   {
     code: '{{yield}}',
@@ -63,6 +73,6 @@ const hbsRuleTester = new RuleTester({
 });
 
 hbsRuleTester.run('template-no-yield-only', rule, {
-  valid: validHbs,
+  valid: [...validHbs, ...validHbsOnly],
   invalid: invalidHbs,
 });