Folders and files
| Name | Name | Last commit date | ||
|---|---|---|---|---|
Social Media Photo by stephan sorkin on Unsplash
This is exactly the same as the augmentor module, except it handles automatically effects per DOM nodes.
Compatible with any function that returns a DOM node, or a fragment, or a hyperhtml like Wire instance.
- the default export has been removed, it's import {augmentor} from 'augmentor' now
- the augmentor library is the v1 one
- effects now work more reliably and there are no constrains for the guards
const {augmentor: $, useEffect, useRef, useState} = augmentor;
const {render, hook} = lighterhtml;
const {html, svg} = hook(useRef);
const Button = (text) => $(() => {
useEffect(
() => {
console.log('connected');
return () => console.log('disconnected');
},
[]
);
const [i, increment] = useState(0);
return html`
<button onclick=${() => increment(i + 1)}>
${text} ${i}
</button>`;
});
const button = Button('hello');
render(document.body, button);
// alternatively
// document.body.appendChild(button());