React's Hooks API implemented for web components 👻
This is a patch release of Haunted, that enhances Type definitions as described in #116.
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.
👻 Haunted 4.5.0 is out 🎉. This is a pretty big release as it introduces some nice new features:
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.
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}
`;
}
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.
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}));
Haunted now includes the module
field in package.json and works with tools (like pika) that use that field.
This fixes useEffect
typings.
This is a minor release adding TypeScript typings as an officially supported thing in Haunted. 🎉
This fixes an issue with useEffect
teardown functions not being called in virtual components.
This patch release fixes the web.js build.
This is a minor release adding 2 new features.
First, it's now possibly to disable the use of Shadow DOM:
component(() => html`...`, HTMLElement, {useShadowDOM: false}))
Secondly, dash attributes are now correctly converted to camelCased properties:
function Drawer({ isOpen }) {
return html` ... `
}
Drawer.observedAttributes = ['is-open'];
<my-drawer is-open></my-drawer>
Big thanks to @jpray for developing these!