Emotion: Support for Inferno

[rtheone]

• emotion version: 7.2.2
• react version: N/A
• inferno version: 3.9.0

Relevant code + What you did + What happened:

I think I got Inferno pretty much working by substituting:

import { createElement as h } from 'react'

with

import { default as h } from 'inferno-create-element'

in react-emotion/src/index.js, based on what was said in #273. Based on some pretty rudimentary testing, features like static extraction and dynamic props seem to be working okay without any problems.

Inferno, like Preact, has a React-like API and while it doesn't have a createElement method built-in in its core library like Preact does, it does have a small compatibility extension called inferno-create-element. Unfortunately, inferno-create-element has createElement as the default export and not a named export, so unless I'm missing something, support can't be as elegantly accomplished with a rollup alias like with Preact.

Note that the above changes are not needed for inferno-compat, which is a larger compatibility layer where an alias from react to inferno-compat is already recommended and inferno-compat.createElement is implemented, although I guess I haven't tried it myself.

Suggested solution(s):

I guess I could whip up a layer on top of inferno-create-element (module.exports.createElement = require('inferno-create-element')) to fix the issue with exports, but I'm getting an itching feeling there's a nicer solution I lack the wherewithal and know-how to see. There are also solutions that circumvents inferno-create-element by instead using inferno.createVNode explicitly too. Alternatively, more easily, inferno-compat could become the de-facto solution when working with emotion.

[lucat1]

Up. Interested in this

[tkh44]

@LucaT1 check out how the preact-emotion is built with just a rollup config. Maybe something similar would work for inferno.

[lucat1]

It may, but we have to keep in mind that inferno has also external modules for Component, which would make conflicts with the ThemeProvider.

[hronro]

any updates?

[lucat1]

With the v4 of inferno released some days ago, and the recent changes to emotion, which makes it more modular this is getting closer and closer, though you should keep in mind that the great inferno performance is provided by the use of createVNode instead of createElement or h from react. A polyfill to this is inferno-create-element, but using it significantly slows down the creation of styled element. To achieve the best performance some precompilation steps would be needed.

In short: a performant emotion-inferno package can be created with ease in one simple PR, but a performant solution would imply the modification/creation of a babel-plugin.

Sources:
https://github.com/infernojs/inferno/tree/master/packages/inferno#createvnode-package-inferno
https://github.com/infernojs/inferno/tree/master/packages/inferno-create-element
https://github.com/emotion-js/emotion/tree/master/packages/create-emotion-styled

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.