Features
🌲 Static subtree caching
HTM can now detect and cache _static_ nodes (132). A node is considered static when it or its children do not depend on any dynamic values injected into the template string.
In the following example the subtree rooted at `<p class="a">` is static. The `<p class="b">` is _not_ static because its text contains a value injected into the template string. Also the root `<div>` is not static because one of its children is not static:
js
html`
<div>
<p class="a">
This is a <em>static</em> subtree.
</p>
<p class="b">
This is ${"not"}.
</p>
</div>
`;
When the template is evaluated for the first time HTM caches the `<p class="a">` subtree created by the `h` function and reuses that value on subsequent evaluations.
For those familiar with [babel/plugin-transform-react-constant-elements](https://babeljs.io/docs/en/babel-plugin-transform-react-constant-elements) it's kind of like that, though a bit less smart but done fully at runtime.
âš› Preact X is here
The standalone Preact bundle [`htm/preact/standalone`](https://github.com/developit/htminstallation) was updated to Preact X (125).
Preact hooks (included in the `preact/hooks` addon) were one of Preact X's marquee features. Pull request 134 by zserge added Preact hooks as a part of the standalone bundle. Now you can import `useState` and friends directly like this:
js
import { html, render, useState } from 'https://unpkg.com/htm/preact/standalone.module.js';
🚗 Auto-import pragma option for babel-plugin-htm
The Babel plugin that compiles htm syntax to hyperscript, [`babel-plugin-htm`](https://github.com/developit/htm/tree/master/packages/babel-plugin-htm), got smarter, thanks to PR 133 by zaygraveyard! Adding `import: 'preact'` as an option to the plugin automatically adds `import { h } from "preact";` to files that use HTM. So a file like this:
js
import { html } from "htm/preact";
html`<div id=hello>hello</div>`;
compiles to this:
js
import { h } from "preact";
import { html } from "htm/preact"; // <-- can now be tree-shaken away
h("div",{id:"hello"},"hello");
The option is highly configurable, so see [the documentation](https://github.com/developit/htm/tree/master/packages/babel-plugin-htmimportfalse-experimental) for more examples.
✨ Also featuring
* TypeScript typing files for HTM (123)
* Documentation updates (133, thanks JodiWarren!)
Breaking Changes
As of version 3.0.0, HTM now requires [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) (132). This should not require a polyfill, since the Map functionality HTM relies on is supported in IE11 and all modern browsers.