feat(eslint-plugin-react-hooks): convert to typescript and package type declarations #32240

michaelfaith · 2025-01-28T02:02:04Z

Summary

This change converts the eslint hooks plugin to typescript, which also allows us to include type declarations in the package, for those using typescript eslint configs.

Constituent changes that should land before this one

Closes #30119

michaelfaith · 2025-01-28T02:04:10Z

Core migration is done. Tests are green when run locally. Now working on integrating it into the existing build infra and developing e2e test fixtures.

poteto

Thanks for working on this! I think as it is the PR is bordering on being way too large to review thoroughly. It'd be good if we can split this up into a few smaller PRs. For example the peripheral changes (installing/updating packages) or script/babel/build changes could also be split.

I would also recommend not rewriting existing patterns like for loops to for..of and x == null to !x, since they have subtle differences. Keep the conversion as 1:1 as possible unless it's strictly necessary for type soundness. Additionally if you need to add new code (eg adding continue inside of a loop), could you add more context on why it's necessary?

packages/eslint-plugin-react-hooks/src/index.ts

packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js

packages/eslint-plugin-react-hooks/babel.config.js

packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.ts

packages/eslint-plugin-react-hooks/src/index.ts

poteto · 2025-01-28T16:05:35Z

packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.ts

+          if (!referenceNode) {
+            continue;
+          }


Why is this needed?

fastFindReferenceWithParent returns null if it's unable to find a suitable node, but all the logic below this assumes that it's returned a Node. In practice, it shouldn't really ever not return a node, so this is more of an edge case, but since the function isn't narrowing out null, this early return keeps the rest of the assumptions in tact.

michaelfaith · 2025-01-29T23:19:24Z

@poteto thanks for taking a look at this already! I've made some updates and responded to several of the feedback items.

It'd be good if we can split this up into a few smaller PRs. For example the peripheral changes (installing/updating packages) or script/babel/build changes could also be split.

I'm thinking these could be good candidates for breaking out as separate changes, but wanted to get your input:

removing the useEffectEvent / EXPERIMENTAL checks you mentioned
Add dependencies
Add tsconfig and the two d.ts files in the types directory

Thoughts?

poteto

Thanks for addressing the previous feedback!

packages/eslint-plugin-react-hooks/src/RulesOfHooks.ts

poteto · 2025-01-30T17:16:27Z

@poteto thanks for taking a look at this already! I've made some updates and responded to several of the feedback items.

It'd be good if we can split this up into a few smaller PRs. For example the peripheral changes (installing/updating packages) or script/babel/build changes could also be split.

I'm thinking these could be good candidates for breaking out as separate changes, but wanted to get your input:

removing the useEffectEvent / EXPERIMENTAL checks you mentioned

Add dependencies

Add tsconfig and the two d.ts files in the types directory

Thoughts?

That split makes sense. I would also try to get the build changes done in an earlier PR, and this PR could be for just the changes to the rules themselves.

michaelfaith · 2025-01-30T18:44:56Z

I would also try to get the build changes done in an earlier PR, and this PR could be for just the changes to the rules themselves.

Sounds good. I updated the description of this PR to include tasks for each of those, and will link PRs as I work through each.

…useEffectEvent Contributing to facebook#32240, this change removes the experimental `useEffectEvent` checks in the two react hooks eslint rule. As the api is refined, and the compiler rule(s) are incorporated into this plugin, these checks will be covered then.

… migration Contributing to facebook#32240, this change adds the dev dependencies needed to support the migration of the plugin to typescript.

