Skip to content

Commit

Permalink
feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
@camc314
camc314 committed Oct 23, 2023
1 parent 2e481a9 commit af0f8fe
Show file tree
Hide file tree
Showing 2 changed files with 107 additions and 53 deletions.
38 changes: 35 additions & 3 deletions crates/oxc_linter/src/rules/react/jsx_key.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ use oxc_diagnostics::{
miette::{self, Diagnostic},
thiserror::Error,
};
use oxc_span::{Atom, Span};
use oxc_span::{Atom, GetSpan, Span};

use oxc_macros::declare_oxc_lint;

Expand Down Expand Up @@ -151,7 +151,7 @@ fn check_jsx_element<'a>(node: &AstNode<'a>, jsx_elem: &JSXElement<'a>, ctx: &Li
};
attr_ident.name == "key"
}) {
ctx.diagnostic(gen_diagnostic(jsx_elem.span, &outer));
ctx.diagnostic(gen_diagnostic(jsx_elem.opening_element.name.span(), &outer));
}
}
}
Expand Down Expand Up @@ -184,7 +184,7 @@ fn check_jsx_element_is_key_before_spread<'a>(jsx_elem: &JSXElement<'a>, ctx: &L

fn check_jsx_fragment<'a>(node: &AstNode<'a>, fragment: &JSXFragment<'a>, ctx: &LintContext<'a>) {
if let Some(outer) = is_in_array_or_iter(node, ctx) {
ctx.diagnostic(gen_diagnostic(fragment.span, &outer));
ctx.diagnostic(gen_diagnostic(fragment.opening_fragment.span, &outer));
}
}

Expand Down Expand Up @@ -443,6 +443,38 @@ fn test() {
"#,
None,
),
(
r#"
const TestCase = () => {
const list = [1, 2, 3, 4, 5];
return (
<div>
{list.map(item => <Text foo bar baz qux onClick={() => onClickHandler()} onPointerDown={() => onPointerDownHandler()} onMouseDown={() => onMouseDownHandler()} />)}
</div>
);
};
"#,
None,
),
(
r#"
const TestCase = () => {
const list = [1, 2, 3, 4, 5];
return (
<div>
{list.map(item => (<div>
<Text foo bar baz qux onClick={() => onClickHandler()} onPointerDown={() => onPointerDownHandler()} onMouseDown={() => onMouseDownHandler()} />
</div>)
)}
</div>
);
};
"#,
None,
),
];

Tester::new(JsxKey::NAME, pass, fail).test_and_snapshot();
Expand Down
122 changes: 72 additions & 50 deletions crates/oxc_linter/src/snapshots/jsx_key.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,151 +5,151 @@ expression: jsx_key
⚠ eslint-plugin-react(jsx-key): Missing "key" prop for element in array.
╭─[jsx_key.tsx:1:1]
1 │ [<App />];
· ───────
· ───
╰────

⚠ eslint-plugin-react(jsx-key): Missing "key" prop for element in array.
╭─[jsx_key.tsx:1:1]
1 │ [<App {...key} />];
· ────────────────
· ───
╰────

⚠ eslint-plugin-react(jsx-key): Missing "key" prop for element in array.
╭─[jsx_key.tsx:1:1]
1 │ [<App key={0}/>, <App />];
· ───────
· ───
╰────

⚠ eslint-plugin-react(jsx-key): Missing "key" prop for element in iterator.
╭─[jsx_key.tsx:1:1]
1 │ [1, 2 ,3].map(function(x) { return <App /> });
· ─┬─ ───┬───
· │ ╰── Element generated here
· ─┬─ ─┬─
· │ ╰── Element generated here
· ╰── Iterator starts here
╰────
help: Add a "key" prop to the element in the iterator (https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).

⚠ eslint-plugin-react(jsx-key): Missing "key" prop for element in iterator.
╭─[jsx_key.tsx:1:1]
1 │ [1, 2 ,3].map(x => <App />);
· ─┬─ ───┬───
· │ ╰── Element generated here
· ─┬─ ─┬─
· │ ╰── Element generated here
· ╰── Iterator starts here
╰────
help: Add a "key" prop to the element in the iterator (https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).

⚠ eslint-plugin-react(jsx-key): Missing "key" prop for element in iterator.
╭─[jsx_key.tsx:1:1]
1 │ [1, 2 ,3].map(x => x && <App x={x} />);
· ─┬─ ──────┬──────
· │ ╰── Element generated here
· ─┬─ ─┬─
· │ ╰── Element generated here
· ╰── Iterator starts here
╰────
help: Add a "key" prop to the element in the iterator (https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).

