Skip to content

Instantly share code, notes, and snippets.

@matthewp
Last active July 12, 2019 11:41
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save matthewp/8410e1e04af4fe9f84500486ba143e25 to your computer and use it in GitHub Desktop.
Haunted 4.5.0

👻 Haunted 4.5.0 is out 🎉. This is a pretty big release as it introduces some nice new features:

haunted/core

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.

useRef

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}
  `;
}

Better docs on importing Haunted

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment