mirror of
https://github.com/danbulant/oxc
synced 2026-05-19 12:19:15 +00:00
feat(linter): eslint-plugin-react void-dom-elements-no-children (#2477)
partof: https://github.com/oxc-project/oxc/issues/1022 docs: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/void-dom-elements-no-children.md code: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/lib/rules/void-dom-elements-no-children.js test: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/tests/lib/rules/void-dom-elements-no-children.js
This commit is contained in:
keita hino
GitHub
parent
c5f67febc1
commit
015b2ee3ac
3 changed files with 310 additions and 0 deletions
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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. `<img />`, `<br />`) 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
|
||||
/// <br>Children</br>
|
||||
/// <br children='Children' />
|
||||
/// <br dangerouslySetInnerHTML={{ __html: 'HTML' }} />
|
||||
/// React.createElement('br', undefined, 'Children')
|
||||
/// React.createElement('br', { children: 'Children' })
|
||||
/// React.createElement('br', { dangerouslySetInnerHTML: { __html: 'HTML' } })
|
||||
///
|
||||
/// // Good
|
||||
/// <div>Children</div>
|
||||
/// <div children='Children' />
|
||||
/// <div dangerouslySetInnerHTML={{ __html: 'HTML' }} />
|
||||
/// 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"<div>Foo</div>;", None),
|
||||
(r"<div children='Foo' />;", None),
|
||||
(r"<div dangerouslySetInnerHTML={{ __html: 'Foo' }} />;", 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 <div onClick={this.handleClick}>Hello</div>;
|
||||
}
|
||||
}
|
||||
",
|
||||
None,
|
||||
),
|
||||
];
|
||||
|
||||
let fail = vec![
|
||||
(r"<br>Foo</br>;", None),
|
||||
(r"<br children='Foo' />;", None),
|
||||
(r"<img {...props} children='Foo' />;", None),
|
||||
(r"<br dangerouslySetInnerHTML={{ __html: 'Foo' }} />;", 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();
|
||||
}
|
||||
|
|
@ -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. `<img />`, `<br />`) from receiving children.
|
||||
╭─[void_dom_elements_no_children.tsx:1:2]
|
||||
1 │ <br>Foo</br>;
|
||||
· ──
|
||||
╰────
|
||||
help: Void DOM element <"br" /> cannot receive children.
|
||||
|
||||
⚠ eslint-plugin-react(void-dom-elements-no-children): Disallow void DOM elements (e.g. `<img />`, `<br />`) from receiving children.
|
||||
╭─[void_dom_elements_no_children.tsx:1:2]
|
||||
1 │ <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. `<img />`, `<br />`) from receiving children.
|
||||
╭─[void_dom_elements_no_children.tsx:1:2]
|
||||
1 │ <img {...props} children='Foo' />;
|
||||
· ───
|
||||
╰────
|
||||
help: Void DOM element <"img" /> cannot receive children.
|
||||
|
||||
⚠ eslint-plugin-react(void-dom-elements-no-children): Disallow void DOM elements (e.g. `<img />`, `<br />`) from receiving children.
|
||||
╭─[void_dom_elements_no_children.tsx:1:2]
|
||||
1 │ <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. `<img />`, `<br />`) 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. `<img />`, `<br />`) 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. `<img />`, `<br />`) 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. `<img />`, `<br />`) 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. `<img />`, `<br />`) 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. `<img />`, `<br />`) 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.
|
||||
|
||||
Loading…
Reference in a new issue