eslint-plugin-react-native icon indicating copy to clipboard operation
eslint-plugin-react-native copied to clipboard

Remove dependency on @babel/traverse to fix linting issues

Open hsource opened this issue 3 years ago • 2 comments

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 Text or 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

hsource avatar Apr 21 '22 22:04 hsource

Kudos, SonarCloud Quality Gate passed!    Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 1 Code Smell

No Coverage information No Coverage information
0.0% 0.0% Duplication

sonarqubecloud[bot] avatar Apr 21 '22 22:04 sonarqubecloud[bot]

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.

JLHwung avatar Jun 15 '22 14:06 JLHwung

@Intellicode I think this quick PR should resolve #270, which has seen a lot of activity. Can you help take a look?

hsource avatar Sep 26 '22 16:09 hsource

Merged into https://github.com/peterpme/eslint-plugin-react-native

peterpme avatar Jan 18 '23 19:01 peterpme

Merged into https://github.com/peterpme/eslint-plugin-react-native

peterpme avatar Jan 18 '23 19:01 peterpme

Thanks for the fix @hsource, sorry for the late review, life got in the way

Intellicode avatar Sep 06 '23 07:09 Intellicode

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

peterpme avatar Sep 06 '23 16:09 peterpme