What I really want are kotlin style builders or F# style computation expressions.

An oxfmt plugin would be appreciated!

Also the syntactic rules around control flow within elements/literals/identifiers seem a bit inconsistent. Some things require curly braces, others don't.

By the way you can probably implement this to 90% without needing a compilation step for React. Just track what elements get created by react factory functions during the function component execution (similar to how hooks work), and treat any that weren't passed as children to another as implicit returns. This only breaks when they're used verbatim in expressions, but this library doesn't allow doing that without a special wrapper tag either. A library approach should probably add a lint rule to disallow it.

The only thing you can't implement as a library is some of the syntactic sugar that allows one to directly put control flow within elements without wrapping the thing in an IIFE.

Overall a bit too much magic for my taste. The style stuff is nice, but I'd prefer a library approach for that in a react app as well.

Finally here's something with rather strange output:

    export component Test() {
      <div>{Date.now()}</div>

      if (Math.random() > 0.5) {
          return;
      }

      <style> div { color: 'red' } </style>
    }

    const Test__static1 = <div className="tsrx-vhi6ss">{Date.now()}</div>;

    export function Test() {
        if (Math.random() > 0.5) {
            return <div className="tsrx-vhi6ss">{Date.now()}</div>;
        }

        return Test__static1;
    }

    /* CSS */
    div.tsrx-vhi6ss {
        color: "red"
    }

I'm not sure how much of that is intended, and how much is a bug.