Skip to main content

HTML page

Some tools need to be executed within a browser to work. To support this scenario, rise4fun uses puppeteer to launch headless browsers and run the code with it.

This scenario is a bit more involved because it involves sending messages back and forth between the driver and the script running in the headless browser.

./docusaurus.config.js
    compileCode: {
        langs: [
        ...,
        {
            lang: "msgl",
            html: "./langs/msagl.html",
            outputFiles: [{
                name: "output.svg",
                title: "Generated graph",
            }]
        }
    ]}

The file msagl.html is a HTML page that receives render requests and send back results.

./langs/msagl.html
<html>
  <head>
    ...
  </head>
  <script type="module">
    document.addEventListener("DOMContentLoaded", () => {
        // setup renderer
        ...
        // handle rendering requests
        window.addEventListener("message", (msg) => {
            const { type, lang, source, id } = msg.data;
            // it's a request for us!
            if (type === "puppet" && lang == "msagl") {
                // compute response
                const svg = ...(source)
                // send response back
                window.rise4funPostMessage?.({
                    id,
                    outputFiles: {
                        "output.svg": svg,
                    },
                });
            }
        });

        // notify driver we are ready
        window.rise4funReady?.();
    });
  </script>
  <body></body>
</html>

Let's take a look at this example in action.

```msagl
graph G {
    kspacey -- swilliams;
    swilliams -- kbacon;
    bpitt -- kbacon;
    hford -- lwilson;
    lwilson -- kbacon;
}
```

When rendered in the docs, this snippet looks like any other code snippe. But you'll also notice an additional box underneath with the capitalized text.

http://localhost:3000
graph kspacey {
    kspacey -- swilliams;
    swilliams -- kbacon;
    bpitt -- kbacon;
    hford -- lwilson;
    lwilson -- kbacon;
}
Generated graph