.github/workflows/node-18+.yml

@@ -0,0 +1,60 @@
+name: 'Tests: node.js'
+
+on: [pull_request, push]
+
+jobs:
+  matrix:
+    runs-on: ubuntu-latest
+    outputs:
+      latest: ${{ steps.set-matrix.outputs.requireds }}
+      minors: ${{ steps.set-matrix.outputs.optionals }}
+    steps:
+      - uses: ljharb/actions/node/matrix@main
+        id: set-matrix
+        with:
+          versionsAsRoot: true
+          type: majors
+          preset: '>=18'
+
+  latest:
+    needs: [matrix]
+    name: 'latest majors'
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        node-version: ${{ fromJson(needs.matrix.outputs.latest) }}
+        eslint:
+          - 8
+          - 7
+          - 6
+          - 5
+          - 4
+          - 4.14 # last version without messageId
+          - 3
+        babel-eslint:
+          - 10
+          - 9
+          - 8
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ljharb/actions/node/install@main
+        name: 'nvm install ${{ matrix.node-version }} && npm install'
+        with:
+          node-version: ${{ matrix.node-version }}
+          after_install: |
+            npm install --no-save "eslint@${{ matrix.eslint }}" "@typescript-eslint/parser@5" "babel-eslint@${{ matrix.babel-eslint }}"
+        env:
+          NPM_CONFIG_LEGACY_PEER_DEPS: true
+      - run: npx ls-engines
+      - run: npm run unit-test
+      - uses: codecov/codecov-action@v3
+
+  node:
+    name: 'node 18+'
+    needs: [latest]
+    runs-on: ubuntu-latest
+    steps:
+      - run: 'echo tests completed'

.github/workflows/node-4+.yml → .github/workflows/node-minors.yml

@@ -14,7 +14,7 @@ jobs:
         with:
           versionsAsRoot: true
           type: majors
-          preset: '>=4'
+          preset: '>=4 < 18'
 
   latest:
     needs: [matrix]
@@ -110,7 +110,7 @@ jobs:
       - uses: codecov/codecov-action@v3
 
   node:
-    name: 'node 4+'
+    name: 'node 4 - 17'
     needs: [latest]
     runs-on: ubuntu-latest
     steps:

CHANGELOG.md

@@ -5,6 +5,51 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 
 ## Unreleased
 
