How is this different from lit-html? https://github.com/Polymer/lit-html
lit-html can't be used server side.
Hyperscript Tagged Markup: JSX alternative using standard tagged templates
41–50 of 93 posts
Re: Hyperscript Tagged Markup: JSX alternative using standard tagged templates
#42The nice thing about React, vs others like Vue and Angular, is that we've learned not to write code in strings. You'd think this would be a fundamental law of software engineering, but we keep seeing things like v-bind:id="'list-' + id" or or this. Writing code, not strings, means you can do everything to it that you can do to code. You can type check code. You can lint it. You can optimize it, compile it, validate i…
> Writing code, not strings, means you can do everything to it that you can do to code. These are tagged templates, not strings. They work as code at runtime, and it already has support to optimize it, compile it, etc. This is JS all the way down. And spankalee mentioned below they're adding typescript support to type check the very similar lit-html, so that's coming too. > That's why I like JSX, it's Javascript all…
> These are tagged templates, not strings. They work as code at runtime, and it already has support to optimize it, compile it, etc.
Optimize, compile etc. what?
f`string` is literally a function call f("string"). What exactly are you "compiling and optimizing"?
Re: Hyperscript Tagged Markup: JSX alternative using standard tagged templates
#43This 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).
JSX is only type-checked because someone wrote a type-checker for 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.
Well, you can skip JSX, and write functions only, and you'll have full support. https://reactjs.org/docs/react-without-jsx.html It's functions all the way down, after all.
How do you write a type checker for something that is a string (HTM, lit-html)?
Re: Hyperscript Tagged Markup: JSX alternative using standard tagged templates
#44How is this different from lit-html? https://github.com/Polymer/lit-html
lit-html can't be used server side.
The original project that google ripped off can do SSR: https://github.com/WebReflection/viperHTML
Re: Hyperscript Tagged Markup: JSX alternative using standard tagged templates
#45IMHO the name choice (htm) is really bad.
We've arrived at the point where the majority of developers have never seen a .htm file!
Re: Hyperscript Tagged Markup: JSX alternative using standard tagged templates
#46Earlier quoted context omitted.
JSX is only type-checked because someone wrote a type-checker for 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.
Well, you can skip JSX, and write functions only, and you'll have full support. https://reactjs.org/docs/react-without-jsx.html It's functions all the way down, after all. How do you write a type checker for something that is a string (HTM, lit-html)?
[deleted]
Re: Hyperscript Tagged Markup: JSX alternative using standard tagged templates
#47I’ve written tooling to support lit-html and styled-components in editors. Template strings are sort of nice to write but complete pain to support in editors. They are just like a macro language, so you end up with stuff like: ` ... ` which is not possible in jsx. Even just detecting syntax errors is a pain Obviously if deciding between making life easy for editor implementers or making life easier for coders, the co…
Thanks for all your work on the lit-html plugin!
I think though that the concern here is a little misplaced given the constraints that HTM and lit-html work under - which is that the template strings themselves, without the values, have to be well-formed because they're passed to the HTML parser without values.
In HTM, `...` is not possible to interpret as a possibly self-closing tag because self-closing tags are expanded before values are written into VDOM.
In lit-html `` is not allowed at all. So we know what the tag name will be, and what attributes and properties are bound. The same amount of type-checking is possible as with JSX.
Re: Hyperscript Tagged Markup: JSX alternative using standard tagged templates
#48Earlier quoted context omitted.
JSX is only type-checked because someone wrote a type-checker for 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.
Well, you can skip JSX, and write functions only, and you'll have full support. https://reactjs.org/docs/react-without-jsx.html It's functions all the way down, after all. How do you write a type checker for something that is a string (HTM, lit-html)?
You parse the string literal, just like you parse the string that is the contents of a JavaScript file.
Re: Hyperscript Tagged Markup: JSX alternative using standard tagged templates
#49Earlier quoted context omitted.
> Writing code, not strings, means you can do everything to it that you can do to code. These are tagged templates, not strings. They work as code at runtime, and it already has support to optimize it, compile it, etc. This is JS all the way down. And spankalee mentioned below they're adding typescript support to type check the very similar lit-html, so that's coming too. > That's why I like JSX, it's Javascript all…
+1. It's all strings (of source code) in the end. It's just a matter of how well the tools support those strings. There exists a medium-sized ecosystem of tools which supports static checks on strings inside angle brackets, a la JSX. There is a smaller-but-growing ecosystem of tools that supports static checks on strings inside backticks, a la HTM/lit-html/etc. There's no fundamental difference here.
The fundamental difference is what you have in the end. With JSX you have function calls (JSX is a very thin DSL after all).
With tagged literals you end up with runtime string parsing and concatenation.
Re: Hyperscript Tagged Markup: JSX alternative using standard tagged templates
#50Earlier quoted context omitted.
Well, you can skip JSX, and write functions only, and you'll have full support. https://reactjs.org/docs/react-without-jsx.html It's functions all the way down, after all. How do you write a type checker for something that is a string (HTM, lit-html)?
You parse the string literal, just like you parse the string that is the contents of a JavaScript file.
Yeah, I'll let Javascript engines parse and convert my Javascript to bytecode for me. It's definitely not the same as manually parsing strings at runtime. And equating the two is disingenuous at best