Merge pull request #55 from mangolang/web_compile

Compiler in wasm

Cargo.toml

@@ -16,4 +16,22 @@ regex = "0.2.*"
 string-interner = "0.6.*"
 lazy_static = "1.0.*"
 derive-new = "0.5.*"
-cargo-wasm = "0.4.*"
+#cargo-wasm = "0.4.*"
+wasm-bindgen = "0.2.*"
+
+[profile.release]
+lto = true
+opt-level = 's'
+
+[lib]
+crate-type = ["cdylib"]
+name = "mango"
+path = "src/lib.rs"
+
+#[[bin]]
+#name = "mangoc"
+#path = "src/mango/ui/cli/main.rs"
+
+#[[bin]]
+#name = "mango-webi"
+#path = "src/mango/ui/webi/compile_str.rs"

README.rst

@@ -38,14 +38,14 @@ These instructions were tested on Ubuntu 18.4 (using Bash). It should also work
 
 	rustup toolchain install nightly
 	rustup override set nightly  # make sure you are in the mango directory
-	rustup target add wasm32-unknown-emscripten  # emscritem for now
+	rustup target add wasm32-unknown-unknown --toolchain nightly
 	
 * We need a few packages:
 
 .. code:: bash
 
 	rustup component add rustfmt-preview
-	cargo install cargo-web
+    cargo install wasm-bindgen-cli
 
 * There are git commit hooks that you can use. They test that code is formatted well and compiles and commit messages are correctly formatted. You don't have to use them if you ensure these things yourself. If you want to use them:
 
@@ -65,12 +65,7 @@ These instructions were tested on Ubuntu 18.4 (using Bash). It should also work
 	cargo test --all
 	cargo run --bin mango-cli
 
-* To deploy the web version in release mode:
-
-.. code:: bash
-
-	cargo web deploy --release
-	# then open target/deploy/index.html in a browser
+* To deploy the web version in release mode, run the script `dev/build_web.sh` (or view it for the steps needed). It uses Python's SimpleHTTPServer, if you don't have that, you can still find the deployable code in `target/deploy`.
 
 * You're now ready to make changes! If you want to help, you're very welcome! Have a glance at CONTRIBUTING.rst_ if you have a minute.
 

dev/build_web.sh

@@ -0,0 +1,25 @@
+#!/usr/bin/env bash
+
+pth="$(dirname $(dirname $(realpath -s $0)))"
+echo $pth
+
+set -e  # stop on error
+set -o xtrace  # print commands
+
+# Compile rust to wasm
+# TODO: need release as workaround for a compile error in dependency; remove when that is resolved
+cargo +nightly build --target wasm32-unknown-unknown --release
+
+# Copy the static files
+outdir="$pth/target/deploy"
+mkdir -p "$outdir"
+cp -rf "$pth/static"/* "$outdir"
+
+# Prepare the wasm for use from js
+wasm-bindgen --debug --no-modules --no-typescript "$pth/target/wasm32-unknown-unknown/release/mango.wasm" --out-dir "$outdir"
+
+# Start a simple webserver
+(
+    cd "$outdir"
+    python -m SimpleHTTPServer
+)

src/lib.rs

@@ -1,4 +1,6 @@
+#![feature(proc_macro, wasm_custom_section, wasm_import_module)]
 extern crate core;
+extern crate wasm_bindgen;
 #[macro_use]
 extern crate lazy_static;
 extern crate regex;
@@ -8,8 +10,8 @@ extern crate derive_new;
 
 pub mod mango {
     // Utilities
-    pub mod cli;
     pub mod jit;
+    pub mod ui;
     pub mod util;
 
     // Types

src/mango/token/collect/stream.rs

@@ -20,11 +20,12 @@ pub struct MemoryTokenStream {
 }
 
 impl MemoryTokenStream {
-    #[allow(dead_code)]
+    #[allow(dead_code)] // TODO: for now
     pub fn new(tokens: Vec<Tokens>) -> MemoryTokenStream {
         MemoryTokenStream { index: 0, tokens }
     }
 
+    #[allow(dead_code)] // TODO: for now
     pub fn to_text(&self) -> String {
         format!(
             " {}",

src/mango/ui/cli/main.rs

@@ -0,0 +1,3 @@
+pub fn main() {
+    println!("welcome to Mango CLI!");
+}

src/mango/ui/mod.rs

@@ -0,0 +1,5 @@
+pub mod cli;
+pub use self::cli::*;
+
+pub mod webi;
+pub use self::webi::*;

src/mango/ui/webi/compile_str.rs

@@ -0,0 +1,7 @@
+use wasm_bindgen::prelude::*;
+
+#[wasm_bindgen]
+pub fn compile_string_to_wat(code: &str) -> String {
+    // TODO
+    format!("compiled: {}", code).to_owned()
+}

src/mango/ui/webi/mod.rs

@@ -0,0 +1,2 @@
+pub mod compile_str;
+pub use self::compile_str::compile_string_to_wat;

src/mango/ui/webi/static/prepend-emscripten.js

@@ -0,0 +1,3 @@
+/**
+ * Mango: Javascript prefix for emscripten target.
+ */

