1
0
mirror of https://github.com/google/comprehensive-rust.git synced 2025-05-22 18:30:33 +02:00

rust-wasm-template

This commit is contained in:
sakex 2023-07-21 12:05:32 +02:00
parent e2038b4897
commit 964a0d6215
11 changed files with 1469 additions and 86 deletions

View File

@ -0,0 +1,13 @@
{
"image": "mcr.microsoft.com/devcontainers/rust:0-1-bullseye",
// Configure tool-specific properties.
"customizations": {
// Configure properties specific to VS Code.
"vscode": {
"settings": {},
"extensions": [
"streetsidesoftware.code-spell-checker"
]
}
}
}

1282
Cargo.lock generated

File diff suppressed because it is too large Load Diff

View File

@ -5,4 +5,6 @@ members = [
"src/bare-metal/useful-crates/allocator-example",
"src/bare-metal/useful-crates/zerocopy-example",
"src/exercises/concurrency/chat-async",
"src/rust-wasm-template/project",
"src/rust-wasm-template/server",
]

View File

@ -0,0 +1,49 @@
# rust-wasm-template
This repository contains the minimum amount of code needed to experiment with WebAssembly. Including a web server to serve the HTML and WASM as well as the javascript boilerplate needed to load WASM.
- `/server` contains the Web server as well as the static files
- `/project` contains the Rust code
## Installation
Note: If you are running from a devcontainer, you only need to install wasm-pack.
### Rust
Recommended:
```
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
```
Alternatively, see the [installation page](https://www.rust-lang.org/tools/install).
### wasm-pack
Recommended:
```
curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
```
Alternatively, see the [installation page](https://rustwasm.github.io/wasm-pack/installer/).
## Run the local server
```
cd server
cargo run
```
- On a devcontainer, go to `PORTS` and open the link under `Local Address` for Port `8080`
- Locally, visit http://localhost:8080
## Build WASM and copy target to the correct path
```
cd project
wasm-pack build --target web && cp -r pkg ../server
```
This command needs to be re-run to view your latest changes.

View File

@ -0,0 +1,19 @@
[package]
name = "project"
version = "0.1.0"
edition = "2021"
publish = false
[lib]
crate-type = ["cdylib", "rlib"]
[dependencies]
wasm-bindgen = { version = "0.2.74", features = ["serde-serialize"] }
wasm-bindgen-futures = "0.4.24"
js-sys = "0.3.51"
# The `console_error_panic_hook` crate provides better debugging of panics by
# logging them with `console.error`. This is great for development, but requires
# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
# code size when deploying.
console_error_panic_hook = "0.1.7"

View File

@ -0,0 +1,25 @@
extern crate console_error_panic_hook;
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
extern "C" {
fn alert(s: &str);
#[wasm_bindgen(js_namespace = console)]
pub fn log(s: &str);
}
#[wasm_bindgen]
pub fn set_panic_hook() {
// Generates better error messages if our code ever panics.
//
// For more details see
// https://github.com/rustwasm/console_error_panic_hook#readme
console_error_panic_hook::set_once();
}
#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
a + b
}

View File

@ -0,0 +1,10 @@
[package]
name = "server"
version = "0.1.0"
edition = "2021"
publish = false
[dependencies]
actix-web = "3.3.2"
actix-files = "0.5.0"

View File

@ -0,0 +1,97 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebAssembly Template</title>
<style>
@font-face {
font-family: SourceCodePro;
src: url(/font.otf);
}
body {
background-color: #282c34;
font-family: "SourceCodePro";
}
h1 {
margin-left: 40px;
max-width: 530px;
color: #ca6568;
}
i {
color: #ca6568;
}
p, ul {
margin-left: 40px;
max-width: 530px;
text-align: justify;
color: #99a0ab;
}
li {
color: #ca6568;
background-color: #31363f;
margin-bottom: 20px;
max-width: 470px;
padding: 10px;
}
a {
color: #5fade9;
}
button {
background-color: #99a0ab;
width: 200px;
padding: 5px 0;
margin-left: calc(50% - 100px - 11px);
border-radius: 5px;
border: 0;
cursor: pointer;
transition: 1s;
}
button:hover {
background-color: #282c34;
color: white;
}
input, select {
float: right;
width: 150px;
padding: 5px;
background-color: #31363f;
border: 1px solid #99a0ab;
color: #99a0ab;
border-radius: 4px;
}
#wasmoutput {
background-color: aliceblue;
color: #282c34;
padding: 10px;
border-radius: 5px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>
WebAssembly Template
</h1>
<p>
This repository contains the minimum amount of code needed to experiment with WebAssembly. Including a web server to serve the HTML and WASM as well as the javascript boilerplate needed to load WASM.
</p>
<p>
Edit <a href="">server/files/index.mjs</a> to edit the Javascript.
</p>
<p>
WASM output: <span id="wasmoutput" />
</p>
<script type="module" src="/files/index.mjs"></script>
</body>
</html>

View File

@ -0,0 +1,8 @@
import init, {set_panic_hook, add} from '/wasm/project.js';
(async () => {
// Run the init method to initiate the WebAssembly module.
await init();
set_panic_hook();
document.querySelector("#wasmoutput").innerHTML = add(1, 2);
})();

View File

@ -0,0 +1,50 @@
use actix_files::NamedFile;
use actix_web::{get, web, App, HttpServer, Result};
use std::path::PathBuf;
#[get("/")]
async fn index() -> Result<NamedFile> {
let path: PathBuf = "./files/index.html".parse()?;
Ok(NamedFile::open(path)?)
}
#[get("/files/{name}")]
async fn files(web::Path(name): web::Path<String>) -> Result<NamedFile> {
let path: PathBuf = format!("./files/{}", name).parse()?;
Ok(NamedFile::open(path)?)
}
#[get("/font.otf")]
async fn font() -> Result<NamedFile> {
let path: PathBuf = "./files/source-code-regular.otf".parse()?;
Ok(NamedFile::open(path)?)
}
#[get("/wasm/{name}")]
async fn serve_wasm(web::Path(name): web::Path<String>) -> Result<NamedFile> {
let path: PathBuf = format!("./pkg/{}", name).parse()?;
Ok(NamedFile::open(path)?)
}
#[get("/wasm/snippets/{snippet_name}/{name}")]
async fn serve_wasm_snippet(
web::Path((snippet_name, name)): web::Path<(String, String)>,
) -> Result<NamedFile> {
let path: PathBuf = format!("./pkg/snippets/{}/{}", snippet_name, name).parse()?;
Ok(NamedFile::open(path)?)
}
#[actix_web::main]
async fn main() -> std::io::Result<()> {
HttpServer::new(|| {
App::new()
.service(index)
.service(files)
.service(serve_wasm)
.service(serve_wasm_snippet)
.service(font)
})
.bind("127.0.0.1:8080")?
.run()
.await
}