🎉 HTM 3 is here!

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:

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 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 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:

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, 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:

import { html } from "htm/preact";

html`<div id=hello>hello</div>`;

compiles to this:

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 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 (#132). This should not require a polyfill, since the Map functionality HTM relies on is supported in IE11 and all modern browsers.