@codelaw/rules-react 0.0.0-stage → 0.2.0

package/rules/react/jsx-key.md

@@ -0,0 +1,99 @@
+---
+id: react/jsx-key
+title: "Elements in an array or a map() callback have a key"
+languages: [javascript, jsx, tsx]
+fix: manual
+fix_reason: "the key must be a stable identity of the item, which only the author knows"
+stability: preview
+ported_from: [eslint-plugin-react/jsx-key]
+since: 0.1.0
+---
+
+An element written in an array literal, or returned by a `.map()` callback, has a `key` prop.
+
+**Why:** Without keys, React can't match list items between renders, which loses state and re-
+renders more than it must.
+
+```codelaw
+match:
+  any:
+    - kind: jsx_element
+    - kind: jsx_self_closing_element
+  not:
+    any:
+      - has: { stopBy: neighbor, kind: jsx_attribute, regex: '^key\b' }
+      - has: { field: open_tag, has: { stopBy: neighbor, kind: jsx_attribute, regex: '^key\b' } }
+      - has: { stopBy: neighbor, kind: jsx_expression, regex: '^\{\s*\.\.\.' }
+      - has: { field: open_tag, has: { stopBy: neighbor, kind: jsx_expression, regex: '^\{\s*\.\.\.' } }
+  inside:
+    stopBy: neighbor
+    any:
+      - kind: array
+      - kind: arrow_function
+        inside:
+          stopBy: neighbor
+          kind: arguments
+          inside: { stopBy: neighbor, kind: call_expression, has: { field: function, kind: member_expression, regex: '\.map$' } }
+      - kind: parenthesized_expression
+        inside:
+          stopBy: neighbor
+          kind: arrow_function
+          inside:
+            stopBy: neighbor
+            kind: arguments
+            inside: { stopBy: neighbor, kind: call_expression, has: { field: function, kind: member_expression, regex: '\.map$' } }
+message: "An element in a list needs a `key` so React can tell its items apart"
+```
+
+## How to fix
+
+1. Give the element a `key` that identifies the item, such as its id.
+2. Avoid the array index if items can be reordered or removed.
+
+## Examples
+
+### JavaScript
+
+#### Don't
+
+```js
+const items = todos.map((todo) => <li>{todo.text}</li>);
+```
+
+#### Do
+
+```js
+const items = todos.map((todo) => <li key={todo.id}>{todo.text}</li>);
+```
+
+### JSX
+
+#### Don't
+
+```jsx
+const items = todos.map((todo) => <li>{todo.text}</li>);
+```
+
+#### Do
+
+```jsx
+const items = todos.map((todo) => <li key={todo.id}>{todo.text}</li>);
+```
+
+### TSX
+
+#### Don't
+
+```tsx
+const items = todos.map((todo) => <li>{todo.text}</li>);
+```
+
+#### Do
+
+```tsx
+const items = todos.map((todo) => <li key={todo.id}>{todo.text}</li>);
+```
+
+## Differences from the source
+
+Elements returned from a `.map()` callback's block body (`return <li/>`) are not checked yet.

package/rules/react/jsx-no-comment-textnodes.md

@@ -0,0 +1,87 @@
+---
+id: react/jsx-no-comment-textnodes
+title: "No comment syntax as text inside JSX"
+languages: [javascript, jsx, tsx]
+fix: manual
+fix_reason: "whether the text is a comment or content needs the author"
+stability: preview
+ported_from: [eslint-plugin-react/jsx-no-comment-textnodes]
+since: 0.1.0
+---
+
+Comments inside JSX are written as `{/* … */}`; `// …` and `/* … */` in JSX text are not.
+
+**Why:** In JSX, `// note` is text that ends up on the page.
+
+```codelaw
+match:
+  kind: jsx_text
+  regex: ^\s*(//|/\*)
+message: "This is rendered as text, not a comment; write `{/* … */}`"
+```
+
+## How to fix
+
+1. Wrap the comment in braces: `{/* … */}`.
+
+## Examples
+
+### JavaScript
+
+#### Don't
+
+```js
+const a = <div>
+  // the title
+  <h1>Hi</h1>
+</div>;
+```
+
+#### Do
+
+```js
+const a = <div>
+  {/* the title */}
+  <h1>Hi</h1>
+</div>;
+```
+
+### JSX
+
+#### Don't
+
+```jsx
+const a = <div>
+  // the title
+  <h1>Hi</h1>
+</div>;
+```
+
+#### Do
+
+```jsx
+const a = <div>
+  {/* the title */}
+  <h1>Hi</h1>
+</div>;
+```
+
+### TSX
+
+#### Don't
+
+```tsx
+const a = <div>
+  // the title
+  <h1>Hi</h1>
+</div>;
+```
+
+#### Do
+
+```tsx
+const a = <div>
+  {/* the title */}
+  <h1>Hi</h1>
+</div>;
+```

