Code playgrounds

by https://github.com/btheado

playground-ide

Serverless coding environments for the web.

with the IDE

playgroundIde file index.html <!doctype html> <body> Hello <script type="module" src="./index.js"></script> </body> file index.js document.body.appendChild(document.createTextNode("World!"))

without the IDE

TODO: make scroll parser for this also

<playground-project id=hello1 style="display:none"> <script type="sample/html" filename="index.html"> <!doctype html> <body> Hello <script type="module" src="./index.js"></script> </body> </script> <script type="sample/js" filename="index.js"> document.body.appendChild(document.createTextNode("World!")) </script> </playground-project> <playground-preview style="height: 150px;" project="hello1"></playground-preview>
*

code-api

https://codapi.org/ and https://github.com/nalgeon/codapi-js

These first two are only required for wasm. The 3rd is the web component

<script src="https://unpkg.com/@antonz/runno@0.6.1/dist/runno.js"></script> <script src="https://unpkg.com/@antonz/codapi@0.19.7/dist/engine/wasi.js"></script> <script src="https://unpkg.com/@antonz/codapi@0.19.7/dist/snippet.js"></script>

browser native

javascript

<pre> const msg = "Hello, World!" console.log(msg); console.log(window.location); console.log(document.querySelector("pre")) </pre> <codapi-snippet engine="browser" sandbox="javascript" editor="basic"></codapi-snippet>
const msg = "Hello, World!"
console.log(msg);
console.log(window.location);
console.log(document.querySelector("pre"))

wasm based languages

Output after clicking the run button the first time for these will be slow as it needs to load some rather large wasm files

python

<pre> msg = "Hello, World!" print(msg) </pre> <codapi-snippet engine="wasi" sandbox="python" editor="basic"></codapi-snippet>
msg = "Hello, World!"
print(msg)

ruby

<pre> msg = "Hello, World!" puts msg </pre> <codapi-snippet engine="wasi" sandbox="ruby" editor="basic"></codapi-snippet>
msg = "Hello, World!"
puts msg

sqlite

<pre> select "Hello, World!" as message; </pre> <codapi-snippet engine="wasi" sandbox="sqlite" editor="basic"></codapi-snippet>
select "Hello, World!" as message;

Lua

<pre> local msg = "Hello, World!" print(msg) </pre> <codapi-snippet engine="wasi" sandbox="lua" editor="basic"></codapi-snippet>
local msg = "Hello, World!"
print(msg)
*

scroll!

Implemented a parser to display tryscroll in an iframe. Can scroll be loaded natively and into a web component somehow instead?

tryscroll program scroll theme gazette code two = 1 + 1

why does the above only show the editor and not the preview? When I had iframe directly both showed. Ok both don't show, but it fills the column width

<iframe style="width: 100%; height: 300px;" src="https://try.scroll.pub/#scroll%0A%20theme%20gazette%0A%20code%0A%20%20two%20%3D%201%20%2B%201"></iframe> Link to open a scroll program on try scroll link https://try.scroll.pub/# try scroll program scroll theme gazette code two = 1 + 1

Link to open a scroll program on try scroll

Would be nice if there was an easier way to encodeURIComponent into the iframe src attribute rather than implementing the tryscrollParser.