That still leaves the door open for XSS. A good (proper?) (e?)DSL would have the things that make the DOM as keywords in the language, and then we could ensure, that things which should merely be a text, are really only rendered as text, not injected DOM nodes. And the next failure is, that this DSL that is jsx needs to rename HTML attributes, because of overlap with JS keywords like "class". It lacks the awareness of context and therefore is not truly like HTML, no matter how hard it tries to be. It also comes with hacks like "<>" or fragment.
Overall it is usable, but not a particularly well made DSL. It might be as good as it gets with JS.
For inspiration check SXML in various lisps, which comes with immunity to XSS and which works just like the rest of the language, can be structurally pattern matched upon and iterated through, like a proper tree structure.
No.
> That still leaves the door open for XSS.
The door for that in React is called `dangerouslySetInnerHTML`, but it's extremely rarely used.
> jsx needs to rename HTML attributes, because of overlap with JS keywords like "class"
That's not really inherent to JSX, just React's use of it. SolidJS, for example, uses `class` instead. But in any case – JSX didn't make up those names. Those are the property names on JavaScript's DOM classes. The fact that there's confusion between "attributes" and "properties" is pretty baked-in to the Web platform, even causing confusion in standard Web Components. Every DOM library and framework (even jQuery) has needed to decide whether it's operating on properties or attributes.
const div = document.createElement('div');
div.className = 'foo';
The DOM has the same concept, DocumentFragment. How else would you represent e.g. "two sibling nodes with no parent node"?
> It lacks the awareness of context and therefore is not truly like HTML.
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.
> can be structurally pattern matched upon and iterated through, like a proper tree structure.
You are literally describing the output of JSX. Glad you like it ;)
No.
> That still leaves the door open for XSS.
The door for that in React is called `dangerouslySetInnerHTML`, but it's extremely rarely used.
> jsx needs to rename HTML attributes, because of overlap with JS keywords like "class"
That's not really inherent to JSX, just React's use of it. SolidJS, for example, uses `class` instead. But in any case – JSX didn't make up those names. Those are the property names on JavaScript's DOM classes. The fact that there's confusion between "attributes" and "properties" is pretty baked-in to the Web platform, even causing confusion in standard Web Components. Every DOM library and framework (even jQuery) has needed to decide whether it's operating on properties or attributes.
> It also comes with hacks like "<>" or fragment.The DOM has the same concept, DocumentFragment. How else would you represent e.g. "two sibling nodes with no parent node"?
> It lacks the awareness of context and therefore is not truly like HTML.
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.
> can be structurally pattern matched upon and iterated through, like a proper tree structure.
You are literally describing the output of JSX. Glad you like it ;)