> Speaking of writing javascript instead of JSX, I'm a big fan of the hyperscript approach

Speaking of writing JS instead of JSX or your example, I like the vanjs.org approach:

    const Hello = () => div(
      p("Hello"),
      ul(
        li("World"),
        li(a({href: "https://vanjs.org/"}, "VanJS")),
      ),
    )
    van.add(document.body, Hello())

JSX was such a breath of fresh air after having written and maintained apps which used both of these formats for years (and also having written a library which supported both of them for reusing the same templates on the server and in the browser) - it's the commas! I'm glad it's everywhere now.

But that was also back in the days when trailing commas at the end could break things, JavaScript editor support was relatively poor, and tooling wasn't where it is now (knowing your code is once again valid because the autoformatter just kicked in).

Since we're sharing HTML in JS syntaxes. Don't forget JS tagged template literals like https://jsr.io/@mastrojs/mastro/doc/~/html

Mastro looks like what I do for my offline-first, rendered from Service Workers. I just compose html template string literals and stream them back to the front end. The lib I use for HTML is a bit more powerful though. It is a very elegant way to program.

https://github.com/jon49/Soccer

Thanks, this one? https://github.com/jon49/html-template-tag-async Looks very similar indeed! What makes it "more powerful" than Mastro's html template?

This looks like what JSX compiles into. You can do the same (or similar) with React by using `React.createElement` instead of `m` (or just alias it) so you don't need JSX.

Your example template and the others here are almost jsx after it's compiled (handwritten below). This jsx discussion seems more about removing the compile step, which you can do with https://github.com/developit/htm

    import { createElement as m } from "your-jsx-compatible-library";
    
    var ListComponent = () => {
      let count = 0, selected = null;
      return {
        view: ({ attrs: { items }}) =>
          m("div", null,
            m("p", null, "Clicked: " + count + " times"),
            m("ul", null, items.map((item) =>
              m("li", {
                onclick: () => { count++; selected = item; },
                style: { cursor: "pointer", color: item === selected ? "blue" : "black" },
              }, item)
            )),
            selected && m("p", null, "Selected: " + selected)
          )
      };
    };

Yes, I also like relying on just functions.

I have found aberdeenjs a better dx than hyperscript.

https://aberdeenjs.org/

oh didn't know that one. Been building something that shares the same goals although I can see it is different in many ways. Interesting.

fwiw I think this is worse than Marko in terms of syntax and certainly in terms of readability. For all its flaws, HTML / XML / like syntax is such a good declarative way of writing UI imo. React would not be as popular as it is today were it not for JSX. Like the other reply to your comment said: this is effectively identical to what JSX compiles to assuming your jsxPragma is `m`