strictly-typed-events

An Event emitting/subscription library designed for simplicity, convenience, and type-safety in TypeScript projects.

Contents

• strictly-typed-events
• Contents
• Installation
• Why?
• Example Usage/Patterns
  • Subscribing and Cancelling Subscriptions
  • Add Events via Inheritence
  • Add Events via Composition

Installation

Install via npm:

npm i -s strictly-typed-events

Why?

Despite the many event libraries already available on npm, I could not find one that met my desires. My goal is to easily setup a class that emits well-defined events, with type-safety while emitting and subscribing/handling, using minimal boilerplate. It should also be simple and intuitive to emit the events, subscribe to events, and cancel subscriptions to events.

Some design goals:

• Simplicity of an "event" just being a call to a named handler function, with the "payload" being represented as one or more function parameters.
• Define all events for a given class in terms of a single interface of event handler function signatures.
• Support subscribing to multiple events with one call, which subsequently supports cancelling that entire subscription to multiple events with one call.
• Easily support exposing only the means to subscribe to events, while keeping the means to emit events private.

Example Usage/Patterns

Here's some basic usage examples of strictly-typed-events and suggested patterns to get you started. See documentation in the source code (detailed TSDoc/JSDoc style comments on all types/classes/methods/etc.) for full details.

Subscribing and Cancelling Subscriptions

For the following examples, assume there is a variable source that implements this library's EventSource interface (has the on()/once()/subscribe() methods to subscribe to events).

Subscribe to one event at a time:

1// Event name will be type-safe based on valid event names for the
2// event source (IDE can auto-complete it!).
3// Event handler parameter types will be inferred based on
4// signature of event.
5// Hold onto the "cancel" function returned when subscribing.
6const cancel = source.on("nameChanged", (newname, oldName) => {
7    // do stuff
8});
9
10// Simply call the cancel function to cancel the subscription
11// to the event.
12cancel();

Subscribe to one event with a one-time-only handler:

1// This handler will self-cancel its own subscription when it is called.
2// You can still store the returned cancel function and call it in case you
3// need to cancel the subscription before the first time it is called.
4source.once("nameChanged", (newname, oldName) => {
5    // do stuff
6});

Get a Promise that will be resolved the next time an event is emitted:

1// Similar to `once()`, except that it returns a promise that resolves to a
2// tuple of the event handler arguments.
3source.onceAsPromise("nameChanged").then(([newname, oldName]) => {
4    // do stuff
5});

Or subscribe to multiple events at once:

1// Hold onto the "cancel" function returned when subscribing.
2const cancel = source.subscribe({
3    // Provide handlers for any number of events in this object.
4    // All type-safe, of course.
5    nameChanged: (newname, oldName) => {
6        // do stuff
7    },
8    // Wrap the handler in the `once()` function to make it a
9    // one-time-only handler
10    anotherEvent: once((whatever) => {
11        // do stuff
12    }),
13});
14
15// Simply call the cancel function to cancel the subscription
16// to ALL events that were originally included in the subscription.
17cancel();

Add Events via Inheritence

Here's the simplest, lowest-effort way to add events to a class. This works well for simple situations where your class is not already extending another class, and you want the on() subscription method to be directly on your class.

1import { WithEventEmitter } from "strictly-typed-events";
2
3// Simply extend `WithEventEmitter<>`, and define your events
4// in the type parameter.
5// Your class will now be an implementation of `EventSource`,
6class Foo extends WithEventEmitter<{
7    /**
8     * You can document your event signatures, and IDEs
9     * will be able to show this documentation in various
10     * contexts where you emit this event or subscribe to
11     * this event.
12     * @param newName - The new name.
13     * @param oldName - The old name.
14     */
15    nameChanged(newName: string, oldName: string): void;
16    /**
17     * Another event.
18     * Define all events conveniently in one place
19     */
20    anotherEvent(whatever: number): void;
21}> {
22    public constructor(private readonly name: string) {
23        super();
24    }
25
26    public setName(newName: string): void {
27        const oldName = this.name;
28        this.name = newName;
29        // `this.emit` is a special protected property inherited from
30        // `WithEventEmitter` with a method for each event.
31        // Just call the method (strictly typed for IDE autocomplete, etc.)
32        this.emit.nameChanged(newName, oldName);
33    }
34}
35
36// Sample instance
37const foo = new Foo();
38
39// Your class itself is an `EventSource` with the "on()" method
40// for subscribing to events.
41const cancel = foo.on("nameChanged", (newname, oldName) => {
42    // do stuff
43});
44
45// Cancel subscription
46cancel();

Add Events via Composition

If you either don't want to, or are unable to, use inheritence to add events to your class, then you can do it through composition instead.

This approach guarantees that you have no conflicts between properties/methods on your class and WithEventEmitter.

1import { EventEmitter } from "strictly-typed-events";
2
3class Foo {
4    // Initialize a private `EventEmitter` instance, and define your
5    // events in the type parameter.
6    private readonly emitter = new EventEmitter<{
7        /**
8         * You can document your event signatures, and IDEs
9         * will be able to show this documentation in various
10         * contexts where you emit this event or subscribe to
11         * this event.
12         * @param newName - The new name.
13         * @param oldName - The old name.
14         */
15        nameChanged(newName: string, oldName: string): void;
16        /**
17         * Another event.
18         * Define all events conveniently in one place
19         */
20        anotherEvent(whatever: number): void;
21    }>();
22
23    // Also expose your `EventEmitter` publicly, but as an
24    // `EventSource` implementationthat only exposes the
25    // ability subscribe to events.
26    public readonly events = this.emitter.toEventSource();
27
28    public constructor(private readonly name: string) {}
29
30    public setName(newName: string): void {
31        const oldName = this.name;
32        this.name = newName;
33        // Use the private EventEmitter instance to emit
34        // events.
35        this.emitter.emit.nameChanged(newName, oldName);
36    }
37}
38
39// Sample instance
40const foo = new Foo();
41
42// Use the public `events` property on your class to
43// subscribe to events.
44const cancel = foo.events.on("nameChanged", (newname, oldName) => {
45    // do stuff
46});
47
48// Cancel subscription
49cancel();