Alternative for @tanstack/devtools-event-bus

[bjesuiter]

I've seen that tanner started to build it's own little event-bus implementation for the devTools and I wanted to chime in and present my @codemonument/event-bus-core library.

The newest version is on JSR right now (since it was originally developed for Deno): https://jsr.io/@codemonument/event-bus-core

Features

Create Events as typescript classes (instead as loose string types)

// Create an empty bus event
export class PlainEvent extends BusEvent<void> {}

// Create a bus event with payload
export interface DemoPayload {
  value: number;
}
export class EventWithPayload extends BusEvent<DemoPayload> {}

Subscribe to events by passing the EventType to this on$ function.

Note: no payload extraction necessary for EventWithPayload, the on$ function automatically extracts the payload so that you don't have to deal with my BusEvent wrapper object!

// Subscribe to events
const sub1 = bus.on$(PlainEvent).subscribe(() => {
  console.log(`Received PlainEvent!`);
});

const sub2 = bus.on$(EventWithPayload).subscribe((payload: DemoPayload) => {
  console.log(`Received EventWithPayload!`, payload);
});

Emitting events is also very satisfying

If you have a PlainEvent, you don't need to pass anything, but if you have an EventWithPayload, it forces you to pass the right shape as defined in your class at the top!

// Emit events
bus.emit(new PlainEvent());
bus.emit(new EventWithPayload({ value: 10 }));

Use BrandedTypes for types with the same payload shape

... simply by using the second parameter of BusEvent

class MyEvent extends BusEvent<void, "MyEvent"> {}
class MyOtherEvent extends BusEvent<void, "MyOtherEvent"> {}

Get access to the raw event stream for custom processing

bus.eventStreamAsObservable().subscribe((event: unknown) => {
  console.log(`Received Event: `, event);
});

Need Callback access? Use [EventBusGroup](https://jsr.io/@codemonument/event-bus-core/doc/~/EventBusGroup)

An EventBusGroup allows for using the event bus with a Callback-Interface. The this.on() method allows to register a callback to a certain event type. The rxjs subscription on the EventBus, which is made during the callback registration, will be stored inside the EventBusGroup. This allows for unsubscribing all callback subscriptions at once.

New Feature: Consume the event stream as async iterable!

I use this to make the events useable in trpc subscriptions:

const asyncIterable = ebus.eventStreamAsAsyncIterable();
for await (const event of asyncIterable) {
  console.log(event);
}

New Feature: restricting the Events on the event bus to known ones

By passing the event classes as a union to the event bus, posting and listening will be restricted to these events:

const restrictedBus = new EventBus<Event1 | Event2>();

Thoughts

I know, rxjs is not everyones cup of tea, but I'm open to switching to another base to slim down the implementation.
Up until now it was the most convenient for a base, due to the implemented 'filter' function, pipe() support / raw eventStream output for extending the functionality and compileability into the browser and on the server.

I like it very much and it actually feels great to use, at least for myself.
But I also know that there are some rough edges so I'm very open to feedback & contribution! :)

Last Disclaimer: The current Readme on JSR is somewhat outdated, so it's best to refer to the SourceCode / Tests to see the current functionality :)

GitHub: https://github.com/codemonument/deno_event_bus_core
JSR: https://jsr.io/@codemonument/event-bus-core

CAUTION: DO NOT use the one at npm, it's legacy right now!