This is a patch release which includes a build, that was forgotten in 3.1.0 and 3.2.0 🤦‍♂️

This adds support for useCallback, a convenience function on top of useMemo that allows creating callbacks that change when input values change.

This adds support for the function callback to useState:

counter.js

import { virtual, useMemo } from "haunted";
import { html } from "lit-html";

export default virtual(({ value, setValue }) => {
  const increment = useMemo(() => () => setValue(val => val + 1), []);

  return html`
    <button @click=${increment}>${value}</button>
  `;
});

index.js

import { component, useState } from "haunted";
import { html } from "lit-html";
import Counter from "./counter";

const App = component(() => {
  const [count, setCount] = useState(0);

  return html`
    <h1>Count for me!</h1>
    ${Counter({ value: count, setValue: setCount })}
  `;
});

customElements.define("x-app", App);

This major release upgrades lit-html to 0.14.

This is a minor release bring 2 awesome new features:

• Haunted is now haunted on npm! 🎉 . Update your dependencies removing @matthewp/haunted with haunted. Version 2.3.0 is the first version on npm.
• Haunted now supports IE11. See the instructions on getting IE11 set up.

This release introduce support for React's Context API and a new hook, useContext() that will trigger rerenders when context changes.

See the docs for usage information.

This release brings support for virtual components. These are components which do not need a defined tag, but rather can be used like functions.

They have their own state and will rerender when that state changes, without causing any parent components to rerender.

The following is an example of using virtual components:

import { useState, virtual, component } from '@matthewp/haunted';
import { html, render } from 'lit-html';

const Counter = virtual(() => {
  const [count, setCount] = useState(0);

  return html`
    <button type="button"
      @click=${() => setCount(count + 1)}>${count}</button>
  `;
});

const App = component(() => {
  return html`
    <main>
      <h1>My app</h1>

      ${Counter()}
    </main>
  `;
});

customElements.define('my-app', App);

Notice that we have Counter, a virtual component, and App, a custom element. You can use virtual components within custom elements and custom elements within virtual components.

The only difference is that custom elements are used by using their <my-app> tag name and virtual components are called as functions.

If you wanted you could create an entire app of virtual components.

This is a major release, to be compatible with lit-html 0.13.

This fixes a bug where the this value within a renderer function was not the element. Now it is. Thanks @pdeona !

Ensure that useEffect effects only run once when an empty array is provided to useEffect.

This adds support for boolean attributes. So that a component used in HTML like:

<drop-down open>
  <ul>...</ul>
</drop-down>

When defined this now reflects as a boolean:

function Dropdown({ open }) {
  return html`
    <slot style="${open ? 'display: block;' : 'display: none;' }"></slot>
  `;
}

Dropdown.observedAttributes = ['open'];

open will be the boolean true rather than an empty string (as is the value of boolean attributes.

This adds fully support for useEffect matching React's API. This is documented in the readme. The new parts are:

Memoization

Like useMemo, useEffect can take a second argument that are values that are memoized. The effect will only run when these values change.

function App() {
  let [name, setName] = useState('Dracula');

  useEffect(() => {
    // This only occurs when name changes.
    document.title = `Hello ${name}`;
  }, [name]);

  return html`...`;
}

Cleaning up side-effects

Since effects are used for side-effectual things and might run many times in the lifecycle of a component, useEffect supports returning a teardown function.

An example if when you might use this is if you are setting up an event listener.

function App() {
  let [name, setName] = useState('Wolf Man');

  useEffect(() => {
    function updateNameFromWorker(ev) {
      setName(ev.data);
    }

    worker.addEventListener('message', updateNameFromWorker);

    return () => {
      worker.addEventListener('message', updateNameFromWorker);
    }
  });

  return html`...`;
}

This release includes a couple of new features:

Observed attributes

Now you can have your attributes be observed, which will automatically set their property and trigger a rerender. It works like:

import { component } from '@matthewp/haunted';
import { html } from 'lit-html';

function App({ name }) {
  return html`Hello ${name}`;
}

App.observedAttributes = ["name"];

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

And then you can set them in HTML or anywhere else that produces DOM:

<my-app name="world"></my-app>

Lit's html is exported

Since Haunted already depends on lit-html to use its render export, it made since to go ahead and re-export the html export as well. This allows for not directly importing lit-html if you just want to use the same version Haunted uses.

import { component, html } from '@matthewp/haunted';

...

Codesandbox

We now have a starter app on Codesandbox. This makes it easier to learn and experiment.

This release made with pure 🎃

This finally figures out our different builds. Most users should never have to care about this. We have the following builds for different use cases. These are documented in the readme.