playground crate, basic WASM/TS setup

[achimcc]

Introduction

The ink Playground runs Rust Analyzer in the Browser. To do this, we need to compile certain Rust Analyzer Crates to WebAssembly to make them available in the Browser. This PR adds a new Crate playground to the repo which intends to serve this feature in future iterations. We provide with this PR the basic required tools and components for the desired setup, together with the corresponding testing frameworks and CI configurations.

Usage

To test this PR, you need to install wasm-pack together with the required nightly toolchain, cd into the crate directory and run yarn start:

curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

rustup component add rust-src --toolchain nightly-2021-07-29-x86_64-unknown-linux-gnu

cd crates/playground

yarn start

Used components/packages

On the Rust side of the playground crate:

• wasm-pack for creating a hybrid rust/typescript application

• wasm-bindgen to allow JavaScript bindings for the Rust/WASM fucntions

• rayon for multithreading

• wasm-bindgen-rayon allows to access the multithreading functionalieties from within the browser

On the TypeScript side:

• wasm-pack-plugin takes care of executing wasm-pack build commands when running yarn build. It also provides watch script functionalities when running yarn start end, when editing the rust source-code, it then re-compiles it to WebAssembly

• comlink reduces the complexity in handling WebWorkers, especially the WebWorkers which are providing the Rust Analyzer functionalities

Code structure

There are two directories containing source-code in this crate:

• src contains the Rust code which gets compiled to WebAssembly

• js contains the JS/TS code which serves the Frontend app. It references the pkg directory to which the Rust code from the src directory gets compiled to p[rovide the WebAssembly Webworkers through the Comlink plugin.

Currently the App does one call to a Webworker which invokes the evaluation of a WebAssembly function greet(), which is provided by the compiled Rust code. It is only added to test the interaction between the different WASM/TS tools of this crate.

The package provides unit testing with jest and React testing library and unit testing of the Wasm part by wasm-pack test. It contains the WebAssembly tests in the tests dir, while the tests executed by jest are located under js/__tests__. We configured yarn in a way such that running yarn test is running both the WebAssembly and the jest tests.

We configured the CI in a way such that it runs all the provided tests in this crate and installs the required tooling and toolchain first.

[cmichi]

The project name is "ink!" (with the exclamation mark). Could you replace other occurrences of the name without ! as well? For example in the repo readme.

[thought2]

lgtm! just the small things that I comment we should discuss...