Extract abstract bindings about theming HOT 14 OPEN

This is a good pattern. If it's useful to you, preact now exports createElement() (same as h()). That means all the major VDOM libs support { createElement, cloneElement, Component, render } - so your factory could just accept that as an object if it's any easier. I wrote a post about the technique and how you can potentially even use a Webpack loaded to accomplish this too.

from theming.

I am no expert in either Preact or Inferno, but I thought that using preact-compat is actually not the most recommended way to use Preact in general, but rather a quick production-replacement for React apps.

Most likely it's just the different createElement import and some minor changes. Check out how we did it with Fela e.g. the createComponent-HOC:

• Abstract Binding Factory
• React
• Preact

(See how the abstract factory contains all the logic while the actual bindings simply add in the correct APIs)

But I also see @kof's point with different packages for any React lib.

from theming.

Something like this? That would mean, we only ship the abstract factory and the library itself decides what to use?

React

import { createElement, Component } from 'react'

const theming = themingFactory({
  createElement, 
  Component
})

// where theming ships the APIs
const { withTheme, ThemeProvider } = theming

Preact

import { h, Component } from 'preact'

const theming = themingFactory({
  createElement: h, 
  Component
})

// where theming ships the APIs
const { withTheme, ThemeProvider } = theming

(The examples are just for demonstration, might not includes every detail, but shows the idea)

from theming.

What exactly is needed to support preact and inferno out of the box? I think we all want it and if its not too special it might be ok to keep it all here in this repo.

from theming.

Preact has preact-compat, there should be no need for all this preact-* packages. Something goes wrong if every react package willl create preact- and inferno- packages. cc @developit

from theming.

hi @rofrischmann, does abstracting mean that we will have 3 packages, like {react,preact,inferno}-theming?

from theming.

i see, thats neat https://github.com/rofrischmann/fela/blob/master/packages/react-fela/src/createComponent.js

from theming.

@rofrischmann can you help with this? You are already a collaborator on this project.

from theming.

If you’re fine with 3 different packages (themig-* or *-theming where * = react/preact/inferno) I can help here, but after ReactiveConf ofc :p
Could talk there as well

from theming.

What other choices do we have? Can it be a functional way? Like setReactLibrary() or something?

from theming.

Sounds like a good solution! Way better than to produce separate packages or even repositories 😅

from theming.

Well it really depends. If this package is only for library authors, the above example is the best solution by far, but if you want to serve direct end-user as well, separate packages for each library are much better in terms of UX/DX => "install & use".
Thanks to tools like Lerna, managing separate packages is pretty much as if its just one.
But I assume theming should only be used by libs anyways so we can use the factory pattern.

from theming.

I assume we target first of all the lib authors. If we keep react by default, most regular users still don't have to do much. Also using a factory is not the end of the world.

from theming.

Just a note: because preact exports createElement in version 7+, you can do this:

import * as preact from 'preact'
const theming = themingFactory(preact)
const { withTheme, ThemeProvider } = theming

import * as react from 'react'
const theming = themingFactory(react)
const { withTheme, ThemeProvider } = theming

That'll have the added benefit of giving you access to cloneElement() in your factory.

from theming.