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

<!--
    This file is used to add preview of the `.60` snippets in the generated rustdoc documentation.
    It can be injected via the `--html-in-header sixtyfps-docs-integration.html` option of rustdoc.
-->
<script type="module">
    "use strict";
    //import * as sixtyfps from 'https://sixtyfps.io/releases/0.x.0/wasm-interpreter/sixtyfps_wasm_interpreter.js';
    import * as sixtyfps from 'https://sixtyfps.io/snapshots/master/wasm-interpreter/sixtyfps_wasm_interpreter.js';

    async 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);

        let { component, error_string } = await sixtyfps.compile_from_string(source, "");
        if (error_string != "") {
            var text = document.createTextNode(error_string);
            var p = document.createElement('pre');
            p.appendChild(text);
            div.innerHTML = "<pre style='color: red; background-color:#fee; margin:0'>" + p.innerHTML + "</pre>";
        }
        if (component !== undefined) {
            component.run(canvas_id)
        }
    }

    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();

    // Included markdown files may have links to other markdown files, which may not have been
    // resolved by rustdoc. This helper locates such links and resolves them, assuming that each
    // .md file gets its own sub-directory with an index.html.
    function fix_markdown_links() {
        for (let anchor of document.querySelectorAll('a[href$=".md"]')) {
            let url = new URL(anchor.href);
            let dir_separator = Math.max(url.pathname.lastIndexOf("/"), 0);
            let base_name = url.pathname.slice(dir_separator + 1, -3);
            let base_path = url.pathname.slice(0, dir_separator);
            url.pathname = base_path + "/../" + base_name + "/index.html";
            anchor.setAttribute("href", url.pathname);
        }
    }
    fix_markdown_links()

</script>
<link rel="stylesheet" href="https://sixtyfps.io/highlight-default.css">
<script src="https://sixtyfps.io/highlight.pack.js"></script>
<script src="https://sixtyfps.io/highlight_60.js"></script>
<script>
    // If we're running in rustdoc, change the hljs generated classes to the rustdoc
    // ones, so that the highlighting adjusts to the theme correctly.
    if (window.localStorage.getItem("rustdoc-theme") !== null) {
        window.addEventListener("DOMContentLoaded", () => {
            // Only highlight .60 blocks, leave the others to rustdoc
            for (dot60Block of document.querySelectorAll("pre code.language-60")) {
                hljs.highlightBlock(dot60Block)
            }

            // Some of the rustdoc selectors require the pre element to have the rust class
            for (codeBlock of document.querySelectorAll(".language-60.hljs")) {
                codeBlock.parentElement.classList.add("rust")
            }

            const highlightJSToRustDoc = [
                ["comment", "comment"],
                ["number", "number"],
                ["symbol", "struct"], // width:
                ["keyword", "kw"],
                ["built_in", "primitive"],
                ["string", "string"],
                ["title", "fnname"], // Foo :=
                ["type", "type"]
            ];

            for ([hljs_class, rustdoc_class] of highlightJSToRustDoc) {
                for (titleElement of document.querySelectorAll(`.hljs-${hljs_class}`)) {
                    titleElement.classList.remove(`hljs-${hljs_class}`);
                    titleElement.classList.add(rustdoc_class);
                }
            }
        });
    } else {
        hljs.initHighlightingOnLoad();
    }
</script>