eyepatch - A Library of Notification Based Objects for TypeScript/JavaScript

• Download from GitHub

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 parametrized
• ConditionalEvent - Simple or parametrized
• GlobalEvent - Communicating globally with events
• ObservableCollection - Notifies you when something changes
• ObservableDictionary - Works with keys as an object and not only strings and numbers. Notifies on changes. Works simply adding non enumerable property as the key id. This doesn't affect the JSON.stringify method or the for 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...