Productionise dynamic pyodide runner

[sra405]

Productionisation

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

Originally posted by @loiswells97 in #936

closed by #937

[create-issue-branch[bot]]

Branch issues/979-Productionise_dynamic_pyodide_runner created!

[loiswells97]

Explaining why certain modules are incompatible

It would be helpful to explain to users why they cannot use certain modules together that they are able to use separately. This scenario will arise when they try to use a pyodide-only module in combination with a skulpt-only module, and will lead to the user receiving the skulpt error message ImportError: No module named {module} on line {line_number} of {file name}. We can intercept this error message, extract the name of the problematic module and then rewrite the error message or add an explanation onto the end, e.g. ImportError: No module named numpy on line 2 of main.py. This may be because numpy cannot currently be used with p5 or sense_hat. However, this could be confusing for users in the case where they receive this error message for reasons other than because the modules are incompatible, for example, if they have misspelt the name of the import (which could be an external module, or another file from within the project). The user may also receive this error if they try to import a module that is available in neither pyodide nor skulpt.

[MFarringtonRPF]

Libraries that won't work: p5, py5, py5imported (part of py5 anyway) and sense_hat

In discussion with Max & Lois, we think:

• We should display the original error message, then say something like "Check your code for any typos. This error might also be caused if you have already used the p5, py5 or sense_hat libraries in your code. The library you are trying to import might not be compatible with those libraries."
• OR "See this [incompatibility note](open page or modal? with the explanation) for more details."
• We should try to include the list of libraries that won't work to start with, either in the message or in a modal, then have a page later (via user support area) that shows libraries in more detail for teachers especially.

[loiswells97]

I made the message a little more succinct and added scroll if it overflows vertically, and this is what it looks like:

[MFarringtonRPF]

@loiswells97, final copy (also CE'd):

ImportError: No module name X on line 3 of main.py. You should check your code for typos. If you are using p5, py5 or sense_hat, X might not work.

[sra405]

work merged into feature branch