@codelaw/rules-js 0.1.0 → 0.2.0

package/rules/react/no-direct-mutation-state.md

@@ -1,102 +0,0 @@
----
-id: react/no-direct-mutation-state
-title: "No assigning to this.state outside the constructor"
-languages: [javascript, jsx, tsx]
-fix: manual
-fix_reason: "the update has to be rewritten as a `setState` call"
-stability: preview
-ported_from: [eslint-plugin-react/no-direct-mutation-state]
-since: 0.1.0
----
-
-A class component changes its state with `this.setState`, never by assigning to `this.state` outside
-the constructor.
-
-**Why:** A direct assignment doesn't trigger a re-render, and a later `setState` may overwrite it.
-
-```codelaw
-match:
-  kind: assignment_expression
-  has:
-    field: left
-    regex: ^this\.state\b
-  not:
-    inside:
-      kind: method_definition
-      has: { field: name, regex: ^constructor$ }
-      stopBy: end
-  inside: { kind: class_body, stopBy: end }
-message: "Assigning to `this.state` doesn't re-render; call `this.setState`"
-```
-
-## How to fix
-
-1. Replace the assignment with `this.setState(…)`; use the updater form when the new state depends on the old.
-
-## Examples
-
-### JavaScript
-
-#### Don't
-
-```js
-class Counter extends React.Component {
-  inc() {
-    this.state.count = this.state.count + 1;
-  }
-}
-```
-
-#### Do
-
-```js
-class Counter extends React.Component {
-  inc() {
-    this.setState((s) => ({ count: s.count + 1 }));
-  }
-}
-```
-
-### JSX
-
-#### Don't
-
-```jsx
-class Counter extends React.Component {
-  inc() {
-    this.state.count = this.state.count + 1;
-  }
-}
-```
-
-#### Do
-
-```jsx
-class Counter extends React.Component {
-  inc() {
-    this.setState((s) => ({ count: s.count + 1 }));
-  }
-}
-```
-
-### TSX
-
-#### Don't
-
-```tsx
-class Counter extends React.Component {
-  inc() {
-    this.state.count = this.state.count + 1;
-  }
-}
-```
-
-#### Do
-
-```tsx
-class Counter extends React.Component {
-  inc() {
-    this.setState((s) => ({ count: s.count + 1 }));
-  }
-}
-```

package/rules/react/no-find-dom-node.md

@@ -1,72 +0,0 @@
----
-id: react/no-find-dom-node
-title: "No findDOMNode"
-languages: [javascript, jsx, tsx]
-fix: manual
-fix_reason: "a ref has to be attached to the right element by hand"
-stability: preview
-ported_from: [eslint-plugin-react/no-find-dom-node]
-since: 0.1.0
----
-
-Code doesn't call `findDOMNode`.
-
-**Why:** `findDOMNode` breaks component abstraction, doesn't work with function components, and is
-removed in React 19.
-
-```codelaw
-match:
-  any:
-    - pattern: findDOMNode($$$A)
-    - pattern: $R.findDOMNode($$$A)
-message: "`findDOMNode` is deprecated; use a ref"
-```
-
-## How to fix
-
-1. Attach a ref to the element you need (`ref={this.ref}`).
-2. Read `ref.current` instead of calling `findDOMNode`.
-
-## Examples
-
-### JavaScript
-
-#### Don't
-
-```js
-const el = ReactDOM.findDOMNode(this);
-```
-
-#### Do
-
-```js
-const el = this.ref.current;
-```
-
-### JSX
-
-#### Don't
-
-```jsx
-const el = ReactDOM.findDOMNode(this);
-```
-
-#### Do
-
-```jsx
-const el = this.ref.current;
-```
-
-### TSX
-
-#### Don't
-
-```tsx
-const el = ReactDOM.findDOMNode(this);
-```
-
-#### Do
-
-```tsx
-const el = this.ref.current;
-```

package/rules/react/no-is-mounted.md

@@ -1,109 +0,0 @@
----
-id: react/no-is-mounted
-title: "No this.isMounted()"
-languages: [javascript, jsx, tsx]
-fix: manual
-fix_reason: "the callback has to be cancelled where it starts"
-stability: preview
-ported_from: [eslint-plugin-react/no-is-mounted]
-since: 0.1.0
----
-
-Code doesn't call `this.isMounted()`.
-
-**Why:** `isMounted` hides leaks: a callback that outlives the component should be cancelled
-instead.
-
-```codelaw
-match:
-  pattern: this.isMounted()
-message: "`isMounted` is an anti-pattern and gone from ES6 classes"
-```
-
-## How to fix
-
-1. Cancel pending work in `componentWillUnmount`.
-2. Remove the `isMounted` check.
-
-## Examples
-
-### JavaScript
-
-#### Don't
-
-```js
-class A extends React.Component {
-  done() {
-    if (this.isMounted()) {
-      this.setState({ ok: true });
-    }
-  }
-}
-```
-
-#### Do
-
-```js
-class A extends React.Component {
-  componentWillUnmount() {
-    this.request.cancel();
-  }
-  done() {
-    this.setState({ ok: true });
-  }
-}
-```
-
-### JSX
-
-#### Don't
-
-```jsx
-class A extends React.Component {
-  done() {
-    if (this.isMounted()) {
-      this.setState({ ok: true });
-    }
-  }
-}
-```
-
-#### Do
-
-```jsx
-class A extends React.Component {
-  componentWillUnmount() {
-    this.request.cancel();
-  }
-  done() {
-    this.setState({ ok: true });
-  }
-}
-```
-
-### TSX
-
-#### Don't
-
-```tsx
-class A extends React.Component {
-  done() {
-    if (this.isMounted()) {
-      this.setState({ ok: true });
-    }
-  }
-}
-```
-
-#### Do
-
-```tsx
-class A extends React.Component {
-  componentWillUnmount() {
-    this.request.cancel();
-  }
-  done() {
-    this.setState({ ok: true });
-  }
-}
-```

