vrls-simple-event-target

Simple Event Target

Simple Event Target is a TypeScript library designed to simplify the creation of classes that emit events. By leveraging TypeScript's powerful type system, it offers a streamlined, type-safe interface for event handling that closely mimics the familiar browser's EventListener API. The primary motivation behind Simple Event Target is to provide a lightweight, easy-to-use solution for event management without the overhead of additional options found in similar libraries.

Features

• Full TypeScript support for type-safe event handling.
• Mimics the browser's EventListener API for ease of use.
• Lightweight and straightforward, with no unnecessary options.
• No dependencies.

Installation

Install Simple Event Target using your favorite package manager:

pnpm add vrls-simple-event-target

Or, if you prefer npm or yarn, you can use:

npm install vrls-simple-event-target
# or
yarn add vrls-simple-event-target

Usage

To get started with Simple Event Target, follow these steps:

1. Define a Custom Event Map: Start by creating a type that represents your custom event map. This map will define the events your class can emit and the type of the event handler functions.

2. Extend Your Class: Extend SimpleEventTarget with your custom event map to create a new class capable of emitting events.

Example

Below is an example demonstrating how to create a custom class that emits a statechange event:

import { SimpleEventTarget } from "vrls-simple-event-target";

// Define possible states
type CustomState = "loading" | "ready";

// Define event map
type CustomEventMap = {
  statechange: (newState: CustomState) => void;
};

// Extend SimpleEventTarget to create a custom class
class MyClass extends SimpleEventTarget<CustomEventMap> {
  changeState(newState: CustomState) {
    // Dispatch the 'statechange' event with the new state
    this.dispatchEvent("statechange", newState);
  }
}

// Usage
const myClassInstance = new MyClass();
myClassInstance.addEventListener("statechange", (newState) => {
  console.log(`State changed to: ${newState}`);
});

// Trigger the state change
myClassInstance.changeState("loading"); // Logs: "State changed to: loading"
myClassInstance.changeState("ready"); // Logs: "State changed to: ready"

Contributing

We welcome contributions from the community! Whether it's adding new features, fixing bugs, or improving documentation, please feel free to make a pull request.

Support

If you encounter any issues or have questions, please file an issue on the GitHub repository. We're here to help!

---

By using Simple Event Target, you can easily add robust event-handling capabilities to your TypeScript projects with minimal overhead and maximum type safety. Give it a try today!