Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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 (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-05-14T13:50:53.000Z (4 months ago)
- Last Synced: 2024-05-14T14:58:16.129Z (4 months ago)
- Topics: playground, rhai, rhai-playground, scripting-language, webassembly
- Language: Vue
- Homepage: https://rhai.rs/playground
- Size: 7.66 MB
- Stars: 19
- Watchers: 4
- Forks: 5
- Open Issues: 1
-
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.