Как абстрагироваться от манипуляций с DOM простым интуитивно понятным способом

Я создаю библиотеку для абстрактных манипуляций с DOM. Вот как выглядит использование:

  vsAddToSection() {

    let _inChapter: c.InChapter;

    let v$sections = vmap([], _ =>
      vh('div.section.item', {}, {
        listeners: {
          click: (e, __) => {
            this.ctrl.inSection(_inChapter, _)
          }
        }
      }, [h('span', _.name)]));

    let v$backToABook = this.vBackToABook(),
    v$backToBook = this.vBackToBook();

    let update = (inChapter: c.InChapter) => {
      _inChapter = inChapter;
      v$backToBook.update(inChapter);
      v$backToBook.update(inChapter);
      v$sections.update(inChapter.sections);
    };

    return [update, [
      v$backToABook,
      v$backToBook,
      h('div.sections', v$sections),
      vh('button', {}, {
        listeners: {
          click: (e, _) => {
            this.ctrl.toNew.pub(_inChapter);
          }
        }
      }, [h('i', '+'), h('span', 'New Section')])
    ]];
  }


  vAddToBookPopup() {

    let v$content = vex([h('div', 'default')]);

    let [vs$addToBookUpdate, vs$addToBook] = this.vsAddToBook(),
    [vs$addToChapterUpdate, vs$addToChapter] = this.vsAddToChapter(),
    [vs$addToSectionUpdate, vs$addToSection] = this.vsAddToSection();




    this.ctrl.addTo.sub(addTo => {
      if (c.isInABook(addTo)) {
        vs$addToBookUpdate(addTo);
        v$content.replace(vs$addToBook);
      } else if (c.isInBook(addTo)) {
        vs$addToChapterUpdate(addTo);
        v$content.replace(vs$addToChapter);
      } else if (c.isInChapter(addTo)) {
        vs$addToSectionUpdate(addTo);
        v$content.replace(vs$addToSection);
      } else if (c.isInSection(addTo)) {
        // console.log(addTo);
        // selected
      }
    });

    return h('div.popup.addtobook', [v$content]);
  }

vh создает dom-узел, добавляет к нему слушателей событий и т. д.
h это обертка вокруг vh.
vmap принимает массив данных и функцию для создания дочерних узлов dom. У абстракции есть update метод обновления array of data поэтому он может удалять старые дочерние узлы dom, а также создавать и добавлять новых дочерних узлов.
vex принимает массив vh abstraction и имеет replace метод, который заменяет содержимое dom новым массивом vhс.

this.ctrl.addTo.sub слушает событие, которое обновляет дом, например:

vs$addToBookUpdate(addTo);
v$content.replace(vs$addToBook);

Это обновляет содержимое части dom и заменяет родительский dom этим новым фрагментом dom.

Я возвращаю два значения из vsAddToSection функция, одна для обновления абстракции, одна возвращает саму абстракцию для добавления.

Надеюсь, это имеет смысл, моя цель — простота, что-то, что работает, и избегать использования внешних зависимостей. Это немного громоздко, следует ли мне придерживаться обычного подхода к виртуальному дому?