package/rules/react/no-render-return-value.md

@@ -1,75 +0,0 @@
----
-id: react/no-render-return-value
-title: "The return value of ReactDOM.render is not used"
-languages: [javascript, jsx, tsx]
-fix: manual
-fix_reason: "code that used the instance needs a ref instead"
-stability: preview
-ported_from: [eslint-plugin-react/no-render-return-value]
-since: 0.1.0
----
-
-The value `ReactDOM.render` returns is not stored, returned or passed on.
-
-**Why:** It's a legacy handle that is `null` in some cases and gone in newer APIs.
-
-```codelaw
-match:
-  pattern: ReactDOM.render($$$A)
-  inside:
-    stopBy: neighbor
-    any:
-      - kind: variable_declarator
-      - kind: return_statement
-      - kind: assignment_expression
-      - kind: arguments
-message: "Don't use what `ReactDOM.render` returns; use a ref"
-```
-
-## How to fix
-
-1. Pass a ref to the root element and use it instead of the return value.
-
-## Examples
-
-### JavaScript
-
-#### Don't
-
-```js
-const app = ReactDOM.render(<App />, root);
-```
-
-#### Do
-
-```js
-ReactDOM.render(<App ref={appRef} />, root);
-```
-
-### JSX
-
-#### Don't
-
-```jsx
-const app = ReactDOM.render(<App />, root);
-```
-
-#### Do
-
-```jsx
-ReactDOM.render(<App ref={appRef} />, root);
-```
-
-### TSX
-
-#### Don't
-
-```tsx
-const app = ReactDOM.render(<App />, root);
-```
-
-#### Do
-
-```tsx
-ReactDOM.render(<App ref={appRef} />, root);
-```

package/rules/react/no-string-refs.md

@@ -1,72 +0,0 @@
----
-id: react/no-string-refs
-title: "No string refs"
-languages: [javascript, jsx, tsx]
-fix: manual
-fix_reason: "the ref object has to be created where the component can reach it"
-stability: preview
-ported_from: [eslint-plugin-react/no-string-refs]
-since: 0.1.0
----
-
-Refs are objects or callbacks, never strings (`ref="input"`, `this.refs.input`).
-
-**Why:** String refs are legacy, slow, and removed in React 19.
-
-```codelaw
-match:
-  any:
-    - kind: jsx_attribute
-      regex: ^ref=["']
-    - pattern: this.refs.$X
-message: "String refs are legacy; use `useRef`, `createRef` or a callback ref"
-```
-
-## How to fix
-
-1. Create a ref with `useRef` or `createRef`.
-2. Pass it as `ref={…}` and read `.current`.
-
-## Examples
-
-### JavaScript
-
-#### Don't
-
-```js
-const a = <input ref="name" />;
-```
-
-#### Do
-
-```js
-const a = <input ref={nameRef} />;
-```
-
-### JSX
-
-#### Don't
-
-```jsx
-const a = <input ref="name" />;
-```
-
-#### Do
-
-```jsx
-const a = <input ref={nameRef} />;
-```
-
-### TSX
-
-#### Don't
-
-```tsx
-const a = <input ref="name" />;
-```
-
-#### Do
-
-```tsx
-const a = <input ref={nameRef} />;
-```

package/rules/react/no-unescaped-entities.md

@@ -1,69 +0,0 @@
----
-id: react/no-unescaped-entities
-title: "No unescaped >, \", ' or } in JSX text"
-languages: [javascript, jsx, tsx]
-fix: manual
-fix_reason: "the right escape depends on the character and the author's style"
-stability: preview
-ported_from: [eslint-plugin-react/no-unescaped-entities]
-since: 0.1.0
----
-
-JSX text doesn't contain `>`, `"`, `'` or `}` unescaped.
-
-**Why:** These characters are easy to misread as markup or code, and a stray `}` is usually a typo.
-
-```codelaw
-match:
-  kind: jsx_text
-  regex: '[>"''}]'
-message: "Escape this character in JSX text, e.g. `'` or `{\"'\"}`"
-```
-
-## How to fix
-
-1. Use an HTML entity (`'`, `"`, `>`) or a string expression (`{"'"}`).
-
-## Examples
-
-### JavaScript
-
-#### Don't
-
-```js
-const a = <p>Don't stop</p>;
-```
-
-#### Do
-
-```js
-const a = <p>Don&apos;t stop</p>;
-```
-
-### JSX
-
-#### Don't
-
-```jsx
-const a = <p>Don't stop</p>;
-```
-
-#### Do
-
-```jsx
-const a = <p>Don&apos;t stop</p>;
-```
-
-### TSX
-
-#### Don't
-
-```tsx
-const a = <p>Don't stop</p>;
-```
-
-#### Do
-
-```tsx
-const a = <p>Don&apos;t stop</p>;
-```

