This EventBus package provides a flexible and feature-rich event handling system designed to facilitate communication between different parts of an application. It supports features like debouncing, throttling, immediate event handling, single-time listeners, and prioritization of event listeners.
To get started with the EventBus, import the necessary functions from the package:
import createEventBus from "@packages/event-bus";
const { eventBus, useEventBus } = createEventBus();
const { on, off, emit, reset } = useEventBus();Prevents event flooding, useful for search inputs:
// EventBus Instance
eventBus.on("typing", () => console.log("Debounced Typing Event!"), { debounce: 300 });
// Composable
on("typing", () => console.log("Debounced Typing Event!"), { debounce: 300 });Limits how often a function can execute, useful for scroll events:
// EventBus Instance
eventBus.on("scroll", () => console.log("Throttled Scroll Event!"), { throttle: 1000 });
// Composable
on("scroll", () => console.log("Throttled Scroll Event!"), { throttle: 1000 });Executes immediately upon subscription:
// EventBus Instance
eventBus.on("init", () => console.log("Immediate Execution upon Subscription!"), { immediate: true });
// Composable
on("init", () => console.log("Immediate Execution upon Subscription!"), { immediate: true });Executes only once:
// EventBus Instance
eventBus.on("click", () => console.log("This will only run once for click event!"), { once: true });
// Composable
on("click", () => console.log("This will only run once for click event!"), { once: true });Manage execution order through priority:
// EventBus Instance
eventBus.on("priorityEvent", () => console.log("Listener with Priority 1"), { priority: 1 });
eventBus.on("priorityEvent", () => console.log("Listener with Priority -1 (should run last)"), {
priority: -1,
});
eventBus.on("priorityEvent", () => console.log("Listener with Priority 2 (should run first)"), {
priority: 2,
});
// Composable
on("priorityEvent", () => console.log("Listener with Priority 1"), { priority: 1 });
on("priorityEvent", () => console.log("Listener with Priority -1 (should run last)"), { priority: -1 });
on("priorityEvent", () => console.log("Listener with Priority 2 (should run first)"), { priority: 2 });To simulate the events, you can use the emit function:
// EventBus Instance
eventBus.emit("init");
eventBus.emit("click");
setTimeout(() => eventBus.emit("typing", "Hello"), 100);
setTimeout(() => eventBus.emit("typing", "Hello, World!"), 350);
setTimeout(() => eventBus.emit("scroll"), 500);
setTimeout(() => eventBus.emit("scroll"), 1500);
setTimeout(() => eventBus.emit("priorityEvent"), 2000);
eventBus.reset();
// Composable
emit("init");
emit("click");
emit("typing", "Hello"), 100);
emit("typing", "Hello, World!"), 350);
emit("scroll"), 500);
emit("scroll"), 1500);
emit("priorityEvent"), 2000);
reset();To remove the events, you can use the reset function:
// EventBus Instance
eventBus.reset();
// Composable
reset();- on(event, handler, options): Subscribe to an event.
- off(event, handler): Unsubscribe from an event.
- emit(event, ...args): Emit an event to all listeners.
- reset( ): Resets the eventBus and removes all the events and listeners.