Strongly Typed Events for your browser

Why not use Strongly Typed Events in your browser? We got a special package for you that already contains all the files you need. You can even serve them from a CDN for extra speed (or easy prototyping). The packae is UMD compatible.

Code

Include the script from this NPM package or from a CDN:

<script src="https://cdn.jsdelivr.net/npm/ste-browser@latest/dist/strongly-typed-events.min.js"></script>

Subscription is easy

Let's assume you have a clock, subscribing to events on it is easy:

var clock = new Clock("Smu", 1000);

//log the ticks to the console - this is a signal event
clock.onTick.subscribe(function () {
    console.log("Tick!");
});

//log the sequence parameter to the console - this is a simple event
clock.onSequenceTick.subscribe(function (s) {
    console.log(`Sequence: ${s}`);
});

//log the name of the clock and the tick argument to the console - this is an event
clock.onClockTick.subscribe(function (c, n) {
    console.log(c.name + " ticked " + n + " times.");
});

Creating events is also easy

We've created a dispatcher to help you propagate your events:

function Clock(name, timeout) {

    var _this = this;
    var _ticks = 0;
    var _onTick = new SignalDispatcher();
    var _onSequenceTick = new SimpleEventDispatcher();
    var _onClockTick = new EventDispatcher();

    setInterval(function () {
        _ticks += 1;
        _onTick.dispatch();
        _onSequenceTick.dispatch(_ticks);
        _onClockTick.dispatch(_this, _ticks);
    }, timeout);

    Object.defineProperty(this, "name", {
        get: function () { return name; }
    });

    Object.defineProperty(this, "ticks", {
        get: function () { return _ticks; }
    });

    Object.defineProperty(this, "onTick", {
        get: function () { return _onTick.asEvent(); }
    });

    Object.defineProperty(this, "onSequenceTick", {
        get: function () { return _onSequenceTick.asEvent(); }
    });

    Object.defineProperty(this, "onClockTick", {
        get: function () { return _onClockTick.asEvent(); }
    });
}

Usage

The package contains the following scripts:

• Events that are modeled after .Net with a sender and argument.
  • dist/ste-events.js
  • dist/ste-events.min.js
  • dist/ste-promise-events.js
  • dist/ste-promise-events.min.js
• A simpler version of the ste-event-event. No sender, just an argument.
  • dist/ste-simple-events.js
  • dist/ste-simple-events.min.js
  • dist/ste-promise-simple-events.js
  • dist/ste-promise-simple-events.min.js
• A signal is even simpler, it is just a callback for when you need to be alerted without any scope.
  • dist/ste-signals.js
  • dist/ste-signals.min.js
  • dist/ste-promise-signals.js
  • dist/ste-promise-signals.min.js
• All objects to build and use events:
  • dist/strongly-typed-events.js
  • dist/strongly-typed-events.min.js
• Want to build your own style of events? You can use the dispatcher and other base classes for our core project:
  • dist/ste-core.js
  • dist/ste-core.min.js

CDN

You want to use a CDN? Great!

|What|Link| |----|----| |All event types|https://cdn.jsdelivr.net/npm/ste-browser@latest/dist/strongly-typed-events.min.js| |Events|https://cdn.jsdelivr.net/npm/ste-browser@latest/dist/ste-events.min.js| |Events with Promise|https://cdn.jsdelivr.net/npm/ste-browser@latest/dist/ste-promise-events.min.js| |Simple Events|https://cdn.jsdelivr.net/npm/ste-browser@latest/dist/ste-simple-events.min.js| |Simple Events with Promise|https://cdn.jsdelivr.net/npm/ste-browser@latest/dist/ste-promise-simple-events.min.js| |Signals|https://cdn.jsdelivr.net/npm/ste-browser@latest/dist/ste-signals.min.js| |Signals with Promise|https://cdn.jsdelivr.net/npm/ste-browser@latest/dist/ste-promise-signals.min.js| |Core|https://cdn.jsdelivr.net/npm/ste-browser/dist/strongly-typed-events.min.js|

Every link comes with a .map. If you need a specific version, just include after ste-browser (like [email protected] will serve you version 1.3 with the latest patches). Like a non-minified version, just remove .min from the link.

Packages

The project is separated into multiple packages, so you only need to include what you need. We have the following packages:

|Package|Description| |-------|-----------| |ste-core|Package that contains all the building blocks for the creation of events. The dispatcher implementation is its main hero.| |ste-events or ste-promise-events|Events that are modeled after .Net with a sender and argument. If you use typescript, you can leverage the support for generics and get strongly typed code.| |ste-simple-events or ste-promise-simple-events|A simpler version of the ste-event-event. No sender, just an argument.| |ste-signals or ste-promise-signals|A signal is even simpler, it is just a callback for when you need to be alerted without any scope.| |strongly-typed-events|This package includes everything.| |ste-browser|Helps to host events in the browser.|

Maintenance

This project is maintained by Kees C. Bakker.