ESLint: Add use-recommended-components rule#76222
Merged
Merged
Conversation
use-recommended-components rule`use-recommended-components rule
9 tasks
Member
Author
|
Currently figuring out what to do with the two violations in |
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: 0 B Total Size: 8.75 MB ℹ️ View Unchanged
|
|
Flaky tests detected in a7958f5. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/23055311398
|
6c63109 to
39877a9
Compare
mirka
commented
Mar 5, 2026
Member
Author
There was a problem hiding this comment.
The lint rule better covers what is contained in this AGENTS file.
ciampo
reviewed
Mar 6, 2026
Contributor
There was a problem hiding this comment.
Should we somehow test the denylist too? Either by adding a "test" entry, or by mocking it for the purpose of the tests?
Member
Author
ciampo
reviewed
Mar 6, 2026
Contributor
There was a problem hiding this comment.
Let's also update the table in packages/eslint-plugin/README.md
ciampo
reviewed
Mar 6, 2026
Comment on lines
+9
to
+28
| const ALLOWLIST = { | ||
| '@wordpress/ui': { | ||
| allowed: [ 'Badge', 'Stack' ], | ||
| message: | ||
| '`{{ name }}` from `{{ source }}` is not yet recommended for use in a WordPress environment.', | ||
| }, | ||
| }; | ||
|
|
||
| /** | ||
| * Denylist: the listed components are flagged with a message pointing | ||
| * to a recommended alternative. | ||
| * | ||
| * @type {Record<string, Record<string, string>>} | ||
| */ | ||
| const DENYLIST = { | ||
| // Example: | ||
| // '@wordpress/components': { | ||
| // TextControl: 'Use `InputControl` from `@wordpress/ui` instead.', | ||
| // }, | ||
| }; |
Contributor
There was a problem hiding this comment.
I know it's an unlikely edge case, but should we handle the situation in which a component is both in the allow and deny list?
mirka
commented
Mar 10, 2026
Comment on lines
+16
to
+17
| // TODO: Revert to the `Notice` in `@wordpress/components` for now. | ||
| // eslint-disable-next-line @wordpress/use-recommended-components |
aduth
approved these changes
Mar 13, 2026
aduth
left a comment
Member
There was a problem hiding this comment.
Couple minor comments, but LGTM overall 👍
| @@ -0,0 +1,25 @@ | |||
| # Encourage the use of recommended components (use-recommended-components) | |||
Member
There was a problem hiding this comment.
It might be worth a future refactor to generalize a rule for "don't use an named import from this package, use it from another" and not specifically to components. I see the value in pre-packaging the configuration for components usage, but there's some underlying usefulness to the general approach of redirecting package imports.
Member
Author
There was a problem hiding this comment.
Yes, possibly! Though, in the general case, these things have been motivated by deprecations, which can already be signaled by TS and deprecation messages. So in those cases a lint rule is convenient but also slightly redundant.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Part of #76135
Adds a new
use-recommended-componentsESLint rule to@wordpress/eslint-pluginand enables it in the repo.Why?
As
@wordpress/uicomponents become ready for use, we need a way to communicate which ones are recommended and which aren't yet. On the other side, as components in older packages like@wordpress/componentsgain newer alternatives, we want to nudge consumers toward them.This rule provides an evolving, up-to-date set of that guidance directly as lint feedback.
I also wanted to make clear that this is guidance for a WordPress environment, where there are specific concerns (infrastructure, coherence with legacy componentry) that may not apply to consumers in a non-WordPress environment.
How?
The rule uses two strategies, both with component lists hardcoded in the rule file:
@wordpress/uiwhere only a subset of components are ready for general use. Named imports not on the list are flagged.The rule is enabled as
errorin this repo's.eslintrc.jsonly, not in the sharedrecommendedconfig, so third-party consumers of@wordpress/eslint-plugincan opt in if they want. At this early stage, it is mostly intended for the Gutenberg repo.Testing Instructions
Run the rule's unit tests: