Htm

Features

- **Mixed static + dynamic property values are back!** (93)

This was something that got lost during transition to HTM 2, but now it's making a comeback! Multiple joined static and dynamic values get concatenated together as strings. So this works now:

js
html`<a href="/pages/${id}" />`;
// ...or even:
html`<Route path=/${base}/users/me />`;


- **Support HTML-style comments** (84)

Another thing lost in the transition to HTM 2. Now everything between comment delimiters `<!--` and `-->` gets ignored during parsing:

js
html`
<div>
<!-- Everything between comment delimiters
gets ignored, including <tags>,
newlines and ${"variables"} -->
</div>
`;


- **Convert JSX fragments in `babel-plugin-transform-jsx-to-htm`** (85, thanks blikblum!)

`babel-plugin-transform-jsx-to-htm` now understands `React.Fragment` elements in the JSX input:

jsx
<React.Fragment>
<div>Foo</div>
<div>Bar</div>
</React.Fragment>


The plugin transforms fragments to `htm` expressions with multiple root elements - look how clean the output is:

js
html`<div>Foo</div><div>Bar</div>`;


- **Support for native Object Spread in `babel-plugin-htm`** (99)

Setting the plugin option `useNativeSpread` to `true` makes the transformed output use [object spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntaxSpread_in_object_literals) instead of `Object.assign` calls. If you're [targeting modern browsers](https://jasonformat.com/modern-script-loading/) that support spread, this option can help reduce your bundle size!

js
// input:
html`<Link href="/1" ...${props} />`;

// output:
h(Link, { href: "/1", ...props });


Fixes

- Allow slashes in unquoted property values (unless immediately followed by >) (112)
- Bring `babel-plugin-transform-jsx-to-htm`'s tag name handling closer to JSX (92)
- Properly transform dotted component names in `babel-plugin-transform-jsx-to-htm` (98)
- Fix how `babel-plugin-htm` handles text (and other non-element) roots (105)
- Remove `babel-plugin-transform-jsx-to-htm`'s package.json module field (87, thanks blikblum!)
- Remove Preact from `htm`'s peerDependencies to avoid warnings (102)

Documentation

- Clarify `htm` usage with integrations (101, thanks robdodson!)

A couple of building and publishing related fixes:
* Fix `htm/mini` build commands, it's now as mini as it is supposed to be.
* Fix package.json so that `htm/react` gets included to the published package.

jviide rewrote htm again and again until it was perfect. as a result, it is now perfect.

🗜New `babel-plugin-transform-jsx-to-htm`: transpile JSX to HTM
❰❱ Support for multiple root Elements (fragments)
🥽Switch to a VM from eval: no more CSP issues!
🐣New `htm/mini` version: <400 bytes for a slight perf hit
🥾Export `{ Component }` from `htm/preact` and standalone

We've rebuilt HTM from the ground up for performance and size, with a brand new custom JSX parser.

What does that mean for you?

- HTM is now **20 times faster**
- ... and 10% smaller
- ... and runs anywhere (native SSR!)
- the syntax is now _as close as possible_ to JSX
- 20% faster caching
- more optimized output

Welcome Joachim!

HTM has a new core contributor, jviide. His incredible work made this release possible.
You can find him [tweeting about crazy networking stuff](https://twitter.com/jviide).

Babel Plugin, too!

The Babel plugin got an overhaul too! It's 1-2 orders of magnitude faster, no longer requires JSDOM, and has new options to customize output.

This update also fixes a number of issues relating to caching, edge cases and whitespace handling.

> New Syntax?
>
> Yes, but don't worry. Now when you're writing HTM, you're basically writing JSX.
> There are only two things you have to remember:
>
> 1. components like `<Foo>` are written as `<${Foo}>`
> 2. fields like `{a}` are written as `${a}`
>
> Everything else is the same as JSX.

Initial release!