Set up WebAssembly compilation and loading

This commit is contained in:
Eric Zhang 2021-06-01 12:42:23 -05:00
parent fa3fcb5e69
commit 2fe698824e
26 changed files with 36917 additions and 386 deletions

View File

@ -1,6 +1,11 @@
/.git
/target
pkg
/node_modules
/dist
/dist-ssr
/build
*.local
Dockerfile
.dockerignore
.env
README.md

4
.gitignore vendored
View File

@ -1,9 +1,9 @@
/target
pkg
node_modules
.DS_Store
dist
dist-ssr
build
*.local
.vscode

View File

@ -1,7 +1,7 @@
/target
pkg
node_modules
.DS_Store
dist
dist-ssr
build
*.local

153
Cargo.lock generated
View File

@ -57,6 +57,12 @@ dependencies = [
"safemem",
]
[[package]]
name = "bumpalo"
version = "3.7.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "9c59e7af012c713f529e7a3ee57ce9b31ddd858d4b512923602f74608b009631"
[[package]]
name = "bytecount"
version = "0.6.2"
@ -75,12 +81,28 @@ version = "1.0.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "b700ce4376041dcd0a327fd0097c41095743c4c8af8887265942faf1100bd040"
[[package]]
name = "cfg-if"
version = "0.1.10"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "4785bdd1c96b2a846b2bd7cc02e86b6b3dbf14e7e53446c4f54c92a361040822"
[[package]]
name = "cfg-if"
version = "1.0.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "baf1de4339761588bc0619e3cbc0120ee582ebb74b53b4efbf79117bd2da40fd"
[[package]]
name = "console_error_panic_hook"
version = "0.1.6"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "b8d976903543e0c48546a91908f21588a680a8c8f984df9a5d69feccb2b2a211"
dependencies = [
"cfg-if 0.1.10",
"wasm-bindgen",
]
[[package]]
name = "cpufeatures"
version = "0.1.4"
@ -244,7 +266,7 @@ version = "0.1.16"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "8fc3cb4d91f53b50155bdcfd23f6a4c39ae1969c2ae85982b135750cccaf5fce"
dependencies = [
"cfg-if",
"cfg-if 1.0.0",
"libc",
"wasi 0.9.0+wasi-snapshot-preview1",
]
@ -255,7 +277,7 @@ version = "0.2.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "7fcd999463524c52659517fe2cea98493cfe485d10565e7b0fb07dbba7ad2753"
dependencies = [
"cfg-if",
"cfg-if 1.0.0",
"libc",
"wasi 0.10.2+wasi-snapshot-preview1",
]
@ -422,7 +444,7 @@ version = "0.1.9"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "61124eeebbd69b8190558df225adf7e4caafce0d743919e5d6b19652314ec5ec"
dependencies = [
"cfg-if",
"cfg-if 1.0.0",
]
[[package]]
@ -431,6 +453,15 @@ version = "0.4.7"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "dd25036021b0de88a0aff6b850051563c6516d0bf53f8638938edbb9de732736"
[[package]]
name = "js-sys"
version = "0.3.51"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "83bdfbace3a0e81a4253f73b49e960b053e396a11012cbd49b9b74d6a2b67062"
dependencies = [
"wasm-bindgen",
]
[[package]]
name = "lazy_static"
version = "1.4.0"
@ -458,7 +489,7 @@ version = "0.4.14"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "51b9bbe6c47d51fc3e1a9b945965946b4c44142ab8792c50835a980d362c2710"
dependencies = [
"cfg-if",
"cfg-if 1.0.0",
]
[[package]]
@ -586,7 +617,7 @@ version = "0.8.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "fa7a782938e745763fe6907fc6ba86946d72f49fe7e21de074e08128a99fb018"
dependencies = [
"cfg-if",
"cfg-if 1.0.0",
"instant",
"libc",
"redox_syscall",
@ -804,9 +835,13 @@ dependencies = [
name = "rustpad-core"
version = "0.1.0"
dependencies = [
"console_error_panic_hook",
"js-sys",
"operational-transform",
"serde",
"serde_json",
"wasm-bindgen",
"wasm-bindgen-test",
]
[[package]]
@ -899,7 +934,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "8c4cfa741c5832d0ef7fab46cabed29c2aae926db0b11bb2069edd8db5e64e16"
dependencies = [
"block-buffer",
"cfg-if",
"cfg-if 1.0.0",
"cpufeatures",
"digest",
"opaque-debug",
@ -953,7 +988,7 @@ version = "3.2.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "dac1c663cfc93810f88aed9b8941d48cabf856a1b111c29a40439018d870eb22"
dependencies = [
"cfg-if",
"cfg-if 1.0.0",
"libc",
"rand 0.8.3",
"redox_syscall",
@ -1076,7 +1111,7 @@ version = "0.1.26"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "09adeb8c97449311ccd28a427f96fb563e7fd31aabf994189879d9da2394b89d"
dependencies = [
"cfg-if",
"cfg-if 1.0.0",
"log",
"pin-project-lite",
"tracing-core",
@ -1239,6 +1274,108 @@ version = "0.10.2+wasi-snapshot-preview1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "fd6fbd9a79829dd1ad0cc20627bf1ed606756a7f77edff7b66b7064f9cb327c6"
[[package]]
name = "wasm-bindgen"
version = "0.2.74"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "d54ee1d4ed486f78874278e63e4069fc1ab9f6a18ca492076ffb90c5eb2997fd"
dependencies = [
"cfg-if 1.0.0",
"serde",
"serde_json",
"wasm-bindgen-macro",
]
[[package]]
name = "wasm-bindgen-backend"
version = "0.2.74"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "3b33f6a0694ccfea53d94db8b2ed1c3a8a4c86dd936b13b9f0a15ec4a451b900"
dependencies = [
"bumpalo",
"lazy_static",
"log",
"proc-macro2",
"quote",
"syn",
"wasm-bindgen-shared",
]
[[package]]
name = "wasm-bindgen-futures"
version = "0.4.24"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "5fba7978c679d53ce2d0ac80c8c175840feb849a161664365d1287b41f2e67f1"
dependencies = [
"cfg-if 1.0.0",
"js-sys",
"wasm-bindgen",
"web-sys",
]
[[package]]
name = "wasm-bindgen-macro"
version = "0.2.74"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "088169ca61430fe1e58b8096c24975251700e7b1f6fd91cc9d59b04fb9b18bd4"
dependencies = [
"quote",
"wasm-bindgen-macro-support",
]
[[package]]
name = "wasm-bindgen-macro-support"
version = "0.2.74"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "be2241542ff3d9f241f5e2cb6dd09b37efe786df8851c54957683a49f0987a97"
dependencies = [
"proc-macro2",
"quote",
"syn",
"wasm-bindgen-backend",
"wasm-bindgen-shared",
]
[[package]]
name = "wasm-bindgen-shared"
version = "0.2.74"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "d7cff876b8f18eed75a66cf49b65e7f967cb354a7aa16003fb55dbfd25b44b4f"
[[package]]
name = "wasm-bindgen-test"
version = "0.3.24"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "8cab416a9b970464c2882ed92d55b0c33046b08e0bdc9d59b3b718acd4e1bae8"
dependencies = [
"console_error_panic_hook",
"js-sys",
"scoped-tls",
"wasm-bindgen",
"wasm-bindgen-futures",
"wasm-bindgen-test-macro",
]
[[package]]
name = "wasm-bindgen-test-macro"
version = "0.3.24"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "dd4543fc6cf3541ef0d98bf720104cc6bd856d7eba449fd2aa365ef4fed0e782"
dependencies = [
"proc-macro2",
"quote",
]
[[package]]
name = "web-sys"
version = "0.3.51"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "e828417b379f3df7111d3a2a9e5753706cae29c41f7c4029ee9fd77f3e09e582"
dependencies = [
"js-sys",
"wasm-bindgen",
]
[[package]]
name = "winapi"
version = "0.3.9"

View File

@ -1,18 +1,26 @@
FROM ekidd/rust-musl-builder:1.51.0 as backend
FROM ekidd/rust-musl-builder:latest as backend
WORKDIR /home/rust/src
COPY . .
RUN cargo test --release
RUN cargo build --release
FROM rust:alpine as wasm
WORKDIR /home/rust/src
RUN apk --no-cache add curl musl-dev
RUN curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
COPY . .
RUN wasm-pack build rustpad-core
FROM node:alpine as frontend
WORKDIR /usr/src/app
COPY package.json package-lock.json ./
COPY --from=wasm /home/rust/src/rustpad-core/pkg rustpad-core/pkg
RUN npm ci
COPY . .
RUN npm run build
FROM scratch
COPY --from=frontend /usr/src/app/dist dist
COPY --from=frontend /usr/src/app/build build
COPY --from=backend /home/rust/src/target/x86_64-unknown-linux-musl/release/rustpad-server .
USER 1000:1000
CMD [ "./rustpad-server" ]

25
config-overrides.js Normal file
View File

@ -0,0 +1,25 @@
const path = require("path");
module.exports = function override(config, env) {
const wasmExtensionRegExp = /\.wasm$/;
config.resolve.extensions.push(".wasm");
config.module.rules.forEach((rule) => {
(rule.oneOf || []).forEach((oneOf) => {
if (oneOf.loader && oneOf.loader.indexOf("file-loader") >= 0) {
// make file-loader ignore WASM files
oneOf.exclude.push(wasmExtensionRegExp);
}
});
});
// add a dedicated loader for WASM
config.module.rules.push({
test: wasmExtensionRegExp,
include: path.resolve(__dirname, "src"),
use: [{ loader: require.resolve("wasm-loader"), options: {} }],
});
return config;
};

36892
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,22 +1,43 @@
{
"name": "rustpad",
"version": "0.0.0",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"serve": "vite preview",
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject",
"format": "prettier --write ."
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"rustpad-core": "file:./rustpad-core/pkg"
},
"devDependencies": {
"@types/react": "^17.0.8",
"@types/react-dom": "^17.0.5",
"@vitejs/plugin-react-refresh": "^1.3.3",
"prettier": "2.3.0",
"react-app-rewired": "^2.1.8",
"typescript": "^4.3.2",
"vite": "^2.3.4"
"wasm-loader": "^1.3.0"
},
"eslintConfig": {
"extends": [
"react-app"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

2
public/favicon.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.2 KiB

View File

@ -1,8 +1,8 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="%PUBLIC_URL%/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rustpad</title>
<meta
@ -18,7 +18,7 @@
/>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

View File

@ -4,7 +4,19 @@ version = "0.1.0"
authors = ["Eric Zhang <ekzhang1@gmail.com>"]
edition = "2018"
[lib]
crate-type = ["cdylib", "rlib"]
[features]
default = ["console_error_panic_hook"]
[dependencies]
console_error_panic_hook = { version = "0.1", optional = true }
operational-transform = "0.6.0"
serde = { version = "1.0.126", features = ["derive"] }
serde_json = "1.0.64"
wasm-bindgen = { version = "0.2", features = ["serde-serialize"] }
js-sys = "0.3.51"
[dev-dependencies]
wasm-bindgen-test = "0.3"

View File

@ -1,7 +1,14 @@
#[cfg(test)]
mod tests {
#[test]
fn it_works() {
assert_eq!(2 + 2, 4);
}
//! Core logic for Rustpad, shared with the client through WebAssembly
#![warn(missing_docs)]
use wasm_bindgen::prelude::*;
mod utils;
/// Duplicate an input, returning a list of two copies
#[wasm_bindgen]
pub fn duplicate(input: String) -> JsValue {
utils::set_panic_hook();
JsValue::from_serde(&vec![input; 2]).unwrap()
}

11
rustpad-core/src/utils.rs Normal file
View File

@ -0,0 +1,11 @@
/// Set a panic listener to display better error messages.
pub fn set_panic_hook() {
// When the `console_error_panic_hook` feature is enabled, we can call the
// `set_panic_hook` function at least once during initialization, and then
// we will get better error messages if our code ever panics.
//
// For more details see
// https://github.com/rustwasm/console_error_panic_hook#readme
#[cfg(feature = "console_error_panic_hook")]
console_error_panic_hook::set_once();
}

18
rustpad-core/tests/web.rs Normal file
View File

@ -0,0 +1,18 @@
//! Test suite for the Web and headless browsers.
#![cfg(target_arch = "wasm32")]
use rustpad_core::duplicate;
use js_sys::JSON;
use wasm_bindgen_test::*;
wasm_bindgen_test_configure!(run_in_browser);
#[wasm_bindgen_test]
fn pass() {
let s = String::from("foobar");
let value = duplicate(s);
let value = JSON::stringify(&value).unwrap();
assert_eq!(value.to_string(), String::from("[\"foobar\",\"foobar\"]"));
}

View File

@ -9,8 +9,8 @@ mod server;
/// Construct routes for static files from React
fn frontend() -> BoxedFilter<(impl Reply,)> {
warp::fs::dir("dist")
.or(warp::get().and(warp::fs::file("dist/index.html")))
warp::fs::dir("build")
.or(warp::get().and(warp::fs::file("build/index.html")))
.boxed()
}

View File

@ -1,4 +1,5 @@
import { useEffect, useState } from "react";
import { duplicate } from "rustpad-core";
function App() {
const [input, setInput] = useState("");
@ -6,9 +7,10 @@ function App() {
const [messages, setMessages] = useState<[number, string][]>([]);
useEffect(() => {
console.log(duplicate("Hello"));
const uri =
(location.origin.startsWith("https") ? "wss://" : "ws://") +
location.host +
(window.location.origin.startsWith("https") ? "wss://" : "ws://") +
window.location.host +
"/api/socket";
const ws = new WebSocket(uri);
console.log("connecting...");

View File

@ -1,15 +0,0 @@
<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
<stop stop-color="#41D1FF"/>
<stop offset="1" stop-color="#BD34FE"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFEA83"/>
<stop offset="0.0833333" stop-color="#FFDD35"/>
<stop offset="1" stop-color="#FFA800"/>
</linearGradient>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

14
src/index.tsx Normal file
View File

@ -0,0 +1,14 @@
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import "./styles/normalize.css";
import "./styles/skeleton.css";
// An asynchronous entry point is needed to load WebAssembly files.
import("./App").then(({ default: App }) => {
ReactDOM.render(
<StrictMode>
<App />
</StrictMode>,
document.getElementById("root")
);
});

View File

@ -1,12 +0,0 @@
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./css/normalize.css";
import "./css/skeleton.css";
ReactDOM.render(
<StrictMode>
<App />
</StrictMode>,
document.getElementById("root")
);

1
src/react-app-env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="react-scripts" />

13
src/setupProxy.js Normal file
View File

@ -0,0 +1,13 @@
const createProxyMiddleware = require("http-proxy-middleware");
module.exports = function (app) {
app.use(
"/api",
createProxyMiddleware({
target: "http://localhost:3030",
changeOrigin: true,
secure: false,
ws: true,
})
);
};

1
src/vite-env.d.ts vendored
View File

@ -1 +0,0 @@
/// <reference types="vite/client" />

View File

@ -1,15 +1,16 @@
{
"compilerOptions": {
"target": "ESNext",
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": false,
"esModuleInterop": false,
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,

View File

@ -1,20 +0,0 @@
import { defineConfig } from "vite";
import reactRefresh from "@vitejs/plugin-react-refresh";
// https://vitejs.dev/config/
export default defineConfig({
esbuild: {
jsxInject: `import React from "react"`,
},
plugins: [reactRefresh()],
server: {
proxy: {
"/api": {
target: "http://localhost:3030",
changeOrigin: true,
secure: false,
ws: true,
},
},
},
});