treehouse/template/sandbox.hbs

63 lines
1.7 KiB
Handlebars
Raw Normal View History

2024-02-18 00:29:58 +01:00
<!DOCTYPE html>
<html>
<head>
<title>treehouse iframe sandbox</title>
<style>
body {
margin: 0;
overflow: hidden;
2024-02-18 23:37:31 +01:00
width: fit-content;
height: fit-content;
2024-02-18 00:29:58 +01:00
}
2024-02-18 10:58:57 +01:00
canvas {
display: block;
}
2024-02-18 00:29:58 +01:00
</style>
2024-02-18 23:37:31 +01:00
<script type="importmap">{
"imports": {
"treehouse/": "{{ config.site }}/static/js/",
"tairu/": "{{ config.site }}/static/js/components/tairu/"
}
}</script>
2024-02-18 00:29:58 +01:00
<script type="module">
2024-02-18 23:37:31 +01:00
import { evaluate, domConsole, jsConsole } from "treehouse/components/literate-programming/eval.js";
2024-02-18 12:10:02 +01:00
import { internals as sandboxInternals } from "treehouse/sandbox.js";
2024-02-18 10:58:57 +01:00
2024-02-18 23:37:31 +01:00
globalThis.console = domConsole;
2024-02-18 10:58:57 +01:00
2024-02-18 00:29:58 +01:00
addEventListener("message", async event => {
let message = event.data;
if (message.action == "eval") {
2024-02-18 12:10:02 +01:00
evaluate(message.input, {
2024-02-18 23:37:31 +01:00
error() {
2024-02-18 12:10:02 +01:00
sandboxInternals.body.replaceChildren();
2024-02-18 23:37:31 +01:00
},
newOutput(currentOutputIndex) {
if (currentOutputIndex == window.treehouseSandboxInternals.outputIndex) {
document.body.replaceChildren(...sandboxInternals.body.childNodes);
2024-02-18 12:10:02 +01:00
postMessage({
kind: "resize",
2024-02-18 23:37:31 +01:00
outputIndex: currentOutputIndex,
2024-02-18 12:10:02 +01:00
});
2024-02-18 23:37:31 +01:00
}
sandboxInternals.resetBody();
2024-02-18 12:10:02 +01:00
},
});
2024-02-18 00:29:58 +01:00
}
});
2024-02-18 10:58:57 +01:00
2024-02-18 12:10:02 +01:00
postMessage({ kind: "ready" });
2024-02-18 00:29:58 +01:00
</script>
</head>
<body></body>
</html>