search

Intellicode / eslint-plugin-react-native

React Native plugin for ESLint
MIT License
722 stars 130 forks source link

feat: adding support for object notation components for no-raw-text exclusion rule #247

Closed Debens closed 4 years ago

Debens commented 4 years ago

When building component packages at scale it can be useful to be able to able to use object dot notation to reduce import noise and to increase readability for highly related components.

An example would be for building a opinionated text components form a style build.

Instead of having:

import { Paragraph, ParagraphLarge, ParagraphSmall } from 'your-component-library'

export const Component = ({ children }) => 
<>
    <ParagraphLarge>Header</ParagraphLarge>
    <Paragraph>Detail</Paragraph>
    <ParagraphSmall>{children}</ParagraphSmall>
</>

You could have :

import { Paragraph } from 'your-component-library'

export const Component = ({ children }) => 
<>
    <Paragraph.Large>Header</Paragraph.Large>
    <Paragraph>Detail</Paragraph>
    <Paragraph.Small>{children}</Paragraph.Small>
</>

However, the current skip rules only allow a single JSXIdentifier for the component tags. This PR uses @babel/traverse to find the opening component tag, and from there builds the tag identifier.