Support different VDOM implementations

[polytypic]

Even now, Karet essentially just works with Preact in addition to React. Karet only uses createElement and Component and assumes that Components support (componentWillReceiveProps (is not strictly required),) componentWillMount, componentWillUnmount, render and forceUpdate methods (React setState is not used). It would be nice to make Karet directly configurable or parameterized with respect to the VDOM library. Suggestions on how to best expose such configurabilty or parameterization are welcome!

[polytypic]

Also support React 16.0.0. I already made a quick hack to see if Karet works with React 16.0.0-alpha.12 and it seemed to just work.

[Ramblurr]

Is there a way to use Karet with preact without having to use preact compat?

[polytypic]

Karet doesn't need Preact combat. Here is a JSBin that uses Karet with Preact.

I have a some work I'd like to complete on Partial Lenses, but after that I'll look into making a new version of Karet with an attempt to make it more easily parameterized with respect to the VDOM implementation.

[Ramblurr]

Thanks @polytypic !

I'm considering calmm for one project I'm working on that has a requirement not to use a transpiler, which means I can't use JSX. Luckily I'm only targeting the latest gen browsers.

I've had some great success with hyperx which replaces JSX with template literals.

I created a minimal working example of Karet / Calmm + Preact + hyperx that doesn't require babel/JSX. Pretty cool!

The only hacky bit is the window.React = window.preact after the preact import. I'm not sure how to put this into a bundle in a nice way. It needs to run before Karet is loaded, otherwise Karet fails to load.

You might want to check out hyperx when it comes to parameterizing the vdom impl. It "works with virtual-dom, react, hyperscript, or any DOM builder with a hyperscript-style API: h(tagName, attrs, children)."

[polytypic]

I think some of the bundlers allow you to rename or alias packages. One way to parameterize Karet might be by relying on such a renaming technique. I'm not sure yet how easily/well that would work.

Thanks for the parameterizing tip. I haven't yet settled on any specific way to do that. Note that the approach taken by hyperx, namely turning the module into a function, has the problem that it makes dead code elimination difficult. Specifically, in Karet, there is more than one export and not all of the exports are necessarily always used. If Karet is turned into a single function that returns an object, dead code elimination of unused Karet parts becomes more difficult (by which I mean that none of the popular/general purpose alternatives is able to do it and likely will not be able to do it any time soon).

[polytypic]

BTW, I recently simply used the createElement function named as h in a project where there was no transpiler or JSX. It wasn't a particularly large/complex UI, but I found the approach usable.