[zelphirkalt]

Ah, seems a few things either changed in the meantime, while I have not dealt with JSX, or I remembered it wrongly. I thought the syntax was something like the following, which would be a special kind of string:

    return `
        <p>here some stuff <CustomComponent>looking</CustomComponent> almost like HTML, but not really</p>
    `

> On the contrary, I'd argue it has way more context. It knows, and will warn you, if you try to do any DOM element nesting that the HTML spec forbids, for example.

I was relating to naming it "className" instead of "class". If it was aware, it would know, that "class" is safe to use here, because it is inside some JSX syntax, not a class definition.

> You are literally describing the output of JSX. Glad you like it ;)

But that's the thing: I don't want to pattern match on the _output_ of JSX. I want to pattern match on the stuff while I am constructing it, shaping it, before I generate any HTML output. But perhaps, if you can show an example, I would know better what you mean. What I mean is something along the lines of:

    expr = <div><h1>heading</h1><p>foo</p></div>
    return match expr {
        <div>...any<p>...word</p></div>: word;
        _: "no word";
    }

The fragment "element" seems unnecessary in general. Just make

    return (
        <p></p>
        <p></p>
        <p></p>
    )

return a list of 3 items, ready to be spliced into another template with some syntax:

    const my_result_list = that_other_function();
    return <div>@my_result_list</div>;

which results in a div with 3 paragraphs. Here I am using "@" as example, but probably in JS land one would use "...". At no point do I need some <> or so.