Add JavaScript evaluation support

I think a solid first step, before https://github.com/slipHQ/run-wasm/issues/13 (at least the way I’m thinking about it), is to add support for JavaScript since it’s relatively straightforward since JS <-> Browser === ❤️

How it works

At a high-level, it works similarly to the current implementation for Python:

• user provides input
• user hits run button
• input -> client to run code -> saves output
• output is displayed in browser for user

How to Implement

1. Create a JavaScriptClient
2. Create a <RunJSCode /> component which comes with an <iframe />
3. Use safe sandbox technique to safely evaluate code
4. Display output in <Editor />

Resources

• Play safely in sandboxed iFrames (thank you @hatemhosny for sharing that here)
  • direct link to example: https://github.com/html5rocks/www.html5rocks.com/blob/master/static/demos/evalbox/index.html
• MDN eval
• Wasmer JS tutorial

Additional Notes

Once we have this implemented, I think adding TypeScript support would be relatively straightforward. All we would need to do is add an extra step to compile the TS -> JS using swc.

(Though there may be a desire to compile it to WASM though and use the WasmClient)

Contributors

We figured this out as a team on a livestream, thanks to:

• @maxcell
• @Dhaiwat10
• @jsjoeio

[jsjoeio]

Talking to @dwwoelfel and @sgrove about JS evaluation and they said they use quickjs-emscripten. Reasons why they chose this:

• There’s no way for it to escape the sandbox
• There aren’t a ton of other options with the same level of sandboxing

[Dhaiwat10]

Thanks for putting this together @jsjoeio!

(Though there may be a desire to compile it to WASM though and use the WasmClient)

I think we should def look into this & see what are the benefits of compiling it to Wasm. Anything we learn from there will probably help us get a clearer picture of what Wasm actually does & how it is being used in this project.