Syntax goals

[jfbrennan]

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]

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]

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]

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]

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]

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.