ReactiveDot

Всё это написано с целью моего самообучения и детального знакомства с реактивным программированием и TS.

Пример проложения

• TodoMVC — online / source

Установка

npm install 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" — да, схлопывания нет, оно не было целью

Как это можно использовать?

«Подсчет кликов»

<form name="counter">
	<button name="up" type="button">+</button>
	<button name="down" type="button">-</button>
	<input name="result" readonly/>
</form>

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

«Валидация формы»

<form name="reg">
	<div>
		<input placeholder="Username" name="username"/>
		<span></span>
	</div>
	<div>
		<input placeholder="Fullname" name="fullname"/>
		<span></span>
	</div>
	<button name="reg">Reg</button>
</form>

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

Что дальше?

А дальше, гроб, гроб, кладбище... MIT.