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
[New] no-unstable-nested-components
: Prevent creating unstable components inside components
#2750
[New] no-unstable-nested-components
: Prevent creating unstable components inside components
#2750
Conversation
0e24d1c
to
a45f3fe
Compare
ca684ef
to
35f073e
Compare
35f073e
to
f8abd1f
Compare
Ready for review. @ljharb could you take a look at this some point? |
f8abd1f
to
89134ca
Compare
88d4172
to
79d7658
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sorry for the long delay. Overall, this looks great!
const ERROR_MESSAGE_WITHOUT_NAME = 'Declare this component outside parent component or memoize it.'; | ||
const COMPONENT_AS_PROPS_INFO = ' If you want to allow component creation in props, set allowAsProps option to true.'; | ||
const RENDER_REGEXP = /^render/; | ||
const HOOK_REGEXP = /^use[A-Z0-9].*$/; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it'd be ideal to avoid hardcoding this, to avoid deviating from eslint-plugin-react-with-hooks. is there any way we could share hook detection code with that plugin?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
At the moment, no. Currently they are not exporting the hook detection methods - I just decided to copy-paste the implementation. If they did export this, we could rely on that via dependencies/peerDependencies.
It's a shame hook related rules live in a separate package.
3adeaa0
to
5906897
Compare
As the component detection in various patterns is tricky I think this rule should be run with |
Please mark this PR as ready for review when you're confident in the results, and we can land it. |
…onents inside components
5906897
to
a46394b
Compare
Final testing is now complete. I tested this against ~550 repositories. Fixed false positives of three rare minor cases. I'm confident to ship this now @ljharb. There are two false positive cases remaining which I'm unable to fix for now. These are caused by /* TODO These minor cases are currently falsely marked due to component detection
{
code: `
function ParentComponent() {
const _renderHeader = () => <div />;
return <div>{_renderHeader()}</div>;
}
`
},
{
// https://github.com/emotion-js/emotion/blob/a89d4257b0246a1640a99f77838e5edad4ec4386/packages/jest/test/react-enzyme.test.js#L26-L28
code: `
const testCases = {
basic: {
render() {
const Component = () => <div />;
return <div />;
}
}
}
`
},
*/ |
a46394b
to
7b35ee7
Compare
Fixes #2749.
This is my first time playing with AST. Feel free to guide me in any way.