Rhai Playground

This is an attempt to make a playground for the Rhai scripting language using WebAssembly.

The master branch is automatically built and deployed here. A known-good build is published on https://rhaiscript.github.io/playground/stable/.

Embedding the Rhai Playground (work in progress)

It is still a work-in-progress, but it is possible to embed the playground for use on another web page.

View demo on CodePen

<style>
iframe.rhaiPlayground {
    width: 100%;
    height: 400px;
    border: 0;
}
</style>

<pre><code class="language-rhai">fn hello_rhai(msg) {
    print("Hello world! " + msg);
}
hello_rhai("Embed the Rhai Playground to run Rhai code!");
</code></pre>

<script>
const ORIGIN = "https://rhaiscript.github.io";
const PATH = "/playground/stable/";
let nextPlaygroundIdx = 0;
function loadPlayground(el) {
    const id = "" + nextPlaygroundIdx++;
    const iframe = document.createElement("iframe");
    iframe.style = el.style;
    iframe.className = el.className;
    iframe.classList.add("rhaiPlayground");
    iframe.src = ORIGIN + PATH + "#embed-" + id;
    el.replaceWith(iframe);
    const code = el.innerText;
    const onMessage = ev => {
        if (
            ev.data.from === "rhai-playground" &&
            ev.data.req === "embed-loaded" &&
            ev.data.id === id
        ) {
            iframe.contentWindow.postMessage(
                {
                    to: "rhai-playground",
                    req: "embed-init",
                    code,
                },
                ORIGIN,
            );
            // window.removeEventListener("message", onMessage);
        }
    }
    window.addEventListener("message", onMessage);
}

document.querySelectorAll("code.language-rhai").forEach(el => {
    loadPlayground(el);
});
</script>

How to install

npm install

How to run in debug mode

# Builds the project and opens it in a new browser tab. Auto-reloads when the project changes.
npm start

How to build in release mode

# Use the Open SSL legacy provider if using Node 17 and above.
#export NODE_OPTIONS=--openssl-legacy-provider

# Builds the project and places it into the `dist` folder.
npm run build

How to run unit tests

# Runs tests in Firefox
npm test -- --firefox

# Runs tests in Chrome
npm test -- --chrome

# Runs tests in Safari
npm test -- --safari

What does each file do?

• Cargo.toml contains the standard Rust metadata. You put your Rust dependencies in here. You must change this file with your details (name, description, version, authors, categories)

• package.json contains the standard npm metadata. You put your JavaScript dependencies in here. You must change this file with your details (author, name, version)

• webpack.config.js contains the Webpack configuration. You shouldn't need to change this, unless you have very special needs.

• The js folder contains your JavaScript code (index.js is used to hook everything into Webpack, you don't need to change it).

• The src folder contains your Rust code.

• The static folder contains any files that you want copied as-is into the final build. It contains an index.html file which loads the index.js file.

• The tests folder contains your Rust unit tests.