Event Emitter

MonsterJS provides an event emitter that can be shared among different components. This emitter is used to notify other components when a specific event is triggered.

Creating an Event Emitter

To create an event emitter, you can use the createEventEmitter function.

Example:

import { createEventEmitter } from "@monster-js/core";

export const routeChangeEvent = createEventEmitter();

Now, you can import the routeChangeEvent function into your component. This function accepts the component's this context as an argument. It returns an object that has dispatch and subscribe properties used to trigger and listen for events, respectively.

Example:

import { routeChangeEvent } from './route-change.event';

export function App() {
    const [trigger, subscribe] = routeChangeEvent(this);

    return <h1>App Component</h1>
}

Triggering the Event

To trigger the event, simply call the dispatch function returned by the event emitter function.

Example:

import { routeChangeEvent } from './route-change.event';

export function App() {

    const routeChange = routeChangeEvent(this);

    const triggerEvent = () => {
        routeChange.dispatch();
    }

    return <button on:click={triggerEvent}>Trigger event</button>
}

You can also pass optional data to the event, which will be received by the subscribers.

Example:

import { routeChangeEvent } from './route-change.event';

export function App() {

    const routeChange = routeChangeEvent(this);

    const triggerEvent = () => {
        routeChange.dispatch('Triggered in app component.');
    }

    return <button on:click={triggerEvent}>Trigger event</button>
}

Subscribing to the Event

To subscribe to the event, use the subscribe function returned by the event emitter function.

Example:

import { routeChangeEvent } from './route-change.event';

export function App() {

    const routeChange = routeChangeEvent(this);

    routeChange.subscribe(this, () => {
        console.log('The event is triggered.');
    });

    return <h1>App Component</h1>
}

You can also retrieve the data passed by the dispatch function within the subscriber.

Example:

import { routeChangeEvent } from './route-change.event';

export function App() {

    const routeChange = routeChangeEvent(this);

    routeChange.subscribe(this, (message) => {
        console.log(message);
    });

    return <h1>App Component</h1>
}