diff --git a/CHANGELOG.md b/CHANGELOG.md index 8c79810f2727..d5b01ddecb21 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,6 +28,8 @@ Read our [guidelines for writing a good changelog entry](https://github.com/biom #### Bug fixes +- Fix [#1335](https://github.com/biomejs/biome/issues/1335). [noUselessFragments](https://biomejs.dev/linter/rules/no-useless-fragments/) now ignores code action on component props when the fragment is empty. Contributed by @vasucp1207 + - [useConsistentArrayType](https://biomejs.dev/rules/use-consistent-array-type) was accidentally placed in the `style` rule group instead of the `nursery` group. It is now correctly placed under `nursery`. - Fix [#1483](https://github.com/biomejs/biome/issues/1483). [useConsistentArrayType](https://biomejs.dev/rules/use-consistent-array-type) now correctly handles its option. Contributed by @Conaclos diff --git a/crates/biome_js_analyze/src/semantic_analyzers/complexity/no_useless_fragments.rs b/crates/biome_js_analyze/src/semantic_analyzers/complexity/no_useless_fragments.rs index 8a9f41d8a055..1bfc309d7f2d 100644 --- a/crates/biome_js_analyze/src/semantic_analyzers/complexity/no_useless_fragments.rs +++ b/crates/biome_js_analyze/src/semantic_analyzers/complexity/no_useless_fragments.rs @@ -43,6 +43,20 @@ declare_rule! { /// ```jsx,expect_diagnostic /// <> /// ``` + /// + /// ## Valid + /// + /// ```jsx + /// <> + /// + /// + /// + /// ``` + /// + /// ```jsx + /// <>foo {bar} + /// ``` + /// pub(crate) NoUselessFragments { version: "1.0.0", name: "noUselessFragments", @@ -266,7 +280,10 @@ impl Rule for NoUselessFragments { mutation.remove_element(parent.into()); } } else { - mutation.remove_element(parent.into()); + // can't apply a code action when there is no children because it will create invalid syntax + // for example `
}` would become `
"Fragment""." }, - )) + ).note(markup! { + "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""." + })) } } diff --git a/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/assigments.jsx.snap b/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/assigments.jsx.snap index e412889e8c0d..ce791a06d952 100644 --- a/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/assigments.jsx.snap +++ b/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/assigments.jsx.snap @@ -18,6 +18,8 @@ assigments.jsx:1:7 lint/complexity/noUselessFragments FIXABLE ━━━━━ │ ^^^^^^^^^^ 2 │ + 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 1 │ - arr·=·<>Error diff --git a/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/componentFragment.jsx b/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/componentFragment.jsx new file mode 100644 index 000000000000..d6bf9c99a561 --- /dev/null +++ b/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/componentFragment.jsx @@ -0,0 +1,14 @@ +import { Suspense } from "react"; +import { Comp } from "./components/Comp"; + +export function Component() { + return ( +
+ }> +

Hi

+ + + } /> +
+ ); +} \ No newline at end of file diff --git a/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/componentFragment.jsx.snap b/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/componentFragment.jsx.snap new file mode 100644 index 000000000000..6fc0ffef0b38 --- /dev/null +++ b/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/componentFragment.jsx.snap @@ -0,0 +1,58 @@ +--- +source: crates/biome_js_analyze/tests/spec_tests.rs +expression: componentFragment.jsx +--- +# Input +```jsx +import { Suspense } from "react"; +import { Comp } from "./components/Comp"; + +export function Component() { + return ( +
+ }> +

Hi

+ + + } /> +
+ ); +} +``` + +# Diagnostics +``` +componentFragment.jsx:7:27 lint/complexity/noUselessFragments ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + ! Avoid using unnecessary Fragment. + + 5 │ return ( + 6 │
+ > 7 │ }> + │ ^^^^^ + 8 │

Hi

