Stay up to date on releases
Create your free account today to subscribe to this repository for notifications about new releases, and build software alongside 40 million developers on GitHub.
Sign up for free See pricing for teams and enterprises
jviide
released this
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.