Provide component mapping for github/react preset
#34
Conversation
🦋 Changeset detectedLatest commit: a398c56 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Hmm I think this config will have a dependency on eslint-plugin-github and eslint-plugin-jsx-a11y plugin (since github/react preset includes it). do you think I should pull this out into a separate config from |
|
@khiga8 It seems reasonable to include this in the Should we consider this a breaking change? |
|
@colebemis yes I think we'll need to do that! At least that's what we seem to do in eslint-plugin-github package.json since the presets depend on external plugins. does that sound okay with you?
|
yes, we should to be safe! |
khiga8
force-pushed
the
kh-github-component-mapping
branch
from
84a2db9 to
f0f5abd
Compare
| "jest": "^27.0.6" | ||
| }, | ||
| "peerDependencies": { | ||
| "eslint": ">=4.19.0", | ||
| "eslint": "^8.0.1", |
There was a problem hiding this comment.
I ran into dependency conflict because of the eslint version specified in eslint-plugin-github so I had to bump this up.
There was a problem hiding this comment.
not sure why it broke a test
EDIT: I fixed it with the change in src/rules/no-deprecated-colors.js. it had to do with an 8.0.0 feature.
(related: Rules require meta.hasSuggestions to provide suggestions)
.changeset/gorgeous-bananas-float.md
Outdated
| "eslint-plugin-primer-react": major | ||
| --- | ||
|
|
||
| Provide component mapping for `github/react` preset and add dependencies to `eslint-plugin-github` and `eslint-plugin-jsx-a11y` |
There was a problem hiding this comment.
Could we also mention that the eslint peer dependency is now ^8.0.1?
|
Tested this change on dotcom and made a couple fixes to the setting. |
Context
The latest release of
github/eslint-plugin-githubincludes a new React preset which will be recommended to GitHub React projects. This React preset currently:jsx-a11yplugin to ensure React projects always include the accessibility rules.We want the JSX linters to also run on relevant components. For instance, we have a rule that discourages generic link text should also run on
<Link>. For greater coverage,eslint-plugin-githubadded a component mapping configuration that allows custom components (with relevant props) to be treated as a given HTML element.Update
I am adding the component mapping config for
github/reacthere.Providing this config here will minimize the need for Primer React consumers to define their own component mappings.
To reviewer
Upcoming work
We should provide component mappings for
jsx-a11ytoo since that plugin similarly supports component to HTML element mapping. Without it, none of the React components will have accessibility linting coverage. You can read more about this mapping setting for jsx-a11y at the end of this section. Notably, thisjsx-a11ysetting is less robust since it only allows a 1:1 mapping versus the configuration we created foreslint-plugin-github.