@equinor/fusion-framework-module-event

This package is meant for dispatching events between modules (siblings) and cross instances (parent|adjunct)

> Based on the native node/web js event system, __but__ the dispatcher is async for easier handling of cancelable events.
>
> __NOTE__ that creating a cancelable event without awaiting resolution, will not respect the preventDefault behavior!

Configuration

``ts
const configurator = (config) => {
/* disable propagation of all events /
delete config.event.onBubble

/* pre-handle all events before dispatch /
config.event.onDispatch = (e: FrameworkEvent) => {
if(!allow_event(e)){
e.preventDefault();
}
}
}
`

$3


`ts
import { ModuleEvent } from '@equinor/fusion-framework-module-event';
/* declare event type for code completion /
declare module '@equinor/fusion-framework-module-event' {
interface ModuleEventMap {
'someEvent': FrameworkEvent>;
}
}
`

$3

`ts
import { ModuleEvent } from '@equinor/fusion-framework-module-event';

type CustomFrameworkEventInit = FrameworkEventInit;

class MyCustomEvent extends FrameworkEvent {
constructor(init: CustomFrameworkEventInit) { /* logic / }
}

/* declare event type for code completion /
declare module '@equinor/fusion-framework-module-event' {
interface ModuleEventMap {
'myCustomEvent': MyCustomEvent;
}
}
`

Usage

$3


`ts
const teardown = modules.event.addEventListener('someEvent', (event) => console.log(event));
// remove event listener
teardown();
`

$3

`ts
// simple
const event = await modules.event.dispatchEvent(
'myEvent',
{
detail: 'some detail',
canBubble: false,
cancelable: true
}
);

// alternative
const event = new MyCustomFrameworkEvent(
'myCustomEvent',
{
detail: 'some detail',
canBubble: false,
cancelable: true
}
);
await modules.event.dispatchEvent(myEvent);


if(!event.defaultPrevent){
doSomeAction();
}
`

$3


> note that when subscribing to events, it does not allow side-effects, like preventDefault and stopPropagation
`ts
const subscription = modules.event.event$.subscribe(console.log);
subscription.add(
modules.event.event$.subscribe({
next: (event) => console.log(event),
error: (err) => console.error(err),
complete: () => 'event provider disposed'
})
);
// when unmount
subscription.unsubscribe();
``