Master Event-Driven Architecture: How to Build a Simple Event Emitter in TypeScript

// Define a generic type for the event map
type EventMap = Record<string, any>;

// The EventEmitter class, generic over the event map
class NewEventEmitter<TEvents extends EventMap> {
  // Use a Map to store listeners: eventName -> Set of callbacks
  private listeners = new Map<keyof TEvents, Set<(data: any) => void>>();

  // Subscribe to an event
  subscribe<K extends keyof TEvents>(eventName: K, callback: (data: TEvents[K]) => void) {
    // Ensure a Set exists for this event
    if (!this.listeners.has(eventName)) {
      this.listeners.set(eventName, new Set());
    }
    // Add the callback to the Set
    this.listeners.get(eventName)?.add(callback);
    // Return an unsubscribe function for easy cleanup
    return () => this.unsubscribe(eventName, callback);
  }

  // Unsubscribe from an event
  unsubscribe<K extends keyof TEvents>(eventName: K, callback: (data: TEvents[K]) => void) {
    // Remove the callback from the Set for this event
    this.listeners.get(eventName)?.delete(callback);
  }

  // Emit an event, calling all subscribed listeners
  emit<K extends keyof TEvents>(eventName: K, data: TEvents[K]) {
    // Iterate over the Set of callbacks and execute each one
    this.listeners.get(eventName)?.forEach((callback) => {
      callback(data);
    });
  }

  // Note: A 'once' method could be added here as well,
  // similar to the previous implementation, by wrapping the callback
  // and calling unsubscribe within the wrapper.
}

// Define our events
type ButtonEvents = {
  click: { x: number; y: number };
  hover: boolean;
};

class Button {
  // Use the NewEventEmitter
  private emitter = new NewEventEmitter<ButtonEvents>();

  constructor(private element: HTMLElement) {
    element.addEventListener('click', (e) => {
      this.emitter.emit('click', {
        x: e.clientX,
        y: e.clientY,
      });
    });
    element.addEventListener('mouseenter', () => {
      this.emitter.emit('hover', true);
    });
    element.addEventListener('mouseleave', () => {
      this.emitter.emit('hover', false);
    });
  }

  // Use 'subscribe' instead of 'on'
  onClick(callback: (pos: { x: number; y: number }) => void) {
    return this.emitter.subscribe('click', callback);
  }

  onHover(callback: (isHovering: boolean) => void) {
    return this.emitter.subscribe('hover', callback);
  }
}

// Usage
const buttonElement = document.getElementById('my-btn');
if (buttonElement) {
  const button = new Button(buttonElement);
  const unsubscribeClick = button.onClick(({ x, y }) => {
    console.log(`Clicked at (${x}, ${y})`);
  });
  // Call the returned function to unsubscribe
  unsubscribeClick(); // Clean it up
}

type StoreEvents<T> = {
  change: T;
  error: string; // Example error event
};

class SimpleStore<T> {
  // Use NewEventEmitter
  private emitter = new NewEventEmitter<StoreEvents<T>>();
  private state: T;

  constructor(initialState: T) {
    this.state = initialState;
  }

  setState(newState: T) {
    this.state = newState;
    this.emitter.emit('change', newState);
  }

  // The primary method is 'subscribe'
  subscribe(callback: (state: T) => void) {
    // Immediately call with current state
    callback(this.state);
    // Subscribe to future changes
    return this.emitter.subscribe('change', callback);
  }

  // Example method to emit an error
  setError(errorMessage: string) {
    this.emitter.emit('error', errorMessage);
  }

  // Method to subscribe specifically to errors
  onError(callback: (error: string) => void) {
    return this.emitter.subscribe('error', callback);
  }
}

// Usage
const store = new SimpleStore({ count: 0 });
const unsubscribeState = store.subscribe((state) => {
  console.log('State changed: ', state);
});

const unsubscribeError = store.onError((error) => {
  console.error('Store error: ', error);
});

store.setState({ count: 1 }); // Logs: "State changed: { count: 1 }"
store.setError('Something went wrong!'); // Logs: "Store error: Something went wrong!"
// Later, cleanup subscriptions if needed
// unsubscribeState();
// unsubscribeError();