package/rules/react/no-unknown-property.md

@@ -1,69 +0,0 @@
----
-id: react/no-unknown-property
-title: "DOM elements use React's prop names, not HTML attribute names"
-languages: [javascript, jsx, tsx]
-fix: auto
-stability: preview
-ported_from: [eslint-plugin-react/no-unknown-property]
-since: 0.1.0
----
-
-A DOM element in JSX uses React's names for attributes: `className` not `class`, `htmlFor` not
-`for`, `onClick` not `onclick`, `tabIndex` not `tabindex`.
-
-**Why:** React ignores or warns about the HTML spellings, so the attribute silently does nothing.
-
-```codelaw
-native: react/no-unknown-property
-```
-
-## Examples
-
-### JavaScript
-
-#### Don't
-
-```js
-const a = <input tabindex="1" onclick={go} />;
-```
-
-#### Do
-
-```js
-const a = <input tabIndex="1" onClick={go} />;
-```
-
-### JSX
-
-#### Don't
-
-```jsx
-const a = <input tabindex="1" onclick={go} />;
-```
-
-#### Do
-
-```jsx
-const a = <input tabIndex="1" onClick={go} />;
-```
-
-### TSX
-
-#### Don't
-
-```tsx
-const a = <label class="x" for="name" onclick={go}>Name</label>;
-```
-
-#### Do
-
-```tsx
-const a = <label className="x" htmlFor="name" onClick={go}>Name</label>;
-```
-
-## Differences from the source
-
-Only HTML spellings React renames are checked (the pack's `react/dom-property-aliases` data table);
-unknown attributes in general are not. In `.js` and `.jsx` files the JavaScript grammar can't parse
-`class=` and `for=` as JSX attributes (they are reserved words), so those two are found only in
-`.tsx`.

package/rules/react/props-type-name.md

@@ -1,43 +0,0 @@
----
-id: react/props-type-name
-title: "A component's props type is named <Component>Props"
-languages: [tsx]
-fix: suggest
-fix_reason: "renaming a type other files import would break them, so it is offered, not applied"
-stability: preview
-since: 0.1.0
----
-
-The type of a component's props is named after the component: `CardProps` for `Card`.
-
-**Why:** One naming pattern makes props types easy to find and import.
-
-```codelaw
-native: react/props-type-name
-```
-
-## Examples
-
-### TSX
-
-#### Don't
-
-```tsx
-type CardOptions = { title: string };
-export function Card(props: CardOptions) {
-  return <h2>{props.title}</h2>;
-}
-```
-
-#### Do
-
-```tsx
-type CardProps = { title: string };
-export function Card(props: CardProps) {
-  return <h2>{props.title}</h2>;
-}
-```
-
-## Differences from the source
-
-The type is renamed with its uses in the file; an exported type is reported without a fix.

package/rules/react/require-render-return.md

@@ -1,91 +0,0 @@
----
-id: react/require-render-return
-title: "A class component's render() returns"
-languages: [javascript, jsx, tsx]
-fix: manual
-fix_reason: "what to render needs the author"
-stability: preview
-ported_from: [eslint-plugin-react/require-render-return]
-since: 0.1.0
----
-
-The `render()` method of a class component returns a value on every path.
-
-**Why:** A `render()` that falls off its end returns `undefined`, which is almost always a forgotten
-`return`.
-
-```codelaw
-native: react/require-render-return
-```
-
-## How to fix
-
-1. Return the element, or `null` to render nothing, on every path.
-
-## Examples
-
-### JavaScript
-
-#### Don't
-
-```js
-class Title extends React.Component {
-  render() {
-    <h1>{this.props.text}</h1>;
-  }
-}
-```
-
-#### Do
-
-```js
-class Title extends React.Component {
-  render() {
-    return <h1>{this.props.text}</h1>;
-  }
-}
-```
-
-### JSX
-
-#### Don't
-
-```jsx
-class Title extends React.Component {
-  render() {
-    <h1>{this.props.text}</h1>;
-  }
-}
-```
-
-#### Do
-
-```jsx
-class Title extends React.Component {
-  render() {
-    return <h1>{this.props.text}</h1>;
-  }
-}
-```
-
-### TSX
-
-#### Don't
-
-```tsx
-class Title extends React.Component {
-  render() {
-    <h1>{this.props.text}</h1>;
-  }
-}
-```
-
-#### Do
-
-```tsx
-class Title extends React.Component {
-  render() {
-    return <h1>{this.props.text}</h1>;
-  }
-}
-```