playground-ide

Serverless coding environments for the web.

with the IDE

I implemented a playgroundIdeParser to wrap the playground-ide web component. Html, javascript, typescript, etc. files can be included in the playground like this:

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

<playground-ide style="height:150px" editable-file-system line-numbers resizable>
  
<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-ide>

without the IDE

The results/preview pane can be displayed by itself without the ide/editor by using playground-project and playground-preview html elements. I wrote a playgroundPreviewParser to encapsulate these. Here is an example:

belowAsHtml
playgroundPreview
 style height:150px
 file index.html
  <!doctype html>
  <body>
   Hello
   <script type="module" src="./index.js"></script>
  </body> 
 file index.js
  document.body.appendChild(document.createTextNode("World!"))

<playground-project id="particle37" 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="particle37"></playground-preview>

codapi

https://codapi.org/ (github) is another web component which allows client-side presentation of code snippet playgrounds.

Load the code

The first two scripts are only required for the wasm based languages. The 3rd is the main web component and supports javascript natively

<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!

The program parser in the link aftertextparser can be used to urlencode a scroll program as follows

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

I didn't find a general way in scroll to use encodeURIComponent with other things like the iframe src attribute, so I implemented a tryscrollParser. It displays try scroll in an iframe.

belowAsHtml
tryscroll
 program
  scroll
   theme gazette
   code
    two = 1 + 1

<iframe id="particle93" src="https://try.scroll.pub/#scroll%0A%20theme%20gazette%0A%20code%0A%20%20two%20%3D%201%20%2B%201" style="width: 100%; height: 300px;"class="scrollParagraph"></iframe>

Why does the above only show the editor and not the preview?

It would be nice if try scroll could be implemented as a web component instead of resorting to an iframe.

flems.io

flems is similar to playground-ide, but not implemented as a web component

<div id="flems" style="height: 250px;"/>
 <script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script>
 <script>
    window.Flems(flems, {
        files: [{
            name: 'app.js',
            content: 'm.render(\n\tdocument.body,\n\tm("h1", "Hello world")\n)'
        }],
        links: [{
            name: 'mithril',
            type: 'js',
            url: 'https://unpkg.com/mithril'
        }]
    })
 </script>

Code playgrounds