Awesome

dom-augmentor

^{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.

Breaking in v1

• 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

Example

Live Demo

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());