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 remove = beep.add(() => console.log("beep"));
beep.dispatch();
remove()

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) => {
  console.log(`dispatched state is bar`)
}
beep.add(handler);
// dispatch new state
beep.dispatch("bar");
// stop listening by passing the same handler reference
beep.remove(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 {
  onCount = new Beeper<number>(0);
  increment() {
    this.onCount.dispatch(this.onCount.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.onCount.add((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.onCount.add((count) => {
      setCount(count);
    });
  }, []);

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

Methods

add(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.

remove(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

# pre-publish, build & tests
pnpm pre-publish

# update version
npm version patch|minor|major

# publish
npm publish

Credits

© Willy Brauner

License

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