add wasm-backend using HTML canvas element

cursive-core/Cargo.toml

@@ -34,6 +34,7 @@ lazy_static = "1"
 ahash = "0.8"
 serde_json = "1.0.85"
 serde_yaml = "0.9.11"
+futures = "0.3.28"
 
 [dependencies.cursive-macros]
 path = "../cursive-macros"
@@ -64,13 +65,40 @@ default-features = false
 optional = true
 version = "0.9"
 
+[dependencies.js-sys]
+version = "0.3.64"
+optional = true
+
+[dependencies.getrandom]
+optional = true
+version = "0.2"
+features = ["js"] 
+
+
+[dependencies.web-sys]
+optional = true
+version = "0.3.64"
+features = [
+    "Window",
+]
+
+[dependencies.wasm-bindgen]
+optional = true
+version = "0.2.87"
+
+[dependencies.wasm-bindgen-futures]
+optional = true
+version = "0.4.37"
+
 [features]
-default = []
+default = ["wasm"]
 doc-cfg = []
 builder = ["inventory", "cursive-macros/builder"]
 markdown = ["pulldown-cmark"]
 ansi = ["ansi-parser"]
 unstable_scroll = []  # Deprecated feature, remove in next version
+wasm = ["js-sys", "getrandom", "web-sys", "wasm-bindgen", "wasm-bindgen-futures", "async"]
+async = []
 
 [lib]
 name = "cursive_core"

cursive-core/src/cursive.rs