+ 9 │ + + 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. + + +``` + +``` +componentFragment.jsx:11:19 lint/complexity/noUselessFragments ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + ! Avoid using unnecessary Fragment. + + 9 │ + 10 │ + > 11 │ } /> + │ ^^^^^ + 12 │
+ 13 │ ); + + 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. + + +``` + + diff --git a/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/fromImportInvalid.jsx.snap b/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/fromImportInvalid.jsx.snap index 4838350a031e..585cfe8c2aa5 100644 --- a/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/fromImportInvalid.jsx.snap +++ b/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/fromImportInvalid.jsx.snap @@ -25,6 +25,8 @@ fromImportInvalid.jsx:4:5 lint/complexity/noUselessFragments FIXABLE ━━━ 5 │ 6 │ + 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 4 │ ···· @@ -44,6 +46,8 @@ fromImportInvalid.jsx:5:5 lint/complexity/noUselessFragments FIXABLE ━━━ 6 │ 7 │ + 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 5 │ ···· diff --git a/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/fromImportNamespaceInvalid.jsx.snap b/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/fromImportNamespaceInvalid.jsx.snap index b5520113f73d..7a8bf65a1871 100644 --- a/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/fromImportNamespaceInvalid.jsx.snap +++ b/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/fromImportNamespaceInvalid.jsx.snap @@ -24,6 +24,8 @@ fromImportNamespaceInvalid.jsx:4:5 lint/complexity/noUselessFragments FIXABLE 5 │ 6 │ + 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 4 │ ····foo diff --git a/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/fromImportRenameInvalid.jsx.snap b/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/fromImportRenameInvalid.jsx.snap index 56186eb0b213..fb52ad9eddcb 100644 --- a/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/fromImportRenameInvalid.jsx.snap +++ b/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/fromImportRenameInvalid.jsx.snap @@ -25,6 +25,8 @@ fromImportRenameInvalid.jsx:4:5 lint/complexity/noUselessFragments FIXABLE ━ 5 │ foo 6 │ + 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 4 │ ···· @@ -44,6 +46,8 @@ fromImportRenameInvalid.jsx:5:5 lint/complexity/noUselessFragments FIXABLE ━ 6 │ 7 │ + 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 5 │ ····foo diff --git a/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/issue_459.jsx.snap b/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/issue_459.jsx.snap index cde43367c64c..a84341c52814 100644 --- a/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/issue_459.jsx.snap +++ b/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/issue_459.jsx.snap @@ -18,6 +18,8 @@ issue_459.jsx:1:16 lint/complexity/noUselessFragments FIXABLE ━━━━━ │ ^^^^^^^^^^ 2 │ + 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 1 │ - {''·!=·null·&&·<>stuff} diff --git a/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/issue_4639.jsx.snap b/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/issue_4639.jsx.snap index 45629e850a30..e30f3a6aced4 100644 --- a/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/issue_4639.jsx.snap +++ b/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/issue_4639.jsx.snap @@ -22,6 +22,8 @@ issue_4639.jsx:2:28 lint/complexity/noUselessFragments FIXABLE ━━━━━ 3 │ } 4 │ + 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 1 1 │ export function SomeComponent() { diff --git a/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/noChildren.jsx.snap b/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/noChildren.jsx.snap index 3fa901e7d3c8..5790fc51832e 100644 --- a/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/noChildren.jsx.snap +++ b/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/noChildren.jsx.snap @@ -26,6 +26,8 @@ noChildren.jsx:4:5 lint/complexity/noUselessFragments FIXABLE ━━━━━ 5 │ 6 │ + 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 4 │ ····<> @@ -45,6 +47,8 @@ noChildren.jsx:5:5 lint/complexity/noUselessFragments FIXABLE ━━━━━ 6 │ 7 │ + 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 5 │ ···· @@ -64,6 +68,8 @@ noChildren.jsx:6:5 lint/complexity/noUselessFragments FIXABLE ━━━━━ 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 6 │ ···· diff --git a/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/withChildren.jsx.snap b/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/withChildren.jsx.snap index 868abb531125..7af32dd1b8ce 100644 --- a/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/withChildren.jsx.snap +++ b/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/withChildren.jsx.snap @@ -26,6 +26,8 @@ withChildren.jsx:2:5 lint/complexity/noUselessFragments FIXABLE ━━━━ 3 │ foo 4 │ foo + 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 │ ····<>foo @@ -45,6 +47,8 @@ withChildren.jsx:3:5 lint/complexity/noUselessFragments FIXABLE ━━━━ 4 │ foo 5 │ {/* valid */} + 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 3 │ ····foo @@ -64,6 +68,8 @@ withChildren.jsx:4:5 lint/complexity/noUselessFragments FIXABLE ━━━━ 5 │ {/* valid */} 6 │ + 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 4 │ ····foo diff --git a/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/withCommentsInvalid.jsx.snap b/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/withCommentsInvalid.jsx.snap index c273aba29c94..799fa958004a 100644 --- a/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/withCommentsInvalid.jsx.snap +++ b/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/withCommentsInvalid.jsx.snap @@ -24,6 +24,8 @@ withCommentsInvalid.jsx:2:5 lint/complexity/noUselessFragments FIXABLE ━━ 3 │ <>empty 4 │ <>empty + 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 │ ····empty @@ -43,6 +45,8 @@ withCommentsInvalid.jsx:3:5 lint/complexity/noUselessFragments FIXABLE ━━ 4 │ <>empty 5 │ + 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 3 │ ····<>empty @@ -62,6 +66,8 @@ withCommentsInvalid.jsx:4:5 lint/complexity/noUselessFragments FIXABLE ━━ 5 │ 6 │ + 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 4 │ ····<>empty diff --git a/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/withJsxElementInvalid.jsx.snap b/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/withJsxElementInvalid.jsx.snap index c038ec258fdc..b197f3cfdb8f 100644 --- a/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/withJsxElementInvalid.jsx.snap +++ b/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/withJsxElementInvalid.jsx.snap @@ -16,6 +16,8 @@ withJsxElementInvalid.jsx:1:1 lint/complexity/noUselessFragments FIXABLE ━ > 1 │ <> │ ^^^^^^^^^^^^^^^^^^ + 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 1 │ <> diff --git a/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/withJsxExpressionChildInvalid.jsx.snap b/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/withJsxExpressionChildInvalid.jsx.snap index 8aca5c751e69..1f0ce3b5d617 100644 --- a/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/withJsxExpressionChildInvalid.jsx.snap +++ b/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/withJsxExpressionChildInvalid.jsx.snap @@ -16,6 +16,8 @@ withJsxExpressionChildInvalid.jsx:1:1 lint/complexity/noUselessFragments FIXABL > 1 │ <>{foo} │ ^^^^^^^^^^ + 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 1 │ <>{foo} diff --git a/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/withJsxTextInvalid.jsx.snap b/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/withJsxTextInvalid.jsx.snap index e6de0965a477..548e43b3b89c 100644 --- a/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/withJsxTextInvalid.jsx.snap +++ b/crates/biome_js_analyze/tests/specs/complexity/noUselessFragments/withJsxTextInvalid.jsx.snap @@ -16,6 +16,8 @@ withJsxTextInvalid.jsx:1:1 lint/complexity/noUselessFragments FIXABLE ━━ > 1 │ <>foo │ ^^^^^^^^ + 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 - <>foo diff --git a/website/src/content/docs/internals/changelog.mdx b/website/src/content/docs/internals/changelog.mdx index 170d9bf61491..c15550791729 100644 --- a/website/src/content/docs/internals/changelog.mdx +++ b/website/src/content/docs/internals/changelog.mdx @@ -34,6 +34,8 @@ Read our [guidelines for writing a good changelog entry](https://github.com/biom #### Bug fixes +- Fix [#1335](https://github.com/biomejs/biome/issues/1335). [noUselessFragments](https://biomejs.dev/linter/rules/no-useless-fragments/) now ignores code action on component props when the fragment is empty. Contributed by @vasucp1207 + - [useConsistentArrayType](https://biomejs.dev/rules/use-consistent-array-type) was accidentally placed in the `style` rule group instead of the `nursery` group. It is now correctly placed under `nursery`. - Fix [#1483](https://github.com/biomejs/biome/issues/1483). [useConsistentArrayType](https://biomejs.dev/rules/use-consistent-array-type) now correctly handles its option. Contributed by @Conaclos diff --git a/website/src/content/docs/linter/rules/no-useless-fragments.md b/website/src/content/docs/linter/rules/no-useless-fragments.md index 5e6bf8ab1b9b..9ff635e6427d 100644 --- a/website/src/content/docs/linter/rules/no-useless-fragments.md +++ b/website/src/content/docs/linter/rules/no-useless-fragments.md @@ -31,6 +31,8 @@ foo │ ^^^ 4 │ + ℹ 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. + ℹ Unsafe fix: Remove the Fragment 1 │ - <> @@ -59,6 +61,8 @@ foo │ ^^^^^^^^^^^^^^^^^ 4 │ + ℹ 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. + ℹ Unsafe fix: Remove the Fragment 1 │ - <React.Fragment> @@ -87,6 +91,8 @@ foo 3 │ <SomeComponent /> 4 │ </> + ℹ 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. + ℹ Unsafe fix: Remove the Fragment 2 │ ····<>foo</> @@ -97,7 +103,7 @@ foo <> ``` -
complexity/noUselessFragments.js:1:1 lint/complexity/noUselessFragments  FIXABLE  ━━━━━━━━━━━━━━━━━━
+
complexity/noUselessFragments.js:1:1 lint/complexity/noUselessFragments ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   ✖ Avoid using unnecessary Fragment.
   
@@ -105,12 +111,23 @@ foo
       │ ^^^^^
     2 │ 
   
-  ℹ Unsafe fix: Remove the Fragment
+  ℹ 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.
   
-    1 │ <></>
-      │ -----
 

 
+## Valid
+
+```jsx
+<>
+    
+    
+
+```
+
+```jsx
+<>foo {bar}
+```
+
 ## Related links
 
 - [Disable a rule](/linter/#disable-a-lint-rule)