Simple dom mutation as base for frontend frameworks. This library serves as a layer to build frontend frameworks on top of it. An abstraction to manipulate DOM without making the hands dirty.
Either you can create an object that lives only in memory for testing or server purposes or you can work with the browser dom
import { createBrowserMutation } from "dom-mutation";
const root = document.getElementById("root");
const domMutation = createBrowserMutation(root);
import { createMemoryMutation } from "dom-mutation";
const domMutation = createMemoryMutation();
const divElement = domMutation.add(domMutation.getRoot(), null, 'div', { style: { color: 'blue' } })
const txtElement = domMutation.add(divElement, null, 'text', { text: 'Hello World' })
Pass the pointer to the element you want to delete to the DomMutation.
domMutation.remove(element);
To update elements, you need to store the previous props somewhere.
domMutation.update(
element, // whatever you receive from domMutation.add(...)
prevProps, // props that you sent the last time, it's your job to trigger this update function and to store the last props.
nextProps, // new props
)