# event-listeners-manager

> A manager for event listeners either custom or in DOM.

Latest version **0.1.6** (published 2022-04-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install event-listeners-manager
pnpm add event-listeners-manager
yarn add event-listeners-manager
bun add event-listeners-manager
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.6 |
| Published | 2022-04-16 |
| First published | 2021-11-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 13.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Anh Tu Do |
| Maintainers | doanhtu07 |
| Keywords | javascript, manager, event, listener |

## Links

- npm: https://www.npmjs.com/package/event-listeners-manager
- Repository: https://github.com/doanhtu07/event-listeners-manager
- Homepage: https://github.com/doanhtu07/event-listeners-manager#readme
- Issues: https://github.com/doanhtu07/event-listeners-manager/issues
- npm.io page: https://npm.io/package/event-listeners-manager

## Dependencies (1)

- [typescript](https://npm.io/package/typescript.md) ^4.1.2

## Alternatives

- [async-exit-hook](https://npm.io/package/async-exit-hook.md) — 3.7M weekly downloads
- [evnty](https://npm.io/package/evnty.md) — 7.2K weekly downloads
- [eleventy-plugin-asciidoc](https://npm.io/package/eleventy-plugin-asciidoc.md) — 3.5K weekly downloads
- [@jswork/next-get2get](https://npm.io/package/@jswork/next-get2get.md) — 945 weekly downloads
- [@dashersw/axon](https://npm.io/package/@dashersw/axon.md) — 934 weekly downloads

## Recent versions

- 0.1.6 (latest) — 2022-04-16
- 0.1.5 — 2022-02-06
- 0.1.4 — 2022-02-04
- 0.1.3 — 2022-02-04
- 0.1.2 — 2021-11-27
- 0.1.1 — 2021-11-27
- 0.1.0 — 2021-11-27

## README

# 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](#demo)
- [Problem](#problem)
- [Solution: How it works](#solution-how-it-works)
- [Setup](#setup)
- [Overiew (Recommended)](#overview-recommended)
  - [Manager](#manager)
  - [Listener](#listener)
  - [Listener Factory](#listener-factory)

## 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

```ts

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

```ts

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

```ts

export interface IListenerFactory<
  ManagerConstructor,
  ManagerState,
  ExtraArgs = {}
> {
  // Construct an event listener and give to manager
  construct(
    args: ManagerConstructor & ListenerConstructor<ManagerState, ExtraArgs>
  ): IListener<ManagerState>;
}

```

---
_Source: https://npm.io/package/event-listeners-manager · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._