pico-pubsub

The smallest PubSub library possible. Zero Dependencies. 149 bytes.

I wrote this article a while back. But I realized...why not just publish the code?

Smaller than the competition.

• nano-pubsub
• tiny-pubusb

Built with JS13K games in mind. Such as cred which is unfortunately in need of some weight loss soon, it is almost 25KB now.

^{_{If you have any ideas that may trim off even one single byte please share it. Create an issue! I don't mind.}}

The Source

This is the entire source (index.js).

let t = new EventTarget();

sub = (e, c) => (t.addEventListener(e, c), () => t.removeEventListener(e, c));
pub = (n, d) => t.dispatchEvent(new CustomEvent(n, { detail: d }));

Usage

npm install pico-pubsub

import "pico-pubsub"

const unsub = sub('jump', function (anything) {
  console.log("someone jumped - " + anything.detail)
});

pub('jump', "a_user_id")
>> "someone jumped - a_user_id"

unsub()

pub('jump', "another_user_id")
>> Nothing happens now

Troubleshoot

• Might add TS support in the future. For now you can use the following snippet.

declare global {
  function pub(event: string, data: any): VoidFunction;
  function sub(event: string, callback: (data: CustomEvent) => void): void;
}

• If you have export issues just copy paste and change export type.

Prove it

The following command will produce a 149b file:

npx esbuild index.js --bundle --minify --format=esm --outfile=bundle.js

The Competition

Coming in at #2 we have nano-pubsub which slims down to an impressive 194b...Not bad at all! Only ~30% larger.

/**
 * @public
 */
export interface Subscriber<Event> {
  (event: Event): void;
}
/**
 * @public
 */
export interface PubSub<Message> {
  publish: (message: Message) => void;
  subscribe: (subscriber: Subscriber<Message>) => () => void;
}

/**
 * @public
 */
export default function createPubSub<Message = void>(): PubSub<Message> {
  const subscribers: { [id: string]: Subscriber<Message> } =
    Object.create(null);
  let nextId = 0;
  function subscribe(subscriber: Subscriber<Message>) {
    const id = nextId++;
    subscribers[id] = subscriber;
    return function unsubscribe() {
      delete subscribers[id];
    };
  }

  function publish(event: Message) {
    for (const id in subscribers) {
      subscribers[id](event);
    }
  }

  return {
    publish,
    subscribe,
  };
}

And at #3 we have tiny-pubsub which brings a non critical function to the table as well as an extra function with the way it handles unsubscribing! The agony! This comes in at a whopping 401b, more than twice nano-pubsub!

let subscriptions = Object.create(null);

function subscribe(evt, func) {
  if (typeof func !== "function") {
    throw "Subscribers must be functions";
  }
  const oldSubscriptions = subscriptions[evt] || [];
  oldSubscriptions.push(func);
  subscriptions[evt] = oldSubscriptions;
}

function publish(evt) {
  let args = Array.prototype.slice.call(arguments, 1);
  const subFunctions = subscriptions[evt] || [];
  for (let i = 0; i < subFunctions.length; i++) {
    subFunctions[i].apply(null, args);
  }
}

function unsubscribe(evt, func) {
  const oldSubscriptions = subscriptions[evt] || [];
  const newSubscriptions = oldSubscriptions.filter((item) => item !== func);
  subscriptions[evt] = newSubscriptions;
}

function cancel(evt) {
  delete subscriptions[evt];
}

module.exports = { subscribe, publish, unsubscribe, cancel };

Notes

If you don't want to use the window object just do this, just know it'll cost ya 7 bytes:

let t = new EventTarget();

export default {
  s: (e, c) => (t.addEventListener(e, c), () => t.removeEventListener(e, c)),
  p: (n, d) => t.dispatchEvent(new CustomEvent(n, { detail: d })),
};

Someone on HN suggested I could return event.detail here and I might do that in the future.

Library gets marginally bigger but you will save space at every callsite.