src/mango/ui/webi/static/prepend-general.js

@@ -0,0 +1,3 @@
+/**
+ * Mango: General javascript prefix.
+ */

static/index.html

@@ -0,0 +1,100 @@
+<!-- TODO: NOTICE: -->
+<!-- TODO: This is a simple wasm demo of the compiler. -->
+<!-- TODO: The 'real' version should be in github.com/mangolang/website. -->
+
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1" name="viewport"/>
+	<style type="text/css" media="screen">
+		body {
+			background-color: orange;
+		}
+
+		#content {
+			background-color: #EEE;
+			max-width: 1000px;
+			margin: 0 auto;
+		}
+
+		#editor {
+			width: 100%;
+			height: 600px;
+		}
+
+		#output {
+			background-color: #DDD;
+			border: 1px solid black;
+			min-height: 150px;
+		}
+	</style>
+</head>
+<body>
+<main>
+	<section id="content">
+		<h1>Mango (wasm)</h1>
+		<div id="editor">// Type your Mango code here!
+
+		</div>
+		<button id="compile_wat" onclick="alert('Not ready yet, please wait or check console');"
+		        title="Compile the code to the ascii text representation of WebAssembly">Compile to wat
+		</button>
+		<button onclick="alert('Not implemented');" title="Compile the code to binary, executable WebAssembly">Compile to wasm
+		</button>
+		<button onclick="alert('Not implemented');"
+		        title="Compile the code to binary WebAssembly and run it, showing only the output">Compile and run
+		</button>
+		<div id="output"></div>
+	</section>
+</main>
+
+<!-- Editor -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/theme-crimson_editor.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/mode-javascript.js"></script>
+
+<script type="application/javascript">
+    window.editor = ace.edit("editor");
+    window.editor.setTheme("ace/theme/crimson_editor");
+    window.editor.session.setMode("ace/mode/javascript");
+    // window.editor.resize();
+</script>
+
+<!--Wasm Mango compiler-->
+<script src="./mango.js" type="module"></script>
+<script type="module">
+    (async function () {
+        /**
+         * Show a string in the output area, replacing any previous results.
+         */
+        function show_output(txt) {
+            let output = document.getElementById("output");
+            output.innerHTML = "";
+            let pre = document.createElement("pre");
+            pre.innerHTML = txt;
+            output.appendChild(pre);
+        }
+
+        /**
+         * Load the Mango compiler wasm code (async).
+         */
+        let _ = await window.wasm_bindgen("./mango_bg.wasm");
+        let mango = window.wasm_bindgen;
+
+        /**
+         * Bind the "compile to wat" button.
+         */
+        document.getElementById("compile_wat").onclick = function (event) {
+            let mangocode = window.editor.getValue();
+            console.log("Compiling Mango:\n", mangocode);
+            let watcode = mango.compile_string_to_wat(mangocode);
+            console.log("Resulting WebAssembly text:\n", watcode);
+            show_output(watcode);
+        };
+    })();
+</script>
+</body>
+</html>