add LiveCodes as playground and test runner

[hatemhosny]

Closes #264

What change does this pull request introduce?

This PR adds LiveCodes as a code playground and test runner for some of the supported languages (currently JavaScript, TypeScript, Python and R). (please see #264)

Summary of approach Depending on the selected language, either LiveCodes playground or the original playground editor is loaded.
When loading the algorithm code, test code is also loaded in relevant repos (currently JavaScript and TypeScript).
In Python, doctests are run using Pyodide and the results are shown in the integrated console.

Still work-in-progress If you approve this approach, may be you want to remove the original Pyodide code runner.
Still switching themes (dark/light themes) is not implemented. However, this should be available soon.

Please let me know what you think.

By the way, I noticed that no R code is currently fetched, in addition to some other issues I noticed in fetch-algorithms script. May be I can add a separate PR for that.

Screenshots

JS

Python

Checklist

• [x] I worked on a branch other than main.
• [x] My branch is up-to-date with the Upstream main branch.
• [x] I have fixed potential errors using yarn lint.
• [x] I ran yarn build to check everything still builds successfully.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 1, 2023 10:12am

[maltejur]

Thanks! Is there any way to make user input work? If I comment out the input code on the binary search, it throws the following error:

With the existing playground powered by pyodide, this works as expected:

This is the code I used to make that work, I remember it was a bit hacky. Maybe that helps.

[hatemhosny]

Is there any way to make user input work?

@maltejur It works now :)

[hatemhosny]

Updates:

• Python input works
• R works
• Added Ruby

Python input

Python Result

R

Ruby input

Ruby result

[hatemhosny]

added Lua:

[hatemhosny]

Thanks, looks great! Once you are ready I am happy to merge this.

Thanks @maltejur , I have a few things to tidy up. I will let you know when I'm ready.

One small nitpick: the autorunning of the code after ~2s of inactivity kind of clashes with the user input prompts. I am not sure though what the best solution for that would be.

The default behavior is that the code autoruns after 1.5 sec. This can be configured for longer or shorter delays. Currently, I have disabled autorunning. So, now users will have to click the run button or use the keyboard shortcut (Shift+Enter) to run the code. Please check if you think this is better or shall I re-enable the autorun?

I want your opinion about a few things:

• Now the original python runner (Pyodide) is no longer in use. Shall I remove it, or do I leave it for a later PR?

• Regarding language support:

  • some languages are not supported in LiveCodes (e.g. Java, Swift, Rust): these still use the original playground (with piston code runner)
  • some languages are supported in LiveCodes but have better performance in the original playground (e.g. C++, Julia): these use the original playground
  • some languages are better in LiveCodes + can run tests: Python, JavaScript, TypeScript, R, Ruby, Lua, Jupyter these use LiveCodes
  • some languages are comparable in both (e.g. PHP, Go, C). I cannot run their tests, mostly because that needs external runners or asks for user input. However, this is similar to the behavior of piston runner. what shall I do with these? (the advantage I see for LiveCodes is better support for mobile devices)

  I still have some more languages to explore

[hatemhosny]

added Jupyter

Instead of displaying the notebook JSON, Python code is extracted from JSON and run using Pyodide

Pandas

Matplotlib

[hatemhosny]

changing themes now works

light theme

dark theme

[hatemhosny]

hi @maltejur

I believe the PR is ready now for review.

I would also value your opinion about these inquiries.

Thank you

[hatemhosny]

use LiveCodes for PHP, Go and C

these may need to manually add some code to run the algorithm code

Examples:

PHP

Go

C

[hatemhosny]

@maltejur I think I'm ready now if you can have a look. Thank you.

[hatemhosny]

@maltejur I noticed the production deployment for this failed. I cannot see the logs. Is there anything I need to fix on my end?

[maltejur]

That has nothing to do with your changes, it seems like there are ratelimits by GitHub which makes the fetching of some stuff fail.

RequestError [HttpError]: You have exceeded a secondary rate limit. Please wait a few minutes before you try again. If you reach out to GitHub Support for help, please include the request ID CB38:0F1F:5C9B91:BFB3B1:6546C520.

I'll try to rebuilt again tomorrow.