Create cross Podlet communication in browser

[trygve-lie]

We need a way to communicate between Podlets in the browser. The use case is that something happening in one Podlet should trigger a change in another Podlet on the page.

Such communication should:

• not require Podlets to know anything about other Podlets DOM or browser module API.
• not force a given load order of Podlets.
• broadcast communication to all listening for it.
• pass on defined object which can hold a payload between Podlets.

Initially this is an EventEmitter which is attached to a global scope in a document where Podlets can subscribe to events and emit events.

API should be something down this road;

// In podlet A - Broadcast an event
import PodiumMsgBus from '@podium/browser';

const msgBus = new PodiumMsgBus();

msgBus.publish({ channel: 'search', topic: 'query', payload: 42 });

// In podlet B - Subscribe for events
import PodiumMsgBus from '@podium/browser';

const msgBus = new PodiumMsgBus();

msgBus.subscribe({ channel: 'search', topic: 'query' }, event => {
    console.log(event) // emitted object should be instance of a defined Event class
});

It should also be possible to retrieve a given set of previous messages from a given channel and topic combo.

import PodiumMsgBus from '@podium/browser';

const msgBus = new PodiumMsgBus();

const latest = await msgBus.log({ channel: 'search', topic: 'query' });

msgBus.subscribe({ channel: 'search', topic: 'query' }, event => {
    console.log(event) // emitted object should be instance of a defined Event class
});

NOTES:

• EventEmitter3 is a pretty battle tested EventEmitter which works in the browser: https://github.com/primus/eventemitter3
• Preferly is this written as ESM.
• Preferly is test framework TAP.

[alexanbj]

Repository is found here: https://github.com/podium-lib/browser

[alexanbj]

I've now published a beta version: https://www.npmjs.com/package/@podium/browser