v6.1.0

Minor Changes

• 3bdc4b0: Export type Options from component as ComponentOptions.
• 7303994: Allow omitting initialValue from useRef.
• 4705ede: Infer virtual type definition from renderer arguments.
• 17190b1: export Ref type
• 8ff7db9: Improve the defintion of useState, better handling initial value.

v6.0.0

Major Changes

• f861a4b: Deprecates haunted.js and web.js bundles
• d6e413f: Upgrade to lit & lit-html ^3.0.0

Minor Changes

• 18127bb: Add support for lit 3

Patch Changes

• 9c9bd24: Prevent a setState that doesn't change the state from resulting in a rerender
• f359e21: Don't use Shadow Root for contexts.
• 7e17c42: Prevent infinite loops if effect schedules an update and then throws.

v6.0.0-next.2

Minor Changes

• 18127bb: Add support for lit 3

Patch Changes

• f359e21: Don't use Shadow Root for contexts.
• 7e17c42: Prevent infinite loops if effect schedules an update and then throws.

v6.0.0-next.1

Patch Changes

• 9c9bd24: Prevent a setState that doesn't change the state from resulting in a rerender

v6.0.0-next.0

Major Changes

• f861a4b: Deprecates haunted.js and web.js bundles

v5.0.0

5.0.0

4.7.0

Adds the initializer argument to useReducer, #160.

4.6.3

Fail gracefully when useMemo is called without deps. #153

4.6.1

Fixes a bug that prevented the use of the title attribute.

4.6.0

This is a huge release for Haunted, one of the biggest since the initial release. Before getting into features I want to give some appreciate to @jdin, @Gladear, and @chase-moskal who all made tremendous contributions to this release. That cannot go overstated, I did only a small part of this release, the Haunted community is what keeps this project alive. ❤️ 🎃 . Now that the sappy stuff is complete, on to the features!

State API

At its core Haunted is a container for state and lifecycle callbacks that is derived from hooks like useState, useMemo, even useEffect. With the component() API you get more than just that, you also get a scheduler that handles rendering and committing the result.

A lot of people have wanted to use hooks outside of the context of Haunted components. One example is using hooks inside of a LitElement component. The new State API enables this, by exposing the low-level part of Haunted which is its state container.

Here's an example of how State can be used to mixin with other base element classes:

import { LitElement } from 'lit-element';
import { State } from 'haunted';

export default class LitHauntedElement extends LitElement {
  constructor() {
    super();

    this.hauntedState = new State(() => this.requestUpdate(), this);
  }

  update(changedProperties) {
    this.hauntedState.run(() => super.update(changedProperties));
    this.hauntedState.runEffects();
  }
}

When you would then use like:

import LitHauntedElement from './lit-haunted-element.js';
import { useState } from 'haunted';
import { html } from 'lit-element';

class MyApp extends LitHauntedElement {
  render() {
    const [count, setCount] = useState(0);

    return html`
      <div>Count: ${count}</div>
      <button @click=${() => setCount(count + 1)}>
        Increment
      </button>
    `;
  }
}

See this gist for other example integrations.

@jdin has built a new LitElement integration which can be installed, haunted-lit-element. 🎉

useLayoutEffect

This is one of the more obscure hooks, but useLayoutEffect is useful when you want to do something right after the DOM is rendered. An example would be setting up adoptedStyleSheets like so:

import { useLayoutEffect, component } from 'haunted';
import { css, html } from 'lit-element';

function useAdoptedStylesSheets(el, ...sheets) {
  useLayoutEffect(() => {
    el.adoptedStyleSheets = [
      ...el.adoptedStyleSheets,
      ...sheets
    ];
  });
}

const styles = css`
  h1 { color: blur; }
`;

function MyApp() {
  useAdoptedStyleSheets(this, styles);
  
  return html`
    <h1>Hello world!</h1>
  `;
}

customElements.define('my-app', component(MyApp));

TypeScript

Haunted is now written in TypeScript, so all of the problems that TypeScript users have had in the past with imperfect type definitions should not be a problem going forward. Huge thanks to @Gladear who implemented the conversion (as well as useLayoutEffect)! 🎉