package/rules/react/jsx-no-duplicate-props.md

@@ -0,0 +1,66 @@
+---
+id: react/jsx-no-duplicate-props
+title: "No prop given twice on one element"
+languages: [javascript, jsx, tsx]
+fix: manual
+fix_reason: "which value should win needs the author"
+stability: preview
+ported_from: [eslint-plugin-react/jsx-no-duplicate-props]
+since: 0.1.0
+---
+
+A JSX element gives each prop once.
+
+**Why:** The last value silently wins, so the first is dead code or a mistake.
+
+```codelaw
+native: react/jsx-no-duplicate-props
+```
+
+## How to fix
+
+1. Keep the value that is right and remove the other.
+
+## Examples
+
+### JavaScript
+
+#### Don't
+
+```js
+const a = <input type="text" type="email" />;
+```
+
+#### Do
+
+```js
+const a = <input type="email" />;
+```
+
+### JSX
+
+#### Don't
+
+```jsx
+const a = <input type="text" type="email" />;
+```
+
+#### Do
+
+```jsx
+const a = <input type="email" />;
+```
+
+### TSX
+
+#### Don't
+
+```tsx
+const a = <input type="text" type="email" />;
+```
+
+#### Do
+
+```tsx
+const a = <input type="email" />;
+```

package/rules/react/jsx-no-target-blank.md

