@genesislcap/foundation-broadcast-channel 14.172.0

package/README.md

@@ -0,0 +1,87 @@
+# Foundation Broadcast Channel
+
+[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
+[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](https://www.typescriptlang.org/)
+
+`foundation-broadcast-channel` provides a strongly typed [Broadcast_Channel](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API) 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](https://learn.genesis.global/secure/web/basics/package-json-basics/) page._
+
+```json
+{
+  "dependencies": {
+    "@genesislcap/foundation-broadcast-channel": "latest",
+    ...
+  }
+}
+```
+
+## Usage
+
+Create a typed channel for your application or package, likely in a config.ts file.
+
+```ts
+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.
+
+```ts
+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.
+
+```ts
+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](./docs/api/index.md)
+
+## 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](https://genesis.global/contact-us/) for more details.
+
+### Licensed components
+Genesis low-code platform

package/dist/dts/__test__/config.d.ts

@@ -0,0 +1,12 @@
+import { TypedBroadcastChannel } from '../broadcast-channel';
+import { TestEvents } from './types';
+/**
+ * @internal
+ */
+export interface TestChannel extends TypedBroadcastChannel<TestEvents> {
+}
+/**
+ * @internal
+ */
+export declare const TestChannel: import("@microsoft/fast-foundation").InterfaceSymbol<TypedBroadcastChannel<TestEvents>>;
+//# sourceMappingURL=config.d.ts.map

package/dist/dts/__test__/config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../src/__test__/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiC,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC5F,OAAO,EAAiB,UAAU,EAAE,MAAM,SAAS,CAAC;AAEpD;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,qBAAqB,CAAC,UAAU,CAAC;CAAG;AAEzE;;GAEG;AAEH,eAAO,MAAM,WAAW,yFAA2D,CAAC"}

package/dist/dts/__test__/elements.d.ts

@@ -0,0 +1,59 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { TestChannel } from './config';
+import { TestEntity } from './types';
+/**
+ * @internal
+ */
+export declare class SubscriberTestElement extends FASTElement {
+    /**
+     * @public
+     */
+    channel: TestChannel;
+    /**
+     * @public
+     */
+    entities: TestEntity[];
+    /**
+     * @public
+     */
+    connectedCallback(): void;
+    /**
+     * @public
+     */
+    disconnectedCallback(): void;
+}
+/**
+ * @internal
+ */
+export declare class BroadcasterTestElement extends FASTElement {
+    /**
+     * @public
+     */
+    channel: TestChannel;
+    /**
+     * @public
+     */
+    postLoadedMessage(detail: TestEntity[]): void;
+    /**
+     * @public
+     */
+    postUnloadedMessage(): void;
+    /**
+     * @public
+     */
+    disconnectedCallback(): void;
+}
+/**
+ * @internal
+ */
+export declare class TestElement extends FASTElement {
+    /**
+     * @public
+     */
+    broadcaster: BroadcasterTestElement;
+    /**
+     * @public
+     */
+    subscriber: SubscriberTestElement;
+}
+//# sourceMappingURL=elements.d.ts.map

package/dist/dts/__test__/elements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../src/__test__/elements.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,WAAW,EAAyB,MAAM,yBAAyB,CAAC;AAC5F,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC;;GAEG;AACH,qBAMa,qBAAsB,SAAQ,WAAW;IACpD;;OAEG;IACU,OAAO,EAAE,WAAW,CAAC;IAElC;;OAEG;IACS,QAAQ,EAAE,UAAU,EAAE,CAAC;IAEnC;;OAEG;IACH,iBAAiB;IAkBjB;;OAEG;IACH,oBAAoB;CAIrB;AAED;;GAEG;AACH,qBAMa,sBAAuB,SAAQ,WAAW;IACrD;;OAEG;IACU,OAAO,EAAE,WAAW,CAAC;IAElC;;OAEG;IACH,iBAAiB,CAAC,MAAM,EAAE,UAAU,EAAE;IAItC;;OAEG;IACH,mBAAmB;IAInB;;OAEG;IACH,oBAAoB;CAIrB;AAED;;GAEG;AACH,qBASa,WAAY,SAAQ,WAAW;IAC1C;;OAEG;IACS,WAAW,EAAE,sBAAsB,CAAC;IAChD;;OAEG;IACS,UAAU,EAAE,qBAAqB,CAAC;CAC/C"}

package/dist/dts/__test__/index.d.ts

@@ -0,0 +1,4 @@
+export * from './config';
+export * from './elements';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/dts/__test__/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/__test__/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC"}

package/dist/dts/__test__/types.d.ts

@@ -0,0 +1,28 @@
+import { TypedMessageEvent } from '../broadcast-channel';
+/**
+ * @internal
+ */
+export declare const TestChannelId = "test-channel";
+/**
+ * @internal
+ */
+export type TestEntity = {
+    label: string;
+    quantity?: number;
+};
+/**
+ * @internal
+ */
+export type TestEvents = {
+    loaded: TestEntity[];
+    unloaded: void;
+};
+/**
+ * @internal
+ */
+export declare const mockLoadedEvent: (detail?: TestEntity[]) => TypedMessageEvent<TestEvents, "loaded">;
+/**
+ * @internal
+ */
+export declare const mockUnloadedEvent: () => TypedMessageEvent<TestEvents, "unloaded">;
+//# sourceMappingURL=types.d.ts.map

package/dist/dts/__test__/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/__test__/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEzD;;GAEG;AACH,eAAO,MAAM,aAAa,iBAAiB,CAAC;AAE5C;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,QAAQ,EAAE,IAAI,CAAC;CAChB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,YAAY,UAAU,EAAE,4CAOP,CAAC;AAG9C;;GAEG;AACH,eAAO,MAAM,iBAAiB,iDAKiB,CAAC"}

package/dist/dts/broadcast-channel/broadcast-channel.d.ts

@@ -0,0 +1,123 @@
+import { EventDetailMap } from '@genesislcap/foundation-events';
+/**
+ * A TypedMessageEvent for BroadcastChannel transmission.
+ * @public
+ */
+export type TypedMessageEvent<TEventDetailMap extends EventDetailMap, T extends keyof TEventDetailMap> = MessageEvent<{
+    type: T;
+    detail: TEventDetailMap[T];
+}>;
+/**
+ * @internal
+ */
+type PostMessage<TEventDetailMap extends EventDetailMap> = <K extends keyof TEventDetailMap>(...args: TEventDetailMap[K] extends void ? [type: K] : [type: K, detail: TEventDetailMap[K]]) => void;
+/**
+ * @internal
+ */
+type OnMessage<TEventDetailMap extends EventDetailMap> = ((this: BroadcastChannel, ev: TypedMessageEvent<TEventDetailMap, keyof TEventDetailMap>) => any) | null;
+/**
+ * @internal
+ */
+type OnMessageError<TEventDetailMap extends EventDetailMap> = OnMessage<TEventDetailMap>;
+/**
+ * A TypedBroadcastChannel for sending and receiving typed messages based on {@link @genesislcap/foundation-events#EventDetailMap} input.
+ *
+ * @example
+ * ```ts
+ * export type GenesisResourcesEvents = {
+ *   'resources-loaded': ResourceItem[];
+ *   'resources-unloaded': void;
+ * };
+ * ...
+ * protected channel: TypedBroadcastChannel<GenesisResourcesEvents>;
+ * ```
+ *
+ * See the {@link registerTypedBroadcastChannel} and {@link createTypedBroadcastChannel} APIs below.
+ *
+ * @public
+ */
+export interface TypedBroadcastChannel<TEventDetailMap extends EventDetailMap> extends Omit<BroadcastChannel, 'postMessage' | 'onmessage' | 'onmessageerror'> {
+    /**
+     * Post strongly typed messages.
+     * @example
+     * The event detail map provided to the channel on creation will provide `postMessage` typing.
+     * ```ts
+     * type GenesisResourcesEvents = {
+     *   'resources-loaded': ResourceItem[];
+     *   'resources-unloaded': void;
+     * };
+     * ...
+     * channel.postMessage('resources-loaded', this.resources); // ok, as this.resources is an array of ResourceItems.
+     * channel.postMessage('resources-loaded'); // not ok, as an array is expected for this message type.
+     * channel.postMessage('resources-unloaded'); // ok, as this message type maps to void for its detail.
+     * ```
+     */
+    postMessage: PostMessage<TEventDetailMap>;
+    /**
+     * On message handler.
+     * @example Use the `channel.isMessageType` method to narrow based on message types.
+     * ```ts
+     * import { GenesisResourcesChannel } from '@genesislcap/foundation-comms';
+     * ...
+     * @GenesisResourcesChannel protected channel: GenesisResourcesChannel;
+     * ...
+     * this.channel.onmessage = (ev) => {
+     *   if (this.channel.isMessageType('resources-loaded', ev)) {
+     *     if (!ev.data.detail.length) {
+     *       throw Error('No backend resources available');
+     *     }
+     *   }
+     * };
+     * ...
+     * this.channel.close();
+     * ```
+     */
+    onmessage: OnMessage<TEventDetailMap>;
+    onmessageerror: OnMessageError<TEventDetailMap>;
+    /**
+     * A type predicate function to narrow down message events based on their 'type' property.
+     * @param type - The message type.
+     * @param event - The message event.
+     */
+    isMessageType<T extends keyof TEventDetailMap>(type: T, event: TypedMessageEvent<TEventDetailMap, keyof TEventDetailMap>): event is TypedMessageEvent<TEventDetailMap, T>;
+}
+/**
+ * Default TypedBroadcastChannel implementation.
+ * @public
+ */
+export declare class DefaultTypedBroadcastChannel<TEventDetailMap extends EventDetailMap> extends BroadcastChannel implements TypedBroadcastChannel<TEventDetailMap> {
+    /** {@inheritDoc TypedBroadcastChannel.postMessage} */
+    postMessage: PostMessage<TEventDetailMap>;
+    /** {@inheritDoc TypedBroadcastChannel.isMessageType} */
+    isMessageType: <T extends keyof TEventDetailMap>(type: T, event: TypedMessageEvent<TEventDetailMap, keyof TEventDetailMap>) => event is TypedMessageEvent<TEventDetailMap, T>;
+}
+/**
+ * Creates a dependency injection key for the broadcast channel being registered which is lazily created when injected.
+ * @example In a package's config.ts
+ * ```ts
+ * export interface GenesisResourcesChannel extends TypedBroadcastChannel<GenesisResourcesEvents> {}
+ * ...
+ * export const GenesisResourcesChannel = registerTypedBroadcastChannel<GenesisResourcesEvents>(GenesisResourcesChannelId);
+ * ```
+ * @param name - The channel name.
+ * @returns The created key.
+ * @public
+ */
+export declare const registerTypedBroadcastChannel: <TEventDetailMap extends EventDetailMap>(name: string) => import("@microsoft/fast-foundation").InterfaceSymbol<TypedBroadcastChannel<TEventDetailMap>>;
+/**
+ * Creates a strongly typed broadcast channel.
+ *
+ * @remarks
+ * `registerTypedBroadcastChannel` may be preferred, as it will create and register the channel in the DI.
+ *
+ * @example
+ * ```ts
+ * const channel = createTypedBroadcastChannel<GenesisResourcesEvents>(GenesisResourcesChannelId);
+ * ```
+ * @param name - The channel name.
+ * @returns The created TypedBroadcastChannel.
+ * @public
+ */
+export declare const createTypedBroadcastChannel: <TEventDetailMap extends EventDetailMap>(name: string) => DefaultTypedBroadcastChannel<TEventDetailMap>;
+export {};
+//# sourceMappingURL=broadcast-channel.d.ts.map

package/dist/dts/broadcast-channel/broadcast-channel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"broadcast-channel.d.ts","sourceRoot":"","sources":["../../../src/broadcast-channel/broadcast-channel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAGhE;;;GAGG;AACH,MAAM,MAAM,iBAAiB,CAC3B,eAAe,SAAS,cAAc,EACtC,CAAC,SAAS,MAAM,eAAe,IAC7B,YAAY,CAAC;IACf,IAAI,EAAE,CAAC,CAAC;IACR,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;CAC5B,CAAC,CAAC;AAEH;;GAEG;AACH,KAAK,WAAW,CAAC,eAAe,SAAS,cAAc,IAAI,CAAC,CAAC,SAAS,MAAM,eAAe,EACzF,GAAG,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,SAAS,IAAI,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,KACzF,IAAI,CAAC;AAEV;;GAEG;AACH,KAAK,SAAS,CAAC,eAAe,SAAS,cAAc,IACjD,CAAC,CAAC,IAAI,EAAE,gBAAgB,EAAE,EAAE,EAAE,iBAAiB,CAAC,eAAe,EAAE,MAAM,eAAe,CAAC,KAAK,GAAG,CAAC,GAChG,IAAI,CAAC;AAET;;GAEG;AACH,KAAK,cAAc,CAAC,eAAe,SAAS,cAAc,IAAI,SAAS,CAAC,eAAe,CAAC,CAAC;AAEzF;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,qBAAqB,CAAC,eAAe,SAAS,cAAc,CAC3E,SAAQ,IAAI,CAAC,gBAAgB,EAAE,aAAa,GAAG,WAAW,GAAG,gBAAgB,CAAC;IAC9E;;;;;;;;;;;;;;OAcG;IACH,WAAW,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;IAC1C;;;;;;;;;;;;;;;;;;OAkBG;IACH,SAAS,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;IACtC,cAAc,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IAChD;;;;OAIG;IACH,aAAa,CAAC,CAAC,SAAS,MAAM,eAAe,EAC3C,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,iBAAiB,CAAC,eAAe,EAAE,MAAM,eAAe,CAAC,GAC/D,KAAK,IAAI,iBAAiB,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC;CACnD;AAED;;;GAGG;AACH,qBAAa,4BAA4B,CAAC,eAAe,SAAS,cAAc,CAC9E,SAAQ,gBACR,YAAW,qBAAqB,CAAC,eAAe,CAAC;IAEjD,sDAAsD;IAEtD,WAAW,EAAE,WAAW,CAAC,eAAe,CAAC,CAMvC;IACF,wDAAwD;IACxD,aAAa,oDAEJ,kBAAkB,eAAe,EAAE,MAAM,eAAe,CAAC,oDAGhE;CACH;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,6BAA6B,iDAClC,MAAM,iGAQb,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,2BAA2B,iDAChC,MAAM,kDAGb,CAAC"}

package/dist/dts/broadcast-channel/index.d.ts

@@ -0,0 +1,2 @@
+export * from './broadcast-channel';
+//# sourceMappingURL=index.d.ts.map

package/dist/dts/broadcast-channel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/broadcast-channel/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

package/dist/dts/index.d.ts

@@ -0,0 +1,3 @@
+export * from './broadcast-channel';
+export * from './utils';
+//# sourceMappingURL=index.d.ts.map

package/dist/dts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC"}

package/dist/dts/index.federated.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=index.federated.d.ts.map

package/dist/dts/index.federated.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.federated.d.ts","sourceRoot":"","sources":["../../src/index.federated.ts"],"names":[],"mappings":""}

package/dist/dts/tsdoc-metadata.json

@@ -0,0 +1,11 @@
+// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
+// It should be published with your NPM package.  It should not be tracked by Git.
+{
+  "tsdocVersion": "0.12",
+  "toolPackages": [
+    {
+      "packageName": "@microsoft/api-extractor",
+      "packageVersion": "7.34.9"
+    }
+  ]
+}

package/dist/dts/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './logger';
+//# sourceMappingURL=index.d.ts.map

package/dist/dts/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/dist/dts/utils/logger.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @public
+ */
+export declare const logger: import("@genesislcap/foundation-logger").Logger;
+//# sourceMappingURL=logger.d.ts.map

package/dist/dts/utils/logger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"logger.d.ts","sourceRoot":"","sources":["../../../src/utils/logger.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,eAAO,MAAM,MAAM,iDAA+C,CAAC"}

package/dist/esm/__test__/config.js

@@ -0,0 +1,7 @@
+import { registerTypedBroadcastChannel } from '../broadcast-channel';
+import { TestChannelId } from './types';
+/**
+ * @internal
+ */
+// Define the DI key
+export const TestChannel = registerTypedBroadcastChannel(TestChannelId);

package/dist/esm/__test__/elements.js

@@ -0,0 +1,108 @@
+import { __decorate } from "tslib";
+import { customElement, FASTElement, html, observable, ref } from '@microsoft/fast-element';
+import { TestChannel } from './config';
+/**
+ * @internal
+ */
+let SubscriberTestElement = class SubscriberTestElement extends FASTElement {
+    /**
+     * @public
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.channel.onmessage = (ev) => {
+            if (this.channel.isMessageType('loaded', ev)) {
+                const entities = ev.data.detail;
+                if (!entities.length) {
+                    throw Error('No test entities available');
+                }
+                this.entities = entities;
+                return;
+            }
+            if (this.channel.isMessageType('unloaded', ev)) {
+                this.entities = undefined;
+            }
+        };
+    }
+    /**
+     * @public
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.channel.close();
+    }
+};
+__decorate([
+    TestChannel
+], SubscriberTestElement.prototype, "channel", void 0);
+__decorate([
+    observable
+], SubscriberTestElement.prototype, "entities", void 0);
+SubscriberTestElement = __decorate([
+    customElement({
+        name: 'subscriber-test-element',
+        template: html `
+    <template></template>
+  `,
+    })
+], SubscriberTestElement);
+export { SubscriberTestElement };
+/**
+ * @internal
+ */
+let BroadcasterTestElement = class BroadcasterTestElement extends FASTElement {
+    /**
+     * @public
+     */
+    postLoadedMessage(detail) {
+        this.channel.postMessage('loaded', detail);
+    }
+    /**
+     * @public
+     */
+    postUnloadedMessage() {
+        this.channel.postMessage('unloaded');
+    }
+    /**
+     * @public
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.channel.close();
+    }
+};
+__decorate([
+    TestChannel
+], BroadcasterTestElement.prototype, "channel", void 0);
+BroadcasterTestElement = __decorate([
+    customElement({
+        name: 'broadcaster-test-element',
+        template: html `
+    <template></template>
+  `,
+    })
+], BroadcasterTestElement);
+export { BroadcasterTestElement };
+/**
+ * @internal
+ */
+let TestElement = class TestElement extends FASTElement {
+};
+__decorate([
+    observable
+], TestElement.prototype, "broadcaster", void 0);
+__decorate([
+    observable
+], TestElement.prototype, "subscriber", void 0);
+TestElement = __decorate([
+    customElement({
+        name: 'broadcast-channel-test-element',
+        template: html `
+    <template>
+      <broadcaster-test-element ${ref('broadcaster')}></broadcaster-test-element>
+      <subscriber-test-element ${ref('subscriber')}></subscriber-test-element>
+    </template>
+  `,
+    })
+], TestElement);
+export { TestElement };

package/dist/esm/__test__/index.js

@@ -0,0 +1,3 @@
+export * from './config';
+export * from './elements';
+export * from './types';

package/dist/esm/__test__/types.js

@@ -0,0 +1,24 @@
+/**
+ * @internal
+ */
+export const TestChannelId = 'test-channel';
+/**
+ * @internal
+ */
+export const mockLoadedEvent = (detail = [{
+        label: 'foo'
+    }]) => ({
+    data: {
+        type: 'loaded',
+        detail,
+    }
+});
+/**
+ * @internal
+ */
+export const mockUnloadedEvent = () => ({
+    data: {
+        type: 'unloaded',
+        detail: undefined,
+    }
+});

package/dist/esm/broadcast-channel/broadcast-channel.js

@@ -0,0 +1,61 @@
+import { DI } from '@microsoft/fast-foundation';
+/**
+ * Default TypedBroadcastChannel implementation.
+ * @public
+ */
+export class DefaultTypedBroadcastChannel extends BroadcastChannel {
+    constructor() {
+        super(...arguments);
+        /** {@inheritDoc TypedBroadcastChannel.postMessage} */
+        // @ts-ignore
+        this.postMessage = (...args) => {
+            const [type, detail] = args;
+            super.postMessage({
+                type,
+                detail,
+            });
+        };
+        /** {@inheritDoc TypedBroadcastChannel.isMessageType} */
+        this.isMessageType = (type, event) => {
+            var _a;
+            return ((_a = event.data) === null || _a === void 0 ? void 0 : _a.type) === type;
+        };
+    }
+}
+/**
+ * Creates a dependency injection key for the broadcast channel being registered which is lazily created when injected.
+ * @example In a package's config.ts
+ * ```ts
+ * export interface GenesisResourcesChannel extends TypedBroadcastChannel<GenesisResourcesEvents> {}
+ * ...
+ * export const GenesisResourcesChannel = registerTypedBroadcastChannel<GenesisResourcesEvents>(GenesisResourcesChannelId);
+ * ```
+ * @param name - The channel name.
+ * @returns The created key.
+ * @public
+ */
+export const registerTypedBroadcastChannel = (name) => {
+    class Value extends DefaultTypedBroadcastChannel {
+        constructor() {
+            super(name);
+        }
+    }
+    return DI.createInterface((x) => x.transient(Value));
+};
+/**
+ * Creates a strongly typed broadcast channel.
+ *
+ * @remarks
+ * `registerTypedBroadcastChannel` may be preferred, as it will create and register the channel in the DI.
+ *
+ * @example
+ * ```ts
+ * const channel = createTypedBroadcastChannel<GenesisResourcesEvents>(GenesisResourcesChannelId);
+ * ```
+ * @param name - The channel name.
+ * @returns The created TypedBroadcastChannel.
+ * @public
+ */
+export const createTypedBroadcastChannel = (name) => {
+    return new DefaultTypedBroadcastChannel(name);
+};

package/dist/esm/broadcast-channel/index.js

@@ -0,0 +1 @@
+export * from './broadcast-channel';

package/dist/esm/index.federated.js

@@ -0,0 +1 @@
+import('./index');

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export * from './broadcast-channel';
+export * from './utils';

package/dist/esm/utils/index.js

@@ -0,0 +1 @@
+export * from './logger';

package/dist/esm/utils/logger.js

@@ -0,0 +1,5 @@
+import { createLogger } from '@genesislcap/foundation-logger';
+/**
+ * @public
+ */
+export const logger = createLogger('foundation-broadcast-channel');