slint/api/sixtyfps-rs/sixtyfps-docs-integration.html

<script type="module">
    "use strict";
    import * as sixtyfps from 'https://www.sixtyfps.io/wasm-interpreter/sixtyfps_wasm_interpreter.js';

    function render_or_error(source, div) {
        let canvas_id = 'canvas_' + Math.random().toString(36).substr(2, 9);
        let canvas = document.createElement("canvas");
        canvas.width = 100;
        canvas.height = 100;
        canvas.id = canvas_id;
        div.appendChild(canvas);
        try {
            sixtyfps.instantiate_from_string(source, canvas_id);
        } catch (e) {
            if (e.message === "Using exceptions for control flow, don't mind me. This isn't actually an error!") {
                throw e;
            }
            var text = document.createTextNode(e.message);
            var p = document.createElement('pre');
            p.appendChild(text);
            div.innerHTML = "<pre style='color: red; background-color:#fee; margin:0'>" + p.innerHTML + "</pre>";

            throw e;
        }
    }

    async function run() {

        await sixtyfps.default();

        var elements = document.querySelectorAll("code.language-60, div.highlight-60 div");
        for (var i = 0; i < elements.length; ++i) {
            let source = elements[i].innerText;
            let div = document.createElement("div");
            div.style = "float: right; padding:0; margin:0;";
            div.innerHTML = "<p>Preview:</p>";
            elements[i].parentElement.insertBefore(div, elements[i])
            setTimeout(function () { render_or_error(source, div); }, 1);
        }
    }
    run();


</script>