jQuery's extend method ($.extend) is treated as a styled component

[evankim390]

Hi Igor, thanks for creating this package - overall it works great and the code is well written.

I'm trying to use this in my team's project, but I noticed that instances of jQuery's $.extend are treated as styled components and get expanded to $.extend.withConfig. I believe this is due to the isValidComponentName method in createTransformer.ts, which checks eligibility based on whether the first letter of the component name is a capital one. In my case, '$' === '$'.toUpperCase() which is causing the issue. To verify, I changed the isValidComponentName method to return name[0] === name[0].toUpperCase() && name !== "$";, which fixes the problem, but isn't a great solution. This will also be problematic in other popular libraries with a single character namespace like lodash _.extend.

I'm not sure what direction you'd like to take here, but one choice is to have a new option identifierExcludes which takes an array of identifiers to ignore.

createTransformer({
  identifierExcludes: ['$', '_']
});

What are your thoughts? Happy to work with you to get a patch in if you're short on time.

[Igorbek]

Thank you for reporting @evankim390 !
I've fixed this by improving detecting of component names. Previously it incorrectly detected _ and $ as component names. Please see #34 (test case) if it is what you need.
I'll publish an updated package later today.

[evankim390]

LGTM, thank you!

[Igorbek]

The fix is in version 1.3.0 has been published.

[Bdthomson]

I am running into the exact same issue with Backbone views such as this one:

MyView.extend({
...
})

produces

TypeError: MyView.extend.withConfig is not a function

Edit:
.extend was removed from styled-components in v4 (styled-components/styled-components#1908), is it possible to remove support for it in this plugin as well so you no longer have to maintain that transformation?

Put up a preliminary PR here - #47.