wavesoft/dot-dom

JSX support?

mindplay-dk opened this issue · 9 comments

mindplay-dk commented

Any chance for JSX support?

I tried adding a JSX-compatible wrapper-function myself, but so far just found new and interesting ways to make the H function explode ;-)

This got me some of the way, but doesn't work for text nodes yet...

/** @jsx make*/

const make = (type, props, ...children) => H(type, props || {}, ...children);

Any particular reason the H function signature doesn't resemble a "normal" virtual DOM factory function?

wavesoft commented

Hello there @mindplay-dk !

Any particular reason the H function signature doesn't resemble a "normal" virtual DOM factory function?

Do you have some reference in mind? I modelled it (as close as it can get in 512 bytes) having react's createElement in mind : https://reactjs.org/docs/react-api.html#createelement

Let me give it a try with JSX myself and I might have some more feedback for you ;)

wavesoft commented

Oh I think I found the issue. JSX uses null if there are no properties defined. This library cannot handle this. It can do undefined, {} or even [] just fine, but null will cause issues.

  • 👍1
mindplay-dk commented

JSX uses null if there are no properties defined. This library cannot handle this.

This should be on the list of caveats maybe?

If supporting JSX is a non-goal, maybe this should be stated in the documentation as well? Many people will see the JSX-like H factory function and the word "VDOM", and will assume it'll work, as it does with almost any library of this type.

I expect JSX-support is just a simple one-liner though - even if the library doesn't support it, perhaps an example wrapper-function could be added to the documentation?

  • 👍2
wavesoft commented

This should be on the list of caveats maybe?

For now, totally, but I would also like to somehow support it...

JSX was not my first priority so I never tested it to be honest... I based my initial API on React when I started, but due to the size constraints I decided to sacrifice some of the features. (Don't forget that the manifesto of this library is to never exceed the 512 bytes in size 🙂)

  • 👍2
wavesoft commented

The devel/0.3.1 branch should now also support null 💪

  • 🎉1
mindplay-dk commented

Wow. This just works?! With one line of code?! 😂

https://codesandbox.io/s/jsx-with-dot-dom-jjdzy

Props, state, state-updates, updates to a parent component, everything just works.

That's CRAZY cool.

I think maybe now you can put this JSX one-liner in the docs and show off JSX support? 😀

  • 👍2
wavesoft commented

Technically you should be able to do just

/** @jsx H */
mindplay-dk commented

Apparently, yep. (I don't recall why I thought a function was necessary before...)

mindplay-dk commented

Okay, so I recall now, #31 for one is something I wanted to address - as well as support for other literals like true and false.

So I would maybe hold off on announcing JSX support, as it's probably going to be a bit too confusing for someone to use in practice right now.