Repository navigation
Extract abstract bindings #11
Description
Activity
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.
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
hi @rofrischmann, does abstracting mean that we will have 3 packages, like
{react,preact,inferno}-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
createElementimport and some minor changes. Check out how we did it with Fela e.g. thecreateComponent-HOC:(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.
Reacted by Jason MillerThis is a good pattern. If it's useful to you,
preactnow exportscreateElement()(same ash()). 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.Reacted by Oleg Isonen, Robin Raya Weser and Prithvi Raju M@rofrischmann can you help with this? You are already a collaborator on this project.
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 wellWhat other choices do we have? Can it be a functional way? Like
setReactLibrary()or something?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)
Reacted by Oleg IsonenSounds like a good solution! Way better than to produce separate packages or even repositories 😅
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.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.
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.
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?