kwangure/eventscript

Reactive data with DOM-like bubbling

EventScript

Data nodes in EventScript have DOM-like event bubbling. For example, just like events fire on an input and bubble to its form, changes to a number in array triggers observers of the number and the array.

Getting started

Installation

npm install eventscript

Usage

import { es } from 'eventscript';

const value = es.string('rainbow');

console.log(`${value} 🌈`);
// rainbow 🌈

EventScript Patterns

🔝 Nested values bubble to parent observers

const numbers = es.array([
	es.number(1),
	es.number(2),
	es.number(3),
]);
const one = numbers.at(0);
const length = numbers.length;

let numberCount = 0;
numbers.subscribe(() => console.log(`numberCount === ${++numberCount}`));
// numberCount === 1

let lengthCount = 0;
length.subscribe(() => console.log(`lengthCount === ${++lengthCount}`));
// lengthCount === 1

one.set(100);
// numberCount === 2

numbers.push(es.number(4));
// lengthCount === 2
// numberCount === 3

💱 Primitive types are coercible

This includes ESString, ESNumber and ESBoolean.

const fifteen = 5 + es.number(10);
console.log(`fifteen === 15 (${fifteen === 15})`);
// fifteen === 15 (true)

const catch22 = es.string('catch') + es.number(22);
console.log(catch22, `(${typeof catch22})`);
// catch22 (string)

🔄 Values are iterable

Nodes that have iterable native counterparts are also iterable. For example, you can use the for...of construct to iterate ESMap or ESString.

const esString = es.string('123');

for (const char of esString) {
	console.log(`${char} Mississippi`);
}
// 1 Mississipi
// 2 Mississipi
// 3 Mississipi

const set = new Set(esString);
console.log(set);
// Set(3) { '1', '2', '3'}

💾 Values are serializable

const esMap = es.map({
	one: es.number(1),
	two: es.number(2),
	three: es.number(3),
});

console.log(JSON.stringify(esMap));
// {"one":1,"two":2,"three":3}
console.log(esMap.toJSON());
// { one: 1, two: 2, three: 3 }