create a babel plugin to make the displayName a little better

[kentcdodds]

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:

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]

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

[bernard-lin]

Is this still available?

[kentcdodds]

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

[bernard-lin]

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

[bernard-lin]

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]

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.

[bernard-lin]

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]

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 👍

[bernard-lin]

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]

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]

Sounds good! Thanks 😄

[bernard-lin]

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 👍

[bernard-lin]

[kentcdodds]

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