https://github.com/rhaiscript/playground

A Rhai scripting playground that runs Rhai scripts using WebAssembly in a web browser.
https://github.com/rhaiscript/playground

playground rhai rhai-playground scripting-language webassembly

Last synced: about 1 month ago
JSON representation

A Rhai scripting playground that runs Rhai scripts using WebAssembly in a web browser.

• Host: GitHub
• URL: https://github.com/rhaiscript/playground
• Owner: rhaiscript
• License: mit
• Created: 2020-06-21T13:03:52.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-05-14T13:50:53.000Z (8 months ago)
• Last Synced: 2024-08-10T14:21:54.672Z (5 months ago)
• Topics: playground, rhai, rhai-playground, scripting-language, webassembly
• Language: Vue
• Homepage: https://rhai.rs/playground
• Size: 7.66 MB
• Stars: 20
• Watchers: 4
• Forks: 5
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Rhai Playground

===

This is an attempt to make a playground for the [Rhai scripting language][rhai]

using WebAssembly.

The `master` branch is automatically built and deployed [here][playground-dev].

A known-good build is published on [https://rhaiscript.github.io/playground/stable/][playground-stable].

[rhai]: https://github.com/rhaiscript/rhai

[playground-stable]: https://rhaiscript.github.io/playground/stable/

[playground-dev]: https://rhaiscript.github.io/playground/dev/

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](https://codepen.io/alvinhochun/pen/LYGQEaW)

```html

iframe.rhaiPlayground {

    width: 100%;

    height: 400px;

    border: 0;

}

fn hello_rhai(msg) {

    print("Hello world! " + msg);

}

hello_rhai("Embed the Rhai Playground to run Rhai code!");



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

});

```

## How to install

```sh

npm install

```

## How to run in debug mode

```sh

# 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

```sh

# 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

```sh

# 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.