Expose sketch source when executed in the https://preview.p5js.com iframe

[kilometers]

Increasing Access

Allow for educational coding support tools (in my case a chrome extension supporting debugging) to have cleaner access to user's raw code. Features like this could support a rich ecosystem of third party tools working with the p5js editor.

Feature request details

Error messages are already accessible thanks to postMessage() sending 'message' events, however cleanly accessing the source which was executed is a challenge. One can rig this by cleaning the raw code in the CodeMirror element, however from what I can tell this only shows the currently open file and not what is necessarily run in the preview iframe.

The editor could use postMessage() when a preview is run to send out a 'message' event containing the code or a way to expose their blobs, perhaps with the following structure:

editor.postMessage(
    {
      source: 'sketch',
      messages: [
        {
          log: [
            {
              method: 'source',
              data: [executedSource],
              id: Date.now().toString()
            }
          ]
        }
      ]
    },
    editorOrigin
  );

In my use case it would be quite convenient if the executed code was sent along with the error message, or if the "source" message and the "error" message (assuming there is an error on execution) were guaranteed to share an id.

I've scoured the code for a way to access the sketch source from outside React/Redux in a robust, clean way -- if it already exists then perhaps this isn't needed.

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.