👻 Haunted 4.5.0 is out 🎉. This is a pretty big release as it introduces some nice new features:
the new haunted/core
entry point is ideal for those who are using a templating library other than lit-html, for example lighterhtml. This has been one of the most requested features for Haunted for a long time. Although Haunted has always worked with hyperHTML, lighterhtml, and others, it always included lit-html even if it was unused.
I didn't like the idea of not including support for a templating library out-of-the-box and forcing configuration on everything, so Haunted still works the easy way with lit-html. The new haunted/core
is for people who want a little more control. The haunted
export is a function that wires together a render function and produces the component
function, createContext
, and a few other things. Here's a simple example:
import haunted, { useState } from 'haunted/core';
import { html, render } from 'lighterhtml';
const { component } = haunted({
render(what, where) {
render(where, () => what);
}
});
const App = component(() => {
const [count, setCount] = useState(0);
return html`Using lighterhtml! Count: ${count}`;
});
Here a codepen using haunted/core with lighterhtml.
The useRef
hook has been added. It's a simple way to create a mutable value. An example usage is like so:
function App() {
const myRef = useRef(0);
return html`
${myRef.current}
`;
}
We're revamped the docs that go over all of the ways that Haunted can be imported. We've also simplified things so that there's the haunted.js
bundle that is useful from a CDN for things like demo pages, and the haunted
and haunted/core
entry points for use with bundlers / other tooling. See the new docs for more.