What does HackerNews think of htm?
Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support.
The most interesting thing of this one is that uses no custom syntax for js variable, so @attribute something when you must pass an object as props.
https://preactjs.com/guide/v10/getting-started#alternatives-...
The examples in this article are using vanilla template strings to author raw html, but that only misses a couple of nicities JSX has. There are tagged template string libraries like htm[1] that do include some of the few nicities JSX has, but which are actually compatible with the official language.
The backend is entirely written in Rust.
I did some electron apps before, and I have to say, Tauri really feels snappier.
Really? With lit you can create a component that has several top-level elements[1].
EDIT: In fact this works even in react/preact with htm[2], so it's just a limitation of JSX.
[1]: https://lit.dev/playground/#project=W3sibmFtZSI6InNpbXBsZS1n...
Why? Preact is small, fast, and reasonably easy to use. But the main selling point for me was that, together with htm, I don't need any build system a la webpack. No node_modules folder. I just have to load one script (preact + htm bundled), define my components in plain javascript files and import them. Bliss for me.
[1] https://github.com/developit/htm
Edit: Just read that you want drag & drop style UI building, so this might not be for you.
I find typescript useful for libraries, less so for application code.
[0]: https://developer.mozilla.org/
[2]: https://github.com/developit/htm
[3]: https://svelte.dev/
What's great is that:
- I use preact's htm as a renderer [3], which is JSX but as template strings.
- The API is like (p)react but a bit more generalized. I like it.
- The web component concept is great. Especially for mixing server-side rendering and JavaScript-powered components.
That last one IMO is web components killer feature. I can now wrote a mini component and then I tugg it in with the other 99% of my page that is rendered server side.
It means, I'm able to serve my users quickly. I have SEO'd everything too. Cool!
-1: https://github.com/TimDaub/web3-sign-msg
Could you please list the boxes that you were ticking?
For example, how many boxes would the following tick:
- Preact with htm (tiny, looks very similar to ficus) [0]
- LitElement (tiny, very close to native web components) [1]
- Svelte (the darling of many since recently) [2]
[1] - https://lit-element.polymer-project.org/
[2] - https://svelte.dev/
It seems to be 100% compatible with React. It's fast, it's small. And with preact/compat you can use any third party react component.
I'm a particular fan of https://github.com/developit/htm, which is an alternative to JSX that simply uses JS template strings and needs no preprocessor.
https://reactjs.org/docs/add-react-to-a-website.html
Having said that, React is normally used with JSX syntax, which requires a compile step.
You _can_ use it with "raw" `React.createElement()` calls, but that's generally unwieldy and almost no one does that.
However, there's a very neat library called https://github.com/developit/htm , which is an almost-JSX-compatible syntax that uses JS template literal strings, and requires no compile step.
If you need even less bytes, then Preact is also an option (also with htm [1]), and it clocks at around 3k + 400 bytes for htm.
If you're only targeting modern browsers with ES6 support you can even use `import from` statements.
It's just a lightweight, no-build-steps-required library that's similar to React. If you already like using React there's nothing much compelling to make you switch.
I like using it with HTM for a nice alternative to JSX which doesn't need any build steps.
I can't speak on its interaction with TypeScript, I've only used this for simple pages where I want to add some interactivity without involving the rest of the nightmarish JS ecosystem.
It's also possible to use htm with Preact for developing without a bundler if your target users support ES6.
Vue is a great option to combine with server rendered markup (PHP, Python, etc) because it can read the templates directly from the DOM and doesn't need a build step like JSX does.
It's not the only option though. You could also use Preact + Htm (JSX in string templates) which doesn't need a build step either and is much smaller than Vue.
I don't think nesting is possible in the examples in that post. I'm sure there's some way to get it working that I just haven't figured out yet. Maybe you could replace the default template strings with something using tagged template literals (like https://github.com/developit/htm).
You can work around nesting by spinning up new components after the innerHTML assignment, and assigning them with IDs. Here's an example where I've done that:
https://github.com/bryanbraun/music-box-fun/blob/dc899c14adc...
Edit: typos
By the way I just noticed you're the maintainer of lit-html. How does it compare to HTM[1]? They both look like they accomplish the same goal but HTM's implementation looks smaller.
For example, if you prefer to use small wrapper functions like `h(MyComponent)` and `div()`, there's `react-hyperscript-helpers` [0].
More recently, Jason Miller published `htm` [1], which provides near-JSX syntax using ES6 template literals, and no build step required. It appears to be a very viable alternative to JSX in many ways.
It uses template strings instead of requiring a parser, turning your example into something more like:
return htm``;