Extract abstract bindings

[robinweser]

I just thought about replacing the theming helpers in fela with this unified approach. Sadly it only supports React and we have to serve something for Preact and Inferno as well.
(robinweser/fela#302)

What do you think about extracting the abstract parts and compose them to several packages such as React, Preact, Inferno and maybe even more?

[kof]

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.

[kof]

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

[iamstarkov]

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

[robinweser]

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.

[iamstarkov]

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

[developit]

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.

[kof]

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

[robinweser]

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

[kof]

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

[robinweser]

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)

[kof]

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

[robinweser]

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.

[kof]

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.

[developit]

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.