treehouse/template/sandbox.hbs

63 lines
1.7 KiB
Handlebars

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>treehouse iframe sandbox</title>
<link rel="stylesheet" href="{{ asset 'css/base.css' }}">
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
width: fit-content;
height: fit-content;
}
canvas {
display: block;
}
</style>
<script type="importmap">{{{ import_map }}}</script>
<script type="module">
import { evaluate, domConsole, jsConsole } from "treehouse/components/literate-programming/eval.js";
import { internals as sandboxInternals } from "treehouse/sandbox.js";
globalThis.console = domConsole;
addEventListener("message", async event => {
let message = event.data;
if (message.action == "eval") {
evaluate(message.input, {
error() {
sandboxInternals.body.replaceChildren();
},
newOutput(currentOutputIndex) {
if (currentOutputIndex == window.treehouseSandboxInternals.outputIndex) {
document.body.replaceChildren(...sandboxInternals.body.childNodes);
postMessage({
kind: "resize",
outputIndex: currentOutputIndex,
});
}
sandboxInternals.resetBody();
},
});
}
});
postMessage({ kind: "ready" });
</script>
</head>
<body></body>
</html>