This is a neat syntax, but it doesn’t seem at all typesafe (typesafety was the main benefit of JSX over the various string templates that came before it).
It's completely possible to write a type-checker for HTML templates like lit-html. In TypeScript we even have access to third-party extensible interfaces for all the elements with the HTMLElementTagNameMap, so we can check buildings to properties.
We'll be working on a lit-html type-checker for TypeScript early next year.
How do you write a type checker for something that is a string (HTM, lit-html)?
At runtime these templates are parsed by the browser's built-in HTML parser.
True. Still, it's functions and regular JS, not strings manually processed at runtime
> At runtime these templates are parsed by the browser's built-in HTML parser.
It's not the first time I've seen this ... bullshit (no other word for it). Where does it come from?
The only time it's parsed by browser's built-in HTML parser is when you manually call something like `element.innerHtml = "you string that you manually assembled in your function at runtime"`.
The browser has no idea what is contained in your tagged string. Which is painfully obvious when you actually look at the implementations of HTM: https://github.com/developit/htm/blob/master/src/index.mjs#L... or lit-html: https://github.com/Polymer/lit-html/blob/master/src/lib/temp...
Do you have a source for that?
Before JSX came out, there were tons of templating systems that let you embed HTMLish things in JS: Handlebars, Mustache, EJS, Pug, Angular templates.
JSX’s big innovation was taking the way XHP promoted HTML to first class syntax and applying it to JS. The big difference between that and the template systems that came before it is JSX is statically analyzable (by your type checker, or by other tools), which means you can scale it to FB scale.
You're right that when it came out it's main innovation was separation of concerns and composability, but types or static analysis were not part of the value proposition at the time.
On the other hand, both TypeScript and Flow support type checking for JSX attributes (and child elements to some extent)