diff --git a/crates/oxc_linter/src/rules.rs b/crates/oxc_linter/src/rules.rs index c8d4b98f6..08fdf0249 100644 --- a/crates/oxc_linter/src/rules.rs +++ b/crates/oxc_linter/src/rules.rs @@ -177,6 +177,7 @@ mod react { pub mod no_unknown_property; pub mod react_in_jsx_scope; pub mod require_render_return; + pub mod void_dom_elements_no_children; } mod react_perf { @@ -545,6 +546,7 @@ oxc_macros::declare_all_lint_rules! { react::no_is_mounted, react::no_unknown_property, react::require_render_return, + react::void_dom_elements_no_children, react_perf::jsx_no_jsx_as_prop, react_perf::jsx_no_new_array_as_prop, react_perf::jsx_no_new_function_as_prop, diff --git a/crates/oxc_linter/src/rules/react/void_dom_elements_no_children.rs b/crates/oxc_linter/src/rules/react/void_dom_elements_no_children.rs new file mode 100644 index 000000000..c08d0f5af --- /dev/null +++ b/crates/oxc_linter/src/rules/react/void_dom_elements_no_children.rs @@ -0,0 +1,227 @@ +use oxc_ast::{ + ast::{ + Argument, Expression, JSXAttributeItem, JSXAttributeName, JSXElementName, + ObjectPropertyKind, PropertyKey, + }, + AstKind, +}; +use oxc_diagnostics::{ + miette::{self, Diagnostic}, + thiserror::Error, +}; +use oxc_macros::declare_oxc_lint; +use oxc_span::Span; +use phf::phf_set; + +use crate::{context::LintContext, rule::Rule, utils::is_create_element_call, AstNode}; + +#[derive(Debug, Error, Diagnostic)] +#[error("eslint-plugin-react(void-dom-elements-no-children): Disallow void DOM elements (e.g. ``, `
`) from receiving children.")] +#[diagnostic(severity(warning), help("Void DOM element <{0:?} /> cannot receive children."))] +struct VoidDomElementsNoChildrenDiagnostic(pub String, #[label] pub Span); + +#[derive(Debug, Default, Clone)] +pub struct VoidDomElementsNoChildren; + +declare_oxc_lint!( + /// ### What it does + /// There are some HTML elements that are only self-closing (e.g. img, br, hr). These are collectively known as void DOM elements. + /// This rule checks that children are not passed to void DOM elements. + /// + /// ### Example + /// ```javascript + /// // Bad + ///
Children
+ ///
+ ///
+ /// React.createElement('br', undefined, 'Children') + /// React.createElement('br', { children: 'Children' }) + /// React.createElement('br', { dangerouslySetInnerHTML: { __html: 'HTML' } }) + /// + /// // Good + ///
Children
+ ///
+ ///
+ /// React.createElement('div', undefined, 'Children') + /// React.createElement('div', { children: 'Children' }) + /// React.createElement('div', { dangerouslySetInnerHTML: { __html: 'HTML' } }) + /// ``` + VoidDomElementsNoChildren, + correctness +); + +const VOID_DOM_ELEMENTS: phf::Set<&'static str> = phf_set![ + "area", "base", "br", "col", "embed", "hr", "img", "input", "keygen", "link", "menuitem", + "meta", "param", "source", "track", "wbr", +]; + +pub fn is_void_dom_element(element_name: &str) -> bool { + VOID_DOM_ELEMENTS.contains(element_name) +} + +impl Rule for VoidDomElementsNoChildren { + fn run<'a>(&self, node: &AstNode<'a>, ctx: &LintContext<'a>) { + match node.kind() { + AstKind::JSXElement(jsx_el) => { + let jsx_opening_el = &jsx_el.opening_element; + let JSXElementName::Identifier(identifier) = &jsx_opening_el.name else { + return; + }; + + if !is_void_dom_element(&identifier.name) { + return; + } + + let has_children_attribute_or_danger = + jsx_opening_el.attributes.iter().any(|attribute| match attribute { + JSXAttributeItem::Attribute(attr) => { + let JSXAttributeName::Identifier(iden) = &attr.name else { + return false; + }; + iden.name == "children" || iden.name == "dangerouslySetInnerHTML" + } + JSXAttributeItem::SpreadAttribute(_) => false, + }); + + if !jsx_el.children.is_empty() || has_children_attribute_or_danger { + ctx.diagnostic(VoidDomElementsNoChildrenDiagnostic( + identifier.name.to_string(), + identifier.span, + )); + } + } + AstKind::CallExpression(call_expr) => { + if !is_create_element_call(call_expr) { + return; + } + + if call_expr.arguments.is_empty() { + return; + } + + let Some(Argument::Expression(Expression::StringLiteral(element_name))) = + call_expr.arguments.first() + else { + return; + }; + + if !is_void_dom_element(element_name.value.as_str()) { + return; + } + + if call_expr.arguments.len() < 2 { + return; + } + + let Some(Argument::Expression(Expression::ObjectExpression(obj_expr))) = + call_expr.arguments.get(1) + else { + return; + }; + + let has_children_prop_or_danger = + obj_expr.properties.iter().any(|property| match property { + ObjectPropertyKind::ObjectProperty(prop) => match &prop.key { + PropertyKey::Identifier(iden) => { + iden.name == "children" || iden.name == "dangerouslySetInnerHTML" + } + _ => false, + }, + ObjectPropertyKind::SpreadProperty(_) => false, + }); + + if call_expr.arguments.get(2).is_some() || has_children_prop_or_danger { + ctx.diagnostic(VoidDomElementsNoChildrenDiagnostic( + element_name.value.to_string(), + element_name.span, + )); + } + } + _ => {} + } + } +} + +#[test] +fn test() { + use crate::tester::Tester; + + let pass = vec![ + (r"
Foo
;", None), + (r"
;", None), + (r"
;", None), + (r"React.createElement('div', {}, 'Foo');", None), + (r"React.createElement('div', { children: 'Foo' });", None), + (r"React.createElement('div', { dangerouslySetInnerHTML: { __html: 'Foo' } });", None), + (r"React.createElement('img');", None), + (r"React.createElement();", None), + ( + r" + const props = {}; + React.createElement('img', props); + ", + None, + ), + ( + r" + import React, {createElement} from 'react'; + createElement('div'); + ", + None, + ), + ( + r" + import React, {createElement} from 'react'; + createElement('img'); + ", + None, + ), + ( + r" + import React, {createElement, PureComponent} from 'react'; + class Button extends PureComponent { + handleClick(ev) { + ev.preventDefault(); + } + render() { + return
Hello
; + } + } + ", + None, + ), + ]; + + let fail = vec![ + (r"
Foo
;", None), + (r"
;", None), + (r";", None), + (r"
;", None), + (r"React.createElement('br', {}, 'Foo');", None), + (r"React.createElement('br', { children: 'Foo' });", None), + (r"React.createElement('br', { dangerouslySetInnerHTML: { __html: 'Foo' } });", None), + ( + r" + import React, {createElement} from 'react'; + createElement('img', {}, 'Foo'); + ", + None, + ), + ( + r" + import React, {createElement} from 'react'; + createElement('img', { children: 'Foo' }); + ", + None, + ), + ( + r" + import React, {createElement} from 'react'; + createElement('img', { dangerouslySetInnerHTML: { __html: 'Foo' } }); + ", + None, + ), + ]; + + Tester::new(VoidDomElementsNoChildren::NAME, pass, fail).test_and_snapshot(); +} diff --git a/crates/oxc_linter/src/snapshots/void_dom_elements_no_children.snap b/crates/oxc_linter/src/snapshots/void_dom_elements_no_children.snap new file mode 100644 index 000000000..80727bfcf --- /dev/null +++ b/crates/oxc_linter/src/snapshots/void_dom_elements_no_children.snap @@ -0,0 +1,81 @@ +--- +source: crates/oxc_linter/src/tester.rs +expression: void_dom_elements_no_children +--- + + ⚠ eslint-plugin-react(void-dom-elements-no-children): Disallow void DOM elements (e.g. ``, `
`) from receiving children. + ╭─[void_dom_elements_no_children.tsx:1:2] + 1 │
Foo
; + · ── + ╰──── + help: Void DOM element <"br" /> cannot receive children. + + ⚠ eslint-plugin-react(void-dom-elements-no-children): Disallow void DOM elements (e.g. ``, `
`) from receiving children. + ╭─[void_dom_elements_no_children.tsx:1:2] + 1 │
; + · ── + ╰──── + help: Void DOM element <"br" /> cannot receive children. + + ⚠ eslint-plugin-react(void-dom-elements-no-children): Disallow void DOM elements (e.g. ``, `
`) from receiving children. + ╭─[void_dom_elements_no_children.tsx:1:2] + 1 │ ; + · ─── + ╰──── + help: Void DOM element <"img" /> cannot receive children. + + ⚠ eslint-plugin-react(void-dom-elements-no-children): Disallow void DOM elements (e.g. ``, `
`) from receiving children. + ╭─[void_dom_elements_no_children.tsx:1:2] + 1 │
; + · ── + ╰──── + help: Void DOM element <"br" /> cannot receive children. + + ⚠ eslint-plugin-react(void-dom-elements-no-children): Disallow void DOM elements (e.g. ``, `
`) from receiving children. + ╭─[void_dom_elements_no_children.tsx:1:21] + 1 │ React.createElement('br', {}, 'Foo'); + · ──── + ╰──── + help: Void DOM element <"br" /> cannot receive children. + + ⚠ eslint-plugin-react(void-dom-elements-no-children): Disallow void DOM elements (e.g. ``, `
`) from receiving children. + ╭─[void_dom_elements_no_children.tsx:1:21] + 1 │ React.createElement('br', { children: 'Foo' }); + · ──── + ╰──── + help: Void DOM element <"br" /> cannot receive children. + + ⚠ eslint-plugin-react(void-dom-elements-no-children): Disallow void DOM elements (e.g. ``, `
`) from receiving children. + ╭─[void_dom_elements_no_children.tsx:1:21] + 1 │ React.createElement('br', { dangerouslySetInnerHTML: { __html: 'Foo' } }); + · ──── + ╰──── + help: Void DOM element <"br" /> cannot receive children. + + ⚠ eslint-plugin-react(void-dom-elements-no-children): Disallow void DOM elements (e.g. ``, `
`) from receiving children. + ╭─[void_dom_elements_no_children.tsx:3:31] + 2 │ import React, {createElement} from 'react'; + 3 │ createElement('img', {}, 'Foo'); + · ───── + 4 │ + ╰──── + help: Void DOM element <"img" /> cannot receive children. + + ⚠ eslint-plugin-react(void-dom-elements-no-children): Disallow void DOM elements (e.g. ``, `
`) from receiving children. + ╭─[void_dom_elements_no_children.tsx:3:31] + 2 │ import React, {createElement} from 'react'; + 3 │ createElement('img', { children: 'Foo' }); + · ───── + 4 │ + ╰──── + help: Void DOM element <"img" /> cannot receive children. + + ⚠ eslint-plugin-react(void-dom-elements-no-children): Disallow void DOM elements (e.g. ``, `
`) from receiving children. + ╭─[void_dom_elements_no_children.tsx:3:31] + 2 │ import React, {createElement} from 'react'; + 3 │ createElement('img', { dangerouslySetInnerHTML: { __html: 'Foo' } }); + · ───── + 4 │ + ╰──── + help: Void DOM element <"img" /> cannot receive children. +