Haunted Versions Save

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.