emitter-master

emitter-master

Support for offline publishing and subscribing events

Usage

import { Emitter } from "emitter-master"

Emitter.sender("A<->B", 123) // You can send before you receive, which is a characteristic of the library

const ret = await Emitter.receiver("A<->B" ) // This is returned immediately in any case, or null in the case of no value
// or
const clear = Emitter.receiver("A<->B",function(val){
    console.log(val)
})

// You can also give the default value when there is no message
const ret2 = await Emitter.receiver("A->B", default_value) // Note that the second argument is the default if it is not a function

// clear event，Note that this is only necessary if the second argument is a function
clear()

// Note that I actually don't recommend putting the function out on its own, because it loses the type reminder, but this is just a demonstration
function handle({event_name, data}){
    if(event_name === "A->B"){
        ...
    }else if(event_name === "B->C"){
        ...
    }else{
        ...
    }
}
        
const clear = Emitter.receiver(["A->B", "B->C"], handle)

// There are two ways to clear a listener
Emitter.clear(["A->B", "B->C"], handle)
// or
clear()

Here's how I recommend writing it

// When the event name is array, the callback function parameter will be different, see the specific type prompts
const clear = Emitter.receiver( [ "A->B", "B->C" ], function ( { event_name, data } )
{
    if(event_name === "A->B")
    {
        console.log(data)
    }
    else if(event_name === "B->C")
    {
        console.log(data)
    }
} );

// You need to call the clear function at the right time，Note that this is only necessary if the second argument is a function
clear()

sender has an alias called trigger

receiver has an alias called listener

once indicates that the system listens only once

You can choose a more appropriate name based on your scene

Recommendation specifications in vue and react

The first thing to be clear is that the library is not framework-related, but many front ends now use vue and react to build websites, so here is my recommendation

**Suggestion 1：**Define the event_name.ts file to store the event name. This file only defines the event name and the comment of the event name. Note that each event name must have A comment, otherwise it is meaningless. The form 'A<->B' indicates that A and B send data to each other. Here is an example

// This describes what the event does, so you can see the details in the ide with a quick preview
const CompA_CompB = "CompA->CompB"

export {
	CompA_CompB
}

Suggestion 2: For non-component-to-component communication that still explicitly specifies the source and destination, such as when I send to component CompA in Axios encapsulation, I can name it：Axios->CompA

**Suggestion 3：**Remember to clear events before the component unmount

An example of use in vue3 is given below

<script lang="ts" setup>
const clear = Emitter.receiver( "A->B", function ( data )
{
    console.log( data );
} );
// This is necessary.
onBeforeUnmount( clear );
</script>

Example

import {Emitter} from "emitter-master"
Emitter.sender( "a-b" , true); // Comment this out ret will be null, and uncomment will be true

( async function ()
 {
    const ret = await Emitter.receiver( "a-b" );
    console.log("ret")
    console.log( ret ); // true
} )();

typescript

You can define the parameters to be received for specific events

declare module "emitter-master"
{
    interface EmitterMasterEventMap
    {
        "A->B": { source: number, name: string }
        "C->D": any
    }
}