@@ -0,0 +1,78 @@
+---
+id: react/jsx-no-target-blank
+title: "Links that open a new tab set rel=\"noreferrer\""
+languages: [javascript, jsx, tsx]
+fix: auto
+stability: preview
+ported_from: [eslint-plugin-react/jsx-no-target-blank]
+since: 0.1.0
+---
+
+An `<a target="_blank">` with an `href` also has `rel="noreferrer"`.
+
+**Why:** Without it, older browsers give the opened page a handle on this one (`window.opener`), and
+the referrer leaks.
+
+```codelaw
+match:
+  kind: jsx_attribute
+  regex: ^target=["']_blank["']$
+  inside:
+    stopBy: neighbor
+    any: [{ kind: jsx_opening_element }, { kind: jsx_self_closing_element }]
+    all:
+      - has: { field: name, regex: ^a$ }
+      - has: { stopBy: neighbor, kind: jsx_attribute, regex: ^href= }
+      - not: { has: { stopBy: neighbor, kind: jsx_attribute, regex: ^rel= } }
+message: "A link with `target=\"_blank\"` gives the new page access to this one; add `rel=\"noreferrer\"`"
+fix:
+  - insert-after: ' rel="noreferrer"'
+```
+
+## Examples
+
+### JavaScript
+
+#### Don't
+
+```js
+const a = <a href={url} target="_blank">Docs</a>;
+```
+
+#### Do
+
+```js
+const a = <a href={url} target="_blank" rel="noreferrer">Docs</a>;
+```
+
+### JSX
+
+#### Don't
+
+```jsx
+const a = <a href={url} target="_blank">Docs</a>;
+```
+
+#### Do
+
+```jsx
+const a = <a href={url} target="_blank" rel="noreferrer">Docs</a>;
+```
+
+### TSX
+
+#### Don't
+
+```tsx
+const a = <a href={url} target="_blank">Docs</a>;
+```
+
+#### Do
+
+```tsx
+const a = <a href={url} target="_blank" rel="noreferrer">Docs</a>;
+```
+
+## Differences from the source
+
+A link that already has a `rel` is not checked.

package/rules/react/jsx-no-undef.md

@@ -0,0 +1,78 @@
+---
+id: react/jsx-no-undef
+title: "Components used in JSX are declared"
+languages: [javascript, jsx, tsx]
+fix: manual
+fix_reason: "the right import is the author's to choose"
+stability: preview
+ported_from: [eslint-plugin-react/jsx-no-undef]
+since: 0.1.0
+---
+
+Every component used as a JSX tag is imported or declared.
+
+**Why:** An undeclared component throws a ReferenceError when it renders.
+
+```codelaw
+match:
+  kind: identifier
+  regex: ^[A-Z]
+  inside:
+    stopBy: neighbor
+    any: [{ kind: jsx_opening_element }, { kind: jsx_self_closing_element }]
+    field: name
+where:
+  $$MATCH: undeclared
+message: "`$$MATCH` is not defined; import or declare the component"
+```
+
+## How to fix
+
+1. Import the component, or declare it, or correct the name.
+
+## Examples
+
+### JavaScript
+
+#### Don't
+
+```js
+export const App = () => <Header />;
+```
+
+#### Do
+
+```js
+import { Header } from "./header";
+export const App = () => <Header />;
+```
+
+### JSX
+
+#### Don't
+
+```jsx
+export const App = () => <Header />;
+```
+
+#### Do
+
+```jsx
+import { Header } from "./header";
+export const App = () => <Header />;
+```
+
+### TSX
+
+#### Don't
+
+```tsx
+export const App = () => <Header />;
+```
+
+#### Do
+
+```tsx
+import { Header } from "./header";
+export const App = () => <Header />;
+```

package/rules/react/no-children-prop.md

@@ -0,0 +1,80 @@
+---
+id: react/no-children-prop
+title: "Children are passed as children, not as a prop"
+languages: [javascript, jsx, tsx]
+fix: manual
+fix_reason: "moving the children changes the element's shape by hand"
+stability: preview
+ported_from: [eslint-plugin-react/no-children-prop]
+since: 0.1.0
+---
+
+Children go between an element's tags (or as the third argument of `createElement`), not in a
+`children` prop.
+
+**Why:** Passing `children` as a prop works, but hides the element's content where readers don't
+look for it.
+
+```codelaw
+match:
+  any:
+    - kind: jsx_attribute
+      regex: ^children\b
+    - pattern: 'createElement($T, { children: $C, $$$REST })'
+    - pattern: 'React.createElement($T, { children: $C, $$$REST })'
+message: "Pass children between the tags, not as the `children` prop"
+```
+
+## How to fix
+
+1. Move the value between the opening and closing tags.
+
+## Examples
+
+### JavaScript
+
+#### Don't
+
+```js
+const a = <Panel children={<p>Hi</p>} />;
+```
+
+#### Do
+
+```js
+const a = <Panel>
+  <p>Hi</p>
+</Panel>;
+```
+
+### JSX
+
+#### Don't
+
+```jsx
+const a = <Panel children={<p>Hi</p>} />;
+```
+
+#### Do
+
+```jsx
+const a = <Panel>
+  <p>Hi</p>
+</Panel>;
+```
+
+### TSX
+
+#### Don't
+
+```tsx
+const a = <Panel children={<p>Hi</p>} />;
+```
+
+#### Do
+
+```tsx
+const a = <Panel>
+  <p>Hi</p>
+</Panel>;
+```

package/rules/react/no-danger-with-children.md

@@ -0,0 +1,83 @@
+---
+id: react/no-danger-with-children
+title: "No dangerouslySetInnerHTML together with children"
+languages: [javascript, jsx, tsx]
+fix: manual
+fix_reason: "which content the element should have needs the author"
+stability: preview
+ported_from: [eslint-plugin-react/no-danger-with-children]
+since: 0.1.0
+---
+
+An element with `dangerouslySetInnerHTML` has no children.
+
+**Why:** React throws when an element has both, since it can't know which content wins.
+
+```codelaw
+match:
+  any:
+    - kind: jsx_element
+      all:
+        - has: { field: open_tag, has: { stopBy: neighbor, kind: jsx_attribute, regex: ^dangerouslySetInnerHTML } }
+        - has:
+            stopBy: neighbor
+            any:
+              - kind: jsx_element
+              - kind: jsx_self_closing_element
+              - kind: jsx_expression
+              - kind: jsx_text
+                regex: \S
+    - kind: jsx_self_closing_element
+      all:
+        - has: { stopBy: neighbor, kind: jsx_attribute, regex: ^dangerouslySetInnerHTML }
+        - has: { stopBy: neighbor, kind: jsx_attribute, regex: ^children\b }
+message: "An element can't have both `dangerouslySetInnerHTML` and children"
+```
+
+## How to fix
+
+1. Keep either the HTML or the children, not both.
+
+## Examples
+
+### JavaScript
+
+#### Don't
+
+```js
+const a = <div dangerouslySetInnerHTML={{ __html: html }}>Fallback</div>;
+```
+
+#### Do
+
+```js
+const a = <div dangerouslySetInnerHTML={{ __html: html }} />;
+```
+
+### JSX
+
+#### Don't
+
+```jsx
+const a = <div dangerouslySetInnerHTML={{ __html: html }}>Fallback</div>;
+```
+
+#### Do
+
+```jsx
+const a = <div dangerouslySetInnerHTML={{ __html: html }} />;
+```
+
+### TSX
+
+#### Don't
+
+```tsx
+const a = <div dangerouslySetInnerHTML={{ __html: html }}>Fallback</div>;
+```
+
+#### Do
+
+```tsx
+const a = <div dangerouslySetInnerHTML={{ __html: html }} />;
+```

package/rules/react/no-deprecated.md

@@ -0,0 +1,84 @@
+---
+id: react/no-deprecated
+title: "No deprecated React APIs"
+languages: [javascript, jsx, tsx]
+fix: manual
+fix_reason: "each deprecated API has its own replacement"
+stability: preview
+ported_from: [eslint-plugin-react/no-deprecated]
+since: 0.1.0
+---
+
+Code doesn't use React APIs that are deprecated: the legacy `componentWill…` lifecycles,
+`React.createClass`, `React.PropTypes`, `ReactDOM.render`, `hydrate` and `unmountComponentAtNode`.
+
+**Why:** Deprecated APIs are removed in later versions, and the legacy lifecycles misbehave with
+concurrent rendering.
+
+```codelaw
+match:
+  any:
+    - kind: method_definition
+      has: { field: name, regex: ^(componentWillMount|componentWillReceiveProps|componentWillUpdate)$ }
+    - pattern: React.createClass($$$A)
+    - pattern: React.PropTypes
+    - pattern: ReactDOM.render($$$A)
+    - pattern: ReactDOM.hydrate($$$A)
+    - pattern: ReactDOM.unmountComponentAtNode($$$A)
+    - pattern: ReactDOMServer.renderToNodeStream($$$A)
+message: "This React API is deprecated and is removed in a later version"
+```
+
+## How to fix
+
+1. Replace `ReactDOM.render` with `createRoot(el).render(…)` and `hydrate` with `hydrateRoot`.
+2. Rename legacy lifecycles to their `UNSAFE_` names, or move their work to `componentDidMount`/`componentDidUpdate`.
+3. Use the `prop-types` package instead of `React.PropTypes`.
+
+## Examples
+
+### JavaScript
+
+#### Don't
+
+```js
+ReactDOM.render(<App />, root);
+```
+
+#### Do
+
+```js
+createRoot(root).render(<App />);
+```
+
+### JSX
+
+#### Don't
+
+```jsx
+ReactDOM.render(<App />, root);
+```
+
+#### Do
+
+```jsx
+createRoot(root).render(<App />);
+```
+
+### TSX
+
+#### Don't
+
+```tsx
+ReactDOM.render(<App />, root);
+```
+
+#### Do
+
+```tsx
+createRoot(root).render(<App />);
+```
+
+## Differences from the source
+
+The React version setting is not read: every listed API is reported.