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

@@ -0,0 +1,2 @@
+[alias]
+run-wasm = ["run", "--release", "--package", "run-wasm", "--"]

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",
+]

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

examples/web.rs

@@ -13,24 +13,13 @@ pub fn main() {
         .unwrap();
 
     #[cfg(target_arch = "wasm32")]
-    {
+    let log_list = wasm::create_log_list(&window);
-        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");
-    }
 
     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();
+        }
+    }
 }

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"

run-wasm/src/main.rs

@@ -0,0 +1,3 @@
+fn main() {
+    cargo_run_wasm::run_wasm();
+}