4.5.4

Minor fixes in typings from #131

4.5.3

This is a patch release, which fixes #127 and ensures that Haunted components are instancesof HTMLElement.

4.6.0-beta.0 - The new State API

🦇 🎃 This is an initial beta release of the new State API. The State API is a low-level way to create instances of hooks state. It provides methods for running hooks code and a callback for when any hook state has changed. The intended use-case is integration with base classes such as SkateJS and LitElement.

Since the API is lower-level, we feel it should be first released as a beta so developers interested in creating integrations with base classes can try it out and see if there are any holes to be filled. When those developers as satisfied it will come in a future minor release, likely 4.6.0.

Here's a small example of how the State API works at its lowest level:

import { State, useState } from 'haunted';

let state = new State(() => {
  update();
});

function update() {
  state.run(() => {
    const [count, setCount] = useState(0);

    console.log('count is', count);

    setTimeout(() => setCount(count + 1), 3000);
  });
}

update();

More example integrations can be found in this gist. Also see the documentation in the readme here.

4.5.2

This is a patch release of Haunted, that enhances Type definitions as described in #116.

4.5.1

This is a small fix, ensuring that everything is exported from core.js so that the hooks can be imported from this entry point as well.

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.

4.4.0

Now supports the delegatesFocus option in Shadow DOM via the new shadowRootInit option.

function App() {
  return html`delegates focus`;
}


customElements.define('delegates-focus', app,
  HTMLElement, {shadowRootInit: {delegatesFocus: true}));

4.3.0

Haunted now includes the module field in package.json and works with tools (like pika) that use that field.

4.2.1

This fixes useEffect typings.

4.2.0

This is a minor release adding TypeScript typings as an officially supported thing in Haunted. 🎉