eyepatch - A Library of Notification Based Objects for TypeScript/JavaScript
A library of notification based objects for TypeScript/JavaScript
Introduction
I was a C# developer for a few years and then I moved to programming web apps in TypeScript.
One of the things I was amazed to find out was the absence of the events. It is such a useful thing and for some reason they don't exist normally in the JavaScript or the TypeScript languages.
Writing a code polling for changes is ugly and most of the times if there was an event, I'd use it.
So I wrote the library that has some basic event implementations and some more complex ones, moreover I went further more and added collections that have the event system built into them.
Features
Event
- Simple or parametrizedConditionalEvent
- Simple or parametrizedGlobalEvent
- Communicating globally with eventsObservableCollection
- Notifies you when something changesObservableDictionary
- Works with keys as an object and not onlystring
s and numbers. Notifies on changes. Works simply adding non enumerable property as the key id. This doesn't affect theJSON.stringify
method or thefor in
loop
Using the Code
Installation
npm install eyepatch --save
The code examples are written in TypeScript, but you can simply use them in ES6 or convert to ES5.
Using Parametrized Event
var event = new EventT<number>();
event.on((_num: number) => console.log('The number ' + _num + ' was raised'));
event.raise(15);
Using Conditional Event
var conditionalEvent = new ConditionalEventT<number>();
conditionalEvent.on(
(_num) => console.log('The number ' + _num + ' is positive'),
(_num) => _num > 0
);
conditionalEvent.raise(-1); // Will not be logged
conditionalEvent.raise(12); // Will be logged
Using Global Event
const globalEvent1 = new GlobalEvent(); globalEvent1.on('some event name', (_num: number) => console.log('The number ' + _num + ' was raised')); // In some other place const globalEvent2 = new GlobalEvent(); globalEvent2.raise('some event name', 123); // Will log: "The number 123 was raised"
Raising Safely In Case One of the Registrations Throws An Error
var event = new Event();
event.on(() => throw 'some error');
event.on(() => console.log('I still want to log'));
event.raiseSafe();
Using ObservableCollection
var collection = new ObservableCollection<number>();
var items: number[] = collection.items;
collection.itemsChanged.on(
(_args: IItemsChangedEventArgs<number>) => {
console.log('Added items: ' + _args.added);
console.log('Removed items: ' + _args.removed);
});
collection.add(2);
collection.addRange([1,2,3,4,5,6,7,8,9]);
collection.removeMatching(2);
collection.removeMatchingRange([5,6]);
collection.removeAtIndex(0);
collection.removeAtIndices([0,1]);
var size: number = collection.size;
var has7: boolean = collection.contains(7);
collection.clear();
Using ObservableDictionary
var dictionary = new ObservableDictionary<Obejct, Object>();
dictionary.itemsChanged.on(
_args => {
console.log('Added key value pairs: ' + _args.added);
console.log('Removed key value pairs: ' + _args.removed);
});
var key = {};
var value = {};
dictionary.add(key, value);
var containsKey: boolean = dictionary.containsKey(key);
var containsValue: boolean = dictionary.containsValue(value);
var valueByKey: Object = dictionary.getValueByKey(key);
var size: number = dictionary.size;
var keys: Object[] = dictionary.keys;
var values: Object[] = dictionary.values;
dictionary.remove(key);
dictionary.clear();
What's Next?
Have fun and feel free to use, comment, request, and contribute.
I'll keep adding stuff from time to time...