Class MessageReceiver

packages/nodebox/src/messages.ts:104–212

type MaybePromise<T> = T | Promise<T>;

export class MessageReceiver {
  private emitter: EventTarget;
  private senderPort: MessagePort = null as any;

  constructor() {
    this.emitter = new EventTarget();
    this.waitForHandshake();
  }

  private waitForHandshake() {
    const handshakePromise = new DeferredPromise();

    const handshakeListener = (message: MessageEvent) => {
      const { data } = message;

      debug('[message-receiver]: incoming', message);

      if (data.type === 'internal/handshake') {
        invariant(
          message.ports.length > 0,
          'Failed to confirm a MessageReceiver handshake: received event has no ports'
        );

        this.senderPort = message.ports[0];
        this.addMessageListener();

        debug('[message-receiver]: handshake received!', this.senderPort);

        this.send('internal/handshake/done');
        debug('[message-receiver]: finish handshake');
      }
    };

    window.addEventListener('message', handshakeListener);
    handshakePromise.then(() => {
      window.removeEventListener('message', handshakeListener);
    });

    window.parent.postMessage({ type: 'internal/ready' }, '*');

    return handshakePromise;
  }

  private addMessageListener(): void {
    invariant(
      this.senderPort,
      '[MessageReceiver] Failed to add a message listener: sender port is not defined. Did you forget to await a handshake?'
    );

    this.senderPort.onmessage = (evt) => {
      const data = evt.data;
      if (data.type == null) {
        return;
      }

      this.emitter.dispatchEvent(
        new MessageEvent(data.type, {
          data: data.payload,