@codelaw/rules-js 0.1.0 → 0.2.0

package/rules/react/jsx-key.md

@@ -1,99 +0,0 @@
----
-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

@@ -1,87 +0,0 @@
----
-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

@@ -1,66 +0,0 @@
----
-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

@@ -1,78 +0,0 @@
----
-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

@@ -1,78 +0,0 @@
----
-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

@@ -1,80 +0,0 @@
----
-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

@@ -1,83 +0,0 @@
----
-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

@@ -1,84 +0,0 @@
----
-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.