Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.
- Fixes a bug in the Standalone preact bundle (htm/preact/standalone) that caused rendering inaccuracies (#159)
Assets
2
Assets
2
Fixes
- Fix TypeScript typing file name (#147)
- Add createContext to preact standalone bundle (#146, thanks @lmorchard!)
Assets
2
Just a quick version bump due to v3.0.0 getting released without the built files
Assets
2
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.
Assets
2
Maintenance release: adds .mjs copies of the new .module.js dist files to avoid broken unpkg links (#113).
Assets
2
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-htmnow understandsReact.Fragmentelements in the JSX input:<React.Fragment> <div>Foo</div> <div>Bar</div> </React.Fragment>
The plugin transforms fragments to
htmexpressions 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
useNativeSpreadtotruemakes the transformed output use object spread syntax instead ofObject.assigncalls. 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-htmhandles 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
htmusage with integrations (#101, thanks @robdodson!)
Assets
2
A couple of building and publishing related fixes:
- Fix
htm/minibuild commands, it's now as mini as it is supposed to be. - Fix package.json so that
htm/reactgets included to the published package.
Assets
2
@jviide rewrote htm again and again until it was perfect. as a result, it is now perfect.
babel-plugin-transform-jsx-to-htm: transpile JSX to HTM
❰❱ Support for multiple root Elements (fragments)
htm/mini version: <400 bytes for a slight perf hit
{ Component } from htm/preact and standalone