index.ts

// import * as debug from 'debug';
// import host from './host';

const bundlers: Map<Window, string> = new Map();

function checkIsStandalone() {
  if (typeof window === 'undefined') {
    return true;
  }

  if (window.location && window.location.href.indexOf('?standalone') > -1) {
    return true;
  }

  return !window.opener && window.parent === window;
}

// Whether the tab has a connection with the editor
export const isStandalone = checkIsStandalone();

let initializeResolved: () => void;
/**
 * Resolves when the handshake between the frame and the editor has succeeded
 */
export const intializedPromise = new Promise(resolve => {
  initializeResolved = resolve;
});

// Field used by a "child" frame to determine its parent origin
let parentOrigin: string | null = null;

const parentOriginListener = (e: MessageEvent) => {
  if (e.data.type === 'register-frame') {
    parentOrigin = e.data.origin;

    if (initializeResolved) {
      initializeResolved();
    }
    self.removeEventListener('message', parentOriginListener);
  }
};

if (typeof window !== 'undefined') {
  self.addEventListener('message', parentOriginListener);
}

export function resetState() {
  parentOrigin = null;
  bundlers.clear();
}

/**
 * Send a message to the editor, this is most probably an action you generated
 *
 * @export
 * @param {*} message
 * @returns
 */
export function dispatch(message: any) {
  if (!message) return;

  const newMessage = { ...message, codesandbox: true };
  notifyListeners(newMessage);
  notifyFrames(newMessage);

  if (isStandalone) return;
  if (parentOrigin === null && message.type !== 'initialized') return;

  if (window.opener) {
    window.opener.postMessage(newMessage, parentOrigin === null ? '*' : parentOrigin);
  } else {
    window.parent.postMessage(newMessage, parentOrigin === null ? '*' : parentOrigin);
  }
}

export type Callback = (
  message: object,
  source?: MessageEvent['source'] | null | undefined
) => void;

const listeners: { [id: string]: Callback } = {};
let listenerId = 0;

/**
 * Listen to everything that comes in from either the editor or the sandbox
 * @param callback Call this function to 'unlisten'
 */
export function listen(callback: Callback): () => void {
  const id = ++listenerId;
  listeners[id] = callback;

  return () => {
    delete listeners[id];
  };
}

export function notifyListeners(data: object, source?: MessageEvent['source']) {
  // eslint-disable-next-line no-shadow
  Object.keys(listeners).forEach(listenerId => {
    if (listeners[listenerId]) {
      listeners[listenerId](data, source);
    }
  });
}

function notifyFrames(message: object) {
  const rawMessage = JSON.parse(JSON.stringify(message));
  bundlers.forEach((origin, frame) => {
    if (frame && frame.postMessage) {
      frame.postMessage({ ...rawMessage, codesandbox: true }, origin);
    }
  });
}

function eventListener(e: MessageEvent) {
  const { data } = e;

  if (data && data.codesandbox && (parentOrigin === null || e.origin === parentOrigin)) {
    notifyListeners(data, e.source);
  }
}

/**
 * Register an window as a output the `dispatch` function can send messages to.
 *
 * @param frame
 */
export function registerFrame(frame: Window, origin: string) {
  bundlers.set(frame, origin);

  frame.postMessage(
    {
      type: 'register-frame',
      origin: document.location.origin,
    },
    origin
  );
}

if (typeof window !== 'undefined') {
  // We now start listening so we can let our listeners know
  window.addEventListener('message', eventListener);
}

export function reattach() {
  window.addEventListener('message', eventListener);
}