atomWithBroadCast.ts

atomWithBroadCast.ts

import { atom } from "jotai";

const strAtom = atom(""); // primitive string atom

export function atomWithBroadcast<Value>(key: string, initialValue: Value) {
  const channel = new BroadcastChannel(key);
  const baseAtom = atom(initialValue);
  const listeners = new Set<(event: MessageEvent<any>) => void>();

  const broadcastAtom = atom<
    Value,
    [{ fromOnMessage: boolean; value: Value }],
    void
  >(
    (get) => get(baseAtom),
    (get, set, update) => {
      if (!update.fromOnMessage) {
        channel.postMessage(update.value);
      }
      set(baseAtom, update.value);
    }
  );
  broadcastAtom.onMount = (setAtom) => {
    const listener = (event: MessageEvent<any>) => {
      setAtom({ fromOnMessage: true, value: event.data });
    };
    listeners.add(listener);
    channel.onmessage = (event) => {
      listeners.forEach((l) => l(event));
    };
    return () => {
      channel.close();
      listeners.delete(listener);
    };
  };
  const returnedAtom = atom<Value, [Value], void>(
    (get) => get(broadcastAtom),
    (get, set, update) => {
      set(broadcastAtom, { fromOnMessage: false, value: update });
    }
  );
  return returnedAtom;
}