Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add the default eslint react hooks config to the wordpress eslint package #14995

Merged
merged 2 commits into from
Apr 16, 2019

Conversation

youknowriad
Copy link
Contributor

closes #14676

This PR adds the default eslint config for react hooks (See https://reactjs.org/docs/hooks-rules.html) to the WordPress eslint config.

  • We were already violating our rules in the contrast checker component.
  • It's also interesting to note that we are currently violating a "recommendation" in the URLPopoverAtLink component. It's our use-case is legitimate though so I was wondering if we should remove the second rule (the warning) added here. cc @aduth

@youknowriad youknowriad added [Type] Automated Testing Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests. [Package] ESLint plugin /packages/eslint-plugin labels Apr 16, 2019
@youknowriad youknowriad self-assigned this Apr 16, 2019
Copy link
Member

@ntwb ntwb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

That said, what's the status of changelogs at the moment, does this PR require it?

Edit: If so please add it, if not merge away 🎉

Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice 👍

@youknowriad
Copy link
Contributor Author

@ntwb I already have a CHANGELOG entry

@@ -11,6 +11,22 @@ import { __ } from '@wordpress/i18n';
import { Notice } from '@wordpress/components';
import { useEffect } from '@wordpress/element';

function ContrastCheckerMessage( { tinyBackgroundColor, tinyTextColor, backgroundColor, textColor } ) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Out of curiosity, what ESLint rule was triggered which enforced this refactor? I'm wondering what is the lesson learned.

Copy link
Contributor Author

@youknowriad youknowriad Apr 16, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The reason is that you can't use hooks after "early returns"

@@ -24,5 +25,7 @@ module.exports = {
'react/no-children-prop': 'off',
'react/prop-types': 'off',
'react/react-in-jsx-scope': 'off',
'react-hooks/rules-of-hooks': 'error',
Copy link
Member

@gziolo gziolo Apr 16, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting, they don't provide the recommended preset.

@@ -24,5 +25,7 @@ module.exports = {
'react/no-children-prop': 'off',
'react/prop-types': 'off',
'react/react-in-jsx-scope': 'off',
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'warn',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm hesitant on the need of this one as we already have a valid use-case for extra deps, but I'm merging and we can try and see if it feels constraining.

@youknowriad youknowriad merged commit 7339a09 into master Apr 16, 2019
@youknowriad youknowriad deleted the add/react-hooks-eslint-config branch April 16, 2019 18:50
@youknowriad youknowriad added this to the 5.6 (Gutenberg) milestone May 13, 2019
"_originalInput": "#666",
"_r": 102,
"_roundA": 1,
"_tc_id": 2,
Copy link
Member

@aduth aduth Nov 22, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These IDs increment with each use of tinycolor2, thus can be affected externally and fail the tests.

See: 4c6a9a4 / #18681

Do we have to pass around the TinyColor object? Should we avoid snapshots?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, these snapshots are not that useful I think.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See #19169

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] ESLint plugin /packages/eslint-plugin [Type] Automated Testing Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add the React hooks eslint to our default eslint config
4 participants