From b6b6853e41b46b36482442f796160ad7430e508b Mon Sep 17 00:00:00 2001
From: Boshen <boshenc@gmail.com>
Date: Mon, 23 Oct 2023 10:24:10 +0800
Subject: [PATCH] fix(linter): point to the opening fragment for
 jsx_no_useless_fragment

In real codebases the fragment child may be a wall of text that gets
printed on the screen.
---
 .../rules/react/jsx_no_useless_fragment.rs    | 12 ++--
 .../snapshots/jsx_no_useless_fragment.snap    | 63 +++++++++----------
 2 files changed, 38 insertions(+), 37 deletions(-)

diff --git a/crates/oxc_linter/src/rules/react/jsx_no_useless_fragment.rs b/crates/oxc_linter/src/rules/react/jsx_no_useless_fragment.rs
index 2678e4403..1fcdb0ad7 100644
--- a/crates/oxc_linter/src/rules/react/jsx_no_useless_fragment.rs
+++ b/crates/oxc_linter/src/rules/react/jsx_no_useless_fragment.rs
@@ -88,11 +88,13 @@ impl JsxNoUselessFragment {
             && !is_fragment_with_only_text_and_is_not_child(node.id(), &elem.children, ctx)
             && !(self.allow_expressions && is_fragment_with_single_expression(&elem.children))
         {
-            ctx.diagnostic(JsxNoUselessFragmentDiagnostic::NeedsMoreChildren(elem.span));
+            let span = elem.opening_element.span;
+            ctx.diagnostic(JsxNoUselessFragmentDiagnostic::NeedsMoreChildren(span));
         }
 
         if is_child_of_html_element(node, ctx) {
-            ctx.diagnostic(JsxNoUselessFragmentDiagnostic::ChildOfHtmlElement(elem.span));
+            let span = elem.opening_element.span;
+            ctx.diagnostic(JsxNoUselessFragmentDiagnostic::ChildOfHtmlElement(span));
         }
     }
     fn check_fragment(&self, node: &AstNode, elem: &JSXFragment, ctx: &LintContext) {
@@ -100,11 +102,13 @@ impl JsxNoUselessFragment {
             && !is_fragment_with_only_text_and_is_not_child(node.id(), &elem.children, ctx)
             && !(self.allow_expressions && is_fragment_with_single_expression(&elem.children))
         {
-            ctx.diagnostic(JsxNoUselessFragmentDiagnostic::NeedsMoreChildren(elem.span));
+            let span = elem.opening_fragment.span;
+            ctx.diagnostic(JsxNoUselessFragmentDiagnostic::NeedsMoreChildren(span));
         }
 
         if is_child_of_html_element(node, ctx) {
-            ctx.diagnostic(JsxNoUselessFragmentDiagnostic::ChildOfHtmlElement(elem.span));
+            let span = elem.opening_fragment.span;
+            ctx.diagnostic(JsxNoUselessFragmentDiagnostic::ChildOfHtmlElement(span));
         }
     }
 }
diff --git a/crates/oxc_linter/src/snapshots/jsx_no_useless_fragment.snap b/crates/oxc_linter/src/snapshots/jsx_no_useless_fragment.snap
index 1186ac67b..2b636e843 100644
--- a/crates/oxc_linter/src/snapshots/jsx_no_useless_fragment.snap
+++ b/crates/oxc_linter/src/snapshots/jsx_no_useless_fragment.snap
@@ -5,58 +5,57 @@ expression: jsx_no_useless_fragment
   ⚠ eslint-plugin-react(jsx-no-useless-fragment): Fragments should contain more than one child.
    ╭─[jsx_no_useless_fragment.tsx:1:1]
  1 │ <></>
-   · ─────
+   · ──
    ╰────
 
   ⚠ eslint-plugin-react(jsx-no-useless-fragment): Fragments should contain more than one child.
    ╭─[jsx_no_useless_fragment.tsx:1:1]
  1 │ <>{}</>
-   · ───────
+   · ──
    ╰────
 
   ⚠ eslint-plugin-react(jsx-no-useless-fragment): Fragments should contain more than one child.
    ╭─[jsx_no_useless_fragment.tsx:1:1]
  1 │ <p>moo<>foo</></p>
-   ·       ────────
+   ·       ──
    ╰────
 
   ⚠ eslint-plugin-react(jsx-no-useless-fragment): Passing a fragment to a HTML element is useless.
    ╭─[jsx_no_useless_fragment.tsx:1:1]
  1 │ <p>moo<>foo</></p>
-   ·       ────────
+   ·       ──
    ╰────
 
   ⚠ eslint-plugin-react(jsx-no-useless-fragment): Fragments should contain more than one child.
    ╭─[jsx_no_useless_fragment.tsx:1:1]
  1 │ <>{meow}</>
-   · ───────────
+   · ──
    ╰────
 
   ⚠ eslint-plugin-react(jsx-no-useless-fragment): Fragments should contain more than one child.
    ╭─[jsx_no_useless_fragment.tsx:1:1]
  1 │ <p><>{meow}</></p>
-   ·    ───────────
+   ·    ──
    ╰────
 
   ⚠ eslint-plugin-react(jsx-no-useless-fragment): Passing a fragment to a HTML element is useless.
    ╭─[jsx_no_useless_fragment.tsx:1:1]
  1 │ <p><>{meow}</></p>
