Emotion: Support for primitive React interfaces

[nitin42]

I was experimenting with the primitive React interfaces and made a little hack using emotion api.
With this, we will be able to style and render the components (Image, View, Text and Touchable) with emotion across different targets.

I've made one demo showing the usage of View, Text and StyleSheet.create() with emotion -

Usage with Image component

Let me know what you think @tkh44 😄

• emotion version: 5.2.0
• react version: 15.6.1

Relevant code.

What you did:

What happened:

Reproduction:

Problem description:

Suggested solution:

[tkh44]

Wow! That's really neat and something I've been wanting to do. I would love to see the code you have going on for this in a PR or if you want to make a library we can add a section in the readme and link it.

Cool stuff!

[nitin42]

I was thinking of a PR (though I am experimenting and will make it more stable). Let me know what you think 😄

[tkh44]

Don't worry if it's not stable or anything. The code itself is not that important until you hit the review button or check the code complete box 😄 If you do a PR early you can get some immediate feedback and encouragement 👍

[nitin42]

Cool, I will go ahead and work on a PR!

[nitin42]

Seems like the global styled doesn't accept the primitives. I was appending ['Image', 'View', 'Text', 'Touchable'] aliases to styled but it's not working. I tried this with glamorous, working 🤔

[tkh44]

Its going to be tricky because we convert the glamorous api to our api with babel.

styled.div(...)

becomes

styled('div', classes, vars, content)

[tkh44]

It actually should just work now that I'm thinking about it

styled.Image should get converted to styled(Image, ...)

[nitin42]

It's working for glamorous because of the glamorousComponentFactory (I assigned the aliases with the glamorous constructor) may be !?

[nitin42]

Here is the thing, I verified the tags with the aliases (Text, View, Image and Touchable) in file src/react.js and took a snapshot by running the tests. This is the snapshot I received -

<div
  className="css-StyledView-ijh7uz-ersp6n css-StyledView-ijh7uz rn-alignItems-1oszu61 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim"
>
  hello world
</div>

with this

  test('primitives', () => {
    const StyledView = styled.View`font-size: 12px;`

    const tree = renderer.create(<StyledView>hello world</StyledView>).toJSON()

    expect(tree).toMatchSnapshotWithEmotion()
  });

Finally, got it working 🎉 !!

If you want I can create a PR for this!

[nitin42]

Already implemented ?

[paul-sachs]

@tkh44 @nitin42 What's the status of this issue? Trying to choose between Glamorous and emotion and I really like the react-primitives support for the purpose of using react-sketchapp (to sync with designers)

[nitin42]

Ahn... I started working on this but ended up with same implementation, similar to glamorous-native. Still confused !? Do you have any ideas how this can be expanded into a separate package for usage with React Native?

[nitin42]

I started working on this but ended up with same implementation, similar to glamorous-native

Due to which, emotion-primitives also ended up being glamorous-primitives, which we don't want!

[DavideDaniel]

@nitin42 where's your work so far on this.. we are also about to take a crack at react-native implementation and I wanna make sure we build from your findings so far

[nitin42]

Hey there,

Sorry, I've been busy lately with maintaining my projects, giving job interviews and busy with some other personal work.

I'll start sharing my work on emotion-primitives soon with a PR. If possible, I'll also share some of my initial work on emotion-native with which we'll be able to style and render components with emotion on mobile with react-native.

[nitin42]

In order to render the styles on Native (and may be on Sketch), we will need to tweak create-emotion-styled. Right now, if you use react-primitives with react-emotion, you'll get an error -

TypeError: MOBoxObject is not constructor

This error occurs when evaluating new Proxy(_createStyled, { get: _get}) in emotion. I am still new to the emotion's core codebase, design decisions and I just know about the high level APIs that emotion exposes.

But I'll be happy to work on adding support for react native.

[mitchellhamilton]

Closed via #658