Spike: Investigate using pyodide dynamically

[loiswells97]

Questions we want to answer

• Is it possible to detect which imports the user has in their code before running it?
• Can we dynamically change the runner when a run is triggered based on the above?

[create-issue-branch[bot]]

Branch issues/936-Spike_Investigate_using_pyodide_dynamically created!

[loiswells97]

Thoughts for future work

• We would need to think about what to do in the interim if users try to import a skulpt only module alongside a pyodide only module. We would need to avoid an interminable loop switching between skulpt and pyodide, and consider how we would communicate with the user that they can't use these two libraries together.
• Can we have the switching logic on a higher level than the runners? For example, if we could have the logic in the RunnerFactory instead, we might not need to switch runners part way through when the user imports an unsupported library.

[loiswells97]

Findings

Approach 1

• It is possible to switch to skulpt from within the pyodide runner if it detects an import that is only available in skulpt
• However, switching back to pyodide again could be difficult, as skulpt seems to be looping through imports internally, rather than giving us a list of them upfront. Maybe we would need to have a flag that allows the runner to switch to pyodide if one of the imports is not found
• We need some mechanism to avoid getting stuck in a continuous loop of switching between skulpt and pyodide, and one approach to solving this could be to revert to pyodide at the start of each run, and then switch to skulpt if needed, so there is never a need to switch back to pyodide
• We are having the issue of multiple p5 canvases that is breaking skulpt, which would need to be fixed for the previous point to work, as otherwise, switching back and forth between pyodide and skulpt would cause the p5 canvas to re-render between runs, which would throw errors.
• Another problem to defaulting to pyodide in this way is that pyodide would have to be loaded between runs for skulpt programs, which is quite slow
• A potential solution could be to default to skulpt initially and then switch to pyodide if one of the modules are not found - this would avoid the canvas re-rendering issue

Approach 2

• A completely different approach would be to choose which of pyodide or skulpt to use based on the imports at a higher level (e.g. in the RunnerFactory). This would require some way of parsing the python code to extract the names of the imports
• The simplest approach would be to use regex, although the result is hideous and buggy, and the complexity increases as you take into consideration comments and strings. However, this can be mitigated by insisting in the regex that the import statement is at the start of the line.
• There are a number of python parsing libraries for JavaScript out there - filbert has not been updated in 5 years and does not support parsing imports, while python-ast crashes the app when you try to import parse.
• We may need to distinguish between which runner is showing vs which interpreted is expected to be used in the next code run (based on imports) because we don't want the runner to swtich visually as the user types, but neither do we want a race condition in switching interpreters to mean that the wrong one is used when the user clicks run.
• One potential way around this is to have both runners in the DOM but only one displayed on the page, and switching interpreter in the background as the user's code changes, but only chaning the UI to the new runner when they click run.
• This also solves the bug around multiple p5 canvases because the same canvas still exists in the DOM all the time, even when not shown.
• We would need to think about the accessibility of this approach for screenreader users.

[loiswells97]

Productionisation

• Possibly refactor the regex for the imports to make it less of an eyesore/work better
• Add messaging to explain why you can't use certain libraries together
• Test that existing non-p5 projects still work in pyodide
• Check the accessibility of hiding the runners with CSS rather than javascript
• Fix the tests