fix(noLeakedRender): fixed the issue with diagnostics for some components

Author: dibashthapa

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

@@ -1,4 +1,6 @@
-use biome_analyze::{Rule, RuleDiagnostic, context::RuleContext, declare_lint_rule};
+use biome_analyze::{
+    Rule, RuleDiagnostic, RuleDomain, RuleSource, context::RuleContext, declare_lint_rule,
+};
 use biome_console::markup;
 use biome_js_semantic::{Binding, SemanticModel};
 use biome_js_syntax::{
@@ -89,12 +91,43 @@ declare_lint_rule! {
     ///   const isReady = true;
     ///   return <div>{isReady && <Content />}</div>;
     /// }
+    ///
+    /// ### `validStrategies`
+    ///
+    /// An array containing "coerce", "ternary", or both (default: ["ternary", "coerce"])
+    /// Decide which strategies are considered valid to prevent leaked renders (at least 1 is required).
+    /// The "coerce" option will transform the conditional of the JSX expression to a boolean.
+    /// The "ternary" option transforms the binary expression into a ternay expression return `null`
+    /// for falsy values.
+    ///
+    /// ```json
+    /// {
+    ///   "noLeakedRender": {
+    ///     "options": {
+    ///       "validStrategies": ["coerce", "ternary"]
+    ///     }
+    ///   }
+    /// }
+    ///
+    /// {
+    ///   "noLeakedRender": {
+    ///     "options": {
+    ///       "validStrategies": ["coerce"]
+    ///     }
+    ///   }
+    /// }
+    /// ```
+
     /// ```
 
     pub NoLeakedRender{
         version: "next",
         name: "noLeakedRender",
-        language: "js",
+        language: "jsx",
+        domains: &[RuleDomain::React],
+        sources: &[
+            RuleSource::EslintReact("no-leaked-render").same(),
+        ],
         recommended: false,
     }
 }
@@ -103,11 +136,7 @@ const COERCE_STRATEGY: &str = "coerce";
 const TERNARY_STRATEGY: &str = "ternary";
 const TERNARY_INVALID_ALTERNATE_VALUES: &[&str] = &["null", "undefined", "false"];
 
-const DEFAULT_VALID_STRATEGIES: &[&str] = &[TERNARY_STRATEGY, COERCE_STRATEGY];
-
-pub enum NoLeakedRenderState {
-    NoPotentialLeakedRender,
-}
+const DEFAULT_VALID_STRATEGIES: &[&str] = &[COERCE_STRATEGY, TERNARY_STRATEGY];
 
 fn get_variable_from_context(
     model: &SemanticModel,
@@ -132,7 +161,7 @@ declare_node_union! {
 
 impl Rule for NoLeakedRender {
     type Query = Semantic<Query>;
-    type State = NoLeakedRenderState;
+    type State = bool;
     type Signals = Option<Self::State>;
     type Options = NoLeakedRenderOptions;
 
@@ -179,25 +208,27 @@ impl Rule for NoLeakedRender {
                     if let AnyJsExpression::JsIdentifierExpression(ident) = &left {
                         let name = ident.name().ok()?;
 
-                        let binding = get_variable_from_context(
+                        if let Some(binding) = get_variable_from_context(
                             model,
                             left_node,
                             name.to_trimmed_text().trim(),
-                        )?;
-
-                        let declaration = binding.tree().declaration()?;
+                        ) {
+                            let declaration = binding.tree().declaration()?;
 
-                        if let AnyJsBindingDeclaration::JsVariableDeclarator(declarator) =
-                            declaration
-                        {
-                            let initializer = declarator.initializer()?;
-                            let initializer = initializer.expression().ok()?;
+                            if let AnyJsBindingDeclaration::JsVariableDeclarator(declarator) =
+                                declaration
+                            {
+                                let initializer = declarator.initializer()?;
+                                let initializer = initializer.expression().ok()?;
 
-                            if let AnyJsExpression::AnyJsLiteralExpression(literal) = initializer {
-                                let literal = literal.value_token().ok()?;
+                                if let AnyJsExpression::AnyJsLiteralExpression(literal) =
+                                    initializer
+                                {
+                                    let literal = literal.value_token().ok()?;
 
-                                if matches!(literal.text_trimmed(), "true" | "false") {
-                                    return None;
+                                    if matches!(literal.text_trimmed(), "true" | "false") {
+                                        return None;
+                                    }
                                 }
                             }
                         }
@@ -209,7 +240,7 @@ impl Rule for NoLeakedRender {
                     return None;
                 }
 
-                return Some(NoLeakedRenderState::NoPotentialLeakedRender);
+                return Some(true);
             }
             Query::JsConditionalExpression(expr) => {
                 if valid_strategies
@@ -223,13 +254,13 @@ impl Rule for NoLeakedRender {
                     .iter()
                     .any(|&s| alternate.to_trimmed_text() == s);
 
-                let is_jsx_element_alt = matches!(alternate, AnyJsExpression::sxTagExpression(_));
+                let is_jsx_element_alt = matches!(alternate, AnyJsExpression::JsxTagExpression(_));
 
                 if !is_problematic_alternate || is_jsx_element_alt {
                     return None;
                 }
 
-                return Some(NoLeakedRenderState::NoPotentialLeakedRender);
+                return Some(true);
             }
         }
     }

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

@@ -305,6 +305,84 @@ invalid.jsx:47:15 lint/nursery/noLeakedRender ━━━━━━━━━━━
   i Make sure the condition is explicitly boolean.Use !!value, value > 0, or a ternary expression.
   
 
+```
+
+```
+invalid.jsx:51:15 lint/nursery/noLeakedRender ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i Potential leaked value that might cause unintended rendering.
+  
+    50 │ const MyComponent2 = () => {
+  > 51 │ 	return <div>{maybeObject && (isFoo ? <Aaa /> : <Bbb />)}</div>;
+       │ 	             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    52 │ };
+    53 │ 
+  
+  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.
+  
+
+```
+
+```
+invalid.jsx:59:29 lint/nursery/noLeakedRender ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i Potential leaked value that might cause unintended rendering.
+  
+    58 │ const MyComponent4 = () => {
+  > 59 │ 	return <Something checked={cond && isIndeterminate ? false : isChecked} />;
+       │ 	                           ^^^^^^^^^^^^^^^^^^^^^^^
+    60 │ };
+    61 │ 
+  
+  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.
+  
+
+```
+
+```
+invalid.jsx:65:5 lint/nursery/noLeakedRender ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i Potential leaked value that might cause unintended rendering.
+  
+    63 │ 	return (
+    64 │ 		<>
+  > 65 │ 			{someCondition && (
+       │ 			 ^^^^^^^^^^^^^^^^^^
+  > 66 │ 				<div>
+  > 67 │ 					<p>hello</p>
+  > 68 │ 				</div>
+  > 69 │ 			)}
+       │ 			^
+    70 │ 		</>
+    71 │ 	);
+  
+  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.
+  
+
+```
+
+```
+invalid.jsx:75:12 lint/nursery/noLeakedRender ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i Potential leaked value that might cause unintended rendering.
+  
+    74 │ const MyComponent6 = () => {
+  > 75 │ 	return <>{someCondition && <SomeComponent prop1={val1} prop2={val2} />}</>;
+       │ 	          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    76 │ };
+    77 │ 
+  
+  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.
+  
+
 ```
 
 ```

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

@@ -97,6 +97,25 @@ invalid.jsx:7:5 lint/nursery/noLeakedRender ━━━━━━━━━━━━
   i Make sure the condition is explicitly boolean.Use !!value, value > 0, or a ternary expression.
   
 
+```
+
+```
+invalid.jsx:8:5 lint/nursery/noLeakedRender ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i Potential leaked value that might cause unintended rendering.
+  
+     6 │ 			{0 && <Something />}
+     7 │ 			{'' && <Something />}
+   > 8 │ 			{NaN && <Something />}
+       │ 			 ^^^^^^^^^^^^^^^^^^^^
+     9 │ 		</>
+    10 │ 	);
+  
+  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.
+  
+
 ```
 
 ```
@@ -207,3 +226,45 @@ invalid.jsx:36:15 lint/nursery/noLeakedRender ━━━━━━━━━━━
   
 
 ```
+
+```
+invalid.jsx:42:5 lint/nursery/noLeakedRender ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i Potential leaked value that might cause unintended rendering.
+  
+    40 │ 	return (
+    41 │ 		<>
+  > 42 │ 			{someCondition && (
+       │ 			 ^^^^^^^^^^^^^^^^^^
+  > 43 │ 				<div>
+  > 44 │ 					<p>hello</p>
+  > 45 │ 				</div>
+  > 46 │ 			)}
+       │ 			^
+    47 │ 		</>
+    48 │ 	);
+  
+  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.
+  
+
+```
+
+```
+invalid.jsx:52:12 lint/nursery/noLeakedRender ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i Potential leaked value that might cause unintended rendering.
+  
+    51 │ const MyComponent2 = () => {
+  > 52 │ 	return <>{someCondition && <SomeComponent prop1={val1} prop2={val2} />}</>;
+       │ 	          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    53 │ };
+    54 │ 
+  
+  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.
+  
+
+```