treehouse/template/sandbox.hbs

<!DOCTYPE html>

<html>

<head>
    <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">{{{ include_static 'generated/import-map.json' }}}</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>
graphical output in code blocks 2024-02-18 00:29:58 +01:00			`<!DOCTYPE html>`

			`<html>`

			`<head>`
			`<title>treehouse iframe sandbox</title>`

switch the layout to a wider one that leans slightly to the left of the page this is to make space on the right for a nice background in the future 2024-10-29 18:14:01 +01:00			`<link rel="stylesheet" href="{{ asset 'css/base.css' }}">`
OR-types 2024-04-07 18:11:56 +02:00
graphical output in code blocks 2024-02-18 00:29:58 +01:00			`<style>`
			`body {`
			`margin: 0;`
OR-types 2024-04-07 18:11:56 +02:00			`padding: 0;`
graphical output in code blocks 2024-02-18 00:29:58 +01:00			`overflow: hidden;`
big commit 2024-02-18 23:37:31 +01:00			`width: fit-content;`
			`height: fit-content;`
graphical output in code blocks 2024-02-18 00:29:58 +01:00			`}`
automatically resize sandbox iframes 2024-02-18 10:58:57 +01:00
			`canvas {`
			`display: block;`
			`}`
graphical output in code blocks 2024-02-18 00:29:58 +01:00			`</style>`

add site-wide JS caching through import maps 2024-07-19 20:05:17 +02:00			`<script type="importmap">{{{ include_static 'generated/import-map.json' }}}</script>`
graphical output in code blocks 2024-02-18 00:29:58 +01:00
			`<script type="module">`
big commit 2024-02-18 23:37:31 +01:00			`import { evaluate, domConsole, jsConsole } from "treehouse/components/literate-programming/eval.js";`
even better sandbox 2024-02-18 12:10:02 +01:00			`import { internals as sandboxInternals } from "treehouse/sandbox.js";`
automatically resize sandbox iframes 2024-02-18 10:58:57 +01:00
big commit 2024-02-18 23:37:31 +01:00			`globalThis.console = domConsole;`
automatically resize sandbox iframes 2024-02-18 10:58:57 +01:00
graphical output in code blocks 2024-02-18 00:29:58 +01:00			`addEventListener("message", async event => {`
			`let message = event.data;`
			`if (message.action == "eval") {`
even better sandbox 2024-02-18 12:10:02 +01:00			`evaluate(message.input, {`
big commit 2024-02-18 23:37:31 +01:00			`error() {`
even better sandbox 2024-02-18 12:10:02 +01:00			`sandboxInternals.body.replaceChildren();`
big commit 2024-02-18 23:37:31 +01:00			`},`

			`newOutput(currentOutputIndex) {`
			`if (currentOutputIndex == window.treehouseSandboxInternals.outputIndex) {`
			`document.body.replaceChildren(...sandboxInternals.body.childNodes);`
even better sandbox 2024-02-18 12:10:02 +01:00			`postMessage({`
			`kind: "resize",`
big commit 2024-02-18 23:37:31 +01:00			`outputIndex: currentOutputIndex,`
even better sandbox 2024-02-18 12:10:02 +01:00			`});`
big commit 2024-02-18 23:37:31 +01:00			`}`
			`sandboxInternals.resetBody();`
even better sandbox 2024-02-18 12:10:02 +01:00			`},`
			`});`
graphical output in code blocks 2024-02-18 00:29:58 +01:00			`}`
			`});`
automatically resize sandbox iframes 2024-02-18 10:58:57 +01:00
even better sandbox 2024-02-18 12:10:02 +01:00			`postMessage({ kind: "ready" });`
graphical output in code blocks 2024-02-18 00:29:58 +01:00			`</script>`
			`</head>`

			`<body></body>`

			`</html>`