fix(lint/noUselessFragments): trim trivia to avoid suggesting invalid…

… code fixes (#1553)

CHANGELOG.md

@@ -71,7 +71,7 @@ Read our [guidelines for writing a good changelog entry](https://github.com/biom
 
 - Add an unsafe code fix for [noConsoleLog](https://biomejs.dev/linter/rules/no-console-log/). Contributed by @vasucp1207
 
-- [useArrowFunction](https://biomejs.dev/linter/rules/use-arrow-function) no longer reports function in `extends` clauses or in a `new` expression. COntributed by @Conaclos
+- [useArrowFunction](https://biomejs.dev/linter/rules/use-arrow-function) no longer reports function in `extends` clauses or in a `new` expression. Contributed by @Conaclos
 
   This cases requires the presence of a prototype.
 
@@ -100,6 +100,8 @@ Read our [guidelines for writing a good changelog entry](https://github.com/biom
 
   Contributed by @Conaclos
 
+- Fix [#1514](https://github.com/biomejs/biome/issues/1514). Fix autofix suggestion to avoid the syntax error in `no_useless_fragments`. Contributed by @togami2864
+
 ### Parser
 
 

crates/biome_js_analyze/src/semantic_analyzers/complexity/no_useless_fragments.rs

@@ -257,7 +257,8 @@ impl Rule for NoUselessFragments {
                         jsx_tag_expression(AnyJsxTag::JsxSelfClosingElement(node)).into_syntax(),
                     ),
                     AnyJsxChild::JsxText(text) => {
-                        let new_value = format!("\"{}\"", text.value_token().ok()?);
+                        let new_value =
+                            format!("\"{}\"", text.value_token().ok()?.token_text().trim());
                         if parent.kind() == JsSyntaxKind::JSX_EXPRESSION_ATTRIBUTE_VALUE {
                             Some(jsx_string(ident(&new_value)).into_syntax())
                         } else {

crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/issue_1514.jsx

@@ -0,0 +1,8 @@
+// https://github.com/biomejs/biome/issues/1514
+const SomeComponent = () => {
+    return (
+        <React.Fragment>
+            Your Data Dispute Request was sent to your current Employer
+        </React.Fragment>
+    );
+}

crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/issue_1514.jsx.snap

@@ -0,0 +1,49 @@
+---
+source: crates/biome_js_analyze/tests/spec_tests.rs
+expression: issue_1514.jsx
+---
+# Input
+```jsx
+// https://github.com/biomejs/biome/issues/1514
+const SomeComponent = () => {
+    return (
+        <React.Fragment>
+            Your Data Dispute Request was sent to your current Employer
+        </React.Fragment>
+    );
+}
+```
+
+# Diagnostics
+```
+issue_1514.jsx:4:9 lint/complexity/noUselessFragments  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Avoid using unnecessary Fragment.
+  
+    2 │ const SomeComponent = () => {
+    3 │     return (
+  > 4 │         <React.Fragment>
+      │         ^^^^^^^^^^^^^^^^
+  > 5 │             Your Data Dispute Request was sent to your current Employer
+  > 6 │         </React.Fragment>
+      │         ^^^^^^^^^^^^^^^^^
+    7 │     );
+    8 │ }
+  
+  i A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
+  
+  i Unsafe fix: Remove the Fragment
+  
+    2 2 │   const SomeComponent = () => {
+    3 3 │       return (
+    4   │ - ········<React.Fragment>
+    5   │ - ············Your·Data·Dispute·Request·was·sent·to·your·current·Employer
+    6   │ - ········</React.Fragment>
+      4 │ + ········"Your·Data·Dispute·Request·was·sent·to·your·current·Employer"
+    7 5 │       );
+    8 6 │   }
+  
+
+```
+
+

website/src/content/docs/internals/changelog.mdx

@@ -77,7 +77,7 @@ Read our [guidelines for writing a good changelog entry](https://github.com/biom
 
 - Add an unsafe code fix for [noConsoleLog](https://biomejs.dev/linter/rules/no-console-log/). Contributed by @vasucp1207
 
-- [useArrowFunction](https://biomejs.dev/linter/rules/use-arrow-function) no longer reports function in `extends` clauses or in a `new` expression. COntributed by @Conaclos
+- [useArrowFunction](https://biomejs.dev/linter/rules/use-arrow-function) no longer reports function in `extends` clauses or in a `new` expression. Contributed by @Conaclos
 
   This cases requires the presence of a prototype.
 
@@ -106,6 +106,8 @@ Read our [guidelines for writing a good changelog entry](https://github.com/biom
 
   Contributed by @Conaclos
 
+- Fix [#1514](https://github.com/biomejs/biome/issues/1514). Fix autofix suggestion to avoid the syntax error in `no_useless_fragments`. Contributed by @togami2864
+
 ### Parser
 
 

website/src/content/docs/linter/rules/no-useless-fragments.md

@@ -38,11 +38,10 @@ foo
 <strong><span style="color: lightgreen;">  </span></strong><strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Unsafe fix</span><span style="color: lightgreen;">: </span><span style="color: lightgreen;">Remove the Fragment</span>
 
     <strong>1</strong>  <strong> │ </strong><span style="color: Tomato;">-</span> <span style="color: Tomato;"><strong>&lt;</strong></span><span style="color: Tomato;"><strong>&gt;</strong></span>
-      <strong>1</strong><strong> │ </strong><span style="color: MediumSeaGreen;">+</span> <span style="color: MediumSeaGreen;"><strong>&quot;</strong></span>
-    <strong>2</strong> <strong>2</strong><strong> │ </strong>  foo
+    <strong>2</strong>  <strong> │ </strong><span style="color: Tomato;">-</span> <span style="color: Tomato;">f</span><span style="color: Tomato;">o</span><span style="color: Tomato;">o</span>
     <strong>3</strong>  <strong> │ </strong><span style="color: Tomato;">-</span> <span style="color: Tomato;"><strong>&lt;</strong></span><span style="color: Tomato;"><strong>/</strong></span><span style="color: Tomato;"><strong>&gt;</strong></span>
-      <strong>3</strong><strong> │ </strong><span style="color: MediumSeaGreen;">+</span> <span style="color: MediumSeaGreen;"><strong>&quot;</strong></span>
-    <strong>4</strong> <strong>4</strong><strong> │ </strong>  
+      <strong>1</strong><strong> │ </strong><span style="color: MediumSeaGreen;">+</span> <span style="color: MediumSeaGreen;"><strong>&quot;</strong></span><span style="color: MediumSeaGreen;">f</span><span style="color: MediumSeaGreen;">o</span><span style="color: MediumSeaGreen;">o</span><span style="color: MediumSeaGreen;"><strong>&quot;</strong></span>
+    <strong>4</strong> <strong>2</strong><strong> │ </strong>  
 
 </code></pre>
 
@@ -68,11 +67,10 @@ foo
 <strong><span style="color: lightgreen;">  </span></strong><strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Unsafe fix</span><span style="color: lightgreen;">: </span><span style="color: lightgreen;">Remove the Fragment</span>
 
     <strong>1</strong>  <strong> │ </strong><span style="color: Tomato;">-</span> <span style="color: Tomato;"><strong>&lt;</strong></span><span style="color: Tomato;"><strong>R</strong></span><span style="color: Tomato;"><strong>e</strong></span><span style="color: Tomato;"><strong>a</strong></span><span style="color: Tomato;"><strong>c</strong></span><span style="color: Tomato;"><strong>t</strong></span><span style="color: Tomato;"><strong>.</strong></span><span style="color: Tomato;"><strong>F</strong></span><span style="color: Tomato;"><strong>r</strong></span><span style="color: Tomato;"><strong>a</strong></span><span style="color: Tomato;"><strong>g</strong></span><span style="color: Tomato;"><strong>m</strong></span><span style="color: Tomato;"><strong>e</strong></span><span style="color: Tomato;"><strong>n</strong></span><span style="color: Tomato;"><strong>t</strong></span><span style="color: Tomato;"><strong>&gt;</strong></span>
-      <strong>1</strong><strong> │ </strong><span style="color: MediumSeaGreen;">+</span> <span style="color: MediumSeaGreen;"><strong>&quot;</strong></span>
-    <strong>2</strong> <strong>2</strong><strong> │ </strong>  foo
+    <strong>2</strong>  <strong> │ </strong><span style="color: Tomato;">-</span> <span style="color: Tomato;">f</span><span style="color: Tomato;">o</span><span style="color: Tomato;">o</span>
     <strong>3</strong>  <strong> │ </strong><span style="color: Tomato;">-</span> <span style="color: Tomato;"><strong>&lt;</strong></span><span style="color: Tomato;"><strong>/</strong></span><span style="color: Tomato;"><strong>R</strong></span><span style="color: Tomato;"><strong>e</strong></span><span style="color: Tomato;"><strong>a</strong></span><span style="color: Tomato;"><strong>c</strong></span><span style="color: Tomato;"><strong>t</strong></span><span style="color: Tomato;"><strong>.</strong></span><span style="color: Tomato;"><strong>F</strong></span><span style="color: Tomato;"><strong>r</strong></span><span style="color: Tomato;"><strong>a</strong></span><span style="color: Tomato;"><strong>g</strong></span><span style="color: Tomato;"><strong>m</strong></span><span style="color: Tomato;"><strong>e</strong></span><span style="color: Tomato;"><strong>n</strong></span><span style="color: Tomato;"><strong>t</strong></span><span style="color: Tomato;"><strong>&gt;</strong></span>
-      <strong>3</strong><strong> │ </strong><span style="color: MediumSeaGreen;">+</span> <span style="color: MediumSeaGreen;"><strong>&quot;</strong></span>
-    <strong>4</strong> <strong>4</strong><strong> │ </strong>  
+      <strong>1</strong><strong> │ </strong><span style="color: MediumSeaGreen;">+</span> <span style="color: MediumSeaGreen;"><strong>&quot;</strong></span><span style="color: MediumSeaGreen;">f</span><span style="color: MediumSeaGreen;">o</span><span style="color: MediumSeaGreen;">o</span><span style="color: MediumSeaGreen;"><strong>&quot;</strong></span>
+    <strong>4</strong> <strong>2</strong><strong> │ </strong>  
 
 </code></pre>