Reactive DOM with VanJS

Reactive DOM with VanJS.js

import van from "./van-1.2.7.min.js"

const {p, button} = van.tags;

const love = van.state(true);

van.add(
  document.body,
  p("She loves me",
    () => { return love.val ? "" : " not"; }, // empty string is necessary
    "."),
  button({onclick: () => love.val = !love.val}, "hesitate"));

const nodes = () => [...document.querySelector('p').childNodes];
var n = nodes();
const change = () => {
  var m = nodes();
  var eq = [];
  for (const i of [0,1,2]) {
    if (n[i] == m[i])
      eq[i] = "same"
    else
      eq[i] = "change"
  }
  console.log (eq);
  n = m;
}

new MutationObserver((mutations, observer) => {
  for (const m of mutations) {
    if (m.type === "childList") change(); }})
  .observe(document.body, { attributes: false,
                            childList: true, subtree: true });