paypal/glamorous

create a babel plugin to make the displayName a little better

kentcdodds opened this issue · 14 comments

kentcdodds commented

Right now if you do:

const MyDiv = glamorous.div()

Then MyDiv.displayName will be glamorous(div) which is not very helpful in the React DevTools:

screen shot 2017-04-07 at 9 46 12 am

babel-preset-react actually has a babel plugin to set the displayName property when you use React.createClass and I think that we could do the same thing here.

So our plugin could basically transform this:

const MyDiv = glamorous.div()

into this:

const MyDiv = glamorous.div()
MyDiv.displayName = 'MyDiv'

Should be a fairly straightforward plugin. If anyone wants to try this out, but hasn't had experience with babel or ASTs, then this may be helpful. Anyone wanna give it a go?

kentcdodds commented

Looks like styletron has a plugin just like this: https://www.npmjs.com/package/babel-plugin-styletron-react (source here)

bernard-lin commented

Is this still available?

  • 👍2
kentcdodds commented

I think so! Let us know if you want it and when you start working on it!

  • 👍1
bernard-lin commented

I'll take it! Never wrote a Babel plugin before so I'll take a look at the resources first

  • 🎉2
bernard-lin commented

Thanks for the video! It was very helpful.

I think I'm starting to get a little closer:
https://astexplorer.net/#/gist/3f1cee21c80acd36e7ea1bdf78bdea98/68444c9f6ec9e55f5b8e4d3512e601687dcfb990

Should I follow the approach in lines 10-12 rather than what I currently have with === on line 13?
Also, where should this eventually go in the repo? In a packages folder somewhere?

kentcdodds commented

Thanks @bernard-lin! This is great! I hope you don't mind, but I forked what you had and fleshed it out a little further to make it more resilient. Now it doesn't matter what you are calling glamorous when you import/require it. Let me know whether this is clear to you: https://astexplorer.net/#/gist/9de3d55412193a726657572525dca333/0031aa83f8d1cba8965902d85a8b57814a8586df

As far as adding this project. If you could actually just make your own repo, write some tests, and publish it yourself, that would be awesome. You may find this handy for that. Let me know if you need any help.

  • 🎉2
bernard-lin commented

This is awesome and very clear; thank you so much! 💯
Is the purpose of the addIdentifiers function on 52-56 to replace 17-19 and 28-30? Or is it supposed to be used elsewhere?

I'll get cracking on the next part 😄

kentcdodds commented

Oh yeah, 😅 I had originally planned on abstracting it a bit but decided it wasn't worth it then forgot to delete the function.

Thanks! I'm excited for this 👍

  • 👍2
bernard-lin commented

Does running "yo babel-plugin" throw an error for you after asking for keywords? I've been trying to debug this but no matter what I keep getting a "description is not defined" error.

If I had to build it from scratch could I use this as an example to follow?

kentcdodds commented

I've never tried that generator. And actually I've never published my own plugin before. If I were to, I'd probably use https://github.com/kentcdodds/generator-kcd-oss but that probably isn't helpful to you because it's kinda specific to my projects... I would probably just follow the template as close as I could :)

Sorry that's not working for you 😦

bernard-lin commented

Sounds good! Thanks 😄

bernard-lin commented

Sorry this has been taking so long! I've had a busy week but back to normal now 😓

It mostly seems to work now - except when import is used instead of require (something about referencePaths being undefined). Will debug more in the morning!

https://www.npmjs.com/package/babel-plugin-glamorous-displayname

Other than that, need to finish writing tests and flushing out the readme and we should be good to go (I think?). Almost there 👍

kentcdodds commented

That's marvelous! Looking forward to hearing updates! Want to add a link to the README?