From b7e7755eddddc375273ffa28dfd1d5bdc86bee9f Mon Sep 17 00:00:00 2001
From: Lucas Kent <rubickent@gmail.com>
Date: Fri, 25 Feb 2022 22:57:46 +1100
Subject: [PATCH] Improve web example (#2115)

* Improve web example

* Implement basic logger into the example webpage

* Repace bash script with xtask

* replace wasm-bindgen-cli with wasm-bindgen-cli-support

* refactor

* Move logic into external crate.

* Remove CI changes

* Review feedback
---
 .cargo/config.toml   |  2 ++
 Cargo.toml           |  5 ++++
 README.md            |  2 ++
 examples/web.rs      | 55 +++++++++++++++++++++++++++++++++-----------
 run-wasm/Cargo.toml  |  9 ++++++++
 run-wasm/src/main.rs |  3 +++
 6 files changed, 63 insertions(+), 13 deletions(-)
 create mode 100644 .cargo/config.toml
 create mode 100644 run-wasm/Cargo.toml
 create mode 100644 run-wasm/src/main.rs

diff --git a/.cargo/config.toml b/.cargo/config.toml
new file mode 100644
index 00000000..a9f12423
--- /dev/null
+++ b/.cargo/config.toml
@@ -0,0 +1,2 @@
+[alias]
+run-wasm = ["run", "--release", "--package", "run-wasm", "--"]
diff --git a/Cargo.toml b/Cargo.toml
index 202c4bb7..239be285 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -125,3 +125,8 @@ version = "0.2.45"
 
 [target.'cfg(target_arch = "wasm32")'.dev-dependencies]
 console_log = "0.2"
+
+[workspace]
+members = [
+    "run-wasm",
+]
diff --git a/README.md b/README.md
index 9e8acede..88e44f80 100644
--- a/README.md
+++ b/README.md
@@ -71,6 +71,8 @@ Winit provides the following features, which can be enabled in your `Cargo.toml`
 
 #### WebAssembly
 
+To run the web example: `cargo run-wasm --example web`
+
 Winit supports compiling to the `wasm32-unknown-unknown` target with `web-sys`.
 
 On the web platform, a Winit window is backed by a `<canvas>` element. You can
diff --git a/examples/web.rs b/examples/web.rs
index 83ccc45e..d0f0c6ed 100644
--- a/examples/web.rs
+++ b/examples/web.rs
@@ -13,24 +13,13 @@ pub fn main() {
         .unwrap();
 
     #[cfg(target_arch = "wasm32")]
-    {
-        use winit::platform::web::WindowExtWebSys;
-
-        let canvas = window.canvas();
-
-        let window = web_sys::window().unwrap();
-        let document = window.document().unwrap();
-        let body = document.body().unwrap();
-
-        body.append_child(&canvas)
-            .expect("Append canvas to HTML body");
-    }
+    let log_list = wasm::create_log_list(&window);
 
     event_loop.run(move |event, _, control_flow| {
         *control_flow = ControlFlow::Wait;
 
         #[cfg(target_arch = "wasm32")]
-        log::debug!("{:?}", event);
+        wasm::log_event(&log_list, &event);
 
         match event {
             Event::WindowEvent {
@@ -48,6 +37,7 @@ pub fn main() {
 #[cfg(target_arch = "wasm32")]
 mod wasm {
     use wasm_bindgen::prelude::*;
+    use winit::{event::Event, window::Window};
 
     #[wasm_bindgen(start)]
     pub fn run() {
@@ -55,4 +45,43 @@ mod wasm {
 
         super::main();
     }
+
+    pub fn create_log_list(window: &Window) -> web_sys::Element {
+        use winit::platform::web::WindowExtWebSys;
+
+        let canvas = window.canvas();
+
+        let window = web_sys::window().unwrap();
+        let document = window.document().unwrap();
+        let body = document.body().unwrap();
+
+        // Set a background color for the canvas to make it easier to tell the where the canvas is for debugging purposes.
+        canvas.style().set_css_text("background-color: crimson;");
+        body.append_child(&canvas).unwrap();
+
+        let log_header = document.create_element("h2").unwrap();
+        log_header.set_text_content(Some("Event Log"));
+        body.append_child(&log_header).unwrap();
+
+        let log_list = document.create_element("ul").unwrap();
+        body.append_child(&log_list).unwrap();
+        log_list
+    }
+
+    pub fn log_event(log_list: &web_sys::Element, event: &Event<()>) {
+        log::debug!("{:?}", event);
+
+        // Getting access to browser logs requires a lot of setup on mobile devices.
+        // So we implement this basic logging system into the page to give developers an easy alternative.
+        // As a bonus its also kind of handy on desktop.
+        if let Event::WindowEvent { event, .. } = &event {
+            let window = web_sys::window().unwrap();
+            let document = window.document().unwrap();
+            let log = document.create_element("li").unwrap();
+            log.set_text_content(Some(&format!("{:?}", event)));
+            log_list
+                .insert_before(&log, log_list.first_child().as_ref())
+                .unwrap();
+        }
+    }
 }
diff --git a/run-wasm/Cargo.toml b/run-wasm/Cargo.toml
new file mode 100644
index 00000000..81a71ad2
--- /dev/null
+++ b/run-wasm/Cargo.toml
@@ -0,0 +1,9 @@
+[package]
+name = "run-wasm"
+version = "0.1.0"
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+cargo-run-wasm = "0.1.0"
diff --git a/run-wasm/src/main.rs b/run-wasm/src/main.rs
new file mode 100644
index 00000000..86e6dccd
--- /dev/null
+++ b/run-wasm/src/main.rs
@@ -0,0 +1,3 @@
+fn main() {
+    cargo_run_wasm::run_wasm();
+}