fix(lint): added more test cases for variable declarations in noLeakedRender

.changeset/curvy-worlds-invent.md

@@ -0,0 +1,31 @@
+---
+'@biomejs/biome': patch
+---
+
+Related to [#8491](https://github.com/biomejs/biome/issues/8491): Fixed the issue with false positive errors for safe boolean expressions.
+
+This new change will check for safe boolean expressions in variable declarations.
+
+For example,
+
+Valid:
+
+```jsx
+let isOne = 1;
+let isPositiveNumber = number > 0;
+
+return <div> {isOne && "One } { isPositiveNumber && "Is positive" }</div>
+```
+
+Invalid:
+
+```jsx
+let emptyStr = '';
+let isZero = 0;
+
+return (
+  <div>
+    {emptyStr && 'Empty String'} {isZero && 'Number is zero'}{' '}
+  </div>
+);
+```

crates/biome_js_analyze/src/lint/nursery/no_leaked_render.rs

@@ -2,10 +2,11 @@ use biome_analyze::{
     Rule, RuleDiagnostic, RuleDomain, RuleSource, context::RuleContext, declare_lint_rule,
 };
 use biome_console::markup;
+use biome_js_semantic::SemanticModel;
 use biome_js_syntax::{
-    AnyJsExpression, JsConditionalExpression, JsLogicalExpression, JsLogicalOperator, JsSyntaxNode,
-    JsxExpressionChild, JsxTagExpression, binding_ext::AnyJsBindingDeclaration,
-    jsx_ext::AnyJsxElement,
+    AnyJsExpression, AnyJsLiteralExpression, JsConditionalExpression, JsLogicalExpression,
+    JsLogicalOperator, JsReferenceIdentifier, JsSyntaxNode, JsxExpressionChild, JsxTagExpression,
+    binding_ext::AnyJsBindingDeclaration, jsx_ext::AnyJsxElement,
 };
 use biome_rowan::{AstNode, declare_node_union};
 use biome_rule_options::no_leaked_render::NoLeakedRenderOptions;
@@ -98,7 +99,7 @@ declare_lint_rule! {
 
 impl Rule for NoLeakedRender {
     type Query = Semantic<NoLeakedRenderQuery>;
-    type State = bool;
+    type State = ();
     type Signals = Option<Self::State>;
     type Options = NoLeakedRenderOptions;
 
@@ -165,38 +166,46 @@ impl Rule for NoLeakedRender {
 
                 if let AnyJsExpression::JsIdentifierExpression(ident) = &left {
                     let name = ident.name().ok()?;
-
                     // Use the semantic model to resolve the variable binding and check
-                    // if it's initialized with a boolean literal. This allows us to
+                    // if it's initialized with safe expressions. This allows us to
                     // handle cases like:
                     // let isOpen = false;  // This is safe
+                    // let isError = errorCount > 0; // This is safe
+                    // let isEqual = a === b; // This is safe
+                    // let emptyStr = ''; // This is unsafe
                     // return <div>{isOpen && <Content />}</div>;  // This should pass
-                    if let Some(binding) = model.binding(&name)
-                        && binding
-                            .tree()
-                            .declaration()
-                            .and_then(|declaration| {
-                                if let AnyJsBindingDeclaration::JsVariableDeclarator(declarator) =
-                                    declaration
-                                {
-                                    Some(declarator)
-                                } else {
-                                    None
-                                }
-                            })
-                            .and_then(|declarator| declarator.initializer())
-                            .and_then(|initializer| initializer.expression().ok())
-                            .and_then(|expr| {
-                                if let AnyJsExpression::AnyJsLiteralExpression(literal) = expr {
-                                    Some(literal)
-                                } else {
-                                    None
-                                }
-                            })
-                            .and_then(|literal| literal.value_token().ok())
-                            .is_some_and(|token| matches!(token.text_trimmed(), "true" | "false"))
-                    {
-                        return None;
+                    // return <div> {isError && <Error />}</div>;  // This should pass
+                    // return <div> {isEqual && <Equal />}</div>;  // This should pass
+                    // return <div> {emptyStr && <Empty />}</div>;  // This should fail
+
+                    if let Some(variable) = find_variable(model, &name) {
+                        match variable {
+                            AnyJsExpression::AnyJsLiteralExpression(expr) => {
+                                match expr {
+                                    AnyJsLiteralExpression::JsStringLiteralExpression(str) => {
+                                        if str.inner_string_text().ok()?.text().is_empty() {
+                                            return Some(());
+                                        }
+                                        return None;
+                                    }
+                                    AnyJsLiteralExpression::JsNullLiteralExpression(_) => {
+                                        return Some(());
+                                    }
+                                    AnyJsLiteralExpression::JsNumberLiteralExpression(num) => {
+                                        let value = num.value_token().ok()?;
+                                        if value.text_trimmed() == "0" {
+                                            return Some(());
+                                        }
+                                        return None;
+                                    }
+                                    _ => return None,
+                                };
+                            }
+                            AnyJsExpression::JsUnaryExpression(_)
+                            | AnyJsExpression::JsBinaryExpression(_)
+                            | AnyJsExpression::JsCallExpression(_) => return None,
+                            _ => {}
+                        }
                     }
                 }
 
@@ -205,7 +214,7 @@ impl Rule for NoLeakedRender {
                     return None;
                 }
 
-                Some(true)
+                Some(())
             }
             NoLeakedRenderQuery::JsConditionalExpression(expr) => {
                 let alternate = expr.alternate().ok()?;
@@ -216,7 +225,7 @@ impl Rule for NoLeakedRender {
                     return None;
                 }
 
-                Some(true)
+                Some(())
             }
         }
     }
@@ -276,3 +285,17 @@ fn is_inside_jsx_expression(node: &JsSyntaxNode) -> Option<bool> {
             || AnyJsxElement::can_cast(parent.kind()),
     )
 }
+
+fn find_variable(model: &SemanticModel, name: &JsReferenceIdentifier) -> Option<AnyJsExpression> {
+    let Some(binding) = model.binding(name) else {
+        return None;
+    };
+
+    let declaration = binding.tree().declaration()?;
+    let AnyJsBindingDeclaration::JsVariableDeclarator(declarator) = declaration else {
+        return None;
+    };
+
+    let expr = declarator.initializer()?.expression().ok()?;
+    return Some(expr);
+}

crates/biome_js_analyze/tests/specs/nursery/noLeakedRender/invalid.jsx

@@ -67,3 +67,15 @@ const MyComponent5 = ({ data }) => {
 const MyComponent6 = ({ value }) => {
 	return <div>{(((value))) && <Item />}</div>;
 };
+
+const isNaN = NaN;
+const isZero = 0;
+const emptyStr = '';
+const MyComponent7 = () => {
+	return <>
+		<div> {isNan && 'NaN'} </div>
+		<div> {isZero && 'Zero'} </div>
+		<div>{emptyStr && "Empty String"}</div>
+	</>
+}
+

crates/biome_js_analyze/tests/specs/nursery/noLeakedRender/invalid.jsx.snap

@@ -74,6 +74,18 @@ const MyComponent6 = ({ value }) => {
 	return <div>{(((value))) && <Item />}</div>;
 };
 
+const isNaN = NaN;
+const isZero = 0;
+const emptyStr = '';
+const MyComponent7 = () => {
+	return <>
+		<div> {isNan && 'NaN'} </div>
+		<div> {isZero && 'Zero'} </div>
+		<div>{emptyStr && "Empty String"}</div>
+	</>
+}
+
+
 ```
 
 # Diagnostics
@@ -366,3 +378,66 @@ invalid.jsx:68:15 lint/nursery/noLeakedRender ━━━━━━━━━━━
 
 
 ```
+
+```
+invalid.jsx:76:10 lint/nursery/noLeakedRender ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i Potential leaked value that might cause unintended rendering.
+
+    74 │ const MyComponent7 = () => {
+    75 │ 	return <>
+  > 76 │ 		<div> {isNan && 'NaN'} </div>
+       │ 		       ^^^^^^^^^^^^^^
+    77 │ 		<div> {isZero && 'Zero'} </div>
+    78 │ 		<div>{emptyStr && "Empty String"}</div>
+
+  i JavaScript's && operator returns the left value when it's falsy (e.g., 0, NaN, ''). React will render that value, causing unexpected UI output.
+
+  i Make sure the condition is explicitly boolean.Use !!value, value > 0, or a ternary expression.
+
+  i This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
+
+
+```
+
+```
+invalid.jsx:77:10 lint/nursery/noLeakedRender ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i Potential leaked value that might cause unintended rendering.
+
+    75 │ 	return <>
+    76 │ 		<div> {isNan && 'NaN'} </div>
+  > 77 │ 		<div> {isZero && 'Zero'} </div>
+       │ 		       ^^^^^^^^^^^^^^^^
+    78 │ 		<div>{emptyStr && "Empty String"}</div>
+    79 │ 	</>
+
+  i JavaScript's && operator returns the left value when it's falsy (e.g., 0, NaN, ''). React will render that value, causing unexpected UI output.
+
+  i Make sure the condition is explicitly boolean.Use !!value, value > 0, or a ternary expression.
+
+  i This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
+
+
+```
+
+```
+invalid.jsx:78:9 lint/nursery/noLeakedRender ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i Potential leaked value that might cause unintended rendering.
+
+    76 │ 		<div> {isNan && 'NaN'} </div>
+    77 │ 		<div> {isZero && 'Zero'} </div>
+  > 78 │ 		<div>{emptyStr && "Empty String"}</div>
+       │ 		      ^^^^^^^^^^^^^^^^^^^^^^^^^^
+    79 │ 	</>
+    80 │ }
+
+  i JavaScript's && operator returns the left value when it's falsy (e.g., 0, NaN, ''). React will render that value, causing unexpected UI output.
+
+  i Make sure the condition is explicitly boolean.Use !!value, value > 0, or a ternary expression.
+
+  i This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
+
+
+```

crates/biome_js_analyze/tests/specs/nursery/noLeakedRender/valid.jsx

@@ -72,3 +72,23 @@ const isOpen2 = false;
 const Component15 = () => {
 	return <Popover open={isOpen2 && items.length > 0} />;
 };
+
+const errorCount = 1;
+const Component16 = () => {
+	return <div>{errorCount && 'Error'}</div>;
+};
+
+const isErr = errorCount > 0;
+const Component17 = () => {
+	return <div>{isErr && 'Error'}</div>;
+};
+
+const someCondition = !!x;
+const Component18 = () => {
+	return <div> {someCondition && 'hello'} </div>;
+};
+
+const isEqual = a == b;
+const Component19 = () => {
+	return <div>{isEqual && 'Equal'}</div>;
+};

crates/biome_js_analyze/tests/specs/nursery/noLeakedRender/valid.jsx.snap

@@ -79,4 +79,24 @@ const Component15 = () => {
 	return <Popover open={isOpen2 && items.length > 0} />;
 };
 
+const errorCount = 1;
+const Component16 = () => {
+	return <div>{errorCount && 'Error'}</div>;
+};
+
+const isErr = errorCount > 0;
+const Component17 = () => {
+	return <div>{isErr && 'Error'}</div>;
+};
+
+const someCondition = !!x;
+const Component18 = () => {
+	return <div> {someCondition && 'hello'} </div>;
+};
+
+const isEqual = a == b;
+const Component19 = () => {
+	return <div>{isEqual && 'Equal'}</div>;
+};
+
 ```