⚠ eslint-plugin-react(jsx-key): Missing "key" prop for element in iterator.
╭─[jsx_key.tsx:1:1]
1 │ [1, 2 ,3].map(x => x ? <App x={x} key="1" /> : <OtherApp x={x} />);
· ─┬─ ─────────┬────────
· │ ╰── Element generated here
· ─┬─ ────┬───
· │ ╰── Element generated here
· ╰── Iterator starts here
╰────
help: Add a "key" prop to the element in the iterator (https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).

⚠ eslint-plugin-react(jsx-key): Missing "key" prop for element in iterator.
╭─[jsx_key.tsx:1:1]
1 │ [1, 2 ,3].map(x => x ? <App x={x} /> : <OtherApp x={x} key="2" />);
· ─┬─ ──────┬──────
· │ ╰── Element generated here
· ─┬─ ─┬─
· │ ╰── Element generated here
· ╰── Iterator starts here
╰────
help: Add a "key" prop to the element in the iterator (https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).

⚠ eslint-plugin-react(jsx-key): Missing "key" prop for element in iterator.
╭─[jsx_key.tsx:1:1]
1 │ [1, 2 ,3].map(x => { return <App /> });
· ─┬─ ───┬───
· │ ╰── Element generated here
· ─┬─ ─┬─
· │ ╰── Element generated here
· ╰── Iterator starts here
╰────
help: Add a "key" prop to the element in the iterator (https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).

⚠ eslint-plugin-react(jsx-key): Missing "key" prop for element in iterator.
╭─[jsx_key.tsx:1:1]
1 │ Array.from([1, 2 ,3], function(x) { return <App /> });
· ──┬─ ───┬───
· │ ╰── Element generated here
· ──┬─ ─┬─
· │ ╰── Element generated here
· ╰── Iterator starts here
╰────
help: Add a "key" prop to the element in the iterator (https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).

⚠ eslint-plugin-react(jsx-key): Missing "key" prop for element in iterator.
╭─[jsx_key.tsx:1:1]
1 │ Array.from([1, 2 ,3], (x => { return <App /> }));
· ──┬─ ───┬───
· │ ╰── Element generated here
· ──┬─ ─┬─
· │ ╰── Element generated here
· ╰── Iterator starts here
╰────
help: Add a "key" prop to the element in the iterator (https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).

⚠ eslint-plugin-react(jsx-key): Missing "key" prop for element in iterator.
╭─[jsx_key.tsx:1:1]
1 │ Array.from([1, 2 ,3], (x => <App />));
· ──┬─ ───┬───
· │ ╰── Element generated here
· ──┬─ ─┬─
· │ ╰── Element generated here
· ╰── Iterator starts here
╰────
help: Add a "key" prop to the element in the iterator (https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).

⚠ eslint-plugin-react(jsx-key): Missing "key" prop for element in iterator.
╭─[jsx_key.tsx:1:1]
1 │ [1, 2, 3]?.map(x => <BabelEslintApp />)
· ─┬─ ─────────┬────────
· │ ╰── Element generated here
· ─┬─ ───────┬──────
· │ ╰── Element generated here
· ╰── Iterator starts here
╰────
help: Add a "key" prop to the element in the iterator (https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).

⚠ eslint-plugin-react(jsx-key): Missing "key" prop for element in iterator.
╭─[jsx_key.tsx:1:1]
1 │ [1, 2, 3]?.map(x => <TypescriptEslintApp />)
· ─┬─ ───────────┬───────────
· │ ╰── Element generated here
· ─┬─ ─────────┬─────────
· │ ╰── Element generated here
· ╰── Iterator starts here
╰────
help: Add a "key" prop to the element in the iterator (https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).

⚠ eslint-plugin-react(jsx-key): Missing "key" prop for element in iterator.
╭─[jsx_key.tsx:1:1]
1 │ [1, 2, 3]?.map(x => <><OxcCompilerHello /></>)
· ─┬─ ────────────┬────────────
· │ ╰── Element generated here
· ─┬─ ─┬
· │ ╰── Element generated here
· ╰── Iterator starts here
╰────
help: Add a "key" prop to the element in the iterator (https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).

⚠ eslint-plugin-react(jsx-key): Missing "key" prop for element in iterator.
╭─[jsx_key.tsx:1:1]
1 │ [1, 2, 3]?.map(x => <><OxcCompilerHello /></>)
· ─┬─ ──────────┬─────────
· │ ╰── Element generated here
· ─┬─ ────────┬───────
· │ ╰── Element generated here
· ╰── Iterator starts here
╰────
help: Add a "key" prop to the element in the iterator (https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).

⚠ eslint-plugin-react(jsx-key): Missing "key" prop for element in iterator.
╭─[jsx_key.tsx:1:1]
1 │ [1, 2, 3].map(x => <>{x}</>);
· ─┬─ ────┬───
· │ ╰── Element generated here
· ─┬─ ─┬
· │ ╰── Element generated here
· ╰── Iterator starts here
╰────
help: Add a "key" prop to the element in the iterator (https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).

