From 5a882764f72dd3370579d3afd0151ec7ccdde03d Mon Sep 17 00:00:00 2001
From: Noah Hellman <noah@hllmn.net>
Date: Sun, 5 Feb 2023 19:41:11 +0100
Subject: [PATCH] examples: add wasm online demo

---
 Cargo.lock                       | 103 +++++++++++++++++++++++++++++++
 Cargo.toml                       |   1 +
 Makefile                         |   1 +
 examples/jotdown_wasm/Cargo.toml |  19 ++++++
 examples/jotdown_wasm/Makefile   |  15 +++++
 examples/jotdown_wasm/index.html |  33 ++++++++++
 examples/jotdown_wasm/src/lib.rs |  10 +++
 7 files changed, 182 insertions(+)
 create mode 100644 examples/jotdown_wasm/Cargo.toml
 create mode 100644 examples/jotdown_wasm/Makefile
 create mode 100644 examples/jotdown_wasm/index.html
 create mode 100644 examples/jotdown_wasm/src/lib.rs

diff --git a/Cargo.lock b/Cargo.lock
index 24d805e..bae5c3b 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -41,6 +41,12 @@ version = "1.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "bef38d45163c2f1dde094a7dfd33ccf595c92905c8f8f4fdc18d06fb1037718a"
 
+[[package]]
+name = "bumpalo"
+version = "3.12.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0d261e256854913907f67ed06efbc3338dfe6179796deefc1ff763fc1aee5535"
+
 [[package]]
 name = "cc"
 version = "1.0.79"
@@ -120,12 +126,45 @@ dependencies = [
  "jotdown",
 ]
 
+[[package]]
+name = "jotdown_wasm"
+version = "0.1.0"
+dependencies = [
+ "jotdown",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "js-sys"
+version = "0.3.61"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "445dde2150c55e483f3d8416706b97ec8e8237c307e5b7b4b8dd15e6af2a0730"
+dependencies = [
+ "wasm-bindgen",
+]
+
 [[package]]
 name = "libc"
 version = "0.2.139"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "201de327520df007757c1f0adce6e827fe8562fbc28bfd9c15571c66ca1f5f79"
 
+[[package]]
+name = "log"
+version = "0.4.17"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "abb12e687cfb44aa40f41fc3978ef76448f9b6038cad6aef4259d3c095a2382e"
+dependencies = [
+ "cfg-if",
+]
+
+[[package]]
+name = "once_cell"
+version = "1.17.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6f61fba1741ea2b3d6a1e3178721804bb716a68a6aeba1149b5d52e3d464ea66"
+
 [[package]]
 name = "proc-macro2"
 version = "1.0.51"
@@ -249,6 +288,70 @@ version = "0.11.0+wasi-snapshot-preview1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9c8d87e72b64a3b4db28d11ce29237c246188f4f51057d65a7eab63b7987e423"
 
+[[package]]
+name = "wasm-bindgen"
+version = "0.2.84"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "31f8dcbc21f30d9b8f2ea926ecb58f6b91192c17e9d33594b3df58b2007ca53b"
+dependencies = [
+ "cfg-if",
+ "wasm-bindgen-macro",
+]
+
+[[package]]
+name = "wasm-bindgen-backend"
+version = "0.2.84"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "95ce90fd5bcc06af55a641a86428ee4229e44e07033963a2290a8e241607ccb9"
+dependencies = [
+ "bumpalo",
+ "log",
+ "once_cell",
+ "proc-macro2",
+ "quote",
+ "syn",
+ "wasm-bindgen-shared",
+]
+
+[[package]]
+name = "wasm-bindgen-macro"
+version = "0.2.84"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4c21f77c0bedc37fd5dc21f897894a5ca01e7bb159884559461862ae90c0b4c5"
+dependencies = [
+ "quote",
+ "wasm-bindgen-macro-support",
+]
+
+[[package]]
+name = "wasm-bindgen-macro-support"
+version = "0.2.84"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2aff81306fcac3c7515ad4e177f521b5c9a15f2b08f4e32d823066102f35a5f6"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+ "wasm-bindgen-backend",
+ "wasm-bindgen-shared",
+]
+
+[[package]]
+name = "wasm-bindgen-shared"
+version = "0.2.84"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0046fef7e28c3804e5e38bfa31ea2a0f73905319b677e57ebe37e49358989b5d"
+
+[[package]]
+name = "web-sys"
+version = "0.3.61"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e33b99f4b23ba3eec1a53ac264e35a755f00e966e0065077d6027c0f575b0b97"
+dependencies = [
+ "js-sys",
+ "wasm-bindgen",
+]
+
 [[package]]
 name = "winapi"
 version = "0.3.9"