… migration (#32279)  ## Summary Contributing to #32240, this change adds the dev dependencies needed to support the migration of the plugin to typescript.

Contributing to facebook#32240, this change adds the tsconfig, tsup config, and estree type declarations that will be needed for that plugin's typescript migration.

## Summary Contributing to #32240, this change adds the tsconfig, tsup config, and estree type declarations that will be needed for that plugin's typescript migration.

michaelfaith · 2025-02-03T23:37:21Z

I've rebased following the other PRs merging, and resolved merge conflicts. I'll tackle the build changes next. First in this branch, since I have something to work against, and then break it out into a separate change to review on its own.

I isolated this mv into its own PR to ensure we're able to maintain commit history for these files.

…pe declarations This change converts the eslint hooks plugin to typescript, which also allows us to include type declarations in the package, for those using [typescript eslint configs](https://eslint.org/blog/2025/01/eslint-v9.18.0-released/#stable-typescript-configuration-file-support).

This change updates the build script to support packages containing typescript source. I added a new `tsconfig` bundle property to use for detecting typescript js bundle types. When a bundle has `tsconfig` it will use the `@rollup/typescript` plugin instead of the flow plugin, in the plugin stack. Additionally, I added two new bundle types for DTS bundles (CJS_DTS and ESM_DTS). This is for generating .d.ts bundles. For dts only bundles, we only need to use the dts rollup plugin. The rest of the bundle creation logic should hold.

Now that eslint-plugin-react-hooks is written in typescript, we need a pre-step in jest to build the plugin prior to running tests. It's a bit unfortunate that there are effectively 2 build setups for the eslint plugin: one from rollup as part of the main React build, and a standalone tsup (esbuild) step for tests. We should unify these in a follow up PR.

….ts file This change adjusts the package.json for the eslint-plugin-react-hooks to point at the product of the root level build, instead of the temporary tsup package-level build. It also adds an `index.d.ts` to the `npm` folder that's copied to the root of the package after build. Lastly, by adding a `name` property to the bundle definition, it emits the same file names as it did before changing the `target`. As a result of these changes, we don't need to do the additional jest global set up. I'd like to follow this up with a little more setup at the package level to allow for faster local devloop, but that's not critical for this change to land.

This change adds tsup back for package-level testing. I'll iterate on this to see if we can drop this in a follow-up change

This change removes tsup from the devloop of `eslint-plugin-react-hooks`. I was originally using it to quickly run tests and builds as I was doing the migration, but now that we've added support to the larger rollup build process, there's no longer a need for it. I've added an index.js to the root of the package folder that's just a proxy for the `src/index.ts`. It uses tsx to load it for other consumers in the monorepo (e.g. the eventual e2e tests fixtures). For jest, the index.js is able to load the ts file due to the added configuration in the package's babel and jest configs. This `index.js` will only be used for dev purposes. The `index.js` that's in the `npm` folder is what will actually make it into the published package.

michaelfaith · 2025-02-16T18:38:49Z

Now that we've knocked out and merged all of the prereqs, and I tested everything against the new test fixtures from #32396, this should be ready for review 😊 After this merges I'll update the v9 test fixture to use a ts-based config and add the fixture tests to CI for future validation.

poteto

Thanks for all the work getting this ready!

poteto · 2025-02-16T18:42:05Z

packages/eslint-plugin-react-hooks/src/RulesOfHooks.ts

-
-function last(array) {
-  return array[array.length - 1];
+function last<T>(array: T[]): T {


This is super minor but could you use the Array<T> syntax instead for arrays? It's a convention we also use for the compiler, as our team finds them easier to scan.

poteto · 2025-02-16T18:44:30Z

packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.ts

@@ -140,6 +183,9 @@ export default {

      // Get the current scope.
      const scope = scopeManager.acquire(node);
+      if (!scope) {
+        return;


Maybe throw here if we didn't find a scope?

poteto · 2025-02-16T18:45:10Z

packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.ts

-        let declaration = def.node.parent;
-        if (declaration == null) {
+        let declaration = defNode.parent;
+        if (declaration == null && componentScope) {


Could we use a specific comparison here?

poteto · 2025-02-16T18:45:21Z

packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.ts

@@ -219,6 +266,8 @@ export default {
          }
        }
        if (
+          declaration &&


poteto · 2025-02-16T19:10:49Z

Feel free to address the other comments in a follow up PR, I'm going to merge this for now.

…pe declarations (#32240)  ## Summary This change converts the eslint hooks plugin to typescript, which also allows us to include type declarations in the package, for those using [typescript eslint configs](https://eslint.org/blog/2025/01/eslint-v9.18.0-released/#stable-typescript-configuration-file-support). ### Constituent changes that should land before this one - [x] ~#32276 - [x] #32279 - [x] #32283 - [x] #32393 - [x] #32396 Closes #30119 --------- Co-authored-by: Lauren Tan <poteto@users.noreply.github.com> DiffTrain build for [5adf402](5adf402)

This change addresses several feedback items from facebook#32240

…nditionals (#32400) - [build(eslint-plugin-react-hooks): add ts-linting](4c0fbe7) This change adds configuration to the eslint config governing `eslint-plugin-react-hooks` to use the typescript-eslint plugin and parser. It adds the typescript-recommended config, and configures the team's preferred `array-type` convention. - [refactor(eslint-plugin-react-hooks): improve conditionals](540d0d9) This change addresses several feedback items from #32240 - [ci (eslint-e2e): exclude nested node_modules from cache](a3279f4) This change removes the nested fixture `node_modules` from being cached, so that the symbolic link can be made after the build happens.

…nditionals (#32400) - [build(eslint-plugin-react-hooks): add ts-linting](4c0fbe7) This change adds configuration to the eslint config governing `eslint-plugin-react-hooks` to use the typescript-eslint plugin and parser. It adds the typescript-recommended config, and configures the team's preferred `array-type` convention. - [refactor(eslint-plugin-react-hooks): improve conditionals](540d0d9) This change addresses several feedback items from #32240 - [ci (eslint-e2e): exclude nested node_modules from cache](a3279f4) This change removes the nested fixture `node_modules` from being cached, so that the symbolic link can be made after the build happens. DiffTrain build for [4632e36](4632e36)

facebook-github-bot added the CLA Signed label Jan 28, 2025

vercel bot deployed to Preview January 28, 2025 02:05 View deployment

poteto reviewed Jan 28, 2025

View reviewed changes

This comment was marked as off-topic.

Sign in to view

vercel bot deployed to Preview January 29, 2025 23:14 View deployment

poteto reviewed Jan 30, 2025

View reviewed changes

packages/eslint-plugin-react-hooks/src/RulesOfHooks.ts Outdated Show resolved Hide resolved

packages/eslint-plugin-react-hooks/src/RulesOfHooks.ts Outdated Show resolved Hide resolved

michaelfaith mentioned this pull request Jan 31, 2025

fix(eslint-plugin-react-hooks): remove experimental checks involving useEffectEvent #32276

Closed

michaelfaith mentioned this pull request Jan 31, 2025

build(eslint-plugin-react-hooks): add dev dependencies for typescript migration #32279

Merged

michaelfaith mentioned this pull request Feb 1, 2025

build(eslint-plugin-react-hooks): tsconfig and global types #32283

Merged

michaelfaith force-pushed the feat/convert-eslint-plugin-hooks-to-typescript branch from 10ad067 to ede1e95 Compare February 3, 2025 23:00

vercel bot deployed to Preview February 3, 2025 23:02 View deployment

vercel bot deployed to Preview February 3, 2025 23:34 View deployment

vercel bot deployed to Preview February 9, 2025 00:18 View deployment

vercel bot deployed to Preview February 13, 2025 20:29 View deployment

vercel bot deployed to Preview February 16, 2025 18:23 View deployment

michaelfaith force-pushed the feat/convert-eslint-plugin-hooks-to-typescript branch from b84fdfa to 39a6137 Compare February 16, 2025 18:30

michaelfaith and others added 9 commits February 16, 2025 12:30

refactor(eslint-plugin-react-hooks): rename js files to ts

f126256

I isolated this mv into its own PR to ensure we're able to maintain commit history for these files.

build(eslint-plugin-react-hooks): restore tsup

ad617f9

This change adds tsup back for package-level testing. I'll iterate on this to see if we can drop this in a follow-up change

vercel bot deployed to Preview February 16, 2025 18:31 View deployment

michaelfaith force-pushed the feat/convert-eslint-plugin-hooks-to-typescript branch from 39a6137 to bddfebf Compare February 16, 2025 18:33

vercel bot deployed to Preview February 16, 2025 18:33 View deployment

michaelfaith marked this pull request as ready for review February 16, 2025 18:38

poteto approved these changes Feb 16, 2025

View reviewed changes

poteto reviewed Feb 16, 2025

View reviewed changes

poteto merged commit 5adf402 into facebook:main Feb 16, 2025
192 checks passed

michaelfaith deleted the feat/convert-eslint-plugin-hooks-to-typescript branch February 16, 2025 19:22

michaelfaith added a commit to michaelfaith/react that referenced this pull request Feb 16, 2025

refactor(eslint-plugin-react-hooks): improve conditionals

540d0d9

This change addresses several feedback items from facebook#32240

michaelfaith mentioned this pull request Feb 16, 2025

refactor(eslint-plugin-react-hooks): change array type and improve conditionals #32400

Merged

michaelfaith added a commit to michaelfaith/react that referenced this pull request Feb 16, 2025

refactor(eslint-plugin-react-hooks): improve conditionals

077a4b0

This change addresses several feedback items from facebook#32240

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(eslint-plugin-react-hooks): convert to typescript and package type declarations #32240

feat(eslint-plugin-react-hooks): convert to typescript and package type declarations #32240

michaelfaith commented Jan 28, 2025 •

edited

Loading

michaelfaith commented Jan 28, 2025 •

edited

Loading

poteto left a comment

poteto Jan 28, 2025

michaelfaith Jan 29, 2025 •

edited

Loading

This comment was marked as off-topic.

michaelfaith commented Jan 29, 2025

poteto left a comment

poteto commented Jan 30, 2025

michaelfaith commented Jan 30, 2025 •

edited

Loading

michaelfaith commented Feb 3, 2025

michaelfaith commented Feb 16, 2025

poteto left a comment

poteto Feb 16, 2025

poteto Feb 16, 2025

poteto Feb 16, 2025

poteto Feb 16, 2025

poteto commented Feb 16, 2025

feat(eslint-plugin-react-hooks): convert to typescript and package type declarations #32240

feat(eslint-plugin-react-hooks): convert to typescript and package type declarations #32240

Conversation

michaelfaith commented Jan 28, 2025 • edited Loading

Summary

Constituent changes that should land before this one

michaelfaith commented Jan 28, 2025 • edited Loading

poteto left a comment

Choose a reason for hiding this comment

poteto Jan 28, 2025

Choose a reason for hiding this comment

michaelfaith Jan 29, 2025 • edited Loading

Choose a reason for hiding this comment

This comment was marked as off-topic.

michaelfaith commented Jan 29, 2025

poteto left a comment

Choose a reason for hiding this comment

poteto commented Jan 30, 2025

michaelfaith commented Jan 30, 2025 • edited Loading

michaelfaith commented Feb 3, 2025

michaelfaith commented Feb 16, 2025

poteto left a comment

Choose a reason for hiding this comment

poteto Feb 16, 2025

Choose a reason for hiding this comment

poteto Feb 16, 2025

Choose a reason for hiding this comment

poteto Feb 16, 2025

Choose a reason for hiding this comment

poteto Feb 16, 2025

Choose a reason for hiding this comment

poteto commented Feb 16, 2025

michaelfaith commented Jan 28, 2025 •

edited

Loading

michaelfaith commented Jan 28, 2025 •

edited

Loading

michaelfaith Jan 29, 2025 •

edited

Loading

michaelfaith commented Jan 30, 2025 •

edited

Loading