How to use the codesandbox-api.listen function in codesandbox-api

}

        try {
          dispatch({
            type: 'eval-result',
            error,
            result: transformJSON(result),
          });
        } catch (e) {
          console.error(e);
        }
      }
    }
  }

  listen(handleMessage);

  sendReady();
  setupHistoryListeners();
  setupConsole();

  if (process.env.NODE_ENV === 'test' || isStandalone) {
    // We need to fetch the sandbox ourselves...
    const id = getId();
    window
      .fetch(host + `/api/v1/sandboxes/${id}`)
      .then(res => res.json())
      .then(res => camelizeKeys(res))
      .then(x => {
        const mainModule = findMainModule(
          x.data.modules,
          x.data.directories,

dispatch({
            type: 'transpiler-context',
            data: context,
          });
        } else {
          dispatch({
            type: 'transpiler-context',
            data: {},
          });
        }
      }
    }
  }

  if (!isStandalone) {
    listen(handleMessage);

    sendReady();

    if (!window.opener) {
      // Means we're in the editor
      setupHistoryListeners();
      setupConsole();
      listenForPreviewSecret();
      window.addEventListener('message', ({ data }) => {
        switch (data.type) {
          case 'activate':
            activate(window);
            break;
          default:
            break;
        }

private initializeCodeSandboxAPIListener() {
    return listen(({ action, type, code, path, lineNumber, column }: any) => {
      if (type === 'add-extra-lib') {
        // TODO: bring this func back
        // const dtsPath = `${path}.d.ts`;
        // this.monaco.languages.typescript.typescriptDefaults._extraLibs[
        //   `file:///${dtsPath}`
        // ] = code;
        // this.commitLibChanges();
      } else if (action === 'editor.open-module') {
        const options: {
          selection?: { startLineNumber: number; startColumn: number };
        } = {};

        if (lineNumber || column) {
          options.selection = {
            startLineNumber: lineNumber,
            startColumn: column || 0,

setupTranspilationListener() {
    // @ts-ignore
    return listen(({ type, code, path }) => {
      if (type === 'add-extra-lib') {
        // TODO; bring this func back
        // const dtsPath = `${path}.d.ts`;
        // this.monaco.languages.typescript.typescriptDefaults._extraLibs[
        //   `file:///${dtsPath}`
        // ] = code;
        // this.commitLibChanges();
      }
    });
  }

setupTranspilationListener() {
    return listen(({ type, code, path }) => {
      if (type === 'add-extra-lib') {
        const dtsPath = `${path}.d.ts`;
        this.monaco.languages.typescript.typescriptDefaults._extraLibs[
          `file:///${dtsPath}`
        ] = code;
        this.commitLibChanges();
      }
    });
  }

componentDidMount() {
    this.listener = listen(this.handleMessage);
  }

.then(() => {
          this.initManager('#ide-preview', this.sandboxOpts, {
            fileResolver: {
              isFile: p => Promise.resolve(!!this.entries[createPathWithExt(p)]),
              readFile: p => this.loadFileContent(createPathWithExt(p)).then(content => content),
            },
          });

          this.listener = listen(e => {
            switch (e.type) {
              case 'done':
                this.sandpackReady = true;
                break;
              default:
                break;
            }
          });
        });
    },

sendUrlChange(document.location.href);
          }
          ev.preventDefault();
          ev.stopPropagation();
        }
      },
      true
    );

    pushHistory(pathWithHash(document.location), null);

    setTimeout(() => {
      sendUrlChange(document.location.href);
    });
  }
  return listen(handleMessage);
}

constructor(props: Props) {
    super(props);
    this.listener = listen(this.handleMessage);

    this.state = {
      browserPath: '/',
      baseUrl: '',
      lastCommittedUrl: '/',
      backwardNavigationStack: [],
      forwardNavigationStack: [],
    };
  }

}

      this.element = element;
      this.iframe = document.createElement('iframe');
      this.initializeElement();
    } else {
      this.element = selector;
      this.iframe = selector;
    }
    this.iframe.setAttribute(
      'sandbox',
      'allow-forms allow-scripts allow-same-origin allow-modals allow-popups allow-presentation'
    );
    this.iframe.src = this.bundlerURL;

    this.listener = listen((message: any) => {
      switch (message.type) {
        case 'initialized': {
          if (this.iframe) {
            if (this.iframe.contentWindow) {
              registerFrame(this.iframe.contentWindow, this.bundlerURL);

              if (this.options.fileResolver) {
                this.fileResolverProtocol = new Protocol(
                  'file-resolver',
                  async (data: { m: 'isFile' | 'readFile'; p: string }) => {
                    if (data.m === 'isFile') {
                      return this.options.fileResolver!.isFile(data.p);
                    }

                    return this.options.fileResolver!.readFile(data.p);
                  },