Comments (14)
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:
(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.
Related Issues (20)
- Sandbox
- Still maintained? HOT 1
- Hook to update theme HOT 3
- Codesandbox sample for theming not found
- Default theme HOT 2
- Theme nesting above 2
- Theme callback called twice
- Support wrapped component as render function HOT 1
- Upgrade brcast to version ^3 HOT 3
- Update dependencies to support [email protected] HOT 21
- multiple react versions ? HOT 3
- Optional props renaming? HOT 1
- Combine themes with createTheme HOT 1
- React Warning when changing theme HOT 5
- Update Playground demo to CodeSandbox HOT 2
- ThemeProvider is not working with TypeScript HOT 2
- Unable to pass properties to component extending ThemeProviderProps HOT 5
- codesandbox example is 404ing HOT 2
- Please Add demo HOT 1
- Color scheme?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from theming.