eslint-plugin-react-native
eslint-plugin-react-native copied to clipboard
Remove dependency on @babel/traverse to fix linting issues
Motivation
Fixes #270. babel-traverse expects that it's passed an entire tree that spans to the top of the program. eslint does not guarantee that, which causes crashes when parsing some programs (see #270 for many examples).
Fix
- Don't rely on the external library. Instead, just iterate through the node ourselves to get the full name
- Side fix: Add support so that even nested components inside of a
Textor other allowed components are allowed. Nested text components can safely be used to add inline bold/color/other styling
Testing
Added automated test based on repro case from #270: https://github.com/Intellicode/eslint-plugin-react-native/issues/270#issuecomment-897766305
Kudos, SonarCloud Quality Gate passed! 
0 Bugs
0 Vulnerabilities
0 Security Hotspots
1 Code Smell
No Coverage information
0.0% Duplication
Babel's maintainer here.
https://github.com/Intellicode/eslint-plugin-react-native/blob/4b7149ea7019d288d6318dfabb05461f3134a975/lib/rules/no-raw-text.js#L52-L53
I am worried by the usage of @babel/traverse here:
- we are passing the ESLint scope to Babel's traverse.
- we are not respecting the ESLint AST shape, instead we treat the AST as if was parsed from Babel. This works from the sheer luck that Babel JSX AST is almost same as the one constructed by ESLint.
In #270, Babel is constructing a new scope when it visits a Function () => {} in the JSXOpeningElement <foo bar={() => {}} />. It should work if the passed scope is created by Babel traverse, so that Babel can find all the way up to the program scope. But since we are passing an ESLint scope, it results to an obscure internal Babel error.
This PR looks good to me. If we want to be future-proof, we can get the visitorKeys of JSXOpeningElement from context.getSourceCode().visitorKeys and traverse accordingly.
@Intellicode I think this quick PR should resolve #270, which has seen a lot of activity. Can you help take a look?
Merged into https://github.com/peterpme/eslint-plugin-react-native
Merged into https://github.com/peterpme/eslint-plugin-react-native
Thanks for the fix @hsource, sorry for the late review, life got in the way
Thank you @Intellicode!
I saw your README. I would be happy to take this over and maintain it. I work closely with React Native & the Expo team and would be honored to be passed the torch