⚠ eslint-plugin-react(jsx-key): Missing "key" prop for element in array.
╭─[jsx_key.tsx:1:1]
1 │ [<></>];
· ─────
· ──
╰────

⚠ eslint-plugin-react(jsx-key): "key" prop must be placed before any `{...spread}`
Expand All @@ -174,8 +174,8 @@ expression: jsx_key
· ╰── Iterator starts here
8 │ if (item < 2) {
9 │ return <div>{item}</div>;
· ────────┬────────
· ╰── Element generated here
· ─┬─
· ╰── Element generated here
10 │ }
╰────
help: Add a "key" prop to the element in the iterator (https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).
Expand All @@ -191,8 +191,8 @@ expression: jsx_key
10 │ }
11 │
12 │ return <div />;
· ───┬───
· ╰── Element generated here
· ─┬─
· ╰── Element generated here
13 │ })}
╰────
help: Add a "key" prop to the element in the iterator (https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).
Expand All @@ -205,8 +205,8 @@ expression: jsx_key
· ╰── Iterator starts here
8 │ if (item < 2) {
9 │ return <div>{item}</div>;
· ────────┬────────
· ╰── Element generated here
· ─┬─
· ╰── Element generated here
10 │ } else if (item < 5) {
╰────
help: Add a "key" prop to the element in the iterator (https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).
Expand All @@ -221,8 +221,8 @@ expression: jsx_key
9 │ return <div>{item}</div>;
10 │ } else if (item < 5) {
11 │ return <div></div>
· ─────┬─────
· ╰── Element generated here
· ─┬─
· ╰── Element generated here
12 │ } else {
╰────
help: Add a "key" prop to the element in the iterator (https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).
Expand All @@ -239,8 +239,8 @@ expression: jsx_key
11 │ return <div></div>
12 │ } else {
13 │ return <div></div>
· ─────┬─────
· ╰── Element generated here
· ─┬─
· ╰── Element generated here
14 │ }
╰────
help: Add a "key" prop to the element in the iterator (https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).
Expand All @@ -256,8 +256,8 @@ expression: jsx_key
╭─[jsx_key.tsx:15:1]
15 │
16 │ return <div />;
· ───┬───
· ╰── Element generated here
· ─┬─
· ╰── Element generated here
17 │ })}
╰────
help: Add a "key" prop to the element in the iterator (https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).
Expand All @@ -269,8 +269,8 @@ expression: jsx_key
· ─┬─
· ╰── Iterator starts here
8 │ if (item < 2) return <div>{item}</div>;
· ────────┬────────
· ╰── Element generated here
· ─┬─
· ╰── Element generated here
9 │ else if (item < 5) return <div />;
╰────
help: Add a "key" prop to the element in the iterator (https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).
Expand All @@ -283,8 +283,8 @@ expression: jsx_key
· ╰── Iterator starts here
8 │ if (item < 2) return <div>{item}</div>;
9 │ else if (item < 5) return <div />;
· ───┬───
· ╰── Element generated here
· ─┬─
· ╰── Element generated here
10 │ else return <div />;
╰────
help: Add a "key" prop to the element in the iterator (https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).
Expand All @@ -298,10 +298,32 @@ expression: jsx_key
8 │ if (item < 2) return <div>{item}</div>;
9 │ else if (item < 5) return <div />;
10 │ else return <div />;
· ───┬───
· ╰── Element generated here
· ─┬─
· ╰── Element generated here
11 │ })}
╰────
help: Add a "key" prop to the element in the iterator (https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).

⚠ eslint-plugin-react(jsx-key): Missing "key" prop for element in iterator.
╭─[jsx_key.tsx:6:1]
6 │ <div>
7 │ {list.map(item => <Text foo bar baz qux onClick={() => onClickHandler()} onPointerDown={() => onPointerDownHandler()} onMouseDown={() => onMouseDownHandler()} />)}
· ─┬─ ──┬─
· │ ╰── Element generated here
· ╰── Iterator starts here
8 │ </div>
╰────
help: Add a "key" prop to the element in the iterator (https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).

⚠ eslint-plugin-react(jsx-key): Missing "key" prop for element in iterator.
╭─[jsx_key.tsx:6:1]
6 │ <div>
7 │ {list.map(item => (<div>
· ─┬─ ─┬─
· │ ╰── Element generated here
· ╰── Iterator starts here
8 │ <Text foo bar baz qux onClick={() => onClickHandler()} onPointerDown={() => onPointerDownHandler()} onMouseDown={() => onMouseDownHandler()} />
╰────
help: Add a "key" prop to the element in the iterator (https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).


0 comments on commit af0f8fe

Please sign in to comment.