feat(lint): add rule noJsxPropsBind

crates/biome_diagnostics_categories/src/categories.rs

@@ -133,6 +133,7 @@ define_categories! {
     "lint/correctness/useValidForDirection": "https://biomejs.dev/linter/rules/use-valid-for-direction",
     "lint/correctness/useYield": "https://biomejs.dev/linter/rules/use-yield",
     "lint/nursery/colorNoInvalidHex": "https://biomejs.dev/linter/rules/color-no-invalid-hex",
+    "lint/nursery/noJsxPropsBind": "https://biomejs.dev/linter/rules/no-jsx-props-bind",
     "lint/nursery/noColorInvalidHex": "https://biomejs.dev/linter/rules/no-color-invalid-hex",
     "lint/nursery/noCommonJs": "https://biomejs.dev/linter/rules/no-common-js",
     "lint/nursery/noConsole": "https://biomejs.dev/linter/rules/no-console",

crates/biome_js_analyze/src/lint/nursery.rs

@@ -2,6 +2,7 @@
 
 use biome_analyze::declare_lint_group;
 
+pub mod no_jsx_props_bind;
 pub mod no_common_js;
 pub mod no_document_cookie;
 pub mod no_document_import_in_page;
@@ -47,6 +48,7 @@ declare_lint_group! {
     pub Nursery {
         name : "nursery" ,
         rules : [
+            self :: no_jsx_props_bind :: NoJsxPropsBind ,
             self :: no_common_js :: NoCommonJs ,
             self :: no_document_cookie :: NoDocumentCookie ,
             self :: no_document_import_in_page :: NoDocumentImportInPage ,

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

@@ -0,0 +1,127 @@
+use biome_analyze::{
+    context::RuleContext, declare_lint_rule, Ast, Rule, RuleDiagnostic, RuleSource, RuleSourceKind
+};
+use biome_console::markup;
+use biome_js_syntax::{
+    AnyJsExpression, AnyJsxAttribute, AnyJsxAttributeName, JsFunctionExpression, JsxAttribute, JsxAttributeInitializerClause, JsxExpressionAttributeValue
+};
+use biome_rowan::AstNode;
+declare_lint_rule! {
+    /// Disallow .bind() or function declaration in JSX props
+    ///
+    /// Using `.bind()` on a function or declaring a function directly in props
+    /// creates a new function on every render, which is treated as a completely different function.
+    ///
+    ///
+    /// ### Invalid
+    ///
+    /// ```js,expect_diagnostic
+    /// <Foo onClick={this._handleClick.bind(this)}></Foo>
+    /// ```
+    /// 
+    /// ```js,expect_diagnostic
+    /// <Foo onClick={() => console.log('Hello!')}></Foo>
+    /// ```
+    /// 
+    /// ```js,expect_diagnostic
+    /// <Foo onClick={function () { console.log('Hello!'); }}></Foo>
+    /// ```
+    ///
+    /// ### Valid
+    ///
+    /// ```js
+    /// <Foo onClick={this._handleClick}></Foo>
+    /// ```
+    ///
+    pub NoJsxPropsBind {
+        version: "next",
+        name: "noJsxPropsBind",
+        language: "jsx",
+        sources: &[RuleSource::EslintReact("jsx-no-bind")],
+        source_kind: RuleSourceKind::Inspired,
+        recommended: false,
+    }
+}
+
+impl Rule for NoJsxPropsBind {
+    type Query = Ast<JsxAttribute>;
+    type State = ();
+    type Signals = Option<Self::State>;
+    // TODO: Find how to use option
+    type Options = ();
+
+fn run(ctx: &RuleContext<Self>) -> Self::Signals {
+    let attribute = ctx.query();
+    let attribute_name = attribute.name().ok()?;
+
+    /*
+    TODO: Too many if, find simple way
+    rust analyzer doc: https://github.com/rust-lang/rust-analyzer/blob/master/docs/dev/syntax.md
+    biome_js_syntax doc: https://docs.rs/biome_js_syntax/latest/biome_js_syntax/index.html
+    */
+    if is_event_handler(&attribute_name) {
+        if let Some(initializer) = attribute.initializer() {
+            if let Some(attribute_value) = initializer.value().ok() {
+                if let Some(expression_value) = attribute_value.as_jsx_expression_attribute_value() {
+                    if let Some(expression) = expression_value.expression().ok() {
+                            match expression {
+                                AnyJsExpression::JsArrowFunctionExpression(_) => return Some(()),
+                                AnyJsExpression::JsFunctionExpression(_) => return Some(()),
+                                AnyJsExpression::JsCallExpression(_) => return Some(()),
+                                _ => {}
+                            }
+
+                    }
+                }
+            }
+        }
+    }
+    None
+}
+
+    fn diagnostic(ctx: &RuleContext<Self>, _state: &Self::State) -> Option<RuleDiagnostic> {
+        //
+        // Read our guidelines to write great diagnostics:
+        // https://docs.rs/biome_analyze/latest/biome_analyze/#what-a-rule-should-say-to-the-user
+        //
+        let node = ctx.query();
+
+        Some(
+            RuleDiagnostic::new(
+                rule_category!(),
+                node.range(),
+                markup! {
+                    "Disallow .bind() or function declaration in JSX props"
+                },
+            )
+            .note(markup! {
+                "This note will give you more information."
+            }),
+        )
+    }
+}
+
+fn is_event_handler(name: &AnyJsxAttributeName) -> bool {
+    match name {
+        AnyJsxAttributeName::JsxName(identifier) => {
+            if let Some(value_token) = identifier.value_token().ok() {
+                let name_text = value_token.text_trimmed();
+                name_text.starts_with("on")
+            } else {
+                false
+            }
+        }
+        _ => false,
+    }
+}
+
+fn is_arrow_or_anonymous(expression: AnyJsExpression) -> bool {
+    matches!(
+        expression,
+        AnyJsExpression::JsArrowFunctionExpression(_) | AnyJsExpression::JsFunctionExpression(_)
+    )
+}
+
+fn has_bind_call() -> bool {
+    false
+}

crates/biome_js_analyze/tests/specs/nursery/noJsxPropsBind/invalid.js

@@ -0,0 +1,3 @@
+var a = 1;
+a = 2;
+a = 3;

crates/biome_js_analyze/tests/specs/nursery/noJsxPropsBind/valid.js

@@ -0,0 +1,2 @@
+/* should not generate diagnostics */
+// var a = 1;