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!)