function createEventStore() {
const events = [];
const snapshots = [];
const replay = (until = events.length) => {
const mostRecent = [...snapshots].findLast(([i]) => i <= until);
const [startIndex, state] = mostRecent ?? [0, {}];
const seed = { ...state };
return events.slice(startIndex, until).reduce((currentState, event) => {
const next = event.op(currentState[event.key], event.val);
return { ...currentState, [event.key]: next };
}, seed);
};
const append = (event) => {
events.push({ ...event, ts: Date.now() });
const state = replay();
if (events.length % 10 === 0) {
snapshots.push([events.length, { ...state }]);
}
return state;
};
return { append, replay, events };
}
CONTEXT-DEPENDENT RENDERING