+## [7.33.0] - 2023.07.19
+
+### Added
+* [`display-name`]: add `checkContextObjects` option ([#3529][] @JulesBlm)
+* [`jsx-first-prop-new-line`]: add `multiprop` option ([#3533][] @haydncomley)
+* [`no-deprecated`]: add React 18 deprecations ([#3548][] @sergei-startsev)
+* [`forbid-component-props`]: add `disallowedFor` option ([#3417][] @jacketwpbb)
+
+### Fixed
+* [`no-array-index-key`]: consider flatMap ([#3530][] @k-yle)
+* [`jsx-curly-brace-presence`]: handle single and only expression template literals ([#3538][] @taozhou-glean)
+* [`no-unknown-property`]: allow `onLoad` on `source` (@ljharb)
+* [`jsx-first-prop-new-line`]: ensure autofix preserves generics in component name ([#3546][] @ljharb)
+* [`no-unknown-property`]: allow `fill` prop on `<symbol>` ([#3555][] @stefanprobst)
+* [`display-name`], [`prop-types`]: when checking for a capitalized name, ignore underscores entirely ([#3560][] @ljharb)
+* [`no-unused-state`]: avoid crashing on a class field function with destructured state ([#3568][] @ljharb)
+* [`no-unused-prop-types`]: allow using spread with object expression in jsx ([#3570][] @akulsr0)
+* Revert "[`destructuring-assignment`]: Handle destructuring of useContext in SFC" ([#3583][] [#2797][] @102)
+* [`prefer-read-only-props`]: add TS support ([#3593][] @HenryBrown0)
+
+### Changed
+* [Docs] [`jsx-newline`], [`no-unsafe`], [`static-property-placement`]: Fix code syntax highlighting ([#3563][] @nbsp1221)
+* [readme] resore configuration URL ([#3582][] @gokaygurcan)
+* [Docs] [`jsx-no-bind`]: reword performance rationale ([#3581][] @gpoole)
+- [Docs] [`jsx-first-prop-new-line`]: add missing `multiprop` value ([#3598][] @dzek69)
+
+[7.33.0]: https://github.com/jsx-eslint/eslint-plugin-react/compare/v7.32.2...v7.33.0
+[#3598]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3598
+[#3593]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3593
+[#3583]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3583
+[#3582]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3582
+[#3581]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3581
+[#3570]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3570
+[#3568]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3568
+[#3563]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3563
+[#3560]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3560
+[#3555]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3555
+[#3548]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3548
+[#3546]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3546
+[#3538]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3538
+[#3533]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3533
+[#3530]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3530
+[#3529]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3529
+[#3417]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3417
+
 ## [7.32.2] - 2023.01.28
 
 ### Fixed

README.md

@@ -17,7 +17,7 @@ npm install eslint eslint-plugin-react --save-dev
 
 It is also possible to install ESLint globally rather than locally (using `npm install -g eslint`). However, this is not recommended, and any plugins or shareable configs that you use must be installed locally in either case.
 
-## Configuration (legacy: `.eslintrc*`)
+## Configuration (legacy: `.eslintrc*`) <a id="configuration"></a>
 
 Use [our preset](#recommended) to get reasonable defaults:
 
@@ -244,7 +244,7 @@ module.exports = [
       ...reactRecommended.languageOptions,
       globals: {
         ...globals.serviceworker,
-        ...globals.browser;
+        ...globals.browser,
       },
     },
   },

docs/rules/display-name.md

@@ -45,7 +45,7 @@ const Hello = React.memo(function Hello({ a }) {
 
 ```js
 ...
-"react/display-name": [<enabled>, { "ignoreTranspilerName": <boolean> }]
+"react/display-name": [<enabled>, { "ignoreTranspilerName": <boolean>, "checkContextObjects": <boolean> }]
 ...
 ```
 
@@ -128,6 +128,33 @@ function HelloComponent() {
 module.exports = HelloComponent();
 ```
 
+### checkContextObjects (default: `false`)
+
+`displayName` allows you to [name your context](https://reactjs.org/docs/context.html#contextdisplayname) object. This name is used in the React dev tools for the context's `Provider` and `Consumer`.
+When `true` this rule will warn on context objects without a `displayName`.
+
+Examples of **incorrect** code for this rule:
+
+```jsx
+const Hello = React.createContext();
+```
+
+```jsx
+const Hello = createContext();
+```
+
+Examples of **correct** code for this rule:
+
+```jsx
+const Hello = React.createContext();
+Hello.displayName = "HelloContext";
+```
+
+```jsx
+const Hello = createContext();
+Hello.displayName = "HelloContext";
+```
+
 ## About component detection
 
 For this rule to work we need to detect React components, this could be very hard since components could be declared in a lot of ways.

docs/rules/forbid-component-props.md

@@ -50,8 +50,18 @@ custom message, and a component allowlist:
 ```js
 {
   "propName": "someProp",
-  "allowedFor": [SomeComponent, AnotherComponent],
-  "message": "Avoid using someProp"
+  "allowedFor": ["SomeComponent", "AnotherComponent"],
+  "message": "Avoid using someProp except SomeComponent and AnotherComponent"
+}
+```
+
+Use `disallowedFor` as an exclusion list to warn on props for specific components. `disallowedFor` must have at least one item.
+
+```js
+{
+  "propName": "someProp",
+  "disallowedFor": ["SomeComponent", "AnotherComponent"],
+  "message": "Avoid using someProp for SomeComponent and AnotherComponent"
 }
 ```
 

docs/rules/jsx-first-prop-new-line.md

@@ -15,6 +15,7 @@ This rule checks whether the first property of all JSX elements is correctly pla
 - `always`: The first property should always be placed on a new line.
 - `never` : The first property should never be placed on a new line, e.g. should always be on the same line as the Component opening tag.
 - `multiline`: The first property should always be placed on a new line when the JSX tag takes up multiple lines.
+- `multiprop`: The first property should never be placed on a new line unless there are multiple properties.
 - `multiline-multiprop`: The first property should always be placed on a new line if the JSX tag takes up multiple lines and there are multiple properties. This is the `default` value.
 
 Examples of **incorrect** code for this rule, when configured with `"always"`:
@@ -106,7 +107,7 @@ Examples of **correct** code for this rule, when configured with `"multiline-mul
 ## Rule Options
 
 ```jsx
-"react/jsx-first-prop-new-line": `"always" | "never" | "multiline" | "multiline-multiprop"`
+"react/jsx-first-prop-new-line": `"always" | "never" | "multiline" | "multiprop" | "multiline-multiprop"`
 ```
 
 ## When Not To Use It

docs/rules/jsx-newline.md

@@ -10,7 +10,7 @@ This is a stylistic rule intended to make JSX code more readable by requiring or
 
 ## Rule Options
 
-```json
+```json5
 ...
 "react/jsx-newline": [<enabled>, { "prevent": <boolean>, "allowMultilines": <boolean> }]
 ...

docs/rules/jsx-no-bind.md

@@ -2,7 +2,7 @@
 
 <!-- end auto-generated rule header -->
 
-A `bind` call or [arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) in a JSX prop will create a brand new function on every single render. This is bad for performance, as it may cause unnecessary re-renders if a brand new function is passed as a prop to a component that uses reference equality check on the prop to determine if it should update.
+Using `bind` on a function or declaring a function in the render method of a component or the body of a functional component, and then passing that function as a prop will mean that the brand new function that is created on every single render will be considered a completely different function. This can affect performance in some situations, as it may cause unnecessary re-renders if a brand new function is passed as a prop to a component that uses reference equality check on the prop to determine if it should update, such as a component wrapped with [`memo`](https://react.dev/reference/react/memo#memo), or if the prop is used in any hook's "dependency array".
 
 Note that this behavior is different for `ref` props, which is a special case in React that **does not** cause re-renders when a brand new function is passed.  See [`ignore-refs`](#ignorerefs) below for more information.
 
@@ -207,4 +207,4 @@ const Button = () => {
 
 ## When Not To Use It
 
-If you do not use JSX or do not want to enforce that `bind` or arrow functions are not used in props, then you can disable this rule.
+If you do not use JSX or do not want to enforce that `bind`, functions declared in the render method of a component, or functions declared in the body of a functional component are not used in props, then you can disable this rule.

docs/rules/no-array-index-key.md

@@ -45,6 +45,10 @@ things.findIndex((thing, index) => {
   otherThings.push(<Hello key={index} />);
 });
 
+things.flatMap((thing, index) => (
+  <Hello key={index} />
+));
+
 things.reduce((collection, thing, index) => (
   collection.concat(<Hello key={index} />)
 ), []);

docs/rules/no-deprecated.md

@@ -36,19 +36,42 @@ import React, { PropTypes } from 'react';
 componentWillMount() { }
 componentWillReceiveProps() { }
 componentWillUpdate() { }
+
+// React 18 deprecations
+import { render } from 'react-dom';
+ReactDOM.render(<div></div>, container);
+
+import { hydrate } from 'react-dom';
+ReactDOM.hydrate(<div></div>, container);
+
+import {unmountComponentAtNode} from 'react-dom';
+ReactDOM.unmountComponentAtNode(container);
+
+import { renderToNodeStream } from 'react-dom/server';
+ReactDOMServer.renderToNodeStream(element);
 ```
 
 Examples of **correct** code for this rule:
 
 ```jsx
+// when React < 18
 ReactDOM.render(<MyComponent />, root);
 
-// When [1, {"react": "0.13.0"}]
+// when React is < 0.14
 ReactDOM.findDOMNode(this.refs.foo);
 
 import { PropTypes } from 'prop-types';
 
 UNSAFE_componentWillMount() { }
 UNSAFE_componentWillReceiveProps() { }
 UNSAFE_componentWillUpdate() { }
+
+ReactDOM.createPortal(child, container);
+
+import { createRoot } from 'react-dom/client';
+const root = createRoot(container);
+root.unmount();
+
+import { hydrateRoot } from 'react-dom/client';
+const root = hydrateRoot(container, <App/>);
 ```

docs/rules/no-unsafe.md

@@ -56,7 +56,7 @@ const Foo = bar({
 
 ## Rule Options
 
-```json
+```json5
 ...
 "react/no-unsafe": [<enabled>, { "checkAliases": <boolean> }]
 ...

docs/rules/prefer-read-only-props.md

@@ -10,6 +10,8 @@ Using Flow, one can define types for props. This rule enforces that prop types a
 
 Examples of **incorrect** code for this rule:
 
+In Flow:
+
 ```jsx
 type Props = {
   name: string,
@@ -29,8 +31,32 @@ const Hello = (props: {|name: string|}) => (
 );
 ```
 
+In TypeScript:
+
+```tsx
+type Props = {
+  name: string;
+}
+class Hello extends React.Component<Props> {
+  render () {
+    return <div>Hello {this.props.name}</div>;
+  }
+}
+
+interface Props {
+  name: string;
+}
+class Hello extends React.Component<Props> {
+  render () {
+    return <div>Hello {this.props.name}</div>;
+  }
+}
+```
+
 Examples of **correct** code for this rule:
 
+In Flow:
+
 ```jsx
 type Props = {
   +name: string,
@@ -49,3 +75,25 @@ const Hello = (props: {|+name: string|}) => (
   <div>Hello {props.name}</div>
 );
 ```
+
+In TypeScript:
+
+```tsx
+type Props = {
+  readonly name: string;
+}
+class Hello extends React.Component<Props> {
+  render () {
+    return <div>Hello {this.props.name}</div>;
+  }
+}
+
+interface Props {
+  readonly name: string;
+}
+class Hello extends React.Component<Props> {
+  render () {
+    return <div>Hello {this.props.name}</div>;
+  }
+}
+```