@@ -840,10 +840,17 @@ impl Cursive {
     /// Runs a dummy event loop.
     ///
     /// Initializes a dummy backend for the event loop.
+    #[cfg(not(feature = "async"))]
     pub fn run_dummy(&mut self) {
         self.run_with(backend::Dummy::init)
     }
 
+    /// run_dummy with async feature
+    #[cfg(feature = "async")]
+    pub fn run_dummy(&mut self) {
+        futures::executor::block_on(self.run_with(backend::Dummy::init))
+    }
+
     /// Returns a new runner on the given backend.
     ///
     /// Used to manually control the event loop. In most cases, running
@@ -871,16 +878,29 @@ impl Cursive {
     /// Initialize the backend and runs the event loop.
     ///
     /// Used for infallible backend initializers.
+    #[cfg(not(feature = "async"))]
     pub fn run_with<F>(&mut self, backend_init: F)
     where
         F: FnOnce() -> Box<dyn backend::Backend>,
     {
         self.try_run_with::<(), _>(|| Ok(backend_init())).unwrap();
     }
 
+    /// Initialize the backend and runs the event loop.
+    ///
+    /// Used for infallible backend initializers.
+    #[cfg(feature = "async")]
+    pub async fn run_with<F>(&mut self, backend_init: F)
+    where
+        F: FnOnce() -> Box<dyn backend::Backend>,
+    {
+        self.try_run_with::<(), _>(|| Ok(backend_init())).await.unwrap();
+    }
+
     /// Initialize the backend and runs the event loop.
     ///
     /// Returns an error if initializing the backend fails.
+    #[cfg(not(feature = "async"))]
     pub fn try_run_with<E, F>(&mut self, backend_init: F) -> Result<(), E>
     where
         F: FnOnce() -> Result<Box<dyn backend::Backend>, E>,
@@ -892,6 +912,19 @@ impl Cursive {
         Ok(())
     }
 
+    /// try run with async
+    #[cfg(feature = "async")]
+    pub async fn try_run_with<E, F>(&mut self, backend_init: F) -> Result<(), E>
+    where
+        F: FnOnce() -> Result<Box<dyn backend::Backend>, E>,
+    {
+        let mut runner = self.runner(backend_init()?);
+
+        runner.run().await;
+
+        Ok(())
+    }
+
     /// Stops the event loop.
     pub fn quit(&mut self) {
         self.running = false;

cursive-core/src/cursive_run.rs

@@ -1,5 +1,6 @@
 use crate::{backend, event::Event, theme, Cursive, Vec2};
 use std::borrow::{Borrow, BorrowMut};
+#[cfg(not(feature = "async"))]
 use std::time::Duration;
 
 // How long we wait between two empty input polls
@@ -151,6 +152,7 @@ where
     /// [1]: CursiveRunner::run()
     /// [2]: CursiveRunner::step()
     /// [3]: CursiveRunner::process_events()
+    #[cfg(not(feature = "async"))]
     pub fn post_events(&mut self, received_something: bool) {
         let boring = !received_something;
         // How many times should we try if it's still boring?
@@ -175,11 +177,67 @@ where
         }
 
         if boring {
-            std::thread::sleep(Duration::from_millis(INPUT_POLL_DELAY_MS));
+            self.sleep();
             self.boring_frame_count += 1;
         }
     }
 
+    /// post_events asynchronously
+    #[cfg(feature = "async")]
+    pub async fn post_events(&mut self, received_something: bool) {
+        let boring = !received_something;
+        // How many times should we try if it's still boring?
+        // Total duration will be INPUT_POLL_DELAY_MS * repeats
+        // So effectively fps = 1000 / INPUT_POLL_DELAY_MS / repeats
+        if !boring
+            || self
+                .fps()
+                .map(|fps| 1000 / INPUT_POLL_DELAY_MS as u32 / fps.get())
+                .map(|repeats| self.boring_frame_count >= repeats)
+                .unwrap_or(false)
+        {
+            // We deserve to draw something!
+
+            if boring {
+                // We're only here because of a timeout.
+                self.on_event(Event::Refresh);
+                self.process_pending_backend_calls();
+            }
+
+            self.refresh();
+        }
+
+        if boring {
+            self.sleep().await;
+            self.boring_frame_count += 1;
+        }
+    }
+
+    #[cfg(not(feature = "async"))]
+    fn sleep(&self) {
+        std::thread::sleep(Duration::from_millis(INPUT_POLL_DELAY_MS));
+    }
+
+    #[cfg(feature = "async")]
+    async fn sleep(&self) {
+        use wasm_bindgen::prelude::*;
+        let promise = js_sys::Promise::new(&mut |resolve, _| {
+            let closure = Closure::new(move || {
+                resolve.call0(&JsValue::null()).unwrap();
+            }) as Closure<dyn FnMut()>;
+            web_sys::window()
+                .expect("window is None for sleep")
+                .set_timeout_with_callback_and_timeout_and_arguments_0(
+                    closure.as_ref().unchecked_ref(),
+                    INPUT_POLL_DELAY_MS as i32,
+                )
+                .expect("should register timeout for sleep");
+            closure.forget();
+        });
+        let js_future = wasm_bindgen_futures::JsFuture::from(promise);
+        js_future.await.expect("should await sleep");
+    }
+
     /// Refresh the screen with the current view tree state.
     pub fn refresh(&mut self) {
         self.boring_frame_count = 0;
@@ -211,12 +269,21 @@ where
     /// during this step, and `false` otherwise.
     ///
     /// [`run(&mut self)`]: #method.run
+    #[cfg(not(feature = "async"))]
     pub fn step(&mut self) -> bool {
         let received_something = self.process_events();
         self.post_events(received_something);
         received_something
     }
 
+    /// step asynchronously
+    #[cfg(feature = "async")]
+    pub async fn step(&mut self) -> bool {
+        let received_something = self.process_events();
+        self.post_events(received_something).await;
+        received_something
+    }
+
     /// Runs the event loop.
     ///
     /// It will wait for user input (key presses)
@@ -230,6 +297,7 @@ where
     ///
     /// [`step(&mut self)`]: #method.step
     /// [`quit(&mut self)`]: #method.quit
+    #[cfg(not(feature = "async"))]
     pub fn run(&mut self) {
         self.refresh();
 
@@ -238,4 +306,15 @@ where
             self.step();
         }
     }
+
+    /// Runs the event loop asynchronously.
+    #[cfg(feature = "async")]
+    pub async fn run(&mut self) {
+        self.refresh();
+
+        // And the big event loop begins!
+        while self.is_running() {
+            self.step().await;
+        }
+    }    
 }

cursive/Cargo.toml

@@ -48,11 +48,33 @@ version = "2"
 optional = true
 version = "0.26"
 
+[dependencies.wasm-bindgen]
+optional = true
+version = "0.2.63"
+
+[dependencies.web-sys]
+optional = true
+version = "0.3.64"
+features = [
+    "HtmlCanvasElement",
+    "CanvasRenderingContext2d",
+    "KeyboardEvent",
+    "TextMetrics",
+    "Window",
+    "Document",
+    "console",
+]
+
+[dependencies.getrandom]
+optional = true
+version = "0.2"
+features = ["js"] 
+
 [features]
 doc-cfg = ["cursive_core/doc-cfg"]  # Enable doc_cfg, a nightly-only doc feature.
 builder = ["cursive_core/builder"]
 blt-backend = ["bear-lib-terminal"]
-default = ["ncurses-backend"]
+default = []
 ncurses-backend = ["ncurses", "maplit"]
 pancurses-backend = ["pancurses", "maplit"]
 termion-backend = ["termion"]
@@ -61,6 +83,8 @@ markdown = ["cursive_core/markdown"]
 ansi = ["cursive_core/ansi"]
 unstable_scroll = []  # Deprecated feature, remove in next version
 toml = ["cursive_core/toml"]
+wasm-backend = ["wasm-bindgen", "web-sys", "cursive_core/wasm", "async", "getrandom"]
+async = ["cursive_core/async"]
 
 [lib]
 name = "cursive"

cursive/src/backends/canvas.js

@@ -0,0 +1,34 @@
+const fontWidth = 12;
+const fontHeight = fontWidth * 2;
+const textColorPairSize = 12;
+
+export function paint(buffer) {
+    // console.time('paint');
+    const data = new Uint8Array(buffer);
+    const canvas = document.getElementById('cursive-wasm-canvas');
+    const context = canvas.getContext('2d');
+    context.font = `${fontHeight - 2}px monospace`;
+    for (let x = 0; x < 1000; x++) {
+        for (let y = 0; y < 1000; y++) {
+            const n = 1000 * y + x;
+            const textColorPair = data.slice(n * textColorPairSize, (n + 1) * textColorPairSize);
+            const text = String.fromCharCode(textColorPair[0] + (2**8) *textColorPair[1] + (2**16)* textColorPair[2] + (2 ** 24) + textColorPair[3]);
+            const front = byte_to_hex_string(textColorPair.slice(4, 7));
+            const back = byte_to_hex_string(textColorPair.slice(7, 10));
+            context.fillStyle = back;
+            context.fillRect(x * fontWidth, y * fontHeight, fontWidth, fontHeight);
+            if (text != ' ') {
+                context.fillStyle = front;
+                context.fillText(text, x * fontWidth, (y + 0.8) * fontHeight);
+            }
+        }
+    }
+    // console.timeEnd('paint');
+}
+
+function byte_to_hex_string(bytes) {
+    const red = bytes[0].toString(16).padStart(2, '0');
+    const green = bytes[1].toString(16).padStart(2, '0');
+    const blue = bytes[2].toString(16).padStart(2, '0');
+    return  `#${red}${green}${blue}`;
+}

cursive/src/backends/mod.rs

@@ -16,6 +16,8 @@ pub mod crossterm;
 pub mod curses;
 pub mod puppet;
 pub mod termion;
+/// Provides a backend using the `wasm`.
+pub mod wasm;
 
 #[allow(dead_code)]
 fn boxed(e: impl std::error::Error + 'static) -> Box<dyn std::error::Error> {
@@ -30,6 +32,7 @@ fn boxed(e: impl std::error::Error + 'static) -> Box<dyn std::error::Error> {
 /// * Crossterm
 /// * Pancurses
 /// * Ncurses
+/// * wasm
 /// * Dummy
 pub fn try_default() -> Result<Box<dyn cursive_core::backend::Backend>, Box<dyn std::error::Error>>
 {
@@ -44,6 +47,8 @@ pub fn try_default() -> Result<Box<dyn cursive_core::backend::Backend>, Box<dyn
             curses::pan::Backend::init().map_err(boxed)
         } else if #[cfg(feature = "ncurses-backend")] {
             curses::n::Backend::init().map_err(boxed)
+        } else if #[cfg(feature = "wasm-backend")] {
+            wasm::Backend::init().map_err(boxed)
         } else {
             log::warn!("No built-it backend, falling back to Dummy backend.");
             Ok(cursive_core::backend::Dummy::init())