Web target (WASM+WGPU) support

Cargo.toml

@@ -86,6 +86,9 @@ stack_dst = ["kas-core/stack_dst", "kas-theme/stack_dst", "kas-wgpu/stack_dst"]
 # Use the unstable 'unsize' feature
 unsize = ["kas-theme/unsize", "kas-wgpu/unsize"]
 
+# Support web target (experimental)
+web = ["kas-wgpu/web"]
+
 winit = ["kas-core/winit"]
 
 [dependencies]

crates/kas-core/Cargo.toml

@@ -71,6 +71,7 @@ serde_json = { version = "1.0.61", optional = true }
 serde_yaml = { version = "0.8.16", optional = true }
 dep_ron = { version = "0.6.4", package = "ron", optional = true }
 image = "0.23.14"
+instant = "0.1.12"
 
 [dependencies.kas-macros]
 version = "0.10.1"

crates/kas-core/src/event/manager.rs

@@ -8,13 +8,13 @@
 // Without winit, several things go unused
 #![cfg_attr(not(feature = "winit"), allow(unused))]
 
+use instant::Instant;
 use linear_map::{set::LinearSet, LinearMap};
 use log::trace;
 use smallvec::SmallVec;
 use std::cell::RefCell;
 use std::collections::HashMap;
 use std::rc::Rc;
-use std::time::Instant;
 use std::u16;
 
 use super::*;

crates/kas-core/src/event/manager/mgr_pub.rs

@@ -5,8 +5,8 @@
 
 //! Event manager — public API
 
+use instant::{Duration, Instant};
 use log::{debug, error, trace};
-use std::time::{Duration, Instant};
 use std::u16;
 
 use super::*;

crates/kas-core/src/event/manager/mgr_shell.rs

@@ -5,11 +5,11 @@
 
 //! Event manager — shell API
 
+use instant::{Duration, Instant};
 use log::*;
 use smallvec::SmallVec;
 use std::collections::HashMap;
 use std::mem::swap;
-use std::time::{Duration, Instant};
 
 use super::*;
 use crate::cast::Conv;

crates/kas-wgpu/Cargo.toml

@@ -32,6 +32,9 @@ stack_dst = ["kas-theme/stack_dst"]
 # Use kas-theme's unsize feature (nightly-only)
 unsize = ["kas-theme/unsize"]
 
+# Support web target (experimental)
+web = ["wgpu/spirv-web"]
+
 [dependencies]
 bytemuck = "1.7.0"
 futures = "0.3"
@@ -43,6 +46,7 @@ thiserror = "1.0.23"
 window_clipboard = { version = "0.2.0", optional = true }
 guillotiere = "0.6.0"
 rustc-hash = "1.0"
+instant = "0.1.12"
 
 [dependencies.kas]
 # Rename package purely for convenience:

crates/kas-wgpu/src/event_loop.rs

@@ -5,10 +5,10 @@
 
 //! Event loop and handling
 
+use instant::Instant;
 use log::{debug, error};
 use smallvec::SmallVec;
 use std::collections::HashMap;
-use std::time::Instant;
 
 use winit::event::{Event, StartCause};
 use winit::event_loop::{ControlFlow, EventLoopWindowTarget};

crates/kas-wgpu/src/window.rs

@@ -5,8 +5,8 @@
 
 //! `Window` and `WindowList` types
 
+use instant::Instant;
 use log::{debug, error, info, trace};
-use std::time::Instant;
 
 use kas::cast::Cast;
 use kas::draw::{DrawIface, DrawShared, PassId, SizeHandle, ThemeApi};

crates/kas-widgets/Cargo.toml

@@ -29,6 +29,7 @@ unicode-segmentation = "1.7"
 linear-map = "1.2.0"
 thiserror = "1.0.23"
 image = "0.23.14"
+instant = "0.1.12"
 kas-macros = { version = "0.10.0", path = "../kas-macros" }
 
 # We must rename this package since macros expect kas to be in scope:

crates/kas-widgets/src/view/list_view.rs

@@ -9,13 +9,13 @@ use super::{driver, Driver, PressPhase, SelectionError, SelectionMode};
 #[allow(unused)] // doc links
 use crate::ScrollBars;
 use crate::{ScrollComponent, Scrollable};
+use instant::Instant;
 use kas::event::{ChildMsg, Command, CursorIcon, GrabMode, PressSource};
 use kas::layout::solve_size_rules;
 use kas::prelude::*;
 use kas::updatable::{ListData, UpdatableHandler};
 use linear_map::set::LinearSet;
 use log::{debug, trace};
-use std::time::Instant;
 use UpdatableHandler as UpdHandler;
 
 #[derive(Clone, Debug, Default)]

crates/kas-widgets/src/view/matrix_view.rs

@@ -9,13 +9,13 @@ use super::{driver, Driver, PressPhase, SelectionError, SelectionMode};
 #[allow(unused)] // doc links
 use crate::ScrollBars;
 use crate::{ScrollComponent, Scrollable};
+use instant::Instant;
 use kas::event::{ChildMsg, Command, CursorIcon, GrabMode, PressSource};
 use kas::layout::solve_size_rules;
 use kas::prelude::*;
 use kas::updatable::{MatrixData, UpdatableHandler};
 use linear_map::set::LinearSet;
 use log::{debug, trace};
-use std::time::Instant;
 use UpdatableHandler as UpdHandler;
 
 #[derive(Clone, Copy, Debug, Default)]

run-wasm-example.sh

@@ -0,0 +1,35 @@
+#!/usr/bin/env bash
+
+set -e
+
+# rustup target add wasm32-unknown-unknown
+
+echo "Compiling..."
+RUSTFLAGS=--cfg=web_sys_unstable_apis cargo build --example $1 --target wasm32-unknown-unknown --no-default-features --features wgpu,theme,web
+
+echo "Generating bindings..."
+mkdir -p target/wasm-examples/$1
+wasm-bindgen --debug --target web --out-dir target/wasm-examples/$1 target/wasm32-unknown-unknown/debug/examples/$1.wasm
+cat wasm-resources/index.template.html | sed "s/{{example}}/$1/g" > target/wasm-examples/$1/index.html
+
+# Find a serving tool to host the example
+SERVE_CMD=""
+SERVE_ARGS=""
+if which basic-http-server; then
+    SERVE_CMD="basic-http-server"
+    SERVE_ARGS="target/wasm-examples/$1 -a 127.0.0.1:1234"
+elif which miniserve && python3 -m http.server --help > /dev/null; then
+    SERVE_CMD="miniserve"
+    SERVE_ARGS="target/wasm-examples/$1 -p 1234 --index index.html"
+elif python3 -m http.server --help > /dev/null; then
+    SERVE_CMD="python3"
+    SERVE_ARGS="-m http.server --directory target/wasm-examples/$1 1234"
+fi
+
+# Exit if we couldn't find a tool to serve the example with
+if [ "$SERVE_CMD" = "" ]; then
+    echo "Couldn't find a utility to use to serve the example web page. You can serve the `target/wasm-examples/$1` folder yourself using any simple static http file server."
+fi
+
+echo "Serving example with $SERVE_CMD at http://localhost:1234"
+$SERVE_CMD $SERVE_ARGS

wasm-resources/README.md

@@ -0,0 +1,3 @@
+# WASM Resources
+
+This directory contains resources used when building examples for the web.

wasm-resources/index.template.html

@@ -0,0 +1,14 @@
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <script type="module">
+      import init from "./{{example}}.js";
+      window.addEventListener("load", () => {
+        init();
+      });
+    </script>
+  </body>
+</html>