-   ·    ───────────
+   ·    ──
    ╰────
 
   ⚠ eslint-plugin-react(jsx-no-useless-fragment): Fragments should contain more than one child.
    ╭─[jsx_no_useless_fragment.tsx:1:1]
  1 │ <><div/></>
-   · ───────────
+   · ──
    ╰────
 
   ⚠ eslint-plugin-react(jsx-no-useless-fragment): Fragments should contain more than one child.
    ╭─[jsx_no_useless_fragment.tsx:1:1]
- 1 │     
- 2 │ ╭─▶             <>
- 3 │ │                 <div/>
- 4 │ ╰─▶             </>
- 5 │             
+ 1 │ 
+ 2 │             <>
+   ·             ──
+ 3 │               <div/>
    ╰────
 
   ⚠ eslint-plugin-react(jsx-no-useless-fragment): Fragments should contain more than one child.
@@ -67,78 +66,76 @@ expression: jsx_no_useless_fragment
 
   ⚠ eslint-plugin-react(jsx-no-useless-fragment): Fragments should contain more than one child.
    ╭─[jsx_no_useless_fragment.tsx:1:1]
- 1 │     
- 2 │ ╭─▶                 <React.Fragment>
- 3 │ │                     <Foo />
- 4 │ ╰─▶                 </React.Fragment>
- 5 │                 
+ 1 │ 
+ 2 │                 <React.Fragment>
+   ·                 ────────────────
+ 3 │                   <Foo />
    ╰────
 
   ⚠ eslint-plugin-react(jsx-no-useless-fragment): Fragments should contain more than one child.
    ╭─[jsx_no_useless_fragment.tsx:1:1]
  1 │ <Eeee><>foo</></Eeee>
-   ·       ────────
+   ·       ──
    ╰────
 
   ⚠ eslint-plugin-react(jsx-no-useless-fragment): Fragments should contain more than one child.
    ╭─[jsx_no_useless_fragment.tsx:1:1]
  1 │ <div><>foo</></div>
-   ·      ────────
+   ·      ──
    ╰────
 
   ⚠ eslint-plugin-react(jsx-no-useless-fragment): Passing a fragment to a HTML element is useless.
    ╭─[jsx_no_useless_fragment.tsx:1:1]
  1 │ <div><>foo</></div>
-   ·      ────────
+   ·      ──
    ╰────
 
   ⚠ eslint-plugin-react(jsx-no-useless-fragment): Passing a fragment to a HTML element is useless.
    ╭─[jsx_no_useless_fragment.tsx:1:1]
  1 │ <div><>{"a"}{"b"}</></div>
-   ·      ───────────────
+   ·      ──
    ╰────
 
   ⚠ eslint-plugin-react(jsx-no-useless-fragment): Passing a fragment to a HTML element is useless.
    ╭─[jsx_no_useless_fragment.tsx:1:1]
  1 │ <div><>{"a"}{"b"}</></div>
-   ·      ───────────────
+   ·      ──
    ╰────
 
   ⚠ eslint-plugin-react(jsx-no-useless-fragment): Passing a fragment to a HTML element is useless.
    ╭─[jsx_no_useless_fragment.tsx:4:1]
  4 │               <Eeee />
  5 │               <>{"a"}{"b"}</>
-   ·               ───────────────
+   ·               ──
  6 │             </section>
    ╰────
 
   ⚠ eslint-plugin-react(jsx-no-useless-fragment): Passing a fragment to a HTML element is useless.
    ╭─[jsx_no_useless_fragment.tsx:1:1]
  1 │ <div><Fragment>{"a"}{"b"}</Fragment></div>
-   ·      ───────────────────────────────
+   ·      ──────────
    ╰────
 
   ⚠ eslint-plugin-react(jsx-no-useless-fragment): Passing a fragment to a HTML element is useless.
    ╭─[jsx_no_useless_fragment.tsx:2:1]
- 2 │                 <section>
- 3 │ ╭─▶               git<>
- 4 │ │                   <b>hub</b>.
- 5 │ ╰─▶               </>
- 6 │     
+ 2 │             <section>
+ 3 │               git<>
+   ·                  ──
+ 4 │                 <b>hub</b>.
    ╰────
 
   ⚠ eslint-plugin-react(jsx-no-useless-fragment): Passing a fragment to a HTML element is useless.
    ╭─[jsx_no_useless_fragment.tsx:6:1]
  6 │ 
  7 │               git<> <b>hub</b></>
-   ·                  ────────────────
+   ·                  ──
  8 │             </section>
    ╰────
 
   ⚠ eslint-plugin-react(jsx-no-useless-fragment): Passing a fragment to a HTML element is useless.
    ╭─[jsx_no_useless_fragment.tsx:1:1]
  1 │ <div>a <>{""}{""}</> a</div>
-   ·        ─────────────
+   ·        ──
    ╰────
 
   ⚠ eslint-plugin-react(jsx-no-useless-fragment): Fragments should contain more than one child.
@@ -160,7 +157,7 @@ expression: jsx_no_useless_fragment
   ⚠ eslint-plugin-react(jsx-no-useless-fragment): Fragments should contain more than one child.
    ╭─[jsx_no_useless_fragment.tsx:1:1]
  1 │ <><Foo>{moo}</Foo></>
-   · ─────────────────────
+   · ──
    ╰────