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