Loading Blazor and Ren-C Wasm in the Same Page

Development Language Bridging
1

So I'm cleaning some files off of a laptop that I'm giving my mom (in preparation for the moment when I get around to picking a new one to buy, whenever that happens).

One file I had just on this laptop pertained to getting Blazor to load a Ren-C interpreter. The only big deal was that some programs built with emscripten (like Blazor itself) do not play friendly with other emscripten programs loaded in the same page. The Wasm build is now done so that it moves itself out of the way. As a consequence, the loading just works about like any other "calling JS from Blazor" works.

There's really nothing to see in loading the two into the same page. There's a Blazor-related <script> tag and a Ren-C-related <script> tag. I didn't publish it because I didn't put together a meaningful demo once the two were loaded, but I wanted to put this somewhere before letting go of the laptop.

The more unique level of integration would be to be able to call Ren-C directly from C# / .NET built for Wasm without needing to go through a JavaScript bridge. But, getting them loading in the same page was a necessary but sufficient precondition for that.

For whatever it is worth, here is an index.html that loads both libraries, which you can call from JS (and you can call Ren-C from the JS bridge inside Blazor, and Blazor from Ren-C via the Blazor API exposed as JS):

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Test Ren-C Integration</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
</head>

<body>
    <app>Loading...</app>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <!-- Disable "autostart" so we can put a .then() on Blazor.start() -->
    <!-- https://github.com/dotnet/aspnetcore/issues/17504 -->
    <script src="_framework/blazor.webassembly.js" autostart="false"></script>

    <!-- The Ren-C interpreter loader for WebAssembly -->
    <script src="https://metaeducation.s3.amazonaws.com/travis-builds/load-r3.js"></script>
    <script>
        Blazor.start({}).then(() => {
            alert("blazor says its loaded?")

            reb.Startup({tracing_on: true}).then(() => {
                alert("Rebol says its loaded?")
            })
        });
    </script>
</body>

</html>
1 Like