Solid JS APi to use pyp5js

[berinhard]

This issue probably depends on having #188 done since it should significantly reduce the amount of duplicated JS code.

Currently, to simply use pyp5js to run a sketch via JS can be hard. Take the demo editor for example. pyp5js forced it to be a regular sketch with a demo.py file when this should be unnecessary. There should be a more elegant way to use pyp5js as a JS-like library.

Of course, such type of usage would only work under Pyodide mode since Transcrypt requires a transpilation step. In my best dream, we'd have a pyp5js.js file being served over a CDN (or maybe installable via npm?) and with an API you would use like:

const pythonCode = $("#python-code-holder").html();
const codeConfig = {
  code: pythonCode,
  sketchDivId: "sketch-div", // optional, defaults to sketch-hoder
  pyodideUrl: "https://cdn.jsdelivr.net/pyodide/v0.18.1/full/pyodide.js", // optional, defaults to most recent version
  globalP5InsanceName: "p5_instance", // oṕtional, defaults to p5_instance. Usefull if user wants multiple sketches per page
};
const output = await PyP5Js.runCode(codeConfig);  // this is a promise
console.log(output);
console.log(window.p5_instance);

A question I have is: how to expose the p5 sketch object? Currently we're poorly storing it on window.instance, but the naming sucks, although I'm no expert on Javascript to have proper opinion if adding new variables to the window object is a bad thing or not. Insights here would be helpful =)

There's a lot to be done to achieve this. From the top of my head, I can list:

• Refactor current window.runSketchCode to be a promise instead of synchronous function;
• Add define a global PyP5Js object exposing the runCode function;
• runCode should download Pyodide and properly configure it;
• Makefile command to generate this base JS file;
• Figure out how to deploy this. (npm? CDN? simple .tar.gz file?)