RenderBlocks.js

// Taken from https://makecode.microbit.org/blocks-embed ("HTML only")

/* message signatures
export interface RenderBlocksRequestMessage extends SimulatorMessage {
    type: "renderblocks",
    id: string;
    code: string;
    options?: {
        package?: string;
        packageId?: string;
        snippetMode?: boolean;
    }
}

export interface RenderBlocksResponseMessage extends SimulatorMessage {
    source: "makecode",
    type: "renderblocks",
    id: string;
    svg?: string;
    width?: number;
    height?: number;
}*/

var makeCodeRenderPre = makeCodeRenderPre || (function () {
    // pre waiting to be rendered
    // when undefined, iframe is loaded and ready
    var pendingPres = [];
    function injectRenderer() {
        var f = document.getElementById("makecoderenderer");
        // check iframe already added to the DOM
        if (f) {
            return;
        }
        var f = document.createElement("iframe");
        f.id = "makecoderenderer";
        f.style.position = "absolute";
        f.style.left = 0;
        f.style.bottom = 0;
        f.style.width = "1px";
        f.style.height = "1px";
        f.src = "https://makecode.microbit.org/--docs?render=1"
        document.body.appendChild(f);
    }

    function renderPre(pre) {
        console.log('render ' + pre.id)
        var f = document.getElementById("makecoderenderer");
        // check if iframe is added and ready (pendingPres is undefined)
        if (!f || !!pendingPres) {
            // queue up
            pendingPres.push(pre);
            injectRenderer();
        } else {
            f.contentWindow.postMessage({
                type: "renderblocks",
                id: pre.id,
                code: pre.innerText,
                options: {
                	packageId: pre.getAttribute("pub")
                }
            }, "https://makecode.microbit.org/");
        }
    }

    // listen for messages
    window.addEventListener("message", function (ev) {
        var msg = ev.data;
        if (msg.source != "makecode") return;

        console.log(msg.type)
        switch (msg.type) {
            case "renderready":
                // flush pending requests            				
                var pres = pendingPres;
                // set as undefined to notify that iframe is ready
                pendingPres = undefined;
                pres.forEach(function (pre) { renderPre(pre); })
                break;
            case "renderblocks":
                var svg = msg.svg; // this is an string containing SVG
                var id = msg.id; // this is the id you sent
                // replace text with svg
                var img = document.createElement("img");
                img.src = msg.uri;
                img.width = msg.width;
                img.height = msg.height;
                var code = document.getElementById(id);
                code.parentElement.insertBefore(img, code)
                code.parentElement.removeChild(code);
                // @ngammarano
                numberOfPres--;
                if (numberOfPres == 0) {
                    document.getElementById("body").style = "background-color: #D0FFD0";
                };
                break;
        }
    }, false);

    return renderPre;
})();

let numberOfPres = 0;

function renderSnippets() {
    // TODO ADD RENDER LOGIC HERE
    let pres = document.getElementsByTagName("pre");
    numberOfPres = pres.length;
    if (numberOfPres != 0) {
        document.getElementById("body").style = "background-color: #FFFFD0";
    };
    Array.prototype.forEach.call(pres, function (pre) {
        makeCodeRenderPre(pre);
    });
}



// load the renderer
//renderSnippets();



let preNumber = 0;

function clearScreen() {
    document.getElementById("mainBlocks").innerHTML = "";
    preNumber = 0;
}

function addCode() {
    document.getElementById("mainBlocks").innerHTML += "<h2>Project " + preNumber.toString() + "</h2>";
    document.getElementById("mainBlocks").innerHTML += "<pre id='pre" + preNumber.toString() + "'>" + document.getElementById("makecodeCode").value + "</pre>";
    preNumber++;
}

function addProject() {
    document.getElementById("mainBlocks").innerHTML += "<h2>Project " + preNumber.toString() + "</h2>";
    document.getElementById("mainBlocks").innerHTML += "<pre id='pre" + preNumber.toString() + "' pub='" + document.getElementById("makecodeProject").value + "'></pre>";
    preNumber++;
}