Support jsx pragma for custom components

[nandorojo]

I think I know how this could work, but I have to look into the theme ui code to be sure.

The hurdle is that we need to hook into the component, not just pass a raw className prop.

[nandorojo]

https://github.com/emotion-js/emotion/blob/master/packages/babel-plugin-jsx-pragmatic/src/index.js

Babel plugin could be cool too.

[cmaycumber]

This would be a cool feature. I can definitely try to help with this.

I'm not 100% sure how the theme-ui-native repo did it but it seemed like it just wrapped the components with a ThemeProvider. There's was working last time a played around with that repo not sure if that strategy would work for dripsy but it might be worth a shot looking at it.

[nandorojo]

All we would really need to do is wrap the function with createThemedComponent. If that's possible, this should be pretty smooth.

[cmaycumber]

That seems like the move.

On another note is it possible to remove styled-components as a dependency now that we have fresnel? Emotion seems like it's doing most of the heavy lifting style wise as a dependency to theme-ui.

[nandorojo]

https://github.com/emotion-js/emotion/blob/master/packages/core/src/jsx.js (the original emotion file)

[nandorojo]

On another note is it possible to remove styled-components as a dependency now that we have fresnel? Emotion seems like it's doing most of the heavy lifting style wise as a dependency to theme-ui.

Yeah, I believe I removed that as a dependency in the fresnel branch, but if I forgot, let's get rid of that.

[nandorojo]

microsoft/TypeScript#38720 relevant for custom pragmas, heard through: https://devblogs.microsoft.com/typescript/announcing-typescript-4-0-rc/#custom-jsx-factories

[cmaycumber]

I'll try to get a PR for this created with in the next day or two. I think it should be relatively simple. I'll also take a look through that typescript article you sent over.

[nandorojo]

That's great!

I believe the TS article helps with the Fragment. Not sure if you've run into this with theme-ui, but its pragma doesn't let you use <> React fragments which is a pain.

[cmaycumber]

Yeah, I have it's a pain.