3.1.1

TypeScript Changes

• Fix nodenext module support from TypeScript 4.7 by @wight554 in #221

Docs and CI stuff

• Skip running tests on outdated Node 10 by @marvinhagemeister in #215
• Fixed babel-plugin-htm's documentation of import options by @drjayvee in #210

New Contributors

• @marvinhagemeister made their first contribution in #215
• @wight554 made their first contribution in #221
• @drjayvee made their first contribution in #210

Full Changelog: 3.1.0...3.1.1

3.1.0

• Adds Package Exports for Node 12+ (#164 & #205, thanks @vikerman & @sibbng!)
• The htm/preact package now re-exports useErrorBoundary (#180, thanks @artisonian!)

babel-plugin-transform-jsx-to-htm v2.2.0

• Adds support for namespaced JSX elements and attributes (<a:b c:d="e" />)

3.0.4

• Fixes a bug in the Standalone preact bundle (htm/preact/standalone) that caused rendering inaccuracies (#159)

v3.0.3

• Fix TypeScript typings: export the identified w/ declared type (#153, thanks @yhatt!)

v3.0.2

Fixes

• Fix TypeScript typing file name (#147)
• Add createContext to preact standalone bundle (#146, thanks @lmorchard!)

v3.0.1

Just a quick version bump due to v3.0.0 getting released without the built files 😅

🎉 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.

2.2.1

Maintenance release: adds .mjs copies of the new .module.js dist files to avoid broken unpkg links (#113).

2.2.0

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:

  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:

  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:

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

  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 instead of Object.assign calls. If you're targeting modern browsers that support spread, this option can help reduce your bundle size!

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