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