rdot

// Пример: a + b
const a = rdot(1); // создаем реактивную точку/контейнер/переменную (на самом делел простою функцию)
const b = rdot(2);
const sum = rdot(() => a + b); // реактивное выражение, зависящее от двух реактивных переменных
 
// (1) Вычисляем результат
console.log(sum()); // 3
 
// (2) Подписываемся на изменение суммы
sum.onValue(result => console.log(`sum: ${result}`)); // "sum: 3"
 
// Изменяем `a`
a.set(3); // "sum: 5" — т.е. сработает callback на `sum`,
b.set(-3); // "sum: 0" — да, схлопывания нет, оно не было целью

(function () {
    // Счетчик + сеттер, который при получении нового значения, прибовляет к нему старое
    const counter = rdot(0, (newValue, oldValue) => newValue + (oldValue||0));
 
    // Создаем «рективный поток» на основе события `click`:
    rdot.fromEvent(form.up, 'click').onValue(() => counter.set(+1));
    rdot.fromEvent(form.down, 'click').onValue(() => counter.set(-1));
 
    // Ещё один поток, который будет изменять свойство `value`:
    counter.assign(form.result, 'value');
 
    // Эквивалентно записи:
    counter.onValue(num => {
        form.result.value = num);
    });
})(document.forms.counter);

(function (form) {
    // Создаем реактивную двухстороннюю связку с Input-элементом
    const username = rdot.dom(form.username);
    const fullname = rdot.dom(form.fullname);
 
    // Реактивное правило валидации
    const validate = rdot(() => username().length > 0 && fullname().length > 0);
 
    // Связываем кол-во введенных символов и их вывод в соответствующем DOM-элементе
    [username, fullname].forEach(dot => {
        dot
            .map(value => value.length)
            .assign(dot.el.nextElementSibling);
    });
 
    // Связываем правило валидации с состоянием кнопки
    validate.not().assign(form.reg, 'disabled');
})(document.forms.reg);