@wbe/beeper

Beeper

Beeper simple class pub/sub pattern implementation. It implements an internal state management witch track and expose the last dispatch state.

Summary

• Installation
• Usage
• Methods
• API
• Workflow
• Credits
• License

Installation

npm i @wbe/beeper

Usage

Use Beeper as a class to create a beeper instance.

import { Beeper } from "@wbe/beeper";

const beep = new Beeper();
const off = beep.on(() => console.log("beep"));
beep.dispatch();
off()

Dispatch and retrieve state.

import { Beeper } from "@wbe/beeper";

// define state type and default value (optional)
const beep = new Beeper<string>("foo");
const handler = (state: string): void => {
  console.log(`dispatched state is bar`)
}
beep.on(handler);
// dispatch new state
beep.dispatch("bar");
// stop listening by passing the same handler reference
beep.off(handler);

Real world usage

import { Beeper } from "@wbe/beeper";

/**
 * Create a global service/store
 * It contains a Beeper instance and associated action methods
 */
class CounterService {
  countBeeper = new Beeper<number>(0);
  increment() {
    this.countBeeper.dispatch(this.countBeeper.state + 1)
  }
}
const counterService = new CounterService();

/**
 * Create a button component witch increment the counter
 */
class Button {
  constructor() {
    addEventListener("click", () => counterService.increment());
  }
}

/**
 * This class will use the counter value
 * every time it changes
 */
class Display {
  constructor() {
    counterService.countBeeper.on((count) => {
      console.log(`count is ${count}`)
    });
  }
}

Use the same service in a React component.

import { Beeper } from "@wbe/beeper";

const Display = () => {
  const [count, setCount] = useState(0);
  
  // The on return the off method
  // So it can be used as return in a useEffect hook
  useEffect(() => {
    return counterService.countBeeper.on((count) => {
      setCount(count);
    });
  }, []);

  return <div>Count is {count}</div>
}

Methods

• on(handler: THandler<S>): () => void

Subscribe to state changes and execute a callback.

• once(handler: THandler<S>): () => void

Subscribe to the next state change only, perfect for one-time events.

• off(handler: THandler<S>): void

Unsubscribe from state changes when no longer needed.

• dispatch(state?: S): THandlers<S>

Update the state and trigger associated callbacks effortlessly.

• reset(): void

Reset Beeper to its initial state, wiping the slate clean.

API

• state: S

Access the current state with ease.

• handlers: THandlers<S>

Retrieve the array of registered handlers.

• initialState: S

Obtain the initial state provided during instantiation.

Workflow

# build
pnpm run build:watch

# test
pnpm run test:watch

Credits

© Willy Brauner

License

Is released under the MIT License. See the LICENSE file for details.