Overview
EventEmitter comparison
EventEmitter comparisonLet us consider this example, use of
EventEmitter:1
import { EventEmitter } from "events";
2
3
const eventEmitter = new EventEmitter();
4
5
eventEmitter.on("text", text => console.log(text));
6
eventEmitter.once("time", time => console.log(time));
7
8
eventEmitter.emit("text", "hi!"); //Prints "hi!"
9
eventEmitter.emit("time", 123); //Prints "123"
10
eventEmitter.emit("time", 1234); //Prints nothing ( once )
Copied!
In EVT the recommended approach is to give every event it's
Evt instance. Translation of the example:1
import { Evt } from "evt";
2
//Or import { Evt } from "https://evt.land/x/evt/mod.ts" on deno
3
4
const evtText = Evt.create<string>();
5
const evtTime = Evt.create<number>();
6
7
evtText.attach(text => console.log(text));
8
evtTime.attachOnce(time => console.log(time));
9
10
evtText.post("hi!");
11
evtTime.post(123);
12
evtTime.post(1234);
Copied!
However, the traditional approach that consists of gathering all the events in a single bus is also an option.
Note: Due to a current TypeScript limitation the
.attach() methods need to be prefixed with $ when used with fλ ( to in this case) operators but evt.$attach*() are actually just aliases to the corresponding evt.attach*() methods.1
import { Evt, to } from "evt";
2
3
const evt = Evt.create<
4
[ "text", string ] |
5
[ "time", number ]
6
>();
7
8
evt.$attach(to("text"), text => console.log(text));
9
evt.$attachOnce(to("time"), time => console.log(time));
10
11
evt.post(["text", "hi!"]);
12
evt.post(["time", 123]);
13
evt.post(["time", 1234]);
Copied!
RxJS comparison
"Get started" examples.
1
import { fromEvent } from "rxjs";
2
import { throttleTime, map, scan } from "rxjs/operators";
3
4
fromEvent(document, "click")
5
.pipe(
6
throttleTime(1000),
7
map(event => event.clientX), // (TS: clientX does not exsist on type Event)
8
scan((count, clientX) => count + clientX, 0)
9
)
10
.subscribe(count => console.log(count))
11
;
12
13
/* ------------------------------ */
14
15
import { Evt, throttleTime } from "evt";
16
17
Evt.from(document, "click")
18
.pipe(
19
throttleTime(1000),
20
event => [ event.clientX ],
21
[(clientX, count) => [ count + clientX ], 0]
22
)
23
.attach(count => console.log(count))
24
;
Copied!
RxJS operators vs EVT operator
Unlike RxJS operators that return
Observable EVT operators are function build using native language features, no by composing other pre-existing operators or instantiating any particular class.Consider that we have an emitter for this data type:
1
type Data = {
2
type: "TEXT";
3
text: string;
4
} | {
5
type: "AGE";
6
age: number;
7
};
Copied!
We want to get a
Promise<string> that resolves with the next text event.1
import { Subject } from "rxjs";
2
import { filter, first, map } from "rxjs/operators";
3
4
const subject = new Subject<Data>();
5
6
const prText = subject
7
.pipe(
8
filter(
9
(data): data is Extract<Data, { type: "TEXT" }> =>
10
data.type === "TEXT"
11
),
12
first(),
13
map(data => data.text)
14
)
15
.toPromise()
16
;
17
18
/* ---------------------------------------------------------------- */
19
20
import { Evt } from "evt";
21
22
const evt = new Evt<Data>();
23
24
const prText = evt.waitFor(
25
data => data.type !== "TEXT" ?
26
null : [data.text]
27
);
Copied!
Let us consider another example involving state encapsulation. Here we want to accumulate all texts events until
"STOP"1
import { Subject } from "rxjs";
2
import { map, filter, takeWhile, scan } from "rxjs/operators";
3
4
const subject = new Subject<Data>();
5
6
subject
7
.pipe(
8
filter(
9
(data): data is Extract<Data, { type: "TEXT" }> =>
10
data.type === "TEXT"
11
),
12
map(data=> data.text),
13
takeWhile(text => text !== "STOP"),
14
scan((prev, text) => `${prev} ${text}`, "=>")
15
)
16
.subscribe(str => console.log(str))
17
;
18
19
/* ---------------------------------------------------------------- */
20
21
import { Evt } from "evt";
22
23
const evtData = new Evt<Data>();
24
25
evtData.$attach(
26
[
27
(data, prev) =>
28
data.type !== "TEXT" ?
29
null :
30
data.text === "STOP" ?
31
"DETACH" :
32
[`${prev} ${data.text}`]
33
,
34
"=>"
35
], //<= Stateful fλ operator
36
str => console.log(str)
37
);
Copied!
Where to start
The API reference documentation is full of runnable examples that should get you started in no time.
Last modified 2yr ago