Add support to limit which components this applies to

[TotalTechGeek]

Hi, and I'm happy to make these contributions via PR, but I wanted to create an issue to get sign-off,

I'd love some configuration options to have stricter control over what components this plugin affects,

In order of ascending preference:

Namely:

• Option to pass in a Regex / Function that decides if the component's name matches (using node.id.name). Potentially if it's a function, it could return a string to programatically generate the component display name (I personally do not need this)
• Option to decide which types of components should be injected into. (Class-Based, Var Declaration Based, etc)
• Option to decide if this only applies to components that are exported on the top level of a file.

I would've suggested a folder / file restriction, but I realize that's better served by Webpack already :P

[tmcneal]

Hey - thanks for opening an issue! My first thought is to allow restricting based a list of filename / folder globs. There's already something hard-coded that ignores node_modules (https://github.com/runreflect/webpack-react-component-name/blob/master/index.js#L40) so that could be a natural point to add this functionality.

Would that work for your use-case?

[TotalTechGeek]

It partially serves it; we could potentially adjust our coding approaches to accommodate that configuration.

I think it'd be pretty easy to introduce the first two bullets, though the third bullet is a little more complex because the acorn traversal doesn't have a simple "Oh, I only want to go 1 layer deep" type flag (there might be a different method call, I'll admit I'm unfamiliar with Acorn).

[tmcneal]

Got it. Could you describe your use-case? Particularly I'm curious about what components you'd like included, and which components should be ignored in your specific case.

[TotalTechGeek]

One of the codebases I'm working on is a bit of a cesspool; it was ported over from Angular into class-based components that weren't written particularly well.

During a transition period, some of the components were written to be function based, and they had component declarations nested within other components, which is generally bad practice (and in some cases, caused issues for this plugin when mixed with minification).

I plan to gather more information to help prevent the issue where it injected the code into the wrong location, but for our use-case I'd like to be able to say:

"I only want to include functional components, and only the ones exported from the top level of the file"

For my use-case, I'm not as interested in appending displayNames to the nested components or class-based ones.

If you think it'd be useful, I'm happy to try to make the contribution & write appropriate test cases, though if not, I've made some tweaks with patch-package to our local project for now to keep things going.

[tmcneal]

Thank you for providing more information. Your use-case makes a lot of sense. I feel like what would be most generally applicable here would be file/directory-based exclusion and/or inclusion rules. I'd gladly merge a PR that includes the ability for users to specify those inclusion / exclusion rules as globs.