search

developit / htm

Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support.
Apache License 2.0
8.73k stars 170 forks source link

Syntax goals #259

Closed jfbrennan closed 7 months ago

jfbrennan commented 7 months ago

I'm new to htm. I like it. I chose it because it can be used with Preact in a no-build environment, i.e. our micro-frontend app will use https://esm.sh/htm/preact/standalone at runtime.

However, I'm a bit confused as to whether htm wants to be more like HTML or JSX. The docs say JSX-like, but there's differences...and those differences seem to more align with vanilla HTML and JavaScript. Well, sort of.

I see support for class instead of className, which is great and I understand that's more of a Preact thing, but then I see onClick used here in the docs instead of onclick. Both work, and I prefer the HTML style, but it feels like htm doesn't know what it wants to be. This is made more confusing because void elements like <img> don't work. You apparently have to self-close them as if this were XML. But then non-void elements like <div></div> can be self-closed, which is not valid HTML.

Are there docs of some kind that go into this in more detail? I feel like I'm gonna keep finding more gotchas like when you first start using JSX. Can't a dev just write some HTML anymore😭

dy commented 7 months ago

HTM is for JSX and is highly optimized for that. It's recommended you avoid HTML quirks and stick to minimal JSX syntax. If you still need HTML you can have a look at xhtm.

rschristian commented 7 months ago

It's very much an attempt to provide a similar experience to authoring JSX in plain JS. A few HTML attributes are encouraged, but in general, the idea is to use JS properties.

Can't a dev just write some HTML anymore

You absolutely can. I'm not sure HTM is really the best at facilitating that, but you can get a pretty nice experience out of template literals & .innerHTML these days. Certainly are security risks, but, hard to beat stringified HTML if that's what you're after.

jfbrennan commented 7 months ago

I'm looking for templates that work with Preact and support valid HTML, e.g. class, onclick, <img>. Very much what the original goal of HTM apparently is/was: something that "felt natural for use untranspiled in the browser."

If it is capable of other proprietary stuff like <//> that's cool too, but I want to write valid HTML without having to think twice about it. HTM seems close enough, XHTM shared by @dy looks like it is maybe even closer...docs just don't say enough though.

Anyway, thanks for the replies.

rschristian commented 7 months ago

If you need actual HTML, __dangerouslySetInnerHTML might be the solution.

The 'X' in JSX is XML. HTM is certainly closer to HTML than standard JSX, but if you want actual HTML, you're left with strings & reassembling yourself or using __dangerouslySetInnerHTML to pass these strings to Preact.

jfbrennan commented 7 months ago

No I don't need that. I'm all good, I was just under the impression that HTM supported 100% valid HTML syntax. It's closer to HTML than JSX, like you said, and that's really nice, I just wish it went all the way.