dan/oxc
1
0
Fork 0
mirror of https://github.com/danbulant/oxc synced 2026-05-24 12:21:58 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(linter) eslint-plugin-react(jsx-no-comment-text-nodes) (#1027)

Browse source
This commit is contained in:
Cameron 2023-10-23 02:42:09 +01:00 committed by GitHub
parent d129425b67
commit 7edc7f0690
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 392 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
crates/oxc_ast/src/ast_kind.rs
View file

@ -114,6 +114,7 @@ pub enum AstKind<'a> {
JSXOpeningElement(&'a JSXOpeningElement<'a>),
JSXElementName(&'a JSXElementName<'a>),
JSXAttributeItem(&'a JSXAttributeItem<'a>),
JSXText(&'a JSXText),
// TypeScript
TSModuleBlock(&'a TSModuleBlock<'a>),
@ -240,6 +241,7 @@ impl<'a> AstKind<'a> {
| Self::JSXElementName(_)
| Self::JSXFragment(_)
| Self::JSXAttributeItem(_)
| Self::JSXText(_)
)
}
@ -361,6 +363,7 @@ impl<'a> GetSpan for AstKind<'a> {
Self::JSXElement(x) => x.span,
Self::JSXFragment(x) => x.span,
Self::JSXAttributeItem(x) => x.span(),
Self::JSXText(x) => x.span,
Self::TSModuleBlock(x) => x.span,
@ -526,6 +529,7 @@ impl<'a> AstKind<'a> {
Self::JSXElement(_) => "JSXElement".into(),
Self::JSXFragment(_) => "JSXFragment".into(),
Self::JSXAttributeItem(_) => "JSXAttributeItem".into(),
Self::JSXText(_) => "JSXText".into(),
Self::TSModuleBlock(_) => "TSModuleBlock".into(),

8
crates/oxc_ast/src/visit.rs
View file

@ -1094,7 +1094,7 @@ pub trait Visit<'a>: Sized {
JSXChild::Fragment(elem) => self.visit_jsx_fragment(elem),
JSXChild::ExpressionContainer(expr) => self.visit_jsx_expression_container(expr),
JSXChild::Spread(expr) => self.visit_jsx_spread_child(expr),
JSXChild::Text(_) => {}
JSXChild::Text(expr) => self.visit_jsx_text(expr),
}
}
@ -1102,6 +1102,12 @@ pub trait Visit<'a>: Sized {
self.visit_expression(&child.expression);
}
fn visit_jsx_text(&mut self, child: &JSXText) {
let kind = AstKind::JSXText(self.alloc(child));
self.enter_node(kind);
self.leave_node(kind);
}
/* ---------- Pattern ---------- */
fn visit_binding_pattern(&mut self, pat: &BindingPattern<'a>) {

2
crates/oxc_linter/src/rules.rs
View file

@ -126,6 +126,7 @@ mod jest {
mod react {
pub mod jsx_key;
pub mod jsx_no_comment_text_nodes;
pub mod jsx_no_duplicate_props;
pub mod jsx_no_useless_fragment;
pub mod no_children_prop;
@ -254,6 +255,7 @@ oxc_macros::declare_all_lint_rules! {
unicorn::throw_new_error,
unicorn::prefer_array_flat_map,
react::jsx_key,
react::jsx_no_comment_text_nodes,
react::jsx_no_duplicate_props,
react::jsx_no_useless_fragment,
react::no_children_prop,

313
crates/oxc_linter/src/rules/react/jsx_no_comment_text_nodes.rs Normal file
View file

@ -0,0 +1,313 @@
use lazy_static::lazy_static;
use oxc_ast::AstKind;
use oxc_diagnostics::{
miette::{self, Diagnostic},
thiserror::Error,
};
use oxc_macros::declare_oxc_lint;
use oxc_span::{Atom, Span};
use regex::Regex;
use crate::{context::LintContext, rule::Rule, AstNode};
#[derive(Debug, Error, Diagnostic)]
#[error("eslint-plugin-react(jsx-no-comment-TextNodes): Comments inside children section of tag should be placed inside braces")]
#[diagnostic(severity(warning))]
struct JsxNoCommentTextNodesDiagnostic(#[label] pub Span);
#[derive(Debug, Default, Clone)]
pub struct JsxNoCommentTextNodes;
declare_oxc_lint!(
/// ### What it does
///
/// This rule prevents comment strings (e.g. beginning with `//` or `/*`) from being accidentally injected as a text node in JSX statements.
///
/// ### Why is this bad?
///
/// In JSX, any text node that is not wrapped in curly braces is considered a literal string to be rendered. This can lead to unexpected behavior when the text contains a comment.
///
/// ### Example
/// ```javascript
/// // Incorrect:
///
/// const Hello = () => {
/// return <div>// empty div</div>;
/// }
///
/// const Hello = () => {
/// return <div>/* empty div */</div>;
/// }
///
/// // Correct:
///
/// const Hello = () => {
/// return <div>// empty div</div>;
/// }
///
/// const Hello = () => {
/// return <div>{/* empty div */}</div>;
/// }
/// ```
JsxNoCommentTextNodes,
suspicious
);
impl Rule for JsxNoCommentTextNodes {
fn run<'a>(&self, node: &AstNode<'a>, ctx: &LintContext<'a>) {
let AstKind::JSXText(jsx_text) = node.kind() else { return };
if control_patterns(&jsx_text.value) {
ctx.diagnostic(JsxNoCommentTextNodesDiagnostic(jsx_text.span));
}
}
}
fn control_patterns(pattern: &Atom) -> bool {
lazy_static! {
static ref CTL_PAT: Regex = Regex::new(r"(?m)^\s*/(/|\*)",).unwrap();
}
CTL_PAT.is_match(pattern.as_str())
}
#[test]
fn test() {
use crate::tester::Tester;
let pass = vec![
(
"
class Comp1 extends Component {
render() {
return (
<div>
{/* valid */}
</div>
);
}
}
",
None,
),
(
"
class Comp1 extends Component {
render() {
return (
<>
{/* valid */}
</>
);
}
}
",
None,
),
(
"
class Comp1 extends Component {
render() {
return (<div>{/* valid */}</div>);
}
}
",
None,
),
(
"
class Comp1 extends Component {
render() {
const bar = (<div>{/* valid */}</div>);
return bar;
}
}
",
None,
),
(
"
var Hello = createReactClass({
foo: (<div>{/* valid */}</div>),
render() {
return this.foo;
},
});
",
None,
),
(
"
class Comp1 extends Component {
render() {
return (
<div>
{/* valid */}
{/* valid 2 */}
{/* valid 3 */}
</div>
);
}
}
",
None,
),
(
"
class Comp1 extends Component {
render() {
return (
<div>
</div>
);
}
}
",
None,
),
(
"
var foo = require('foo');
",
None,
),
(
"
<Foo bar='test'>
{/* valid */}
</Foo>
",
None,
),
(
"
<strong>
&nbsp;https://www.example.com/attachment/download/1
</strong>
",
None,
),
(
"
<Foo /* valid */ placeholder={'foo'}/>
",
None,
),
(
"
</* valid */></>
",
None,
),
(
"
<></* valid *//>
",
None,
),
(
"
<Foo title={'foo' /* valid */}/>
",
None,
),
("<pre>&#x2F;&#x2F; TODO: Write perfect code</pre>", None),
("<pre>&#x2F;&#42; TODO: Write perfect code &#42;&#x2F;</pre>", None),
(
"
<div>
<span className=\"pl-c\"><span className=\"pl-c\">&#47;&#47;</span> ...</span><br />
</div>
",
None,
),
];
let fail = vec![
(
"
class Comp1 extends Component {
render() {
return (<div>// invalid</div>);
}
}
",
None,
),
(
"
class Comp1 extends Component {
render() {
return (<>// invalid</>);
}
}
",
None,
),
(
"
class Comp1 extends Component {
render() {
return (<div>/* invalid */</div>);
}
}
",
None,
),
(
"
class Comp1 extends Component {
render() {
return (
<div>
// invalid
</div>
);
}
}
",
None,
),
(
"
class Comp1 extends Component {
render() {
return (
<div>
asdjfl
/* invalid */
foo
</div>
);
}
}
",
None,
),
(
"
class Comp1 extends Component {
render() {
return (
<div>
{'asdjfl'}
// invalid
{'foo'}
</div>
);
}
}
",
None,
),
(
"
const Component2 = () => {
return <span>/*</span>;
};
",
None,
),
];
Tester::new(JsxNoCommentTextNodes::NAME, pass, fail).test_and_snapshot();
}

66
crates/oxc_linter/src/snapshots/jsx_no_comment_text_nodes.snap Normal file
View file

@ -0,0 +1,66 @@
---
source: crates/oxc_linter/src/tester.rs
expression: jsx_no_comment_text_nodes
---
⚠ eslint-plugin-react(jsx-no-comment-TextNodes): Comments inside children section of tag should be placed inside braces
╭─[jsx_no_comment_text_nodes.tsx:3:1]
3 │ render() {
4 │ return (<div>// invalid</div>);
· ──────────
5 │ }
╰────
⚠ eslint-plugin-react(jsx-no-comment-TextNodes): Comments inside children section of tag should be placed inside braces
╭─[jsx_no_comment_text_nodes.tsx:3:1]
3 │ render() {
4 │ return (<>// invalid</>);
· ──────────
5 │ }
╰────
⚠ eslint-plugin-react(jsx-no-comment-TextNodes): Comments inside children section of tag should be placed inside braces
╭─[jsx_no_comment_text_nodes.tsx:3:1]
3 │ render() {
4 │ return (<div>/* invalid */</div>);
· ─────────────
5 │ }
╰────
⚠ eslint-plugin-react(jsx-no-comment-TextNodes): Comments inside children section of tag should be placed inside braces
╭─[jsx_no_comment_text_nodes.tsx:4:1]
4 │ return (
5 │ ╭─▶ <div>
6 │ │ // invalid
7 │ ╰─▶ </div>
8 │ );
╰────
⚠ eslint-plugin-react(jsx-no-comment-TextNodes): Comments inside children section of tag should be placed inside braces
╭─[jsx_no_comment_text_nodes.tsx:4:1]
4 │ return (
5 │ ╭─▶ <div>
6 │ │ asdjfl
7 │ │ /* invalid */
8 │ │ foo
9 │ ╰─▶ </div>
10 │ );
╰────
⚠ eslint-plugin-react(jsx-no-comment-TextNodes): Comments inside children section of tag should be placed inside braces
╭─[jsx_no_comment_text_nodes.tsx:5:1]
5 │ <div>
6 │ ╭─▶ {'asdjfl'}
7 │ │ // invalid
8 │ ╰─▶ {'foo'}
9 │ </div>
╰────
⚠ eslint-plugin-react(jsx-no-comment-TextNodes): Comments inside children section of tag should be placed inside braces
╭─[jsx_no_comment_text_nodes.tsx:2:1]
2 │ const Component2 = () => {
3 │ return <span>/*</span>;
· ──
4 │ };
╰────