diff --git a/Cargo.toml b/Cargo.toml
index ad2d8c7..7bb7456 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -20,6 +20,7 @@ exclude = [
 
 [workspace]
 members = [
+    "examples/jotdown_wasm",
     "tests/afl",
 ]
 
diff --git a/Makefile b/Makefile
index c066fca..5c10e67 100644
--- a/Makefile
+++ b/Makefile
@@ -66,3 +66,4 @@ clean:
 	(cd tests/bench && make clean)
 	rm -f benches/*.dj
 	rm -rf tests/afl/out
+	(cd examples/jotdown_wasm && make clean)
diff --git a/examples/jotdown_wasm/Cargo.toml b/examples/jotdown_wasm/Cargo.toml
new file mode 100644
index 0000000..13dc212
--- /dev/null
+++ b/examples/jotdown_wasm/Cargo.toml
@@ -0,0 +1,19 @@
+[package]
+name = "jotdown_wasm"
+description = "Web demo of Jotdown"
+authors = ["Noah Hellman <noah@hllmn.net>"]
+license = "MIT"
+version = "0.1.0"
+edition = "2021"
+homepage = "https://hllmn.net/projects/jotdown"
+repository = "https://github.com/hellux/jotdown"
+
+[lib]
+crate-type = ["cdylib"]
+
+[dependencies]
+jotdown = { path = "../../" }
+wasm-bindgen = { version = "0.2", default-features = false }
+
+[dependencies.web-sys]
+version = "0.3"
diff --git a/examples/jotdown_wasm/Makefile b/examples/jotdown_wasm/Makefile
new file mode 100644
index 0000000..5c0c34c
--- /dev/null
+++ b/examples/jotdown_wasm/Makefile
@@ -0,0 +1,15 @@
+WASM=pkg/jotdown_wasm_bg.wasm
+
+SRC=$(shell find src ../../src -name '*.rs')
+
+${WASM}: ${SRC}
+	wasm-pack build --release --target web
+
+wasm: ${WASM}
+
+run: ${WASM}
+	python -m http.server
+
+clean:
+	rm -rf pkg
+	cargo clean
diff --git a/examples/jotdown_wasm/index.html b/examples/jotdown_wasm/index.html
new file mode 100644
index 0000000..9155096
--- /dev/null
+++ b/examples/jotdown_wasm/index.html
@@ -0,0 +1,33 @@
+<select id="fmt"><option value="preview">preview</option><option value="html">html</option></select>
+<div id="jotdown" style="display:flex;">
+  <script type="module">
+    import init, { jotdown_render } from './pkg/jotdown_wasm.js';
+    await init();
+
+    let output = document.getElementById("output");
+    let input = document.getElementById("input");
+    let fmt = document.getElementById("fmt");
+
+    function render() {
+        let html = jotdown_render(input.innerText);
+        console.log(fmt.value);
+        if (fmt.value == "html") {
+            output.classList.add("verbatim")
+            output.innerText = html;
+        } else if (fmt.value == "preview") {
+            output.classList.remove("verbatim")
+            output.innerHTML = html;
+        }
+    }
+
+    render()
+
+    input.onkeyup = render;
+    fmt.onchange = render;
+
+    // auto focus on input on load
+    setTimeout(() => { input.focus(); }, 0);
+  </script>
+  <pre id="input" contenteditable="true" placeholder="Input djot here" style="width:50%;height:100%;min-height:8em;max-height:20em;resize:none;margin:0">*Hello world!*</pre>
+  <pre id="output" readonly style="width:50%;height:100%;margin:0;min-height:8em;max-height:20em"></div></pre>
+</div>
diff --git a/examples/jotdown_wasm/src/lib.rs b/examples/jotdown_wasm/src/lib.rs
new file mode 100644
index 0000000..b5c16c0
--- /dev/null
+++ b/examples/jotdown_wasm/src/lib.rs
@@ -0,0 +1,10 @@
+use wasm_bindgen::prelude::*;
+
+#[must_use]
+#[wasm_bindgen]
+pub fn jotdown_render(djot: &str) -> String {
+    let events = jotdown::Parser::new(djot);
+    let mut html = String::new();
+    jotdown::html::push(events, &mut html);
+    html
+}