event-listeners-manager v0.1.6
event-listeners-manager
A manager for event listeners either custom or in DOM.
Support
If you like the project, don't forget to give a star.
If you have any issues, post them on Github.
Github | https://github.com/doanhtu07/event-listeners-manager
Thank you!
Table of content
Demo
CodeSandbox: https://codesandbox.io/s/test-event-listeners-manager-20qc3
Problem
If your project is events-driven, things can become messy.
Event Listeners Manager helps bundle event listeners into classes for easier control.
Solution: How it works
There are 3 important parts: Manager, Listener, Listener Factory
Manager: registering, controlling, and keeping track of listeners' states and listeners.
Listener: The core of your code logic. You can implement them however you want, as long as it follows below structure.
Listener Factory:
- A class that helps generate objects of a specific Listener class.
- When you register a Listener, Manager needs the Listener Factory of that Listener.
Setup
Install package:
npm install event-listeners-manager
or
yarn add event-listeners-manager
Then, the hard part is implementing your first event listener class and factory.
Check out https://codesandbox.io/s/test-event-listeners-manager-20qc3 for a live example.
- Examples of event listener and factory are both in TestListener.ts
- Example of manager in React is in App.tsx
Overview (Recommended)
Below is a brief description of the functions and their purposes from 3 concepts above.
Manager
export interface IListenersManager<ManagerConstructor, ManagerState> {
// Register new listeners (Pass in one or an array of listeners)
register(
listener:
| Register<ManagerConstructor, ManagerState>
| Register<ManagerConstructor, ManagerState>[]
): void;
// Use for information and checking
logRegisteredListeners(): void;
logCurrentListeners(): void;
// Start all registered event listeners (with optional extra args for any listeners) (usually in componentDidMount)
startAll(args: ListenerWithExtraArgs[]): void;
// Stop all registered event listeners (usually in componentWillUnmount)
endAll(): void;
// Start specific event listeners. Not registered listeners are ignored
start(args: ListenerWithExtraArgs[]): void;
// End specific event listeners. Not registered listeners are ignored
end(listenerNames: string[]): void;
// Function to update state (Internal function / Not for external usage)
update(newState: Partial<ManagerState>): void;
}
Listener
export interface IListener<ManagerState> {
// Start listening to some events
start(): void;
// Stop listening to some events
end(): void;
// Use to update listener's state, signaling other registered listeners to do some actions optionally.
update<ListenerUpdateFields>(fields: Partial<ListenerUpdateFields>): void;
// Trigger when there are changes to any listeners' states
onUpdate(
oldState: Partial<ManagerState>,
newState: Partial<ManagerState>
): void;
}
Listener Factory
export interface IListenerFactory<
ManagerConstructor,
ManagerState,
ExtraArgs = {}
> {
// Construct an event listener and give to manager
construct(
args: ManagerConstructor & ListenerConstructor<ManagerState, ExtraArgs>
): IListener<ManagerState>;
}