Foundation Broadcast Channel

foundation-broadcast-channel provides a strongly typed Broadcast_Channel API and related utilities. The system uses the same event typing we use in our stores, where the key is the event, and the value is the details or payload if any.

Installation

To enable this module in your application, follow the steps below.

1. Add @genesislcap/foundation-broadcast-channel as a dependency in your package.json file.

Note whenever you change the dependencies of your project, ensure you run the $ npm run bootstrap command again, or npm i, depending on your setup. You can find more information in the package.json basics page.

{
  "dependencies": {
    "@genesislcap/foundation-broadcast-channel": "latest",
    ...
  }
}

Usage

Create a typed channel for your application or package, likely in a config.ts file.

import { registerTypedBroadcastChannel, TypedBroadcastChannel } from '@genesislcap/foundation-broadcast-channel';

// Define or import the channel event / message map
export type GenesisResourcesEvents = {
  'resources-loaded': ResourceItem[];
  'resources-unloaded': void;
};

// Define the interface
export interface GenesisResourcesChannel extends TypedBroadcastChannel<GenesisResourcesEvents> {}

// Define the DI key
export const GenesisResourcesChannel = registerTypedBroadcastChannel<GenesisResourcesEvents>(GenesisResourcesChannelId);

Inject the channel into the actors you wish to post broadcast messages from.

import { GenesisResourcesChannel } from '@genesislcap/foundation-comms';

constructor(@GenesisResourcesChannel protected channel: GenesisResourcesChannel) {}

// Broadcast strongly typed messages
this.channel.postMessage('resources-loaded', this.resources);

Inject the channel into the actors you wish to recieve broadcast messages from.

import { GenesisResourcesChannel } from '@genesislcap/foundation-comms';

@GenesisResourcesChannel protected channel: GenesisResourcesChannel;

// Handle broadcasted messages and use the provided type narrowing API
this.channel.onmessage = (ev) => {
  if (this.channel.isMessageType('resources-loaded', ev)) {
    // Typescript now knows what detail is
    if (!ev.data.detail.length) {
      throw Error('No backend resources available');
    }
  }
};

// Close the channel when finished, perhaps on disconnectedCallback
this.channel.close();

Note that injected channels are transient by design.

API Docs

License

Note: this project provides front-end dependencies and uses licensed components listed in the next section; thus, licenses for those components are required during development. Contact Genesis Global for more details.

Licensed components

Genesis low-code platform